/*
 * HOP Club premium restaurant skin v181
 * Presentation-only. Existing IDs, events, API calls, pricing, rewards and
 * ordering logic remain owned by app.js.
 */

:root {
  --club-v181-green: #1c382e;
  --club-v181-green-strong: #102b22;
  --club-v181-green-soft: #e9f0ec;
  --club-v181-red: #b02a2a;
  --club-v181-red-strong: #8f1f22;
  --club-v181-red-soft: #f9e8e5;
  --club-v181-cream: #fffaf2;
  --club-v181-cream-deep: #f2e6d5;
  --club-v181-beige: #d9c7a6;
  --club-v181-gold: #a67a26;
  --club-v181-charcoal: #333333;
  --club-v181-muted: #746f67;
  --club-v181-line: rgba(28, 56, 46, .12);
  --club-v181-surface: rgba(255, 253, 248, .96);
  --club-v181-radius-sm: 12px;
  --club-v181-radius-md: 18px;
  --club-v181-radius-lg: 24px;
  --club-v181-radius-xl: 30px;
  --club-v181-shadow-xs: 0 2px 7px rgba(38, 31, 25, .05);
  --club-v181-shadow-sm: 0 10px 28px rgba(38, 31, 25, .09);
  --club-v181-shadow-md: 0 22px 56px rgba(38, 31, 25, .14);
  --club-v181-page: min(100%, 520px);
  --club-v181-gutter: clamp(14px, 4vw, 22px);
}

html,
body {
  background: #e9e3d9 !important;
}

body.native-app-shell {
  color: var(--club-v181-charcoal) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-variation-settings: "opsz" 16;
}

body.native-app-shell::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 16% 2%, rgba(255, 255, 255, .98), transparent 35%),
    radial-gradient(circle at 92% 88%, rgba(217, 199, 166, .32), transparent 38%),
    #eee8df;
  content: "";
}

.club-shell {
  background: transparent !important;
}

