/*
===============================================================================
EXOHOST ORDER EXPERIENCE
===============================================================================

Product:        ExoHost Client Portal
System:         Commerce & Infrastructure Ordering
Stylesheet:     exo-order.css

Purpose:
Provides the presentation layer for ExoHost's customer-facing ordering
experience while WHMCS remains the underlying commerce engine.

Design principles:
- ExoHost owns the customer experience.
- WHMCS owns commerce functionality.
- Infrastructure should feel professional, clear and dependable.
- Avoid unnecessary visual complexity.
- Use restrained brand application.
- Maintain strong responsive and accessibility behaviour.

Architecture:
01. Design Tokens
02. Foundation
03. Order Workspace
04. Typography
05. Shared Section Headers
06. Buttons
07. Form Controls
08. Domain Registration
09. Domain Search
10. CAPTCHA & IDN
11. Domain Lookup States
12. Available Domain
13. Domain Alternatives
14. Spotlight Domains
15. Domain Suggestions
16. Domain Pricing
17. Featured TLDs
18. TLD Directory
19. Domain Services
20. WHMCS Compatibility
21. Accessibility
22. Responsive
23. Reduced Motion
===============================================================================
*/


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

#order-exohost {

    /* Brand */
    --exo-order-primary: #004d26;
    --exo-order-primary-hover: #006633;
    --exo-order-primary-dark: #00391d;
    --exo-order-primary-soft: #eef8f2;
    --exo-order-primary-border: #cfe7da;

    --exo-order-gold: #c28840;
    --exo-order-gold-dark: #a76f30;
    --exo-order-gold-soft: #f8f1e8;

    /* Text */
    --exo-order-ink: #10233f;
    --exo-order-text: #33445f;
    --exo-order-text-soft: #60708a;
    --exo-order-muted: #8b9ab0;

    /* Surfaces */
    --exo-order-white: #ffffff;
    --exo-order-surface: #ffffff;
    --exo-order-surface-soft: #f8fafc;
    --exo-order-surface-muted: #f3f6f9;

    /* Borders */
    --exo-order-border: #dbe3ec;
    --exo-order-border-soft: #edf1f5;
    --exo-order-border-strong: #cbd5e1;

    /* Status */
    --exo-order-success: #087443;
    --exo-order-success-soft: #effaf4;
    --exo-order-success-border: #ccebd9;

    --exo-order-warning: #a86400;
    --exo-order-warning-soft: #fff8eb;
    --exo-order-warning-border: #f1dfba;

    --exo-order-danger: #c62828;
    --exo-order-danger-soft: #fff5f5;
    --exo-order-danger-border: #f0cccc;

    --exo-order-info: #2563eb;
    --exo-order-info-soft: #eff6ff;

    /* Typography */
    --exo-order-font:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --exo-order-heading-font:
        "Manrope",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Radius */
    --exo-order-radius-xs: 5px;
    --exo-order-radius-sm: 8px;
    --exo-order-radius-md: 10px;
    --exo-order-radius-lg: 12px;
    --exo-order-radius-xl: 16px;
    --exo-order-radius-pill: 999px;

    /* Shadows */
    --exo-order-shadow-xs:
        0 1px 2px rgba(16, 35, 63, .03);

    --exo-order-shadow-sm:
        0 2px 8px rgba(16, 35, 63, .05);

    --exo-order-shadow-md:
        0 10px 28px rgba(16, 35, 63, .08);

    /* Motion */
    --exo-order-transition:
        180ms ease;

    /* Layout */
    --exo-order-content-width: 1180px;
}


/* ==========================================================================
   02. FOUNDATION
   ========================================================================== */

#order-exohost,
#order-exohost *,
#order-exohost *::before,
#order-exohost *::after {
    box-sizing: border-box;
}

#order-exohost {
    width: 100%;
    margin: 0;
    padding: 0 0 64px;
    color: var(--exo-order-text);
    font-family: var(--exo-order-font);
    font-size: 14px;
    line-height: 1.6;
}

#order-exohost img {
    max-width: 100%;
    height: auto;
}

#order-exohost button,
#order-exohost input,
#order-exohost select,
#order-exohost textarea {
    font: inherit;
}

#order-exohost button,
#order-exohost a {
    -webkit-tap-highlight-color: transparent;
}

#order-exohost a {
    color: var(--exo-order-primary);
    text-decoration: none;
}

#order-exohost a:hover {
    color: var(--exo-order-primary-hover);
}

#order-exohost p {
    margin-top: 0;
}

#order-exohost [hidden] {
    display: none !important;
}


/* ==========================================================================
   03. ORDER WORKSPACE
   ========================================================================== */

#order-exohost .exo-order-workspace {
    width: 100%;
    max-width: var(--exo-order-content-width);
    margin: 0 auto;
}


/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */

