/* ══════════════════════════════════════════════════════════ */
/*  SELF-HOSTED FONTS — replaces Google Fonts for privacy +    */
/*  performance. Outfit & JetBrains Mono are variable fonts    */
/*  so a single WOFF2 file covers all weights.                 */
/* ══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/outfit-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Auth Modal ── */
#auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.4s ease;
}

#auth-modal.hidden {
  display: none !important;
}

.auth-modal-content {
  background: var(--bg-panel, #fff);
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animated spinner */
.alpha-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.spinner-ring:nth-child(1) {
  border-top-color: #f97316;
  animation: spin 1.4s linear infinite;
}

.spinner-ring:nth-child(2) {
  inset: 8px;
  border-right-color: #22c55e;
  animation: spin 1.8s linear infinite reverse;
}

.spinner-ring:nth-child(3) {
  inset: 16px;
  border-bottom-color: #3b82f6;
  animation: spin 1.2s linear infinite;
}

.spinner-core {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
  opacity: 0.4;
  animation: pulse-core 2s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-core {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.alpha-title {
  font-size: 22px;
  font-weight: 800;
  color: #f97316;
  margin-bottom: 16px;
}

.alpha-text {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 12px;
}

.alpha-small {
  font-size: 12px;
  color: #9ca3af;
}

.alpha-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 24px;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.alpha-btn:hover {
  background: #ea580c;
}

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

body.dark-mode .auth-modal-content {
  background: #1e1e1e;
}

body.dark-mode .alpha-text {
  color: #bbb;
}

body.dark-mode .alpha-small {
  color: #777;
}

body.dark-mode .auth-form input[type="email"],
body.dark-mode .auth-form input[type="password"],
body.dark-mode .auth-form input[type="text"] {
  background: #181818;
  color: #e5e5e5;
  border-color: #333;
}

body.dark-mode .auth-form input::placeholder {
  color: #777;
}

/* ── Auth Form Styles ── */
.auth-form {
  text-align: left;
  margin-top: 16px;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  background: #f9fafb;
  color: #1f2937;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.auth-form input:focus {
  border-color: #f97316;
}

.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 4px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
}

.auth-checkbox input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #f97316;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.auth-error {
  background: #fef2f2;
  color: #dc2626;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}

body.dark-mode .auth-error {
  background: #3b1111;
  color: #fca5a5;
}

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: 12px;
}

.auth-switch a {
  color: #f97316;
  text-decoration: none;
  font-weight: 600;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.alpha-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Global Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes chipPop {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #121212;
  color: #e5e5e5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Only lock scroll on deals page (full-screen map) */
body.no-scroll {
  overflow: hidden;
}

/* Pinch-to-zoom prevented via viewport meta tag (maximum-scale=1.0) */

/* ── CSS Variables ── */
:root {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --active: #22c55e;
  --ending: #f59e0b;
  --ended: #94a3b8;
  --bg: #fafaf9;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --text: #18181b;
  --text-secondary: #64748b;
  --border: #e5e7eb;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
  /* Safe area inset for iOS notch/Dynamic Island.
     Returns 0px on devices/browsers without a safe area — harmless elsewhere. */
  --safe-top: env(safe-area-inset-top, 0px);
  --top-bar-content-height: 48px;
  --top-bar-height: calc(var(--top-bar-content-height) + var(--safe-top));
  --action-bar-height: 44px;
  --chips-height: 42px;
  --days-height: 40px;
  /* Mobile: only top bar visible (filter panel is overlay, not stacked) */
  --filter-offset: var(--top-bar-height);
}

body.dark-mode {
  --bg: #121212;
  --bg-card: #1e1e1e;
  --bg-panel: #181818;
  --text: #e5e5e5;
  --text-secondary: #999;
  --border: #2e2e2e;
  --shadow: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.5);
}

body.dark-mode {
  background: var(--bg);
  color: var(--text);
}

/* ── Top Bar ── */
#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  padding: var(--safe-top) 12px 0;
  box-sizing: border-box;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100;
}

.top-bar-logo { flex-shrink: 0; display: flex; align-items: center; }

.top-bar-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 22px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
  min-width: 0;
}
.top-bar-pill:hover, .top-bar-pill:active { border-color: var(--primary); }
.top-bar-pill svg { flex-shrink: 0; color: var(--primary); }
.pill-arrow { font-size: 10px; color: var(--text-secondary); margin-left: 2px; }
.location-pill { flex: 1; min-width: 0; overflow: hidden; }
#location-pill-text { overflow: hidden; text-overflow: ellipsis; }

/* Legacy top-bar deal count — kept in DOM so JS can keep updating its
   span, but hidden everywhere. The desktop counter now lives inside
   the deal feed (see .deal-feed-count-desktop-wrap below). */
.top-bar-deal-count {
  display: none !important;
}

/* Desktop-only: deal count at the top of the deal-feed sidebar,
   above the filter chips. On mobile, the drag-handle already shows
   the count, so this is hidden. */
.deal-feed-count-desktop-wrap {
  display: none;
}
@media (min-width: 768px) {
  .deal-feed-count-desktop-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #f97316;
    background: rgba(249, 115, 22, 0.08);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.top-bar-icon-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}
.top-bar-icon-btn:hover, .top-bar-icon-btn:active { border-color: var(--primary); }

/* Search overlay — mobile: full-width fixed over top bar. Desktop: inline in top bar. */
.search-overlay {
  display: none;
}
.search-overlay.visible {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top-bar-height);
  padding: var(--safe-top) 12px 0;
  box-sizing: border-box;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-overlay.hidden { display: none; }
.search-overlay .search-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.search-overlay .search-input:focus { border-color: var(--primary); }
.search-cancel {
  background: none; border: none; color: var(--primary);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap;
  padding: 8px;
}

/* ── Filter Chips (inside deal feed) ── */
.filter-chips {
  display: none; /* hidden in collapsed state — shown by JS in half/full */
  gap: 8px;
  padding: 6px 12px 12px;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips.visible { display: flex; }

.filter-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
  border-radius: 22px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.filter-chip:hover, .filter-chip:active { border-color: var(--primary); color: var(--primary); }
.filter-chip.active {
  border-color: var(--primary);
  background: rgba(249, 115, 22, 0.12);
  color: var(--primary);
}
.filter-chip .pill-arrow { font-size: 9px; }

#chip-saved { padding: 10px 14px; }
#chip-saved svg { color: var(--text-secondary); }
#chip-saved.active { background: rgba(249, 115, 22, 0.15); border-color: var(--primary); }
#chip-saved.active svg { fill: var(--primary); stroke: var(--primary); color: var(--primary); }

/* ── Filter Inline Expanders ── */
.filter-expander {
  flex-shrink: 0;
  padding: 0 12px;
}
.filter-expand-section {
  padding: 0 0 10px;
}
.filter-expand-section.hidden { display: none; }
.popover-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.popover-opt {
  padding: 10px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.popover-opt:hover, .popover-opt:active { border-color: var(--primary); color: var(--primary); }
.popover-opt.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Live dot */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 2px;
  vertical-align: middle;
  animation: live-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Old brand/search styles removed — replaced by top-bar-logo + search-overlay */

.top-bar-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 6px;
  border-radius: 8px;
  color: var(--text);
  transition: background 0.15s;
}

.icon-btn:hover {
  background: var(--border);
}

/* ── User Menu ── */
.user-menu-wrapper {
  position: relative;
}

.user-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f97316 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.user-icon-letter {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--bg-panel, #fff);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border, #e5e7eb);
  z-index: 1000;
  overflow: hidden;
  animation: dropdownIn 0.15s ease;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.user-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-dropdown-info {
  overflow: hidden;
}

.user-dropdown-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-email {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--text, #1f2937);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}

.user-dropdown-item:hover {
  background: var(--border, #f3f4f6);
}

/* ── Action Bar ── */
#action-bar {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  height: var(--action-bar-height);
  background: var(--bg-panel);
  display: none; /* Hidden on mobile — filters in panel */
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}

/* Old action-btn, chip, day-pill, day-dropdown, category-chips styles removed
   — replaced by filter-chip + popover-opt + inline expanders */

/* ── Location Picker Dropdown ── */
.location-dropdown-wrapper {
  position: relative;
}

.location-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-panel, #1a1a1a);
  border: 1px solid var(--border, #2e2e2e);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 200;
  overflow: hidden;
  min-width: 240px;
  max-width: calc(100vw - 16px);
  width: 320px;
  animation: dropdownIn 0.15s ease;
}

.location-dropdown.hidden {
  display: none !important;
}

.location-geolocate {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border, #2e2e2e);
  background: none;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #f97316;
  cursor: pointer;
  transition: background 0.12s;
}

.location-geolocate:hover {
  background: rgba(249, 115, 22, 0.08);
}

.location-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #2e2e2e);
}

.location-search {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-card, #141414);
  border: 1px solid var(--border, #2e2e2e);
  border-radius: 8px;
  color: var(--text, #e5e5e5);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.location-search:focus {
  border-color: #f97316;
  outline: none;
}

.location-list {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.location-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #e5e5e5);
  cursor: pointer;
  transition: background 0.12s;
}

.location-item:hover {
  background: var(--border, #252525);
}

.location-item-sub {
  font-size: 11px;
  color: var(--text-secondary, #777);
  margin-left: 4px;
}

.location-item-count {
  float: right;
  font-size: 11px;
  color: var(--text-secondary, #777);
  font-weight: 400;
}

body.dark-mode .location-dropdown {
  background: #1e1e1e;
  border-color: #2e2e2e;
}

/* ── Map ── */
/* 3D toggle — standalone div, not inside MapLibre ctrl-group */
#btn-3d {
  position: absolute;
  top: 160px;
  left: 10px;
  z-index: 10;
  width: 29px;
  height: 29px;
  background: #1a1a1a;
  color: #aaa;
  border: 1px solid #333;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
#btn-3d:hover { border-color: #f97316; color: #f97316; }
#btn-3d.on { background: #f97316; color: #fff; border-color: #f97316; }

/* Starfield behind the map — visible around the globe edges at low zoom */
#map-stars {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: #010108;
}

#map {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

#map.hidden {
  display: none;
}

/* ── List View ── */
#list-view {
  position: fixed;
  top: var(--filter-offset);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  overflow-y: auto;
  z-index: 1;
  padding: 12px;
}

#list-view.hidden {
  display: none;
}

#list-header {
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

#list-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Restaurant Cards ── */
.restaurant-card {
  display: flex;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 0;
  position: relative;
}

/* ── Card Favorite Heart ── */
.card-fav-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.card-fav-btn:hover {
  transform: scale(1.15);
}

.card-fav-btn.is-fav {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

/* ── Detail Panel Favorite ── */
.detail-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.detail-name-row .detail-name {
  flex: 1;
  min-width: 0;
}

.detail-fav-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border, #e5e7eb);
  background: var(--bg-card, #fff);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.detail-fav-btn:hover {
  transform: scale(1.1);
  border-color: #ef4444;
  color: #ef4444;
}

.detail-fav-btn.is-fav {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* ── Favorites Filter Button ── */
/* Inherits the base .action-btn styling (sizing, background,
   border, hover + active states) so it's visually consistent with
   Near Me and Right Now — orange bg + white text when engaged,
   not the previous red-on-dark which was both hard to read and
   stylistically off. The only customization is that the heart
   SVG icon gets filled with the current text color when the
   filter is active, so users see a solid white heart on orange
   as a clear "saved filter engaged" cue. */
.btn-favorites .action-icon {
  flex-shrink: 0;
}

.btn-favorites.active .action-icon {
  fill: currentColor;
}

.restaurant-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.restaurant-card:active {
  transform: scale(0.97);
}

.restaurant-card.compact {
  min-width: 260px;
  max-width: 280px;
  flex-shrink: 0;
}

.card-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}

.card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--border);
}

.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}

.card-stars {
  color: var(--primary);
  font-size: 11px;
  letter-spacing: -1px;
}

.card-rating {
  font-weight: 600;
  color: var(--text);
}

.card-distance {
  color: var(--primary);
  font-weight: 600;
}

.card-price-range {
  font-weight: 500;
}

.card-special {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-top: 2px;
  padding: 3px 0;
}

.card-special.active-now {
  color: var(--active);
}

.card-special-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.card-special-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.card-special-price {
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

.card-countdown {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.card-countdown.ending {
  color: #fff;
  background: var(--ending);
}

.card-countdown.upcoming {
  color: var(--active);
  background: rgba(34, 197, 94, 0.15);
}

.card-more {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
}

/* ── Detail Panel (Bottom Sheet on mobile, Side Panel on desktop) ── */
#detail-panel {
  position: fixed;
  top: var(--top-bar-height);
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  z-index: 201;
  overflow-y: auto;
  padding: 0 16px 24px;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

#detail-panel.hidden {
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.25s ease-in;
}

.detail-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 12px 0 8px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.detail-drag-handle {
  width: 48px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
}

.detail-close-btn {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Side pill — desktop drag-to-dismiss handle */
.detail-side-pill {
  display: none;
}

@media (min-width: 768px) {
  .detail-side-pill {
    display: block;
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 64px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: grab;
    z-index: 11;
    /* Critical: `left` MUST be in the transition list alongside
       `width`. Without it, on hover the `left` value snaps instantly
       from -14 to -18 while width animates 14 → 18, so mid-transition
       the pill occupies [-18, -4] instead of [-18, 0]. The cursor
       falls out of that window, hover exits, instant revert, cursor
       is back inside, infinite flicker. Animating both in lockstep
       keeps the right edge pinned at 0 throughout. */
    transition: background 0.15s, width 0.15s, left 0.15s;
  }

  .detail-side-pill::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 28px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.15s;
  }

  .detail-side-pill:hover {
    background: var(--border);
    width: 18px;
    left: -18px;
  }

  .detail-side-pill:hover::after {
    background: var(--text-secondary);
  }

  .detail-side-pill:active {
    cursor: grabbing;
  }
}

.detail-close {
  position: sticky;
  top: 8px;
  float: right;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-shrink: 0;
}

.detail-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.detail-thumb {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

.detail-header {
  margin-bottom: 16px;
}

.detail-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.detail-stars {
  color: var(--primary);
  font-size: 14px;
}

.detail-rating {
  font-weight: 600;
  color: var(--text);
}

.detail-distance {
  color: var(--primary);
  font-weight: 600;
}

.detail-price {
  font-weight: 600;
}

.detail-address {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.detail-specials h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.detail-category h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.detail-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 20px;
  font-size: 14px;
}

/* ── Special Cards ── */
.special-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.2s, transform 0.2s;
}

.special-card.active-now {
  border-color: var(--active);
  border-width: 2px;
}

.special-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.special-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.special-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.special-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.special-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.special-time {
  font-weight: 500;
}

.countdown {
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.countdown.ending {
  color: #fff;
  background: var(--ending);
}

.countdown.upcoming {
  color: var(--active);
  background: rgba(34, 197, 94, 0.15);
}

.countdown.ended {
  color: var(--ended);
}

/* ── Detail Actions ── */
.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.detail-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  line-height: 1.2;
}

/* Desktop / tablet: one row with flex-1 sharing */
@media (min-width: 520px) {
  .detail-btn { flex: 1 1 0; padding: 10px 12px; }
}

/* Very narrow phones: smaller font so long words fit */
@media (max-width: 359px) {
  .detail-btn { font-size: 12px; padding: 9px 6px; }
}

.detail-btn:active {
  transform: scale(0.94);
}

.detail-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.detail-btn-directions {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

.detail-btn-directions:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.detail-btn-viewpage {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

.detail-btn-viewpage:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Deal Feed Sidebar ── */
/* Mobile bottom sheet: collapsed bar → half (~45%) → full. */
.deal-feed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-panel);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  /* Collapsed: just the handle bar visible (~56px) */
  transform: translateY(calc(100% - 56px));
  will-change: transform;
}
.deal-feed.snapping {
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.deal-feed.expanded {
  transform: translateY(var(--top-bar-height));
  border-radius: 0;
}

.deal-feed.hidden {
  transform: translateY(100%);
  pointer-events: none;
}

/* ── Mobile Filter Panel ── */
/* Old filter panel, filter toggle, badges, action-btn-sm, day pills removed
   — replaced by inline filter chips + expanders in deal feed */

.deal-feed-drag-area {
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  z-index: auto;
  background: var(--bg-panel);
  border-radius: 16px 16px 0 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  pointer-events: auto;
}

.deal-feed-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 0.3px;
  line-height: 1;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.25);
  padding: 10px 22px;
  border-radius: 24px;
}
.deal-feed-handle .deal-feed-chevron {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 12px;
  line-height: 1;
  color: #f97316;
  animation: chevron-bounce 1.5s ease-in-out infinite;
}
@keyframes chevron-bounce {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
.deal-feed.snap-half .deal-feed-chevron {
  transform: rotate(90deg);
  animation: none;
}
.deal-feed.expanded .deal-feed-chevron {
  transform: rotate(180deg);
  animation: none;
}

#deal-feed-cards {
  overflow-y: auto;
  padding: 0 12px 16px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* ── Deal Feed Card ── */
.deal-feed-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  height: 110px;
}
.deal-feed-card.is-featured {
  height: 130px;
}

.deal-feed-card:hover {
  border-color: var(--primary);
}

.deal-feed-card:active {
  transform: scale(0.98);
}

.deal-feed-card.highlighted {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 12px rgba(249, 115, 22, 0.15);
}

/* Thumbnail */
.deal-feed-thumb {
  width: 90px;
  height: 100%;
  flex-shrink: 0;
  background: var(--border);
  object-fit: cover;
}

.deal-feed-thumb-placeholder {
  width: 90px;
  height: 100%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--border) 0%, var(--bg-panel) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  opacity: 0.4;
}

/* Card body */
.deal-feed-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.deal-feed-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-feed-card-meta {
  font-size: 11px;
  color: var(--text-secondary, #999);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.deal-feed-card-meta .card-stars {
  color: #f59e0b;
  font-size: 10px;
}

.deal-feed-card-meta .card-distance {
  color: var(--text-tertiary, #666);
}

/* Specials section */
.deal-feed-specials {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.deal-feed-special {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.deal-feed-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  flex-shrink: 0;
}

.deal-feed-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-feed-when {
  font-size: 10px;
  color: var(--text-tertiary, #666);
}

.deal-feed-status {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.deal-feed-status.active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.deal-feed-status.ending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.deal-feed-status.upcoming {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.deal-feed-more {
  font-size: 10px;
  color: var(--primary);
  font-weight: 600;
  margin-top: 2px;
}

/* Closed card styling (Live mode) */
.deal-feed-card.is-closed {
  opacity: 0.5;
}
.deal-feed-card.is-closed .deal-feed-thumb {
  filter: grayscale(0.7);
}

/* Divider between open and closed sections */
.deal-feed-divider {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  padding: 12px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Desktop: right sidebar */
@media (min-width: 768px) {
  .deal-feed {
    top: var(--top-bar-height);
    bottom: 0;
    left: auto;
    right: 0;
    width: 420px;
    max-height: none;
    border-radius: 0;
    transform: none !important;
    border-left: 1px solid var(--border);
  }

  .deal-feed-drag-area {
    display: none;
  }

  .filter-chips {
    display: flex !important; /* Always visible on desktop */
    padding: 12px 16px 10px;
  }

  /* Search: always visible as text input on desktop */
  #btn-search-toggle { display: none; }
  .search-overlay {
    display: flex !important;
    position: static;
    height: auto;
    padding: 0;
    background: none;
    border-bottom: none;
    z-index: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
  }
  .search-overlay .search-input { flex: 1; }
  .search-cancel { display: none; }
  .search-overlay.hidden { display: flex !important; }

  /* Map canvas fills the full viewport on desktop. Sidebar sits on top
     as a fixed overlay. Map centering is handled via map.setPadding /
     easeTo({padding}) in deals.html so the user location pin stays
     centered in the visible (non-sidebar) portion of the canvas. */

  .deal-feed-card {
    height: 120px;
  }
  .deal-feed-card.is-featured {
    height: 140px;
  }

  .deal-feed-thumb {
    width: 110px;
  }

  .deal-feed-thumb-placeholder {
    width: 110px;
  }
}

/* Mobile: ensure map isn't offset */
@media (max-width: 767px) {
  #map {
    right: 0 !important;
  }
}

/* Tablet / small desktop: narrower sidebar. Map stays full-width —
   padding handled in JS (see _applyMapPadding in deals.html). */
@media (min-width: 768px) and (max-width: 1024px) {
  .deal-feed {
    width: 340px !important;
  }
}

/* Small landscape (phone): narrower sidebar, fill safe areas */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    padding: 0 !important;
    margin: 0 !important;
    background: #121212 !important;
  }
  #map {
    left: 0 !important;
    right: 0 !important;
    padding-left: env(safe-area-inset-left, 0px);
  }
  .deal-feed {
    width: calc(300px + env(safe-area-inset-right, 0px)) !important;
    padding-right: env(safe-area-inset-right, 0px);
  }
  #top-bar {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
}

#preview-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 4px;
  margin-top: -4px;
}

#preview-cards::-webkit-scrollbar {
  display: none;
}

/* ── User Location Marker ── */
/* ── Favorite Heart Map Marker ── */
.fav-heart-marker {
  width: 18px;
  height: 18px;
  background: #f97316;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.fav-heart-marker:hover {
  transform: scale(1.2);
}

/* 0×0 anchor point — same pattern as .promoted-marker. The marker
   element must stay at 0×0 so MapLibre's translate(-50%, -50%) for
   anchor: 'center' resolves to (0,0) and the lat/lng coordinate is
   exactly at the element origin. Children use absolute offsets. */
.user-location-marker {
  position: relative;
  width: 0;
  height: 0;
}

.user-dot {
  width: 14px;
  height: 14px;
  background: #ef4444;
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.user-pulse {
  width: 40px;
  height: 40px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: -20px;
  animation: pulse 2s ease-out infinite;
  z-index: 1;
}

@keyframes pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  z-index: 300;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.3s ease;
  transition: opacity 0.3s;
}

#toast.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Open Status Badges ── */
.detail-open-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 6px;
}

.detail-open-status.open {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.detail-open-status.closing-soon {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  animation: pulse-badge 2s ease-in-out infinite;
}

.detail-open-status.closed {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Card Hours Row ── */
.card-hours {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
}

.card-hours-status {
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}

.card-hours-status.open {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

.card-hours-status.closing-soon {
  color: #d97706;
  background: rgba(245, 158, 11, 0.12);
  animation: pulse-badge 2s ease-in-out infinite;
}

.card-hours-status.closed {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

.card-hours-time {
  color: var(--text-secondary);
}

body.dark-mode .card-hours-status.open { color: #4ade80; }
body.dark-mode .card-hours-status.closing-soon { color: #fbbf24; }
body.dark-mode .card-hours-status.closed { color: #f87171; }

body.dark-mode .detail-open-status.open {
  color: #4ade80;
}

body.dark-mode .detail-open-status.closing-soon,
body.dark-mode .card-closing-soon {
  color: #fbbf24;
}

body.dark-mode .detail-open-status.closed {
  color: #f87171;
}

/* ── Business Hours Table ── */
.detail-hours {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.detail-hours h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.hours-row.hours-today {
  font-weight: 700;
  color: var(--text-primary);
}

.hours-day {
  min-width: 40px;
}

.hours-time.closed-text {
  color: #dc2626;
}

body.dark-mode .hours-time.closed-text {
  color: #f87171;
}

/* ── Detail content fade-in ── */
#detail-content {
  animation: fadeIn 0.25s ease;
}

/* ══════════════════════════════════════════
   PROMOTED / FEATURED RESTAURANTS
   ══════════════════════════════════════════ */

/* ── Map Marker (0×0 anchor point pattern) ──
   The marker element itself is a zero-size point at the lat/lng so
   MapLibre's anchor math stays stable regardless of which child is
   visible. All visual content (pin dot, card, flames) is absolutely
   positioned around the 0,0 anchor with hard-coded offsets so the
   center of each is pinned exactly to the coordinate. This replaces
   the old pattern where the marker had a 24×24 base size that
   transitioned to 210×180 on expand — the transition caused visible
   drift because the inner .promoted-card's `translate(-50%, -50%)`
   was relative to a box whose size was animating every frame, and
   MapLibre was re-applying transforms from map moves on top of that. */
.promoted-marker {
  cursor: pointer;
  width: 0;
  height: 0;
  position: relative;
}

.promoted-pin {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.promoted-dot {
  width: 16px;
  height: 16px;
  background: #f97316;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
  z-index: 3;
  position: relative;
}

.promoted-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, transparent 70%);
  animation: glow-pulse 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

/* Flame particles rising from the pin */
.promoted-flames {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 2;
}

.flame-particle {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  animation: flame-rise 1.5s ease-out infinite;
}

.flame-particle.p1 {
  width: 8px; height: 12px;
  left: -4px;
  background: radial-gradient(ellipse at bottom, #fbbf24, #f97316, transparent);
  animation-delay: 0s;
}

.flame-particle.p2 {
  width: 6px; height: 10px;
  left: -1px;
  background: radial-gradient(ellipse at bottom, #fde68a, #f59e0b, transparent);
  animation-delay: 0.3s;
}

.flame-particle.p3 {
  width: 10px; height: 14px;
  left: -6px;
  background: radial-gradient(ellipse at bottom, #f97316, #ef4444, transparent);
  animation-delay: 0.6s;
}

.flame-particle.p4 {
  width: 5px; height: 8px;
  left: 1px;
  background: radial-gradient(ellipse at bottom, #fbbf24, #f97316, transparent);
  animation-delay: 0.9s;
}

.flame-particle.p5 {
  width: 7px; height: 11px;
  left: -3px;
  background: radial-gradient(ellipse at bottom, #fde68a, #ef4444, transparent);
  animation-delay: 1.2s;
}

@keyframes flame-rise {
  0% {
    transform: translateY(0) scaleX(1) rotate(0deg);
    opacity: 0.9;
  }
  30% {
    opacity: 0.8;
    transform: translateY(-12px) scaleX(1.1) rotate(-5deg);
  }
  70% {
    opacity: 0.4;
    transform: translateY(-24px) scaleX(0.7) rotate(5deg);
  }
  100% {
    transform: translateY(-36px) scaleX(0.3) rotate(-3deg);
    opacity: 0;
  }
}

/* ── Map Marker (expanded — carousel card) ── */
.promoted-card {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background: var(--bg-card, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(249, 115, 22, 0.35), 0 0 0 2px #f97316;
  animation: promoted-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promoted-marker.expanded .promoted-card {
  display: block;
}

.promoted-marker.expanded .promoted-pin {
  opacity: 0;
  pointer-events: none;
}

/* Glowing edge effect instead of rotating square */
.promoted-card-glow {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  z-index: -1;
  background: linear-gradient(135deg, #fbbf24, #f97316, #ef4444, #f97316, #fbbf24);
  background-size: 300% 300%;
  animation: glow-shift 3s ease-in-out infinite;
}

@keyframes glow-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes promoted-card-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Carousel */
.promoted-carousel {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.promoted-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.promoted-slide.active {
  opacity: 1;
}

.promoted-carousel-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s, transform 0.3s;
}

.carousel-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.promoted-info {
  padding: 8px 10px;
  position: relative;
}

.promoted-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promoted-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Featured tag in deal feed cards */
.featured-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 1px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
  margin-right: 2px;
}

/* ── Preview/List Card — Promoted Styling ── */
.restaurant-card.promoted-list-card {
  position: relative;
  border: 1.5px solid rgba(249, 115, 22, 0.5);
  overflow: visible;
  z-index: 1;
  animation: promoted-card-glow 3s ease-in-out infinite;
}

@keyframes promoted-card-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(249, 115, 22, 0.15), 0 0 12px rgba(249, 115, 22, 0.08); }
  50% { box-shadow: 0 0 10px rgba(249, 115, 22, 0.25), 0 0 20px rgba(249, 115, 22, 0.12); }
}

.promoted-list-glow {
  position: absolute;
  inset: -1.5px;
  border-radius: 14px;
  z-index: -1;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(249, 115, 22, 0.25), rgba(239, 68, 68, 0.15), rgba(249, 115, 22, 0.25), rgba(251, 191, 36, 0.15));
  background-size: 300% 300%;
  animation: glow-shift 3s ease-in-out infinite;
  pointer-events: none;
}

.promoted-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* ── Verified Badges ── */
.verified-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.verified-badge-sm {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 3px;
  vertical-align: middle;
}

.verified-badge-detail {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  padding: 2px 10px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

.verified-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #10b981;
  border-radius: 50%;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── Feedback Modal ── */
#feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#feedback-modal.hidden {
  display: none !important;
}

.feedback-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.feedback-content {
  position: relative;
  background: var(--bg-panel, #fff);
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.feedback-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--border, #e5e7eb);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #1f2937);
}

.feedback-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #1f2937);
  margin: 0 0 4px;
}

.feedback-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}

.feedback-type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.feedback-type-btn {
  flex: 1;
  padding: 8px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1f2937);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.feedback-type-btn.active {
  border-color: #f97316;
  background: rgba(249, 115, 22, 0.08);
  color: #f97316;
}

.feedback-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg, #f9fafb);
  color: var(--text, #1f2937);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.feedback-textarea:focus {
  border-color: #f97316;
}

.feedback-status-success {
  font-size: 13px;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  text-align: center;
}

.feedback-status-error {
  font-size: 13px;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.08);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  text-align: center;
}

body.dark-mode .feedback-content {
  background: #1e1e1e;
}

body.dark-mode .feedback-textarea {
  background: #181818;
  color: #e5e5e5;
  border-color: #333;
}

/* ── Onboarding Tutorial ── */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

#tutorial-overlay.hidden {
  display: none !important;
}

#tutorial-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

#tutorial-highlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#tutorial-popup {
  position: fixed;
  width: 320px;
  background: var(--bg-panel, #fff);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: auto;
  animation: tutorialPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tutorialPop {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Arrow pointing up toward the target */
#tutorial-popup.arrow-top::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 32px;
  width: 16px;
  height: 16px;
  background: var(--bg-panel, #fff);
  transform: rotate(45deg);
  border-radius: 3px;
}

#tutorial-popup.arrow-center::before {
  display: none;
}

.tutorial-step-counter {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #f97316;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

#tutorial-popup h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text, #1f2937);
  margin: 0 0 8px;
}

#tutorial-popup p {
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0 0 16px;
}

.tutorial-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tutorial-btn-skip {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
}

.tutorial-btn-skip:hover {
  color: #6b7280;
}

.tutorial-btn-next {
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.tutorial-btn-next:hover {
  background: #ea580c;
}

/* Dark mode */
body.dark-mode #tutorial-popup {
  background: #1e1e1e;
}

body.dark-mode #tutorial-popup::before {
  background: #1e1e1e;
}

body.dark-mode #tutorial-popup h3 {
  color: #e5e5e5;
}

body.dark-mode #tutorial-popup p {
  color: #999;
}

/* ── Hidden utility ── */
.hidden {
  display: none !important;
}

/* ── MapLibre overrides ── */
.maplibregl-ctrl-top-left {
  top: calc(var(--top-bar-height) + 8px);
  z-index: 2;
}
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right {
  z-index: 2;
}

.maplibregl-ctrl-group {
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
}

body.dark-mode .maplibregl-ctrl-group {
  background: var(--bg-card) !important;
}

body.dark-mode .maplibregl-ctrl-group button {
  filter: invert(1);
}

/* ══════════════════════════════════════════
   DESKTOP LAYOUT (≥ 768px)
   Single top bar with all controls.
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --top-bar-content-height: 52px;
    /* --top-bar-height auto-recomputes from --top-bar-content-height + --safe-top */
  }

  .brand-name {
    font-size: 18px;
  }

  /* Show inline controls in top bar */
  .top-bar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    margin: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-bar-controls::-webkit-scrollbar {
    display: none;
  }

  .action-divider {
    display: block;
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
  }

  /* Hide mobile-only bars */
  #action-bar,
  #category-chips,
  #day-selector {
    display: none !important;
  }

  /* Map fills full screen — bars overlay with glass */
  #map {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Detail panel — right side overlay, overflow visible for pill.
     The comment above used to claim "overflow visible" but the rule
     was actually `overflow: clip` + `overflow-clip-margin: 20px` — a
     Chrome-only combo. Safari has no overflow-clip-margin support
     and strictly clips at the padding box, which made the side pill
     (positioned at left: -14px) invisible on Safari. Switched to the
     honest `overflow: visible` now — #detail-content has its own
     overflow-y: auto so nothing bleeds. */
  #detail-panel {
    top: var(--top-bar-height);
    left: auto;
    right: 0;
    bottom: 0;
    width: 400px;
    max-height: none;
    border-radius: 0;
    border-left: 1px solid var(--border);
    overflow: visible;
    padding: 0;
  }

  #detail-panel #detail-content {
    overflow-y: auto;
    height: 100%;
    padding: 0 16px 24px;
    scrollbar-width: none;
  }

  #detail-panel #detail-content::-webkit-scrollbar {
    display: none;
  }

  #detail-panel.hidden {
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.25s ease-in;
  }

  /* List view full width below top bar */
  #list-view {
    top: var(--top-bar-height);
    left: 0;
    right: 0;
  }

  #list-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }

  /* Bottom preview — bottom bar, horizontal scroll */
  #bottom-preview {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  #preview-cards {
    flex-direction: row;
  }

  .detail-drag-handle {
    display: none;
  }
}

