/* ============================================================
   EleWinza Menu — Light Theme
   Orange #D85A30 | White #FFFFFF | Bg #FFF8F5
   Fonts: Playfair Display + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Variables ───────────────────────────────────────────────── */
:root {
  --m-bg:       #FFF8F5;
  --m-card:     #FFFFFF;
  --m-border:   #EDE8E3;
  --m-accent:   #D85A30;
  --m-dark:     #B84520;
  --m-text:     #1A1A1A;
  --m-muted:    #888080;
  --m-surface:  #F7F5F2;
  --m-success:  #2D7A4F;
  --m-veg:      #2D7A4F;
  --m-nonveg:   #E53935;
  --m-radius:   14px;
  --m-shadow:   0 2px 14px rgba(0,0,0,.07);
  --m-font-h:   'Playfair Display', Georgia, serif;
  --m-font-b:   'DM Sans', system-ui, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Page wrapper ────────────────────────────────────────────── */
body.rl-menu-page { background: var(--m-bg); font-family: var(--m-font-b); color: var(--m-text); margin: 0; }
.rl-menu-root     { background: var(--m-bg); font-family: var(--m-font-b); color: var(--m-text); }
.rl-menu-page     { min-height: 100vh; background: var(--m-bg); }

/* ── Hero ────────────────────────────────────────────────────── */
.rl-menu-hero {
  background: linear-gradient(135deg, #D85A30 0%, #B84520 100%);
  padding: 32px 20px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rl-menu-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}
.rl-menu-hero h1 {
  font-family: var(--m-font-h);
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
}
.rl-menu-hero-sub   { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 auto 20px; max-width: 380px; line-height: 1.5; }
.rl-menu-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35);
  border-radius: 100px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; color: #fff;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px;
}