#order-exohost h1,
#order-exohost h2,
#order-exohost h3,
#order-exohost h4,
#order-exohost h5,
#order-exohost h6 {
    margin-top: 0;
    color: var(--exo-order-ink);
    font-family: var(--exo-order-heading-font);
    font-weight: 700;
    letter-spacing: -.018em;
}

#order-exohost .exo-order-header {
    margin: 0 0 28px;
}

#order-exohost .exo-order-eyebrow,
#order-exohost .exo-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    color: var(--exo-order-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .075em;
    text-transform: uppercase;
}

#order-exohost .exo-order-eyebrow i {
    font-size: 11px;
}

#order-exohost .exo-order-title {
    margin: 0;
    color: var(--exo-order-ink);
    font-size: 30px;
    line-height: 1.18;
}

#order-exohost .exo-order-description {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--exo-order-text-soft);
    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================================
   05. SHARED SECTION HEADERS
   ========================================================================== */

#order-exohost .exo-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

#order-exohost .exo-section-header > div {
    min-width: 0;
}

#order-exohost .exo-section-header h2 {
    margin: 0;
    color: var(--exo-order-ink);
    font-size: 20px;
    line-height: 1.3;
}

#order-exohost .exo-section-header p {
    max-width: 680px;
    margin: 5px 0 0;
    color: var(--exo-order-text-soft);
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================================
   06. BUTTONS
   ========================================================================== */

#order-exohost .exo-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 9px 16px;

    border: 1px solid transparent;
    border-radius: var(--exo-order-radius-sm);

    font-family: var(--exo-order-font);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--exo-order-transition),
        border-color var(--exo-order-transition),
        color var(--exo-order-transition),
        box-shadow var(--exo-order-transition),
        transform var(--exo-order-transition);
}

#order-exohost .exo-button:hover,
#order-exohost .exo-button:focus {
    text-decoration: none;
}

#order-exohost .exo-button-primary {
    border-color: var(--exo-order-primary);
    background: var(--exo-order-primary);
    color: var(--exo-order-white);
}

#order-exohost .exo-button-primary:hover,
#order-exohost .exo-button-primary:focus {
    border-color: var(--exo-order-primary-hover);
    background: var(--exo-order-primary-hover);
    color: var(--exo-order-white);

    box-shadow:
        0 4px 12px rgba(0, 77, 38, .14);
}

#order-exohost .exo-button-secondary {
    border-color: var(--exo-order-border);
    background: var(--exo-order-white);
    color: var(--exo-order-text);
}

#order-exohost .exo-button-secondary:hover,
#order-exohost .exo-button-secondary:focus {
    border-color: var(--exo-order-primary-border);
    background: var(--exo-order-primary-soft);
    color: var(--exo-order-primary);
}

#order-exohost .exo-button:disabled,
#order-exohost .exo-button[disabled] {
    border-color: var(--exo-order-border);
    background: var(--exo-order-surface-muted);
    color: var(--exo-order-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .75;
}


/* ==========================================================================
   07. FORM CONTROLS
   ========================================================================== */

#order-exohost .exo-order-input,
#order-exohost .exo-order-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-sm);

    outline: none;
    background: var(--exo-order-white);
    color: var(--exo-order-ink);

    font-size: 13px;

    box-shadow: none;

    transition:
        border-color var(--exo-order-transition),
        box-shadow var(--exo-order-transition);
}

#order-exohost .exo-order-input::placeholder {
    color: var(--exo-order-muted);
}

#order-exohost .exo-order-input:hover,
#order-exohost .exo-order-select:hover {
    border-color: var(--exo-order-border-strong);
}

#order-exohost .exo-order-input:focus,
#order-exohost .exo-order-select:focus {
    border-color: var(--exo-order-primary);

    box-shadow:
        0 0 0 3px rgba(0, 77, 38, .08);
}

#order-exohost label {
    color: var(--exo-order-text);
    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================================
   08. DOMAIN REGISTRATION
   ========================================================================== */

#order-exohost.exo-domain-register {
    width: 100%;
}

#order-exohost .exo-domain-search,
#order-exohost .exo-domain-alternatives,
#order-exohost .exo-domain-pricing,
#order-exohost .exo-domain-services {
    width: 100%;
}

#order-exohost .exo-domain-alternatives,
#order-exohost .exo-domain-pricing,
#order-exohost .exo-domain-services {
    margin-top: 38px;
}


/* ==========================================================================
   09. DOMAIN SEARCH
   ========================================================================== */

#order-exohost .exo-domain-search {
    padding: 22px;
    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-lg);
    background: var(--exo-order-white);
    box-shadow: var(--exo-order-shadow-sm);
}

#order-exohost .exo-domain-search-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px;
}