/* ══════════════════════════════════════════
   LARGE DESKTOP (≥ 1200px)
   ══════════════════════════════════════════ */
@media (min-width: 1200px) {
  #detail-panel {
    width: 440px;
  }

  #list-cards {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }

  .top-bar-controls {
    gap: 8px;
  }
}


/* ══════════════════════════════════════════════════════

body.dark-mode .day-dropdown-menu {
  background: rgba(30, 30, 30, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.1) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .user-dropdown {
  background: rgba(30, 30, 30, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.1) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* (chips/buttons keep their normal solid style) */

/* ── 2. Premium Card Hover ── */
.restaurant-card {
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
              border-color 0.2s;
}

.restaurant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  border-color: rgba(249, 115, 22, 0.3);
}

.restaurant-card:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.dark-mode .restaurant-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  border-color: rgba(249, 115, 22, 0.4);
}

body.dark-mode .restaurant-card:active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ══════════════════════════════════════════════════════
/* ── Design tokens (matched from client app) ── */
:root {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --active: #22c55e;
  --ending: #f59e0b;
  --ended: #94a3b8;
  --bg: #121212;
  --bg-card: #1e1e1e;
  --bg-panel: #181818;
  --bg-input: #181818;
  --text: #e5e5e5;
  --text-secondary: #999;
  --border: #2e2e2e;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Layout ── */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}

/* ── Top Bar ── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.top-bar-brand svg {
  width: 24px;
  height: 24px;
}

.top-bar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.15s;
}

.top-bar-link:hover {
  color: var(--text);
  background: var(--bg-card);
  text-decoration: none;
}

.top-bar-link.active {
  color: var(--primary);
  background: rgba(249, 115, 22, 0.1);
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.card-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card-thumbnail {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}

.card-info {
  flex: 1;
  min-width: 0;
}

.card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-address {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.card-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(249, 115, 22, 0.15);
  color: var(--primary);
}

.card-badge.green {
  background: rgba(34, 197, 94, 0.15);
  color: var(--active);
}

/* ── Card List ── */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-full {
  width: 100%;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
}

.btn-danger {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border: 1.5px solid rgba(220, 38, 38, 0.3);
}

.btn-danger:hover {
  background: rgba(220, 38, 38, 0.25);
}

/* ── Forms ── */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #555;
}

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

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── Tabs ── */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-card);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  background: var(--primary);
  color: #fff;
}

