/* ============================================
   Moroccan Art Hub — i18n styles
   Language switcher pill + RTL layout adjustments for Arabic.
   ============================================ */

/* ============ Language switcher (header pill) ============ */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: rgba(232, 198, 122, 0.12);
    border: 1px solid rgba(232, 198, 122, 0.3);
    border-radius: 999px;
    margin-right: 4px;
}
[dir="rtl"] .lang-switcher { margin-right: 0; margin-left: 4px; }

.lang-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 5px 11px;
    color: #FAF4E8;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 500;
    cursor: pointer;
    border-radius: 999px;
    transition: all 0.18s ease;
    min-width: 30px;
    line-height: 1;
}
.lang-btn:hover { color: #E8C67A; }
.lang-btn.is-active {
    background: linear-gradient(135deg, #C9973B 0%, #E8C67A 100%);
    color: #0D0D0D;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Arabic glyph needs a font that supports it — Cinzel is Latin-only */
.lang-btn[lang="ar"] {
    font-family: 'Cairo', 'Tahoma', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

/* On admin pages (different palette) */
.admin-body .lang-switcher {
    background: rgba(201, 151, 59, 0.08);
    border-color: rgba(201, 151, 59, 0.25);
}
.admin-body .lang-btn { color: #2A241B; font-family: 'Inter', sans-serif; font-size: 11px; }
.admin-body .lang-btn.is-active { color: #FAF4E8; }

/* ============ RTL adjustments for Arabic ============ */
/* Most of the layout works because of flex/grid — these are targeted fixes for places
   that hard-code left/right or text-align. */

/* HEADER LOCK: keep the site header in LTR layout even in Arabic mode so the brand
   (logo left, cart/wishlist/lang switcher right) stays visually consistent across
   languages. Text inside individual nav links and buttons still renders RTL because
   Arabic characters have intrinsic right-to-left direction. */
[dir="rtl"] .announcement-bar,
[dir="rtl"] .site-header,
[dir="rtl"] .navbar,
[dir="rtl"] .nav-container,
[dir="rtl"] .nav-menu,
[dir="rtl"] .nav-actions {
    direction: ltr;
}
/* Cart drawer + mobile nav are page-content rather than header chrome — they still mirror. */

[dir="rtl"] body { font-family: 'Tajawal', 'Cairo', 'Cormorant Garamond', serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .logo-text,
[dir="rtl"] .hero-title,
[dir="rtl"] .page-hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .artisan-name,
[dir="rtl"] .pdp-name {
    font-family: 'Cairo', 'Tajawal', 'Cinzel', serif;
}

/* Logo wordmark in RTL stays left-to-right (English brand name remains LTR even in Arabic) */
[dir="rtl"] .logo .logo-text { direction: ltr; }

/* Reverse the announcement bar text flow */
[dir="rtl"] .announcement-bar p { direction: rtl; }

/* Hero arch icons + carousel arrows mirrored */
[dir="rtl"] .hero-arch-prev,
[dir="rtl"] .hero-arch-next { transform: scaleX(-1); }

/* Breadcrumb arrows in product page */
[dir="rtl"] .pdp-breadcrumb .breadcrumb-sep { transform: scaleX(-1); }

/* Quote marks — the smart "curly" quotes naturally swap in browser RTL but the
   blockquote class adds a left-side decoration. Mirror it. */
[dir="rtl"] .artisan-quote::before,
[dir="rtl"] .pdp-quote::before {
    right: 0;
    left: auto;
}

/* Newsletter / contact form alignment */
[dir="rtl"] .newsletter-form input,
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea {
    text-align: right;
}

/* Cart drawer slides in from the LEFT in RTL (mirror of the LTR right-side drawer) */
[dir="rtl"] .cart-drawer {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
[dir="rtl"] .cart-drawer.is-open { transform: translateX(0); }

/* Cart/wishlist badge + mobile nav stay in their LTR positions because the header
   is locked to LTR above. (Mobile nav slides from the right in both languages.) */

/* Padding adjustments for the chevrons in details rows */
[dir="rtl"] .pdp-details dt,
[dir="rtl"] .pdp-details dd {
    text-align: right;
}

/* Footer columns: keep grid structure but right-align text */
[dir="rtl"] .footer-content { direction: rtl; }
[dir="rtl"] .footer-column { text-align: right; }
[dir="rtl"] .footer-bottom-content { direction: rtl; }