#order-exohost .exo-domain-search-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--exo-order-primary-border);
    border-radius: var(--exo-order-radius-sm);

    background: var(--exo-order-primary-soft);
    color: var(--exo-order-primary);

    font-size: 13px;
}

#order-exohost .exo-domain-search-heading {
    min-width: 0;
}

#order-exohost .exo-domain-search-heading h2 {
    margin: 0;
    color: var(--exo-order-ink);
    font-size: 15px;
    line-height: 1.4;
}

#order-exohost .exo-domain-search-heading p {
    margin: 3px 0 0;
    color: var(--exo-order-text-soft);
    font-size: 12px;
    line-height: 1.55;
}

#order-exohost .exo-domain-search-form {
    margin: 0;
}

#order-exohost .exo-domain-search-control {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

#order-exohost .exo-domain-search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

#order-exohost .exo-domain-search-field-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;

    color: var(--exo-order-muted);
    font-size: 12px;

    pointer-events: none;

    transform: translateY(-50%);
}

#order-exohost .exo-domain-search-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 15px 10px 40px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-sm);

    outline: none;
    background: var(--exo-order-white);
    color: var(--exo-order-ink);

    font-size: 14px;

    box-shadow: none;

    transition:
        border-color var(--exo-order-transition),
        box-shadow var(--exo-order-transition);
}

#order-exohost .exo-domain-search-input::placeholder {
    color: var(--exo-order-muted);
}

#order-exohost .exo-domain-search-input:hover {
    border-color: var(--exo-order-border-strong);
}

#order-exohost .exo-domain-search-input:focus {
    border-color: var(--exo-order-primary);

    box-shadow:
        0 0 0 3px rgba(0, 77, 38, .08);
}

#order-exohost .exo-domain-search-button {
    flex: 0 0 auto;
    min-width: 116px;
    min-height: 48px;
}

#order-exohost .exo-domain-search-help {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 9px;

    color: var(--exo-order-text-soft);
    font-size: 11px;
    line-height: 1.5;
}

#order-exohost .exo-domain-search-help i {
    margin-top: 3px;
    color: var(--exo-order-primary);
    font-size: 10px;
}


/* ==========================================================================
   10. CAPTCHA & IDN
   ========================================================================== */

#order-exohost .exo-domain-captcha,
#order-exohost .exo-domain-idn {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--exo-order-border-soft);
}

#order-exohost .exo-domain-captcha-content {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

#order-exohost .exo-domain-captcha-image {
    flex: 0 0 auto;
}

#order-exohost .exo-domain-captcha-image img {
    display: block;
    max-height: 44px;
    border-radius: var(--exo-order-radius-xs);
}

#order-exohost .exo-domain-captcha-field {
    width: 220px;
    max-width: 100%;
}

#order-exohost .exo-domain-captcha-field label,
#order-exohost .exo-domain-idn label {
    display: block;
    margin-bottom: 6px;
}

#order-exohost .exo-domain-idn {
    max-width: 420px;
}


/* ==========================================================================
   11. DOMAIN LOOKUP STATES
   ========================================================================== */

#order-exohost .exo-domain-results {
    margin-top: 20px;
}

#order-exohost .exo-domain-searching {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 17px 18px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-md);

    background: var(--exo-order-surface-soft);
}

#order-exohost .exo-domain-searching-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: var(--exo-order-radius-sm);

    background: var(--exo-order-primary-soft);
    color: var(--exo-order-primary);
}

#order-exohost .exo-domain-searching-copy {
    min-width: 0;
}

#order-exohost .exo-domain-searching-copy strong {
    display: block;
    color: var(--exo-order-ink);
    font-size: 12px;
    font-weight: 650;
}

#order-exohost .exo-domain-searching-copy span {
    display: block;
    margin-top: 2px;
    color: var(--exo-order-text-soft);
    font-size: 11px;
}

#order-exohost .exo-domain-result-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 16px 18px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-md);
}

#order-exohost .exo-domain-result-state-icon {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: var(--exo-order-radius-sm);
}

#order-exohost .exo-domain-result-state strong {
    display: block;
    margin: 1px 0 2px;
    color: var(--exo-order-ink);
    font-size: 12px;
    font-weight: 650;
}

#order-exohost .exo-domain-result-state p {
    margin: 0;
    color: var(--exo-order-text-soft);
    font-size: 11px;
    line-height: 1.55;
}

#order-exohost .exo-domain-result-error {
    border-color: var(--exo-order-danger-border);
    background: var(--exo-order-danger-soft);
}

#order-exohost .exo-domain-result-error
.exo-domain-result-state-icon {
    background: rgba(198, 40, 40, .08);
    color: var(--exo-order-danger);
}


/* ==========================================================================
   12. AVAILABLE DOMAIN
   ========================================================================== */