.tab-content {
  display: none;
  animation: fadeInUp 0.3s ease;
  overflow: hidden;
}

.tab-content.active {
  display: block;
  overflow: visible;
}

/* ── Section Headers ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
}

/* ── Special Cards ── */
.special-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.special-card.active-special {
  border-color: var(--active);
  border-width: 2px;
}

.special-card.verified-special {
  border-color: var(--active);
  background: rgba(34, 197, 94, 0.03);
}

.special-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.special-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.special-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.special-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.special-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.special-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(249, 115, 22, 0.1);
  color: var(--primary);
}

.special-tag.day {
  background: rgba(34, 197, 94, 0.1);
  color: var(--active);
}

.special-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* ── Search ── */
.search-container {
  position: relative;
  margin-bottom: 16px;
}

.search-input {
  display: block;
  width: 100%;
  padding: 12px 14px 12px 40px;
  background: var(--bg-card);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}

.search-input:focus {
  border-color: var(--primary);
}

.search-input::placeholder {
  color: #555;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.search-results {
  margin-top: 12px;
}

/* ── Featured Upgrade ── */
.featured-preview {
  background: var(--bg-card);
  border: 2px solid var(--primary);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.featured-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.featured-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f97316, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.featured-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  margin: 8px 0;
}

.featured-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.featured-benefits {
  list-style: none;
  text-align: left;
  margin: 20px 0;
}

