/* ============================================================
   ZAD FOOD STORE — RTL / Arabic layer
   Loaded ONLY by /ar/*.html, AFTER style.css (and after any page-scoped
   <style> block, so these overrides win at equal specificity).
   Flex/grid containers flip automatically with dir="rtl"; this file fixes
   what does not: physical left/right properties, letter-spacing (breaks
   Arabic joining), uppercase, directional gradients, arrows, marquee.
   ============================================================ */

:root {
  --font-display: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-body: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-script: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.85;
  text-align: right;
}

/* Arabic letters must stay connected: no tracking, no forced caps */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Western digits everywhere */
html[dir="rtl"] body { font-variant-numeric: normal; }

/* Headings need more leading than Latin (marks above/below the line) */
html[dir="rtl"] .title,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .page-hero h1,
html[dir="rtl"] .preorder h3,
html[dir="rtl"] .factbox .big {
  line-height: 1.45;
  letter-spacing: 0;
}
html[dir="rtl"] .title .grad,
html[dir="rtl"] .hero h1 .grad,
html[dir="rtl"] .page-hero h1 .grad {
  padding-bottom: 0.12em; /* gradient text clip would cut Arabic descenders */
  display: inline-block;
}
html[dir="rtl"] .hero h1 { font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.6rem); }
html[dir="rtl"] .page-hero h1 { font-weight: 800; font-size: clamp(1.9rem, 5vw, 3.4rem); }
html[dir="rtl"] .title { font-weight: 800; }
html[dir="rtl"] .lead { line-height: 1.9; }