#order-exohost .exo-domain-available {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 18px;

    border: 1px solid var(--exo-order-success-border);
    border-radius: var(--exo-order-radius-md);

    background: var(--exo-order-success-soft);
}

#order-exohost .exo-domain-available-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

#order-exohost .exo-domain-available-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--exo-order-success);
    color: var(--exo-order-white);

    font-size: 12px;
}

#order-exohost .exo-domain-status-label {
    display: block;
    margin-bottom: 1px;

    color: var(--exo-order-success);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#order-exohost .exo-domain-available-name {
    display: block;

    color: var(--exo-order-ink);

    font-family: var(--exo-order-heading-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

#order-exohost .exo-domain-available-status p {
    margin: 3px 0 0;
    color: var(--exo-order-text-soft);
    font-size: 11px;
}

#order-exohost .exo-domain-available-commerce {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
}

#order-exohost .exo-domain-price {
    text-align: right;
}

#order-exohost .exo-domain-price-label {
    display: block;
    margin-bottom: 1px;

    color: var(--exo-order-text-soft);
    font-size: 10px;
}

#order-exohost .exo-domain-price .price,
#order-exohost .exo-domain-available-commerce .price {
    color: var(--exo-order-ink);
    font-family: var(--exo-order-heading-font);
    font-size: 17px;
    font-weight: 700;
}


/* ==========================================================================
   13. DOMAIN ALTERNATIVES
   ========================================================================== */

#order-exohost .exo-domain-alternatives {
    padding-top: 2px;
}


/* ==========================================================================
   14. SPOTLIGHT DOMAINS
   ========================================================================== */

#order-exohost .exo-domain-spotlight {
    width: 100%;
}

#order-exohost .exo-domain-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 70px;
    padding: 16px;

    color: var(--exo-order-text-soft);
    font-size: 11px;
}

#order-exohost .exo-domain-loader i {
    color: var(--exo-order-primary);
}

#order-exohost .exo-domain-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin: 0;
    padding: 0;

    background: transparent;
}

#order-exohost .exo-domain-spotlight-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    min-width: 0;
    min-height: 86px;
    height: auto;
    padding: 15px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-md);

    background: var(--exo-order-white);

    box-shadow: var(--exo-order-shadow-xs);

    transition:
        border-color var(--exo-order-transition),
        box-shadow var(--exo-order-transition),
        transform var(--exo-order-transition);
}

#order-exohost .exo-domain-spotlight-card:hover {
    border-color: var(--exo-order-primary-border);
    box-shadow: var(--exo-order-shadow-sm);
    transform: translateY(-1px);
}

#order-exohost .exo-domain-spotlight-card-main {
    min-width: 0;
}

#order-exohost .exo-domain-spotlight-extension {
    color: var(--exo-order-ink);
    font-family: var(--exo-order-heading-font);
    font-size: 16px;
    font-weight: 700;
}

#order-exohost .exo-domain-badge {
    display: inline-flex;
    align-items: center;

    margin-top: 5px;
    padding: 3px 7px;

    border-radius: var(--exo-order-radius-pill);

    background: var(--exo-order-primary-soft);
    color: var(--exo-order-primary);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
}

#order-exohost .exo-domain-spotlight-result {
    flex: 0 0 auto;
    text-align: right;
}

#order-exohost .exo-domain-spotlight-result
.domain-unavailable {
    color: var(--exo-order-muted);
    font-size: 10px;
}

#order-exohost .exo-domain-spotlight-result
.domain-available {
    align-items: center;
    gap: 8px;
}

#order-exohost .exo-domain-spotlight-result
.domain-price {
    display: block;
    margin-bottom: 5px;
}

#order-exohost .exo-domain-spotlight-result
.price {
    color: var(--exo-order-ink);
    font-size: 11px;
    font-weight: 650;
}


/* ==========================================================================
   15. DOMAIN SUGGESTIONS
   ========================================================================== */

#order-exohost .exo-domain-suggestions {
    margin-top: 14px;
}

#order-exohost .exo-domain-suggestion-list {
    overflow: hidden;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-md);

    background: var(--exo-order-white);
}

#order-exohost .exo-domain-suggestion {
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 13px 15px;

    border-bottom: 1px solid var(--exo-order-border-soft);
}

#order-exohost .exo-domain-suggestion-name {
    min-width: 0;

    color: var(--exo-order-ink);

    font-size: 13px;
    font-weight: 650;

    overflow-wrap: anywhere;
}

#order-exohost .exo-domain-suggestion-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

#order-exohost .exo-domain-suggestion-actions
.domain-price {
    color: var(--exo-order-text);
    font-size: 11px;
    font-weight: 650;
}

#order-exohost .exo-domain-more {
    padding: 13px;
    text-align: center;
}

#order-exohost .exo-domain-no-more {
    padding: 13px 15px;

    color: var(--exo-order-muted);
    font-size: 11px;
    text-align: center;
}