/* Search bar */
.rl-menu-search-bar { max-width: 400px; margin: 0 auto; position: relative; }
.rl-menu-search-bar input {
  width: 100%; background: #fff; border: none; border-radius: 100px;
  padding: 13px 48px 13px 20px; font-size: 14px; color: var(--m-text);
  font-family: var(--m-font-b); outline: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.15);
}
.rl-menu-search-bar input::placeholder { color: #BBB; }
.rl-menu-search-bar input:focus { box-shadow: 0 2px 14px rgba(0,0,0,.2); }
.rl-menu-search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #AAA; pointer-events: none; }

/* ── Layout ──────────────────────────────────────────────────── */
.rl-menu-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: 1100px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.rl-menu-sidebar {
  background: #fff;
  border-right: 1px solid var(--m-border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  height: calc(100vh - 200px);
  overflow-y: auto;
}
.rl-menu-sidebar::-webkit-scrollbar { width: 3px; }
.rl-menu-sidebar::-webkit-scrollbar-thumb { background: var(--m-border); border-radius: 4px; }

.rl-cat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--m-muted);
  transition: all .18s;
}
.rl-cat-item:hover  { background: #FDF0EB; color: var(--m-accent); }
.rl-cat-item.active { background: #FDF0EB; border-left-color: var(--m-accent); color: var(--m-accent); font-weight: 700; }
.rl-cat-count {
  margin-left: auto; font-size: 11px;
  background: var(--m-surface); border-radius: 100px; padding: 1px 7px; color: var(--m-muted);
}
.rl-cat-item.active .rl-cat-count { background: #FDE8DF; color: var(--m-accent); }

/* Category icon chips — give every category emoji a tinted round backdrop
   so it never blends into the sidebar's white / near-white background,
   regardless of the emoji's own colours. Colour is picked deterministically
   per category name (see RL_Menu::get_cat_color_class()) so the same
   category always shows the same chip colour. */
.rl-cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 9px;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.rl-cat-icon-lg { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; margin-right: 8px; vertical-align: middle; }
.rl-cat-c-all { background: #FDF0EB; }
.rl-cat-c0 { background: #FDF0EB; }
.rl-cat-c1 { background: #FDECEC; }
.rl-cat-c2 { background: #FFF4D6; }
.rl-cat-c3 { background: #E8F6EE; }
.rl-cat-c4 { background: #E6F2FB; }
.rl-cat-c5 { background: #F1E9FB; }
.rl-cat-c6 { background: #FDE9F3; }
.rl-cat-c7 { background: #E8F7F5; }

/* ── Free delivery progress nudge (cart drawer) ──────────────── */
.rl-free-nudge {
  font-size: 12.5px; font-weight: 600; text-align: center;
  padding: 10px 14px; border-radius: 10px; margin: 0 16px 12px;
}
.rl-free-nudge-pending  { background: #FFF4E5; color: #B8720A; }
.rl-free-nudge-unlocked { background: #E8F6EE; color: var(--m-success); }

/* ── Today's Special banner ──────────────────────────────────── */
.rl-special-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #FFD98E, #FFB65C);
  color: #6B3E00;
  font-size: 13px; font-weight: 700;
  padding: 10px 16px;
  text-align: center;
  animation: rl-special-slide-in .35s ease both;
}
.rl-special-banner-icon { font-size: 15px; }
@keyframes rl-special-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile tabs ─────────────────────────────────────────────── */
.rl-menu-tabs-mobile {
  display: none;
  overflow-x: auto; gap: 8px; padding: 12px 16px;
  background: #fff; border-bottom: 1px solid var(--m-border);
  scrollbar-width: none;
}
.rl-menu-tabs-mobile::-webkit-scrollbar { display: none; }
.rl-tab-pill {
  flex-shrink: 0; padding: 8px 16px; border-radius: 100px;
  border: 1.5px solid var(--m-border); background: var(--m-surface);
  font-size: 13px; font-weight: 500; color: var(--m-muted);
  cursor: pointer; white-space: nowrap; transition: all .18s;
  font-family: var(--m-font-b);
}
.rl-tab-pill.active { background: var(--m-accent); border-color: var(--m-accent); color: #fff; font-weight: 700; }

/* ── Products area ───────────────────────────────────────────── */
.rl-menu-products { padding: 24px; overflow-y: auto; }
.rl-menu-category-section { margin-bottom: 36px; }
.rl-menu-category-title {
  font-family: var(--m-font-h);
  font-size: 20px; font-weight: 700; color: var(--m-text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--m-border);
}
.rl-menu-category-count { font-size: 12px; color: var(--m-muted); font-weight: 400; margin-left: 8px; }

/* ── Product card ────────────────────────────────────────────── */
.rl-product-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  transition: box-shadow .2s, transform .2s;
  position: relative;
}
.rl-product-card:hover { box-shadow: 0 4px 20px rgba(216,90,48,.1); transform: translateY(-1px); border-color: rgba(216,90,48,.2); }
.rl-product-card.out-of-stock { opacity: .5; }

.rl-product-info { flex: 1; min-width: 0; }
.rl-product-name { font-size: 15px; font-weight: 600; color: var(--m-text); margin: 0 0 5px; line-height: 1.3; }
.rl-product-desc {
  /* No line clamp — full description shows, so cards now vary in height
     based on how long each item's own description is (previously clamped
     to 2 lines with -webkit-line-clamp, which cut off the fuller
     descriptions added to every item). */
  font-size: 12px; color: var(--m-muted); line-height: 1.55; margin-bottom: 10px;
}
.rl-product-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-product-price { font-size: 16px; font-weight: 700; color: var(--m-accent); }
.rl-product-earn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--m-success);
  background: #EAF7EF; border-radius: 100px; padding: 2px 8px 2px 6px;
  line-height: 1.5;
}
.rl-product-badges { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.rl-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.rl-badge-bestseller { background: #FDF0EB; color: var(--m-accent); }
.rl-badge-spicy      { background: #FDE8E8; color: #C0392B; }
.rl-badge-trending    { background: #FFF0E0; color: #E0692F; }

/* "Goes well with" cross-sell chips */
.rl-pair-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--m-border);
}
.rl-pair-label { font-size: 10.5px; color: var(--m-muted); font-weight: 600; margin-right: 2px; }
.rl-pair-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 100px;
  padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--m-text);
  cursor: pointer; font-family: var(--m-font-b); transition: background .15s, border-color .15s;
}
.rl-pair-chip:hover { background: #FDF0EB; border-color: rgba(216,90,48,.3); }
.rl-pair-chip-price { color: var(--m-accent); font-weight: 700; }
.rl-pair-chip-added { background: #E8F6EE !important; border-color: var(--m-success) !important; color: var(--m-success) !important; }
.rl-pair-chip-added .rl-pair-chip-price { color: var(--m-success); }

.rl-product-image-wrap {
  flex-shrink: 0; width: 100px; height: 84px; position: relative;
  border-radius: 10px; overflow: hidden; background: var(--m-surface);
}
.rl-product-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.rl-product-card:hover .rl-product-image-wrap img { transform: scale(1.05); }

/* Favorite (heart) toggle */
.rl-fav-btn {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: none; cursor: pointer;
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .15s;
}
.rl-fav-btn:active { transform: scale(.85); }
.rl-fav-btn.active { background: #FFE8EC; }

/* Veg/nonveg dot */
.rl-food-type-dot {
  width: 14px; height: 14px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.rl-food-type-dot.veg { border: 2px solid var(--m-veg); }
.rl-food-type-dot.veg::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--m-veg); }
.rl-food-type-dot.nonveg { border: 2px solid var(--m-nonveg); }
.rl-food-type-dot.nonveg::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--m-nonveg); }

/* Add / Qty */
.rl-add-btn-wrap { position: absolute; bottom: 12px; right: 12px; }
.rl-add-btn {
  background: var(--m-accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--m-font-b);
  transition: background .15s, transform .1s;
  display: flex; align-items: center; gap: 6px;
}
.rl-add-btn:hover   { background: var(--m-dark); }
.rl-add-btn:active  { transform: scale(.97); }
.rl-add-btn:disabled { background: var(--m-muted); cursor: default; }

.rl-qty-ctrl { display: flex; align-items: center; background: #FDF0EB; border: 1.5px solid var(--m-accent); border-radius: 8px; overflow: hidden; }
.rl-qty-btn  { background: none; border: none; color: var(--m-accent); font-size: 18px; width: 32px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: monospace; }
.rl-qty-btn:hover { background: rgba(216,90,48,.1); }
.rl-qty-num  { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; color: var(--m-accent); }

/* ── Cart float ──────────────────────────────────────────────── */
.rl-cart-float {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--m-accent); color: #fff; border: none;
  border-radius: 100px; padding: 14px 24px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 24px rgba(216,90,48,.4);
  display: flex; align-items: center; gap: 10px;
  z-index: 999; transition: transform .2s, box-shadow .2s;
  font-family: var(--m-font-b);
  animation: rl-cart-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.rl-cart-float:hover { background: var(--m-dark); transform: translateY(-2px); }
.rl-cart-float.hidden { display: none; }
.rl-cart-float-count {
  background: rgba(255,255,255,.25); color: #fff;
  border-radius: 100px; padding: 2px 8px;
  font-size: 12px; font-weight: 800; min-width: 22px; text-align: center;
}
@keyframes rl-cart-pop { from { opacity:0; transform: scale(.6) translateY(20px); } to { opacity:1; transform: scale(1); } }

/* ── Cart drawer ─────────────────────────────────────────────── */
.rl-cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(2px);
}
.rl-cart-overlay.open { opacity: 1; pointer-events: all; }

.rl-cart-drawer {
  /* top+bottom:0 sizes this against the *layout* viewport, which on phones
     doesn't shrink when the on-screen keyboard opens — the drawer (or
     whatever's below the fold of the now-smaller *visual* viewport) ends up
     pushed out of view the moment an input is focused, even though the
     input itself stays focused and keeps accepting keystrokes. Sizing with
     an explicit height instead (100dvh where supported, 100vh fallback)
     tracks the real visible area so the field stays on-screen. */
  position: fixed; top: 0; right: 0;
  height: 100vh; height: 100dvh;
  width: min(420px, 100vw);
  background: #fff; z-index: 1001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
}
.rl-cart-overlay.open .rl-cart-drawer { transform: translateX(0); }

.rl-cart-header {
  background: var(--m-accent);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; flex-shrink: 0;
}
.rl-cart-header h3 { font-family: var(--m-font-h); font-size: 18px; margin: 0; color: #fff; font-weight: 700; }
.rl-cart-close {
  background: rgba(255,255,255,.2); border: none; border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: 16px;
}
.rl-cart-close:hover { background: rgba(255,255,255,.3); }

.rl-cart-items { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--m-bg); }
.rl-cart-items::-webkit-scrollbar { width: 3px; }
.rl-cart-items::-webkit-scrollbar-thumb { background: var(--m-border); border-radius: 4px; }

.rl-cart-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--m-border); }
.rl-cart-item:last-child { border-bottom: none; }
.rl-cart-item-img  { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--m-surface); }
.rl-cart-item-name  { font-size: 14px; font-weight: 600; color: var(--m-text); margin-bottom: 3px; }
.rl-cart-item-price { font-size: 13px; color: var(--m-accent); font-weight: 600; }
.rl-cart-item-remove { margin-left: auto; background: none; border: none; color: #CCC; cursor: pointer; font-size: 18px; padding: 4px; }
.rl-cart-item-remove:hover { color: #E53935; }
.rl-cart-empty { text-align: center; padding: 60px 20px; color: var(--m-muted); }
.rl-cart-empty-icon { font-size: 48px; margin-bottom: 12px; }

.rl-cart-footer { padding: 14px 20px; border-top: 1px solid var(--m-border); flex-shrink: 0; background: #fff; }
.rl-cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rl-cart-total-label { font-size: 14px; color: var(--m-muted); }
.rl-cart-total-val { font-size: 24px; font-weight: 800; color: var(--m-accent); }

.rl-loyalty-strip {
  background: #FDF0EB; border: 1px solid rgba(216,90,48,.2);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
  font-size: 13px; color: var(--m-accent);
  display: flex; align-items: center; gap: 8px;
}

.rl-checkout-btn {
  width: 100%; background: var(--m-accent); color: #fff; border: none;
  border-radius: 12px; padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: var(--m-font-b); transition: background .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rl-checkout-btn:hover { background: var(--m-dark); }

/* "My Orders" on the order-confirmed screen is an outline variant (white
   background, orange text/border set inline in menu-checkout-drawer.php)
   rather than the usual solid orange button — the generic hover rule above
   only ever darkens the background, so on this variant it left orange text
   sitting on a dark brown hover background: readable but visibly mismatched
   against the button's own resting-state colors. !important is needed here
   because inline styles otherwise always win over a plain class rule. */
.rl-checkout-btn-outline:hover {
  background: var(--m-accent) !important;
  color: #fff !important;
  border-color: var(--m-accent) !important;
}

/* ── Order type tabs ─────────────────────────────────────────── */
.rl-order-tab {
  flex: 1; padding: 10px; border-radius: 10px;
  border: 1.5px solid var(--m-border); background: var(--m-surface);
  color: var(--m-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .18s; font-family: var(--m-font-b);
}
.rl-order-tab.active { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }

/* ── Toast ───────────────────────────────────────────────────── */
.rl-menu-toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1A1A1A; color: #fff;
  border-radius: 100px; padding: 10px 20px;
  font-size: 13px; font-weight: 600;
  z-index: 1002; opacity: 0; transition: opacity .3s, transform .3s;
  white-space: nowrap; pointer-events: none;
}
.rl-menu-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Addons popup ─────────────────────────────────────────────── */
.rl-addons-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1100;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(3px);
}
.rl-addons-overlay.open { opacity: 1; pointer-events: all; }
.rl-addons-popup {
  background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 520px;
  max-height: 85vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.rl-addons-overlay.open .rl-addons-popup { transform: translateY(0); }
.rl-addons-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--m-border); flex-shrink: 0; }
.rl-addons-product-img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--m-surface); }
.rl-addons-product-name { font-size: 16px; font-weight: 700; color: var(--m-text); margin-bottom: 3px; }
.rl-addons-base-price   { font-size: 14px; color: var(--m-accent); font-weight: 600; }
.rl-addons-close { margin-left: auto; background: var(--m-surface); border: none; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--m-muted); font-size: 16px; }
.rl-addons-close:hover { background: var(--m-border); }
.rl-addons-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.rl-addons-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--m-muted); margin-bottom: 10px; }
.rl-addon-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--m-surface); border: 1.5px solid var(--m-border);
  border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .18s;
}
.rl-addon-item:hover { border-color: rgba(216,90,48,.3); }
.rl-addon-item:has(.rl-addon-chk:checked) { border-color: var(--m-accent); background: #FDF0EB; }
.rl-addon-left  { display: flex; align-items: center; gap: 10px; }
.rl-addon-name  { font-size: 14px; font-weight: 500; color: var(--m-text); }
.rl-addon-right { display: flex; align-items: center; gap: 10px; }
.rl-addon-price { font-size: 13px; font-weight: 600; color: var(--m-accent); }
.rl-addon-chk   { width: 18px; height: 18px; accent-color: var(--m-accent); cursor: pointer; }
.rl-addons-instructions { width: 100%; background: var(--m-surface); border: 1.5px solid var(--m-border); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--m-text); font-family: var(--m-font-b); resize: none; outline: none; box-sizing: border-box; }
.rl-addons-instructions:focus { border-color: var(--m-accent); }
.rl-addons-footer { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--m-border); flex-shrink: 0; }
.rl-addons-qty-row { display: flex; align-items: center; background: #FDF0EB; border: 1.5px solid var(--m-accent); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.rl-addons-qty-btn { background: none; border: none; color: var(--m-accent); font-size: 20px; width: 38px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rl-addons-qty-num { min-width: 32px; text-align: center; font-size: 16px; font-weight: 700; color: var(--m-accent); }
.rl-addons-add-btn { flex: 1; background: var(--m-accent); color: #fff; border: none; border-radius: 10px; padding: 13px 20px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--m-font-b); }
.rl-addons-add-btn:hover { background: var(--m-dark); }

/* ── Featured section ─────────────────────────────────────────── */
.rl-featured-section { background: var(--m-bg); padding: 48px 20px; }
.rl-featured-header  { text-align: center; margin-bottom: 32px; }
.rl-featured-header .rl-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--m-accent); margin-bottom: 8px; }
.rl-featured-header h2 { font-family: var(--m-font-h); font-size: clamp(24px,5vw,36px); color: var(--m-text); margin: 0 0 8px; }
.rl-featured-header p  { color: var(--m-muted); font-size: 14px; max-width: 380px; margin: 0 auto; }
.rl-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; max-width: 1100px; margin: 0 auto 28px; }
.rl-featured-card { background: #fff; border: 1px solid var(--m-border); border-radius: var(--m-radius); overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; }
.rl-featured-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(216,90,48,.12); border-color: rgba(216,90,48,.2); }
.rl-featured-card-img { width: 100%; height: 150px; object-fit: cover; background: var(--m-surface); display: block; }
.rl-featured-card-body { padding: 14px; }
.rl-featured-card-name  { font-size: 15px; font-weight: 600; color: var(--m-text); margin-bottom: 4px; }
.rl-featured-card-desc  { font-size: 12px; color: var(--m-muted); margin-bottom: 10px; }
.rl-featured-card-footer { display: flex; align-items: center; justify-content: space-between; }
.rl-featured-card-price  { font-size: 16px; font-weight: 700; color: var(--m-accent); }
.rl-featured-add-btn { background: var(--m-accent); color: #fff; border: none; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--m-font-b); }
.rl-featured-add-btn:hover { background: var(--m-dark); }
.rl-view-menu-btn { display: block; width: fit-content; margin: 0 auto; background: transparent; border: 1.5px solid var(--m-accent); color: var(--m-accent); border-radius: var(--m-radius); padding: 13px 28px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .18s, color .18s; }
.rl-view-menu-btn:hover { background: var(--m-accent); color: #fff; }

/* ── Skeleton ─────────────────────────────────────────────────── */
.rl-skeleton { background: linear-gradient(90deg, #F0EDE9 25%, #E8E4DF 50%, #F0EDE9 75%); background-size: 200% 100%; animation: rl-shimmer 1.5s infinite; border-radius: 8px; }
@keyframes rl-shimmer { to { background-position: -200% 0; } }

/* ── Bill breakdown ───────────────────────────────────────────── */
#rl-bill-breakdown { transition: all .3s; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rl-menu-sidebar     { display: none; }
  .rl-menu-tabs-mobile { display: flex; }
  .rl-menu-layout      { grid-template-columns: 1fr; }
  .rl-menu-products    { padding: 12px; }
  .rl-product-card     { padding: 12px; gap: 10px; }
  .rl-product-image-wrap { width: 80px; height: 70px; }
  .rl-product-name     { font-size: 14px; }
  .rl-cart-float       { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 14px; }
  .rl-cart-drawer      { width: 100vw; }
  .rl-featured-grid    { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
  .rl-featured-card-img { height: 110px; }
}

@media (max-width: 400px) {
  .rl-menu-hero { padding: 24px 14px 20px; }
  .rl-menu-hero h1 { font-size: 20px; }
}

/* ── Multi-step in-drawer checkout ────────────────────────────── */
#rl-cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
#rl-cart-overlay.open { opacity: 1; pointer-events: all; }

#rl-cart-overlay > .rl-cart-drawer,
#rl-step-details,
#rl-step-payment,
#rl-step-confirm {
  /* See .rl-cart-drawer above for why this is an explicit height instead
     of top+bottom:0 — same mobile-keyboard issue, and this is exactly the
     panel with the address textarea where it was reported. */
  position: fixed;
  top: 0; right: 0;
  height: 100vh; height: 100dvh;
  width: min(420px, 100vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 1001;
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
}

/* Steps stack on top of each other — the active one slides in */
#rl-step-details,
#rl-step-payment,
#rl-step-confirm {
  z-index: 1002; /* above the main cart drawer */
}

/* Input focus states for checkout steps */
#rl-step-details input:focus,
#rl-step-details textarea:focus {
  border-color: #D85A30 !important;
  box-shadow: 0 0 0 3px rgba(216,90,48,.1) !important;
  outline: none !important;
}

/* Step headers */
#rl-step-details .rl-cart-header,
#rl-step-payment .rl-cart-header { background: #D85A30; }
#rl-step-confirm > div:first-child { background: #2D7A4F; }

@media (max-width: 768px) {
  #rl-cart-overlay > .rl-cart-drawer,
  #rl-step-details, #rl-step-payment, #rl-step-confirm {
    width: 100vw;
  }
}