:root {
  --sub-teal: #087f73;
  --sub-teal-dark: #075e57;
  --sub-teal-deep: #062d2d;
  --sub-teal-tint: #e8f4f1;
  --sub-teal-tint-2: #cde7e1;
  --sub-ink: #123230;
  --sub-muted: #506461;
  --sub-faint: #8aa09c;
  --sub-line: #e0ebe8;
  --sub-surface: #fff;
  --sub-cream: #f2f6f5;
  --sub-green: #1a9e5f;
  --sub-blue: #2f6fb0;
  --sub-red: #e23744;
  --sub-shell: 480px;
}

/* Landing/order entry points. The explicit hidden rule prevents a flex rule from
   accidentally exposing acquisition while the shared flag is off. */
[data-subscription-entry][hidden] { display: none !important; }
.subscription-entry-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sub-teal-dark);
  font: 600 13px Outfit, system-ui, sans-serif;
  text-decoration: none;
}
.subscription-entry-link:focus-visible,
.subscription-order-promo:focus-visible,
.subscription-landing-cta:focus-visible { outline: 3px solid rgba(7, 148, 147, .3); outline-offset: 3px; }
.subscription-landing-cta {
  position: fixed;
  z-index: 35;
  /* Centred over the landing column, like the sticky Order Now bar it sits above. */
  left: 50%;
  transform: translateX(-50%);
  /* Clear the sticky Order Now bar (button + note + padding + safe area). */
  bottom: calc(108px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: #fff;
  color: var(--sub-teal-dark);
  box-shadow: 0 8px 28px rgba(17, 39, 37, .18);
  font: 700 13px Outfit, system-ui, sans-serif;
  cursor: pointer;
}
.subscription-order-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--sub-teal-tint-2);
  border-radius: 14px;
  background: linear-gradient(120deg, var(--sub-teal-tint), #eafaf1);
  color: var(--sub-ink);
  text-align: left;
  text-decoration: none;
}
.subscription-order-promo .subscription-promo-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fff;
  font-size: 22px;
}
.subscription-order-promo > span:nth-child(2) { flex: 1; min-width: 0; }
.subscription-order-promo b { display: block; font-size: 14px; }
.subscription-order-promo small { display: block; color: var(--sub-muted); font-size: 12px; }
.subscription-order-promo > span:last-child { flex: none; color: var(--sub-teal); font-size: 20px; }

/* Shared website subscription app: intentionally mirrors the approved 480px
   wireframe shell and the current Qwikly Outfit/teal visual system. */
.qwikly-subscription-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  background: rgba(6, 63, 62, .45);
}
.qwikly-subscription-overlay[hidden] { display: none; }
body.qwikly-subscription-open { overflow: hidden; }
.subscription-page { margin: 0; background: #dfe8e6; }
.qwikly-subscription-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--sub-shell));
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--sub-cream);
  box-shadow: 0 0 60px rgba(6, 63, 62, .12);
  color: var(--sub-ink);
  font-family: Outfit, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.qwikly-subscription-shell * { box-sizing: border-box; }
.qwikly-subscription-shell button,
.qwikly-subscription-shell input,
.qwikly-subscription-shell textarea,
.qwikly-subscription-shell select { font-family: inherit; }
.qwikly-subscription-shell h1,
.qwikly-subscription-shell h2,
.qwikly-subscription-shell h3,
.qwikly-subscription-shell h4,
.qwikly-subscription-shell p { margin-top: 0; }
.qwikly-subscription-shell h1,
.qwikly-subscription-shell h2,
.qwikly-subscription-shell h3,
.qwikly-subscription-shell h4 { letter-spacing: -.02em; line-height: 1.15; }
.qwikly-subscription-shell .sub-calendar-month { padding: 0; }
.qwikly-subscription-shell .sub-sheet { padding: 0; }

