:root {
  --sr-green: #A2F0C2;
  --sr-green-dark: #4FBE88;
  --sr-gold: #C3A868;
  --sr-gold-dark: #A08A50;
  --sr-red: #C7292E;
  --sr-red-dark: #9E1F24;
  --sr-pink-bg: #FAE6E7;

  --bg: #E6E8EB;
  --card-bg: #FFFFFF;
  --border-soft: #E5E7EB;

  --text-dark: #1B2437;
  --text-gray: #495468;
  --text-muted: #8A93A6;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --shadow-card: 0 4px 18px rgba(27, 36, 55, 0.07);

  /* Chart marks: deeper brand green, validated for 3:1 contrast on white */
  --chart-mark: #2F9A66;
  --chart-grid: #E5E7EB;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text-dark);
  font-family: 'Quicksand', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- Page frame border ---------- */

.frame-border {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

.frame-top,
.frame-bottom {
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--sr-green) 0px,
    var(--sr-gold) 36px,
    var(--sr-red) 72px,
    var(--sr-green) 108px
  );
  box-shadow: 0 0 10px rgba(27, 36, 55, 0.12);
}

.frame-top { top: 0; }
.frame-bottom { bottom: 0; }

.frame-left,
.frame-right {
  top: 0;
  bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(
    180deg,
    var(--sr-green) 0px,
    var(--sr-gold) 36px,
    var(--sr-red) 72px,
    var(--sr-green) 108px
  );
  box-shadow: 0 0 10px rgba(27, 36, 55, 0.12);
}

.frame-left { left: 0; }
.frame-right { right: 0; }

@media (max-width: 420px) {
  .frame-top, .frame-bottom { height: 3px; }
  .frame-left, .frame-right { width: 3px; }
}

.app-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ---------- Brand header ---------- */

.brand {
  text-align: center;
  margin-bottom: 28px;
}

.logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.brand-logo-img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.brand-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

/* ---------- Pages ---------- */

.page {
  display: none;
}

.page.active {
  display: block;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Home menu cards ---------- */

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-card {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

.menu-card:hover, .menu-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 36, 55, 0.12);
  outline: none;
}

.menu-card:active {
  transform: translateY(0);
}

.menu-card-header {
  padding: 22px 24px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}

.hdr-green { background: var(--sr-green); }
.hdr-gold  { background: var(--sr-gold); }
.hdr-red   { background: var(--sr-red); color: #FFFFFF; }

.menu-card-body {
  padding: 22px 24px;
  color: var(--text-gray);
  font-size: 19px;
}

/* ---------- Detail pages ---------- */

.detail-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 26px 34px;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.detail-header h1,
.detail-header h2 {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.back-btn {
  flex-shrink: 0;
  background: #E4E6EA;
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}

.back-btn:hover, .back-btn:focus-visible {
  background: #D5D8DE;
}

hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 22px 0;
}

h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-dark);
}

/* ---------- Forms ---------- */

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stack-form label {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 10px;
}

.stack-form input,
.stack-form select,
.stack-form textarea {
  font: inherit;
  font-size: 17px;
  padding: 13px 14px;
  border: 1px solid #D7DAE1;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--text-dark);
  width: 100%;
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus {
  outline: none;
  border-color: var(--sr-green-dark);
  box-shadow: 0 0 0 3px rgba(79, 190, 136, 0.2);
}

.stack-form textarea {
  resize: vertical;
  min-height: 88px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 15px 20px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 16px;
  transition: filter .15s ease, transform .1s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-green {
  background: var(--sr-green);
  color: var(--text-dark);
}
.btn-green:hover { filter: brightness(0.95); }

.btn-gold {
  background: var(--sr-gold);
  color: var(--text-dark);
}
.btn-gold:hover { filter: brightness(0.95); }

.btn-red {
  background: var(--sr-red);
  color: #FFFFFF;
}
.btn-red:hover { filter: brightness(1.08); }

.btn-pill {
  margin-top: 0;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Item lists (reminders / grocery / contacts / requests) ---------- */

.item-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.empty-msg {
  color: var(--text-muted);
  font-size: 17px;
  margin: 0;
}

.italic { font-style: italic; }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FAFBFC;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.list-row .row-main {
  min-width: 0;
}

.list-row .row-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-dark);
}

.list-row .row-sub {
  font-size: 15px;
  color: var(--text-gray);
  margin-top: 2px;
}

.row-remove {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.row-remove:hover {
  background: var(--sr-pink-bg);
  border-color: var(--sr-red);
  color: var(--sr-red);
}

/* ---------- Pharmacy options ---------- */

.option-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 6px;
}

.option-card {
  text-align: left;
  background: #FAFBFC;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s ease, background .15s ease;
}

.option-card:hover, .option-card.open {
  border-color: var(--sr-red);
  background: #FFF6F6;
}

.option-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
}

.option-desc {
  font-size: 16px;
  color: var(--text-gray);
  margin-top: 4px;
}

.sub-panel {
  display: none;
  margin-top: 20px;
  padding-top: 4px;
}

.sub-panel.active {
  display: block;
}

/* ---------- Emergency page ---------- */

.emergency-box {
  background: var(--sr-pink-bg);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 18px;
}

.emergency-title {
  color: var(--sr-red);
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 14px;
}

.emergency-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 14px 14px;
}

.emergency-name,
.emergency-sub {
  white-space: nowrap;
}

.emergency-row + .emergency-row {
  margin-top: 12px;
}

.emergency-name {
  font-weight: 700;
  font-size: 18px;
}

.emergency-sub {
  font-size: 15px;
  color: var(--text-gray);
}

/* ---------- Help & support ---------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 6px;
}

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FAFBFC;
  border: none;
  text-align: left;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 18px 20px;
  cursor: pointer;
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
  color: var(--text-muted);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  color: var(--text-gray);
  font-size: 16px;
  padding: 0 20px;
}

.faq-item.open .faq-answer {
  padding: 4px 20px 18px;
}

.support-box {
  background: #F1F2F5;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}

.support-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}

.support-desc {
  color: var(--text-gray);
  font-size: 16px;
  margin-bottom: 14px;
}

/* ---------- Utility ---------- */

.hidden {
  display: none !important;
}

/* ---------- Auth gate ---------- */

body.gate-open {
  overflow: hidden;
}

.auth-gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px 26px 34px;
  text-align: center;
}

.logo-wrap.small {
  margin-bottom: 4px;
}

.logo-wrap.small .brand-logo-img {
  width: 90px;
  height: 90px;
}

.auth-heading {
  font-size: 24px;
  font-weight: 700;
  margin: 4px 0 8px;
}

.auth-sub {
  color: var(--text-gray);
  font-size: 16px;
  margin: 0 0 22px;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  background: #F1F2F5;
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 22px;
}

.auth-tab,
.catalog-tab {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-gray);
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.auth-tab.active,
.catalog-tab.active {
  background: var(--card-bg);
  color: var(--text-dark);
  box-shadow: 0 2px 8px rgba(27, 36, 55, 0.1);
}

.auth-panel {
  display: none;
  text-align: left;
}

.auth-panel.active {
  display: block;
}

.auth-panel .stack-form .btn {
  width: 100%;
}

.auth-error {
  color: var(--sr-red);
  font-size: 15px;
  font-weight: 600;
  min-height: 20px;
  margin: 10px 0 0;
}

.auth-note {
  color: var(--text-muted);
  font-size: 14px;
  margin: 10px 0 0;
}

.auth-guest-copy {
  color: var(--text-gray);
  font-size: 17px;
  margin: 4px 0 18px;
}

#authPanelGuest .btn {
  width: 100%;
}

#authPanelGuest .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Account bar ---------- */

.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-gray);
}

.account-signout {
  flex-shrink: 0;
  background: #E4E6EA;
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.account-signout:hover {
  background: #D5D8DE;
}

/* ---------- Local widget (clock / weather / map) ---------- */

.local-widget {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-bottom: 20px;
  text-align: center;
}

.local-time {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.1;
}

.local-date {
  font-size: 17px;
  color: var(--text-gray);
  margin-top: 2px;
}

.local-tz {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 2px;
}

.local-weather {
  margin-top: 16px;
}

.weather-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.weather-icon {
  font-size: 34px;
  line-height: 1;
}

.weather-temp {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
}

.weather-desc {
  font-size: 15px;
  color: var(--text-gray);
}

.weather-refresh {
  margin-top: 10px;
  background: transparent;
  border: none;
  color: var(--sr-gold-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}

.location-msg {
  color: var(--text-muted);
  font-size: 15px;
}

.local-map {
  margin-top: 16px;
}

.map-frame-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

.map-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: none;
}

/* ---------- Chat assistant ---------- */

.chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--sr-red);
  color: #FFFFFF;
  font-size: 26px;
  box-shadow: 0 6px 20px rgba(27, 36, 55, 0.25);
  cursor: pointer;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}

.chat-fab:hover {
  transform: scale(1.06);
}

.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: min(360px, calc(100vw - 40px));
  height: min(500px, calc(100vh - 140px));
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(27, 36, 55, 0.3);
  z-index: 45;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sr-red);
  color: #FFFFFF;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}

.chat-close {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FAFBFC;
}

.msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
}

.msg-bot {
  align-self: flex-start;
  background: #EFF1F4;
  color: var(--text-dark);
  border-bottom-left-radius: 4px;
}

.msg-user {
  align-self: flex-end;
  background: var(--sr-green);
  color: var(--text-dark);
  border-bottom-right-radius: 4px;
}

.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
}

.chat-chip {
  background: #F1F2F5;
  border: 1px solid var(--border-soft);
  color: var(--text-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.chat-chip:hover {
  background: #E4E6EA;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.chat-input-row input {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid #D7DAE1;
  border-radius: var(--radius-sm);
}

.chat-input-row input:focus {
  outline: none;
  border-color: var(--sr-green-dark);
}

.chat-send {
  margin-top: 0;
  padding: 10px 18px;
  font-size: 15px;
}

@media (max-width: 420px) {
  .chat-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 84px;
  }
  .chat-fab {
    right: 16px;
    bottom: 16px;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  margin-top: 36px;
  color: var(--text-muted);
  font-size: 15px;
}

.site-footer p {
  margin: 4px 0;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--text-dark);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Responsive ---------- */

@media (max-width: 420px) {
  body { font-size: 17px; }
  .app-shell { padding: 24px 14px 48px; }
  .brand-name { font-size: 25px; }
  .detail-header h1, .detail-header h2 { font-size: 25px; }
  .menu-card-header { font-size: 21px; padding: 18px 20px; }
  .menu-card-body { padding: 18px 20px; font-size: 17px; }
  .detail-card { padding: 22px 18px 28px; }
}

/*
 * Note: dark-mode (prefers-color-scheme) support was intentionally
 * removed so the light gray background stays consistent for every
 * visitor, regardless of their system theme setting.
 */

/* ---------- Footer links ---------- */

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px !important;
}

.footer-links a,
.footer-link-btn {
  color: var(--sr-gold-dark);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
}

.footer-links a:hover,
.footer-link-btn:hover {
  text-decoration: underline;
}

.auth-links {
  margin-top: 18px;
  font-size: 14px;
}

/* ---------- Survey notice (shown after sign-in) ---------- */

.survey-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border-left: 6px solid var(--sr-gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 20px;
  animation: fadeIn .25s ease;
}

.survey-notice[hidden] {
  display: none;
}

.survey-notice-text {
  flex: 1;
  font-size: 16px;
  color: var(--text-gray);
}

.survey-notice-text strong {
  display: block;
  color: var(--text-dark);
  font-size: 17px;
}

.survey-notice-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.survey-notice-actions .btn {
  margin-top: 0;
}

.btn-quiet {
  background: #E4E6EA;
  color: var(--text-dark);
}
.btn-quiet:hover { background: #D5D8DE; }

/* ---------- Survey modal ---------- */

body.survey-open {
  overflow: hidden;
}

.survey-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(27, 36, 55, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 16px;
  animation: fadeIn .2s ease;
}

.survey-card {
  width: 100%;
  max-width: 520px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(27, 36, 55, 0.3);
  overflow: hidden;
}

.survey-stripe {
  height: 8px;
  background: linear-gradient(90deg, var(--sr-green), var(--sr-gold), var(--sr-red));
}

.survey-body {
  padding: 24px 24px 28px;
}

.survey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.survey-head h2 {
  font-size: 26px;
  margin: 0;
  line-height: 1.2;
}

.survey-sub {
  color: var(--text-gray);
  font-size: 16px;
  margin: 6px 0 4px;
}

.survey-close {
  flex-shrink: 0;
  background: #E4E6EA;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
  color: var(--text-dark);
  cursor: pointer;
}

.survey-close:hover { background: #D5D8DE; }

.survey-q {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 16px 18px;
  margin: 18px 0 0;
}

.survey-q legend {
  padding: 0;
  float: left;
  width: 100%;
}

.survey-q legend + * {
  clear: both;
}

.survey-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.survey-tag.tag-green { background: var(--sr-green); }
.survey-tag.tag-gold  { background: var(--sr-gold); }
.survey-tag.tag-red   { background: var(--sr-red); color: #FFFFFF; }

.survey-question {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.rating-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.rating-row label {
  flex: 1;
  position: relative;
}

.rating-row input,
.chip-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rating-row span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 2px solid #D7DAE1;
  border-radius: var(--radius-sm);
  background: #FAFBFC;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.rating-row span:hover {
  border-color: var(--text-muted);
}

.rating-row input:focus-visible + span,
.chip-row input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(79, 190, 136, 0.35);
}

.q-green .rating-row input:checked + span { background: var(--sr-green); border-color: var(--sr-green-dark); }
.q-gold  .rating-row input:checked + span { background: var(--sr-gold); border-color: var(--sr-gold-dark); }
.q-red   .rating-row input:checked + span { background: var(--sr-red); border-color: var(--sr-red-dark); color: #FFFFFF; }

.rating-ends {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-row label {
  position: relative;
}

.chip-row span {
  display: inline-block;
  padding: 9px 14px;
  border: 2px solid #D7DAE1;
  border-radius: 999px;
  background: #FAFBFC;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.chip-row input:checked + span {
  background: var(--sr-gold);
  border-color: var(--sr-gold-dark);
}

.survey-sub-q {
  margin-top: 18px;
}

.survey-q textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  padding: 12px 14px;
  border: 1px solid #D7DAE1;
  border-radius: var(--radius-sm);
  min-height: 84px;
  resize: vertical;
}

.survey-q textarea:focus {
  outline: none;
  border-color: var(--sr-green-dark);
  box-shadow: 0 0 0 3px rgba(79, 190, 136, 0.2);
}

.survey-error {
  color: var(--sr-red);
  font-size: 15px;
  font-weight: 600;
  min-height: 20px;
  margin: 12px 0 0;
}

.survey-actions {
  display: flex;
  flex-direction: column;
}

.survey-actions .btn {
  width: 100%;
}

.survey-actions .btn + .btn {
  margin-top: 10px;
}

.survey-privacy {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin: 14px 0 0;
}

.survey-privacy a {
  color: var(--sr-gold-dark);
  font-weight: 700;
}

.survey-thanks {
  text-align: center;
  padding: 12px 0 4px;
}

.survey-thanks-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--sr-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
}

/* ---------- Standalone info pages (privacy / contact) ---------- */

.brand-link {
  color: inherit;
  text-decoration: none;
}

.logo-wrap.medium .brand-logo-img {
  width: 96px;
  height: 96px;
}

a.back-btn {
  text-decoration: none;
  display: inline-block;
}

.doc-meta {
  color: var(--text-muted);
  font-size: 15px;
  margin: 8px 0 0;
}

.doc-body p,
.doc-body li {
  color: var(--text-gray);
  font-size: 17px;
}

.doc-body h3 {
  margin-top: 28px;
  margin-bottom: 8px;
}

.doc-body ul {
  padding-left: 22px;
  margin: 8px 0;
}

.doc-body li + li {
  margin-top: 6px;
}

.doc-body a:not(.btn):not(.back-btn) {
  color: var(--sr-gold-dark);
  font-weight: 700;
}

.doc-callout {
  background: var(--sr-pink-bg);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0;
  color: var(--text-dark);
  font-size: 16px;
}

.doc-callout strong {
  color: var(--sr-red);
}

@media (max-width: 420px) {
  .survey-body { padding: 20px 16px 24px; }
  .survey-head h2 { font-size: 23px; }
  .rating-row { gap: 6px; }
  .rating-row span { height: 46px; font-size: 17px; }
  .survey-notice { flex-direction: column; align-items: stretch; }
  .survey-notice-actions { flex-direction: row; }
  .survey-notice-actions .btn { flex: 1; }
}

/* ---------- Grocery delivery: steps ---------- */

.shop-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sr-gold);
  color: var(--text-dark);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-help {
  color: var(--text-gray);
  font-size: 16px;
  margin: 0 0 8px;
}

.label-hint {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 15px;
}

.shop-status {
  font-size: 16px;
  color: var(--text-gray);
  margin: 14px 0 0;
}

.shop-status:empty { display: none; }
.shop-status.is-error { color: var(--sr-red); font-weight: 600; }

.btn:disabled {
  opacity: .6;
  cursor: wait;
}

/* ---------- Grocery delivery: stores ---------- */

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}

.store-filters[hidden] { display: none; }

.store-filters .chat-chip {
  font-size: 14px;
  padding: 9px 14px;
}

.store-filters .chat-chip.active {
  background: var(--sr-gold);
  border-color: var(--sr-gold-dark);
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  max-height: 560px;
  overflow-y: auto;
}

.store-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: #FAFBFC;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.store-card:hover { border-color: var(--text-muted); }

.store-card:has(input:checked) {
  border-color: var(--sr-green-dark);
  background: #F0FBF5;
}

.store-card input {
  margin-top: 5px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--sr-green-dark);
}

