/* ============================================================================
   Arabic (RTL) + checkout payment styles. Loaded after style.css.
   English keeps Cormorant Garamond + DM Sans; Arabic uses Amiri (calligraphic serif, like Cormorant)
   for headings and IBM Plex Sans Arabic (clean, modern, pairs well with DM Sans) for text.
   ========================================================================== */

html[lang="ar"] {
  --serif: 'Amiri', 'Noto Naskh Arabic', 'Cormorant Garamond', Georgia, serif;
  --sans: 'IBM Plex Sans Arabic', 'Tajawal', 'DM Sans', Arial, sans-serif;
}
/* Arabic letters join: letter-spacing and uppercase styling must be switched off. */
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ar"] body { line-height: 1.9; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.35; font-weight: 700; }
/* Amiri/Plex Arabic have a smaller x-height than Latin faces: lift the small UI text a little. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .navigation,
html[lang="ar"] .product-material,
html[lang="ar"] .product-price,
html[lang="ar"] .footer-column a,
html[lang="ar"] .footer-bottom,
html[lang="ar"] .consent,
html[lang="ar"] .drawer-note,
html[lang="ar"] .form-note { font-size: max(1em, 12.5px); }
html[lang="ar"] .eyebrow { font-weight: 600; }
/* The wordmark is a logo: keep it Latin and spaced. */
html[lang="ar"] .wordmark,
html[lang="ar"] .footer-brand { letter-spacing: 6px !important; font-family: 'Cormorant Garamond', Georgia, serif; }

/* ---- mirror the layout --------------------------------------------------- */
html[dir="rtl"] .announcement-actions { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .hero-number { left: auto; right: var(--gutter); }
html[dir="rtl"] .hero-scroll { right: auto; left: var(--gutter); }
html[dir="rtl"] .save-button { right: auto; left: 11px; }
html[dir="rtl"] .product-label { left: auto; right: 17px; }
html[dir="rtl"] .bag-count { left: auto; right: -12px; }
html[dir="rtl"] .service { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .service:last-child { border: 0; }
html[dir="rtl"] .drawer { right: auto; left: 0; box-shadow: 10px 0 70px #0001; }
html[dir="rtl"] .drawer-header small { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .product-dialog > .icon-button { right: auto; left: 15px; }
html[dir="rtl"] .form-note svg { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .wordmark { padding-left: 0; padding-right: 7px; }
/* arrows point "forward" = to the left in RTL */
html[dir="rtl"] svg[data-icon="arrow"] { transform: scaleX(-1); }
html[dir="rtl"] .underline:hover { gap: 32px; }
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { text-align: right; }
/* e-mail, phone and numbers stay left-to-right inside Arabic text */
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { direction: ltr; unicode-bidi: plaintext; text-align: right; }
@media (max-width: 700px) {
  html[dir="rtl"] .hero-scroll { left: 23px; right: auto; }
  html[dir="rtl"] .save-button { left: 6px; right: auto; }
  html[dir="rtl"] .product-label { right: 10px; left: auto; }
  html[dir="rtl"] .bag-count { right: -1px; left: auto; }
  html[dir="rtl"] .service { border-left: 0; }
}

.lang-toggle { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 8px; background: var(--paper); }
.lang-toggle svg { width: 14px; height: 14px; margin-inline-end: 4px; color: var(--brown); }
.lang-toggle button { border: 0; border-radius: 999px; padding: 2px 9px; background: transparent; color: var(--muted); font-size: 0.75rem !important; font-weight: 600; letter-spacing: .6px; line-height: 1.6; cursor: pointer; }
.lang-toggle button[lang="ar"] { font-family: 'Cairo', 'Amiri', sans-serif; letter-spacing: 0; }
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button.active { background: var(--brown); color: var(--paper); cursor: default; }
html[dir="rtl"] .lang-toggle { padding: 2px 8px 2px 4px; }
.masthead-left .location { color: var(--muted); }
.story.reverse .story-image { order: 2; }
.policy-image { display: block; width: 100%; max-height: 420px; object-fit: cover; margin: 0 0 18px; }
@media (max-width: 700px) { .story.reverse .story-image { order: 0; } }

/* ---- checkout: payment method + Stripe Payment Element ---------------------- */
.payment-heading { margin-top: 34px; }
.payment-options { display: grid; gap: 12px; margin: 14px 0 6px; }
.payment-option { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); padding: 16px 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.payment-option:hover { border-color: var(--brown); }
.payment-option.selected { border-color: var(--brown); background: var(--cream); }
.payment-option input { accent-color: var(--brown); width: 16px; height: 16px; margin: 0; }
.payment-option svg { width: 22px; height: 22px; flex: none; color: var(--brown); stroke-width: 1.2; }
.payment-option strong { display: block; font-weight: 500; }
.payment-option small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.payment-unavailable { margin: 4px 0 0; }
.payment-section { min-width: 0; }
.payment-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; margin-bottom: 22px; }
.payment-total strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; }
.payment-form .button { width: 100%; margin-top: 22px; }

/* old price next to the offer price (platform products with an offer) */
.old-price { color: var(--muted); font-weight: 400; margin-inline-end: 6px; text-decoration: line-through; opacity: .8; }