.featured-benefits li {
  font-size: 14px;
  color: var(--text);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-benefits li:last-child {
  border-bottom: none;
}

.featured-check {
  color: var(--active);
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Photo Grid ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--border);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  aspect-ratio: 1;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

.photo-upload:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.photo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.photo-card:hover {
  border-color: var(--primary);
}

.photo-action-btn {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}

.photo-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.photo-action-btn.active {
  background: rgba(249, 115, 22, 0.12);
  border-color: #f97316;
  color: #f97316;
}

.photo-delete-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* ── Verification ── */
.verify-step {
  text-align: center;
  padding: 32px 16px;
}

.verify-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.verify-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.verify-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ── Toast Notifications ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
}

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

.toast.success {
  border-color: var(--active);
}

.toast.error {
  border-color: #dc2626;
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .page {
    padding: 12px;
  }

  .tabs {
    gap: 2px;
  }

  .tab {
    padding: 8px 8px;
    font-size: 12px;
  }

  .card-thumbnail {
    width: 48px;
    height: 48px;
  }

  .top-bar-brand {
    font-size: 16px;
  }
}

/* ── Edit Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-panel);
  border-radius: 16px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ══════════════════════════════════════════════════════
   UNIFIED TOP NAV — Public App
   ══════════════════════════════════════════════════════ */

