/* ==========================================================================
   EdgeRoute Hosting — Store domain search

   WHMCS renders its "check availability" form into .domain-checker-bg on the
   Register / Transfer / Renew a domain pages. The order form theme hid that
   element outright, which left those pages with an empty panel and no field to
   search with (the product flow has its own domain inputs, so nothing else
   covered it).

   The order form's own stylesheet is fixed too (templates/orderforms/edge_cart/
   css/edge-cart.css), but WHMCS stamps that file with its release hash and the
   CDN caches it for hours - so this theme-owned copy, cache-busted on every
   change, is what actually reaches visitors.

   Companion to the domain form JS in templates/edge/footer.tpl.
   ========================================================================== */

/* ---- the form itself ---------------------------------------------------- */
/* Specificity is deliberately higher than the order form's own
   `#order-standard_cart .domain-checker-bg { display: none !important }`:
   that file is served with WHMCS's release hash and the CDN caches it for
   hours, so a stale copy can still be in play after the fix. */
body #order-standard_cart .domain-checker-container > .domain-checker-bg,
body #order-standard_cart .domain-checker-bg { display: block !important; }

/* WHMCS wraps the input in a centred 8-column div - use the whole panel */
#order-standard_cart .domain-checker-bg .row > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart .domain-checker-bg .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px !important;
    width: 100% !important;
}

#order-standard_cart .domain-checker-bg #inputDomain {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 56px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    line-height: 56px !important;
    color: var(--er-text) !important;
    background: var(--er-surface-2, #f8fafd) !important;
    border: 1px solid var(--er-border-2, rgba(11,18,32,.18)) !important;
    border-radius: var(--er-radius, 16px) !important;
    box-shadow: none !important;
}

#order-standard_cart .domain-checker-bg #inputDomain::placeholder { color: var(--er-text-3, #7a8ba4) !important; }

#order-standard_cart .domain-checker-bg #inputDomain:focus {
    border-color: var(--er-blue, #00A3FF) !important;
    box-shadow: 0 0 0 4px rgba(0, 163, 255, .16) !important;
    outline: 0 !important;
}

#order-standard_cart .domain-checker-bg .input-group-btn,
#order-standard_cart .domain-checker-bg .input-group-append { margin: 0 !important; }

body #order-standard_cart .domain-checker-bg #btnCheckAvailability {
    width: auto !important;
    min-width: 132px;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 32px !important;
    border: 0 !important;
    border-radius: var(--er-radius, 16px) !important;
    background: var(--er-gradient, linear-gradient(135deg, #0B6FE8, #00A3FF 52%, #22D3EE)) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: var(--er-glow) !important;
    transition: transform .15s ease, opacity .15s ease;
}
body #order-standard_cart .domain-checker-bg #btnCheckAvailability:hover { transform: translateY(-1px); opacity: .95; }
body #order-standard_cart .domain-checker-bg #btnCheckAvailability.is-busy { pointer-events: none; opacity: .85; }

@media (max-width: 640px) {
    body #order-standard_cart .domain-checker-bg .input-group { flex-direction: column !important; }
    body #order-standard_cart .domain-checker-bg #inputDomain {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 0 auto !important;
    }
    body #order-standard_cart .domain-checker-bg #btnCheckAvailability {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ---- extras injected by the theme's JS --------------------------------- */
.er-domain-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.er-domain-chips-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--er-text-3);
}
.er-domain-chip {
    padding: 6px 14px;
    border: 1px solid var(--er-border);
    border-radius: 999px;
    background: var(--er-surface-2);
    color: var(--er-text-2);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.er-domain-chip:hover {
    color: var(--er-text);
    border-color: rgba(0, 163, 255, .5);
    background: var(--er-surface-3);
}

.er-domain-msg { display: none; margin-top: 10px; font-size: .84rem; }
.er-domain-msg.is-visible { display: block; }
.er-domain-msg.is-error { color: #E5484D; font-weight: 600; }
.er-domain-msg.is-info { color: var(--er-text-3); }

/* ---------------------------------------------------------------------------
   Availability results
   WHMCS prints these with the stock order-form look; the sizes/colours below
   bring them in line with the theme. Everything is scoped to #DomainSearchResults
   so no other page is affected.
   --------------------------------------------------------------------------- */

#DomainSearchResults { margin-top: 28px !important; }

/* section headers ("Exact Match", "Top Suggestion", "Suggested Domains") */
#DomainSearchResults .primary-domain-header,
#DomainSearchResults .suggested-domains {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--er-text-3, #7a8ba4) !important;
}
#DomainSearchResults .suggested-domains {
    display: block !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* the headline block that reports available / unavailable / invalid */
#DomainSearchResults .domain-checker-result-headline {
    margin: 0 !important;
    padding: 24px 22px !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    background: var(--er-surface-2, #f4f7fb) !important;
    border: 1px solid var(--er-border, rgba(120,150,190,.28)) !important;
    border-radius: var(--er-radius, 16px) !important;
}
#DomainSearchResults .domain-checker-result-headline > p,
#DomainSearchResults .domain-checker-result-headline .domain-lookup-result > p {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}
#DomainSearchResults .domain-checker-result-headline > p.domain-lookup-loader,
#DomainSearchResults .domain-searching {
    font-size: 15px !important;
    font-weight: 600 !important;
}
#DomainSearchResults .domain-checker-result-headline strong { font-weight: 800 !important; }
#DomainSearchResults .domain-checker-result-headline .domain-length-restrictions { font-weight: 500 !important; font-size: .9rem !important; }

