/* ─────────────────────────────────────────────────────────
   Landing Page CSS — tiffin web app
───────────────────────────────────────────────────────── */

/* ── CSS Variables ───────────────────────────────────────── */
:root {
  --green:         #4A1594;
  --green-d:       #380f73;
  --green-l:       #f0e8ff;
  --amber:         #d97706;
  --amber-l:       #fffbeb;
  --text:          #111827;
  --muted:         #6b7280;
  --radius:        14px;
  --primary:       #4A1594;
  --primary-dark:  #380f73;
  --primary-light: #f0e8ff;
  --nav-h:         64px;
  --max:           1152px;
  --border:        #e5e7eb;
  --card:          #fff;
}

/* ── Base ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text); }
h1,h2,h3,h4,h5 { font-family: 'Lexend', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

/* ── Scroll-reveal ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* ── Header glass ────────────────────────────────────────── */
#site-header {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(74,21,148,.12);
  transition: box-shadow .3s;
}
#site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }

/* ── Mobile nav ──────────────────────────────────────────── */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#mobile-menu.open { max-height: 400px; }

/* ── Hero Slider ─────────────────────────────────────────── */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.slide.active { opacity: 1; }
.slider-dot { background: rgba(255,255,255,.4); border: none; cursor: pointer; }
.slider-dot.active-dot { background: #fff; width: 28px; border-radius: 6px; }
.slide-text { opacity: 0; transition: opacity 1s ease; }
.slide-text-active { opacity: 1; }

/* ── Hover lift cards ────────────────────────────────────── */
.card-lift { transition: transform .25s ease, box-shadow .25s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.12); }

/* ── Step icon hover ─────────────────────────────────────── */
.step-icon { transition: transform .3s ease, box-shadow .3s ease; }
.step-card:hover .step-icon { transform: scale(1.12); box-shadow: 0 8px 24px rgba(74,21,148,.3); }

/* ── Meal image zoom ─────────────────────────────────────── */
.meal-img-wrap { overflow: hidden; }
.meal-img-wrap img { transition: transform .4s ease; }
.meal-card:hover .meal-img-wrap img { transform: scale(1.07); }