/* Script (Caveat) eyebrow -> Tajawal */
html[dir="rtl"] .eyebrow { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.3rem); }
html[dir="rtl"] .creed .q { font-family: var(--font-display); font-weight: 700; line-height: 1.7; font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
html[dir="rtl"] .xc .k { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
html[dir="rtl"] .out-month-head .out-year { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }

html[dir="rtl"] .badge-247 { font-size: 0.95rem; }
html[dir="rtl"] .btn { font-size: 1rem; }

/* ---------- Nav ---------- */
html[dir="rtl"] .nav-links a { font-size: 1rem; white-space: nowrap; }
html[dir="rtl"] .nav-links a.nav-lang {
  font-family: "Poppins", var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border: 1.5px solid currentColor;
  border-radius: 30px;
  opacity: 0.9;
}
@media (min-width: 881px) and (max-width: 1180px) {
  html[dir="rtl"] .nav-inner { gap: 12px; }
  html[dir="rtl"] .nav-links { gap: 12px; }
  html[dir="rtl"] .nav-links a { font-size: 0.9rem; }
  html[dir="rtl"] .nav-links a.nav-lang { font-size: 0.74rem; padding: 3px 9px; }
  html[dir="rtl"] .nav-cta { padding: 8px 14px; }
  html[dir="rtl"] .nav-logo img { height: 36px; }
}
@media (min-width: 881px) and (max-width: 980px) {
  html[dir="rtl"] .nav-links { gap: 9px; }
  html[dir="rtl"] .nav-links a { font-size: 0.82rem; }
  html[dir="rtl"] .nav-cta { padding: 7px 10px; }
  html[dir="rtl"] .nav-logo img { height: 32px; }
}
@media (max-width: 880px) {
  html[dir="rtl"] .nav-links a.nav-lang { font-size: 0.95rem; padding: 6px 18px; }
}

/* ---------- Hero / mini stats (border + padding were on the left) ---------- */
html[dir="rtl"] .hero-stats-mini div {
  border-left: 0;
  padding-left: 0;
  border-right: 3px solid var(--orange);
  padding-right: 16px;
}
html[dir="rtl"] .hero-stats-mini span { font-size: 0.9rem; }
/* purple glow follows the text side */
html[dir="rtl"] .hero::after {
  background:
    linear-gradient(180deg, rgba(23, 15, 36, 0.5) 0%, rgba(23, 15, 36, 0.15) 40%, rgba(23, 15, 36, 0.93) 90%),
    radial-gradient(75% 55% at 82% 85%, rgba(123, 46, 142, 0.45), transparent 70%);
}
html[dir="rtl"] .page-hero::after {
  background:
    linear-gradient(180deg, rgba(23,15,36,0.78) 0%, rgba(23,15,36,0.5) 45%, rgba(23,15,36,0.9) 100%),
    radial-gradient(70% 60% at 85% 90%, rgba(123,46,142,0.5), transparent 70%);
}
html[dir="rtl"] .visit {
  background:
    radial-gradient(90% 130% at 15% -10%, rgba(123, 46, 142, 0.5), transparent 60%),
    linear-gradient(160deg, var(--night), var(--night-deep));
}
html[dir="rtl"] .preorder {
  background:
    radial-gradient(80% 120% at 85% -20%, rgba(247, 148, 29, 0.35), transparent 55%),
    linear-gradient(225deg, #25104a 0%, var(--night) 60%);
}

/* ---------- Marquee: duplicated track must travel the other way ---------- */
html[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- Track band: dark side moves to the right where the text is ---------- */
html[dir="rtl"] .track::after {
  background: linear-gradient(260deg, rgba(23, 15, 36, 0.88) 20%, rgba(23, 15, 36, 0.42) 60%, rgba(23, 15, 36, 0.15));
}

/* ---------- Cards: corner chips / tags ---------- */
html[dir="rtl"] .ocard-img .chip { left: auto; right: 16px; }
html[dir="rtl"] .fc-img .tag { left: auto; right: 14px; }
html[dir="rtl"] .ocard-body li { margin: 0 0 8px 6px; }
html[dir="rtl"] .prow .nm .b { margin-left: 0; margin-right: 7px; }
html[dir="rtl"] .prow .nm { line-height: 1.6; }
html[dir="rtl"] .pcat-head h3,
html[dir="rtl"] .fc-body h4,
html[dir="rtl"] .gcard h4,
html[dir="rtl"] .scard h4,
html[dir="rtl"] .ocard-body h3 { line-height: 1.5; }
html[dir="rtl"] .fc-price small { font-size: 0.78rem; }
html[dir="rtl"] .scard .when { font-size: 0.85rem; }
html[dir="rtl"] .gcard .meta { font-size: 0.88rem; }

/* gradient overlays on cross-link cards */
html[dir="rtl"] .xc::after { background: linear-gradient(240deg, rgba(23,15,36,0.88), rgba(23,15,36,0.42)); }
html[dir="rtl"] .xc:hover::after { background: linear-gradient(240deg, rgba(123,46,142,0.9), rgba(23,15,36,0.5)); }
html[dir="rtl"] .xc { align-items: flex-start; }

/* ---------- Quote marks ---------- */
html[dir="rtl"] .quote-band blockquote::before { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .quote-band blockquote::after { margin-left: 0; margin-right: 4px; }

/* ---------- Dock: order flips with direction (Directions on the right) ---------- */
html[dir="rtl"] .dock a { font-size: 0.95rem; }

/* ---------- Outings page (.out-*) ---------- */
html[dir="rtl"] .out-for { font-size: 0.85rem; }
html[dir="rtl"] .out-incl li { padding-left: 0; padding-right: 29px; }
html[dir="rtl"] .out-incl li::before { left: auto; right: 0; }
html[dir="rtl"] .out-tailor .gcard .meta a::after { content: " ←"; content: " ←" / ""; }
html[dir="rtl"] .out-org::after { content: " ↖"; content: " ↖" / ""; }
html[dir="rtl"] .out-month { grid-template-columns: 190px minmax(0, 1fr); }
html[dir="rtl"] .out-ev { grid-template-columns: 172px minmax(0, 1fr) auto; }
html[dir="rtl"] .out-date { font-size: 0.88rem; }
html[dir="rtl"] .out-rule { padding: 14px 16px 14px 20px; }
html[dir="rtl"] .out-field input,
html[dir="rtl"] .out-field select,
html[dir="rtl"] .out-field textarea { font-family: var(--font-body); text-align: right; }
html[dir="rtl"] .out-field input[type="date"],
html[dir="rtl"] .out-field input[type="number"] { text-align: right; }
html[dir="rtl"] .out-faq-q { text-align: right; }
html[dir="rtl"] .out-faq-q,
html[dir="rtl"] .faq-q { line-height: 1.6; }
@media (max-width: 720px) {
  html[dir="rtl"] .out-month { grid-template-columns: 1fr; }
  html[dir="rtl"] .out-ev { grid-template-columns: 1fr; }
  html[dir="rtl"] .out-month-head { flex-direction: row; }
}

/* ---------- Guide articles (.article) ---------- */
html[dir="rtl"] .article p { line-height: 1.95; }
html[dir="rtl"] .article ul.checks li { padding-left: 0; padding-right: 30px; line-height: 1.8; }
html[dir="rtl"] .article ul.checks li::before { left: auto; right: 0; }
html[dir="rtl"] .article .callout { border-left: 0; border-right: 4px solid var(--orange); }
html[dir="rtl"] .article table.cal th,
html[dir="rtl"] .article table.cal td { text-align: right; }
html[dir="rtl"] .article h2 { line-height: 1.5; }
html[dir="rtl"] .article h3 { line-height: 1.5; }
html[dir="rtl"] .toc a { padding: 4px 0; }
/* long URLs / emails inside the article must not push the page wider on phones */
html[dir="rtl"] .article, html[dir="rtl"] .article li, html[dir="rtl"] .article p { overflow-wrap: anywhere; }

/* ---------- Misc ---------- */
html[dir="rtl"] .now-strip #now-msg-ar { font-size: 1rem; font-weight: 500; color: rgba(255, 249, 238, 0.92); }
html[dir="rtl"] .now-strip #now-msg-ar b { color: var(--orange-soft); }
html[dir="rtl"] .foot-grid h5 { font-size: 0.95rem; }
html[dir="rtl"] .foot-bottom { line-height: 1.8; }
html[dir="rtl"] .stat small { font-size: 0.85rem; }

/* bdi / ltr islands keep numbers and phone numbers readable */
html[dir="rtl"] bdi[dir="ltr"], html[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }