* { box-sizing: border-box; }
:root {
  --bg: #fffaf3;
  --card: #ffffff;
  --text: #222;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 12px 28px rgba(0,0,0,.14);
  --accent: #7c3aed;
  --accent-contrast: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e0f12; --card:#15181b; --text:#e5e7eb; --muted:#9aa3af; --border:#22262b; --shadow:0 12px 28px rgba(0,0,0,.5); }
}
html[data-theme="light"] { --bg:#fffaf3; --card:#fff; --text:#222; --muted:#6b7280; --border:#e5e7eb; --shadow:0 12px 28px rgba(0,0,0,.14); }
html[data-theme="dark"]  { --bg:#0e0f12; --card:#15181b; --text:#e5e7eb; --muted:#9aa3af; --border:#22262b; --shadow:0 12px 28px rgba(0,0,0,.5); }
/* Dark mode compatibility: support `.dark` class same as data-theme="dark" */
html.dark {--bg:#0e0f12; --card:#15181b; --text:#e5e7eb; --muted:#9aa3af; --border:#22262b; --shadow:0 12px 28px rgba(0,0,0,.5);
}


body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; margin: 0; color: var(--text); background: var(--bg); }

header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
h1 { margin: 0; font-size: 1.6rem; display: flex; align-items: center; gap: 8px; }
#progress { opacity: .85; }

.icon-btn, .buttons button, .cta, .secondary { box-shadow: var(--shadow); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; display: grid; place-items: center; }

#stage { position: relative; width: min(92vw, 380px); height: 500px; margin: 10px auto 6px; perspective: 1000px; }
#card-container { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #f3f3f3; touch-action: none; }

.card { position: relative; position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; background: var(--card); }
.card img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* Title overlay on image */
.card .overlay { position: absolute; left: 0; right: 0; bottom: 64px; padding: 12px 14px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); color: #fff; }
.card .overlay h3 { margin: 0; font-size: 1.1rem; text-shadow: 0 2px 6px rgba(0,0,0,.4); }

.card .meta { padding: 12px 14px; text-align: left; background: var(--card); border-top: 1px solid var(--border); }
.meta p  { margin: 0; opacity: .85; font-size: .9rem; color: var(--muted); }

.buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 12px 0 22px; }
.buttons button { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border); font-size: 1.6rem; cursor: pointer; background: var(--card); transition: transform .08s ease, box-shadow .2s; }
.buttons button:active { transform: scale(.96); }

#plan, #shopping-list { padding: 0 18px 24px; }


.hidden { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); border: 0; }

