/* ==========================================================================
   tawazonlife — Arabic RTL stylesheet  (/ar/)
   Target: UAE / Abu Dhabi audience
   ========================================================================== */

/* ---------- 1. Document level ---------- */
html[lang="ar"], html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Arabic typography. Cairo handles both display + body well and is
   specifically designed with Arabic UI in mind. */
html[lang="ar"] body {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.85;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .hero-title,
html[lang="ar"] .section-title,
html[lang="ar"] .logo-text,
html[lang="ar"] .brand {
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Noto Sans Arabic', sans-serif;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
}

/* Arabic needs a bit more leading and slightly larger optical size than
   Latin to stay comfortable at the same px values. */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] label,
html[lang="ar"] .card p,
html[lang="ar"] .prose p {
    line-height: 1.9;
}

/* Numerals stay LTR even inside RTL text (sets, reps, weights, dates). */
html[lang="ar"] .num,
html[lang="ar"] [data-ltr],
html[lang="ar"] .metric,
html[lang="ar"] .stat-value,
html[lang="ar"] .calc-result,
html[lang="ar"] .dose,
html[lang="ar"] time {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Latin brand name stays LTR inside Arabic copy. */
html[lang="ar"] .latin {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: 'Inter', sans-serif;
}

/* ---------- 2. Directional mirroring (logical-property driven) ---------- */
/* Anything that is a horizontal flex/grid row must reverse. We list the
   layout classes actually used across the site. */
html[lang="ar"] .nav-links,
html[lang="ar"] .nav-menu,
html[lang="ar"] .header-actions,
html[lang="ar"] .footer-links,
html[lang="ar"] .breadcrumb,
html[lang="ar"] .filter-group,
html[lang="ar"] .tabs,
html[lang="ar"] .pagination,
html[lang="ar"] .btn-group,
html[lang="ar"] .card-footer,
html[lang="ar"] .modal-actions,
html[lang="ar"] .coach-card-footer,
html[lang="ar"] .coach-card-info,
html[lang="ar"] .summary-row,
html[lang="ar"] .detail-row,
html[lang="ar"] .form-row,
html[lang="ar"] .payment-methods,
html[lang="ar"] .duration-select,
html[lang="ar"] .coach-summary,
html[lang="ar"] .booking-item,
html[lang="ar"] .booking-item-actions,
html[lang="ar"] .editor-toolbar,
html[lang="ar"] .topbar,
html[lang="ar"] .sort-controls,
html[lang="ar"] .stepper,
html[lang="ar"] .tool-header-actions {
    flex-direction: row-reverse;
}

/* Icon that sits before its label in LTR now sits after in RTL. */
html[lang="ar"] .btn i,
html[lang="ar"] .nav-link i,
html[lang="ar"] a i,
html[lang="ar"] .list-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}
html[lang="ar"] .btn i[class*="right"],
html[lang="ar"] .btn i.fa-arrow-right,
html[lang="ar"] .btn i.fa-chevron-right,
html[lang="ar"] .btn i.fa-angle-right {
    transform: scaleX(-1);
}

/* Grid children flow RTL automatically under direction:rtl, but we make the
   multi-column containers explicit so borders/floats behave. */
html[lang="ar"] .card-grid,
html[lang="ar"] .stats-grid,
html[lang="ar"] .slots-grid,
html[lang="ar"] .exercises-grid,
html[lang="ar"] .program-grid,
html[lang="ar"] .article-grid,
html[lang="ar"] .tools-grid,
html[lang="ar"] .coach-grid,
html[lang="ar"] .booking-layout,
html[lang="ar"] .form-group,
html[lang="ar"] .date-picker,
html[lang="ar"] .faq-list,
html[lang="ar"] .steps,
html[lang="ar"] .comparison-table,
html[lang="ar"] .nutrition-table {
    direction: rtl;
}

