/* Public info pages (story / contact / terms), home story teaser, reviews, trial. */
/* Honeypot field (contact.html) — off-screen, not display:none/[hidden], so
   a form-filling bot that blindly populates every input still falls into
   it while real users never see or tab into it (tabindex="-1" on the
   element itself keeps keyboard/screen-reader users out too). */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
/* Most of these links are also in the public bottom bar for signed-out
   visitors, but this row (not just the signed-in member bar) is what makes
   Privacy Policy reachable pre-signup — so it stays visible regardless of
   sign-in state, accepting the minor Contact/FAQ duplication for visitors. */
.footer-links{ display:block; margin-bottom:8px; font-size:13px; color:var(--muted) }
.footer-links a{ color:var(--muted); font-weight:700; text-decoration:none }

.story-teaser{ display:flex; gap:14px; margin:6px 16px 18px; padding:18px; background:#FBF3E7; border:1px solid #F1E4CC; border-radius:var(--r); box-shadow:var(--shadow) }
.story-teaser-icon{ flex:none; width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:20px; box-shadow:var(--shadow) }
.story-teaser-body h3{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:6px 0 6px; line-height:1.3 }
.story-teaser-body p{ font-size:13.5px; line-height:1.55; margin:0 0 12px; opacity:.82 }
.story-teaser-cta{ display:inline-block; padding:10px 18px; border-radius:var(--r-sm); background:var(--coral-deep); color:#fff; font-weight:800; font-size:14px; text-decoration:none }

.info-card{ display:flex; align-items:center; gap:14px; margin:8px 16px 16px; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
/* The unconditional display:flex above otherwise beats the browser's own
   [hidden]{display:none} — same recurring gotcha already fixed this way for
   #rollForwardBanner (css/style.css) and others; contactVerifyNotice
   (contact.html) is a live instance: its own `hidden` toggle wasn't doing
   anything visually without this. */
.info-card[hidden]{ display:none }
.info-card-icon{ font-size:24px }
.info-card-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.info-card-value{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--coral-deep); text-decoration:none }

.contact-form{ margin:0 16px 20px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.contact-form textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); font:inherit; font-size:15px; resize:vertical; background:#fff }
.form-err{ color:var(--coral-deep); font-size:13px; font-weight:700; min-height:18px; margin:4px 0 8px }
.form-ok{ color:var(--mint-deep); font-weight:800; font-size:14px; margin:12px 0 0; text-align:center }

.terms-list{ display:flex; flex-direction:column; gap:12px; padding:6px 16px 4px }
.faq-group-title{ font-family:'Fraunces',serif; font-size:15px; font-weight:700; margin:10px 2px -2px; color:var(--coral-deep) }
.faq-group-title:first-child{ margin-top:0 }
.term-card{ display:flex; gap:14px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.term-icon{ flex:none; width:42px; height:42px; border-radius:50%; background:#FBF3E7; display:grid; place-items:center; font-size:19px }
.term-card h3{ font-family:'Fraunces',serif; font-size:16px; font-weight:600; margin:2px 0 4px }
.term-card p, .term-card li{ font-size:13.5px; line-height:1.55; margin:0; opacity:.85 }
.term-card ul{ margin:4px 0 0; padding-left:18px }

.holiday-section{ margin:18px 16px 8px; padding:18px 16px; background:#EAF7F0; border:1px solid #D5EDE1; border-radius:var(--r) }
.holiday-title{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; margin:0 0 4px }
.holiday-sub{ font-size:12.5px; color:var(--muted); margin:0 0 12px }
.holiday-years{ display:flex; gap:8px; margin-bottom:12px }
.holiday-year-btn{ padding:6px 14px; border-radius:999px; border:1.5px solid var(--mint-deep); background:#fff; color:var(--mint-deep); font:800 13px 'Plus Jakarta Sans'; cursor:pointer }
.holiday-year-btn.on{ background:var(--mint-deep); color:#fff }
.holiday-month{ margin-bottom:12px }
.holiday-month h4{ margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-deep) }
.holiday-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 12px; margin-bottom:6px; background:#fff; border-radius:12px; font-size:13.5px }
.holiday-row.past{ opacity:.5 }
.holiday-row .h-date{ font-weight:800; white-space:nowrap }
.holiday-row .h-note{ color:var(--muted); font-size:11.5px }
.holiday-empty{ font-size:13px; color:var(--muted) }

/* Reviews */
.rating-picker{ display:inline-flex; gap:6px }
.rating-btn{ background:none; border:1.5px solid transparent; border-radius:14px; padding:6px 9px; cursor:pointer; font-size:28px; line-height:1; opacity:.4; transition:opacity .15s ease, transform .1s ease, border-color .15s ease, background-color .15s ease }
.rating-btn.on{ opacity:1; transform:scale(1.15); border-color:var(--mustard); background:rgba(244,194,78,.14) }
.review-card{ margin:0 16px 12px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.review-card .r-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); font-weight:700 }
.review-card .r-stars{ font-size:20px; line-height:1 }
.review-card p{ margin:6px 0 0; font-size:14px; line-height:1.5 }

/* Trial box */
.trial-card{ margin:8px 16px 16px; padding:18px; background:linear-gradient(135deg,#FFF3D6,#FFE3D6); border:1px solid #F5D9A8; border-radius:var(--r); box-shadow:var(--shadow) }
.trial-card h3{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; margin:0 0 6px }
.trial-card p{ font-size:13.5px; line-height:1.5; margin:0 0 12px }
.trial-price{ font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--coral-deep) }
.trial-dishes{ display:flex; flex-direction:column; gap:8px; margin:0 16px 16px }
.trial-dish{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm); cursor:pointer; text-align:left; font:inherit; width:100% }
.trial-dish.on{ border-color:var(--mint-deep); background:#F0FAF5 }
.trial-dish b{ display:block; font-size:14px }
.trial-dish span{ font-size:12px; color:var(--muted) }
.trial-days{ display:flex; flex-direction:column; gap:8px; margin:0 16px 16px }
.trial-day-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm) }
.trial-day-label{ flex:none; width:96px; font-weight:800; font-size:13px }
.trial-day-row select{ flex:1; min-width:0; padding:9px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; background:#fff }
.trial-booked{ margin:0 16px 14px; padding:14px 16px; border-radius:var(--r); background:#EAF7F0; border:1px solid #D5EDE1; font-size:14px; line-height:1.5 }
.pause-banner{ margin:0 16px 14px; padding:14px 16px; border-radius:var(--r); background:#FFF3D6; border:1px solid #F5D9A8; font-size:14px; line-height:1.5 }

/* Today's delivery status (js/delivery-status.js, planner.html) */
.delivery-status-card{ margin:0 16px 14px; padding:14px 16px; border-radius:var(--r); background:#EAF7F0; border:1px solid #D5EDE1; font-size:13.5px; line-height:1.5 }
.delivery-status-card strong{ display:block; font-family:'Fraunces',serif; font-weight:700; font-size:15.5px; margin-bottom:4px }
.delivery-status-card p{ margin:2px 0 }
.delivery-status-card.delivery-status-failed{ background:#FDE4E0; border-color:#F6C4BC }

/* Notifications */
.notice-card{ display:flex; gap:12px; margin:0 16px 10px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); text-decoration:none; color:var(--ink) }
.notice-card.unread{ border-left:4px solid var(--coral-deep); background:#FFFAF6 }
.notice-icon{ font-size:22px; line-height:1.2 }
.notice-body{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.notice-body b{ font-size:14.5px }
.notice-body span{ font-size:13px; line-height:1.5; color:var(--ink); opacity:.85 }
.notice-body small{ font-size:11.5px; color:var(--muted); font-weight:700 }
.notif-bell{ position:fixed; top:12px; right:max(12px, calc(50% - 228px)); z-index:31; width:42px; height:42px; border-radius:50%; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); display:grid; place-items:center; text-decoration:none; font-size:19px }
.notif-bell .badge{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--coral-deep); color:#fff; font:800 11px/18px 'Plus Jakarta Sans'; text-align:center }
.notif-bell .badge:empty{ display:none }
.notify-prefs{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px }
.notify-prefs label.pref-row{ display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; font-size:14px }
.notify-prefs label.pref-row small{ display:block; color:var(--muted); font-size:12px; margin-top:2px }
.notify-prefs input[type=checkbox]{ margin-top:3px }

/* Install-as-app card (js/pwa.js) */
.pwa-install-card{ position:fixed; left:12px; right:12px; bottom:86px; max-width:456px; margin-inline:auto; z-index:29; display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow) }
.pwa-icon{ font-size:22px }
.pwa-text{ flex:1; display:flex; flex-direction:column; font-size:13.5px }
.pwa-text small{ color:var(--muted); font-size:11.5px; margin-top:1px; line-height:1.35 }
.pwa-install-btn{ background:var(--coral-deep); color:#fff; border:0; border-radius:10px; padding:9px 14px; font:800 13px 'Plus Jakarta Sans'; cursor:pointer }
.pwa-close{ background:none; border:0; color:var(--muted); font-size:16px; cursor:pointer; padding:4px }

.break-banner{ margin:0 16px 14px; padding:13px 16px; border-radius:var(--r); background:#F1ECFA; border:1px solid #D9CEF0; color:#3E2F66; font-size:13.5px; line-height:1.5 }

/* Push-notification permission popup (js/banners.js's renderPushPromptPopup) —
   a floating card injected straight into <body>, same fixed-position
   pattern as .pwa-install-card just above, stacked higher (bottom:156px vs
   86px) so the two can coexist on screen without overlapping if a parent
   hits both prompts in the same visit. */
#pushPromptPopup{ position:fixed; left:12px; right:12px; bottom:156px; max-width:456px; margin-inline:auto; z-index:30 }
.push-prompt-banner{ padding:10px 12px; border-radius:var(--r-sm); background:linear-gradient(135deg,#E9F6F0,#E3F1FA); border:1px solid var(--sky); box-shadow:var(--shadow); display:flex; gap:9px; align-items:center }
.push-prompt-icon{ font-size:16px; line-height:1; flex:none }
.push-prompt-text{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--ink) }
.push-prompt-allow{ flex:none; background:var(--coral-deep); color:#fff; border:0; border-radius:8px; padding:6px 12px; font:800 12px 'Plus Jakarta Sans'; cursor:pointer }
.push-prompt-allow:disabled{ opacity:.6; cursor:default }
.push-prompt-dismiss{ flex:none; background:none; border:0; color:var(--muted); font-size:15px; line-height:1; padding:4px 2px; cursor:pointer }

/* Kitchen-full / waitlist card (wallet.html) */
.seat-card{ margin:0 0 16px; padding:16px; border-radius:var(--r); background:#FFF3D6; border:1px solid #F5D9A8; font-size:14px; line-height:1.5 }
.seat-card b{ font-size:15.5px }
.seat-card p{ margin:6px 0 12px }
.seat-card.offered{ background:#EAF7F0; border-color:#D5EDE1 }
.seat-card.offered p{ margin-bottom:0 }

.vault-card{ margin:0 16px 14px; padding:16px; border-radius:var(--r); background:linear-gradient(135deg,#FFF7E0,#F0FAF5); border:1px solid #F0DDA8; font-size:13.5px; line-height:1.55 }
.vault-card h3{ margin:0 0 6px; font-size:15px }
.vault-card p{ margin:0 }

.core-timeline{ margin:8px 0 0; padding:9px 11px; border-radius:var(--r-sm); background:#FFF7E0; border:1px solid #F0DDA8; font-size:11.5px; line-height:1.5; color:#5A4A1F; text-align:left }
.core-timeline-title{ font-weight:700; margin:0 0 6px }
.core-timeline-table{ width:100%; border-collapse:collapse; margin:0 0 6px }
.core-timeline-table th, .core-timeline-table td{ padding:3px 6px 3px 0; text-align:left; font-weight:400 }
.core-timeline-table th{ font-weight:700; border-bottom:1px solid #F0DDA8 }
.core-timeline-table td:first-child, .core-timeline-table th:first-child{ padding-left:0 }
.core-timeline-foot{ opacity:.85 }
.core-timeline-foot a{ color:inherit; font-weight:700 }

.account-controls{ margin:0 0 8px }
.account-ctl{ margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); font-size:13.5px; line-height:1.5 }
.account-ctl b{ font-size:15px }
.account-ctl p{ margin:6px 0 12px; color:var(--muted) }

.acct-more{ margin:34px 0 8px; text-align:center }
.acct-more summary{ display:inline-block; cursor:pointer; list-style:none; font-size:12px; color:var(--muted); opacity:.8; padding:6px 10px }
.acct-more summary::-webkit-details-marker{ display:none }
.acct-more[open] summary{ margin-bottom:6px }
.acct-link-row{ margin:10px 0; font-size:12.5px }
.acct-link-row a{ color:var(--muted); text-decoration:underline }
.acct-confirm{ text-align:left; margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); font-size:13.5px; line-height:1.5 }
.acct-confirm p{ margin:0 0 10px }

.trial-flex{ margin:0 16px 14px; padding:12px 14px; border-radius:var(--r); background:#F0FAF5; border:1px solid #D5EDE1; font-size:13px; line-height:1.5 }
.trial-flex b{ font-size:14px }
.trial-flex ul{ margin:6px 0 0; padding-left:18px }
.trial-flex li{ margin:3px 0 }

.acct-confirm .explore-menu-cta, .acct-confirm .primary-btn{ width:100%; box-sizing:border-box; margin-left:0; margin-right:0 }