.app-screen,
.auth-screen {
  background:
    radial-gradient(circle at 92% 18%, rgba(217, 199, 166, .18), transparent 25%),
    linear-gradient(180deg, #fffdf8 0%, #fbf6ed 66%, #f4ecdf 100%) !important;
}

.app-screen:not([hidden]) {
  border-inline: 1px solid rgba(28, 56, 46, .06);
  box-shadow: 0 0 80px rgba(38, 31, 25, .12);
}

.club-bg {
  opacity: .24 !important;
  filter: saturate(.72);
}

.club-bg span {
  background: rgba(28, 56, 46, .1) !important;
}

.eyebrow {
  color: var(--club-v181-green) !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

button,
select,
input,
textarea {
  font: inherit;
}

button {
  transition:
    transform 150ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease !important;
}

button:active {
  transform: scale(.975);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(176, 42, 42, .2) !important;
  outline-offset: 2px;
}

/* Authentication / onboarding */
.auth-screen {
  place-items: stretch center !important;
  padding: max(24px, calc(env(safe-area-inset-top) + 20px)) var(--club-v181-gutter) max(28px, calc(env(safe-area-inset-bottom) + 24px)) !important;
}

.auth-card {
  position: relative;
  width: min(100%, 440px) !important;
  margin: auto !important;
  padding: 42px 28px 28px !important;
  overflow: hidden;
  border: 1px solid rgba(217, 199, 166, .55) !important;
  border-radius: 32px !important;
  background: rgba(255, 253, 248, .95) !important;
  box-shadow: var(--club-v181-shadow-md) !important;
}

.auth-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: linear-gradient(90deg, var(--club-v181-green), var(--club-v181-red));
  content: "";
}

.auth-card::after {
  position: absolute;
  top: -88px;
  right: -78px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(28, 56, 46, .055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.auth-card .brand-lockup {
  position: relative;
  z-index: 1;
  margin-bottom: 32px !important;
}

.auth-card .brand-logo {
  width: min(285px, 78vw) !important;
  max-height: 80px;
}

.auth-card h1 {
  max-width: 340px;
  margin: 0 !important;
  color: var(--club-v181-green-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.35rem, 10vw, 3.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.05em;
  line-height: .98 !important;
}

.auth-lead {
  margin: 16px 0 24px !important;
  color: var(--club-v181-muted) !important;
  font-size: .96rem !important;
  line-height: 1.55 !important;
}

.auth-tabs {
  gap: 5px !important;
  padding: 4px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 15px !important;
  background: #f4ede2 !important;
}

.auth-tabs button {
  min-height: 44px !important;
  border-radius: 11px !important;
  color: var(--club-v181-muted) !important;
  font-weight: 760 !important;
}

.auth-tabs button.active {
  background: #fffdf8 !important;
  color: var(--club-v181-green) !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.auth-form {
  gap: 14px !important;
}

.auth-form label {
  gap: 7px !important;
}

.field-label {
  color: var(--club-v181-green) !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
}

.auth-form input {
  min-height: 52px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 14px !important;
  background: #fffdf9 !important;
  color: var(--club-v181-charcoal) !important;
  box-shadow: inset 0 1px 2px rgba(38, 31, 25, .025);
}

.auth-form .primary,
.primary,
.submit-pickup-order {
  border: 0 !important;
  background: linear-gradient(135deg, #bd2d2d, var(--club-v181-red-strong)) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(176, 42, 42, .2) !important;
}

.auth-form .primary {
  min-height: 54px !important;
  border-radius: 14px !important;
}

.reward-preview {
  margin-top: 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(166, 122, 38, .18) !important;
  border-radius: 16px !important;
  background: #fbf1dc !important;
}

/* Top bar */
.club-topbar,
.premium-topbar {
  min-height: 70px !important;
  padding:
    max(9px, env(safe-area-inset-top))
    var(--club-v181-gutter)
    9px !important;
  border-bottom: 1px solid rgba(28, 56, 46, .09) !important;
  background: rgba(255, 251, 244, .91) !important;
  box-shadow: 0 8px 26px rgba(38, 31, 25, .055) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}

.premium-menu-button,
.premium-alert-button,
.top-cart-button,
.top-pill {
  display: inline-grid !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 253, 248, .96) !important;
  color: var(--club-v181-green) !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.premium-menu-button svg,
.premium-alert-button svg,
.top-cart-button svg,
.top-pill svg {
  width: 22px !important;
  height: 22px !important;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.premium-menu-button {
  flex: 0 0 auto;
}

.mini-brand {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
}

.mini-brand img {
  width: min(190px, 48vw) !important;
  height: 46px !important;
  object-fit: contain;
  object-position: left center;
}

.topbar-actions {
  gap: 8px !important;
}

.top-pill span {
  display: none !important;
}

.top-cart-button > span,
.premium-alert-button > span {
  position: absolute !important;
  top: -5px !important;
  right: -4px !important;
  display: grid !important;
  min-width: 20px !important;
  height: 20px !important;
  place-items: center;
  padding: 0 5px !important;
  border: 2px solid #fffaf2;
  border-radius: 999px !important;
  background: var(--club-v181-red) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
}

.premium-alert-button {
  position: relative;
}

/* Main page rhythm */
.view {
  color: var(--club-v181-charcoal) !important;
  scrollbar-color: rgba(28, 56, 46, .25) transparent;
}

.view.active {
  animation: v181-view-in 220ms cubic-bezier(.2, .75, .2, 1);
}

.home-primary-column,
.home-secondary-column {
  gap: 14px !important;
}

.home-greeting {
  display: grid !important;
  gap: 5px !important;
  margin: 4px 0 0 !important;
  padding: 0 2px !important;
}

.home-greeting p {
  color: var(--club-v181-muted) !important;
  font-size: .75rem !important;
  letter-spacing: .11em !important;
}

.home-greeting h2 {
  color: var(--club-v181-green-strong) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
  font-size: clamp(1.75rem, 8vw, 2.55rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
  line-height: .98 !important;
}

.home-greeting small {
  color: var(--club-v181-muted) !important;
  font-size: .92rem !important;
}

.home-prompt {
  display: grid;
  gap: 14px;
  padding: 21px;
  overflow: hidden;
  border-radius: var(--club-v181-radius-lg);
  background:
    radial-gradient(circle at 92% 0, rgba(217, 199, 166, .28), transparent 34%),
    var(--club-v181-green);
  color: #fff;
  box-shadow: 0 18px 38px rgba(28, 56, 46, .2);
}

.home-prompt > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.home-prompt p,
.home-prompt h1 {
  margin: 0;
}

.home-prompt p {
  color: rgba(255, 255, 255, .72);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-prompt h1 {
  max-width: 330px;
  margin-top: 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
}

.home-prompt-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 18px;
  background:
    url("/public/assets/hop-logo.png") center / 74% auto no-repeat,
    rgba(255, 255, 255, .1);
}

.home-prompt-actions {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 9px;
}

.home-prompt-actions button {
  min-height: 48px;
  border-radius: 13px;
  font-size: .82rem;
  font-weight: 800;
}

.home-prompt-actions .order-now {
  border: 0;
  background: var(--club-v181-red);
  color: #fff;
}

.home-prompt-actions .how-it-works {
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.home-search-launch {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--club-v181-line);
  border-radius: 16px;
  background: var(--club-v181-surface);
  color: #9a958d;
  box-shadow: var(--club-v181-shadow-xs);
  text-align: left;
}

.home-search-launch svg {
  width: 20px;
  fill: none;
  stroke: var(--club-v181-green);
  stroke-width: 1.8;
}

.home-category-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(62px, 1fr));
  gap: 7px;
  padding: 2px 0 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-category-row::-webkit-scrollbar {
  display: none;
}

.home-category-row button {
  display: grid;
  min-height: 72px;
  place-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid rgba(217, 199, 166, .46);
  border-radius: 15px;
  background: rgba(255, 253, 248, .9);
  color: var(--club-v181-green);
  font-size: .67rem;
  font-weight: 800;
}

.home-category-row button::before {
  font-size: 1.3rem;
  line-height: 1;
}

.home-category-row button:nth-child(1)::before { content: "◒"; }
.home-category-row button:nth-child(2)::before { content: "♨"; }
.home-category-row button:nth-child(3)::before { content: "⌁"; }
.home-category-row button:nth-child(4)::before { content: "✦"; }
.home-category-row button:nth-child(5)::before { content: "◌"; }

.restaurant-context {
  min-height: 68px !important;
  padding: 13px 15px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 17px !important;
  background: rgba(255, 253, 248, .94) !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.restaurant-context strong {
  color: var(--club-v181-green) !important;
}

.restaurant-context > div:last-child {
  padding-left: 14px !important;
  border-left: 1px solid var(--club-v181-line) !important;
}

/* Member / reward cards */
.premium-home-hero,
.wallet-home-pass,
.premium-pass {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 27px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 38%),
    linear-gradient(145deg, var(--club-v181-green), var(--club-v181-green-strong)) !important;
  color: #fff !important;
  box-shadow: 0 24px 54px rgba(28, 56, 46, .22) !important;
}

.wallet-label,
.wallet-primary-stat > span,
.wallet-secondary-stat > span,
.premium-member-copy p,
.premium-code-row span,
.premium-pass-stats span {
  color: rgba(255, 255, 255, .68) !important;
  letter-spacing: .13em !important;
}

.premium-home-hero h1,
.wallet-primary-stat strong,
.wallet-secondary-stat strong,
.premium-pass h1,
.premium-pass strong {
  color: #fff !important;
}

.wallet-brand img,
.premium-brand img {
  padding: 5px;
  border-radius: 11px;
  background: #fffaf2;
}

.home-tier-badge,
.tier-badge {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .09) !important;
  color: #f5d891 !important;
}

.wallet-balance-row,
.premium-pass-stats {
  border-top-color: rgba(255, 255, 255, .14) !important;
}

.wallet-secondary-stat {
  border-left-color: rgba(255, 255, 255, .14) !important;
}

.qr-button,
.premium-card-button {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 18px !important;
  background: #fffaf2 !important;
  color: var(--club-v181-green) !important;
  box-shadow: none !important;
}

.home-order-cta {
  min-height: 82px !important;
  border: 0 !important;
  border-radius: 21px !important;
  background: linear-gradient(135deg, var(--club-v181-red), #8f2024) !important;
  box-shadow: 0 16px 32px rgba(176, 42, 42, .2) !important;
}

.home-order-cta strong {
  font-size: 1.04rem !important;
}

.home-order-cta em {
  color: rgba(255, 255, 255, .72) !important;
}

.home-order-icon,
.home-order-cta b {
  background: rgba(255, 255, 255, .11) !important;
}

.home-reorder-cta,
.offer-strip {
  border: 1px solid rgba(166, 122, 38, .18) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fff8e9, #f7ead1) !important;
  color: var(--club-v181-charcoal) !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.home-section-heading h2,
.journey-heading h2,
.summary-heading h2 {
  color: var(--club-v181-green-strong) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

.home-section-heading button,
.journey-heading button,
.points-history-link,
.history-back {
  color: var(--club-v181-red) !important;
}

.home-food-row {
  gap: 12px !important;
  scroll-snap-type: x mandatory;
}

.home-food-card {
  overflow: hidden;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 20px !important;
  background: var(--club-v181-surface) !important;
  box-shadow: var(--club-v181-shadow-sm) !important;
  scroll-snap-align: start;
}

.home-food-card img,
.home-food-card .food-placeholder {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-food-card > div {
  padding: 12px !important;
}

.home-food-card > div > strong {
  color: var(--club-v181-green-strong) !important;
  font-size: 1rem !important;
}

.home-food-card > div > span {
  color: var(--club-v181-red) !important;
}

.home-food-card button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--club-v181-red) !important;
  color: #fff !important;
}

.premium-reward-showcase,
.journey-card,
.rewards-summary,
.reward-stage-card,
.premium-updates,
.help-link-card,
.profile-card,
.history-row {
  border: 1px solid var(--club-v181-line) !important;
  border-radius: var(--club-v181-radius-lg) !important;
  background: var(--club-v181-surface) !important;
  color: var(--club-v181-charcoal) !important;
  box-shadow: var(--club-v181-shadow-sm) !important;
}

.premium-reward-showcase {
  overflow: hidden;
}

.premium-reward-showcase .reward-photo {
  border-radius: 0 !important;
}

.reward-showcase-copy h2,
.reward-stage-body h2 {
  color: var(--club-v181-green-strong) !important;
}

.progress-track,
.journey-track {
  height: 8px !important;
  background: #ece4d8 !important;
}

.progress-track > span,
.journey-track > span {
  background: linear-gradient(90deg, var(--club-v181-green), #d4a342) !important;
}

.reward-cta {
  background: var(--club-v181-green) !important;
}

.journey-card {
  padding: 19px !important;
}

.journey-heading .eyebrow,
.journey-copy p {
  color: var(--club-v181-muted) !important;
}

.journey-ring::before {
  background: #fffaf2 !important;
}

.journey-ring span,
.journey-copy strong {
  color: var(--club-v181-green) !important;
}

.journey-reward {
  border: 1px solid var(--club-v181-line) !important;
  box-shadow: none !important;
}

.mini-perk-card {
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 18px !important;
  background: #fffdf8 !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.premium-updates .section-icon,
.help-card-icon,
.profile-row-icon {
  border-radius: 13px !important;
  background: var(--club-v181-green-soft) !important;
  color: var(--club-v181-green) !important;
}

/* Menu */
.order-hero,
.page-hero {
  overflow: hidden;
  border: 0 !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 96% 10%, rgba(217, 199, 166, .22), transparent 34%),
    linear-gradient(135deg, var(--club-v181-green), var(--club-v181-green-strong)) !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(28, 56, 46, .17) !important;
}

.order-hero h1,
.page-hero h1 {
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -.045em !important;
}

.order-hero span,
.page-hero > span:not(.page-hero-icon) {
  color: rgba(255, 255, 255, .78) !important;
}

.order-hero .eyebrow,
.page-hero .eyebrow {
  color: #e9d5ad !important;
}

.pickup-only-pill,
.order-status-pill {
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7eacb !important;
  color: #785510 !important;
}

.order-search-shell {
  border: 0 !important;
  background: rgba(255, 250, 242, .92) !important;
  box-shadow: 0 10px 26px rgba(38, 31, 25, .07) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.menu-search {
  min-height: 54px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 16px !important;
  background: #fffdf9 !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.menu-search svg {
  stroke: var(--club-v181-green) !important;
}

.menu-search input {
  color: var(--club-v181-charcoal) !important;
}

.category-chips {
  gap: 8px !important;
}

.category-chips button {
  min-height: 38px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 999px !important;
  background: #fffdf8 !important;
  color: #635e57 !important;
  box-shadow: none !important;
  font-size: .77rem !important;
  font-weight: 780 !important;
}

.category-chips button.active {
  border-color: var(--club-v181-green) !important;
  background: var(--club-v181-green) !important;
  color: #fff !important;
}

.menu-grid {
  gap: 13px !important;
}

.menu-item-card {
  overflow: hidden !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 21px !important;
  background: var(--club-v181-surface) !important;
  box-shadow: var(--club-v181-shadow-sm) !important;
}

.menu-item-photo {
  overflow: hidden;
  background: #eadfce !important;
}

.menu-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1), opacity 220ms ease;
}

.menu-item-card:hover .menu-item-photo img {
  transform: scale(1.025);
}

.menu-item-photo.no-photo::before {
  border: 0 !important;
  background:
    url("/public/assets/brand/hop-club.svg?v=169") center / 78% auto no-repeat,
    #f4e4d5 !important;
  box-shadow: none !important;
}

.menu-item-body {
  gap: 9px !important;
  padding: 15px !important;
}

.menu-item-heading {
  align-items: flex-start !important;
}

.menu-item-heading h2 {
  color: var(--club-v181-green-strong) !important;
  font-size: 1.18rem !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
}

.menu-item-heading strong {
  color: var(--club-v181-red) !important;
  font-size: .96rem !important;
  white-space: nowrap;
}

.menu-item-body > p {
  min-height: 2.7em;
  color: var(--club-v181-muted) !important;
  font-size: .83rem !important;
  line-height: 1.42 !important;
}

.menu-item-meta span,
.featured-label {
  border-radius: 999px !important;
  background: #f3ede4 !important;
  color: #756e64 !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
}

.menu-item-meta .featured-label {
  background: #fbf0d3 !important;
  color: #90661b !important;
}

.menu-item-controls select {
  min-height: 44px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 12px !important;
  background-color: #fffdf9 !important;
  color: var(--club-v181-charcoal) !important;
}

.menu-favorite-button {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 12px !important;
  background: #fffdf8 !important;
  color: var(--club-v181-green) !important;
  font-size: 1.35rem !important;
}

.menu-favorite-button.is-favorite {
  border-color: rgba(176, 42, 42, .24) !important;
  background: var(--club-v181-red-soft) !important;
  color: var(--club-v181-red) !important;
}

.menu-add-button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--club-v181-green) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.menu-add-button.is-customize {
  background: var(--club-v181-red) !important;
}

.order-empty-card,
.empty-card,
.hop-empty {
  border: 1px dashed rgba(28, 56, 46, .22) !important;
  border-radius: 20px !important;
  background: rgba(255, 253, 248, .9) !important;
  color: var(--club-v181-muted) !important;
}

.cart-dock button {
  border-radius: 18px !important;
  background: var(--club-v181-green) !important;
  box-shadow: 0 16px 34px rgba(28, 56, 46, .22) !important;
}

/* Modifier / item details */
.modifier-sheet,
.cart-sheet {
  background: rgba(18, 29, 24, .48) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modifier-panel,
.cart-panel {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  background: #fffaf2 !important;
  color: var(--club-v181-charcoal) !important;
  box-shadow: var(--club-v181-shadow-md) !important;
}

.modifier-head,
.cart-panel > header {
  min-height: 68px !important;
  border-bottom: 1px solid var(--club-v181-line) !important;
  background: rgba(255, 253, 248, .93) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.modifier-head h2,
.cart-panel > header h2 {
  color: var(--club-v181-green-strong) !important;
  font-size: 1.2rem !important;
}

.modifier-close,
.cart-panel > header button {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 13px !important;
  background: #fffdf8 !important;
  color: var(--club-v181-green) !important;
}

.modifier-step {
  border-radius: 999px !important;
  background: var(--club-v181-green-soft) !important;
  color: var(--club-v181-green) !important;
}

.modifier-scroll {
  background: #fffaf2 !important;
}

.modifier-item-hero {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 22px !important;
  background: #fffdf8 !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.modifier-item-photo {
  overflow: hidden;
  border-radius: 0 !important;
  background: #eadfce !important;
}

.modifier-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modifier-item-hero > div:last-child {
  padding: 15px 16px 17px;
}

.modifier-item-hero h3 {
  color: var(--club-v181-green-strong) !important;
  font-size: 1.4rem !important;
}

.modifier-item-hero span,
.included-card p,
.modifier-group-head p {
  color: var(--club-v181-muted) !important;
}

.included-card,
.modifier-group {
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 19px !important;
  background: #fffdf8 !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.included-card {
  border-left: 4px solid var(--club-v181-green) !important;
}

.modifier-group-head h3 {
  color: var(--club-v181-green-strong) !important;
  font-size: 1.08rem !important;
}

.modifier-rule {
  border-radius: 999px !important;
  background: var(--club-v181-red-soft) !important;
  color: var(--club-v181-red) !important;
}

.single-choice,
.size-choice,
.multi-choice {
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 14px !important;
  background: #fffdf9 !important;
}

.single-choice.is-selected,
.size-choice.is-selected,
.multi-choice.is-selected {
  border-color: var(--club-v181-red) !important;
  background: #fff7f4 !important;
  box-shadow: 0 0 0 2px rgba(176, 42, 42, .08) !important;
}

.choice-check {
  border-color: rgba(28, 56, 46, .28) !important;
}

.multi-choice.is-selected .choice-check {
  border-color: var(--club-v181-red) !important;
  background: var(--club-v181-red) !important;
}

.portion-toggle,
.style-toggle,
.quantity-toggle {
  border-top-color: var(--club-v181-line) !important;
}

.portion-toggle button,
.style-toggle button {
  border-radius: 10px !important;
}

.portion-toggle button.is-selected,
.style-toggle button.is-selected {
  background: var(--club-v181-green) !important;
  color: #fff !important;
}

.modifier-instructions textarea,
.pickup-options select,
.pickup-options textarea {
  min-height: 50px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 13px !important;
  background: #fffdf8 !important;
  color: var(--club-v181-charcoal) !important;
}

.modifier-footer {
  border-color: var(--club-v181-line) !important;
  background: rgba(255, 253, 248, .96) !important;
}

.modifier-summary span,
.cart-line-modifiers span {
  border-radius: 999px !important;
  background: var(--club-v181-green-soft) !important;
  color: var(--club-v181-green) !important;
}

.modifier-total-row strong,
.cart-total-row strong {
  color: var(--club-v181-red) !important;
}

#addCustomizedItemBtn {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--club-v181-red) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(176, 42, 42, .2) !important;
}

/* Cart / checkout */
.cart-items {
  gap: 10px !important;
}

.cart-line {
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 17px !important;
  background: #fffdf8 !important;
  box-shadow: var(--club-v181-shadow-xs) !important;
}

.cart-line h3 {
  color: var(--club-v181-green-strong) !important;
}

.cart-line p {
  color: var(--club-v181-muted) !important;
}

.cart-qty {
  overflow: hidden;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 11px !important;
  background: #fffaf2 !important;
}

.cart-qty button {
  color: var(--club-v181-green) !important;
}

.cart-remove {
  color: var(--club-v181-red) !important;
}

.pickup-options {
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 19px !important;
  background: #f8f1e6 !important;
}

.pickup-options label {
  color: var(--club-v181-green) !important;
  font-weight: 800 !important;
}

.cart-breakdown {
  border-top-color: var(--club-v181-line) !important;
  border-bottom-color: var(--club-v181-line) !important;
}

.cart-breakdown > div {
  color: var(--club-v181-muted) !important;
}

.cart-breakdown strong {
  color: var(--club-v181-charcoal);
}

.cart-total-row {
  color: var(--club-v181-charcoal) !important;
}

.confirmation-note {
  border: 1px solid rgba(166, 122, 38, .18) !important;
  border-radius: 16px !important;
  background: #fbf1dc !important;
  color: #74551b !important;
}

.submit-pickup-order {
  min-height: 56px !important;
  border-radius: 15px !important;
}

/* Orders and history */
.customer-order-list {
  gap: 14px !important;
}

.customer-order-card {
  overflow: hidden !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 21px !important;
  background: var(--club-v181-surface) !important;
  box-shadow: var(--club-v181-shadow-sm) !important;
}

.customer-order-head {
  border-bottom-color: var(--club-v181-line) !important;
}

.customer-order-head h2,
.customer-order-history-main h2 {
  color: var(--club-v181-green-strong) !important;
}

.customer-order-item,
.customer-order-financials > div {
  border-color: var(--club-v181-line) !important;
}

.customer-item-modifiers {
  color: var(--club-v181-red) !important;
}

.status-steps {
  gap: 5px !important;
}

.status-step {
  color: #9a958d !important;
}

.status-step i {
  height: 4px !important;
  border-radius: 999px !important;
  background: #e5ddd1 !important;
}

.status-step.done {
  color: var(--club-v181-green) !important;
}

.status-step.done i {
  background: var(--club-v181-green) !important;
}

.order-call-note {
  border-radius: 13px !important;
  background: #fbf1dc !important;
  color: #74551b !important;
}

.customer-order-history-summary {
  background: #fffdf8;
}

.customer-order-history-body {
  border-top-color: var(--club-v181-line) !important;
  background: #fbf6ed !important;
}

.points-history-link {
  min-height: 54px !important;
  border: 1px solid var(--club-v181-line) !important;
  border-radius: 16px !important;
  background: #fffdf8 !important;
}

.history-row {
  padding: 14px !important;
}

.history-row > span {
  border-radius: 13px !important;
}

/* Rewards / profile */
.page-hero-icon {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #f0d394 !important;
}

.rewards-summary .big-balance strong {
  color: var(--club-v181-green) !important;
}

.reward-stage-card {
  overflow: hidden !important;
}

.reward-stage-card .reward-stage-image,
.reward-stage-card > img {
  border-radius: 17px !important;
}

.reward-stage-top .tag,
.reward-status {
  border-radius: 999px !important;
}

.reward-stage-top .tag {
  background: #f3ede4 !important;
  color: var(--club-v181-green) !important;
}

.reward-status.ready,
.reward-stage-card.is-unlocked .reward-status {
  background: var(--club-v181-green-soft) !important;
  color: var(--club-v181-green) !important;
}

.premium-pass {
  padding: 22px !important;
}

.premium-qr-shell {
  border-radius: 22px !important;
  background: #fffaf2 !important;
}

.profile-card {
  padding: 8px 16px 16px !important;
}

.profile-card > div {
  border-bottom-color: var(--club-v181-line) !important;
}

.profile-row-copy span {
  color: var(--club-v181-muted) !important;
}

.profile-row-copy strong {
  color: var(--club-v181-green-strong) !important;
}

.danger-light {
  border: 1px solid rgba(176, 42, 42, .18) !important;
  border-radius: 14px !important;
  background: var(--club-v181-red-soft) !important;
  color: var(--club-v181-red) !important;
}

/* Bottom navigation */
.app-screen:not([hidden]) > .club-nav,
.club-nav {
  gap: 4px !important;
  min-height: 76px !important;
  padding: 7px 8px max(7px, env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(28, 56, 46, .1) !important;
  border-radius: 24px 24px 0 0 !important;
  background: rgba(255, 252, 246, .94) !important;
  box-shadow: 0 -10px 30px rgba(38, 31, 25, .08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}

.club-nav button {
  min-width: 0 !important;
  min-height: 58px !important;
  gap: 3px !important;
  border-radius: 15px !important;
  color: #706d67 !important;
}

.club-nav button .nav-icon {
  width: 29px !important;
  height: 29px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: currentColor !important;
}

.club-nav button small {
  font-size: .65rem !important;
  font-weight: 760 !important;
}

.club-nav button.active {
  background: var(--club-v181-red-soft) !important;
  color: var(--club-v181-red) !important;
}

.club-nav button:nth-child(3) {
  margin-top: -16px !important;
  border-radius: 18px !important;
  background: var(--club-v181-red) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(176, 42, 42, .24) !important;
}

.club-nav button:nth-child(3) .nav-icon {
  background: rgba(255, 255, 255, .12) !important;
}

.club-nav button:nth-child(3).active {
  background: var(--club-v181-red-strong) !important;
}

/* Premium side menu */
.club-side-menu {
  position: fixed;
  inset: 0;
  z-index: 220;
  visibility: hidden;
  background: rgba(16, 31, 26, .42);
  opacity: 0;
  transition: visibility 0s linear 260ms, opacity 220ms ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.club-side-menu.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.club-side-menu-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.club-side-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(88vw, 360px);
  padding:
    max(22px, calc(env(safe-area-inset-top) + 16px))
    16px
    max(20px, calc(env(safe-area-inset-bottom) + 14px));
  overflow: auto;
  border-radius: 0 28px 28px 0;
  background: #fffaf2;
  box-shadow: 26px 0 70px rgba(16, 31, 26, .22);
  transform: translateX(-104%);
  transition: transform 250ms cubic-bezier(.2, .8, .2, 1);
}

.club-side-menu.open .club-side-menu-panel {
  transform: translateX(0);
}

.club-side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -22px -16px 16px;
  padding:
    max(24px, calc(env(safe-area-inset-top) + 18px))
    18px
    22px;
  border-radius: 0 28px 22px 0;
  background: var(--club-v181-green);
}

.club-side-menu-head img {
  width: 204px;
  max-width: calc(100% - 58px);
  padding: 6px 8px;
  border-radius: 12px;
  background: #fffaf2;
}

.club-side-menu-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.6rem;
}

.club-side-menu-nav {
  display: grid;
  align-content: start;
  gap: 6px;
}

.club-side-menu-nav button,
.club-side-menu-footer button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--club-v181-charcoal);
  font-weight: 760;
  text-align: left;
}

.club-side-menu-nav button:hover,
.club-side-menu-nav button:focus-visible {
  background: var(--club-v181-green-soft);
  color: var(--club-v181-green);
}

.club-side-menu-nav svg,
.club-side-menu-footer svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.club-side-menu-footer {
  padding-top: 15px;
  border-top: 1px solid var(--club-v181-line);
}

.club-side-menu-footer button {
  color: var(--club-v181-red);
}

/* Phone */
@media (max-width: 699px) {
  .app-screen:not([hidden]) {
    width: 100% !important;
    max-width: 520px !important;
  }

  .view {
    padding-right: var(--club-v181-gutter) !important;
    padding-left: var(--club-v181-gutter) !important;
  }

  .premium-alert-button {
    display: none !important;
  }

  .top-pill {
    display: none !important;
  }

  .home-prompt {
    padding: 19px;
  }

  .home-category-row {
    margin-inline: calc(var(--club-v181-gutter) * -1);
    padding-inline: var(--club-v181-gutter);
  }

  .home-category-row button {
    min-width: 68px;
  }

  .order-hero {
    min-height: 174px !important;
    padding: 22px !important;
  }

  .order-hero h1 {
    max-width: 320px;
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
  }

  .menu-item-card {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    min-height: 180px;
  }

  .menu-item-photo {
    width: 132px !important;
    height: 100% !important;
    min-height: 180px !important;
    border-radius: 0 !important;
  }

  .menu-item-body {
    padding: 13px !important;
  }

  .menu-item-body > p {
    min-height: auto;
    -webkit-line-clamp: 2 !important;
  }

  .menu-item-controls,
  .menu-item-controls:has(button.is-customize) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 7px !important;
  }

  .menu-item-controls .menu-add-button,
  .menu-item-controls button.is-customize {
    grid-column: 1 / -1 !important;
  }

  .modifier-panel {
    border-radius: 26px 26px 0 0 !important;
  }

  .modifier-item-hero {
    display: block !important;
  }

  .modifier-item-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .cart-panel {
    border-radius: 26px 26px 0 0 !important;
  }
}

@media (max-width: 390px) {
  .club-topbar,
  .premium-topbar {
    padding-inline: 12px !important;
  }

  .premium-menu-button,
  .top-cart-button {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
  }

  .mini-brand img {
    width: min(174px, 48vw) !important;
  }

  .home-prompt h1 {
    font-size: 1.95rem;
  }

  .home-prompt-actions {
    grid-template-columns: 1fr;
  }

  .menu-item-card {
    grid-template-columns: 114px minmax(0, 1fr) !important;
  }

  .menu-item-photo {
    width: 114px !important;
  }

  .menu-item-heading h2 {
    font-size: 1.02rem !important;
  }

  .menu-item-heading strong {
    font-size: .83rem !important;
  }
}

/* iPad portrait */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .club-topbar {
    border-radius: 0 0 22px 22px !important;
  }

  .home-primary-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .home-greeting,
  .home-prompt,
  .home-search-launch,
  .home-category-row,
  .restaurant-context,
  .wallet-home-pass {
    grid-column: 1 / -1;
  }

  .home-order-cta {
    grid-column: 1;
    min-height: 92px;
  }

  .home-reorder-cta {
    grid-column: 2;
    min-height: 92px;
  }

  .home-secondary-column {
    align-items: start;
  }

  .menu-grid {
    gap: 16px !important;
  }

  .menu-item-photo {
    aspect-ratio: 4 / 3 !important;
  }

  .club-nav {
    border-radius: 23px !important;
  }

  .club-side-menu-panel {
    width: min(58vw, 420px);
  }
}

/* iPad landscape and desktop */
@media (min-width: 901px) and (orientation: landscape) {
  .club-topbar {
    border-radius: 0 0 22px 22px !important;
  }

  .premium-menu-button {
    display: none !important;
  }

  .club-nav,
  .app-screen:not([hidden]) > .club-nav {
    border-radius: 24px !important;
    background: rgba(255, 252, 246, .96) !important;
    box-shadow: var(--club-v181-shadow-sm) !important;
  }

  .app-screen:not([hidden]) > .club-nav.is-compact {
    position: fixed !important;
    top: calc(var(--hop-safe-top) + 96px) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--hop-page-gutter) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(58px, auto) !important;
    width: var(--hop-side-nav-width) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .club-nav.is-compact button {
    min-height: 62px !important;
  }

  .club-nav.is-compact button small {
    max-height: 18px !important;
    opacity: 1 !important;
  }

  .club-nav.is-compact button.active {
    background: var(--club-v181-red-soft) !important;
    color: var(--club-v181-red) !important;
  }

  .club-nav.is-compact button:nth-child(3),
  .club-nav.is-compact button:nth-child(3).active {
    background: var(--club-v181-red) !important;
    color: #fff !important;
  }

  .club-nav button:nth-child(3) {
    margin-top: 0 !important;
  }

  .home-prompt {
    min-height: 220px;
    align-content: space-between;
  }

  .home-prompt h1 {
    max-width: 440px;
  }

  .order-view.active {
    align-items: start !important;
  }

  .order-hero {
    min-height: 164px !important;
  }

  .category-chips {
    border-color: var(--club-v181-line) !important;
    background: rgba(255, 253, 248, .95) !important;
    box-shadow: var(--club-v181-shadow-xs);
  }

  .menu-item-card {
    min-height: 100%;
  }

  .menu-item-photo {
    aspect-ratio: 4 / 3 !important;
  }

  .tablet-cart-summary {
    border-color: var(--club-v181-line) !important;
    border-radius: 22px !important;
    background: rgba(255, 253, 248, .97) !important;
    box-shadow: var(--club-v181-shadow-sm) !important;
  }

  .tablet-cart-line {
    background: #f7efe4 !important;
  }

  .tablet-cart-open {
    background: var(--club-v181-red) !important;
  }

  .modifier-panel {
    border-radius: 28px !important;
  }

  .modifier-footer {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-content: initial !important;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 36%, rgba(217, 199, 166, .18), transparent 33%),
      rgba(255, 253, 248, .97) !important;
  }

  .modifier-footer::before {
    display: block;
    margin-bottom: 18px;
    color: var(--club-v181-green);
    content: "YOUR CUSTOM ORDER";
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .15em;
  }

  .modifier-footer::after {
    position: absolute;
    top: 105px;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translateX(-50%);
    background: url("/public/assets/hop-logo.png") center / 86% auto no-repeat;
    content: "";
    opacity: .055;
    pointer-events: none;
  }

  .modifier-footer #addCustomizedItemBtn {
    z-index: 1;
    margin-top: auto;
  }

  .modifier-item-hero {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }

  .modifier-item-photo {
    width: 190px !important;
    height: 142px !important;
  }
}

@media (min-width: 1367px) {
  .app-screen,
  .app-screen:not([hidden]) {
    max-width: 1560px !important;
    margin-inline: auto !important;
  }

  .club-topbar {
    max-width: 1460px;
  }

  .home-prompt {
    min-height: 240px;
  }
}

@keyframes v181-view-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .club-side-menu,
  .club-side-menu-panel,
  .menu-item-photo img {
    animation: none !important;
    transition: none !important;
  }
}