.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1e1e1e;
}

.top-nav.transparent {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.top-nav-brand {
  font-size: 18px;
  font-weight: 800;
  color: #f97316;
  text-decoration: none;
  letter-spacing: -0.3px;
}

.top-nav-brand:hover { text-decoration: none; }

.top-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-nav-link {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #999;
  text-decoration: none;
  transition: all 0.15s;
}

.top-nav-link:hover {
  color: #e5e5e5;
  text-decoration: none;
}

.top-nav-link.active {
  color: #f97316;
}

.top-nav-link.cta {
  background: #f97316;
  color: #fff;
  margin-left: 4px;
}

.top-nav-link.cta:hover {
  background: #ea580c;
}

/* Mobile hamburger */
.top-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #e5e5e5;
  cursor: pointer;
  padding: 4px;
}

.top-nav-mobile-menu {
  display: none;
  position: fixed;
  top: 56px; left: 0; right: 0;
  background: #181818;
  border-bottom: 1px solid #2e2e2e;
  padding: 8px 16px;
  z-index: 999;
  flex-direction: column;
  gap: 4px;
}

.top-nav-mobile-menu.open {
  display: flex;
}

.top-nav-mobile-menu .top-nav-link {
  display: block;
  padding: 12px 16px;
}

/* Body offset for fixed nav (non-map pages) */
body.has-nav {
  padding-top: 56px;
}

@media (max-width: 768px) {
  .top-nav-links { display: none; }
  .top-nav-toggle { display: block; }
  .top-nav { padding: 0 16px; }
}

/* Hide the wordmark on very narrow phones so it doesn't crowd the hamburger */
@media (max-width: 420px) {
  .top-nav-wordmark { display: none; }
}

/* ══════════════════════════════════════════════════════
   PAGE LAYOUTS — Public App
   ══════════════════════════════════════════════════════ */

.page-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
  min-height: calc(100vh - 56px);
}

/* Deals page — map takes full screen under nav */
body.deals-page {
  padding-top: 0;
}

body.deals-page .top-nav {
  background: transparent;
  border-bottom: none;
}

body.deals-page #map {
  top: 0;
}