/* ==========================================================================
   16. DOMAIN PRICING
   ========================================================================== */

#order-exohost .exo-domain-pricing {
    width: 100%;
}


/* ==========================================================================
   17. FEATURED TLDS
   ========================================================================== */

#order-exohost .exo-featured-tlds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-bottom: 16px;
}

#order-exohost .exo-featured-tld {
    position: relative;
    overflow: hidden;

    min-width: 0;
    min-height: 112px;
    padding: 16px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-md);

    background: var(--exo-order-white);

    box-shadow: var(--exo-order-shadow-xs);
}

#order-exohost .exo-featured-tld-name {
    color: var(--exo-order-ink);

    font-family: var(--exo-order-heading-font);
    font-size: 17px;
    font-weight: 700;
}

#order-exohost .exo-featured-tld-brand {
    margin-top: 8px;
}

#order-exohost .exo-featured-tld-brand img {
    max-width: 110px;
    max-height: 28px;
    object-fit: contain;
    object-position: left center;
}

#order-exohost .exo-featured-tld-price {
    margin-top: 12px;
}

#order-exohost .exo-featured-tld-price strong {
    color: var(--exo-order-primary);
    font-size: 13px;
    font-weight: 700;
}

#order-exohost .exo-featured-tld-price span {
    margin-left: 2px;
    color: var(--exo-order-muted);
    font-size: 9px;
}


/* ==========================================================================
   18. TLD DIRECTORY
   ========================================================================== */

#order-exohost .exo-domain-directory {
    overflow: hidden;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-lg);

    background: var(--exo-order-white);

    box-shadow: var(--exo-order-shadow-xs);
}

#order-exohost .exo-domain-directory-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    padding: 16px 18px;

    border-bottom: 1px solid var(--exo-order-border);
}

#order-exohost .exo-domain-directory-header > div {
    min-width: 0;
}

#order-exohost .exo-domain-directory-header h3 {
    margin: 0;
    color: var(--exo-order-ink);
    font-size: 13px;
    line-height: 1.4;
}

#order-exohost .exo-domain-directory-header p {
    margin: 3px 0 0;
    color: var(--exo-order-text-soft);
    font-size: 10px;
}

#order-exohost .exo-domain-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

#order-exohost .exo-domain-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 29px;
    padding: 5px 9px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-sm);

    background: var(--exo-order-surface-soft);
    color: var(--exo-order-text-soft);

    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color var(--exo-order-transition),
        border-color var(--exo-order-transition),
        color var(--exo-order-transition);
}

#order-exohost .exo-domain-filter:hover {
    border-color: var(--exo-order-primary-border);
    background: var(--exo-order-primary-soft);
    color: var(--exo-order-primary);
}

#order-exohost .exo-domain-filter.is-active,
#order-exohost .exo-domain-filter.active {
    border-color: var(--exo-order-primary);
    background: var(--exo-order-primary);
    color: var(--exo-order-white);
}

#order-exohost .exo-domain-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

    border-radius: var(--exo-order-radius-pill);

    background: rgba(16, 35, 63, .07);

    font-size: 8px;
    line-height: 1;
}

#order-exohost .exo-domain-filter.is-active
.exo-domain-filter-count,
#order-exohost .exo-domain-filter.active
.exo-domain-filter-count {
    background: rgba(255, 255, 255, .16);
}

#order-exohost .exo-domain-pricing-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#order-exohost .exo-domain-pricing-table {
    width: 100%;
    margin: 0;

    border: 0;
    border-collapse: collapse;

    background: var(--exo-order-white);
}

#order-exohost .exo-domain-pricing-table thead th {
    padding: 10px 15px;

    border: 0;
    border-bottom: 1px solid var(--exo-order-border);

    background: var(--exo-order-surface-soft);
    color: var(--exo-order-muted);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
}

#order-exohost .exo-domain-pricing-table tbody th,
#order-exohost .exo-domain-pricing-table tbody td {
    padding: 12px 15px;

    border: 0;
    border-bottom: 1px solid var(--exo-order-border-soft);

    background: var(--exo-order-white);

    vertical-align: middle;
}

#order-exohost .exo-domain-pricing-table tbody tr:last-child th,
#order-exohost .exo-domain-pricing-table tbody tr:last-child td {
    border-bottom: 0;
}

#order-exohost .exo-domain-pricing-table tbody tr:hover th,
#order-exohost .exo-domain-pricing-table tbody tr:hover td {
    background: var(--exo-order-surface-soft);
}

#order-exohost .exo-domain-pricing-name {
    color: var(--exo-order-ink);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

#order-exohost .exo-domain-pricing-table td strong {
    display: block;

    color: var(--exo-order-text);

    font-size: 11px;
    font-weight: 650;
}

