/* ──────────────────────────────────────────────────────────────────
   RTL overrides — loaded only when CurrentUICulture is right-to-left
   (ar-EG today). Cairo for Arabic, Cormorant Garamond stays for
   display headings (it has decent Arabic punctuation rendering).
   ────────────────────────────────────────────────────────────────── */
html[dir="rtl"] body,
html[dir="rtl"] {
    font-family: 'Cairo', 'Jost', system-ui, sans-serif;
    direction: rtl;
    text-align: right;
}

/* Cormorant Garamond doesn't cover Arabic glyphs — swap to Cairo for headings */
html[dir="rtl"] .sh-title,
html[dir="rtl"] .auth-title,
html[dir="rtl"] .ph-title,
html[dir="rtl"] .modal-name,
html[dir="rtl"] .product-name,
html[dir="rtl"] [style*="Cormorant Garamond"] {
    font-family: 'Cairo', serif !important;
    letter-spacing: 0;
}

/* Nav: flip the actions row */
html[dir="rtl"] .hb-shell-nav { flex-direction: row-reverse; }
html[dir="rtl"] .hb-nav-list { flex-direction: row-reverse; }
html[dir="rtl"] .hb-nav-actions { flex-direction: row-reverse; }
html[dir="rtl"] .hb-brand { flex-direction: row-reverse; }

/* Account sidebar should hug the right edge */
html[dir="rtl"] .hb-page--account .dash-wrap { flex-direction: row-reverse; }
html[dir="rtl"] .hb-page--account .sidebar { border-right: none; border-left: 1px solid var(--br); }

/* Form fields: align RTL for labels and inputs but keep numeric inputs LTR
   so phone numbers, prices, dates still read naturally */
html[dir="rtl"] .field-label,
html[dir="rtl"] .auth-label,
html[dir="rtl"] .flabel {
    text-align: right;
}
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[name="cardNumber"] {
    direction: ltr;
    text-align: right; /* still right-anchored because page is RTL */
}

/* Small inline blocks like pills/badges flow right-to-left */
html[dir="rtl"] .order-items,
html[dir="rtl"] .wishlist-grid,
html[dir="rtl"] .product-grid {
    direction: rtl;
}

/* Order pill thumbnails should sit on the right of the text in RTL */
html[dir="rtl"] .oi-pill { flex-direction: row-reverse; }

/* Letter-spacing on uppercase labels doesn't apply meaningfully to Arabic */
html[dir="rtl"] .ph-eye,
html[dir="rtl"] .sb-section,
html[dir="rtl"] .auth-eye,
html[dir="rtl"] .sb-loyalty-name,
html[dir="rtl"] .sb-email,
html[dir="rtl"] .order-id,
html[dir="rtl"] .order-status {
    letter-spacing: 0;
    text-transform: none;
}

/* Buttons: undo strong tracking so Arabic words don't fall apart */
html[dir="rtl"] .submit-btn,
html[dir="rtl"] .auth-submit,
html[dir="rtl"] .bnext,
html[dir="rtl"] .bprev,
html[dir="rtl"] .btn-sm-gold,
html[dir="rtl"] .btn-sm-out,
html[dir="rtl"] .co-next,
html[dir="rtl"] .co-back,
html[dir="rtl"] .badd {
    letter-spacing: 0;
    text-transform: none;
}

/* ──────────────────────────────────────────────────────────────────
   Type-size bumps for Arabic. Cairo renders smaller at the same px
   size than Cormorant Garamond, so headlines and sidebar items look
   too thin if we keep the English numbers.
   ────────────────────────────────────────────────────────────────── */

/* Account sidebar — bigger nav items and section dividers */
html[dir="rtl"] .hb-page--account .sb-nav a {
    font-size: 14px;
    letter-spacing: 0;
    padding: .75rem 1rem;
}
html[dir="rtl"] .hb-page--account .sb-section {
    font-size: 11px;
    letter-spacing: 0;
    padding: .75rem 1.75rem .4rem;
}
html[dir="rtl"] .hb-page--account .sb-name { font-size: 18px; }
html[dir="rtl"] .hb-page--account .sb-email { font-size: 12px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--account .sb-signout { font-size: 12px; letter-spacing: 0; padding: 1rem 1.75rem; }

/* Account main column headlines */
html[dir="rtl"] .hb-page--account .ph-title { font-size: clamp(30px,3.6vw,48px); line-height: 1.15; }
html[dir="rtl" ] .hb-page--account .ph-eye { font-size: 11px; letter-spacing: 1px; }
html[dir="rtl"] .hb-page--account .ph-sub { font-size: 13px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--account .stat-num { font-size: 40px; }
html[dir="rtl"] .hb-page--account .stat-label { font-size: 12px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--account .stat-sub { font-size: 11px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--account .co-section-title { font-size: 12px; letter-spacing: 1px; }

/* Home page headlines */
html[dir="rtl"] .hb-page--home .hero-title { font-size: clamp(80px,12vw,170px); line-height: 1; }
html[dir="rtl"] .hb-page--home .hero-subtitle { font-size: 16px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--home .section-title { font-size: clamp(46px,6.5vw,80px); line-height: 1.2; }
html[dir="rtl"] .hb-page--home .section-label { font-size: 12px; letter-spacing: 2px; }
html[dir="rtl"] .hb-page--home .stat-num { font-size: 68px; }
html[dir="rtl"] .hb-page--home .stat-label { font-size: 13px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--home .modal-name { font-size: 42px; }
html[dir="rtl"] .hb-page--home .modal-section-title { font-size: 12px; letter-spacing: 1px; }
html[dir="rtl"] .hb-page--home .modal-brand,
html[dir="rtl"] .hb-page--home .modal-family { font-size: 13px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--home .filter-chip { font-size: 13px; letter-spacing: 0; padding: 8px 16px; }
html[dir="rtl"] .hb-page--home .product-name { font-size: 22px; line-height: 1.2; }
html[dir="rtl"] .hb-page--home .product-brand { font-size: 11px; letter-spacing: 0; }
html[dir="rtl"] .hb-page--home .col-name { font-size: clamp(28px,3.5vw,40px); }
html[dir="rtl"] .hb-page--home .col-tag,
html[dir="rtl"] .hb-page--home .col-count { font-size: 12px; letter-spacing: 0; }