.store-body {
  flex: 1;
  min-width: 0;
}

.store-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.store-name {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
}

.store-miles {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--sr-gold-dark);
}

.store-addr {
  font-size: 15px;
  color: var(--text-gray);
  margin-top: 2px;
}

.store-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
  color: var(--text-gray);
  margin-top: 8px;
}

.store-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text-dark);
}

.badge-grocery { background: var(--sr-green); }
.badge-mini { background: var(--sr-pink-bg); color: var(--sr-red-dark); }

.store-open { color: var(--sr-green-dark); font-weight: 700; }
.store-closed { color: var(--sr-red); font-weight: 700; }

.store-fee {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 6px;
}

.store-map-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--sr-gold-dark);
  margin-top: 4px;
}

/* ---------- Grocery delivery: catalogs ---------- */

.catalog-tabs {
  margin: 8px 0 12px;
}

.catalog-tabs .catalog-tab {
  font-size: 17px;
  padding: 12px 6px;
}

.catalog-category {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 18px 0 8px;
}

.catalog-list .catalog-category:first-child { margin-top: 4px; }

.catalog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #FAFBFC;
}

.catalog-item + .catalog-item { margin-top: 8px; }

.catalog-item.in-cart {
  border-color: var(--sr-green-dark);
  background: #F0FBF5;
}

.catalog-icon {
  font-size: 28px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.catalog-main {
  flex: 1;
  min-width: 0;
}

.catalog-main .row-title { font-weight: 700; font-size: 17px; }
.catalog-main .row-sub { font-size: 15px; color: var(--text-gray); }

.qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qty-control .btn-pill {
  min-width: 72px;
}

.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--sr-green-dark);
  background: #FFFFFF;
  color: var(--text-dark);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qty-btn:hover { background: var(--sr-green); }
.qty-btn:disabled { opacity: .4; cursor: not-allowed; }

.qty-value {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

/* ---------- Grocery delivery: totals ---------- */

.cart-totals {
  margin: 16px 0 6px;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.cart-totals div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}

.cart-totals dt {
  color: var(--text-gray);
  font-size: 16px;
}

.cart-totals dd {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
}

.cart-totals .cart-total dt,
.cart-totals .cart-total dd {
  color: var(--text-dark);
  font-size: 21px;
  font-weight: 700;
}

@media (max-width: 420px) {
  .catalog-icon { font-size: 24px; width: 30px; }
  .qty-btn { width: 36px; height: 36px; }
}

.store-price {
  font-weight: 700;
  color: var(--sr-green-dark);
  letter-spacing: .05em;
}

.price-explainer {
  background: #F0FBF5;
  border-left: 6px solid var(--sr-green-dark);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 16px;
  color: var(--text-gray);
}

.price-explainer strong {
  display: block;
  color: var(--text-dark);
  font-size: 17px;
  margin-bottom: 2px;
}

/* ---------- Staff orders page ---------- */

.staff-title {
  font-size: 26px;
  margin: 0 0 6px;
}

.staff-order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.staff-order {
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: #FAFBFC;
}

.staff-order h3 {
  margin-bottom: 10px;
}

.staff-detail {
  display: flex;
  gap: 10px;
  font-size: 16px;
  padding: 3px 0;
  color: var(--text-dark);
}

.staff-label {
  flex: 0 0 92px;
  color: var(--text-muted);
  font-weight: 700;
}

.staff-detail a {
  color: var(--sr-gold-dark);
  font-weight: 700;
}

.staff-capture {
  margin-top: 12px;
}

.staff-capture .btn + .btn {
  margin-top: 8px;
}

/* ---------- Laundry ---------- */

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.price-table {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 4px 16px 12px;
  margin-top: 12px;
}

.price-table .catalog-category {
  margin: 12px 0 6px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 16px;
  color: var(--text-gray);
  border-top: 1px solid var(--border-soft);
}

.price-row strong {
  color: var(--text-dark);
  text-align: right;
}

.estimate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.estimate-box {
  background: #F0FBF5;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: center;
}

.estimate-box:nth-child(2) {
  background: #FAF5EA;
}

.estimate-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-gray);
}

.estimate-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 4px 0 2px;
}