#order-exohost .exo-domain-pricing-table td span {
    display: block;
    margin-top: 1px;

    color: var(--exo-order-muted);

    font-size: 8px;
}

#order-exohost .exo-domain-pricing-table
.exo-domain-not-available {
    color: var(--exo-order-muted);
    font-size: 11px;
}


/* ==========================================================================
   19. DOMAIN SERVICES
   ========================================================================== */

#order-exohost .exo-domain-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#order-exohost .exo-domain-service-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "icon action";
    gap: 5px 13px;

    min-width: 0;
    padding: 17px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-md);

    background: var(--exo-order-white);

    box-shadow: var(--exo-order-shadow-xs);

    transition:
        border-color var(--exo-order-transition),
        box-shadow var(--exo-order-transition);
}

#order-exohost .exo-domain-service-card:hover {
    border-color: var(--exo-order-primary-border);
    box-shadow: var(--exo-order-shadow-sm);
}

#order-exohost .exo-domain-service-icon {
    grid-area: icon;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid var(--exo-order-primary-border);
    border-radius: var(--exo-order-radius-sm);

    background: var(--exo-order-primary-soft);
    color: var(--exo-order-primary);

    font-size: 12px;
}

#order-exohost .exo-domain-service-content {
    grid-area: content;
    min-width: 0;
}

#order-exohost .exo-domain-service-content h3 {
    margin: 0;
    color: var(--exo-order-ink);
    font-size: 13px;
    line-height: 1.4;
}

#order-exohost .exo-domain-service-content p {
    margin: 3px 0 0;

    color: var(--exo-order-text-soft);

    font-size: 10px;
    line-height: 1.55;
}

#order-exohost .exo-domain-service-action {
    grid-area: action;
    margin-top: 8px;
}

#order-exohost .exo-domain-service-action
.exo-button {
    min-height: auto;
    padding: 0;

    border: 0;
    background: transparent;
    color: var(--exo-order-primary);

    font-size: 10px;
}

#order-exohost .exo-domain-service-action
.exo-button:hover {
    background: transparent;
    color: var(--exo-order-primary-hover);
    box-shadow: none;
}

#order-exohost .exo-domain-service-action
.exo-button i {
    font-size: 8px;

    transition:
        transform var(--exo-order-transition);
}

#order-exohost .exo-domain-service-action
.exo-button:hover i {
    transform: translateX(2px);
}


/* ==========================================================================
   20. WHMCS COMPATIBILITY
   ========================================================================== */

/*
 * These selectors are intentionally retained because WHMCS JavaScript
 * controls their state or dynamically populates them.
 *
 * ExoHost owns their visual presentation.
 */

#order-exohost .domain-lookup-loader {
    color: var(--exo-order-text-soft);
}

#order-exohost .domain-lookup-loader i {
    color: var(--exo-order-primary);
}

#order-exohost .btn-add-to-cart {
    cursor: pointer;
}

#order-exohost .btn-add-to-cart.disabled,
#order-exohost .btn-add-to-cart:disabled {
    pointer-events: none;
    opacity: .65;
}

#order-exohost .domain-unavailable {
    color: var(--exo-order-danger);
}

#order-exohost .domain-available {
    color: var(--exo-order-success);
}

#order-exohost .domain-invalid {
    color: var(--exo-order-danger);
}

#order-exohost .domain-tld-unavailable {
    color: var(--exo-order-danger);
}


/*
 * WHMCS can inject Bootstrap-style elements through CAPTCHA or dynamic
 * domain scripts. Restrict compatibility styling to the ExoHost workspace.
 */

#order-exohost .captcha-container {
    margin: 0;
}

#order-exohost .alert {
    margin: 14px 0;
    padding: 12px 14px;

    border: 1px solid var(--exo-order-border);
    border-radius: var(--exo-order-radius-sm);

    background: var(--exo-order-surface-soft);
    color: var(--exo-order-text);

    font-size: 11px;
}

#order-exohost .alert-danger {
    border-color: var(--exo-order-danger-border);
    background: var(--exo-order-danger-soft);
    color: var(--exo-order-danger);
}

#order-exohost .alert-success {
    border-color: var(--exo-order-success-border);
    background: var(--exo-order-success-soft);
    color: var(--exo-order-success);
}


/* ==========================================================================
   21. ACCESSIBILITY
   ========================================================================== */

#order-exohost .exo-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}

#order-exohost a:focus-visible,
#order-exohost button:focus-visible,
#order-exohost input:focus-visible,
#order-exohost select:focus-visible,
#order-exohost textarea:focus-visible {
    outline: 3px solid rgba(0, 77, 38, .16);
    outline-offset: 2px;
}


