/* ═══════════════════════════════════════════════════════════════
   Arabic RTL Overrides — loaded only on the Arabic page
   Extends style.css; must be loaded after it.
═══════════════════════════════════════════════════════════════ */

/* ─── Arabic Font ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

[dir="rtl"] body {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

/* ─── Base direction ───────────────────────────────────────── */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ─── Navigation ───────────────────────────────────────────── */
[dir="rtl"] .nav-inner {
    flex-direction: row-reverse;
}
[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}
[dir="rtl"] .nav-brand {
    flex-direction: row-reverse;
}
/* Brand mark stays LTR (it's an English acronym) */
[dir="rtl"] .brand-mark {
    direction: ltr;
    unicode-bidi: embed;
}

/* ─── Hero ─────────────────────────────────────────────────── */
[dir="rtl"] .hero-trust {
    flex-direction: row-reverse;
}
[dir="rtl"] .hero-cta {
    flex-direction: row-reverse;
}

/* ─── Checkbox controls ────────────────────────────────────── */
[dir="rtl"] .checkbox-controls {
    flex-direction: row-reverse;
}
[dir="rtl"] .selected-count {
    margin-left: 0;
    margin-right: auto;
}

/* ─── Price summary ────────────────────────────────────────── */
[dir="rtl"] .ps-row {
    flex-direction: row-reverse;
}

/* ─── FAQ arrow (ensure it stays on the left in RTL) ──────── */
/* With dir=rtl the flex order already reverses, so :: after
   appears at the physical left — correct for RTL. No override needed. */

/* ─── Pricing features checkmarks ─────────────────────────── */
/* flex row reverses in RTL: checkmark (::before) lands on right,
   text on left — correct RTL reading order. No override needed. */

/* ─── Footer ───────────────────────────────────────────────── */
[dir="rtl"] .footer-inner {
    direction: rtl;
}

/* ─── Form ─────────────────────────────────────────────────── */
[dir="rtl"] .form-input {
    text-align: right;
}
[dir="rtl"] .form-input[type="email"] {
    /* Email addresses are LTR; keep input LTR so typing is natural */
    direction: ltr;
    text-align: left;
}

/* ─── Domain names — always LTR ───────────────────────────── */
[dir="rtl"] .checkbox-text {
    direction: ltr;
    unicode-bidi: embed;
}
/* But the checkbox label container itself is RTL so the checkbox
   appears on the right side of the domain name text */
[dir="rtl"] .checkbox-label {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
/* Bundle label text is Arabic, keep it RTL */
[dir="rtl"] .checkbox-label-bundle .checkbox-text {
    direction: rtl;
    unicode-bidi: embed;
}


/* ─── Mobile nav in RTL ────────────────────────────────────── */
@media (max-width: 768px) {
    [dir="rtl"] .nav-links {
        flex-direction: column;
        align-items: flex-end;
    }
    [dir="rtl"] .nav-links a,
    [dir="rtl"] .nav-links .btn-nav,
    [dir="rtl"] .nav-links .lang-switch {
        text-align: right;
    }
}

/* ─── Why list in RTL ──────────────────────────────────────── */
[dir="rtl"] .why-item {
    border-left: none;
    border-right: 3px solid var(--gold);
    padding-left: 0;
    padding-right: 24px;
}

/* ─── Suited-for list in RTL ───────────────────────────────── */
[dir="rtl"] .suited-list li {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .suited-list li em {
    text-align: right;
}

/* ─── Heading line-height bump for Arabic ──────────────────── */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
    line-height: 1.4;
}
[dir="rtl"] .hero-title {
    line-height: 1.35;
}

/* ─── Contact email — keep LTR ─────────────────────────────── */
[dir="rtl"] .contact-email {
    direction: ltr;
    unicode-bidi: embed;
}

/* ─── Domain groups in RTL ─────────────────────────────────── */
[dir="rtl"] .domain-group-header {
    flex-direction: row-reverse;
}
[dir="rtl"] .domain-group-actions {
    margin-left: 0;
    margin-right: auto;
}
[dir="rtl"] .ps-triple-badge {
    margin-left: 0;
    margin-right: 4px;
}
[dir="rtl"] .ps-strikethrough {
    margin-right: 0;
    margin-left: 4px;
}