.estimate-sub {
  font-size: 14px;
  color: var(--text-muted);
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--sr-gold-dark);
  text-decoration: underline;
  cursor: pointer;
}

.auth-note a {
  color: var(--sr-gold-dark);
}

@media (max-width: 420px) {
  .estimate-grid { grid-template-columns: 1fr; }
}

/* ---------- SR BINGO ---------- */

.col-0 { --ball: var(--sr-green);      --ball-text: var(--text-dark); }
.col-1 { --ball: var(--sr-gold);       --ball-text: var(--text-dark); }
.col-2 { --ball: var(--sr-red);        --ball-text: #FFFFFF; }
.col-3 { --ball: var(--sr-green-dark); --ball-text: #FFFFFF; }
.col-4 { --ball: var(--sr-gold-dark);  --ball-text: #FFFFFF; }

body.bingo-open { overflow: hidden; }

.chip-bingo {
  background: var(--sr-red) !important;
  border-color: var(--sr-red-dark) !important;
  color: #FFFFFF !important;
}

.chat-bingo-btn {
  border: none;
  background: var(--sr-red);
  color: #FFFFFF;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.chat-fab { position: fixed; }

.fab-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--sr-gold);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(27, 36, 55, 0.3);
  animation: badgePulse 1.6s ease-in-out infinite;
}

.fab-badge[hidden] { display: none; }

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.bingo-overlay {
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(27, 36, 55, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 12px;
  animation: fadeIn .2s ease;
}

.bingo-window {
  position: relative;
  width: 100%;
  max-width: 560px;
  transition: max-width .2s ease;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(27, 36, 55, 0.35);
  overflow: hidden;
}

.bingo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--text-dark);
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, var(--sr-green), var(--sr-gold), var(--sr-red)) 1;
}

.bingo-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 28px;
  line-height: 1;
}

.logo-sr {
  color: var(--sr-gold);
  font-size: 22px;
  margin-right: 8px;
  letter-spacing: .04em;
}

.logo-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 22px;
  animation: letterBounce 2.4s ease-in-out infinite;
}

.l-b { background: var(--sr-green); color: var(--text-dark); animation-delay: 0s; }
.l-i { background: var(--sr-gold); color: var(--text-dark); animation-delay: .15s; }
.l-n { background: var(--sr-red); color: #FFFFFF; animation-delay: .3s; }
.l-g { background: var(--sr-green-dark); color: #FFFFFF; animation-delay: .45s; }
.l-o { background: var(--sr-gold-dark); color: #FFFFFF; animation-delay: .6s; }

@keyframes letterBounce {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(-6px); }
  90% { transform: translateY(0); }
}

.bingo-close {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.bingo-close:hover { background: rgba(255, 255, 255, 0.28); }

.bingo-body {
  padding: 16px 18px 20px;
}

.bingo-tabs { margin: 0 0 10px; }

.bingo-status {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-gray);
  margin: 0 0 12px;
  min-height: 22px;
}

.bingo-status.is-live {
  color: var(--sr-red);
}

.bingo-status.is-live::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sr-red);
  margin-right: 8px;
  vertical-align: 1px;
  animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

.bingo-waiting[hidden],
.bingo-stage[hidden] { display: none; }

.bingo-waiting {
  text-align: center;
  padding: 8px 4px 4px;
}

.bingo-countdown-label {
  font-weight: 700;
  color: var(--text-gray);
}

.bingo-countdown {
  font-size: 44px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}

/* Caller: the ball */

.bingo-caller {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.ball-chute {
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #F1F2F5, #D5D8DE);
  box-shadow: inset 0 4px 12px rgba(27, 36, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bingo-ball {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75), transparent 38%), var(--ball, #C9CDD5);
  box-shadow: 0 6px 14px rgba(27, 36, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bingo-ball.is-empty { --ball: #C9CDD5; }

.ball-face {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--text-dark);
}

.ball-letter {
  font-size: 15px;
  font-weight: 700;
}

.ball-number {
  font-size: 28px;
  font-weight: 700;
}

.bingo-ball.is-dropping {
  animation: ballDrop .45s cubic-bezier(.3, 1.5, .5, 1);
}

@keyframes ballDrop {
  0%   { transform: translateY(-130%) rotate(-300deg) scale(.7); }
  60%  { transform: translateY(6%) rotate(10deg) scale(1.04); }
  80%  { transform: translateY(-3%) rotate(-4deg); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

.caller-side {
  flex: 1;
  min-width: 0;
}

.bingo-call-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-gray);
  margin-bottom: 8px;
}

.bingo-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ball);
  color: var(--ball-text);
  font-size: 14px;
  font-weight: 700;
  animation: slideIn .35s ease;
}

.mini-ball:first-child {
  animation: slideIn .5s ease;
}

@keyframes slideIn {
  from { transform: translateX(-12px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Card */

.bingo-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background: var(--text-dark);
  padding: 8px;
  border-radius: var(--radius-md);
}

.card-head {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  padding: 6px 0;
  border-radius: 8px;
  background: var(--ball);
  color: var(--ball-text);
}

.card-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 52px;
  border: none;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--text-dark);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .12s ease;
}

.card-cell:active { transform: scale(.95); }

.card-cell:focus-visible {
  outline: 3px solid var(--sr-gold);
  outline-offset: 2px;
}

.cell-num {
  position: relative;
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
}

.cell-free {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.card-cell.is-called:not(.is-daubed) {
  background: #FFF8E6;
  box-shadow: inset 0 0 0 3px var(--sr-gold);
}

/* The daub: a translucent red dot stamped over the number */
.card-cell::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 45%), rgba(199, 41, 46, 0.78);
  transform: scale(0);
  transition: transform .15s ease;
}

.card-cell.is-daubed::after { transform: scale(1); }
.card-cell.is-daubed .cell-num,
.card-cell.is-daubed .cell-free { color: #FFFFFF; }

.card-cell.is-free::after {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 45%), var(--sr-gold-dark);
}

.card-cell.just-daubed::after {
  animation: daubStamp .35s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes daubStamp {
  0% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.card-cell.is-winning {
  animation: winGlow .8s ease-in-out infinite alternate;
}

@keyframes winGlow {
  from { box-shadow: 0 0 0 3px var(--sr-gold); }
  to { box-shadow: 0 0 0 5px var(--sr-green), 0 0 16px var(--sr-gold); }
}

.is-shaking {
  animation: shake .4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* BINGO button and options */

.bingo-shout {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #D8383D, var(--sr-red-dark));
  color: #FFFFFF;
  font: inherit;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: 0 5px 0 #7A171B;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

.bingo-shout:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #7A171B;
}

.bingo-message {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--text-gray);
}

.bingo-message.is-win { color: var(--sr-green-dark); }

.bingo-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  font-size: 16px;
  color: var(--text-dark);
}

.bingo-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.bingo-options input {
  width: 22px;
  height: 22px;
  accent-color: var(--sr-green-dark);
}

.bingo-options .btn-pill { align-self: flex-start; }
.bingo-options .btn-pill[hidden] { display: none; }

.bingo-board-wrap {
  margin-top: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.bingo-board-wrap summary {
  font-weight: 700;
  cursor: pointer;
}

.bingo-board {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.board-row {
  display: grid;
  grid-template-columns: 26px repeat(15, 1fr);
  gap: 3px;
}

.board-letter {
  font-weight: 700;
  text-align: center;
  border-radius: 4px;
  background: var(--ball);
  color: var(--ball-text);
  font-size: 13px;
}

.board-num {
  text-align: center;
  font-size: 11px;
  padding: 3px 0;
  border-radius: 4px;
  background: #F1F2F5;
  color: var(--text-muted);
}

.board-num.is-called {
  background: var(--ball);
  color: var(--ball-text);
  font-weight: 700;
}

.bingo-help {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin: 14px 0 0;
}

/* Celebration */

.bingo-celebrate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bingo-celebrate[hidden] { display: none; }

.celebrate-text {
  font-size: 56px;
  font-weight: 700;
  color: var(--sr-red);
  background: #FFFFFF;
  padding: 10px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(27, 36, 55, 0.35);
  border: 5px solid var(--sr-gold);
  animation: celebratePop 3.8s ease forwards;
  white-space: nowrap;
}

@keyframes celebratePop {
  0% { transform: scale(0) rotate(-12deg); opacity: 0; }
  12% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  20% { transform: scale(1) rotate(0); }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9); opacity: 0; }
}

.confetti {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: var(--color);
  animation: confettiFall 3s ease-in var(--delay) forwards;
}

@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--drift), 110vh) rotate(var(--spin)); opacity: .8; }
}

