/* ═══════════════════════════════════════════════════════════════ FlavorQuest — RTL Stylesheet Loaded on all pages. Rules only apply when dir="rtl" is set on the element by i18n.js. ═══════════════════════════════════════════════════════════════ */ /* ── Mixed Directionality Fix ───────────────────────────────── Critical for brand names & English terms embedded in RTL text. unicode-bidi: isolate ensures the browser treats each text run independently, preventing broken read order on mixed content. */ [dir="rtl"] #cook-instruction, [dir="rtl"] #cook-tip, [dir="rtl"] .ing-row, [dir="rtl"] .recipe-desc, [dir="rtl"] .recipe-tips-text, [dir="rtl"] p, [dir="rtl"] h2, [dir="rtl"] h3 { unicode-bidi: isolate; } /* ── Text Alignment ───────────────────────────────────────────── */ [dir="rtl"] body { text-align: right; } /* ── Navigation ───────────────────────────────────────────────── */ [dir="rtl"] nav .flex.items-center { flex-direction: row-reverse; } [dir="rtl"] nav .hidden.md\:flex { flex-direction: row-reverse; } /* ── Cooking Mode — Main Layout ───────────────────────────────── */ [dir="rtl"] .cook-main { flex-direction: row-reverse; } /* ── Cooking Mode — Navigation Buttons ────────────────────────── */ [dir="rtl"] #cook-prev-btn, [dir="rtl"] #cook-next-btn { flex-direction: row-reverse; } /* Arrow icons flip in RTL */ [dir="rtl"] #cook-prev-btn .material-symbols-outlined, [dir="rtl"] #cook-next-btn .material-symbols-outlined { transform: scaleX(-1); } /* ── Cooking Mode — Header Center Title ───────────────────────── */ [dir="rtl"] .absolute.left-1\/2.-translate-x-1\/2 { left: auto; right: 50%; transform: translateX(50%); } /* ── Cooking Mode — Tabs ──────────────────────────────────────── */ [dir="rtl"] .cook-tab .material-symbols-outlined { margin-right: 0; margin-left: 0.25rem; } /* ── Cooking Mode — Ingredient Rows ───────────────────────────── */ [dir="rtl"] .ing-row { flex-direction: row-reverse; } /* ── Cooking Mode — Journey Steps ─────────────────────────────── */ [dir="rtl"] .journey-step { flex-direction: row-reverse; } /* ── Cooking Mode — Footer Progress ───────────────────────────── */ [dir="rtl"] #cook-progress-bar { right: 0; left: auto; margin-left: auto; margin-right: 0; } /* RTL progress bar grows from right (natural direction) */ [dir="rtl"] .w-full.h-2.bg-zinc-100 { direction: rtl; } /* ── Recipe Detail Page ───────────────────────────────────────── */ [dir="rtl"] .recipe-meta .flex { flex-direction: row-reverse; } /* ── Gallery Scroll (horizontal categories) ───────────────────── */ [dir="rtl"] .gallery-scroll { flex-direction: row-reverse; } /* ── Recipe Cards ─────────────────────────────────────────────── */ [dir="rtl"] .recipe-card-shadow .flex.items-center.gap-3 { flex-direction: row-reverse; } /* XP badge position flip */ [dir="rtl"] .absolute.top-3.right-3 { right: auto; left: 0.75rem; } /* ── Footer ───────────────────────────────────────────────────── */ [dir="rtl"] footer .grid { direction: rtl; } [dir="rtl"] footer ul { text-align: right; } /* ── Favourite Heart Badge ────────────────────────────────────── */ [dir="rtl"] .absolute.-top-1.-right-1 { right: auto; left: -0.25rem; } /* General flex containers: Let flexbox natural direction handle RTL via the dir attribute. Only override specific semantic containers (nav, cooking mode buttons, etc.) above. */ /* ── Search Modal ─────────────────────────────────────────────── */ [dir="rtl"] input[type="text"], [dir="rtl"] input[type="search"] { text-align: right; direction: rtl; } /* ── Diet Plans Grid ──────────────────────────────────────────── */ [dir="rtl"] #diet-plans-preview { direction: rtl; } /* ── Auth Page ────────────────────────────────────────────────── */ [dir="rtl"] form { text-align: right; } [dir="rtl"] form label { text-align: right; } /* ── Completion Overlay ───────────────────────────────────────── */ [dir="rtl"] #cook-complete-overlay .flex.items-center.justify-between { flex-direction: row-reverse; } /* ── Diet Card CTA Arrow ─────────────────────────────────────── */ [dir="rtl"] .diet-cta-btn .material-symbols-outlined { transform: scaleX(-1); } [dir="rtl"] .diet-cta-btn:hover .material-symbols-outlined { transform: scaleX(-1) translateX(0.25rem); } /* ── Typography (Hebrew) ──────────────────────────────────────── */ [dir="rtl"] body { font-family: 'Suez One', sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .font-heading, [dir="rtl"] .font-headline { font-family: 'Suez One', sans-serif; }