/* ── Clamp ───────────────────────────────────────────────── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Testimonial quote bg ────────────────────────────────── */
.quote-bg::before {
  content: '\201C';
  position: absolute; top: -12px; left: 12px;
  font-size: 120px; font-family: Georgia, serif;
  color: rgba(74,21,148,.07); line-height: 1; pointer-events: none; z-index: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-green {
  background: var(--green); color: #fff; border-radius: 9999px;
  padding: .65rem 1.6rem; font-family: 'Lexend', sans-serif;
  font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s, transform .15s, box-shadow .2s;
  border: 2px solid transparent;
}
.btn-green:hover { background: var(--green-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(74,21,148,.3); }

.btn-outline {
  background: transparent; color: #fff; border-radius: 9999px;
  padding: .65rem 1.6rem; font-family: 'Lexend', sans-serif;
  font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s, transform .15s;
  border: 2px solid rgba(255,255,255,.7);
}
.btn-outline:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }

.btn-amber {
  background: var(--amber); color: #fff; border-radius: 9999px;
  padding: .6rem 1.4rem; font-family: 'Lexend', sans-serif;
  font-weight: 600; font-size: .875rem; display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s, transform .15s;
  border: 2px solid transparent;
}
.btn-amber:hover { background: #b45309; transform: translateY(-1px); }

/* ── Newsletter input ────────────────────────────────────── */
.newsletter-input { border-radius: 9999px; outline: none; border: 2px solid transparent; transition: border-color .2s; }
.newsletter-input:focus { border-color: var(--green); }

/* ── Product card grid ───────────────────────────────────── */
#m-items-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media(max-width:900px) { #m-items-list { grid-template-columns: repeat(2,1fr); gap:16px; } }
@media(max-width:767px) { #m-items-list { grid-template-columns: 1fr; gap:14px; } }

/* ── Product cards ───────────────────────────────────────── */
.m-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.07); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.m-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.m-card-img { height:180px; overflow:hidden; background:#f0e8ff; }
.m-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.m-card:hover .m-card-img img { transform:scale(1.06); }
.m-card-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg,#f0e8ff,#ede0fc); }
.m-card-body { padding:14px; }
.m-card-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.m-card-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; font-family:'Inter',sans-serif; }
.m-card-name { font-family:'Lexend',sans-serif; font-weight:700; font-size:14px; color:#111827; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.m-card-desc { font-size:12px; color:#6b7280; line-height:1.5; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.m-card-btn { width:100%; padding:10px 0; border:none; border-radius:10px; font-family:'Lexend',sans-serif; font-weight:700; font-size:13px; color:#fff; cursor:pointer; background:var(--primary); transition:background .2s; display:flex; align-items:center; justify-content:center; gap:5px; }
.m-card-btn:hover { background:var(--primary-dark); }
.m-card-btn.added { background:#16a34a; }
.no-items { text-align:center; padding:48px 20px; color:#6b7280; font-size:15px; grid-column:1/-1; }

/* ── Menu section layout ─────────────────────────────────── */
.menu-heading { max-width:1152px; margin:0 auto; padding:52px 24px 28px; text-align:center; }
.menu-badge { display:inline-block; font-size:13px; font-weight:600; padding:6px 16px; border-radius:20px; margin-bottom:14px; background:#f0e8ff; color:#4A1594; font-family:'Inter',sans-serif; }
.menu-wrap { display:flex; gap:24px; align-items:flex-start; max-width:1152px; margin:0 auto; padding:0 16px 64px; }
@media(min-width:768px) { .menu-wrap { padding:0 24px 64px; } }
@media(max-width:767px) { .menu-wrap { padding:0 12px 48px; gap:0; } }

/* ── Left sidebar ────────────────────────────────────────── */
.menu-sidebar { width:210px; flex-shrink:0; position:sticky; top:80px; display:flex; flex-direction:column; gap:14px; }
@media(max-width:767px) { .menu-sidebar { display:none; } }
.sbar-box { background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sbar-title { display:flex; align-items:center; gap:8px; font-family:'Lexend',sans-serif; font-size:12px; font-weight:700; color:#374151; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
.sbar-icon { font-size:17px!important; color:#4A1594; }
.sbar-sk { height:34px; border-radius:8px; margin-bottom:8px; background:linear-gradient(90deg,#f0f0f5 25%,#e4e4ec 50%,#f0f0f5 75%); background-size:200% 100%; animation:sbar-sh 1.4s infinite; }
@keyframes sbar-sh { from{background-position:200% 0} to{background-position:-200% 0} }
.sbar-cate-btn { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; padding:9px 12px; border-radius:10px; border:none; background:transparent; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; text-align:left; transition:all .18s; margin-bottom:3px; }
.sbar-cate-btn:hover { background:#f0e8ff; color:#4A1594; }
.sbar-cate-btn.active { background:#4A1594; color:#fff; }
.sbar-cate-time { font-size:11px; font-weight:400; opacity:.75; }
.sbar-food { display:flex; flex-direction:column; gap:6px; }
.sbar-food-btn { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:10px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; transition:all .18s; }
.sbar-food-btn:hover { border-color:#4A1594; color:#4A1594; background:#f0e8ff; }
.sbar-food-active { background:#4A1594!important; border-color:#4A1594!important; color:#fff!important; }
.sbar-food-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Products column ─────────────────────────────────────── */
.menu-products { flex:1; min-width:0; }
.m-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px) { .m-grid-3 { grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:767px) { .m-grid-3 { grid-template-columns:1fr; gap:14px; } }

/* ── Skeleton cards ──────────────────────────────────────── */
.m-sk-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.m-sk-img { height:180px; background:linear-gradient(90deg,#f0f0f5 25%,#e4e4ec 50%,#f0f0f5 75%); background-size:200% 100%; animation:sbar-sh 1.4s infinite; }
.m-sk-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.m-sk-line { height:12px; border-radius:6px; background:linear-gradient(90deg,#f0f0f5 25%,#e4e4ec 50%,#f0f0f5 75%); background-size:200% 100%; animation:sbar-sh 1.4s infinite; }
.m-sk-line.short { width:60%; }
.m-sk-line.xshort { width:35%; }

/* ── Mobile filter bar ───────────────────────────────────── */
.mob-bar { background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:64px; z-index:80; box-shadow:0 2px 6px rgba(0,0,0,.06); }
@media(min-width:768px) { .mob-bar { display:none!important; } }
.mob-cates-wrap { overflow-x:auto; scrollbar-width:none; border-bottom:1px solid #f3f4f6; }
.mob-cates-wrap::-webkit-scrollbar { display:none; }
.mob-cates-scroll { display:flex; gap:6px; padding:10px 14px; }
.mob-cate-btn { flex-shrink:0; padding:6px 14px; border-radius:20px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; white-space:nowrap; transition:all .2s; }
.mob-cate-btn:hover { border-color:#4A1594; color:#4A1594; background:#f0e8ff; }
.mob-cate-btn.active { background:#4A1594; border-color:#4A1594; color:#fff; }
.mob-food-row { display:flex; gap:8px; padding:8px 14px 10px; overflow-x:auto; scrollbar-width:none; }
.mob-food-row::-webkit-scrollbar { display:none; }
.mob-food-btn { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#374151; cursor:pointer; white-space:nowrap; transition:all .2s; }
.mob-food-active { background:#4A1594!important; border-color:#4A1594!important; color:#fff!important; }
.mob-food-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Language switcher ───────────────────────────────────── */
.lang-switcher { position: relative; }
.lang-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:none; background:rgba(74,21,148,.08); color:#4A1594; cursor:pointer; transition:background .2s; font-size:18px; }
.lang-btn:hover { background:rgba(74,21,148,.18); }
.lang-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.14); min-width:160px; overflow:hidden; z-index:200; }
.lang-dropdown.open { display:block; }
.lang-option { display:block; width:100%; padding:10px 16px; text-align:left; border:none; background:transparent; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; transition:background .15s; text-decoration:none; }
.lang-option:hover { background:#f0e8ff; color:#4A1594; }
.lang-option.active { background:#4A1594; color:#fff; }

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE RTL — Arabic (dir="rtl")
══════════════════════════════════════════════════════════ */
[dir="rtl"] body { direction:rtl; text-align:right; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,
[dir="rtl"] p,[dir="rtl"] label,[dir="rtl"] a { direction:rtl; text-align:right; }
[dir="rtl"] #site-header .max-w-6xl { direction:rtl; }
[dir="rtl"] #site-header nav { flex-direction:row-reverse; }
[dir="rtl"] #site-header .flex.items-center.gap-3 { flex-direction:row-reverse; }
[dir="rtl"] #mobile-menu .flex.flex-col { align-items:flex-end; }
[dir="rtl"] #mobile-menu .flex.flex-wrap.gap-2 { flex-direction:row-reverse; }
[dir="rtl"] #hero .max-w-2xl { direction:rtl; text-align:right; }
[dir="rtl"] #hero .flex.flex-wrap.gap-3 { flex-direction:row-reverse; }
[dir="rtl"] #hero .inline-flex.items-center.gap-2 { flex-direction:row-reverse; }
[dir="rtl"] .step-card { direction:rtl; }
[dir="rtl"] #how .grid { direction:rtl; }
[dir="rtl"] #how .flex.flex-wrap { flex-direction:row-reverse; }
[dir="rtl"] #about .grid.lg\:grid-cols-2 { direction:rtl; }
[dir="rtl"] #about .border-l-4 { border-left-width:0!important; border-right:4px solid; }
[dir="rtl"] #about .border-l-4.flex { flex-direction:row-reverse; }
[dir="rtl"] #about .flex.items-center.gap-3 { flex-direction:row-reverse; }
[dir="rtl"] #about .absolute.-bottom-5 { right:auto; left:-1rem; }
[dir="rtl"] #about .sm\:-right-6 { right:auto!important; left:-1.5rem; }
[dir="rtl"] #about .inline-flex.items-center.gap-2 { flex-direction:row-reverse; }
[dir="rtl"] .menu-heading { direction:rtl; }
[dir="rtl"] .menu-wrap { flex-direction:row-reverse; }
[dir="rtl"] .sbar-title { flex-direction:row-reverse; }
[dir="rtl"] .sbar-cate-btn { text-align:right; flex-direction:row-reverse; }
[dir="rtl"] .sbar-food-btn { flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .mob-cates-scroll { direction:rtl; }
[dir="rtl"] .mob-food-row { direction:rtl; }
[dir="rtl"] .m-card-body { text-align:right; direction:rtl; }
[dir="rtl"] .m-card-badges { flex-direction:row-reverse; }
[dir="rtl"] .m-card-btn { flex-direction:row-reverse; }
[dir="rtl"] .quote-bg { direction:rtl; }
[dir="rtl"] .quote-bg .flex.gap-0\.5 { flex-direction:row-reverse; }
[dir="rtl"] .quote-bg .flex.items-center.gap-3 { flex-direction:row-reverse; }
[dir="rtl"] .quote-bg p { text-align:right; }
[dir="rtl"] .quote-bg::before { left:auto; right:12px; }
[dir="rtl"] .flex.flex-wrap.gap-4.justify-center { flex-direction:row-reverse; }
[dir="rtl"] #contact .grid.lg\:grid-cols-2 { direction:rtl; }
[dir="rtl"] #contact .flex.items-center.gap-4 { flex-direction:row-reverse; }
[dir="rtl"] #contact .flex.flex-col.gap-5 .flex { flex-direction:row-reverse; }
[dir="rtl"] #contact input,[dir="rtl"] #contact textarea,
[dir="rtl"] #contact select { text-align:right; direction:rtl; }
[dir="rtl"] #contact label { text-align:right; }
[dir="rtl"] footer .grid { direction:rtl; }
[dir="rtl"] footer .flex.gap-3 { flex-direction:row-reverse; }
[dir="rtl"] footer .flex.items-center.gap-2 { flex-direction:row-reverse; }
[dir="rtl"] footer .flex.flex-wrap.items-center.justify-between { flex-direction:row-reverse; }
[dir="rtl"] footer ul { padding-right:0; text-align:right; }
[dir="rtl"] .btn-green,[dir="rtl"] .btn-amber,[dir="rtl"] .btn-outline { flex-direction:row-reverse; }
[dir="rtl"] .modal-body { direction:rtl; text-align:right; }
[dir="rtl"] .modal-price-row { flex-direction:row-reverse; }
[dir="rtl"] .modal-footer { flex-direction:row-reverse; }
[dir="rtl"] .tags-wrap { flex-direction:row-reverse; }
[dir="rtl"] .modal-type-row { text-align:right; }
[dir="rtl"] .cart-bar { flex-direction:row-reverse; }
[dir="rtl"] .lang-dropdown { right:auto; left:0; }
[dir="rtl"] .lang-option { text-align:right; }