@media (max-width: 420px) {
  .bingo-body { padding: 14px 12px 18px; }
  .bingo-logo { font-size: 22px; }
  .logo-letter { width: 32px; height: 32px; font-size: 18px; }
  .logo-sr { font-size: 18px; margin-right: 4px; }
  .cell-num { font-size: 20px; }
  .ball-chute { width: 96px; height: 96px; }
  .bingo-ball { width: 82px; height: 82px; }
  .celebrate-text { font-size: 40px; }
  .board-row { grid-template-columns: 22px repeat(15, 1fr); gap: 2px; }
  .board-num { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-letter, .fab-badge, .bingo-status.is-live::before,
  .bingo-ball.is-dropping, .mini-ball, .card-cell.just-daubed::after,
  .card-cell.is-winning, .is-shaking, .celebrate-text, .confetti {
    animation: none !important;
  }
  .confetti { display: none; }
}

/* SR BINGO: one or two cards (two sit side by side) */

.bingo-window.two-cards { max-width: 860px; }

.bingo-card-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-gray);
}

.bingo-card-count .chat-chip.active {
  background: var(--sr-gold);
  border-color: var(--sr-gold-dark);
}

.bingo-cards {
  display: grid;
  gap: 10px;
}

.bingo-cards.two { grid-template-columns: 1fr 1fr; }

.bingo-card-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-gray);
  text-align: center;
  margin-bottom: 4px;
}

.bingo-cards.two .bingo-card { gap: 4px; padding: 5px; }
.bingo-cards.two .card-cell { min-height: 0; border-radius: 6px; }
.bingo-cards.two .card-head { font-size: 18px; padding: 3px 0; border-radius: 6px; }
.bingo-cards.two .cell-num { font-size: 20px; }
.bingo-cards.two .cell-free { font-size: 8px; }

@media (max-width: 520px) {
  .bingo-cards.two { gap: 6px; }
  .bingo-cards.two .bingo-card { gap: 3px; padding: 4px; }
  .bingo-cards.two .card-head { font-size: 14px; }
  .bingo-cards.two .cell-num { font-size: 15px; }
  .bingo-cards.two .cell-free { display: none; }
}

/* ---------- Admin dashboard ---------- */

.dash-shell { max-width: 1040px; }

.dash-login { max-width: 460px; margin: 0 auto; }

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-toolbar .step-help { margin: 0; }

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.dash-tile {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}

.survey-tiles .dash-tile {
  background: #FAFBFC;
  box-shadow: none;
  border: 1px solid var(--border-soft);
}

.tile-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-gray);
}

.tile-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.dash-card { margin-bottom: 18px; padding: 22px 22px 24px; }
.dash-card h3 { margin-bottom: 14px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 18px;
}

/* Daily column chart */

.daily-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding-top: 18px;
  border-bottom: 1px solid var(--text-muted);
}

.daily-gridline {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--chart-grid);
}

.axis-label {
  position: absolute;
  top: -18px;
  left: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.daily-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
  outline: none;
}

.daily-bar {
  width: 100%;
  min-height: 2px;
  background: var(--chart-mark);
  border-radius: 4px 4px 0 0;
}

.daily-bar.is-zero { background: var(--chart-grid); }

.daily-col:hover .daily-bar,
.daily-col:focus-visible .daily-bar {
  filter: brightness(1.15);
}

.daily-col:focus-visible { box-shadow: 0 0 0 2px var(--sr-gold); border-radius: 4px; }

.daily-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Horizontal bar lists */

.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hbar-row {
  display: grid;
  grid-template-columns: minmax(120px, 46%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  border-radius: 6px;
  outline: none;
}

.hbar-row:hover, .hbar-row:focus-visible { background: #F4F5F7; }

.hbar-label {
  font-size: 15px;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbar-track {
  height: 12px;
}

.hbar-bar {
  display: block;
  height: 100%;
  background: var(--chart-mark);
  border-radius: 0 4px 4px 0;
}

.hbar-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.chart-tip {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  background: var(--text-dark);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(27, 36, 55, 0.25);
}

.chart-tip[hidden] { display: none; }
.tip-title { font-weight: 700; }

.dash-table-wrap {
  margin-top: 14px;
  font-size: 15px;
}

.dash-table-wrap summary { cursor: pointer; font-weight: 700; color: var(--text-gray); }

.dash-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.dash-table th, .dash-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.dash-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-comment {
  margin: 0;
  padding: 12px 16px;
  background: #FAFBFC;
  border-left: 4px solid var(--sr-gold);
  border-radius: var(--radius-sm);
}

.dash-comment p { margin: 0; color: var(--text-dark); font-size: 16px; }
.dash-comment cite { font-size: 13px; color: var(--text-muted); font-style: normal; }

.demo-notice {
  font-size: 13px !important;
  color: var(--text-muted);
}

.demo-notice a {
  color: var(--sr-gold-dark);
  font-weight: 700;
}

/* Price label on SR BINGO games (currently FREE) */
.price-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sr-green);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  vertical-align: 2px;
}

.price-pill-lg {
  font-size: 14px;
  padding: 4px 12px;
  margin: 0 0 8px;
}

.bingo-card-count .price-pill-lg { margin: 0 0 0 auto; }

/* ---------- My Profile ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #FFF6DA, #F3E3B5);
  border: 3px solid var(--sr-gold);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-star {
  color: var(--sr-gold);
  line-height: 1;
  text-shadow: 0 1px 0 var(--sr-gold-dark), 0 2px 6px rgba(160, 138, 80, 0.45);
}

.avatar-sm { width: 40px; height: 40px; border-width: 2px; }
.avatar-sm .avatar-star { font-size: 24px; }

.avatar-lg { width: 112px; height: 112px; }
.avatar-lg .avatar-star { font-size: 68px; }

.avatar.has-photo { background: #FFFFFF; }

.account-profile {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.account-profile:focus-visible {
  outline: 3px solid var(--sr-gold);
  outline-offset: 2px;
}

.account-bar #accountStatus {
  flex: 1;
  min-width: 0;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  word-break: break-word;
}

.profile-type {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.profile-type.is-member { background: var(--sr-gold); color: var(--text-dark); }
.profile-type.is-guest { background: #E4E6EA; color: var(--text-dark); }

.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-photo-actions .btn[hidden] { display: none; }

.profile-upload:focus-within {
  outline: 3px solid var(--sr-green-dark);
  outline-offset: 2px;
}

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.profile-stat {
  background: #FAFBFC;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.stat-wide {
  grid-column: 1 / -1;
  background: #FFFAEB;
  border-color: #EBDDB4;
}

.rating-stars {
  font-size: 32px;
  letter-spacing: 4px;
  color: var(--sr-gold);
  line-height: 1.2;
  margin-top: 2px;
}

.stat-sub {
  font-size: 15px;
  color: var(--text-gray);
  font-weight: 600;
}

.stat-date {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 6px;
}

.profile-stats .tile-value { font-size: 30px; }

@media (max-width: 420px) {
  .avatar-lg { width: 92px; height: 92px; }
  .avatar-lg .avatar-star { font-size: 56px; }
  .profile-name { font-size: 21px; }
  .profile-stats .tile-value { font-size: 26px; }
  .stat-date { font-size: 16px; }
}

/* ---------- Dashboard: live panel ---------- */

.live-card { border-top: 6px solid var(--sr-red); }

.live-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.live-head h3 { display: flex; align-items: center; gap: 10px; }

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sr-red);
  animation: livePulse 1.4s ease-in-out infinite;
}

