/* HOP Club v169 — customer-first mobile ordering system */
:root {
  --club-red: #c7202d;
  --club-red-deep: #97151f;
  --club-cream: #f8f1e6;
  --club-paper: #fffdf8;
  --club-ink: #2a1b18;
  --club-muted: #78665e;
  --club-line: #eadbd0;
  --club-gold: #c2912b;
}

html, body { background: var(--club-cream); }
body.native-app-shell { color: var(--club-ink); font-family: var(--hop-font-sans); }
.club-bg { opacity: .4; filter: saturate(.45) sepia(.15); }
.club-shell { background: radial-gradient(circle at 80% -10%, rgba(211, 62, 63, .14), transparent 36%), var(--club-cream); }
.auth-card { border: 1px solid rgba(119, 67, 50, .12); border-radius: 30px; background: rgba(255, 253, 248, .96); box-shadow: 0 30px 70px rgba(91, 38, 31, .16); }
.brand-lockup { justify-content: center; }
.brand-lockup .club-product-logo { width: min(330px, 78vw); height: auto; max-height: 88px; padding: 0; border: 0; border-radius: 0; object-fit: contain; }
.auth-card h1 { max-width: 650px; color: var(--club-ink); font-size: clamp(2rem, 6vw, 3.7rem); letter-spacing: -.055em; line-height: .98; }
.auth-lead { max-width: 600px; color: var(--club-muted); line-height: 1.6; }
.auth-tabs { background: #f3e8dc; }
.auth-tabs button.active, .auth-form .primary { background: var(--club-red); color: #fff; }
.auth-form label input { min-height: 52px; border: 1px solid var(--club-line); border-radius: 14px; background: #fff; }
.auth-form label:focus-within input { border-color: var(--club-red); box-shadow: 0 0 0 4px rgba(199, 32, 45, .12); }
.reward-preview { border-color: #efdcae; background: #fff7df; color: #69501c; }

.app-screen { width: min(100%, 1240px); margin: 0 auto; background: transparent; }
.club-topbar { left: 50%; width: min(calc(100% - 24px), 1180px); min-height: 76px; transform: translateX(-50%); border: 1px solid rgba(132, 82, 64, .12); border-radius: 0 0 22px 22px; background: rgba(255, 253, 248, .9); box-shadow: 0 12px 34px rgba(76, 41, 31, .09); backdrop-filter: blur(22px); }
.mini-brand img { width: 185px !important; height: 50px !important; border-radius: 0 !important; background: transparent !important; object-fit: contain; object-position: left center; box-shadow: none !important; }
.mini-brand span { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.top-cart-button { position: relative; display: grid; width: 46px; min-width: 46px; height: 46px; place-items: center; border: 1px solid var(--club-line); border-radius: 14px; background: #fff; color: var(--club-ink); }
.top-cart-button svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.top-cart-button span { position: absolute; top: -5px; right: -4px; display: grid; min-width: 21px; height: 21px; place-items: center; border: 2px solid var(--club-paper); border-radius: 999px; background: var(--club-red); color: #fff; font-size: .64rem; font-weight: 850; }
.top-pill { border: 1px solid var(--club-line); background: #fff; color: var(--club-ink); }

.view { width: min(calc(100% - 28px), 1120px); padding-top: 102px; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.home-greeting { margin: 10px 0 14px; }
.home-greeting p { color: var(--club-red); font-weight: 800; }
.home-greeting h2 { color: var(--club-ink); font-size: clamp(1.55rem, 5vw, 2.35rem); letter-spacing: -.04em; }
.home-greeting small { color: var(--club-muted); }
.restaurant-context { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; padding: 13px 16px; border: 1px solid #e8d8cd; border-radius: 17px; background: rgba(255,253,248,.85); }
.restaurant-context > div { display: grid; gap: 2px; }
.restaurant-context > div:first-child { grid-template-columns: auto 1fr; align-items: center; gap: 0 9px; }
.restaurant-context > div:first-child small { grid-column: 2; }
.restaurant-context > div:last-child { padding-left: 16px; border-left: 1px solid var(--club-line); text-align: right; }
.restaurant-context span, .restaurant-context small { color: var(--club-muted); font-size: .68rem; }
.restaurant-context strong { font-size: .82rem; }
.restaurant-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #1c8b54; box-shadow: 0 0 0 5px rgba(28,139,84,.1); }
.restaurant-context.is-closed .restaurant-status-dot { background: var(--club-red); box-shadow: 0 0 0 5px rgba(199,32,45,.1); }

.wallet-home-pass { border: 0; border-radius: 28px; background: linear-gradient(145deg, #8d121c, #bd1d29 57%, #dd3b40); box-shadow: 0 24px 50px rgba(137, 18, 28, .24); }
.wallet-home-pass::after { background: radial-gradient(circle at 88% 4%, rgba(255, 215, 118, .25), transparent 32%); }
.wallet-brand img { width: 145px; height: 43px; padding: 5px 10px; border-radius: 10px; background: #fff8ed; object-fit: contain; }
.wallet-brand > div { display: none; }
.wallet-primary-stat, .wallet-secondary-stat { border-color: rgba(255,255,255,.18); background: rgba(78,4,12,.26); }
.home-tier-badge { background: #f4c85a; color: #512d0c; }
.hero-status { color: #d9ffe9; }
.hero-status i { background: #69e59c; }
.home-order-cta { border: 0; border-radius: 20px; background: var(--club-paper); color: var(--club-ink); box-shadow: 0 10px 26px rgba(73,45,35,.08); }
.home-order-icon { background: var(--club-red); color: #fff; }
.home-order-cta b { color: var(--club-red); }
.home-reorder-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 70px; margin: 10px 0 0; padding: 13px 16px; border: 1px solid #ead6ca; border-radius: 17px; background: #fff9f2; color: var(--club-ink); text-align: left; }
.home-reorder-cta span { display: grid; gap: 3px; }
.home-reorder-cta small { color: var(--club-muted); }
.home-reorder-cta b { flex: none; padding: 8px 12px; border-radius: 10px; background: #f8e1df; color: var(--club-red); }
.home-discovery { margin: 26px 0 4px; }
.offer-strip { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px; border: 1px solid #edd9ab; border-radius: 20px; background: linear-gradient(135deg, #fff8e8, #fff2d3); }
.offer-strip div { display: grid; gap: 3px; }
.offer-strip span { color: #9c6810; font-size: .68rem; font-weight: 820; text-transform: uppercase; letter-spacing: .08em; }
.offer-strip small { color: #765e35; }
.offer-strip button { min-height: 42px; flex: none; border: 0; border-radius: 12px; padding: 0 15px; background: #9e6713; color: #fff; font-weight: 800; }
.home-food-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.home-food-card { overflow: hidden; border: 1px solid var(--club-line); border-radius: 16px; background: var(--club-paper); }
.home-food-card img, .home-food-card .food-placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-food-card .food-placeholder { background: linear-gradient(145deg, #f1d9ca, #ddb18f); }
.home-food-card div { display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; padding: 10px; }
.home-food-card strong { min-width: 0; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.home-food-card span { color: var(--club-red); font-size: .72rem; font-weight: 800; }
.home-food-card button { grid-column: 1 / -1; min-height: 34px; border: 0; border-radius: 9px; background: var(--club-red); color: #fff; font-size: .7rem; font-weight: 800; }
.next-reward-card, .journey-card, .premium-updates, .help-link-card { border: 1px solid var(--club-line); background: var(--club-paper); box-shadow: 0 8px 24px rgba(82,48,35,.06); }
.reward-photo img, .mini-perk-image img, .journey-reward img { width: 100%; height: 100%; object-fit: cover; }
.reward-photo-badge, .mini-perk-badge { display: none !important; }
.reward-photo::after, .mini-perk-image::after { display: none !important; }
.reward-cta { background: var(--club-red) !important; }
.progress-track span, .journey-track span { background: linear-gradient(90deg, var(--club-red), #ed6a55); }

.order-hero { min-height: 190px; border: 0; border-radius: 26px; background: linear-gradient(135deg, #711019, #c92331); box-shadow: 0 22px 44px rgba(111,16,25,.18); }
.order-hero h1 { max-width: 620px; font-size: clamp(2rem, 7vw, 3.7rem); letter-spacing: -.055em; line-height: .96; }
.pickup-only-pill { background: #fff0d1; color: #794d0e; }
.order-search-shell { position: sticky; z-index: 8; top: 85px; padding: 12px 0 10px; background: linear-gradient(var(--club-cream) 76%, transparent); }
.menu-search { border: 1px solid var(--club-line); border-radius: 15px; background: #fff; box-shadow: 0 7px 18px rgba(68,40,30,.05); }
.menu-search:focus-within { border-color: var(--club-red); box-shadow: 0 0 0 4px rgba(199,32,45,.11); }
.category-chips button { border: 1px solid var(--club-line); background: #fff; color: var(--club-muted); }
.category-chips button.active { border-color: var(--club-red); background: var(--club-red); color: #fff; }
.menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.menu-item-card { overflow: hidden; border: 1px solid var(--club-line); border-radius: 20px; background: var(--club-paper); box-shadow: 0 10px 26px rgba(77,45,34,.07); transition: transform .18s ease, box-shadow .18s ease; }
.menu-item-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(77,45,34,.1); }
.menu-item-photo { aspect-ratio: 4 / 3; background: linear-gradient(145deg, #efd7c7, #d9a47f); }
.menu-item-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-item-photo .featured, .menu-item-photo > :not(img) { display: none !important; }
.menu-item-body { display: grid; gap: 8px; padding: 14px; }
.menu-item-heading { align-items: flex-start; }
.menu-item-heading h2 { color: var(--club-ink); font-size: 1rem; letter-spacing: -.02em; }
.menu-item-heading strong { color: var(--club-red); font-size: .9rem; }
.menu-item-body > p { min-height: 2.7em; color: var(--club-muted); font-size: .77rem; line-height: 1.42; }
.menu-item-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.menu-item-meta span { padding: 4px 7px; border-radius: 999px; background: #f3ece4; color: #74645c; font-size: .61rem; font-weight: 770; }
.menu-item-meta .featured-label { background: #fff2d7; color: #8e5c0f; }
.menu-item-controls { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; gap: 7px; align-items: stretch; }
.menu-item-controls select { min-width: 0; border: 1px solid var(--club-line); border-radius: 11px; background: #fff; color: var(--club-ink); }
.menu-favorite-button, .menu-add-button { min-height: 43px; border: 1px solid var(--club-line); border-radius: 11px; font-weight: 800; }
.menu-favorite-button { background: #fff; color: var(--club-red); font-size: 1.1rem; }
.menu-favorite-button.is-favorite { background: #fff0ee; border-color: #e9bbb8; }
.menu-add-button { background: var(--club-red); color: #fff; }
.menu-add-button.is-customize { background: var(--club-red); }
.order-empty-card { border: 1px dashed var(--club-line); border-radius: 18px; background: #fffaf4; color: var(--club-muted); }
.cart-dock button { border: 0; border-radius: 18px; background: #2c1d1a; box-shadow: 0 18px 38px rgba(45,23,20,.27); }

.modifier-panel { background: var(--club-paper); }
.modifier-head { border-bottom: 1px solid var(--club-line); background: rgba(255,253,248,.94); backdrop-filter: blur(18px); }
.modifier-close { background: #f2e8df; color: var(--club-ink); }
.modifier-step { background: #fff0ee; color: var(--club-red); }
.modifier-item-hero { border: 1px solid var(--club-line); border-radius: 18px; background: #fff; }
.modifier-item-photo { overflow: hidden; border-radius: 14px; }
.modifier-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.included-card { border: 1px solid #edd7ab; border-radius: 16px; background: #fff8e7; }
.modifier-group { overflow: hidden; border: 1px solid var(--club-line); border-radius: 17px; background: #fff; }
.modifier-group.required { border-color: #e6b5b4; }
.modifier-rule { background: #f3ece5; color: var(--club-muted); }
.modifier-group.required .modifier-rule { background: #ffebe9; color: var(--club-red); }
.single-choice, .multi-choice { border-color: var(--club-line); border-radius: 13px; background: #fff; }
.single-choice.is-selected, .multi-choice.is-selected { border-color: var(--club-red); background: #fff3f1; }
.choice-check { border-color: #d8c8bd; }
.is-selected .choice-check { border-color: var(--club-red); background: var(--club-red); color: #fff; }
.portion-toggle, .style-toggle, .quantity-toggle { display: flex; gap: 4px; align-items: center; padding: 5px; border-radius: 10px; background: #f3ece5; }
.style-toggle button, .quantity-toggle button { min-height: 32px; flex: 1; border: 0; border-radius: 8px; background: transparent; color: var(--club-muted); font-size: .7rem; font-weight: 760; }
.quantity-toggle span { padding: 0 6px; color: var(--club-muted); font-size: .7rem; }
.quantity-toggle strong { min-width: 20px; text-align: center; }
.portion-toggle button.is-selected, .style-toggle button.is-selected { background: #fff; color: var(--club-red); box-shadow: 0 3px 9px rgba(73,37,29,.08); }
.modifier-instructions textarea { border-color: var(--club-line); border-radius: 13px; background: #fff; }
.modifier-footer { border-top: 1px solid var(--club-line); background: rgba(255,253,248,.96); backdrop-filter: blur(18px); }
.modifier-summary { flex-wrap: wrap; overflow: visible; }
.modifier-sheet[aria-hidden="true"], .cart-sheet[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.modifier-sheet.open, .cart-sheet.open { visibility: visible; }
#addCustomizedItemBtn { border: 0; border-radius: 14px; background: var(--club-red); }
#addCustomizedItemBtn:disabled { background: #bbaea8; }
#modifierValidation:not(:empty) { padding: 9px 11px; border-radius: 10px; background: #ffebe9; color: var(--club-red); font-weight: 740; }

.cart-panel { background: var(--club-paper); }
.cart-panel > header { border-bottom: 1px solid var(--club-line); }
.cart-line { border-color: var(--club-line); background: #fff; }
.cart-qty { background: #f3ece5; }
.pickup-options label { color: var(--club-muted); }
.pickup-options select, .pickup-options textarea { min-height: 45px; border: 1px solid var(--club-line); border-radius: 12px; background: #fff; }
.cart-breakdown { display: grid; gap: 9px; padding: 15px; border: 1px solid var(--club-line); border-radius: 15px; background: #fff; }
.cart-breakdown > div { display: flex; justify-content: space-between; gap: 16px; color: var(--club-muted); font-size: .82rem; }
.cart-breakdown strong { color: var(--club-ink); }
.cart-breakdown .cart-total-row { margin: 3px 0 0; padding: 12px 0 0; border-top: 1px solid var(--club-line); color: var(--club-ink); font-size: 1rem; }
.confirmation-note { border-color: #efd9ac; background: #fff8e7; }
.submit-pickup-order { border: 0; border-radius: 14px; background: var(--club-red); box-shadow: 0 12px 28px rgba(199,32,45,.22); }

.page-hero { border: 0; border-radius: 24px; background: linear-gradient(135deg, #74111a, #c62431); color: #fff; }
.customer-order-card { border: 1px solid var(--club-line); border-radius: 19px; background: var(--club-paper); box-shadow: 0 9px 24px rgba(75,43,32,.06); }
.order-status-pill { background: #f3ece5; color: var(--club-muted); }
.order-status-pill.ready, .order-status-pill.completed { background: #e8f7ee; color: #167144; }
.order-status-pill.pending { background: #fff3dc; color: #94600e; }
.order-status-pill.denied, .order-status-pill.cancelled { background: #ffebe9; color: var(--club-red); }
.customer-order-financials { display: grid; gap: 5px; padding: 11px 0; border-top: 1px solid var(--club-line); }
.customer-order-financials div { display: flex; justify-content: space-between; color: var(--club-muted); font-size: .76rem; }
.customer-order-financials div.total { color: var(--club-ink); font-weight: 830; }
.premium-pass { background: linear-gradient(145deg, #80131b, #c3222e); box-shadow: 0 25px 55px rgba(126,17,27,.25); }
.premium-brand img { width: 180px; height: 55px; padding: 6px 10px; border-radius: 10px; background: #fff8ed; object-fit: contain; }
.premium-brand > div { display: none; }
.profile-card { border: 1px solid var(--club-line); background: var(--club-paper); }
.club-nav { left: 50%; width: min(calc(100% - 20px), 560px); padding-bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); border: 1px solid rgba(111,67,52,.14); border-radius: 22px; background: rgba(255,253,248,.96); box-shadow: 0 18px 45px rgba(63,37,29,.16); backdrop-filter: blur(22px); }
.club-nav button { color: #85736b; }
.club-nav button.active { color: var(--club-red); }
.club-nav button.active .nav-icon { background: #ffebe9; }
.home-primary-column, .home-secondary-column { display: contents; }

@media (min-width: 900px) {
  .view[data-view-panel="home"] { display: none; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: 18px; align-items: start; }
  .view[data-view-panel="home"].active { display: grid !important; }
  .home-primary-column, .home-secondary-column { display: grid; min-width: 0; gap: 18px; align-content: start; }
  .home-primary-column { grid-column: 1; }
  .home-secondary-column { grid-column: 2; }
  .home-primary-column > *, .home-secondary-column > * { width: auto !important; min-width: 0; margin-block: 0 !important; }
}

@media (min-width: 760px) {
  .app-screen,
  .app-screen:not([hidden]) { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; transform: none !important; }
  .app-screen:not([hidden]) > .club-nav {
    position: fixed !important;
    right: auto !important;
    left: 50% !important;
    width: min(calc(100% - 20px), 560px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 840px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-food-row { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .home-food-card { scroll-snap-align: start; }
}

@media (max-width: 600px) {
  .club-topbar { min-height: 66px; border-radius: 0 0 18px 18px; }
  .mini-brand img { width: 145px !important; height: 43px !important; }
  .top-pill span { display: none; }
  .top-pill { width: 46px; padding: 0; }
  .view { width: min(calc(100% - 18px), 1120px); padding-top: 82px; }
  .restaurant-context { grid-template-columns: 1fr auto; padding: 11px 12px; }
  .wallet-home-pass { border-radius: 22px; }
  .home-food-row { grid-template-columns: repeat(3, 72vw); }
  .offer-strip { align-items: flex-start; flex-direction: column; }
  .menu-grid { grid-template-columns: 1fr; gap: 12px; }
  .menu-item-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto; min-height: 168px; border-radius: 17px; }
  .menu-item-photo { height: 100%; aspect-ratio: auto; }
  .menu-item-body { padding: 12px; }
  .menu-item-body > p { min-height: auto; }
  .menu-item-controls { grid-template-columns: minmax(0, 1fr) 42px; }
  .menu-add-button { grid-column: 1 / -1; }
  .order-hero { min-height: 165px; padding: 22px; }
  .order-search-shell { top: 67px; }
  .modifier-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .modifier-item-hero { grid-template-columns: 90px 1fr; }
  .modifier-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .cart-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .club-nav { border-radius: 19px; }
}

@media (max-width: 390px) {
  .menu-item-card { grid-template-columns: 112px minmax(0, 1fr); }
  .menu-item-heading { display: grid; grid-template-columns: 1fr; }
  .menu-item-heading strong { margin-top: 2px; }
}