#DomainSearchResults .domain-available.domain-checker-available { color: #0E9F6E !important; }
#DomainSearchResults .domain-unavailable.domain-checker-unavailable,
#DomainSearchResults .domain-tld-unavailable.domain-checker-unavailable,
#DomainSearchResults .domain-error.domain-checker-unavailable { color: #D64545 !important; font-size: .95rem !important; }
#DomainSearchResults .domain-invalid.domain-checker-invalid { color: #B7791F !important; }
#DomainSearchResults .domain-available::before { content: "✓  "; }
#DomainSearchResults .domain-unavailable::before,
#DomainSearchResults .domain-tld-unavailable::before { content: "✕  "; }
#DomainSearchResults .domain-invalid::before { content: "!  "; }

/* price + add to cart on the primary lookup */
#DomainSearchResults .domain-price {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0 !important;
}
#DomainSearchResults .domain-price .price {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--er-text, #0f1b2d) !important;
}
#DomainSearchResults .btn-add-to-cart,
#DomainSearchResults .domain-contact-support {
    padding: 12px 24px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--er-gradient, linear-gradient(135deg, #0B6FE8, #00A3FF 52%, #22D3EE)) !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    box-shadow: var(--er-glow, 0 10px 24px rgba(11, 111, 232, .28)) !important;
}
#DomainSearchResults .btn-add-to-cart:hover,
#DomainSearchResults .domain-contact-support:hover { transform: translateY(-1px); }
#DomainSearchResults .btn.unavailable,
#DomainSearchResults .btn.invalid {
    background: var(--er-surface-2, #f4f7fb) !important;
    border: 1px solid var(--er-border, rgba(120,150,190,.28)) !important;
    color: var(--er-text-3, #7a8ba4) !important;
    box-shadow: none !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
}

/* spotlight TLD cards ("exact match" alternatives) */
#DomainSearchResults .spotlight-tlds { margin-top: 6px !important; }
#DomainSearchResults .spotlight-tld {
    margin-bottom: 14px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    background: var(--er-surface, #fff) !important;
    border: 1px solid var(--er-border, rgba(120,150,190,.28)) !important;
    border-radius: var(--er-radius-sm, 12px) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#DomainSearchResults .spotlight-tld:hover {
    border-color: rgba(0, 163, 255, .55) !important;
    box-shadow: 0 12px 26px rgba(11, 111, 232, .12) !important;
}
#DomainSearchResults .spotlight-tld .tld-name,
#DomainSearchResults .spotlight-tld strong { font-size: 1rem !important; font-weight: 800 !important; color: var(--er-text) !important; }
#DomainSearchResults .spotlight-tld .price,
#DomainSearchResults .spotlight-tld .price-amount { font-weight: 700 !important; color: var(--er-text) !important; font-size: .95rem !important; }
#DomainSearchResults .spotlight-tld .domain-lookup-result { font-size: .88rem !important; color: var(--er-text-2) !important; margin: 8px 0 !important; }
#DomainSearchResults .spotlight-tld .btn { width: 100% !important; margin-top: 8px !important; }
#DomainSearchResults .spotlight-tld .domain-lookup-loader { font-size: .85rem !important; color: var(--er-text-3) !important; }

/* suggestion list */
#DomainSearchResults #domainSuggestions {
    padding: 0 !important;
    margin-top: 4px !important;
    overflow: hidden;
    background: var(--er-surface, #fff) !important;
    border: 1px solid var(--er-border, rgba(120,150,190,.28)) !important;
    border-radius: var(--er-radius, 16px) !important;
}
#DomainSearchResults #domainSuggestions .domain-suggestion {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px;
    padding: 13px 18px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--er-border, rgba(120,150,190,.28)) !important;
    background: transparent !important;
    color: var(--er-text, #0f1b2d) !important;
    font-size: .95rem !important;
    text-align: start !important;
}
#DomainSearchResults #domainSuggestions .domain-suggestion:last-child { border-bottom: 0 !important; }
#DomainSearchResults #domainSuggestions .domain-suggestion:hover { background: var(--er-surface-2, #f4f7fb) !important; }
#DomainSearchResults #domainSuggestions .domain-suggestion button,
#DomainSearchResults #domainSuggestions .domain-suggestion .btn {
    flex: 0 0 auto;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    font-size: .8rem !important;
}
#DomainSearchResults #domainSuggestions .domain-suggestion .domain-pricing { display: none !important; }
#DomainSearchResults .more-suggestions {
    margin: 0 !important;
    padding: 14px !important;
    background: transparent !important;
    border-top: 1px solid var(--er-border, rgba(120,150,190,.28)) !important;
}
#DomainSearchResults .more-suggestions a { font-weight: 700 !important; }
#DomainSearchResults .domain-suggestions-warning {
    margin-top: 12px !important;
    font-size: .8rem !important;
    color: var(--er-text-3, #7a8ba4) !important;
}

/* the "loading" and "no results" states */
#DomainSearchResults .domain-lookup-loader,
#DomainSearchResults .domain-searching { font-size: .95rem !important; color: var(--er-text-2) !important; }
#DomainSearchResults .no-more { display: block; margin-top: 10px; color: var(--er-text-3) !important; font-size: .82rem !important; }

@media (max-width: 640px) {
    #DomainSearchResults .domain-checker-result-headline { padding: 20px 14px !important; }
    #DomainSearchResults .domain-price .price { font-size: 1.25rem !important; }
    #DomainSearchResults #domainSuggestions .domain-suggestion {
        flex-wrap: wrap;
        padding: 12px 14px !important;
        font-size: .88rem !important;
    }
    #DomainSearchResults #domainSuggestions .domain-suggestion .btn { width: auto !important; }
    #DomainSearchResults .btn-add-to-cart,
    #DomainSearchResults .domain-contact-support { width: 100% !important; }
}