.live-updated {
  font-size: 14px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.live-updated.is-stale { color: var(--sr-red); font-weight: 700; }

.live-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.live-tile {
  background: #FAFBFC;
  box-shadow: none;
  border: 1px solid var(--border-soft);
}

.live-tile .tile-value { font-size: 44px; }

.tile-value.is-changed { animation: numberFlash 1.2s ease; }

@keyframes numberFlash {
  0% { color: var(--sr-green-dark); transform: scale(1.12); }
  100% { color: var(--text-dark); transform: scale(1); }
}

.live-grid { gap: 0 24px; }

.live-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

.live-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
  animation: slideIn .35s ease;
}

.live-time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.live-what { color: var(--text-dark); }
.live-device { color: var(--text-muted); font-size: 13px; }

.dash-section-title { margin: 8px 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .live-dot, .tile-value.is-changed, .live-item { animation: none !important; }
}

/* =========================================================
   Accessibility (js/a11y.js)
   ========================================================= */

.a11y-button {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1003;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border: none;
  border-radius: 999px;
  background: #1B2437;
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(27, 36, 55, 0.3);
  cursor: pointer;
}

.a11y-button:hover { background: #2B3752; }
.a11y-button:focus-visible { outline: 4px solid var(--sr-gold); outline-offset: 3px; }

.a11y-button.is-customized::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sr-green);
  margin-left: 2px;
}

.a11y-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1B2437;
  align-items: center;
  justify-content: center;
}

.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  z-index: 1004;
  width: min(400px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: #FFFFFF;
  color: #1B2437;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(27, 36, 55, 0.35);
  border: 2px solid #1B2437;
}

.a11y-panel[hidden] { display: none; }

.a11y-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #1B2437;
  color: #FFFFFF;
}

.a11y-head h2 { margin: 0; font-size: 22px; }

.a11y-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.a11y-body { padding: 6px 18px 18px; }

.a11y-body h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #495468;
  margin: 16px 0 8px;
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.a11y-label { font-weight: 700; font-size: 17px; }

.a11y-seg {
  display: flex;
  border: 2px solid #1B2437;
  border-radius: 10px;
  overflow: hidden;
}

