/* ===================================================================
   components.css — reusable UI components
   =================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-ink-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--color-ink-inverse);
}
.btn-accent {
  background: var(--color-accent);
  color: var(--color-ink);
}
.btn-accent:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary-soft);
}
.btn-ghost {
  background: transparent;
  color: var(--color-ink-soft);
}
.btn-ghost:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}
.btn-sm { padding: 6px 12px; font-size: var(--text-sm); min-height: 36px; }
.btn-lg { padding: 14px 24px; font-size: var(--text-lg); min-height: 52px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-tinted { background: var(--color-primary-soft); border-color: transparent; }
.card-accent { background: var(--color-accent-soft); border-color: transparent; }
.card-flush { padding: 0; overflow: hidden; }

/* ---------- Status pills / chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-border);
}
.chip-primary { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; }
.chip-accent { background: var(--color-accent-soft); color: #8a5a06; border-color: transparent; }
.chip-success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.chip-warn { background: var(--color-warn-soft); color: var(--color-warn); border-color: transparent; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: var(--space-6);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-lg);
  text-decoration: none;
}
.site-header__brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: white;
  display: grid; place-items: center;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.site-header__nav {
  display: flex; gap: var(--space-2); margin-left: auto;
}
.site-header__nav a {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 1100px) { .site-header__nav { display: none; } }
.site-header__nav a:hover { background: var(--color-surface); color: var(--color-ink); }
.site-header__nav a.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.site-header__right {
  display: flex; align-items: center; gap: var(--space-2);
}

/* ---------- Wallet / points / cart chips in header ---------- */
.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: default;
}
.balance-chip__icon {
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--color-primary);
  color: white;
}
.balance-chip__icon.accent { background: var(--color-accent); color: var(--color-ink); }
.balance-chip__label {
  color: var(--color-ink-mute);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.balance-chip__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-out);
}
.balance-chip__value.flash { color: var(--color-accent-hover); }

/* ---------- Lang toggle ---------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  color: var(--color-ink);
}
.lang-toggle:hover { background: var(--color-surface); }
.lang-popover {
  position: absolute;
  top: calc(var(--header-h) - 8px);
  right: var(--container-pad);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 180px;
  z-index: var(--z-dropdown);
}
.lang-popover button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--text-base);
  cursor: pointer;
  color: var(--color-ink);
  gap: var(--space-3);
}
.lang-popover button:hover { background: var(--color-surface); }
.lang-popover button.active { background: var(--color-primary-soft); color: var(--color-primary); }
.lang-popover button .lang-code {
  font-weight: 700;
  color: var(--color-primary);
  width: 28px;
}

/* ---------- Hero / page header ---------- */
.page-hero {
  padding: var(--space-10) 0 var(--space-6);
}
.page-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: var(--space-2);
}
.page-hero p { color: var(--color-ink-soft); max-width: 60ch; font-size: var(--text-lg); }

/* ---------- Status row (3-up) ---------- */
.status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .status-row { grid-template-columns: 1fr; } }
.status-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.status-card:hover { box-shadow: var(--shadow-md); }
.status-card .label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-mute);
  font-size: var(--text-xs);
  font-weight: 600;
}
.status-card .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.status-card .meta { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* progress ring */
.ring {
  --p: 50;
  --size: 64px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--color-primary) calc(var(--p) * 1%), var(--color-primary-soft) 0);
  display: grid;
  place-items: center;
}
.ring::before {
  content: '';
  width: calc(var(--size) - 14px);
  height: calc(var(--size) - 14px);
  background: var(--color-bg);
  border-radius: inherit;
}
.ring__inner {
  position: absolute;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Nudge banner ---------- */
.nudge {
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-primary-soft) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.nudge::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent), transparent 70%);
  opacity: 0.4;
}
.nudge__content { flex: 1 1 320px; position: relative; }
.nudge__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); margin-bottom: 4px; color: var(--color-ink); }
.nudge__body { color: var(--color-ink-soft); margin: 0; }
.nudge__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; position: relative; }

/* ---------- Department pill ---------- */
.dept-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dept-pill[data-dept="giftcards"] { background: var(--dept-giftcard-soft); color: var(--dept-giftcard); }
.dept-pill[data-dept="healthy"] { background: var(--dept-healthy-soft); color: var(--dept-healthy); }
.dept-pill[data-dept="gifts"] { background: var(--dept-gifts-soft); color: var(--dept-gifts); }

/* ---------- Item tile ---------- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1000px) { .item-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .item-grid { grid-template-columns: 1fr; } }

.item-tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.item-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.item-tile__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-tinted) 100%);
  display: grid; place-items: center;
  padding: var(--space-4);
}
.item-tile__media img, .item-tile__media svg { max-height: 100%; max-width: 100%; }
.item-tile__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.item-tile__brand { color: var(--color-ink-mute); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.item-tile__name { font-weight: 600; line-height: 1.3; }
.item-tile__price { color: var(--color-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.item-tile__alt { color: var(--color-ink-mute); font-size: var(--text-sm); }
.item-tile__cta { margin-top: auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-strong);
  color: rgba(255,255,255,0.85);
  margin-top: var(--space-20);
  padding: var(--space-12) 0 var(--space-8);
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: white; }
.site-footer .grid-4 { gap: var(--space-8); }
.site-footer h6 { color: white; margin-bottom: var(--space-3); }
.site-footer .small { font-size: var(--text-sm); color: rgba(255,255,255,0.65); }
.site-footer .lang-bar {
  background: var(--color-primary);
  padding: var(--space-3) 0;
  margin-top: var(--space-8);
}
.site-footer .lang-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
}

/* ---------- Toast ---------- */
.toast-host {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.toast {
  background: var(--color-ink);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 240px;
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast.success { background: var(--color-success); }
.toast.warn { background: var(--color-warn); }
@keyframes toast-in {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20,34,61,0.5);
  z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-4);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.modal {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 540px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  box-shadow: var(--shadow-xl);
  animation: modal-in var(--dur-base) var(--ease-out);
}
.modal-lg { max-width: 720px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Slider (pay mix) ---------- */
.pay-mix {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
}
.pay-mix__track {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  margin: var(--space-4) 0;
  overflow: hidden;
}
.pay-mix__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--color-primary);
  transition: width var(--dur-fast) var(--ease-out);
}
.pay-mix__legend { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-ink-soft); }
.pay-mix__legend strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* ---------- Confetti dot (used by survey complete) ---------- */
.confetti { position: absolute; width: 8px; height: 8px; border-radius: 2px; }