/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {

    #order-exohost {
        padding-bottom: 48px;
    }

    #order-exohost .exo-order-title {
        font-size: 27px;
    }

    #order-exohost .exo-domain-spotlight-grid,
    #order-exohost .exo-featured-tlds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #order-exohost .exo-domain-directory-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    #order-exohost .exo-domain-filters {
        justify-content: flex-start;
    }
}


@media (max-width: 767px) {

    #order-exohost .exo-order-header {
        margin-bottom: 22px;
    }

    #order-exohost .exo-order-title {
        font-size: 25px;
    }

    #order-exohost .exo-domain-search {
        padding: 18px;
    }

    #order-exohost .exo-domain-search-control {
        flex-direction: column;
    }

    #order-exohost .exo-domain-search-button {
        width: 100%;
    }

    #order-exohost .exo-domain-captcha-content {
        align-items: stretch;
        flex-direction: column;
    }

    #order-exohost .exo-domain-captcha-field {
        width: 100%;
    }

    #order-exohost .exo-domain-available {
        align-items: stretch;
        flex-direction: column;
    }

    #order-exohost .exo-domain-available-commerce {
        justify-content: space-between;

        padding-top: 14px;

        border-top:
            1px solid var(--exo-order-success-border);
    }

    #order-exohost .exo-domain-price {
        text-align: left;
    }

    #order-exohost .exo-domain-service-grid {
        grid-template-columns: 1fr;
    }

    #order-exohost .exo-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


@media (max-width: 575px) {

    #order-exohost {
        font-size: 13px;
    }

    #order-exohost .exo-order-title {
        font-size: 23px;
    }

    #order-exohost .exo-order-description {
        font-size: 13px;
    }

    #order-exohost .exo-domain-search {
        padding: 15px;
        border-radius: var(--exo-order-radius-md);
    }

    #order-exohost .exo-domain-search-header {
        gap: 10px;
    }

    #order-exohost .exo-domain-search-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    #order-exohost .exo-domain-search-input {
        font-size: 16px;
    }

    #order-exohost .exo-domain-available-commerce {
        flex-direction: column;
        align-items: stretch;
    }

    #order-exohost .exo-domain-available-commerce
    .exo-button {
        width: 100%;
    }

    #order-exohost .exo-domain-spotlight-grid,
    #order-exohost .exo-featured-tlds {
        grid-template-columns: 1fr;
    }

    #order-exohost .exo-domain-spotlight-card {
        min-height: 78px;
    }

    #order-exohost .exo-domain-suggestion {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    #order-exohost .exo-domain-suggestion-actions {
        width: 100%;
        justify-content: space-between;
    }

    #order-exohost .exo-domain-directory-header {
        padding: 14px;
    }

    #order-exohost .exo-domain-pricing-table {
        min-width: 610px;
    }

    #order-exohost .exo-domain-pricing-table thead th,
    #order-exohost .exo-domain-pricing-table tbody th,
    #order-exohost .exo-domain-pricing-table tbody td {
        padding-left: 12px;
        padding-right: 12px;
    }

    #order-exohost .exo-domain-service-card {
        padding: 15px;
    }
}


/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #order-exohost *,
    #order-exohost *::before,
    #order-exohost *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   DOMAIN SEARCH WORKSPACE — progressive disclosure override