.a11y-seg button {
  min-width: 52px;
  height: 44px;
  border: none;
  background: #FFFFFF;
  color: #1B2437;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.a11y-seg button + button { border-left: 2px solid #1B2437; }
.a11y-seg .seg-lg { font-size: 21px; }
.a11y-seg .seg-xl { font-size: 26px; }
.a11y-seg button.active { background: #1B2437; color: #FFFFFF; }

.a11y-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #E5E7EB;
  cursor: pointer;
  position: relative;
}

.a11y-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-track {
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #C9CDD5;
  position: relative;
  margin-top: 2px;
  transition: background .15s ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform .15s ease;
}

.a11y-toggle input:checked + .toggle-track { background: #2F9A66; }
.a11y-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(22px); }
.a11y-toggle input:focus-visible + .toggle-track { outline: 3px solid #1B2437; outline-offset: 3px; }

.toggle-text { display: flex; flex-direction: column; }
.toggle-title { font-weight: 700; font-size: 17px; }
.toggle-help { font-size: 14px; color: #495468; }

.a11y-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.a11y-actions .btn { margin-top: 8px; flex: 1; }
.a11y-actions .btn[hidden] { display: none; }

.a11y-note {
  font-size: 15px;
  color: #1B2437;
  background: #FFF8E6;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0 0;
}

.a11y-note a { color: #6B5A1F; font-weight: 700; }
.a11y-reset { width: 100%; }

/* Visual alert: a bright frame around the screen */
.a11y-flash {
  position: fixed;
  inset: 0;
  z-index: 1006;
  pointer-events: none;
  border: 12px solid #FFD400;
  box-shadow: inset 0 0 40px rgba(255, 212, 0, 0.6);
  opacity: 0;
}

.a11y-flash.is-flashing {
  opacity: 1;
  animation: a11yFlash 1s ease;
}

@keyframes a11yFlash {
  0%, 50% { opacity: 1; }
  25%, 75% { opacity: .2; }
  100% { opacity: 1; }
}

/* Captions for anything spoken aloud */
.a11y-caption {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 1005;
  width: min(640px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.9);
  color: #FFFFFF;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1.4;
  pointer-events: none;
}

.a11y-caption[hidden] { display: none; }

.caption-label {
  flex-shrink: 0;
  background: #FFD400;
  color: #000000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: 4px;
  margin-top: 4px;
}

.emergency-note {
  background: #FFF8E6;
  border-left: 5px solid var(--sr-gold);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text-dark);
  margin: 16px 0 0;
}

@media (max-width: 420px) {
  .a11y-button { left: 12px; bottom: 16px; padding: 8px 12px 8px 8px; font-size: 14px; }
  .a11y-panel { left: 10px; right: 10px; width: auto; bottom: 76px; }
}

/* Keep page content clear of the two floating buttons */
.site-footer { padding-bottom: 70px; }

/* ---------- Setting: text size ----------
   Page content and full-screen overlays scale up. Floating panels
   (chat, toast, accessibility panel) are anchored to the screen edge,
   so instead of scaling they get larger lettering and stay on screen. */
html.a11y-size-large .app-shell,
html.a11y-size-large .auth-gate,
html.a11y-size-large .bingo-overlay,
html.a11y-size-large .survey-overlay { zoom: 1.15; }

html.a11y-size-xlarge .app-shell,
html.a11y-size-xlarge .auth-gate,
html.a11y-size-xlarge .bingo-overlay,
html.a11y-size-xlarge .survey-overlay { zoom: 1.3; }

html.a11y-size-large .msg,
html.a11y-size-large .chat-input-row input,
html.a11y-size-large .toast { font-size: 18px; }
html.a11y-size-large .chat-chip { font-size: 15px; }

html.a11y-size-xlarge .msg,
html.a11y-size-xlarge .chat-input-row input,
html.a11y-size-xlarge .toast { font-size: 21px; }
html.a11y-size-xlarge .chat-chip { font-size: 17px; }
html.a11y-size-xlarge .chat-header { font-size: 20px; }

/* ---------- Setting: easy-to-read font ---------- */
html.a11y-font body,
html.a11y-font body * {
  font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

/* ---------- Setting: underline links ---------- */
html.a11y-links a:not(.btn):not(.back-btn) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}
html.a11y-links .link-btn,
html.a11y-links .footer-link-btn { text-decoration: underline !important; }

/* ---------- Setting: reduce motion ---------- */
html.a11y-calm *,
html.a11y-calm *::before,
html.a11y-calm *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-calm .celebrate-text { animation: none !important; }
html.a11y-calm .confetti { display: none; }
html.a11y-calm .a11y-flash.is-flashing { animation: none !important; }

/* ---------- Setting: high contrast ---------- */
html.a11y-contrast {
  --text-dark: #000000;
  --text-gray: #000000;
  --text-muted: #1A1A1A;
  --border-soft: #000000;
  --bg: #FFFFFF;
  --sr-gold-dark: #5C4A12;
  --chart-mark: #145A36;
}

html.a11y-contrast body { background: #FFFFFF; }

html.a11y-contrast .menu-card,
html.a11y-contrast .detail-card,
html.a11y-contrast .auth-card,
html.a11y-contrast .local-widget,
html.a11y-contrast .account-bar,
html.a11y-contrast .dash-tile,
html.a11y-contrast .survey-notice,
html.a11y-contrast .store-card,
html.a11y-contrast .catalog-item,
html.a11y-contrast .list-row,
html.a11y-contrast .support-box,
html.a11y-contrast .faq-item,
html.a11y-contrast .option-card,
html.a11y-contrast .emergency-row,
html.a11y-contrast .price-table,
html.a11y-contrast .profile-stat,
html.a11y-contrast .staff-order,
html.a11y-contrast .survey-q,
html.a11y-contrast .chat-panel {
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

html.a11y-contrast input,
html.a11y-contrast select,
html.a11y-contrast textarea {
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

html.a11y-contrast ::placeholder { color: #3A3A3A; opacity: 1; }

html.a11y-contrast .btn-quiet,
html.a11y-contrast .back-btn,
html.a11y-contrast .account-signout,
html.a11y-contrast .chat-chip,
html.a11y-contrast .auth-tabs,
html.a11y-contrast .catalog-tab {
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

html.a11y-contrast .btn { border: 2px solid #000000; }
html.a11y-contrast .hdr-red,
html.a11y-contrast .btn-red { background: #A01A1F; }

html.a11y-contrast a:not(.btn):not(.back-btn) { color: #0033A0 !important; }

html.a11y-contrast *:focus-visible {
  outline: 4px solid #0033A0 !important;
  outline-offset: 3px !important;
}

/* =========================================================
   Track Rides & Groceries (demo)
   ========================================================= */

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #FFF8E6;
  border: 1px solid #EBDDB4;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 15px;
  color: var(--text-dark);
}

.demo-badge {
  flex-shrink: 0;
  background: var(--sr-red);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 1px;
}

.track-status {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 4px 0 12px;
}

.track-status-main { flex: 1; min-width: 0; }

.track-stage {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
}

.track-detail {
  font-size: 16px;
  color: var(--text-gray);
  margin-top: 4px;
  min-height: 24px;
}

.track-eta {
  flex-shrink: 0;
  min-width: 108px;
  text-align: center;
  background: var(--text-dark);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.track-eta-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.track-eta-label {
  font-size: 12px;
  opacity: .85;
  margin-top: 2px;
}

/* isolation keeps the map's own layers under the site's floating panels */
.track-map-wrap {
  position: relative;
  isolation: isolate;
  z-index: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 0 0 1px rgba(27, 36, 55, 0.05);
}

.track-map {
  height: 360px;
  background: #E8EAE6;
}

.track-follow {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 500;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: #FFFFFF;
  color: var(--text-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(27, 36, 55, 0.25);
  cursor: pointer;
}

.track-follow[aria-pressed="true"] {
  background: var(--sr-green-dark);
  color: #FFFFFF;
}

.track-map-error {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: #F1F2F5;
  color: var(--text-gray);
}

.track-map-error[hidden] { display: none; }

/* Pins and car */
.track-pin { background: none; border: none; }

.pin-body {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(27, 36, 55, 0.35);
}

.pin-body svg { transform: rotate(45deg); }

.pin-store .pin-body { background: var(--sr-gold-dark); }
.pin-home .pin-body { background: #2F9A66; }
.pin-hospital .pin-body { background: var(--sr-red); }

.pin-label {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #FFFFFF;
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(27, 36, 55, 0.3);
}

.track-car { background: none; border: none; }

.car-rot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s linear;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}

.car-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(47, 154, 102, 0.35);
  animation: carPulse 1.8s ease-out infinite;
}

@keyframes carPulse {
  0% { transform: scale(.5); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.track-progress {
  height: 6px;
  background: #E4E6EA;
  border-radius: 999px;
  margin: 12px 0 8px;
  overflow: hidden;
}

.track-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sr-green-dark), #2F9A66);
  border-radius: 999px;
}

.track-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.track-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-gray);
}

.track-speed .chat-chip.active {
  background: var(--sr-gold);
  border-color: var(--sr-gold-dark);
}

/* Driver */
.driver-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #FAFBFC;
}

.driver-avatar {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 700;
  color: #FFFFFF;
  border: 3px solid var(--sr-gold);
}

.avatar-grocery { background: linear-gradient(135deg, #2F9A66, #1F6E48); }
.avatar-ride { background: linear-gradient(135deg, #3B4A6B, #1B2437); }

.driver-info { flex: 1; min-width: 0; }
.driver-name { font-weight: 700; font-size: 18px; color: var(--text-dark); }
.driver-meta { font-size: 14px; color: var(--sr-gold-dark); font-weight: 700; }
.driver-car { font-size: 15px; color: var(--text-gray); }

.driver-plate {
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  padding: 6px 10px;
  border: 2px solid var(--text-dark);
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--text-dark);
}

.driver-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
}

/* Timeline + side panel */
.track-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.track-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 16px;
}

.tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 3px;
  background: #E4E6EA;
}

.tl-item.is-done:not(:last-child)::before { background: #2F9A66; }

.tl-icon {
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #F1F2F5;
  border: 2px solid #E4E6EA;
  filter: grayscale(1);
  opacity: .6;
}

.tl-item.is-done .tl-icon { background: #E8F7EF; border-color: #2F9A66; filter: none; opacity: 1; }

.tl-item.is-current .tl-icon {
  background: #FFFFFF;
  border-color: var(--sr-red);
  filter: none;
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(199, 41, 46, 0.15);
}

.tl-text { display: flex; flex-direction: column; padding-top: 6px; }
.tl-label { font-weight: 700; font-size: 16px; color: var(--text-dark); }
.tl-item.is-next .tl-label { color: var(--text-muted); font-weight: 600; }
.tl-time { font-size: 13px; color: var(--text-muted); }

.shop-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 16px;
  color: var(--text-dark);
}

.check-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #C9CDD5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}

.check-item.is-picked { color: var(--text-muted); }
.check-item.is-picked span:last-child { text-decoration: line-through; }
.check-item.is-picked .check-box { background: #2F9A66; border-color: #2F9A66; }
.check-item.is-picked .check-box::after { content: '\2713'; }

.receipt-line {
  margin-top: 10px;
  font-weight: 700;
  color: var(--text-dark);
}

.receipt-line:empty { display: none; }

.trip-details div {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}

.trip-details dt { flex: 0 0 84px; color: var(--text-muted); font-weight: 700; font-size: 15px; }
.trip-details dd { margin: 0; color: var(--text-dark); font-size: 16px; }

@media (max-width: 520px) {
  .track-panels { grid-template-columns: 1fr; }
  .track-map { height: 300px; }
  .track-stage { font-size: 19px; }
  .track-speed { margin-left: 0; }
  .driver-plate { font-size: 13px; padding: 4px 7px; }
}

html.a11y-calm .car-pulse { display: none; }

/* Dashboard: live survey answers */
.live-tiles { grid-template-columns: repeat(3, 1fr); }

.live-surveys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.live-survey {
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--sr-gold);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: #FAFBFC;
}

.live-survey.is-new { animation: surveyNew 2.4s ease; }

@keyframes surveyNew {
  0%, 40% { background: #FFF3C4; }
  100% { background: #FAFBFC; }
}

.live-survey-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.live-survey-service {
  font-size: 13px;
  font-weight: 700;
  background: var(--sr-green);
  color: var(--text-dark);
  padding: 1px 8px;
  border-radius: 999px;
}

.live-survey-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.score-chip {
  display: inline-flex;
  gap: 4px;
  font-size: 13px;
  color: var(--text-gray);
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.score-chip strong { color: var(--text-dark); }

.live-survey-comment {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--text-dark);
}

/* =========================================================
   Fit & symmetry fixes (small phones through desktop)
   ========================================================= */

/* Page headers: long titles wrap instead of pushing the Back button off-screen */
.detail-header { flex-wrap: wrap; row-gap: 12px; }
.detail-header h1,
.detail-header h2 { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.back-btn { white-space: nowrap; }

/* Emergency numbers: text and call button share the row evenly, and stack
   neatly on narrow phones instead of spilling out of the box */
.emergency-row { flex-wrap: wrap; row-gap: 10px; }
.emergency-row > div { flex: 1 1 150px; min-width: 0; }
.emergency-name,
.emergency-sub { white-space: normal; }
.emergency-row .btn-pill { margin-left: auto; }

@media (max-width: 400px) {
  .emergency-row .btn-pill { flex: 1 1 100%; margin-left: 0; }
}

/* Dashboard grids never demand more room than the screen has */
.dash-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.live-surveys { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.dash-tiles { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

@media (max-width: 480px) {
  .live-tile .tile-value { font-size: 32px; }
  .live-tiles { gap: 8px; }
  .live-tile { padding: 12px 10px; }
  .live-item { grid-template-columns: 62px 1fr; }
  .live-device { grid-column: 2; }
  .dash-card { padding: 18px 16px 20px; }
}

/* Headers: title wraps inside its own space; Back button stays on the right */
.detail-header { flex-wrap: nowrap; }
.detail-header h1,
.detail-header h2 { flex: 1 1 0; }

/* Floating buttons mirror each other on phones: two 60px circles,
   20px from the bottom-left and bottom-right corners */
@media (max-width: 767px) {
  .a11y-button {
    left: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .a11y-button .a11y-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .a11y-icon { width: 40px; height: 40px; }
  .a11y-icon svg { width: 30px; height: 30px; }
  .a11y-button.is-customized::after {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    border: 2px solid #1B2437;
  }
  .chat-fab { right: 20px; bottom: 20px; }
  .a11y-panel { left: 10px; right: 10px; width: auto; bottom: 92px; }
}

/* Overlays scroll their last row clear of the floating buttons */
.bingo-body,
.survey-body { padding-bottom: 96px; }

/* =========================================================
   My Circle, Share with Family, Ask Family or a Friend to Pay
   ========================================================= */

#askPayBtn { margin-top: 10px; }

.row-tel { color: var(--sr-gold-dark); font-weight: 700; }

.circle-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

.tag-circle { background: var(--sr-green); color: var(--text-dark); }
.tag-emergency { background: var(--sr-pink-bg); color: var(--sr-red-dark); }

.circle-list { display: flex; flex-direction: column; gap: 10px; }

.circle-person {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: #FAFBFC;
}

.circle-head { display: flex; align-items: center; gap: 12px; }

.circle-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sr-gold), var(--sr-gold-dark));
  color: #FFFFFF;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-who { flex: 1; min-width: 0; }

.circle-switches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.circle-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
}

.circle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.circle-switch input:checked + .toggle-track { background: #2F9A66; }
.circle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(22px); }
.circle-switch input:focus-visible + .toggle-track { outline: 3px solid #1B2437; outline-offset: 3px; }

.circle-add {
  margin-top: 12px;
  border: 1px dashed #C9CDD5;
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.circle-add summary { font-weight: 700; cursor: pointer; color: var(--text-dark); }

/* Sheets */
body.sheet-open { overflow: hidden; }

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(27, 36, 55, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 12px;
  animation: fadeIn .2s ease;
}

.sheet-card {
  width: 100%;
  max-width: 520px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(27, 36, 55, 0.35);
  overflow: hidden;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--text-dark);
  color: #FFFFFF;
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, var(--sr-green), var(--sr-gold), var(--sr-red)) 1;
}

.sheet-head h2 { margin: 0; font-size: 22px; }

.sheet-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.sheet-body { padding: 16px 18px 96px; }
.sheet-body > .btn { width: 100%; margin-top: 14px; }
.sheet-body h3 { margin: 14px 0 8px; }

.pick-list { display: flex; flex-direction: column; gap: 8px; }

.pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pick-row:has(input:checked) { border-color: #2F9A66; background: #F0FBF5; }
.pick-row input { width: 22px; height: 22px; accent-color: #2F9A66; flex-shrink: 0; }
.pick-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.text-previews { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.text-previews .btn { width: 100%; margin-top: 4px; }

.text-preview {
  background: #F1F2F5;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.text-preview-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-gray);
  margin-bottom: 8px;
}

.text-bubble {
  background: #2F80ED;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 4px;
  max-width: 92%;
  overflow-wrap: anywhere;
}

.pay-summary {
  text-align: center;
  background: #FFF8E6;
  border-radius: var(--radius-md);
  padding: 14px;
}

.pay-amount { font-size: 34px; font-weight: 700; color: var(--text-dark); }

.payer-banner {
  background: var(--sr-green);
  color: var(--text-dark);
  font-weight: 700;
  font-size: 18px;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.payer-note { font-style: italic; color: var(--text-gray); margin: 0 0 10px; }

.pin-input {
  font-size: 28px !important;
  letter-spacing: .4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 16px;
  color: var(--text-dark);
  cursor: pointer;
}

.consent-row input { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; accent-color: #2F9A66; }
.payer-form .btn { width: 100%; }

/* =========================================================
   Touch screens: scroll inside a fixed frame so the browser's
   address/tool bars don't slide in and out, and the colored
   frame lines stay perfectly still.
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .page-scroll {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Store list groups: standard 2-mile area vs farther stores */
.store-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text-dark);
}

.store-group strong { font-size: 16px; }
.store-group span { color: var(--text-gray); font-size: 14px; }
.group-near { background: #F0FBF5; border-left: 5px solid #2F9A66; }
.group-far { background: #FFF8E6; border-left: 5px solid var(--sr-gold-dark); margin-top: 6px; }
#cartExtraRow[hidden] { display: none; }