/* Swipe stamps */
.stamp { position: absolute; z-index: 10; top: 18px; padding: 5px 12px; border: 3px solid; border-radius: 6px; font-weight: 800; letter-spacing: 2px; transform: rotate(-18deg); opacity: 0; pointer-events: none; }
.stamp.like { left: 18px; color: #1a7f37; border-color: currentColor; }
.stamp.nope { right: 18px; color: #c62828; border-color: currentColor; transform: rotate(18deg); }

/* Animations */
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card.enter { animation: pop .18s ease-out; }

/* Panels & lists */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#plan-cta button, .final-card button, .cta { border: none; padding: 10px 14px; border-radius: 12px; background: var(--accent); color: var(--accent-contrast); font-weight: 500; cursor: pointer; }
.secondary { border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.panel { margin: 12px 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.grid-list { list-style: none; padding: 8px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
.grid-list li { display: flex; align-items: center; gap: 8px; }
.grid-list input[type="checkbox"] { width: 16px; height: 16px; }

#ingredients-by-meal .meal { margin: 10px 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; }
#ingredients-by-meal h4 { margin: 0 0 6px; }

/* Tooltips */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%) translateY(0); background: rgba(0,0,0,0.8); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.tooltip.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* Print-friendly */
@media print { header, #stage, .buttons, .cta, .list-actions { display: none!important; } body { background: #fff; color: #000; } }


/* Inline version footer */
.app-footer {
  text-align: center;
  font-size: 0.85rem;
  color: #888;
  margin: 32px 0 16px;
}

/* Hide footer in standalone PWA mode */
@media all and (display-mode: standalone) {
  .app-footer { display: none; }
}

/* Header layout */
header{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn{ background: transparent; border: 0; padding: 6px 8px; font-size: 18px; cursor: pointer; }
.plan-progress{ margin: 6px 0 12px; color: #6b7280; font-weight: 500; }
/* Hide install button in standalone PWAs */
@media all and (display-mode: standalone){ #install-help{ display:none !important; } }


/* Install help overlay (ensured) */
.install-help { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); z-index: 9999; }
.install-help.hidden { display: none !important; }
.install-card { max-width: 520px; width: calc(100% - 32px); background: var(--card-bg,#fff); color: inherit; border-radius: 16px; padding: 16px 18px 18px; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.install-card .row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.install-card h3 { margin:0; font-size:1.1rem; }
.install-card .close { border:none; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; }
@media (prefers-color-scheme: dark){ .install-card{ --card-bg:#1f1f1f; } }


/* === Install panel accessibility pass (high-contrast, theme-aware) === */
.install-card { 
  background: var(--card);
  color: var(--text);
}
.install-card h3,
.install-card p,
.install-card li,
.install-card ol,
.install-card strong,
.install-card em { 
  color: var(--text);
}
.install-card a { 
  color: var(--accent);
  text-decoration: underline;
}
.install-card .close { 
  color: var(--text);
}
.install-card .close:focus-visible,
.install-card button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

header { padding-top: calc(16px + env(safe-area-inset-top)); }



/* Title overlay gradient (bottom) */
.card .overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  color: #fff;
}
.card .overlay::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; top: -40%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  z-index: 0;
}
.card .overlay > * {
  position: relative;
  z-index: 1;
}
.card .overlay h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  padding-left: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}



/* --- Your Plan: chips (minimal) --- */
#selected-meals { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#selected-meals li { margin: 0; padding: 0; }
#selected-meals .chip {
  display: inline-block; max-width: 100%;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#selected-meals .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#selected-meals .chip:active { transform: scale(.98); }



/* === Enhanced Chip Style Test (Oct 2025) === */
/* Added: 2025-10-24 · 16:01 */

#selected-meals {
  list-style: none;
  margin: 10px 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}

#selected-meals li { margin: 0; padding: 0; }

#selected-meals .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#selected-meals .chip:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

#selected-meals .chip:active {
  transform: translateY(0);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.25) inset,
    0 4px 8px rgba(0,0,0,0.3);
}

#selected-meals .chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#selected-meals.compact .chip {
  padding: 5px 12px;
  font-size: 0.9rem;
  opacity: 0.95;
}


/* Updated chip font weight & padding — 2025-10-24 · 16:04 */


/* === Chip remove affordance (inline '×', refined) === */
#selected-meals .chip {
  position: relative;
  padding-right: 30px; /* breathing room for the × */
}

#selected-meals .chip::after {
  content: "×";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(.95);
  opacity: 0.55;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1;
  pointer-events: none; /* tap still removes via the chip button */
  transition: opacity .12s ease, transform .12s ease, text-shadow .12s ease;
}

#selected-meals .chip:hover::after,
#selected-meals .chip:focus-visible::after {
  opacity: 0.85;
  transform: translateY(-50%) scale(1);
  text-shadow: 0 0 4px rgba(255,255,255,0.15);
}

/* Compact layout keeps the affordance aligned */
#selected-meals.compact .chip { padding-right: 26px; }


/* Filter wrapper spacing tweak to avoid header jank */
#filters-wrapper { margin-top: 6px !important; margin-bottom: 12px !important; }


/* === FILTER BAR POLISH: center + pill chips === */
#filters-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.filter-panel {
  width: 100%;
  max-width: 920px !important;
  margin: 8px auto 12px !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: rgba(255,255,255,0.08) !important; /* subtle for dark mode */
  backdrop-filter: saturate(140%) blur(2px);
}