========================================================== */
#order-exohost { --exo-order-primary:#004d26; --exo-order-gold:#c28840; --exo-order-radius-xl:16px; --exo-order-content-width:900px; }
#order-exohost .exo-order-workspace { max-width:900px; padding:48px 24px 64px; }
#order-exohost .exo-commerce-header { max-width:560px; margin:0 auto 32px; text-align:center; }
#order-exohost .exo-commerce-header .exo-order-eyebrow { display:none; }
#order-exohost .exo-order-title { font-size:clamp(30px,4vw,40px); }
#order-exohost .exo-order-description { margin-right:auto; margin-left:auto; font-size:16px; }
#order-exohost .exo-domain-search-workspace { padding:24px; border:1px solid var(--exo-order-border); border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(16,35,63,.08); }
#order-exohost .exo-domain-search-workspace .exo-domain-search-header, #order-exohost .exo-domain-search-workspace .exo-domain-search-help { display:none; }
#order-exohost .exo-domain-search-control { gap:12px; }
#order-exohost .exo-domain-search-field { min-height:56px; }
#order-exohost .exo-domain-search-input { height:56px; font-size:16px; }
#order-exohost .exo-domain-search-button { min-width:132px; min-height:56px; }
#order-exohost .exo-domain-results { margin-top:28px; }
#order-exohost .exo-domain-primary-result, #order-exohost .exo-domain-suggestion-list { overflow:hidden; border:1px solid var(--exo-order-border); border-radius:16px; background:#fff; box-shadow:var(--exo-order-shadow-xs); }
#order-exohost .exo-domain-available { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px; }
#order-exohost .exo-domain-available-name { display:block; overflow-wrap:anywhere; font-size:22px; }
#order-exohost .exo-domain-available-commerce { gap:20px; }
#order-exohost .exo-domain-result-state { display:flex; align-items:flex-start; gap:12px; padding:20px; }
#order-exohost .exo-domain-alternatives { display:none; margin-top:32px; }
#order-exohost .exo-domain-search:has(#DomainSearchResults[style*="display: block"]) + .exo-domain-alternatives { display:block; }
#order-exohost .exo-domain-pricing, #order-exohost .exo-domain-services { display:none; }
#order-exohost .exo-domain-alternatives .exo-section-header { margin-bottom:16px; }
#order-exohost .exo-domain-alternatives .exo-section-header h2 { font-size:20px; }
#order-exohost .exo-domain-alternatives .exo-section-eyebrow, #order-exohost .exo-domain-alternatives .exo-section-header p { display:none; }
#order-exohost .exo-domain-spotlight-card, #order-exohost .exo-domain-suggestion-list { border-radius:16px; }
#order-exohost .exo-domain-spotlight-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
#order-exohost .exo-domain-suggestion { display:flex; }
#order-exohost .w-hidden { display:none; }
@media (max-width:767px) { #order-exohost .exo-order-workspace { padding:32px 16px 48px; } #order-exohost .exo-domain-search-workspace { padding:16px; } #order-exohost .exo-domain-search-control, #order-exohost .exo-domain-available { flex-direction:column; align-items:stretch; } #order-exohost .exo-domain-search-button, #order-exohost .exo-domain-available-commerce .exo-button { width:100%; } #order-exohost .exo-domain-spotlight-grid { grid-template-columns:1fr; } }

/* ==========================================================
   REGISTER DOMAIN DECISION FLOW
========================================================== */
#order-exohost .exo-domain-search-workspace { padding:32px; }
#order-exohost .exo-domain-search-workspace .exo-domain-search-control { display:grid; grid-template-columns:minmax(0,1fr) 148px; gap:12px; }
#order-exohost .exo-domain-search-field { border-radius:12px; }
#order-exohost .exo-domain-search-input { padding-left:20px; }
#order-exohost .exo-domain-search-field-icon { display:none; }
#order-exohost .exo-popular-extensions { margin-top:28px; }
#order-exohost .exo-popular-extensions > span { display:block; margin-bottom:12px; color:var(--exo-order-ink); font-size:13px; font-weight:700; }
#order-exohost .exo-popular-extensions ul { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
#order-exohost .exo-popular-extensions li { display:inline-flex; align-items:center; gap:7px; color:var(--exo-order-text); font-size:13px; }
#order-exohost .exo-popular-extensions li::before { width:12px; height:12px; border:1.5px solid var(--exo-order-border-strong); border-radius:50%; content:""; }
#order-exohost .exo-domain-results::before { display:block; margin-bottom:16px; color:var(--exo-order-ink); font-family:var(--exo-order-heading-font); font-size:20px; font-weight:700; content:"Available domains"; }
#order-exohost .exo-domain-primary-result { border:0; box-shadow:none; }
#order-exohost .exo-domain-available { padding:24px; border:1px solid var(--exo-order-success-border); border-radius:16px; background:var(--exo-order-success-soft); }
#order-exohost .exo-domain-available-status { display:flex; gap:14px; }
#order-exohost .exo-domain-available-icon { width:32px; height:32px; color:var(--exo-order-success); }
#order-exohost .exo-domain-status-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
#order-exohost .exo-domain-available-name { margin-top:4px; }
#order-exohost .exo-domain-price-label { text-transform:none; }
#order-exohost .domain-price small { display:block; color:var(--exo-order-muted); font-size:11px; font-weight:400; }
#order-exohost .exo-domain-result-state { flex-wrap:wrap; padding:24px; border:1px solid var(--exo-order-danger-border); border-radius:16px; background:var(--exo-order-danger-soft); }
#order-exohost .exo-domain-transfer-action { margin-left:auto; }
#order-exohost .exo-domain-alternatives .exo-section-header h2 { font-size:20px; }
#order-exohost .exo-domain-alternatives .exo-section-header h2::before { content:"You may also like"; font-size:20px; }
#order-exohost .exo-domain-alternatives .exo-section-header h2 { font-size:0; }
#order-exohost .exo-domain-suggestion-list { box-shadow:none; }
#order-exohost .exo-domain-suggestion { min-height:68px; padding:14px 20px; }
@media (max-width:767px) { #order-exohost .exo-domain-search-workspace { padding:20px; } #order-exohost .exo-domain-search-workspace .exo-domain-search-control { grid-template-columns:1fr; } #order-exohost .exo-domain-transfer-action { width:100%; margin-left:0; } #order-exohost .exo-domain-result-state { flex-direction:column; } }