/* =============================================================
   EMERTAT — Design Tokens & Base Typography
   Phase 1: Foundation
   ============================================================= */

/* ── 1. Design tokens ──────────────────────────────────────── */
:root {
    --primary:        #6C63FF;
    --primary-dark:   #4F46E5;
    --primary-soft:   rgba(108, 99, 255, .10);
    --teal:           #119DA4;
    --green:          #16A34A;
    --amber:          #D97706;
    --red:            #DC2626;
    --violet:         #8B5CF6;

    --text:           #0F0E17;
    --text-2:         #6B7280;
    --text-3:         #9AA1AD;

    --bg:             #FFFFFF;
    --surface:        #F8F7FF;
    --surface-2:      #F3F2FB;
    --border:         #E9E8F2;
    --border-strong:  #E0DEF0;

    --r-sm:           8px;
    --r:              12px;
    --r-lg:           18px;

    --shadow-sm:      0 1px 2px rgba(16,14,23,.04), 0 1px 3px rgba(16,14,23,.06);
    --shadow-primary: 0 12px 24px -10px rgba(108,99,255,.6);

    /* Font stacks */
    --font-fa:  'Vazirmatn', 'Tahoma', sans-serif;
    --font-en:  'Plus Jakarta Sans', 'Open Sans', sans-serif;

    /* Bridge Nexus semantic tokens → emertat palette */
    --primary:        #6C63FF;
    --success:        #16A34A;
    --info:           #119DA4;
    --warning:        #D97706;
    --danger:         #DC2626;
    --error:          #DC2626;
    --yellow-300:     #D97706;
}

/* ── 2. Container width ─────────────────────────────────────── */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

/* ── 3. Base body ───────────────────────────────────────────── */
body {
    font-family: var(--font-fa) !important;
    color: var(--text);
    background-color: var(--bg);
}

input,
select,
textarea,
button {
    font-family: var(--font-fa) !important;
}

/* Latin brand strings keep their own font */
.brand,
.logo-img + span,
.navbar-brand:not(:has(img)) {
    font-family: var(--font-en);
}

/* ── 3. Tabular numerics for data-heavy contexts ────────────── */
td,
th,
.badge,
.invoice-amount,
.service-price,
.order-total {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* ── 4. LTR isolation helper ────────────────────────────────── */
/* Wrap domains, emails, IPs, invoice numbers in <bdi> or .ltr */
bdi,
.ltr,
[dir="ltr"] {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}

/* ── 5. Smooth scrolling ────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════
   6. Advanced Domain Search — product/store page
   ══════════════════════════════════════════════════════════════ */

/* 6.1 Textarea → single-line appearance */
#order-standard_cart .domain-checker-advanced textarea {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 6px 12px;
    line-height: 1.5;
    overflow: hidden;
    resize: none;
    white-space: nowrap;
    display: block;
    width: 100%;
    border-radius: 4px;
}

/* 6.2 Controls row — hidden by default (toggled via JS); merged with 6.4 layout.
   :not() excludes the dynamically-inserted toggle-link row. */
#order-standard_cart #domainregister.domain-checker-advanced > .row ~ .row:not(.emertat-toggle-row) {
    display: none;
    margin-top: 8px;
}

/* 6.3 Toggle link */
.emertat-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
}
.emertat-search-toggle:hover {
    color: var(--primary-dark);
    text-decoration: none;
}
.emertat-search-toggle .toggle-icon {
    font-size: 0.75rem;
    transition: transform .25s;
}
.emertat-search-toggle.open .toggle-icon {
    transform: rotate(180deg);
}
#order-standard_cart #domainregister.domain-checker-advanced .domains-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 6.5 Multiselect buttons — emertat theme */
#order-standard_cart .domain-checker-advanced .multiselect.btn {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    padding: 5px 10px;
    height: 34px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s, background .15s;
}
#order-standard_cart .domain-checker-advanced .multiselect.btn:hover,
#order-standard_cart .domain-checker-advanced .multiselect.btn:focus {
    border-color: var(--primary);
    background: var(--surface-2);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* 6.6 Safe search checkbox label */
#order-standard_cart .domain-checker-advanced .domains-row > label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-2);
    cursor: pointer;
    margin-bottom: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    height: 34px;
    transition: border-color .15s, background .15s;
}
#order-standard_cart .domain-checker-advanced .domains-row > label:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}
#order-standard_cart .domain-checker-advanced .domains-row > label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    cursor: pointer;
}