.sub-appbar {
  position: relative;
  flex: none;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 16px 18px;
  background: linear-gradient(160deg, var(--sub-teal-deep), var(--sub-teal));
  color: #fff;
}
.sub-appbar.sub-appbar-light { background: var(--sub-surface); color: var(--sub-ink); border-bottom: 1px solid var(--sub-line); }
.sub-appbar.sub-appbar-center { flex-direction: column; justify-content: center; gap: 1px; text-align: center; }
.sub-appbar > button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: inherit;
  cursor: pointer;
}
.sub-appbar-light > button { background: transparent; }
.sub-appbar-center > button { position: absolute; left: 18px; }
.sub-appbar svg { display: block; }
.sub-appbar h1 { margin-bottom: 2px; font-size: 17px; font-weight: 600; }
.sub-appbar > div { flex: 1; min-width: 0; }
.sub-appbar-action { flex: none; width: auto !important; height: auto !important; padding: 7px 11px; border-radius: 999px !important; font-size: 12px; font-weight: 700; }
.sub-appbar-whatsapp { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sub-appbar-whatsapp svg { flex: none; width: 17px; height: 17px; color: #9cffe1; }
/* The centred app bar stacks its title and subtitle, so an absolutely placed action landed
   on top of them. Pin it to the top row and keep the text clear of both side buttons. */
.sub-appbar-center .sub-appbar-action { position: absolute; top: 14px; right: 18px; }
.sub-appbar-center > div { padding: 0 84px; }
.sub-button .sub-btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; animation: sub-spin .7s linear infinite; }
.sub-appbar p { margin-bottom: 0; font-size: 12px; opacity: .9; }
.sub-progress { display: none; }

.sub-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 0 8px;
}
.sub-body.sub-body-flush { padding-top: 0; }
.sub-intro-body { padding: 0 0 104px; background: #f7f7f1; color: var(--sub-ink); }
.sub-intro-hero { position: relative; min-height: 530px; overflow: hidden; padding: max(18px, env(safe-area-inset-top)) 20px 18px; background: linear-gradient(150deg, #fffdf7 0%, #f4f6e9 56%, #e5f3e8 100%); }
.sub-intro-back { position: relative; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--sub-ink); cursor: pointer; }
.sub-intro-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.sub-intro-glow.one { width: 300px; height: 300px; top: 24px; right: -140px; background: rgba(29,205,172,.1); }
.sub-intro-glow.two { width: 220px; height: 220px; left: -130px; bottom: 55px; background: rgba(214,184,104,.13); }
.sub-intro-copy { position: relative; z-index: 2; margin-top: 20px; }
.sub-intro-badge { display: inline-flex; margin-bottom: 13px; padding: 6px 12px; border: 1px solid rgba(9,145,128,.2); border-radius: 999px; background: rgba(9,145,128,.08); color: var(--sub-teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.sub-intro-copy h1 { margin-bottom: 10px; color: var(--sub-ink); font-size: clamp(32px, 8vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; }
.sub-intro-copy p { max-width: 370px; margin-bottom: 0; color: var(--sub-muted); font-size: 14px; line-height: 1.5; }
.sub-intro-hero-image { position: relative; z-index: 1; display: block; width: min(92%, 390px); height: 230px; margin: -6px auto -8px; object-fit: contain; }
.sub-intro-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.sub-intro-stats div { min-width: 0; padding: 9px 4px; border: 1px solid rgba(9,93,84,.12); border-radius: 14px; background: rgba(255,255,255,.78); text-align: center; }
.sub-intro-stats strong,.sub-intro-stats span { display: block; white-space: nowrap; }
.sub-intro-stats strong { font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.sub-intro-stats strong { color: var(--sub-teal-deep); }
.sub-intro-stats span { margin-top: 2px; color: var(--sub-muted); font-size: 9px; }
.sub-intro-content { padding: 18px 16px 28px; }
.sub-intro-comparison { margin-bottom: 14px; padding: 17px; border: 1px solid var(--sub-line); border-radius: 22px; background: #fff; }
.sub-intro-comparison > span { color: var(--sub-teal); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sub-intro-comparison > h2 { margin: 8px 0 14px; color: var(--sub-ink); font-size: 22px; font-weight: 800; }
.sub-intro-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sub-intro-comparison-grid > div { min-width: 0; min-height: 178px; padding: 13px; border-radius: 16px; }
.sub-intro-comparison-grid .muted { border: 1px solid var(--sub-line); background: #f1f3ed; }
.sub-intro-comparison-grid .qwikly { background: linear-gradient(145deg,#075e57,#062d2d); box-shadow: inset 0 1px rgba(255,255,255,.08),0 10px 24px rgba(6,45,45,.18); }
.sub-intro-comparison-grid b,.sub-intro-comparison-grid strong,.sub-intro-comparison-grid em { display: block; }
.sub-intro-comparison-grid b { min-height: 24px; margin-bottom: 7px; color: var(--sub-muted); font-size: 8px; letter-spacing: .06em; }
.sub-intro-comparison-grid .qwikly b { color: #c8fff0; }
.sub-intro-comparison-grid strong { margin-bottom: 9px; color: var(--sub-ink); font-size: 17px; line-height: 1.15; }
.sub-intro-comparison-grid .qwikly strong { color: #fff; }
.sub-intro-comparison-grid p { margin: 0 0 5px; color: var(--sub-muted); font-size: 10px; line-height: 1.4; }
.sub-intro-comparison-grid .qwikly p { color: rgba(244,255,252,.84); font-weight: 600; }
.sub-intro-comparison-grid em { margin-top: 4px; color: #fff; font-size: 13px; font-style: normal; font-weight: 800; }
.sub-intro-comparison > small { display: block; margin-top: 10px; color: var(--sub-muted); font-size: 9px; line-height: 1.4; }
.sub-intro-feature { position: relative; min-height: 195px; overflow: hidden; padding: 18px; border: 1px solid var(--sub-line); border-radius: 22px; background: #eaf4ef; }
.sub-intro-feature > div { position: relative; z-index: 2; width: 58%; }
.sub-intro-feature > div > span { color: var(--sub-teal); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sub-intro-feature h2 { margin: 8px 0; color: var(--sub-ink); font-size: 23px; font-weight: 800; }
.sub-intro-feature p { color: var(--sub-muted); font-size: 12px; line-height: 1.5; }
.sub-intro-feature img { position: absolute; width: 58%; height: 180px; right: -8px; bottom: -5px; object-fit: contain; }
.sub-intro-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sub-intro-benefits article { min-height: 132px; padding: 14px; border: 1px solid var(--sub-line); border-radius: 18px; background: #fff; }
.sub-intro-benefits i { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 11px; border-radius: 12px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 20px; font-style: normal; }
.sub-intro-benefits h3 { margin: 0 0 5px; color: var(--sub-ink); font-size: 14px; font-weight: 700; }
.sub-intro-benefits p { margin: 0; color: var(--sub-muted); font-size: 11px; line-height: 1.45; }
.sub-intro-section-title { margin: 26px 0 13px !important; color: var(--sub-ink); font-size: 21px; font-weight: 800; }
.sub-intro-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-intro-steps article { min-height: 92px; padding: 13px; border: 1px solid var(--sub-line); border-radius: 16px; background: #fff; }
.sub-intro-steps b,.sub-intro-steps span { display: block; }
.sub-intro-steps b { margin-bottom: 10px; color: var(--sub-teal); font-size: 11px; letter-spacing: .07em; }
.sub-intro-steps span { color: var(--sub-ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.sub-intro-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 18px; }
.sub-intro-trust span { padding: 7px 11px; border-radius: 999px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 10px; font-weight: 600; }
.sub-teal-hero {
  margin-top: -14px;
  padding: 18px 16px 26px;
  background: linear-gradient(160deg, var(--sub-teal-deep), var(--sub-teal));
}
.sub-hero-card,
.sub-card {
  width: auto;
  margin: 0 16px 14px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: var(--sub-surface);
  box-shadow: 0 1px 3px rgba(6, 63, 62, .05);
}
.sub-teal-hero .sub-hero-card { margin: 0; }
.sub-card h2 { font-size: 20px; }
.sub-card h3 { margin-bottom: 8px; font-size: 16px; }
.sub-card p { margin-bottom: 8px; color: var(--sub-muted); font-size: 13px; line-height: 1.45; }
.sub-title { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.sub-hint { margin: 8px 0 0; color: var(--sub-muted); font-size: 12px; text-align: center; }
.sub-section-title { margin: 16px 16px 8px; font-size: 15px; font-weight: 700; }

.sub-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sub-preset,
.sub-chip {
  border: 1px solid var(--sub-line);
  border-radius: 10px;
  background: var(--sub-surface);
  color: var(--sub-ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.sub-preset { padding: 8px 14px; }
.sub-chip { padding: 9px 14px; }
.sub-preset.active,
.sub-chip.active { border-color: var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); }
.sub-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px;
  border: 1px solid var(--sub-line);
  border-radius: 12px;
}
.sub-stepper button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--sub-teal-tint);
  color: var(--sub-teal-dark);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.sub-stepper button:disabled { opacity: .4; }
.sub-stepper strong { min-width: 96px; font-size: 20px; text-align: center; }
.sub-stepper strong small { color: var(--sub-muted); font-size: 13px; font-weight: 500; }
.sub-savings {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef4fb;
  color: var(--sub-blue) !important;
  font-size: 14px !important;
  font-weight: 600;
  text-align: center;
}
.sub-savings span { display: block; color: var(--sub-muted); font-size: 12px; font-weight: 500; }

.sub-meal-chips { display: flex; gap: 8px; }
.sub-meal-chip {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border: 1px solid var(--sub-line);
  border-radius: 12px;
  background: var(--sub-surface);
  color: var(--sub-ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}
.sub-meal-chip.active { border-color: var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); }
.sub-meal-chip .sub-meal-icon { font-size: 20px; }
.sub-veg-control { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 14px; border: 1px solid var(--sub-line); border-radius: 10px; background: #fff; color: var(--sub-ink); cursor: pointer; font-size: 14px; font-weight: 600; }
.sub-veg-control.active { border-color: var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); }
.sub-veg-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid var(--sub-green); border-radius: 3px; background: #fff; }
.sub-veg-mark::after { width: 7px; height: 7px; border-radius: 50%; background: var(--sub-green); content: ""; }

.sub-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-mode { position: relative; min-height: 150px; padding: 14px; border: 1.5px solid var(--sub-line); border-radius: 14px; background: #fff; color: var(--sub-ink); cursor: pointer; text-align: left; }
.sub-mode.active { border-color: var(--sub-teal); background: var(--sub-teal-tint); }
.sub-mode strong { display: block; margin-bottom: 5px; font-size: 15px; }
.sub-mode small { display: block; color: var(--sub-muted); font-size: 12px; line-height: 1.4; }
.sub-recommended { display: inline-block; margin-bottom: 8px; padding: 3px 7px; border-radius: 999px; background: var(--sub-teal); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sub-benefits { margin-top: -12px; }
.sub-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-benefit-grid > div { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--sub-teal-tint); text-align: center; }
.sub-benefit-grid span { font-size: 21px; }
.sub-benefit-grid b { font-size: 13px; }

.sub-planhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 6px; }
.sub-planhead h2 { margin: 0; font-size: 17px; }
.sub-link-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px; border: 0; background: transparent; color: var(--sub-teal); cursor: pointer; font-size: 13px; font-weight: 600; }
.sub-tabs { display: flex; gap: 6px; margin: 0 16px 4px; padding: 4px; border-radius: 12px; background: var(--sub-teal-tint); }
.sub-tab { flex: 1; padding: 9px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--sub-muted); cursor: pointer; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.sub-tab.active { background: #fff; box-shadow: 0 1px 3px rgba(6, 63, 62, .12); color: var(--sub-teal-dark); }
.sub-pick-copy { margin: 8px 16px; color: var(--sub-muted); font-size: 13px; }
.sub-dish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.sub-dish {
  position: relative;
  overflow: hidden;
  padding: 0 0 10px;
  border: 1.5px solid var(--sub-line);
  border-radius: 14px;
  background: #fff;
  color: var(--sub-ink);
  cursor: pointer;
  text-align: left;
}
.sub-dish.active { border-color: var(--sub-teal); background: var(--sub-teal-tint); }
.sub-dish:disabled { cursor: default; opacity: .7; }
.sub-dish img { display: block; width: 100%; height: 92px; object-fit: cover; background: var(--sub-teal-tint); }
.sub-dish strong,
.sub-dish small { display: block; padding: 0 11px; }
.sub-dish strong { margin-top: 9px; padding-right: 28px; font-size: 13px; line-height: 1.25; }
.sub-dish small { margin-top: 4px; color: var(--sub-muted); font-size: 11px; }
.sub-dish-check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--sub-teal); color: #fff; font-size: 12px; }
.sub-pick-note { margin: 10px 16px 0; color: var(--sub-muted); font-size: 12px; }
.sub-schedule { margin: 0 16px 14px; overflow: hidden; border-radius: 14px; background: #fff; }
.sub-day-plans { display: grid; gap: 14px; margin: 0 16px 16px; }
.sub-day-plan { padding: 12px; border: 0; border-radius: 16px; background: #f7f8fb; box-shadow: 0 1px 3px rgba(6, 63, 62, .04); }
.sub-day-plan > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px 10px; }
.sub-day-plan > header strong,
.sub-day-plan > header small { display: block; }
.sub-day-plan > header strong { font-size: 15px; }
.sub-day-plan > header small { margin-top: 2px; color: var(--sub-muted); font-size: 11px; text-transform: capitalize; }
.sub-day-plan > header .sub-link-button { flex: none; }
.sub-day-header-actions { display: flex; align-items: center; gap: 10px; }
.sub-inline-total { color: var(--sub-teal-deep); font-size: 13px; white-space: nowrap; }
.sub-day-dishes { display: grid; gap: 8px; }
.sub-day-dish { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px rgba(24, 43, 41, .06); }
.sub-day-dish > img { width: 76px; height: 76px; border-radius: 11px; background: var(--sub-teal-tint); object-fit: cover; }
.sub-day-dish-copy { min-width: 0; }
.sub-day-dish-copy > strong { display: block; margin: 3px 0 2px; font-size: 14px; line-height: 1.25; }
.sub-day-dish-copy > small { display: block; color: var(--sub-muted); font-size: 11px; }
.sub-day-price { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; }
.sub-day-price b { color: var(--sub-teal); font-size: 14px; }
.sub-day-price s { color: var(--sub-faint); font-size: 11px; }
.sub-visit-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px -12px -12px; padding: 13px; border-top: 1px solid var(--sub-line); background: #e8f4f1; }
.sub-visit-total b,.sub-visit-total small,.sub-visit-total strong,.sub-visit-total s { display: block; }
.sub-visit-total b { color: var(--sub-ink); font-size: 13px; }
.sub-visit-total small { margin-top: 2px; color: var(--sub-muted); font-size: 10px; }
.sub-visit-total > div:last-child { text-align: right; }
.sub-visit-total strong { color: var(--sub-teal-deep); font-size: 17px; }
.sub-visit-total s { margin-top: 1px; color: var(--sub-faint); font-size: 11px; }
.sub-dish-kind { display: inline-flex; padding: 3px 6px; border-radius: 999px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.sub-dish-kind.extra { background: #eef4fb; color: var(--sub-blue); }
.sub-day-dish > .sub-icon-button { align-self: center; }
.sub-occurrence { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--sub-line); background: #fff; color: var(--sub-ink); text-align: left; }
button.sub-occurrence { cursor: pointer; }
.sub-occurrence:last-child { border-bottom: 0; }
.sub-occurrence.selected { background: var(--sub-teal-tint); }
.sub-occurrence.extra { background: #f9fcfb; }
.sub-occurrence > strong { color: var(--sub-muted); font-size: 12px; font-weight: 500; }
.sub-occurrence > strong small { display: block; text-transform: capitalize; }
.sub-occurrence > span { font-size: 14px; font-weight: 600; }
.sub-occurrence > small { color: var(--sub-muted); font-size: 11px; text-align: right; }
.sub-remove-link { color: var(--sub-red); }
.sub-plan-savings { display: flex; align-items: flex-start; gap: 10px; margin: 6px 16px 18px; padding: 14px; border-radius: 12px; background: #eef4fb; }
.sub-plan-savings b { color: var(--sub-blue); }
.sub-plan-savings p { margin: 2px 0 0; color: var(--sub-muted); font-size: 12px; }

.sub-info { margin: 0 16px 14px; padding: 13px; border-radius: 12px; background: var(--sub-teal-tint); color: var(--sub-teal-deep); font-size: 13px; line-height: 1.45; }
.sub-card .sub-info { margin: 10px 0 0; }
.sub-warning { background: #fff4e5; color: #744c15; }
.sub-later-guide > p { margin-top: 4px; }
.sub-how-list { margin-top: 10px; }
.sub-how-list > div { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--sub-line); }
.sub-how-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sub-how-list span { color: var(--sub-teal); font-weight: 700; }
.sub-how-list p { margin: 0; color: var(--sub-ink); }
.sub-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-field { margin-bottom: 13px; }
.sub-field:last-child { margin-bottom: 0; }
.sub-field label { display: block; margin-bottom: 6px; color: var(--sub-ink); font-size: 13px; font-weight: 600; }
.sub-field input,
.sub-field textarea,
.sub-field select {
  width: 100%;
  min-height: 45px;
  padding: 12px;
  border: 1px solid var(--sub-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sub-ink);
  font-size: 15px;
}
.sub-field textarea { min-height: 76px; resize: vertical; }
.sub-field input:focus,
.sub-field textarea:focus,
.sub-field select:focus { border-color: var(--sub-teal); outline: 3px solid rgba(7, 148, 147, .12); }

.sub-date-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--sub-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sub-ink);
  cursor: pointer;
  font-size: 14px;
}
.sub-date-selector strong { flex: 1; font-weight: 600; }
.sub-date-selector.complete { border-color: var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); }
.sub-sheet-overlay { position: fixed; z-index: 30; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(6, 63, 62, .45); }
.sub-sheet { display: flex; flex-direction: column; width: min(100%, var(--sub-shell)); max-height: min(90vh, 760px); overflow: hidden; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(6, 63, 62, .18); }
.sub-calendar-sheet { max-height: min(88vh, 680px); }
.sub-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 12px; border-bottom: 1px solid var(--sub-line); }
.sub-sheet-header h3 { margin-bottom: 3px; font-size: 18px; }
.sub-sheet-header p { margin-bottom: 0; color: var(--sub-muted); font-size: 12px; }
.sub-sheet-header button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sub-cream); color: var(--sub-muted); cursor: pointer; font-size: 20px; }
.sub-sheet-body { min-height: 0; overflow-y: auto; padding: 12px 16px; }
.sub-sheet-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sub-line); }
.sub-sheet-footer .sub-button { width: 100%; }
.sub-calendar-count { margin: 0 0 8px; color: var(--sub-muted); font-size: 12px; text-align: center; }
.sub-calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--sub-muted); font-size: 13px; font-weight: 600; }
.sub-calendar-nav button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--sub-teal-tint); color: var(--sub-teal-dark); cursor: pointer; font-size: 22px; }
.sub-calendar-month { margin-bottom: 8px; }
.sub-calendar-month + .sub-calendar-month { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sub-line); }
.sub-calendar-month h4 { margin: 2px 0 6px; text-align: center; font-size: 15px; }
.sub-calendar-weekdays,
.sub-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(36px, 44px)); justify-content: space-between; gap: 2px; }
.sub-calendar-weekdays { padding: 3px 0; color: var(--sub-muted); font-size: 10px; text-align: center; }
.sub-calendar-day { width: 100%; max-width: 44px; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--sub-ink); cursor: pointer; font-size: 14px; }
.sub-calendar-day:hover:not(:disabled) { background: var(--sub-cream); }
.sub-calendar-day.selected { border: 1px solid var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-weight: 700; }
.sub-calendar-day:disabled { color: var(--sub-faint); cursor: not-allowed; opacity: .38; }
.sub-calendar-day.blank { pointer-events: none; }
.sub-calendar-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 8px; }
.sub-calendar-body { padding: 8px 16px 4px; }
.sub-calendar-footer { flex: none; }
.sub-loader { display: flex; min-height: 92px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--sub-muted); text-align: center; }
.sub-loader p { margin: 0; }
.sub-spinner { width: 28px; height: 28px; border: 3px solid var(--sub-teal-tint-2); border-top-color: var(--sub-teal); border-radius: 50%; animation: sub-spin .8s linear infinite; }
@keyframes sub-spin { to { transform: rotate(360deg); } }
.sub-busy-overlay { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(255,255,255,.78); backdrop-filter: blur(2px); }
.sub-busy-overlay .sub-loader { min-width: 210px; padding: 22px; border: 1px solid var(--sub-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(6,63,62,.12); }
.sub-dish-sheet { max-height: min(88vh, 720px); }
.sub-sheet-dishes { display: grid; gap: 10px; }
.sub-sheet-dish { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--sub-line); border-radius: 14px; background: #fff; }
.sub-sheet-dish.selected { border-color: var(--sub-teal-tint-2); background: #f8fcfb; }
.sub-sheet-dish img { width: 72px; height: 72px; border-radius: 11px; background: var(--sub-teal-tint); object-fit: cover; }
.sub-sheet-dish > div:nth-child(2) > strong,
.sub-sheet-dish > div:nth-child(2) > small { display: block; }
.sub-sheet-dish > div:nth-child(2) > small { margin-top: 4px; color: var(--sub-muted); font-size: 12px; }
.sub-sheet-dish .sub-button { min-height: 38px; width: 66px; padding: 8px; font-size: 13px; }
.sub-dish-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.sub-mini-button { min-height: 32px; padding: 6px 9px; border: 1px solid var(--sub-teal); border-radius: 9px; background: var(--sub-teal); color: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.sub-mini-button.secondary { background: #fff; color: var(--sub-teal-dark); }
.sub-icon-button,
.sub-selected-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
.sub-icon-button { border: 1px solid var(--sub-teal); background: #fff; color: var(--sub-teal-dark); cursor: pointer; }
.sub-icon-button.danger { border-color: #f3c4cb; color: var(--sub-red); }
.sub-selected-icon { background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 18px; font-weight: 700; }
.sub-dish-footer { display: flex; align-items: center; gap: 12px; color: var(--sub-muted); font-size: 12px; }
.sub-dish-footer > span { flex: 1; }
.sub-dish-footer .sub-button { flex: 0 0 128px; width: auto; }
.sub-checkrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: transparent; color: var(--sub-ink); cursor: pointer; font-size: 14px; font-weight: 500; }
.sub-checkbox { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--sub-teal); border-radius: 5px; color: var(--sub-teal); font-size: 13px; }

.sub-review-banner { display: flex; align-items: center; gap: 10px; margin: 14px 16px; padding: 15px 16px; border: 1px solid #b7e7d5; border-radius: 16px; background: #e4f7ef; color: var(--sub-ink); font-size: 15px; font-weight: 800; }
.sub-breakdown { display: grid; gap: 9px; }
.sub-row { display: flex; justify-content: space-between; gap: 16px; }
.sub-row.total { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--sub-line); font-size: 18px; font-weight: 700; }
.sub-detail-line { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--sub-line); color: var(--sub-ink); font-size: 14px; }
.sub-detail-line:last-child { border-bottom: 0; }
.sub-detail-icon { flex: none; color: var(--sub-muted); }
.sub-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 16px 14px; color: var(--sub-muted); font-size: 12px; line-height: 1.4; }
.sub-check input { flex: none; margin-top: 3px; accent-color: var(--sub-teal); }

.sub-footer { position: relative; z-index: 4; display: flex; flex: none; align-items: center; gap: 10px; margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sub-line); background: rgba(255, 255, 255, .97); }
.sub-footer-total { flex: none; }
.sub-footer-total small { display: block; color: var(--sub-muted); font-size: 11px; }
.sub-footer-total b { font-size: 18px; }
.sub-button { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--sub-teal); color: #fff; cursor: pointer; font-size: 16px; font-weight: 600; text-align: center; }
.sub-button.secondary { border: 1px solid var(--sub-line); background: #fff; color: var(--sub-teal-dark); }
.sub-button.danger { border: 1px solid #f3c4cb; background: #fff; color: var(--sub-red); }
.sub-button:disabled { background: #9bb7b2; cursor: not-allowed; opacity: .6; }

.sub-error { margin: 0 16px 14px; padding: 11px; border-radius: 10px; background: #fff0f2; color: #b4233c; font-size: 13px; }
.sub-receipt { padding: 20px 16px 40px; background: linear-gradient(160deg, var(--sub-teal-deep), var(--sub-teal)); color: #fff; text-align: center; }
.sub-receipt-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 6px auto 12px; border-radius: 50%; background: #fff; color: var(--sub-green); font-size: 34px; }
.sub-receipt h2 { margin-bottom: 0; color: #fff; font-size: 22px; }
.sub-receipt-card { margin: -24px 16px 14px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(6, 63, 62, .12); }
.sub-receipt-card .sub-detail-line { padding: 14px 16px; }

/* Success screen — the same shape as the order flow's post-payment screen
   (order.html #step-tracking / .tracking-success in order.css): centred confirmation head
   with the reference and a slot chip, then a dimmed timeline with the live stage lit, then
   the WhatsApp support card, then the details. Rendered in the subscription palette so the
   two flows read as one product rather than two. */
.sub-success { padding: 26px 20px 22px; text-align: center; }
.sub-success-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--sub-teal-tint); color: var(--sub-green); font-size: 38px; font-weight: 700; }
.sub-success h2 { margin: 0 0 6px; font-size: 24px; }
.sub-success-id { margin: 0; color: var(--sub-muted); font-size: 14px; }
.sub-success-id strong { color: var(--sub-ink); }
.sub-success-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 16px; border: 1px solid var(--sub-teal-tint-2); border-radius: 20px; background: var(--sub-teal-tint); color: var(--sub-teal-deep); font-size: 13px; font-weight: 600; }
.sub-success-sub { max-width: 320px; margin: 12px auto 0; color: var(--sub-muted); font-size: 14px; line-height: 1.5; }

.sub-steps { margin: 4px 16px 14px; padding: 20px; border-radius: 16px; background: var(--sub-cream); }
.sub-step { display: flex; align-items: flex-start; gap: 14px; opacity: .42; }
.sub-step.done,
.sub-step.active { opacity: 1; }
.sub-step-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sub-surface); font-size: 17px; }
.sub-step.active .sub-step-ic { background: var(--sub-teal); box-shadow: 0 0 0 4px rgba(7, 148, 147, .16); }
.sub-step-copy h4 { margin: 7px 0 2px; font-size: 15px; }
.sub-step-copy p { margin: 0; color: var(--sub-muted); font-size: 12.5px; line-height: 1.45; }
/* Connector aligned to the centre of the 36px icon column. */
.sub-step-line { width: 2px; height: 16px; margin: 4px 0 4px 17px; background: var(--sub-line); }

.sub-support-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 14px; padding: 16px; border-radius: 16px; background: var(--sub-surface); box-shadow: 0 1px 3px rgba(6, 63, 62, .06); }
.sub-support-card h3 { margin: 0 0 2px; font-size: 15px; }
.sub-support-card p { margin: 0; color: var(--sub-muted); font-size: 12.5px; }
.sub-support-cta { flex: none; padding: 10px 14px; border: 1px solid var(--sub-teal); border-radius: 11px; color: var(--sub-teal-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.sub-success-details { margin-bottom: 16px; }

.sub-login { margin-top: 6px; }
/* Match the field-group heading used by every other step instead of the 20px
   .sub-card h2 default, which left the input crowded against an oversized title. */
.sub-login h2 { margin-bottom: 4px; font-size: 17px; font-weight: 700; }
.sub-login-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sub-login-head p { margin: 0; line-height: 1.5; }
.sub-login-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); }
/* The code, not the number, is what step 2 is for: one wide field, big tabular digits, spaced so
   six characters read as six. A single input rather than six boxes because one input is what
   iOS/Android one-time-code autofill and "paste from message" actually target reliably. */
.sub-code-field input {
  width: 100%;
  padding: 15px 12px;
  border: 1.5px solid var(--sub-line);
  border-radius: 14px;
  background: var(--sub-surface);
  color: var(--sub-ink);
  font: 700 26px/1.1 Outfit, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 12px;
  text-align: center;
  text-indent: 12px; /* balances the trailing letter-spacing so the digits sit centred */
}
.sub-code-field input::placeholder { color: var(--sub-faint); letter-spacing: 10px; font-weight: 600; }
.sub-code-field input:focus { border-color: var(--sub-teal); outline: none; box-shadow: 0 0 0 4px rgba(7, 148, 147, .12); }
.sub-login-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--sub-muted); font-size: 13px; }
.sub-login-note b { color: var(--sub-ink); }
.sub-sending { display: inline-flex; align-items: center; gap: 8px; }
/* Reuse the footer button's spinner at text size, in the body colour rather than on teal. */
.sub-sending .sub-btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--sub-line); border-top-color: var(--sub-teal); border-radius: 50%; animation: sub-spin .7s linear infinite; }
.sub-phone-row { display: flex; align-items: stretch; gap: 8px; }
.sub-phone-prefix { flex: none; display: grid; place-items: center; min-width: 56px; min-height: 45px; padding: 0 10px; border: 1px solid var(--sub-line); border-radius: 12px; background: var(--sub-teal-tint); font-weight: 600; }
.sub-phone-row .sub-field { flex: 1; min-width: 0; }
.sub-list { display: grid; gap: 12px; margin: 0 16px; }
.sub-list-card { padding: 15px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(6, 63, 62, .05); cursor: pointer; }
.sub-list-card header { display: flex; justify-content: space-between; gap: 10px; }
.sub-list-card p { color: var(--sub-muted); font-size: 13px; }
.sub-status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 11px; font-weight: 700; text-transform: capitalize; }
.sub-credit-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin-top: 12px; }
.sub-credit-strip > div { padding: 12px; border-radius: 12px; background: var(--sub-teal-tint); }
.sub-credit-strip strong,
.sub-credit-strip small { display: block; }
.sub-credit-strip small { color: var(--sub-muted); font-size: 11px; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.sub-actions button { padding: 8px 10px; border: 1px solid var(--sub-teal); border-radius: 9px; background: #fff; color: var(--sub-teal-dark); font-weight: 600; }
.sub-deadline { display: block; margin-top: 4px; color: #b45309 !important; font-weight: 600; }
.sub-muted { color: var(--sub-muted); }
.sub-empty { padding: 32px 12px; text-align: center; }

/* ---- Manage / login (approved wireframe) ---- */
.sub-muted-small { margin: 0 0 4px; color: var(--sub-muted); font-size: 12px; }
.sub-login h2 { margin-bottom: 6px; font-size: 20px; }
.sub-grouplbl { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }
.sub-grouplbl:first-child { margin-top: 0; }
.sub-grouplbl.sub-row { display: flex; align-items: center; justify-content: space-between; }
.sub-req { color: var(--sub-red); }
.sub-sec-title { margin: 16px 16px 8px; font-size: 15px; font-weight: 700; }
.sub-vm { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid var(--sub-green); border-radius: 3px; background: #fff; }
.sub-vm::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sub-green); }
.sub-vm.non { border-color: var(--sub-red); }
.sub-vm.non::after { width: 0; height: 0; border-radius: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--sub-red); }

/* Credit panel — a choose-later plan IS credit, so it leads the manage screen rather than
   hiding in the one-line balance-slot strip this replaces. The tile row is auto-fit so the
   optional tiles (bonus, dishes to choose, balances due) can come and go without a reflow
   rule per combination. */
.sub-credit-panel { margin: 0 16px 14px; padding: 16px; border-radius: 16px; background: linear-gradient(150deg, var(--sub-teal-tint), var(--sub-surface)); box-shadow: 0 2px 12px rgba(6, 63, 62, .08); }
.sub-credit-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-credit-panel > header small { display: block; color: var(--sub-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sub-credit-panel > header strong { display: block; margin-top: 2px; color: var(--sub-teal-deep); font-size: 26px; line-height: 1.1; }
.sub-credit-chip { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--sub-teal); color: #fff; font-size: 11px; font-weight: 700; }
.sub-credit-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.sub-credit-tiles > div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .78); }
.sub-credit-tiles strong { display: block; color: var(--sub-ink); font-size: 16px; }
.sub-credit-tiles small { display: block; margin-top: 2px; color: var(--sub-muted); font-size: 11px; line-height: 1.3; }
.sub-credit-note { margin: 12px 0 0; color: var(--sub-muted); font-size: 12px; line-height: 1.5; }
.sub-credit-recharge { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sub-line); }
.sub-credit-recharge p { margin: 0 0 10px; color: var(--sub-muted); font-size: 13px; line-height: 1.45; }
.sub-credit-recharge input { width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 13px 14px; border: 1px solid var(--sub-line); border-radius: 12px; background: #fff; color: var(--sub-ink); font: inherit; }
.sub-credit-cta { width: 100%; margin-top: 12px; padding: 11px; border: 1px solid var(--sub-teal); border-radius: 12px; background: var(--sub-surface); color: var(--sub-teal-dark); font: 600 14px Outfit, system-ui, sans-serif; cursor: pointer; }
.sub-payment-history { margin: 14px 16px 24px; padding: 16px; border: 1px solid var(--sub-line); border-radius: 16px; background: var(--sub-surface); }
.sub-payment-history h3 { margin: 0 0 8px; color: var(--sub-ink); font-size: 17px; }
.sub-payment-history > p { margin: 8px 0 0; color: var(--sub-muted); font-size: 13px; }
.sub-balance-due { margin: 14px 16px 0; padding: 16px; border: 1px solid #eacf91; border-radius: 18px; background: #fff8e8; }
.sub-balance-due > small { color: #8a6415; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.sub-balance-due h3 { margin: 4px 0; color: var(--sub-ink); font-size: 27px; }
.sub-balance-due p { margin: 0 0 12px; color: var(--sub-muted); font-size: 13px; line-height: 1.45; }
.sub-balance-due .sub-button + .sub-button { margin-top: 8px; }
.sub-payment-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 11px 0; border-top: 1px solid var(--sub-line); }
.sub-payment-row:first-of-type { border-top: 0; }
.sub-payment-row > div { min-width: 0; }
.sub-payment-row b, .sub-payment-row small { display: block; }
.sub-payment-row b { color: var(--sub-ink); font-size: 14px; }
.sub-payment-row small { margin-top: 3px; color: var(--sub-muted); font-size: 12px; }
.sub-payment-row > strong { flex: none; color: var(--sub-ink); font-size: 15px; }
.sub-intro-manage { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 48px; margin-top: 18px; border: 1px solid var(--sub-teal-tint-2); border-radius: 14px; background: #fff; color: var(--sub-teal-dark); font: 800 13.5px Outfit, system-ui, sans-serif; cursor: pointer; }
.sub-manage-hero { margin: 14px 16px; padding: 18px; border-radius: 22px; background: linear-gradient(145deg, #123d39, #092d2d 58%, #061f23); color: #fff; box-shadow: 0 14px 30px rgba(6,31,35,.15); }
.sub-manage-hero > span { color: #9cffe1; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.sub-manage-hero h2 { margin: 7px 0 5px; color: #fff; font-size: 23px; }
.sub-manage-hero p { margin: 0; color: rgba(239,255,250,.74); font-size: 12px; }
.sub-manage-hero b { display: inline-block; margin-top: 13px; padding: 5px 10px; border: 1px solid rgba(156,255,225,.22); border-radius: 999px; background: rgba(156,255,225,.12); color: #b6ffe9; font-size: 11px; text-transform: capitalize; }

.sub-mgr-cards { display: flex; gap: 12px; padding: 10px 16px; overflow-x: auto; }
.sub-mgr-cards::-webkit-scrollbar { display: none; }
.sub-mcard { flex: none; width: 240px; padding: 14px; border-radius: 16px; background: var(--sub-surface); box-shadow: 0 2px 10px rgba(6, 63, 62, .08); }
.sub-mcard-th { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 76px; margin-bottom: 10px; border-radius: 12px; background: var(--sub-teal-tint); color: var(--sub-teal); }
.sub-mcard-th .sub-vm { position: absolute; top: 8px; left: 8px; }
.sub-mcard-dt { font-size: 13px; font-weight: 600; }
.sub-mcard h3 { margin: 2px 0 6px; font-size: 15px; }
.sub-mcard-meta,
.sub-mcard-del { margin: 0; color: var(--sub-muted); font-size: 12px; }
/* A dish added to this meal. It shares the visit, so it sits inside the meal's card instead of
   appearing as a second card on the same date and time. */
.sub-mcard-extra { margin: 2px 0 0; color: var(--sub-teal-dark); font-size: 12px; font-weight: 600; }
.sub-mcard-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sub-line); color: var(--sub-teal); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }

.sub-mlist { margin: 8px 16px 16px; overflow: hidden; border-radius: 16px; background: var(--sub-surface); }
.sub-mlist button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; border-bottom: 1px solid var(--sub-line); background: none; color: var(--sub-ink); font-size: 15px; text-align: left; cursor: pointer; }
.sub-mlist button:last-child { border-bottom: 0; }
.sub-mlist-ic { display: inline-flex; color: var(--sub-muted); }
.sub-mlist-chev { margin-left: auto; color: var(--sub-faint); }
.sub-mlist button.danger,
.sub-mlist button.danger .sub-mlist-ic { color: var(--sub-red); }

.sub-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.sub-chips::-webkit-scrollbar { display: none; }
.sub-chip { flex: none; padding: 11px 14px; border: 1px solid var(--sub-line); border-radius: 10px; background: var(--sub-surface); color: var(--sub-ink); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.sub-chip.sel { border-color: var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); }

.sub-optional { margin-left: 6px; color: var(--sub-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }

/* Meals & cooking time: one collapsed row per chosen meal showing its time, expanding to the
   time chips on tap. Keeps the card to a few lines however many meals are selected. */
.sub-timelist { margin-top: 12px; border: 1px solid var(--sub-line); border-radius: 12px; overflow: hidden; }
.sub-timerow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 13px; border: 0; border-top: 1px solid var(--sub-line); background: var(--sub-surface); color: var(--sub-ink); font-size: 14px; text-align: left; cursor: pointer; }
.sub-timelist > .sub-timerow:first-child { border-top: 0; }
.sub-timerow > span { flex: 1; text-transform: capitalize; }
.sub-timerow > b { color: var(--sub-teal-dark); font-size: 14px; font-weight: 700; }
.sub-timerow > svg { flex: none; color: var(--sub-muted); transition: transform .15s ease; }
.sub-timerow.open { background: var(--sub-teal-tint); }
.sub-timerow.open > svg { transform: rotate(180deg); }
.sub-timechips { padding: 10px 13px 12px; background: var(--sub-teal-tint); }

/* Two-way choice on one row (veg / veg + non-veg) instead of two full-width chips. */
.sub-seg { display: flex; gap: 6px; margin-top: 12px; padding: 4px; border-radius: 12px; background: var(--sub-cream); }
.sub-seg-btn { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 9px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--sub-muted); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sub-seg-btn.sel { background: var(--sub-surface); color: var(--sub-teal-dark); box-shadow: 0 1px 3px rgba(6, 63, 62, .12); }

/* Staple tag + combo composition, shown wherever a dish is named. */
.sub-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.sub-combo-line { display: block; margin-top: 3px; color: var(--sub-muted); font-size: 11px; line-height: 1.35; }
/* The dish's own one-liner under its name — clamped to a single line so a long description
   never pushes the price out of a plan card. */
.sub-dish-desc { display: block; overflow: hidden; margin: 3px 0; color: var(--sub-muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.sub-chip .sub-vm { margin-right: 4px; vertical-align: middle; }

.sub-addr { display: flex; gap: 10px; }
/* Inside a sheet the address needs its own box, or it reads as loose text colliding with the
   note under it. */
.sub-addrbox { margin-bottom: 12px; padding: 12px; border: 1px solid var(--sub-line); border-radius: 12px; }
.sub-grouplbl-row { align-items: baseline; }
.sub-grouplbl-row .sub-grouplbl { margin-bottom: 0; }

/* An unfilled selecter has to look pressable: tinted, teal-bordered, with a hint. */
.sub-selecter:not(.complete) { border-color: var(--sub-teal); border-style: solid; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-weight: 700; }
.sub-selecter em { margin-left: auto; color: var(--sub-teal); font-size: 11px; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* The card that blocks payment until it is filled. */
.sub-card-required { border: 1.5px solid var(--sub-teal); box-shadow: 0 2px 10px rgba(7, 148, 147, .12); }
.sub-req-tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sub-teal-tint); color: var(--sub-teal-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.sub-addr-ic { flex: none; color: var(--sub-muted); }
.sub-addr b { font-size: 14px; }
.sub-addr p { margin: 2px 0 0; color: var(--sub-muted); font-size: 12.5px; }

.sub-reason { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; cursor: pointer; }
.sub-cbx { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--sub-teal); border-radius: 5px; color: var(--sub-teal); font-size: 13px; font-weight: 700; }

.sub-faq { border-bottom: 1px solid var(--sub-line); }
.sub-faq summary { display: flex; justify-content: space-between; padding: 14px 0; font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.sub-faq summary::-webkit-details-marker { display: none; }
.sub-faq p { padding-bottom: 14px; color: var(--sub-muted); font-size: 13px; }

.sub-dish-pick { position: relative; display: block; width: 100%; margin-bottom: 10px; padding: 12px; border: 1.5px solid var(--sub-line); border-radius: 14px; background: var(--sub-surface); color: var(--sub-ink); text-align: left; cursor: pointer; }
.sub-dish-pick.sel { border-color: var(--sub-teal); background: var(--sub-teal-tint); }
.sub-dish-pick h4 { margin: 6px 0 3px; padding-right: 26px; font-size: 14px; font-weight: 600; }
.sub-chk { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid #c4d2ce; border-radius: 50%; }
.sub-dish-pick.sel .sub-chk { border-color: var(--sub-teal); background: var(--sub-teal); }
.sub-dish-pick.sel .sub-chk::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; }
/* Add sits beside the radio rather than replacing it: the same row either becomes this meal's
   dish or joins it as a second one. The button overlays the row's bottom-right corner so the
   choice list keeps its single-column rhythm. */
.sub-dish-choice { position: relative; }
.sub-dish-choice .sub-mini-button,
.sub-dish-choice .sub-added-tag { position: absolute; right: 10px; bottom: 20px; }
.sub-dish-choice .sub-dish-pick { padding-right: 76px; }
.sub-dish-choice.added .sub-dish-pick { background: var(--sub-cream); cursor: default; }
.sub-dish-choice.added .sub-chk { display: none; }
.sub-cart-choice { position: static; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 9px; padding: 10px; border: 1px solid var(--sub-line); border-radius: 14px; background: var(--sub-surface); }
.sub-cart-choice.added { border-color: var(--sub-teal-tint-2); background: #f8fcfb; }
.sub-cart-choice > img { width: 58px; height: 58px; border-radius: 10px; background: var(--sub-teal-tint); object-fit: cover; }
.sub-cart-choice .sub-mini-button { position: static; }
.sub-cart-dish-copy { min-width: 0; }
.sub-cart-dish-copy .sub-vm { float: left; margin: 2px 6px 0 0; }
.sub-cart-dish-copy h4 { margin: 0 0 3px; font-size: 14px; }
.sub-cart-dish-copy .sub-dish-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-added-tag { padding: 5px 9px; border-radius: 9px; background: var(--sub-teal-tint-2); color: var(--sub-teal-dark); font-size: 11px; font-weight: 700; }

/* Dishes already added to the meal being edited. */
.sub-extra-list { display: grid; gap: 8px; }
.sub-extra-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--sub-line); border-radius: 12px; background: var(--sub-surface); }
.sub-extra-row b { display: block; font-size: 14px; }
.sub-extra-row small { color: var(--sub-muted); font-size: 12px; }
/* Portions of one dish, rather than the same dish listed twice. */
.sub-qty-row { display: flex; align-items: center; gap: 6px; }
.sub-qty-row > b { min-width: 16px; font-size: 14px; text-align: center; }
.sub-primary-qty { margin-bottom: 4px; border-color: var(--sub-teal-tint-2); background: var(--sub-teal-tint); }

.sub-sheet-actions { display: flex; gap: 10px; }
.sub-sheet-actions .sub-button { flex: 1 1 0; min-width: 0; padding-inline: 8px; }

/* The meal being edited, pinned above the move / dish controls in its sheet. */
.sub-mgr-current { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; padding: 12px; border-radius: 12px; background: var(--sub-teal-tint); }
.sub-mgr-current b { font-size: 14px; }
.sub-mgr-current p { margin: 3px 0 0; color: var(--sub-muted); font-size: 12.5px; text-transform: capitalize; }
.sub-mgr-current .sub-vm { margin-top: 3px; }

.sub-toast { position: fixed; bottom: 24px; left: 50%; z-index: 80; padding: 10px 16px; border-radius: 999px; background: var(--sub-ink); color: #fff; font-size: 13px; opacity: 0; transform: translateX(-50%); transition: opacity .3s ease; }
.sub-toast.show { opacity: 1; }

/* Wireframe "selecter": one-line picker row used for dates and add-address. */
.sub-selecter { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border: 1px solid var(--sub-line); border-radius: 12px; background: var(--sub-surface); color: var(--sub-ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.sub-selecter svg { flex: none; color: var(--sub-teal-dark); }
.sub-selecter svg:last-child { color: var(--sub-muted); }
.sub-selecter.complete { border-color: var(--sub-teal); background: var(--sub-teal-tint); color: var(--sub-teal-dark); }
.sub-selecter-add { border-style: dashed; color: var(--sub-teal); }
.sub-selecter-add svg { color: currentColor; }

.sub-endstate { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.sub-endstate-icon { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 16px; border-radius: 50%; background: var(--sub-cream); color: var(--sub-muted); }
.sub-endstate h2 { font-size: 22px; }
.sub-endstate p { max-width: 300px; margin-top: 8px; color: var(--sub-muted); font-size: 14px; line-height: 1.55; }

@media (max-width: 600px) {
  .sub-mode-grid,
  .sub-grid-2 { grid-template-columns: 1fr; }
  .sub-mode { min-height: auto; }
  /* Benefits keep their 2×2 grid on phones: four short, centred labels read better
     than four full-width rows. */
  .sub-sheet-dish { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 9px; }
  .sub-sheet-dish img { width: 58px; height: 58px; }
  .sub-day-dish { grid-template-columns: 66px minmax(0, 1fr) auto; gap: 10px; }
  .sub-day-dish > img { width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .qwikly-subscription-shell * { scroll-behavior: auto !important; transition: none !important; }
}