.filter-section h3 {
  margin: 8px 0 6px !important;
}

.filter-group {
  justify-content: flex-start;
}

.filter-group .chip {
  border-radius: 9999px !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.18) !important;
  color: var(--chip-text, #f0f0f0) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.filter-group .chip.active {
  background: linear-gradient(90deg, #ff8a00, #e52e71) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.chip.clear {
  background: rgba(255,255,255,0.25) !important;
  color: #111 !important;
}

.radio-chip span {
  border-radius: 9999px !important;
  padding: 8px 16px !important;
}

.toggle-filters {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* === END FILTER BAR POLISH === */


/* === FILTER VISUAL POLISH v1 === */
#filters-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 16px auto 14px;
}

.toggle-filters {
  background: linear-gradient(90deg, #ff8a00, #e52e71) !important;
  color: #fff !important;
  border: none;
  border-radius: 9999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.2s ease;
  margin-bottom: 10px;
}
.toggle-filters:hover { filter: brightness(1.1); transform: translateY(-1px); }

.filter-panel {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 18px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: saturate(150%) blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.filter-section {
  margin-bottom: 12px;
}

.filter-section h3 {
  font-size: 1rem;
  text-align: left;
  color: #fff;
  margin: 10px 0 6px 8px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.filter-group .chip {
  border-radius: 9999px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.12);
  color: #f0f0f0;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}
.filter-group .chip:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.filter-group .chip.active {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  color: #fff;
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

.radio-chip input {
  display: none;
}
.radio-chip span {
  border-radius: 9999px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.12);
  color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.radio-chip input:checked + span {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  color: #fff;
  border: none;
}

.chip.clear {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 9999px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.chip.clear:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
/* === END FILTER VISUAL POLISH v1 === */


/* === FILTER POLISH v2 (left-aligned chips, spacing, clarity) === */

/* 1) Filters button: lighten shadow a touch */
.toggle-filters {
  box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

/* 2) Panel breathing room */
.filter-panel {
  padding-top: 24px !important;
  padding-bottom: 20px !important;
}

/* 3) Left-align chip rows for better scanability and wrap behavior */
.filter-group {
  justify-content: flex-start !important;
}

/* Inactive chips slightly brighter with gentle border for definition */
.filter-group .chip {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Active state already gradient; keep it crisp */
.filter-group .chip.active {
  border: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.28) !important;
}

/* 4) Clear button: subtle danger tint so it reads as an action */
.chip.clear {
  background: rgba(255,77,77,0.20) !important;
  border: 1px solid rgba(255,77,77,0.30) !important;
  color: #fff !important;
}
.chip.clear:hover {
  background: rgba(255,77,77,0.35) !important;
}

/* Optional micro-anim without changing layout (keeps display:none behavior) */
.filter-panel:not(.hidden) {
  animation: filterFadeIn 180ms ease-out;
}
@keyframes filterFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === END FILTER POLISH v2 === */


/* === FILTER SPACING + CLEAR HOVER (final micro-pass) === */
/* More breathing room under section headings */
.filter-section h3 { margin-bottom: 10px !important; }
/* Extra separation before footer actions */
.filter-footer { margin-top: 14px !important; }
/* Clear button hover feedback */
.chip.clear:hover {
  filter: brightness(1.2) !important;
  box-shadow: 0 2px 6px rgba(255,77,77,0.2) !important;
  transform: translateY(-1px);
}
/* === END micro-pass === */


/* === HARMONIZE MEAL TYPE RADIO CHIP STYLE === */
.radio-chip span {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  padding: 8px 14px !important;
  display: inline-block !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #f0f0f0 !important;
  transition: all 0.2s ease !important;
}

.radio-chip span:hover {
  background: rgba(255,255,255,0.25) !important;
  transform: translateY(-1px);
}

.radio-chip input:checked + span {
  background: linear-gradient(90deg, #ff8a00, #e52e71) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px);
}
/* === END RADIO CHIP STYLE HARMONIZATION === */


/* === CHIP TYPOGRAPHY HARMONIZATION === */
/* Ensure radio-chip and button chips share identical text sizing & box metrics */
.filter-group .chip {
  font-size: 0.95rem !important;
  line-height: 1.15 !important;
  padding: 8px 16px !important;
}

.radio-chip span {
  font-size: 0.95rem !important;
  line-height: 1.15 !important;
  padding: 8px 16px !important;
}
/* === END CHIP TYPOGRAPHY HARMONIZATION === */


/* === RADIO-CHIP FULL HARMONIZATION (match .chip buttons exactly) === */
.radio-chip {
  display: inline-block !important;
  position: relative !important;
}
.radio-chip input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.radio-chip span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #f0f0f0 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.radio-chip input:checked + span {
  background: linear-gradient(90deg, #ff8a00, #e52e71) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) !important;
}
.radio-chip span:hover {
  background: rgba(255,255,255,0.25) !important;
  transform: translateY(-1px) !important;
}
/* === END RADIO-CHIP FULL HARMONIZATION === */


/* === LIGHT THEME TUNING FOR FILTERS === */
html[data-theme="light"] .filter-panel {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: var(--text) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .filter-section h3 {
  color: var(--text) !important;
}
html[data-theme="light"] .filter-group .chip {
  background: rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #333 !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .filter-group .chip:hover {
  background: rgba(0,0,0,0.09) !important;
}
html[data-theme="light"] .filter-group .chip.active {
  color: #fff !important; /* active stays gradient */
  box-shadow: 0 3px 6px rgba(0,0,0,0.18) !important;
}
html[data-theme="light"] .radio-chip span {
  background: rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #333 !important;
}
html[data-theme="light"] .radio-chip span:hover {
  background: rgba(0,0,0,0.09) !important;
}
html[data-theme="light"] .radio-chip input:checked + span {
  color: #fff !important;
}
html[data-theme="light"] .chip.clear {
  background: rgba(255,77,77,0.15) !important;
  border: 1px solid rgba(255,77,77,0.25) !important;
  color: #a00 !important;
}
html[data-theme="light"] .chip.clear:hover {
  background: rgba(255,77,77,0.22) !important;
  box-shadow: 0 2px 6px rgba(255,77,77,0.18) !important;
}
/* === END LIGHT THEME TUNING === */


/* === LIGHT THEME: restore vibrant active gradients to match dark mode === */
html[data-theme="light"] .filter-group .chip.active {
  background: linear-gradient(90deg, #ff8a00, #e52e71) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

html[data-theme="light"] .radio-chip input:checked + span {
  background: linear-gradient(90deg, #ff8a00, #e52e71) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* Slightly deepen inactive chip contrast for readability */
html[data-theme="light"] .filter-group .chip,
html[data-theme="light"] .radio-chip span {
  background: rgba(0,0,0,0.07) !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  color: #2b2b2b !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* Panel contrast closer to dark-mode feel */
html[data-theme="light"] .filter-panel {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
}

/* Headings readable in light */
html[data-theme="light"] .filter-section h3 { color: #1b1b1b !important; }
/* Clear button text color stronger */
html[data-theme="light"] .chip.clear { color: #7a1414 !important; }
/* === END LIGHT THEME VIBRANCY FIX === */


/* === Goal modal (clean) === */
.goal-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); z-index: 1000; }
.goal-modal.hidden { display: none !important; }
.goal-card { width: min(520px, calc(100% - 32px)); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.goal-card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.goal-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 8px 0 12px; }
.goal-chip { border-radius: 9999px; padding: 10px 16px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; font-weight: 600; }
.goal-chip.active { background: linear-gradient(90deg, #ff8a00, #e52e71); color: #fff; border: none; }
.goal-actions { display: flex; justify-content: center; }


/* === Deck progress (clean) === */
.deck-progress-wrap { display: flex; justify-content: center; }
.deck-progress { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); }
.deck-progress:hover { box-shadow: 0 6px 18px rgba(0,0,0,.25); }


/* === Your Plan preview cards grid === */
#plan #selected-meals.summary-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, 130px);
  gap:10px;
  max-width:720px;
  margin:8px auto 0;
  justify-content: center;

}
#plan #selected-meals .summary-card{
  position:relative;
  height:180px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
#plan #selected-meals .summary-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
#plan #selected-meals .summary-card img{ width:100%; height:100px; object-fit:cover; display:block; }
#plan #selected-meals .summary-card .title{ padding:8px; font-size:.9rem; line-height:1.2; text-align:center; }
#plan #selected-meals .summary-card .remove{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; border:1px solid var(--border);
  background: color-mix(in oklab, #000 35%, transparent); color:#fff; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25); transition: transform .1s ease, opacity .1s ease;
}
#plan #selected-meals .summary-card .remove:hover{ transform:scale(1.06); opacity:.95; }

/* Final success card */
.final-card{
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center;
  padding:20px; border-radius:16px; border:1px solid var(--border);
  background:var(--card); color:var(--text); box-shadow:var(--shadow);
}
.final-card .final-check{ color: var(--accent); margin-bottom:8px; }


/* Confetti animation */
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:999; }
.confetti-piece{ position:absolute; width:8px; height:12px; border-radius:2px; top:-12px; }
@keyframes confetti-fall{
  to { transform: translate(var(--dx, 0px), 100vh) rotate(600deg); opacity:.9; }
}


/* Dark pill compatibility for `.dark` class */
html.dark #plan #selected-meals .summary-card .remove {
  background: var(--pill-bg-dark);
  border-color: color-mix(in oklab, var(--border) 75%, transparent);
}
html.dark #plan #selected-meals .summary-card .remove:hover {
  background: var(--pill-bg-dark-hover);
}


/* plan-cta layout */
#plan-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin-top:12px;
  text-align:center;
}
#plan-cta .muted{ color: var(--muted); }


/* Unify CTA hover/active across success card and Your Plan CTA */
#plan-cta button:hover, .final-card button:hover, .cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
#plan-cta button:active, .final-card button:active, .cta:active {
  transform: translateY(0);
  filter: none;
  box-shadow: var(--shadow);
}

/* Slightly larger size for these primary CTAs */
#plan-cta button, .final-card button {
  padding: 12px 18px;
  font-size: 1rem;
  border-radius: 12px;
}


/* === CTA cart icon refinement (non-invasive, replaces emoji with crisp SVG) === */
/* Targets only the primary CTAs: Your Plan section button + Final success card button */
#plan-cta button {
  position: relative;
  padding-left: 44px; /* room for icon at left */
}

/* Hide ONLY the very first glyph (emoji) visually, leaving text intact */
#plan-cta button::first-letter {
  color: transparent;
}

/* Inject high-contrast, currentColor SVG cart icon */
#plan-cta button::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: currentColor;  /* white on purple by default */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 7 18Zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18ZM3 3h2.2a1 1 0 0 1 .97.757L6.8 6H21a1 1 0 0 1 .97 1.243l-1.8 7.2A2 2 0 0 1 18.2 16H8.1a2 2 0 0 1-1.94-1.514L4.3 6.8 4 5H3a1 1 0 1 1 0-2Zm4.5 5 1.2 6h9.5l1.5-6H7.5Z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 7 18Zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18ZM3 3h2.2a1 1 0 0 1 .97.757L6.8 6H21a1 1 0 0 1 .97 1.243l-1.8 7.2A2 2 0 0 1 18.2 16H8.1a2 2 0 0 1-1.94-1.514L4.3 6.8 4 5H3a1 1 0 1 1 0-2Zm4.5 5 1.2 6h9.5l1.5-6H7.5Z'/></svg>") no-repeat center / contain;
  opacity: 0.98;
}