/* ---------- 3. Alignment ---------- */
html[lang="ar"] .hero-content,
html[lang="ar"] .section-header,
html[lang="ar"] .success-container,
html[lang="ar"] .booking-details,
html[lang="ar"] .page-list,
html[lang="ar"] .article-body,
html[lang="ar"] .prose,
html[lang="ar"] .coach-bio,
html[lang="ar"] .contact-intro {
    text-align: right;
}

html[lang="ar"] ul, html[lang="ar"] ol { padding-left: 0; padding-right: 1.5rem; }
html[lang="ar"] ul.unstyled, html[lang="ar"] ol.unstyled { list-style: none; padding-right: 0; }

/* ---------- 4. Forms ---------- */
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Noto Sans Arabic', sans-serif;
}
/* Latin-heavy fields (email, URL, numbers) read better LTR */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="number"],
html[lang="ar"] input.ltr {
    direction: ltr;
    text-align: left;
}
html[lang="ar"] input::placeholder,
html[lang="ar"] textarea::placeholder { text-align: right; }
html[lang="ar"] input[type="email"]::placeholder,
html[lang="ar"] input[type="tel"]::placeholder { text-align: left; }

/* Native select arrow sits on the wrong side without this. */
html[lang="ar"] select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b0b0b0' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.9rem center;
    background-size: 11px;
    padding-left: 2.4rem;
    padding-right: 0.9rem;
}

/* Checkbox / radio indicator flips to the start edge. */
html[lang="ar"] .checkbox,
html[lang="ar"] .radio-row,
html[lang="ar"] .form-check { flex-direction: row-reverse; justify-content: flex-end; }

html[lang="ar"] .form-group label { text-align: right; display: block; }
html[lang="ar"] .required::after { content: ' *'; color: #ff5c5c; }

/* ---------- 5. Tables ---------- */
html[lang="ar"] table { direction: rtl; text-align: right; }
html[lang="ar"] th, html[lang="ar"] td { text-align: right; }
html[lang="ar"] th { text-align: right; }
html[lang="ar"] .numeric, html[lang="ar"] td.numeric, html[lang="ar"] th.numeric {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
}

/* ---------- 6. Decorative / floating UI ---------- */
html[lang="ar"] .toast,
html[lang="ar"] .notification,
html[lang="ar"] .floating-btn,
html[lang="ar"] .scroll-top {
    right: auto;
    left: 2rem;
}

/* Off-canvas menus & mobile drawers open from the right. */
html[lang="ar"] .mobile-nav,
html[lang="ar"] .drawer,
html[lang="ar"] .offcanvas,
html[lang="ar"] .sidebar {
    left: auto;
    right: 0;
}

/* Progress bars fill from the right. */
html[lang="ar"] .progress-fill,
html[lang="ar"] .progress-bar > span,
html[lang="ar"] .bar-fill {
    right: 0;
    left: auto;
}

/* ---------- 7. Language switcher ---------- */
.lang-switcher-ar {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(12, 12, 14, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.3rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    font-family: 'Cairo', 'Noto Sans Arabic', sans-serif;
}
.lang-switcher-ar a {
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    color: #c9c9cf;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.lang-switcher-ar a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lang-switcher-ar a[aria-current="true"] {
    background: linear-gradient(135deg, #00d4ff, #b266ff);
    color: #fff;
}
.lang-switcher-ar .sep { color: rgba(255,255,255,0.25); font-size: 0.75rem; padding: 0 0.1rem; }

@media (max-width: 640px) {
    .lang-switcher-ar { bottom: 1rem; left: 1rem; }
    .lang-switcher-ar a { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
}

/* ---------- 8. Print ---------- */
@media print {
    .lang-switcher-ar, .floating-btn, .scroll-top { display: none !important; }
}

/* ---------- 9. Arabic punctuation & numerals ---------- */
html[lang="ar"] { font-variant-numeric: lining-nums; }

/* Keep brand marks and legal-ish codes in Latin. */
html[lang="ar"] .keep-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }