:root {
  --emerald: #0D5C3A;
  --emerald-dark: #083D26;
  --emerald-light: #13774C;
  --emerald-glow: rgba(13, 92, 58, 0.25);
  
  --sun-gold: #F3A712;
  --sun-light: #F8D36A;
  --papaya: #EB6841;
  --papaya-dark: #D4502A;
  
  --linen: #FAF7F2;
  --linen-dark: #F2EFE8;
  --card-bg: #FFFFFF;
  --text-main: #1C2229;
  --text-muted: #64748B;
  --border-light: rgba(13, 92, 58, 0.12);
  
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 92, 58, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background-color: var(--linen);
  color: var(--text-main);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ==========================================================================
   Header Navigation
   ========================================================================== */
.app-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  background: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
}

.brand-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.brand-logo-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-pau-hana {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--emerald);
}

.brand-hunter {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--emerald);
}

/* Search Bar */
.search-container {
  flex: 1;
  max-width: 440px;
  margin: 0 24px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--emerald);
  opacity: 0.6;
}

.search-container input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.search-container input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-glow);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tm-header-btn {
  background: #FFFFFF;
  border: 1.5px solid var(--emerald);
  color: var(--emerald-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.tm-header-btn:hover {
  background: var(--emerald);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.2);
}

.tm-header-btn.active {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald-dark);
  box-shadow: 0 0 0 3px var(--emerald-glow);
}

.tm-header-btn .tm-btn-icon {
  font-size: 14px;
}

.today-ph-header-btn {
  background: #FFFFFF;
  border: 1.5px solid var(--emerald);
  color: var(--emerald-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.today-ph-header-btn:hover {
  background: var(--emerald-light, #13774A);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.2);
}

.today-ph-header-btn.active {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald-dark);
  box-shadow: 0 0 0 3px var(--emerald-glow);
}

.today-ph-header-btn .today-btn-icon {
  font-size: 14px;
}

.creator-btn {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  color: var(--emerald-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.creator-btn:hover {
  background: var(--linen-dark);
  border-color: var(--emerald);
  transform: translateY(-1px);
}

.admin-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.admin-link:hover {
  color: var(--emerald);
  background: rgba(13, 92, 58, 0.08);
}

/* ==========================================================================
   Pinned Deal of the Day Card (Inside Sidebar Feed at Top)
   ========================================================================== */
.sidebar-card.spotlight-pinned-card {
  position: sticky;
  top: -12px;
  z-index: 25;
  background: #FFFFFF;
  border: 1.5px solid #C5A059;
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.22), 0 2px 6px rgba(27, 56, 43, 0.08);
}

.sidebar-card.spotlight-pinned-card:hover {
  transform: translateY(-2px);
  background: #FFFDF8;
  border-color: #B58F45;
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.32), 0 3px 8px rgba(27, 56, 43, 0.12);
}

.sidebar-card.spotlight-pinned-card.selected {
  background: #FAF5E6;
  border-color: var(--sun-gold, #F3A712);
  box-shadow: 0 0 0 2.5px var(--sun-gold, #F3A712), 0 8px 24px rgba(243, 167, 18, 0.25);
}

/* Deal of the Day 76x76 Thumbnail Wrapper */
.sidebar-card .thumb-wrapper.spotlight-thumb-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.sidebar-card .thumb-wrapper.spotlight-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(27, 56, 43, 0.18));
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-card:hover .thumb-wrapper.spotlight-thumb-wrapper img {
  transform: scale(1.06);
}

/* ==========================================================================
   App Layout (Non-Overlapping Full-Height Sidebar + Map Viewport)
   ========================================================================== */
.app-layout {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: calc(100vh - 68px);
}



.map-viewport {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: #4E99A5;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #4E99A5;
  z-index: 1;
}

/* Custom Mid-Century Vector Cartography (Pure Flat Color Modernist Style) */
.leaflet-tile-pane {
  display: none;
}

/* ==========================================================================
   Sidebar Time Machine & Day Planner
   ========================================================================== */
.sidebar-tm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: var(--linen);
  border-bottom: 1px solid rgba(13, 92, 58, 0.08);
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sidebar-tm-bar:hover {
  background: var(--linen-dark);
}

.sidebar-tm-bar.active {
  background: rgba(13, 92, 58, 0.07);
  border-bottom-color: rgba(13, 92, 58, 0.16);
}

.sb-tm-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-tm-icon {
  font-size: 14px;
}

.sb-tm-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.sb-tm-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-tm-active-tag {
  font-size: 10px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--papaya);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sb-tm-chevron {
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-tm-bar.active .sb-tm-chevron {
  transform: rotate(180deg);
  color: var(--emerald);
}

/* Mobile-only Events secondary controls & dropdown (Hidden on desktop to preserve desktop layout) */
.events-secondary-controls,
.events-type-dropdown {
  display: none;
}

.sidebar-time-machine {
  background: linear-gradient(180deg, #FAF7F2 0%, #F5EFE6 100%);
  border-bottom: 1.5px solid var(--border-light);
  padding: 14px 18px 12px 18px;
  flex-shrink: 0;
  overflow: hidden;
  overflow-x: hidden;
  max-height: 520px;
  opacity: 1;
  box-sizing: border-box;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              padding 0.32s ease;
}

.sidebar-time-machine.minimized {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-bottom: none;
  pointer-events: none;
}

.tm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tm-title-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tm-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  background: var(--emerald);
  color: #FFFFFF;
  padding: 2.5px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.tm-title-zone h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-counter-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.venues-count-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald-dark);
  background: rgba(13, 92, 58, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.tm-minimize-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(235, 104, 65, 0.1);
  border: 1px solid rgba(235, 104, 65, 0.3);
  color: var(--papaya-dark);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tm-minimize-btn:hover {
  background: var(--papaya);
  color: #FFFFFF;
  border-color: var(--papaya);
}

.day-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  overflow-x: hidden;
  box-sizing: border-box;
}

.day-pill {
  width: 100%;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  padding: 5px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  box-sizing: border-box;
}

.day-pill:hover {
  background: var(--linen-dark);
  color: var(--text-main);
}

.day-pill.active {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
  box-shadow: 0 1px 4px var(--emerald-glow);
}

.range-slider-container {
  position: relative;
  height: 26px;
  margin: 2px 2px;
  display: flex;
  align-items: center;
}

.slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background: #E2E8F0;
  border-radius: 999px;
}

.slider-highlight {
  position: absolute;
  height: 5px;
  background: var(--emerald);
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 0 8px var(--emerald-glow);
}

.range-slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  pointer-events: none;
  -webkit-appearance: none;
  background: none;
  z-index: 3;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.5px solid var(--emerald);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  cursor: grab;
  transition: transform 0.1s;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.15);
  cursor: grabbing;
}

.time-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 3px;
  padding: 0 2px;
  overflow: hidden;
  box-sizing: border-box;
}

.golden-mark {
  color: var(--sun-gold);
  font-weight: 700;
}

/* Quick Presets — Tiled 2-Column Grid (Zero Horizontal Scrolling) */
.quick-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
  overflow-x: hidden;
  box-sizing: border-box;
}

.preset-pill {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.14);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.preset-pill:hover {
  background: var(--linen-dark);
  border-color: var(--emerald);
  color: var(--emerald-dark);
}

.preset-pill.active {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald-dark);
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.25);
}

.preset-pill.preset-live.active,
.preset-pill[data-preset="now"].active {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border-color: #B45309;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

/* ==========================================================================
   Teardrop Map Markers & Floating Activity Markers (Direction 1 Refined)
   ========================================================================== */
.teardrop-pin-wrapper {
  background: none !important;
  border: none !important;
}

.teardrop-pin-container {
  position: relative;
  width: 38px;
  height: 52px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: none !important;
}

.teardrop-pin-container:hover {
  transform: scale(1.18) translateY(-6px);
  filter: none !important;
  z-index: 99999 !important;
}

.teardrop-pin-container.pin-dormant {
  width: 28.5px;
  height: 39px;
  opacity: 0.85;
  filter: none !important;
}

.teardrop-pin-container.pin-dormant:hover {
  opacity: 1;
  transform: scale(1.15) translateY(-4px);
  filter: none !important;
}

.teardrop-pin-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating No-Pin Activity Markers (Flash Deals, Music, Trivia, Sports, Party Horn) */
.floating-marker-container {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: none !important; /* CRITICAL: Zero black glow on pure floating markers */
}

.pin-event-music,
.floating-marker-container.pin-event-music,
.pin-event-trivia,
.floating-marker-container.pin-event-trivia,
.pin-event-sports,
.floating-marker-container.pin-event-sports,
.pin-event-party,
.floating-marker-container.pin-event-party {
  filter: none !important;
}

.floating-marker-container:hover {
  transform: scale(1.22) translateY(-4px);
  filter: none !important;
  z-index: 99999 !important;
}

.pin-event-music:hover,
.floating-marker-container.pin-event-music:hover,
.pin-event-trivia:hover,
.floating-marker-container.pin-event-trivia:hover,
.pin-event-sports:hover,
.floating-marker-container.pin-event-sports:hover,
.pin-event-party:hover,
.floating-marker-container.pin-event-party:hover {
  filter: none !important;
}

.floating-marker-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Flash Deals Active Markers (Pulsing Lightning Bolt, No Pin) */
.floating-marker-container.pin-flash-active {
  animation: flashBoltPulse 1.6s ease-in-out infinite;
  z-index: 99999 !important;
}

@keyframes flashBoltPulse {
  0% {
    transform: scale(1.0);
    filter: none;
  }
  50% {
    transform: scale(1.16) translateY(-2px);
    filter: none;
  }
  100% {
    transform: scale(1.0);
    filter: none;
  }
}

/* User-Favorited / Saved Spots Markers (Flush Red Outline) */
.teardrop-pin-container.pin-saved-active {
  filter: none !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.teardrop-pin-container.pin-saved-active:hover {
  transform: scale(1.22) translateY(-5px) !important;
  filter: none !important;
  z-index: 99999 !important;
}

.teardrop-pin-container.pin-saved-inactive {
  opacity: 0.95;
  filter: none !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.teardrop-pin-container.pin-saved-inactive:hover {
  opacity: 1;
  transform: scale(1.18) translateY(-4px);
  filter: none !important;
  z-index: 9999 !important;
}

.icon-saved-active,
.icon-saved-inactive {
  font-size: 13.5px;
  filter: none !important;
}

/* ==========================================================================
   Active Selected Venue Pin (Enlarged with Blue Outline)
   ========================================================================== */
.teardrop-pin-container.active-venue-pin {
  transform: scale(1.38) translateY(-8px) !important;
  z-index: 99999 !important;
  filter: none !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.teardrop-pin-container.active-venue-pin .teardrop-pin-svg path {
  stroke: #2563EB !important;
  stroke-width: 3.5px !important;
}

/* Dormant / Directory Venue Pin (Unclaimed / No Active Deal) */
.teardrop-pin-container.pin-dormant {
  width: 28.5px;
  height: 39px;
  opacity: 0.85;
  filter: none !important;
}

.teardrop-pin-container.pin-dormant:hover {
  opacity: 1;
  transform: scale(1.15) translateY(-4px);
  filter: none !important;
}

/* ==========================================================================
   Zero Shadow Directive for General Map Markers & Icons (Excludes First 30)
   ========================================================================== */
.teardrop-pin-wrapper:not(.is-first-30),
.teardrop-pin-wrapper:not(.is-first-30) *,
.teardrop-pin-container:not(.is-first-30),
.teardrop-pin-container:not(.is-first-30) *,
.floating-marker-container:not(.is-first-30):not(.is-saved-venue),
.floating-marker-container:not(.is-first-30):not(.is-saved-venue) *,
.floating-marker-svg:not(.is-first-30):not(.is-saved-svg),
.floating-marker-svg:not(.is-first-30):not(.is-saved-svg) *,
.teardrop-pin-svg:not(.is-first-30),
.teardrop-pin-svg:not(.is-first-30) *,
.nh-cluster-marker,
.nh-cluster-marker *,
.regional-summary-marker,
.regional-summary-marker *,
.regional-pair-container,
.regional-pair-container *,
.grey-cluster-marker,
.grey-cluster-marker *,
.legend-pin-svg:not(.is-first-30),
.legend-pin-svg:not(.is-first-30) * {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* ==========================================================================
   First 30 Founding Venues — Precision Perimeter Outline Glow (All Pin Types)
   ========================================================================== */
.teardrop-pin-wrapper.is-first-30,
.teardrop-pin-container.is-first-30,
.floating-marker-container.is-first-30 {
  overflow: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Tight perimeter contour glow applied directly to SVG shapes & transparent icons */
.teardrop-pin-svg.is-first-30,
.floating-marker-svg.is-first-30,
.is-first-30 > .teardrop-pin-svg,
.is-first-30 > .floating-marker-svg,
.is-first-30 .teardrop-pin-svg,
.is-first-30 .floating-marker-svg {
  overflow: visible !important;
  filter: drop-shadow(0 0 1.5px rgba(245, 158, 11, 0.95))
          drop-shadow(0 0 4px rgba(217, 119, 6, 0.65))
          drop-shadow(0 1.5px 3px rgba(180, 83, 9, 0.45)) !important;
  -webkit-filter: drop-shadow(0 0 1.5px rgba(245, 158, 11, 0.95))
                  drop-shadow(0 0 4px rgba(217, 119, 6, 0.65))
                  drop-shadow(0 1.5px 3px rgba(180, 83, 9, 0.45)) !important;
  animation: first30GoldenPulse 3s ease-in-out infinite;
  will-change: filter;
}

.floating-marker-svg.is-first-30 image,
.is-first-30 .floating-marker-svg image {
  overflow: visible !important;
}

/* Dormant / Off-Hours First 30 pins: crisp opacity & outlined slate silhouette */
.teardrop-pin-container.pin-dormant.is-first-30 {
  opacity: 0.96 !important;
}

/* Hover state: subtle perimeter intensification */
.teardrop-pin-container.is-first-30:hover .teardrop-pin-svg,
.floating-marker-container.is-first-30:hover .floating-marker-svg,
.teardrop-pin-wrapper.is-first-30:hover .teardrop-pin-svg,
.teardrop-pin-wrapper.is-first-30:hover .floating-marker-svg {
  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 1))
          drop-shadow(0 0 5.5px rgba(217, 119, 6, 0.85))
          drop-shadow(0 2px 4px rgba(180, 83, 9, 0.55)) !important;
  -webkit-filter: drop-shadow(0 0 2px rgba(245, 158, 11, 1))
                  drop-shadow(0 0 5.5px rgba(217, 119, 6, 0.85))
                  drop-shadow(0 2px 4px rgba(180, 83, 9, 0.55)) !important;
}

/* Active Selected Venue Pin for First 30 */
.teardrop-pin-container.active-venue-pin.is-first-30 .teardrop-pin-svg,
.floating-marker-container.active-venue-pin.is-first-30 .floating-marker-svg {
  filter: drop-shadow(0 0 2.5px rgba(245, 158, 11, 1))
          drop-shadow(0 0 6.5px rgba(217, 119, 6, 0.9))
          drop-shadow(0 2px 4.5px rgba(180, 83, 9, 0.6)) !important;
  -webkit-filter: drop-shadow(0 0 2.5px rgba(245, 158, 11, 1))
                  drop-shadow(0 0 6.5px rgba(217, 119, 6, 0.9))
                  drop-shadow(0 2px 4.5px rgba(180, 83, 9, 0.6)) !important;
}

/* ==========================================================================
   Saved Activity Markers (Flash Deals, Music, Trivia, Sports, Party Horn)
   Precision Perimeter Contour Outlines (Non-First Wave and First Wave)
   ========================================================================== */
/* Saved + Non-First Wave: Crisp Red Perimeter Contour Outline (75% Delicacy Reduction) */
.floating-marker-container.is-saved-venue:not(.is-first-30) .floating-marker-svg,
.floating-marker-svg.is-saved-svg:not(.is-first-30) {
  overflow: visible !important;
  filter: drop-shadow(0 0 0.6px #DC2626) !important;
  -webkit-filter: drop-shadow(0 0 0.6px #DC2626) !important;
}

/* Saved + First 30 Founding Venues: Delicate Red Contour + Radiating Golden Pulse Glow */
.floating-marker-container.is-saved-venue.is-first-30 .floating-marker-svg,
.floating-marker-svg.is-first-30.is-saved-svg {
  overflow: visible !important;
  filter: drop-shadow(0 0 0.5px #DC2626)
          drop-shadow(0 0 1.6px rgba(245, 158, 11, 0.95))
          drop-shadow(0 0 4.2px rgba(217, 119, 6, 0.65))
          drop-shadow(0 1.5px 3px rgba(180, 83, 9, 0.45)) !important;
  -webkit-filter: drop-shadow(0 0 0.5px #DC2626)
                  drop-shadow(0 0 1.6px rgba(245, 158, 11, 0.95))
                  drop-shadow(0 0 4.2px rgba(217, 119, 6, 0.65))
                  drop-shadow(0 1.5px 3px rgba(180, 83, 9, 0.45)) !important;
  animation: first30GoldenPulse 3s ease-in-out infinite;
  will-change: filter;
}

/* Hover & Active States for Saved First 30 Floating Markers */
.floating-marker-container.is-saved-venue.is-first-30:hover .floating-marker-svg,
.teardrop-pin-wrapper.is-first-30:hover .floating-marker-container.is-saved-venue .floating-marker-svg {
  filter: drop-shadow(0 0 0.7px #DC2626)
          drop-shadow(0 0 2px rgba(245, 158, 11, 1))
          drop-shadow(0 0 5.5px rgba(217, 119, 6, 0.85))
          drop-shadow(0 2px 4px rgba(180, 83, 9, 0.55)) !important;
  -webkit-filter: drop-shadow(0 0 0.7px #DC2626)
                  drop-shadow(0 0 2px rgba(245, 158, 11, 1))
                  drop-shadow(0 0 5.5px rgba(217, 119, 6, 0.85))
                  drop-shadow(0 2px 4px rgba(180, 83, 9, 0.55)) !important;
}

.floating-marker-container.active-venue-pin.is-saved-venue.is-first-30 .floating-marker-svg {
  filter: drop-shadow(0 0 0.8px #DC2626)
          drop-shadow(0 0 2.5px rgba(245, 158, 11, 1))
          drop-shadow(0 0 6.5px rgba(217, 119, 6, 0.9))
          drop-shadow(0 2px 4.5px rgba(180, 83, 9, 0.6)) !important;
  -webkit-filter: drop-shadow(0 0 0.8px #DC2626)
                  drop-shadow(0 0 2.5px rgba(245, 158, 11, 1))
                  drop-shadow(0 0 6.5px rgba(217, 119, 6, 0.9))
                  drop-shadow(0 2px 4.5px rgba(180, 83, 9, 0.6)) !important;
}

/* Legend Golden Glow preview */
.legend-first-30-glow,
.legend-first-30-glow .legend-pin-svg {
  filter: drop-shadow(0 0 1px rgba(245, 158, 11, 0.95))
          drop-shadow(0 0 3px rgba(217, 119, 6, 0.7)) !important;
  -webkit-filter: drop-shadow(0 0 1px rgba(245, 158, 11, 0.95))
                  drop-shadow(0 0 3px rgba(217, 119, 6, 0.7)) !important;
}

@keyframes first30GoldenPulse {
  0%, 100% {
    filter: drop-shadow(0 0 1.5px rgba(245, 158, 11, 0.95))
            drop-shadow(0 0 3.5px rgba(217, 119, 6, 0.65))
            drop-shadow(0 1.5px 3px rgba(180, 83, 9, 0.45)) !important;
    -webkit-filter: drop-shadow(0 0 1.5px rgba(245, 158, 11, 0.95))
                    drop-shadow(0 0 3.5px rgba(217, 119, 6, 0.65))
                    drop-shadow(0 1.5px 3px rgba(180, 83, 9, 0.45)) !important;
  }
  50% {
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 1))
            drop-shadow(0 0 5px rgba(217, 119, 6, 0.75))
            drop-shadow(0 2px 3.5px rgba(180, 83, 9, 0.5)) !important;
    -webkit-filter: drop-shadow(0 0 2px rgba(245, 158, 11, 1))
                    drop-shadow(0 0 5px rgba(217, 119, 6, 0.75))
                    drop-shadow(0 2px 3.5px rgba(180, 83, 9, 0.5)) !important;
  }
}

/* Claim CTA in Sidebar & Modal */
.sb-detail-claim-card {
  background: linear-gradient(135deg, rgba(13, 92, 58, 0.07) 0%, rgba(243, 167, 18, 0.1) 100%);
  border: 1.5px dashed var(--emerald);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sb-detail-claim-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.12);
}

/* ==========================================================================
   Neighborhood Cluster Badges at Macro Zoom (< 12.8, e.g. 11.5)
   ========================================================================== */
.nh-cluster-marker-wrapper {
  background: none !important;
  border: none !important;
}

.nh-cluster-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  filter: none !important;
}

.nh-cluster-marker:hover {
  transform: scale(1.15);
  z-index: 9999 !important;
}

.nh-cluster-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--emerald);
  border: 2.5px solid #FFDD00;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.nh-cluster-marker:hover .nh-cluster-circle {
  background: var(--emerald-dark);
  border-color: #FFE500;
  box-shadow: none !important;
}

.nh-cluster-number {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nh-cluster-label {
  margin-top: 4px;
  background: rgba(250, 246, 237, 0.96);
  backdrop-filter: blur(4px);
  color: var(--emerald-dark);
  border: 1px solid rgba(13, 92, 58, 0.2);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none !important;
  pointer-events: none;
  transition: all 0.2s ease;
}

.nh-cluster-marker:hover .nh-cluster-label {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
}

/* ==========================================================================
   Regional Green Summary Total Pins at Macro Zoom (< 13.5, e.g. 11.5)
   Single active emerald circular badge with bright yellow border & region pill
   ========================================================================== */
.regional-summary-marker-wrapper,
.regional-pair-marker-wrapper {
  background: none !important;
  border: none !important;
}

.regional-summary-marker,
.regional-pair-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  filter: none !important;
}

.regional-summary-marker:hover,
.regional-pair-container:hover {
  transform: scale(1.14);
  z-index: 9999 !important;
}

.regional-summary-circle,
.regional-circle.active-green {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--emerald);
  border: 2.8px solid #FFDD00;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.regional-summary-marker:hover .regional-summary-circle,
.regional-pair-container:hover .regional-circle.active-green {
  background: var(--emerald-dark);
  border-color: #FFE500;
  box-shadow: none !important;
}

.regional-summary-number,
.regional-circle-number {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.regional-summary-label,
.regional-pair-label {
  margin-top: 4px;
  background: rgba(250, 246, 237, 0.96);
  backdrop-filter: blur(4px);
  color: var(--emerald-dark);
  border: 1.5px solid rgba(13, 92, 58, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none !important;
  pointer-events: none;
  transition: all 0.2s ease;
}

.regional-summary-marker:hover .regional-summary-label,
.regional-pair-container:hover .regional-pair-label {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
}

/* Inactive Directory Grey Cluster Marker (Zoom 14.0 - 16.4) */
.grey-cluster-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  filter: none !important;
}

.grey-cluster-marker:hover {
  transform: scale(1.15);
  z-index: 9999 !important;
}

.grey-cluster-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #64748B;
  border: 2px solid #FFFFFF;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.grey-cluster-marker:hover .grey-cluster-circle {
  background: #475569;
  border-color: #F1F5F9;
  box-shadow: none !important;
}

.grey-cluster-number {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.grey-cluster-label {
  margin-top: 3px;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(4px);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 1px 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none !important;
  pointer-events: none;
}

/* ==========================================================================
   Mid-Century Pin Hover Popup (Venue, Time, Signature Feature)
   ========================================================================== */
.leaflet-tooltip.midcentury-hover-tooltip {
  background: #FFFFFF !important;
  border: 1.5px solid var(--emerald);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(13, 92, 58, 0.12);
  padding: 12px 14px;
  font-family: var(--font-body);
  color: var(--text-main);
  white-space: normal;
  width: 245px;
  pointer-events: none;
}

.leaflet-tooltip-top.midcentury-hover-tooltip:before {
  border-top-color: var(--emerald);
}
.leaflet-tooltip-bottom.midcentury-hover-tooltip:before {
  border-bottom-color: var(--emerald);
}

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

.hover-venue-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--emerald-dark);
  line-height: 1.2;
}

.hover-status-pill {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.hover-status-pill.live,
.hover-status-pill.full_coverage {
  background: #FEF3C7;
  color: #78350F;
  border: 1px solid #F59E0B;
}

.hover-status-pill.flash {
  background: #FEF08A;
  color: #78350F;
  border: 1.5px solid #EAB308;
  box-shadow: 0 1px 4px rgba(234, 179, 8, 0.25);
}

.hover-status-pill.special {
  background: #FFEDD5;
  color: #9A3412;
  border: 1px solid #FB923C;
}

.hover-status-pill.starts_later,
.hover-status-pill.starts_soon {
  background: #FEF9C3;
  color: #713F12;
  border: 1px solid #FDE047;
}

.hover-status-pill.ends_early,
.hover-status-pill.ends_soon {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #F87171;
}

.hover-card-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.hover-card-feature {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--emerald-dark);
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 6px;
}

.hover-card-feature .feature-star {
  color: var(--sun-gold);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.hover-card-cta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--papaya);
  text-align: right;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Pau Hana Sidebar — Permanent Island Feed & Expandable Detail Panel
   ========================================================================== */
.pau-hana-sidebar {
  width: 460px;
  height: 100%;
  flex-shrink: 0;
  background: #FFFFFF;
  border-right: 1.5px solid var(--border-light);
  border-radius: 0;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  z-index: 500;
  overflow: hidden;
  overflow-x: hidden;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
  margin-left: 0;
  position: relative;
  box-sizing: border-box;
}

.pau-hana-sidebar,
.pau-hana-sidebar * {
  box-sizing: border-box;
}

.pau-hana-sidebar.expanded-detail {
  width: 920px;
  max-width: calc(100vw - 80px);
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.09);
}

/* Sidebar Header */
.sidebar-header {
  padding: 16px 18px 12px 18px;
  border-bottom: 1px solid rgba(13, 92, 58, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(250, 247, 242, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.sidebar-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--emerald-dark);
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: livePulse 2s infinite;
  transition: all 0.25s ease;
}

.sidebar-status-pill.is-live-mode {
  color: #92400E;
}

.sidebar-status-pill.is-live-mode .status-pulse-dot {
  background: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
  animation: goldDotPulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes livePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes goldDotPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.75);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.sidebar-heading {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-counter-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald-dark);
  background: rgba(13, 92, 58, 0.09);
  padding: 4px 9px;
  border-radius: 999px;
  transition: all 0.25s ease;
}

.sidebar-counter-badge.is-loading {
  color: #B45309;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  animation: countBadgePulse 1.6s ease-in-out infinite alternate;
}

@keyframes countBadgePulse {
  0% { opacity: 0.65; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1.02); }
}

/* Sidebar Quick View Toggle (Happening Now vs Today's Pau Hana's) */
.sidebar-view-toggle {
  display: flex;
  align-items: center;
  padding: 8px 14px 4px;
  background: #F4EFE6;
  gap: 8px;
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

.sidebar-secondary-controls,
.sidebar-network-toggle-wrap {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}

.btn-network-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6.5px 12px;
  background: rgba(13, 92, 58, 0.04);
  border: 1px solid rgba(13, 92, 58, 0.12);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.1px;
  box-sizing: border-box;
}

.btn-network-toggle .network-toggle-icon {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}

.btn-network-toggle:hover {
  background: rgba(13, 92, 58, 0.08);
  border-color: rgba(13, 92, 58, 0.22);
  color: var(--emerald-dark);
}

.btn-network-toggle.active {
  background: rgba(13, 92, 58, 0.11);
  border: 1.5px solid rgba(13, 92, 58, 0.38);
  color: var(--emerald-dark);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(13, 92, 58, 0.08);
}

.sb-view-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.14);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.sb-view-btn .view-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94A3B8;
  transition: all 0.18s ease;
}

.sb-view-btn:hover {
  border-color: var(--emerald);
  color: var(--emerald-dark);
  background: #FAF7F2;
}

/* Today's Pau Hana's (Active: Island Emerald) */
#view-btn-today.active {
  background: var(--emerald);
  border-color: var(--emerald-dark);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(13, 92, 58, 0.22);
}

#view-btn-today.active .view-dot {
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
}

/* Live Now View Button (Active: Gold with Pulsing Gold Indicator) */
#view-btn-now:hover:not(.active) {
  border-color: #F59E0B;
  color: #B45309;
  background: #FFFBEB;
}

#view-btn-now:hover:not(.active) .view-dot {
  background: #F59E0B;
}

#view-btn-now.active {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border-color: #B45309;
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
}

#view-btn-now.active .view-dot {
  background: #FACC15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);
  animation: goldDotPulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Feature Tabs Bar — Tiled 2x2 Grid for Zero Horizontal Scrolling */
.sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 10px 14px;
  background: #FAF8F5;
  border-bottom: 1px solid rgba(13, 92, 58, 0.08);
  overflow-x: hidden;
  box-sizing: border-box;
}

.sb-tab-btn {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.14);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.sb-tab-btn:hover {
  border-color: var(--emerald);
  color: var(--emerald-dark);
  background: var(--linen);
}

.sb-tab-btn.active {
  background: var(--emerald);
  border-color: var(--emerald-dark);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.22);
}

/* Scrollable Venue Feed */
.sidebar-venue-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 92, 58, 0.2) transparent;
  box-sizing: border-box;
}

.sidebar-venue-list::-webkit-scrollbar {
  width: 5px;
}

.sidebar-venue-list::-webkit-scrollbar-thumb {
  background: rgba(13, 92, 58, 0.2);
  border-radius: 999px;
}

/* Venue Feed Cards (Concept 1 Architectural Upgrade) */
.sidebar-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light, #E5E1DA);
  border-radius: 14px;
  padding: 10px 11px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  min-height: min-content;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sidebar-card:hover {
  transform: translateY(-2px);
  background: #EBF5FE;
  border-color: #BAE6FD;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.09);
}

.sidebar-card.selected {
  background: #D9EDFD;
  border-color: #7DD3FC;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.12);
}

.sidebar-card.selected:hover {
  background: #D0E7FC;
}

/* Regional Landmark Thumbnail Wrapper */
.sidebar-card .thumb-wrapper {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #E5E1DA;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.sidebar-card .thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}

.sidebar-card:hover .thumb-wrapper img {
  transform: scale(1.05);
}

/* Regular Venues: Grey Thumbnail Box ("No Photos Yet") */
.sidebar-card .thumb-wrapper.no-photos-thumb {
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  box-sizing: border-box;
}

.sidebar-card .thumb-wrapper.no-photos-thumb .no-photos-text {
  font-size: 10px;
  font-weight: 800;
  color: #64748B;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--font-body);
}

/* Venue Card Content Column */
.sidebar-card .card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  overflow: visible;
}

/* Line 1: Venue Name + Area Badge + Favorite Heart Button */
.sidebar-card .card-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  overflow: visible;
}

.sidebar-card .card-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.sidebar-card .venue-name,
.sidebar-card .sb-venue-name {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #18181B;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.25;
}

.sidebar-card .area-badge,
.sidebar-card .sb-card-neighborhood {
  font-family: var(--font-heading, sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6.5px;
  background: #F4EFEA;
  color: #78716C;
  border-radius: 5px;
  border: 1px solid #E7E2DA;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.1;
}

/* Line 2: Tagline / Cuisine Summary */
.sidebar-card .venue-tagline {
  font-family: var(--font-body, sans-serif);
  font-size: 11.5px;
  color: var(--text-muted, #71717A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-card .venue-tagline strong {
  font-weight: 700;
  color: var(--text-main, #18181B);
}

/* Line 3: Bottom Row with Status Notification & See Menu CTA */
.sidebar-card .card-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
  width: 100%;
  min-width: 0;
}

.sidebar-card .timing-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

/* Status Notification Pills */
.sidebar-card .pill-badge,
.sb-timing-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 1.5px 6px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.sidebar-card .pill-live,
.sb-timing-badge.badge-live {
  background: #FEF3C7;
  color: #78350F;
  border: 1px solid #F59E0B;
}

.sidebar-card .pill-starting,
.sb-timing-badge.badge-starting {
  background: #FEF9C3;
  color: #713F12;
  border: 1px solid #FDE047;
}

.sidebar-card .pill-ending,
.sb-timing-badge.badge-ending {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #F87171;
}

.sidebar-card .pill-special,
.sb-timing-badge.badge-special {
  background: #FFEDD5;
  color: #9A3412;
  border: 1px solid #FB923C;
}

.sidebar-card .pill-ended,
.sb-timing-badge.badge-ended {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #CBD5E1;
}

.sidebar-card .pill-flash,
.sb-timing-badge.badge-flash {
  background: #FEF08A;
  color: #78350F;
  border: 1.5px solid #EAB308;
  box-shadow: 0 1px 4px rgba(234, 179, 8, 0.25);
}

.sidebar-card .pill-event,
.sb-timing-badge.badge-event {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

/* Hours Display */
.sidebar-card .hours-txt,
.sb-meta-hours {
  font-size: 11px;
  font-weight: 600;
  color: #52525B;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* See Menu & More Action CTA */
.sidebar-card .cta-link,
.sb-see-menu-btn {
  font-family: var(--font-body, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #EA580C;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  padding: 1.5px 4px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-card .cta-link .sb-action-arrow,
.sb-see-menu-btn .sb-action-arrow {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  stroke: currentColor;
}

.sidebar-card:hover .cta-link,
.sidebar-card:hover .sb-see-menu-btn {
  color: #C2410C;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(2, 132, 199, 0.25);
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.08);
}

.sidebar-card:hover .cta-link .sb-action-arrow,
.sidebar-card:hover .sb-see-menu-btn .sb-action-arrow {
  transform: translateX(3px);
}

/* Seamless Favorite Heart Button in Card Header */
.sidebar-card .sb-save-btn.heart-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: #A1A1AA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.sidebar-card .sb-save-btn.heart-btn:hover {
  color: #EF4444;
  background: #FFF1F2;
  transform: scale(1.15);
}

.sidebar-card .sb-save-btn.heart-btn.is-saved,
.sidebar-card .sb-save-btn.heart-btn.active {
  color: #EF4444;
  background: transparent;
}

.sidebar-card .sb-save-btn.heart-btn.is-saved:hover {
  background: #FFF1F2;
  transform: scale(1.2);
}

/* Row 3+: Items & Prices (Fallback/Modal) */
.sb-tile-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(13, 92, 58, 0.15);
  flex-shrink: 0;
  width: 100%;
}

.sb-tile-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  background: rgba(13, 92, 58, 0.04);
  border-left: 2.5px solid var(--sun-gold);
  padding: 5px 8px;
  border-radius: 0 4px 4px 0;
  color: var(--text-main);
  flex-shrink: 0;
  min-height: 24px;
}

.sb-item-name {
  white-space: normal;
  overflow: visible;
  word-break: normal;
  overflow-wrap: break-word;
  font-weight: 500;
  color: #1E293B;
  font-size: 12px;
  line-height: 1.35;
  flex: 1;
}

.sb-item-pricing {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.sb-item-orig-price {
  text-decoration: line-through;
  color: #94A3B8;
  font-size: 10.5px;
  font-weight: 400;
}

.sb-item-deal-price {
  font-weight: 800;
  color: var(--emerald-dark);
  font-size: 12px;
}

.sb-tile-more-items {
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald);
  text-align: right;
  padding: 2px 2px 0 0;
}

.sb-neighborhood-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--emerald);
  background: rgba(13, 92, 58, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
}

.sb-time-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--papaya-dark);
}

.sb-kamaaina-badge {
  font-size: 10px;
  font-weight: 700;
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 1.5px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.sb-venue-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 3px;
}

.sb-venue-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sb-deal-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  overflow-wrap: break-word;
  word-break: break-word;
}

.sb-sample-pills {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.sb-sample-pill {
  font-size: 11.5px;
  color: var(--emerald-dark);
  background: rgba(243, 167, 18, 0.12);
  border-left: 2.5px solid var(--sun-gold);
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 500;
  overflow: hidden;
}

.sb-sample-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-sample-pill strong {
  font-weight: 700;
  color: var(--text-main);
  flex-shrink: 0;
}

.sb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
  font-size: 11px;
}

.sb-district-label {
  color: var(--text-muted);
}

.sb-view-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--emerald);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.sb-view-link:hover {
  color: var(--emerald-dark);
  text-decoration: underline;
}

.sidebar-card:hover .sb-view-link {
  transform: translateX(2px);
}

/* Empty State in Feed */
.sb-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.sb-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.sb-empty-state h4 {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--text-main);
  margin-bottom: 6px;
}

.sb-empty-state p {
  font-size: 12px;
  line-height: 1.5;
}

.sb-empty-action-btn {
  margin-top: 12px;
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Sidebar Loading State (Pulsing "LOADING TODAY'S PAU HANA'S")
   ========================================================================== */
.sidebar-loading-pulse-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px 20px;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
  animation: fadeInSidebarLoading 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.sidebar-loading-icon-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.sidebar-loading-pulse-halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 167, 18, 0.4) 0%, rgba(13, 92, 58, 0.18) 55%, transparent 72%);
  animation: loadingHaloPulse 2s ease-in-out infinite alternate;
}

.sidebar-loading-icon-sunburst {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFF9ED;
  border: 1.5px solid rgba(243, 167, 18, 0.45);
  box-shadow: 0 4px 14px rgba(243, 167, 18, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  animation: loadingIconBob 2.4s ease-in-out infinite;
}

.sidebar-loading-logo-svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(235, 104, 65, 0.2));
}

.sidebar-loading-pulse-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0D5C3A;
  background: linear-gradient(135deg, #0D5C3A 0%, #15803D 50%, #B45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loadingTextPulse 1.8s ease-in-out infinite;
}

.loading-pulse-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F3A712;
  box-shadow: 0 0 0 0 rgba(243, 167, 18, 0.75);
  animation: beaconPulse 1.5s infinite;
  flex-shrink: 0;
}

.sidebar-loading-pulse-subtitle {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #71717A;
  margin: 0;
  line-height: 1.4;
}

@keyframes loadingTextPulse {
  0% {
    opacity: 0.65;
    transform: scale(0.98);
    filter: drop-shadow(0 0 1px rgba(243, 167, 18, 0.15));
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
    filter: drop-shadow(0 0 8px rgba(243, 167, 18, 0.5));
  }
  100% {
    opacity: 0.65;
    transform: scale(0.98);
    filter: drop-shadow(0 0 1px rgba(243, 167, 18, 0.15));
  }
}

@keyframes beaconPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(243, 167, 18, 0.75);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(243, 167, 18, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(243, 167, 18, 0);
  }
}

@keyframes loadingHaloPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.95;
  }
}

@keyframes loadingIconBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Skeleton preview cards to simulate arriving deals */
.sidebar-loading-skeletons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.sidebar-skeleton-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1.5px solid rgba(229, 225, 218, 0.75);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.skeleton-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(243, 167, 18, 0.08) 50%, transparent 100%);
  animation: skeletonShimmer 1.8s infinite;
  transform: translateX(-100%);
}

@keyframes skeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-pill {
  width: 82px;
  height: 16px;
  border-radius: 999px;
  background: #F3F1EC;
}

.skeleton-tag {
  width: 54px;
  height: 16px;
  border-radius: 999px;
  background: #F5EFE6;
}

.skeleton-title {
  width: 68%;
  height: 17px;
  border-radius: 6px;
  background: #ECE8E0;
}

.skeleton-details {
  width: 88%;
  height: 13px;
  border-radius: 4px;
  background: #F4F1EA;
}

/* ==========================================================================
   Sidebar View System & Side-by-Side Dual-Column Architecture
   ========================================================================== */
.sidebar-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Left Column: Always-Present Main List Feed */
.sidebar-feed-view {
  width: 440px;
  min-width: 440px;
  max-width: 440px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1.5px solid var(--border-light);
  background: #FFFFFF;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Right Column: Expands to the Right on Venue Selection */
.sidebar-detail-view {
  width: 0;
  min-width: 0;
  max-width: 440px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  overflow-x: hidden;
  border-left: 1.5px solid transparent;
  box-sizing: border-box;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              border-color 0.25s ease;
}

.pau-hana-sidebar.expanded-detail .sidebar-detail-view {
  width: 440px;
  min-width: 440px;
  max-width: 440px;
  opacity: 1;
  pointer-events: auto;
  border-left: 1.5px solid var(--border-light);
}

/* Sticky Top Navigation Bar inside Sidebar Detail View */
.sb-detail-nav {
  height: 52px;
  min-height: 52px;
  padding: 0 14px;
  background: #FFFFFF;
  border-bottom: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.sb-detail-nav-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.sb-detail-nav-icon {
  font-size: 15px;
  line-height: 1;
}

.sb-detail-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-detail-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--linen);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.18s ease;
}

.sb-detail-icon-btn:hover {
  background: var(--linen-dark);
  border-color: #CBD5E1;
  transform: scale(1.06);
}

.sb-detail-icon-btn.active,
.sb-detail-icon-btn.is-saved {
  background: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #EF4444 !important;
}

.sb-detail-icon-btn.active .heart-svg,
.sb-detail-icon-btn.is-saved .heart-svg {
  fill: #EF4444 !important;
  stroke: #EF4444 !important;
}

/* Left Arrow Collapse Button in Top Right of Detail Nav */
.sb-detail-collapse-btn {
  background: rgba(13, 92, 58, 0.08);
  color: var(--emerald-dark);
  border: 1px solid rgba(13, 92, 58, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-detail-collapse-btn:hover {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
  transform: translateX(-3px);
  box-shadow: 0 3px 10px rgba(13, 92, 58, 0.3);
}

.sb-detail-collapse-btn svg {
  transition: transform 0.18s ease;
}

.sb-detail-collapse-btn:hover svg {
  stroke: #FFFFFF;
}

/* Scrollable Detail Body */
.sb-detail-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Hero Media in Detail */
.sb-detail-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1376 / 768;
  height: auto;
  background: #0F172A;
  overflow: hidden;
  flex-shrink: 0;
}

/* Floating Back Button on Top Left of Profile Image */
.sb-detail-hero-back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: #1E293B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-detail-hero-back-btn:hover {
  background: #FFFFFF;
  color: var(--emerald-dark);
  transform: scale(1.08) translateX(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}

.sb-detail-hero-back-btn:active {
  transform: scale(0.95);
}

.sb-detail-hero-back-btn svg {
  display: block;
  transition: transform 0.2s ease;
}

.sb-detail-hero-back-btn:hover svg {
  transform: translateX(-1px);
}

.sb-detail-hero-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1376 / 768;
  object-fit: contain;
  display: block;
}

.sb-detail-hero:hover .sb-detail-hero-img {
  transform: none;
}

.sb-detail-hero-gradient {
  display: none !important;
}

/* Detail Hero Placeholder for Venues with No Photos Yet */
.sb-detail-hero-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: 1376 / 768;
  background: #1E293B;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  text-align: center;
}

.sb-detail-no-photo-icon {
  font-size: 32px;
  margin-bottom: 6px;
}

.sb-detail-no-photo-text {
  font-size: 13px;
  font-weight: 800;
  color: #CBD5E1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-body);
}

.sb-detail-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  white-space: nowrap;
  line-height: 1.2;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* LIVE NOW: Warm Honey / Gold */
.sb-detail-hero-badge.badge-live {
  background: #FEF3C7;
  color: #78350F;
  border-color: #F59E0B;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22);
}

/* STARTS SOON / UPCOMING: Pale Butter Yellow */
.sb-detail-hero-badge.badge-starting {
  background: #FEF9C3;
  color: #713F12;
  border-color: #FDE047;
  box-shadow: 0 2px 6px rgba(234, 179, 8, 0.16);
}

/* ENDS SOON: Coral / Red */
.sb-detail-hero-badge.badge-ending,
.sb-detail-hero-badge.badge-orange {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #F87171;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.22);
}

/* SPECIAL DROP: Flame Orange-Red */
.sb-detail-hero-badge.badge-special {
  background: #FFEDD5;
  color: #9A3412;
  border-color: #FB923C;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.22);
}

/* FLASH SPECIAL: Electric Yellow Lightning */
.sb-detail-hero-badge.badge-flash {
  background: #FEF08A;
  color: #78350F;
  border-color: #EAB308;
  box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
}

/* ENDED / DORMANT: Soft Slate Neutral */
.sb-detail-hero-badge.badge-ended,
.sb-detail-hero-badge.badge-dormant {
  background: #F1F5F9;
  color: #64748B;
  border-color: #CBD5E1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Header Status Row containing Pau Hana Status + Event/Special Notifications */
.sb-detail-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 12px;
}

.sb-detail-status-row .sb-detail-hero-badge {
  margin: 0;
}

.sb-detail-header-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid transparent;
}

.sb-header-pill-event {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.sb-header-pill-event:hover {
  background: #DBEAFE;
  color: #1E40AF;
  border-color: #93C5FD;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(29, 78, 216, 0.2);
}

.sb-header-pill-special {
  background: #FFEDD5;
  color: #C2410C;
  border-color: #FDBA74;
}

.sb-header-pill-special:hover {
  background: #FED7AA;
  color: #9A3412;
  border-color: #FB923C;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(234, 88, 12, 0.2);
}

.sb-detail-header-pill:active {
  transform: translateY(0) scale(0.97);
}

/* Detail Main Header */
.sb-detail-header-block {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sb-detail-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sb-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sb-detail-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(13, 92, 58, 0.08);
  color: var(--emerald-dark);
}

.sb-detail-status-pill.ends-soon {
  background: rgba(235, 104, 65, 0.1);
  color: var(--papaya-dark);
}

.sb-detail-kamaaina-banner {
  background: rgba(243, 167, 18, 0.12);
  border: 1px solid rgba(243, 167, 18, 0.3);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #B45309;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Detail Address */
.sb-detail-address {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* Detail Phone directly under Address */
.sb-detail-phone {
  margin-top: 3px;
  line-height: 1.4;
}

.sb-detail-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.sb-detail-phone-icon {
  color: var(--emerald);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.sb-detail-phone-link:hover {
  color: var(--emerald-dark);
}

.sb-detail-phone-link:hover .sb-detail-phone-icon {
  transform: scale(1.1);
}

/* Actions Row: Directions, Favorite, Send on Left | Website & Social Links on Right */
.sb-detail-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}

.sb-detail-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sb-detail-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Single-Line Directions Button under Address */
.sb-detail-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 14px;
  background: var(--emerald);
  color: #FFFFFF !important;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.25);
  transition: all 0.18s ease;
  line-height: 1;
  white-space: nowrap;
}

.sb-detail-directions-btn:hover {
  background: var(--emerald-dark);
  box-shadow: 0 4px 10px rgba(13, 92, 58, 0.35);
  transform: translateY(-1px);
}

.sb-detail-directions-btn svg {
  flex-shrink: 0;
}

/* Simple Website & Instagram Icon Buttons */
.sb-info-website-btn,
.sb-info-instagram-btn,
.sb-detail-website-btn,
.sb-detail-instagram-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all 0.18s ease;
}

.sb-info-website-btn:hover,
.sb-detail-website-btn:hover {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: var(--emerald) !important;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.2);
}

.sb-info-instagram-btn:hover,
.sb-detail-instagram-btn:hover {
  background: #FDF2F8 !important;
  border-color: #F472B6 !important;
  color: #E1306C !important;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 2px 6px rgba(225, 48, 108, 0.2);
}

.sb-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--linen);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 4px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.sb-action-tile:hover {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(13, 92, 58, 0.2);
}

.sb-action-tile:hover svg {
  stroke: #FFFFFF;
}

.sb-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.sb-action-tile.is-saved {
  background: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #EF4444 !important;
}

.sb-action-tile.is-saved .heart-svg {
  fill: #EF4444 !important;
  stroke: #EF4444 !important;
}

.sb-action-tile.is-saved:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

.sb-action-tile.is-saved:hover .heart-svg {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* ==========================================================================
   Full Solid Red Heart Save Button on Sidebar Cards
   ========================================================================== */
.sb-save-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #64748B;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sb-save-btn:hover {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #EF4444;
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25);
}

.sb-save-btn.is-saved {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #EF4444;
}

.sb-save-btn.is-saved:hover {
  background: #FFE4E6;
  border-color: #EF4444;
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Red Heart Icon SVG Styling */
.heart-svg {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), fill 0.2s ease, stroke 0.2s ease;
}

.heart-svg.is-saved {
  fill: #EF4444 !important;
  stroke: #EF4444 !important;
  color: #EF4444 !important;
  animation: heartPop 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 1px 3px rgba(239, 68, 68, 0.35));
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Section Cards inside Detail View */
.sb-detail-section {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sb-section-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  transition: color 0.18s ease;
}

/* Collapsible Sections in Detail View */
.sb-detail-collapsible {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: padding 0.18s ease;
}

.sb-collapsible-header {
  width: 100%;
  box-sizing: border-box;
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.sb-collapsible-header:hover {
  background: var(--emerald-dark);
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.3);
  transform: translateY(-1px);
}

.sb-collapsible-header:active {
  transform: translateY(0);
}

.sb-collapsible-header:focus-visible {
  outline: 2px solid var(--emerald-dark);
  outline-offset: 2px;
}

.sb-collapsible-title-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-collapsible-btn-title,
.sb-collapsible-header .sb-section-title {
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sb-collapsible-header .sb-detail-section-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  background: #FFFFFF;
  color: var(--emerald-dark);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.sb-collapse-chevron {
  color: #FFFFFF;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-collapsible-header:hover .sb-collapse-chevron {
  color: #FFFFFF;
  stroke: #FFFFFF;
}

/* Collapsed State */
.sb-detail-collapsible.is-collapsed .sb-collapsible-header {
  margin-bottom: 0;
}

.sb-detail-collapsible.is-collapsed .sb-collapse-chevron {
  transform: rotate(0deg);
}

.sb-detail-collapsible.is-collapsed .sb-collapsible-body {
  display: none !important;
}

/* Expanded State */
.sb-detail-collapsible:not(.is-collapsed) .sb-collapsible-header {
  margin-bottom: 12px;
}

.sb-detail-collapsible:not(.is-collapsed) .sb-collapse-chevron {
  transform: rotate(180deg);
}

.sb-detail-collapsible:not(.is-collapsed) .sb-collapsible-body {
  display: block;
  animation: sbCollapseExpand 0.22s ease-out;
}

@keyframes sbCollapseExpand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* When Schedule & Details is expanded, minimize Today's Featured Deals and shift Schedule & Details up */
#sb-detail-deals-section:has(#sb-detail-schedule-details-section:not(.is-collapsed)) #sb-detail-featured-deals-block {
  display: none !important;
}

#sb-detail-deals-section:has(#sb-detail-schedule-details-section:not(.is-collapsed)) #sb-detail-schedule-details-section {
  margin-top: 0 !important;
}

.sb-detail-deals-box {
  background: var(--linen);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 8px 14px;
}

.sb-detail-deal-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.07);
}

.sb-detail-deal-item:last-child {
  border-bottom: none;
}

.sb-detail-deal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 10px;
}

.sb-detail-deal-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.sb-detail-deal-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

.sb-detail-deal-price {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--emerald);
  white-space: nowrap;
}

.sb-detail-orig-price {
  font-size: 13px;
  color: #94A3B8;
  text-decoration: line-through;
  font-weight: 500;
  white-space: nowrap;
}

/* Weekly Schedule Matrix in Detail View */
.sb-schedule-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: var(--linen);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.sb-schedule-matrix th,
.sb-schedule-matrix td {
  padding: 7px 10px;
  text-align: left;
}

.sb-schedule-matrix th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}

.sb-schedule-matrix tr:not(:last-child) td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sb-schedule-matrix tr.today-row td {
  font-weight: 800;
  color: var(--emerald-dark);
  background: rgba(13, 92, 58, 0.08);
}

.sb-schedule-day-col {
  font-weight: 700;
  width: 70px;
}

.sb-schedule-time-col {
  color: var(--text-main);
}

.sb-schedule-time-col.no-deals {
  color: #94A3B8;
  font-style: italic;
}

/* Venue Location & Footer Details */
.sb-venue-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.sb-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-main);
}

.sb-info-icon {
  font-size: 15px;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.sb-info-content {
  flex: 1;
}

.sb-info-link {
  color: var(--emerald);
  text-decoration: none;
  font-weight: 600;
}

.sb-info-link:hover {
  text-decoration: underline;
}

.sb-detail-footer-actions {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-primary {
  flex: 1;
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  padding: 12px 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

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

.btn-secondary {
  flex: 1;
  background: #FFFFFF;
  color: var(--text-main);
  border: 1.5px solid var(--border-light);
  padding: 12px 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--linen-dark);
}

/* ==========================================================================
   Modals (Venue Profile & Tastemaker)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-card {
  width: min(780px, 100%);
  max-height: 90vh;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  position: relative;
  animation: modalScale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #FFFFFF;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}

#venue-modal .modal-close {
  display: none !important;
}

/* Full Venue Modal Profile Close Circle Button (Top-Left over Hero Image) */
.venue-modal-close-circle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.venue-modal-close-circle:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.venue-modal-close-circle:active {
  transform: scale(0.95);
}

/* Schedule Matrix Table (Sun-Sat) */
.schedule-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--border-light);
}

/* Day-of-week abbreviations bar: GREY by default */
.schedule-matrix-table th {
  background: #E2E8F0;
  color: #475569;
  font-family: var(--font-heading);
  font-size: 12px;
  padding: 10px 8px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.schedule-matrix-table th:last-child {
  border-right: none;
}

.schedule-matrix-table th.clickable-matrix-col:hover {
  background: #CBD5E1;
  color: #1E293B;
}

.schedule-matrix-table td {
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-top: 1px solid var(--border-light);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.schedule-matrix-table td:last-child {
  border-right: none;
}

.schedule-matrix-table td.clickable-matrix-col:hover {
  background: #F8FAFC;
}

/* Today's day header: ALWAYS GOLD with black text */
.schedule-matrix-table th.matrix-th-today {
  background: #F59E0B !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

.schedule-matrix-table th.matrix-th-today:hover {
  background: #D97706 !important;
  color: #000000 !important;
}

/* Today's day cell */
.schedule-matrix-table td.matrix-td-today {
  background: rgba(245, 158, 11, 0.09);
  color: #78350F;
  font-weight: 700;
}

.schedule-matrix-table td.matrix-td-today.matrix-td-active-focus {
  background: rgba(245, 158, 11, 0.18);
  color: #000000;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 #F59E0B;
}

/* Selected non-today day: GREEN with white text */
.schedule-matrix-table th.matrix-th-selected {
  background: var(--emerald) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.schedule-matrix-table th.matrix-th-selected:hover {
  background: var(--emerald-dark) !important;
  color: #FFFFFF !important;
}

/* Selected non-today cell */
.schedule-matrix-table td.matrix-td-selected {
  background: rgba(13, 92, 58, 0.10);
  color: var(--emerald-dark);
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--emerald);
}

/* Sidebar Responsive Matrix Table Wrapper */
.sb-matrix-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 6px 0 10px;
  border-radius: var(--radius-sm);
}

.sb-matrix-table-wrap .schedule-matrix-table {
  min-width: 360px;
  margin: 0;
}

.sb-matrix-table-wrap .schedule-matrix-table th {
  padding: 8px 4px;
  font-size: 11px;
}

.sb-matrix-table-wrap .schedule-matrix-table td {
  padding: 8px 3px;
  font-size: 11px;
  line-height: 1.25;
}

.modal-item-deal-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(243, 167, 18, 0.15);
  color: #B45309;
  border: 1px solid rgba(243, 167, 18, 0.4);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.modal-menu-empty-box {
  padding: 32px 20px;
  text-align: center;
  background: var(--linen);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
  margin-bottom: 24px;
}

.modal-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

@media (max-width: 640px) {
  .modal-menu-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Creator Guides Cards */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.guide-card {
  background: var(--linen);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-light);
  transition: transform 0.2s, box-shadow 0.2s;
}

.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.guide-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.guide-card-content {
  padding: 12px;
}

.guide-card h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.guide-card p {
  font-size: 12px;
  color: var(--text-muted);
}

/* Small Modals (Report & Claim) */
.small-modal {
  width: min(460px, 100%);
  padding: 24px;
}

.report-box h3, .claim-box h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.report-subtitle, .claim-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.report-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.report-tag {
  background: var(--linen);
  border: 1.5px solid var(--border-light);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.report-tag.active {
  border-color: var(--emerald);
  background: rgba(13, 92, 58, 0.08);
  color: var(--emerald-dark);
}

.report-box textarea, .claim-box input, .claim-box select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  margin-bottom: 14px;
}

.report-box textarea {
  height: 80px;
  resize: vertical;
}

.submit-report-btn, .submit-claim-btn {
  width: 100%;
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.2);
}

.submit-claim-btn:hover {
  background: var(--emerald-dark);
  box-shadow: 0 6px 16px rgba(13, 92, 58, 0.3);
  transform: translateY(-1px);
}

.submit-claim-btn:active {
  transform: translateY(0);
}

.submit-claim-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.biz-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--sun-gold);
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Inline Venue Claim Prompt Line (Under Directions Button)
   ========================================================================== */
.sb-detail-claim-prompt {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(197, 160, 89, 0.1);
  border: 1px dashed rgba(197, 160, 89, 0.55);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  margin-top: 10px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
}

.sb-detail-claim-prompt:hover {
  background: rgba(197, 160, 89, 0.2);
  border-color: var(--sun-gold);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(197, 160, 89, 0.18);
}

.sb-detail-claim-prompt:active {
  transform: translateY(0);
}

.sb-detail-claim-prompt .claim-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.sb-detail-claim-prompt .claim-prompt-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.sb-detail-claim-prompt .claim-prompt-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-main);
  font-weight: 500;
}

.sb-detail-claim-prompt .claim-prompt-link {
  color: var(--emerald-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2.5px;
  transition: color 0.15s ease;
}

.sb-detail-claim-prompt:hover .claim-prompt-link {
  color: var(--emerald);
}

/* Specific styling for the prompt when inside the Full Venue Profile Modal */
.modal-detail-claim-prompt {
  margin-top: 12px;
  margin-bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(244, 238, 219, 0.6) 0%, rgba(197, 160, 89, 0.14) 100%);
  border: 1px dashed rgba(197, 160, 89, 0.65);
}

.modal-detail-claim-prompt .claim-prompt-text {
  font-size: 13px;
}

/* ==========================================================================
   Expanded Claim Venue Modal UI & Benefits Layout
   ========================================================================== */
.claim-modal-card {
  width: min(880px, 95vw);
  max-height: 90vh;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow-y: auto;
  position: relative;
}

.claim-modal-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
}

.claim-modal-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-main);
  margin: 8px 0 12px 0;
  letter-spacing: -0.01em;
}

.claim-venue-badge-row {
  margin-bottom: 8px;
}

.claim-venue-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.claim-modal-header .claim-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}

.claim-modal-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 768px) {
  .claim-modal-card {
    padding: 22px 18px;
    width: 95vw;
  }
  .claim-modal-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.claim-form-col {
  display: flex;
  flex-direction: column;
}

.claim-col-heading {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--emerald-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.claim-field-group {
  margin-bottom: 14px;
}

.claim-field-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 5px;
}

.claim-field-group .req-star {
  color: #DC2626;
  font-weight: 800;
}

.claim-field-group .opt-label {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.claim-field-group input,
.claim-field-group select {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-main);
  background: #FFFFFF;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.claim-field-group input:focus,
.claim-field-group select:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(13, 92, 58, 0.12);
}

.claim-field-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.claim-trust-footnote {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Why create an official account card */
.claim-benefits-col {
  display: flex;
  flex-direction: column;
}

.claim-benefits-card {
  background: linear-gradient(160deg, #FAF7F2 0%, #F4EEDB 100%);
  border: 1.5px solid rgba(197, 160, 89, 0.45);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.08);
}

.benefits-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.benefits-palm-seal {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.benefits-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--emerald-dark);
  line-height: 1.35;
  margin: 0;
}

.benefits-intro {
  font-size: 12.5px;
  color: #555;
  line-height: 1.45;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.benefit-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-body {
  font-size: 12px;
  line-height: 1.4;
  color: #333;
}

.benefit-body strong {
  display: block;
  font-size: 12.5px;
  color: var(--emerald-dark);
  font-weight: 700;
  margin-bottom: 1px;
}

.claim-feedback {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.claim-feedback.success {
  background: #ECFDF5;
  border: 1.5px solid #10B981;
}

/* ==========================================================================
   Reviews & Ratings Section
   ========================================================================== */
.reviews-section {
  border-top: 1px solid var(--border-light);
  padding-top: 24px;
  margin-top: 24px;
}

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

.reviews-score-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.score-main {
  font-size: 28px;
  font-weight: 800;
  color: var(--emerald);
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-sub-pills {
  display: flex;
  gap: 8px;
}

.score-pill {
  font-size: 11px;
  font-weight: 700;
  background: var(--linen);
  border: 1px solid var(--border-light);
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-muted);
}

.write-review-btn {
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.write-review-btn:hover {
  opacity: 0.9;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.review-item-card {
  background: var(--linen);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--border-light);
}

.review-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.review-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.review-stars {
  color: var(--sun-gold);
  font-size: 13px;
}

.review-comment {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.45;
}

.review-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

.review-form-container {
  background: #FFFFFF;
  border: 1.5px solid var(--emerald);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  display: none;
}

.review-form-container h4 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 12px;
}

.rating-row {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.rating-select-group {
  flex: 1;
}

.rating-select-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.rating-select-group select {
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 12px;
  outline: none;
}

.review-form-container textarea {
  width: 100%;
  height: 70px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13px;
  margin-bottom: 12px;
  resize: vertical;
}

.submit-review-action-btn {
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* ==========================================================================
   Leaflet Zoom Controls & Map Style Switcher (Bottom Right)
   ========================================================================== */
.leaflet-bottom.leaflet-right {
  bottom: 24px !important;
  right: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-end !important;
  z-index: 900 !important;
}

/* ==========================================================================
   Minimalist Vector Map Typography Labels
   ========================================================================== */
.map-vector-label-wrapper {
  background: none !important;
  border: none !important;
  pointer-events: none !important;
}

.vector-label {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  user-select: none;
  text-align: center;
  display: block;
  width: 100%;
  text-shadow: 
    -1.5px -1.5px 0 #FAF6ED,  
     1.5px -1.5px 0 #FAF6ED,
    -1.5px  1.5px 0 #FAF6ED,
     1.5px  1.5px 0 #FAF6ED,
     0px 2px 5px rgba(250, 246, 237, 0.95);
  pointer-events: none;
  transition: font-size 0.15s ease, letter-spacing 0.15s ease;
}

.vector-label.major,
.vector-label.lg {
  font-size: 14px;
  color: #062F1D;
  letter-spacing: 0.22em;
  font-weight: 800;
}

.vector-label.regular,
.vector-label.md {
  font-size: 11px;
  color: #0D5C3A;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.vector-label.sm {
  font-size: 10px;
  color: #1E6B4A;
  letter-spacing: 0.12em;
}

/* Level 15+: Slightly increase size of neighborhood names (Chinatown, Ala Moana, Waikīkī, etc.) */
.map-zoom-15 .vector-label.neighborhood-label,
.map-zoom-15 .vector-label.regular {
  font-size: 13.5px !important;
  letter-spacing: 0.20em !important;
  color: #062F1D !important;
}

.map-zoom-15 .vector-label.sm {
  font-size: 12.0px !important;
  letter-spacing: 0.16em !important;
  color: #0D5C3A !important;
}

/* Level of detail when zoomed out: Remove all city/town names when zoomed out */
.map-macro-view .vector-label {
  display: none !important;
}

/* Floating Island Region Navigator Dock */
.island-nav-dock {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(250, 246, 237, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--emerald);
  border-radius: 999px;
  padding: 5px 8px;
  box-shadow: 0 4px 18px rgba(10, 47, 30, 0.18);
  z-index: 900;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}

.island-nav-trigger {
  display: none;
}

.island-nav-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-map-loading-pulse,
.mobile-bottom-drawer {
  display: none;
}

.island-nav-dock::-webkit-scrollbar {
  display: none;
}

.region-pill {
  border: none;
  background: transparent;
  color: var(--emerald);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.region-pill:hover {
  background: rgba(13, 92, 58, 0.10);
}

.region-pill.active {
  background: var(--emerald);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.25);
}

@media (max-width: 768px) {
  .island-nav-dock {
    bottom: 16px;
    padding: 4px 6px;
    gap: 4px;
  }
  .region-pill {
    font-size: 11.5px;
    padding: 5px 10px;
  }
}

/* ==========================================================================
   Street Name Tooltips on Hover
   ========================================================================== */
.street-name-tooltip {
  background: rgba(10, 47, 30, 0.94) !important;
  color: #FAF6ED !important;
  border: 1px solid rgba(243, 167, 18, 0.5) !important;
  border-radius: 6px !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.street-name-tooltip.major-street-tooltip {
  background: rgba(6, 40, 24, 0.96) !important;
  border-color: rgba(248, 211, 106, 0.7) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.street-name-tooltip::before {
  display: none !important;
}

/* ==========================================================================
   Mid-Century Highway Shields & Street Name Labels
   ========================================================================== */
.map-highway-shield-wrapper {
  background: none !important;
  border: none !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.highway-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0D5C3A;
  color: #FAF6ED;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1.2px solid rgba(243, 167, 18, 0.75);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  user-select: none;
}

.map-street-label-wrapper {
  background: none !important;
  border: none !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.street-label {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center center;
  font-family: var(--font-heading);
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.1;
  border-radius: 4px;
  transition: opacity 0.2s ease, font-size 0.1s ease;
}

.street-label.major-street-label {
  font-size: var(--street-font-size-major, 12px);
  font-weight: 750;
  color: #052818;
  letter-spacing: 0.08em;
  padding: 0.14em 0.48em;
  border: none !important;
  box-shadow: none !important;
}

.street-label.local-street-label {
  font-size: var(--street-font-size-local, 10px);
  font-weight: 650;
  color: #125436;
  letter-spacing: 0.05em;
  padding: 0.10em 0.38em;
  border: none !important;
  box-shadow: none !important;
}

.leaflet-control-zoom {
  border: 1.5px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.leaflet-control-zoom a {
  background-color: #FAF7F2 !important;
  color: var(--emerald) !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 34px !important;
  width: 36px !important;
  height: 36px !important;
  border-bottom: 1px solid var(--border-light) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--emerald) !important;
  color: #FFFFFF !important;
}

/* Top Right Map Controls Stack (Zoom Box + Legend) */
.map-top-right-stack {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.map-top-right-stack > * {
  pointer-events: auto;
}

/* Map Icon Legend (Directly Under Zoom Box on Top Right) */
.map-icon-legend {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
  z-index: 950;
  background: rgba(254, 252, 248, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(13, 92, 58, 0.18);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 216px;
  user-select: none;
  pointer-events: auto;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-icon-legend.collapsed {
  width: auto;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 11px 11px 0 0;
  transition: background 0.15s ease;
}

.legend-header:hover {
  background: rgba(13, 92, 58, 0.05);
}

.map-icon-legend.collapsed .legend-header {
  border-bottom: none;
  border-radius: 999px;
  padding: 6px 12px;
}

.legend-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-header-icon {
  font-size: 13px;
  line-height: 1;
}

.legend-title-text {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald-dark);
}

.legend-toggle-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.legend-toggle-btn:hover {
  color: var(--emerald-dark);
}

.map-icon-legend.collapsed .legend-toggle-icon::before {
  content: '+';
}

.map-icon-legend:not(.collapsed) .legend-toggle-icon::before {
  content: '−';
}

.legend-toggle-icon {
  font-size: 0;
}

.legend-toggle-icon::before {
  font-size: 14px;
  line-height: 1;
}

.legend-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.map-icon-legend.collapsed .legend-body {
  display: none;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.12s ease;
}

.legend-item:hover {
  background: rgba(13, 92, 58, 0.05);
}

.legend-pin-wrap {
  width: 20px;
  min-width: 20px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.legend-pin-svg {
  filter: none !important;
  display: block;
}

.legend-pin-wrap.legend-flash-pulse .legend-pin-svg {
  animation: flashBoltPulse 1.6s ease-in-out infinite;
}

.legend-pin-wrap.legend-saved-glow .legend-pin-svg {
  filter: none !important;
}

.legend-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.legend-text strong {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.legend-text span {
  font-size: 9.5px;
  color: var(--text-muted);
}

/* Dev Zoom Level Identifier Badge */
.map-zoom-indicator {
  position: relative;
  top: auto;
  right: auto;
  margin: 0;
  z-index: 950;
  background: rgba(250, 246, 237, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--emerald);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(10, 47, 30, 0.15);
  display: flex;
  flex-direction: column;
  gap: 5px;
  user-select: none;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.zoom-main-readout {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zoom-main-readout .zoom-icon {
  font-size: 13px;
}

.zoom-main-readout .zoom-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  color: var(--emerald-dark);
  letter-spacing: 0.04em;
  min-width: 48px;
}

.zoom-tier-badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.zoom-tier-badge.tier-macro {
  background: rgba(13, 92, 58, 0.12);
  color: var(--emerald);
}

.zoom-tier-badge.tier-metro {
  background: rgba(78, 153, 165, 0.20);
  color: #165059;
}

.zoom-tier-badge.tier-hood {
  background: rgba(243, 167, 18, 0.22);
  color: #92400E;
}

.zoom-tier-badge.tier-streets {
  background: rgba(16, 185, 129, 0.22);
  color: #065F46;
}

.zoom-quick-presets {
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(13, 92, 58, 0.15);
  padding-top: 4px;
}

.zoom-chip {
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.25);
  color: var(--emerald-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.zoom-chip:hover {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
}

/* ==========================================================================
   Mobile / iPhone Portrait Viewport Adjustments (max-width: 768px)
   Strictly scoped to mobile devices: Desktop (min-width: 769px) is 100% UNCHANGED.
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 1. Compact Site Header (48px) - Always visible at top of viewport */
  .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 12px !important;
    z-index: 2000 !important;
    background: #FAF7F2 !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .brand-zone {
    gap: 8px !important;
  }

  .brand-logo-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .brand-pau-hana {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
  }

  .brand-hunter {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }

  .search-container {
    display: none !important;
  }

  .auth-user-pill {
    padding: 3px 8px !important;
    gap: 6px !important;
  }

  .auth-avatar-circle {
    width: 24px !important;
    height: 24px !important;
  }

  .auth-user-name {
    font-size: 11.5px !important;
  }

  .auth-resident-tag {
    font-size: 9px !important;
  }

  /* 2. Full Vertical Stack: Controls at Top, Interactive Map Fills the Rest */
  .app-layout {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 48px) !important;
    height: calc(100vh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #4E99A5 !important;
  }

  /* 3. Sidebar Container: Converted from Floating Card Overlay into Top Controls Strip */
  .pau-hana-sidebar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--border-light) !important;
    background: #FAF7F2 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    z-index: 1100 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sidebar-view.sidebar-feed-view,
  .sidebar-feed-view {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Pau Hana & Events Buttons: Immediately under header with minimal buffer, resized to fit */
  .discovery-mode-bar {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 5px 10px 4px 10px !important;
    gap: 8px !important;
    background: #FAF7F2 !important;
    border-bottom: 1px solid rgba(13, 92, 58, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .disc-mode-btn {
    flex: 1 !important;
    width: 50% !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .disc-mode-icon {
    font-size: 15px !important;
  }

  .disc-mode-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .disc-badge {
    padding: 2px 7px !important;
    font-size: 10px !important;
  }

  /* 5. Remove the bulky sidebar header entirely on mobile */
  .sidebar-header {
    display: none !important;
  }

  /* 6. Mode Controls Wrappers (Pau Hana Mode vs Events Mode) */
  .mode-controls-wrapper {
    width: 100% !important;
    background: #FAF7F2 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mode-controls-wrapper.is-hidden,
  .mode-controls-wrapper[style*="display: none"],
  .mode-controls-wrapper[style*="display:none"] {
    display: none !important;
  }

  /* Pau Hana Mode Filters */
  .sidebar-view-toggle {
    display: flex !important;
    padding: 4px 10px 3px 10px !important;
    gap: 8px !important;
    background: #FAF7F2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar-view-toggle .sb-view-btn {
    flex: 1 !important;
    width: 50% !important;
    padding: 6.5px 8px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Row 2: Inactive Venues Filter & Plan Ahead Quick Toggle (Side by Side) */
  .sidebar-secondary-controls {
    display: flex !important;
    flex-direction: row !important;
    padding: 3px 10px 5px 10px !important;
    gap: 8px !important;
    background: #FAF7F2 !important;
    border-bottom: 1px solid rgba(13, 92, 58, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar-secondary-controls .btn-network-toggle {
    flex: 1 !important;
    width: 50% !important;
    padding: 6.5px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--border-light) !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
  }

  .sidebar-secondary-controls .btn-network-toggle.active {
    background: var(--emerald) !important;
    color: #FFFFFF !important;
    border-color: var(--emerald-dark) !important;
  }

  .sidebar-secondary-controls .sidebar-tm-bar {
    flex: 1 !important;
    width: 50% !important;
    padding: 6.5px 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: #F4EFE6 !important;
    border: 1.5px solid rgba(13, 92, 58, 0.15) !important;
    border-bottom: 1.5px solid rgba(13, 92, 58, 0.15) !important;
    cursor: pointer !important;
  }

  .sidebar-secondary-controls .sidebar-tm-bar.active {
    background: rgba(13, 92, 58, 0.12) !important;
    border-color: var(--emerald) !important;
  }

  .sidebar-secondary-controls .sb-tm-label {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .sidebar-secondary-controls .sb-tm-icon {
    font-size: 12px !important;
  }

  .sidebar-secondary-controls .sb-tm-chevron {
    width: 12px !important;
    height: 12px !important;
  }

  /* Events Mode Filters (When in Events Mode: Today's Events, This Week, This Month) */
  .events-view-toggle {
    display: flex !important;
    padding: 4px 10px 3px 10px !important;
    gap: 6px !important;
    background: #FAF7F2 !important;
    border-bottom: 1px solid rgba(13, 92, 58, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .events-view-toggle .sb-view-btn {
    flex: 1 !important;
    width: 33.333% !important;
    padding: 6.5px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .events-view-toggle .sb-view-btn.active {
    background: var(--emerald) !important;
    border-color: var(--emerald-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(13, 92, 58, 0.22) !important;
  }

  .events-view-toggle .sb-view-btn.active span {
    color: #FFFFFF !important;
  }

  /* Row 2 for Events Mode: Inactive Venues Filter & Filter by Type */
  .events-secondary-controls {
    display: flex !important;
  }

  .events-type-bar.active {
    background: rgba(13, 92, 58, 0.12) !important;
    border-color: var(--emerald) !important;
  }

  /* Hide individual Event type filter chips bar on mobile */
  .category-filter-bar,
  #events-category-bar {
    display: none !important;
  }

  /* Week Days Selection Layover (Floats over the map without adjusting map window size) */
  .events-week-drawer {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1300 !important;
    background: #FAF7F2 !important;
    border-bottom: 2px solid var(--emerald) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26) !important;
    padding: 7px 8px 8px 8px !important;
    box-sizing: border-box !important;
  }

  .events-week-drawer[style*="display: none"],
  .events-week-drawer[style*="display:none"],
  .events-week-drawer.is-hidden {
    display: none !important;
  }

  .events-week-meta {
    display: none !important;
  }

  .events-day-picker {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ev-day-pill {
    padding: 5px 1px 5px 1px !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ev-day-pill .ev-dow {
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  .ev-day-pill .ev-date {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }

  .ev-all-pill {
    padding: 5px 1px 5px 1px !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ev-all-pill .ev-all-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
  }

  /* 7. Layover Overlays: Plan Ahead (#time-machine) & Filter by Type (#events-type-dropdown) */
  /* These float directly OVER the Leaflet map as layovers without adjusting the map window size below them */
  .sidebar-time-machine,
  .events-type-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1500 !important;
    background: #FAF7F2 !important;
    border-bottom: 2.5px solid var(--emerald) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32) !important;
    max-height: calc(100dvh - 180px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding: 12px 14px 16px 14px !important;
  }

  .sidebar-time-machine.minimized,
  .events-type-dropdown.minimized {
    display: none !important;
    pointer-events: none !important;
    max-height: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  /* Plan Ahead Mobile Simplification: Hide quick-presets and X Live Now button */
  .sidebar-time-machine .tm-minimize-btn,
  .sidebar-time-machine .quick-presets {
    display: none !important;
  }

  .sidebar-time-machine .time-ruler {
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  .events-type-dropdown {
    background: #FFFFFF !important;
    padding: 10px 12px 14px 12px !important;
  }

  .events-type-dropdown-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .ev-drop-title {
    font-family: var(--font-heading) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: var(--emerald-dark) !important;
    text-transform: uppercase !important;
  }

  .ev-drop-close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 15px !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
  }

  .events-type-dropdown-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .events-type-opt {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    background: #FAF7F2 !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 9px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  .events-type-opt:active {
    background: rgba(13, 92, 58, 0.08) !important;
    transform: scale(0.98) !important;
  }

  .events-type-opt.active {
    background: var(--emerald) !important;
    border-color: var(--emerald-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(13, 92, 58, 0.22) !important;
  }

  .events-type-opt .ev-opt-icon {
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  .events-type-opt .ev-opt-label {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .events-type-opt .ev-opt-check {
    font-size: 12px !important;
    font-weight: 900 !important;
    opacity: 0 !important;
  }

  .events-type-opt.active .ev-opt-check {
    opacity: 1 !important;
    color: #FBBF24 !important;
  }

  /* 8. REMOVE THE SIDEBAR CARD FEED ENTIRELY ON MOBILE */
  .sidebar-venue-list {
    display: none !important;
  }

  /* 9. Interactive Map fills the REST OF THE SCREEN below Plan Ahead */
  .map-viewport {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    background: #4E99A5 !important;
  }

  #map {
    position: absolute !important;
    inset: 0 !important;
    bottom: 56px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 10. Left-hand Collapsible Area Dropdown on Mobile */
  .island-nav-dock {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1350 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .island-nav-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--emerald) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-family: var(--font-heading) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--emerald-dark) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }

  .island-nav-trigger:active {
    transform: scale(0.96) !important;
  }

  .island-nav-chevron {
    transition: transform 0.2s ease !important;
  }

  .island-nav-dock.is-open .island-nav-chevron {
    transform: rotate(180deg) !important;
  }

  .island-nav-list {
    display: none !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important;
    margin-top: 6px !important;
    max-height: calc(100dvh - 300px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 140px !important;
  }

  .island-nav-dock.is-open .island-nav-list {
    display: flex !important;
  }

  .island-nav-list .region-pill {
    width: 100% !important;
    text-align: left !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    color: var(--text-main) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.12s ease !important;
  }

  .island-nav-list .region-pill:active {
    background: rgba(13, 92, 58, 0.08) !important;
  }

  .island-nav-list .region-pill.active {
    background: var(--emerald) !important;
    color: #FFFFFF !important;
  }

  /* Mobile Map Loading Status (Exact Desktop Design) */
  .mobile-map-loading-pulse {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1400 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 86% !important;
    max-width: 310px !important;
    padding: 16px 14px 14px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(243, 167, 18, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    animation: fadeInSidebarLoading 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-map-loading-pulse.is-loading {
    display: flex !important;
  }

  .mobile-map-loading-pulse .sidebar-loading-icon-wrapper {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 0 !important;
  }

  .mobile-map-loading-pulse .sidebar-loading-icon-sunburst {
    width: 44px !important;
    height: 44px !important;
  }

  .mobile-map-loading-pulse .sidebar-loading-logo-svg {
    width: 26px !important;
    height: 26px !important;
  }

  .mobile-map-loading-pulse .sidebar-loading-pulse-title {
    font-size: 12.5px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }

  .mobile-map-loading-pulse .sidebar-loading-pulse-subtitle {
    font-size: 11px !important;
    color: #71717A !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .map-icon-legend {
    display: none !important;
  }

  .map-layer-switcher {
    right: 70px !important;
    bottom: 68px !important;
  }

  .leaflet-bottom.leaflet-right {
    bottom: 68px !important;
    right: 12px !important;
  }

  /* 11. Mobile Bottom Drawer: Default Summary vs Slide-up Venue Details (1/4 screen) */
  .mobile-bottom-drawer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1200 !important;
    background: #FFFFFF !important;
    border-top: 1.5px solid var(--border-light) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    height: 56px !important;
    transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-bottom-drawer.is-expanded {
    height: 26dvh !important;
    min-height: 185px !important;
    max-height: 225px !important;
  }

  /* Default Summary State */
  .mobile-drawer-summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 4px 14px 6px 14px !important;
    box-sizing: border-box !important;
    cursor: default !important;
  }

  .drawer-drag-pill {
    width: 32px !important;
    height: 3.5px !important;
    background: #CBD5E1 !important;
    border-radius: 999px !important;
    margin: 2px auto 4px auto !important;
    flex-shrink: 0 !important;
  }

  .drawer-summary-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
  }

  .drawer-summary-stat {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .drawer-stat-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: var(--font-heading) !important;
    font-size: 12.5px !important;
    color: var(--text-main) !important;
  }

  .drawer-stat-badge strong {
    font-weight: 800 !important;
    color: var(--emerald-dark) !important;
  }

  .drawer-stat-badge .stat-icon {
    font-size: 13px !important;
  }

  .drawer-stat-badge .stat-label {
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    font-size: 11.5px !important;
  }

  .drawer-stat-divider {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }

  .drawer-summary-subtext {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
  }

  /* Selected Venue State inside Bottom Drawer (1/4 Screen) */
  .mobile-drawer-venue {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 4px 14px 10px 14px !important;
    box-sizing: border-box !important;
  }

  .drawer-venue-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .drawer-venue-top-bar .drawer-drag-pill {
    margin: 0 !important;
  }

  .drawer-close-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background 0.15s ease !important;
  }

  .drawer-close-btn:active {
    background: rgba(0, 0, 0, 0.14) !important;
  }

  .drawer-venue-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .drawer-venue-main-info {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .drawer-venue-name {
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 120px) !important;
  }

  .drawer-venue-sub {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .drawer-venue-pill-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 5px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .drawer-venue-pill-row::-webkit-scrollbar {
    display: none !important;
  }

  .drawer-time-badge {
    background: rgba(13, 92, 58, 0.1) !important;
    border: 1px solid rgba(13, 92, 58, 0.25) !important;
    color: var(--emerald-dark) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2.5px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .drawer-time-badge.is-live {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #B45309 !important;
  }

  .drawer-deal-preview {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 3px !important;
  }

  .drawer-venue-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  .drawer-cta-btn {
    flex: 1 !important;
    background: var(--emerald) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(13, 92, 58, 0.25) !important;
    transition: all 0.15s ease !important;
  }

  .drawer-cta-btn:active {
    transform: scale(0.98) !important;
    background: var(--emerald-dark) !important;
  }

  /* Disable mobile full-screen expansion of the sidebar */
  .sidebar-detail-view,
  .pau-hana-sidebar.expanded-detail,
  .pau-hana-sidebar.expanded-detail .sidebar-detail-view {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   User Authentication & Header Pill
   ========================================================================== */
.auth-header-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-login-btn {
  background: transparent;
  color: var(--emerald);
  border: 1.5px solid var(--emerald);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-login-btn:hover {
  background: rgba(13, 92, 58, 0.08);
}

.auth-signup-btn {
  background: linear-gradient(135deg, var(--emerald) 0%, #13774C 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 92, 58, 0.2);
  transition: all 0.2s ease;
}

.auth-signup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.3);
}

.auth-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 999px;
  padding: 4px 14px 4px 6px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.auth-user-pill:hover {
  border-color: var(--emerald);
  box-shadow: var(--shadow-md);
}

.auth-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--emerald);
  background: var(--sand, #F8F5F0);
  flex-shrink: 0;
}

.auth-user-details {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.auth-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.auth-user-badge {
  font-size: 10px;
  font-weight: 800;
  color: #B45309;
  letter-spacing: 0.02em;
}

.auth-user-caret {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

/* ==========================================================================
   User Dropdown Popover Menu
   ========================================================================== */
.user-dropdown-menu {
  position: fixed;
  top: 76px;
  right: 24px;
  width: 270px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  z-index: 2100;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--linen);
}

.udd-avatar-wrap img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--emerald);
  background: var(--sand, #F8F5F0);
  flex-shrink: 0;
}

.udd-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.udd-handle {
  font-size: 12px;
  color: var(--text-muted);
}

.udd-badge-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #B45309;
  background: rgba(243, 167, 18, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-light);
}

.user-dropdown-links {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.udd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.udd-item:hover {
  background: rgba(13, 92, 58, 0.08);
  color: var(--emerald);
}

.udd-icon {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.udd-counter-badge {
  margin-left: auto;
  background: var(--emerald);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}

.udd-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #E11D48;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.udd-logout-btn:hover {
  background: rgba(225, 29, 72, 0.08);
}

/* ==========================================================================
   Auth Modal (Sign In / Join Pau Hana)
   ========================================================================== */
.auth-modal-card {
  max-width: 460px;
  width: 92%;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-brand-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--emerald);
  background: rgba(13, 92, 58, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.auth-modal-header h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.auth-modal-header p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.auth-nav-tabs {
  display: flex;
  background: var(--linen);
  border-radius: 999px;
  padding: 4px;
  margin-top: 16px;
  border: 1px solid var(--border-light);
}

.auth-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab-btn.active {
  background: #FFFFFF;
  color: var(--emerald);
  box-shadow: var(--shadow-sm);
}

/* OAuth Providers Group */
.oauth-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oauth-google {
  background: #FFFFFF;
  color: #374151;
  border: 1.5px solid #E5E7EB;
}
.oauth-google:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.oauth-apple {
  background: #000000;
  color: #FFFFFF;
  border: 1.5px solid #000000;
}
.oauth-apple:hover {
  background: #262626;
}

.oauth-instagram {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
  color: #FFFFFF;
  border: none;
}
.oauth-instagram:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
  color: #94A3B8;
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-light);
}
.auth-divider span {
  padding: 0 10px;
}

/* Residency Choice Step (Honor System) */
.residency-step-card {
  background: var(--linen);
  border: 1.5px solid rgba(243, 167, 18, 0.35);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
}

.residency-step-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #B45309;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.residency-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.residency-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.residency-option-card:hover {
  border-color: var(--sun-gold);
}

.residency-option-card.selected {
  border-color: var(--emerald);
  background: rgba(13, 92, 58, 0.04);
}

.res-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  margin-top: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.residency-option-card.selected .res-card-radio {
  border-color: var(--emerald);
  background: var(--emerald);
}

.residency-option-card.selected .res-card-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}

.res-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.res-card-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 3px;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.auth-input-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.auth-input-group input,
.auth-input-group textarea,
.auth-input-group select {
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  background: #FFFFFF;
}

.auth-input-group input:focus,
.auth-input-group textarea:focus,
.auth-input-group select:focus {
  border-color: var(--emerald);
}

.dn-warning-msg {
  font-size: 12px;
  font-weight: 600;
  color: #DC2626;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: modalScale 0.15s ease-out;
}

.dn-warning-msg.dn-available {
  color: #0D5C3A;
  background: #ECFDF5;
  border-color: #6EE7B7;
}

.auth-input-group input.input-error {
  border-color: #DC2626 !important;
  background-color: #FFF5F5 !important;
}

.auth-input-group input.input-success {
  border-color: #10B981 !important;
}

/* Avatar Photo Upload Control */
.avatar-upload-control {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--linen);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
}

.avatar-preview-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--emerald);
  background: #FFFFFF;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.avatar-upload-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-avatar-pick {
  align-self: flex-start;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.btn-avatar-pick:hover {
  border-color: var(--emerald);
  background: rgba(13, 92, 58, 0.05);
  color: var(--emerald);
}

.avatar-upload-status {
  font-size: 11.5px;
  color: var(--text-muted);
}

.avatar-upload-status.uploading {
  color: #2563EB;
  font-weight: 600;
}

.avatar-upload-status.success {
  color: #0D5C3A;
  font-weight: 700;
}

.avatar-upload-status.error {
  color: #DC2626;
  font-weight: 700;
}

.auth-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-checkbox-group {
  margin: 12px 0 16px;
}

.auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--emerald);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.25);
}

.auth-submit-btn:hover {
  background: var(--emerald-dark);
  transform: translateY(-1px);
}

.auth-demo-switcher {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-light);
}

.demo-switcher-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.demo-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demo-quick-btn {
  background: var(--linen);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.demo-quick-btn:hover {
  background: #FFFFFF;
  border-color: var(--emerald);
  color: var(--emerald);
}

/* ==========================================================================
   User Account Hub Modal
   ========================================================================== */
.account-hub-card {
  max-width: 720px;
  width: 95%;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.account-hub-header {
  background: var(--linen);
  padding: 24px 28px 0;
  border-bottom: 1px solid var(--border-light);
}

.hub-profile-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.hub-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--emerald);
  background: #FFFFFF;
}

.hub-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-name-row h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.hub-badge-pill {
  font-size: 11px;
  font-weight: 800;
  background: rgba(243, 167, 18, 0.2);
  color: #B45309;
  padding: 3px 8px;
  border-radius: 999px;
}

.hub-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.hub-nav-tabs {
  display: flex;
  gap: 24px;
}

.hub-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

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

.hub-tab-btn.active {
  color: var(--emerald);
  border-bottom-color: var(--emerald);
}

.hub-tab-counter {
  background: rgba(13, 92, 58, 0.12);
  color: var(--emerald);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
}

.account-hub-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.saved-spots-header {
  margin-bottom: 16px;
}

.saved-spots-header h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.saved-spots-header p {
  font-size: 13px;
  color: var(--text-muted);
}

.saved-spots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 640px) {
  .saved-spots-grid {
    grid-template-columns: 1fr;
  }
}

.saved-spot-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #FFFFFF;
  transition: all 0.2s ease;
}

.saved-spot-card:hover {
  border-color: var(--emerald);
  box-shadow: var(--shadow-sm);
}

.saved-spot-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1376 / 768;
  height: auto;
  overflow: hidden;
  background: #0F172A;
}

.saved-spot-img-wrap img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1376 / 768;
  object-fit: contain;
  display: block;
}

.saved-spot-live-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(13, 92, 58, 0.92);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.saved-spot-live-pill.inactive {
  background: rgba(30, 41, 59, 0.85);
}

.saved-spot-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.saved-spot-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 2px;
}

.saved-spot-neighborhood {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.saved-spot-hours {
  font-size: 12px;
  font-weight: 700;
  color: var(--emerald);
  margin-bottom: 10px;
}

.saved-spot-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.saved-spot-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: var(--linen);
  color: var(--text-main);
  transition: all 0.15s ease;
}

.saved-spot-btn:hover {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
}

.saved-spot-remove-btn {
  border: none;
  background: transparent;
  color: #94A3B8;
  font-size: 14px;
  cursor: pointer;
  padding: 0 6px;
}
.saved-spot-remove-btn:hover {
  color: #E11D48;
}

/* Kamaʻāina Widget */
.kamaaina-card-widget {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kamaaina-card-inner {
  background: linear-gradient(135deg, #0A4329 0%, #0D5C3A 100%);
  border: 2px solid var(--sun-gold);
  border-radius: var(--radius-md);
  padding: 24px;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(13, 92, 58, 0.25);
  position: relative;
  overflow: hidden;
}

.kamaaina-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--sun-gold);
  margin-bottom: 16px;
}

.kamaaina-card-hibiscus {
  font-size: 20px;
}

.kamaaina-card-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.kamaaina-card-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--sun-light);
  margin-bottom: 12px;
}

.kamaaina-card-sub {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.4;
  max-width: 480px;
}

.kamaaina-toggle-box {
  background: var(--linen);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.kamaaina-toggle-box h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.kamaaina-toggle-box p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.kamaaina-radio-toggle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.k-label-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}

/* ==========================================================================
   Merchant Dashboard Modal ("Pau Hana for Business")
   Faithfully matching pau_hana_merchant_dashboard_mockup.jpg
   ========================================================================== */
/* ==========================================================================
   Merchant Dashboard Modal ("Pau Hana for Business")
   Faithfully matching pau_hana_merchant_dashboard_mockup.jpg
   ========================================================================== */
.merchant-modal-card {
  max-width: 1180px;
  width: 96%;
  background: #FAF7F2;
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: row;
}

@media (max-width: 860px) {
  .merchant-modal-card {
    flex-direction: column;
    height: 95vh;
  }
}

/* Left Sidebar */
.biz-sidebar {
  width: 230px;
  background: #0D5C3A;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 20px 14px;
}

@media (max-width: 860px) {
  .biz-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px 12px;
    gap: 8px;
  }
}

.biz-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .biz-sidebar-brand {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0 10px 0 0;
  }
}

.biz-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

@media (max-width: 860px) {
  .biz-sidebar-nav {
    flex-direction: row;
  }
}

.biz-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.biz-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.biz-nav-item.active {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.biz-nav-item svg, .biz-nav-item span.nav-icon {
  font-size: 17px;
  width: 20px;
  text-align: center;
}

/* Main Canvas Area */
.biz-main-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #FAF7F2;
  overflow-y: auto;
  position: relative;
}

/* Top Header in Canvas */
.biz-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: #FAF7F2;
  border-bottom: 1px solid rgba(13, 92, 58, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.biz-venue-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.2);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--emerald-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.biz-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.biz-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.biz-content-area {
  padding: 20px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Personable Alert Banner */
.biz-alert-banner {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.biz-alert-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: #92400E;
}

.biz-alert-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.biz-btn-approve {
  background: #0D5C3A;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}
.biz-btn-approve:hover { background: #083D26; }

.biz-btn-dismiss {
  background: #E5E7EB;
  color: #374151;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Freshness & Validity Card */
.biz-freshness-card {
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.15);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.biz-freshness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.biz-freshness-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--emerald-dark);
}

.biz-validity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.biz-select-days {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  background: #FAF7F2;
  cursor: pointer;
}

.btn-confirm-freshness {
  background: #0D5C3A;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.2);
}
.btn-confirm-freshness:hover {
  background: #083D26;
  transform: translateY(-1px);
}

/* 3 Stats Row */
.biz-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .biz-stats-row {
    grid-template-columns: 1fr;
  }
}

.biz-stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.12);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.biz-stat-number {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.biz-stat-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 600;
}

/* Multi-Deal Manager Styles */
.biz-deals-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-add-deal-pkg {
  background: #0D5C3A;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.btn-add-deal-pkg:hover { background: #083D26; }

.deal-package-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.15);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  position: relative;
}

.deal-pkg-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.deal-pkg-title-input {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--emerald-dark);
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  flex: 1;
  min-width: 220px;
}
.deal-pkg-title-input:focus {
  border-color: var(--emerald);
  background: #FDFBF7;
  outline: none;
}

.deal-days-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.deal-day-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border-light);
  background: #FAF7F2;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.deal-day-btn.active {
  background: #0D5C3A;
  color: #FFFFFF;
  border-color: #0D5C3A;
}

.deal-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 12px;
}

.deal-items-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--border-light);
}

.deal-items-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #F1ECE5;
}

.deal-item-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13px;
}

.btn-item-delete {
  background: #FEE2E2;
  color: #991B1B;
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
}

/* Verification Gateway Modal */
.biz-gate-modal-card {
  max-width: 540px;
  width: 90%;
  background: #FAF7F2;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.biz-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 14px;
}

.biz-gate-checkpoints {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
  text-align: left;
}

.biz-gate-checkpoint-item {
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.biz-gate-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.biz-schedule-table {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

.sched-table-header {
  display: grid;
  grid-template-columns: 80px 80px 1fr 1fr;
  background: var(--linen);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sched-table-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr 1fr;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
}

.sched-day-name {
  font-weight: 700;
  color: var(--text-main);
}

.sched-switch {
  display: inline-flex;
  align-items: center;
  background: #E2E8F0;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  color: #64748B;
  cursor: pointer;
  user-select: none;
}

.sched-switch.on {
  background: var(--emerald);
  color: #FFFFFF;
}

.sched-time-input {
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  width: 90%;
}

.biz-flash-action-bar {
  margin-top: 14px;
}

.broadcast-flash-btn {
  width: 100%;
  padding: 14px;
  background: #0D5C3A;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(13, 92, 58, 0.25);
}

.broadcast-flash-btn:hover {
  background: #083D26;
  transform: translateY(-1px);
}

/* ==========================================================================
   Discovery Mode Bar (Pau Hana | Events)
   ========================================================================== */
.discovery-mode-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 10px 14px;
  background: var(--linen);
  border-bottom: 1.5px solid var(--border-light);
  user-select: none;
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

.disc-mode-btn {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  box-sizing: border-box;
}

.disc-mode-btn:hover {
  background: #FFFFFF;
  border-color: var(--emerald);
  color: var(--emerald-dark);
  transform: translateY(-1px);
}

.disc-mode-btn.active {
  background: var(--emerald);
  border-color: var(--emerald-dark);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(13, 92, 58, 0.28);
}

.disc-mode-icon {
  font-size: 13px;
  line-height: 1;
}

.disc-mode-label {
  letter-spacing: 0.01em;
}

.disc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(13, 92, 58, 0.12);
  color: var(--emerald);
  transition: all 0.18s ease;
}

.disc-mode-btn.active .disc-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* Events Mode Three-Button View Toggle */
.events-view-toggle {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #F4EFE6;
  border-bottom: 1px solid rgba(13, 92, 58, 0.09);
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.events-view-toggle .sb-view-btn {
  flex: 1;
  padding: 7px 6px;
  font-size: 11.5px;
  gap: 5px;
  text-align: center;
  justify-content: center;
}

.events-view-toggle .sb-view-btn.active {
  background: var(--emerald) !important;
  border-color: var(--emerald-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(13, 92, 58, 0.22);
}

.events-view-toggle .sb-view-btn.active span {
  color: #FFFFFF !important;
}

.events-view-toggle .sb-view-btn.active:hover {
  background: var(--emerald-dark, #0A4A2E) !important;
  color: #FFFFFF !important;
}

/* Expandable Week Days Section (Expands below 'This Week') */
.events-week-drawer {
  background: #FAF7F2;
  border-bottom: 1px solid rgba(13, 92, 58, 0.1);
  padding: 9px 12px 11px;
  box-sizing: border-box;
}

.events-week-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  padding: 0 1px;
}

.events-week-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.events-all-week-pill {
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.22);
  border-radius: 999px;
  padding: 2.5px 9px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.events-all-week-pill:hover,
.events-all-week-pill.active {
  background: var(--emerald);
  color: #FFFFFF;
  border-color: var(--emerald);
}

.events-day-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.ev-all-pill {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 1px 7px;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.18);
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.ev-all-pill:hover,
.ev-all-pill.active {
  background: var(--emerald) !important;
  color: #FFFFFF !important;
  border-color: var(--emerald-dark) !important;
  box-shadow: 0 2px 6px rgba(13, 92, 58, 0.25) !important;
}

.ev-day-pill {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 1px 7px;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.18);
  border-radius: 6px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  color: #18181B;
}

.ev-day-pill:hover {
  border-color: var(--emerald);
  background: #FFFFFF;
}

/* Days that are part of the following calendar week (unshaded, very pale yellow background) */
.ev-day-pill.is-following-week {
  background: #FEFCE8;
  border-color: #FEF08A;
  color: #18181B;
}

.ev-day-pill.is-following-week:hover {
  background: #FEF9C3;
  border-color: rgba(202, 138, 4, 0.4);
  color: #18181B;
}

.ev-day-pill .ev-dow {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.ev-day-pill .ev-date {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.85;
  line-height: 1.15;
  margin-top: 2px;
}

/* Active selected day pill */
.ev-day-pill.active {
  background: var(--emerald) !important;
  color: #FFFFFF !important;
  border-color: var(--emerald) !important;
  box-shadow: 0 1px 4px var(--emerald-glow);
}

.ev-day-pill.active .ev-date {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
}

.ev-day-pill.is-today .ev-dow {
  color: var(--emerald);
}

.ev-day-pill.active.is-today .ev-dow {
  color: #FFFFFF;
}

/* Category Filter Bar (Events & Specials Modes) */
.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #FAF7F2;
  border-bottom: 1px solid rgba(13, 92, 58, 0.08);
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

.category-filter-bar::-webkit-scrollbar {
  display: none;
}

.cat-chip {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(13, 92, 58, 0.14);
  background: #FFFFFF;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cat-chip:hover {
  border-color: var(--emerald);
  color: var(--emerald-dark);
  background: #FFFFFF;
}

.cat-chip.active {
  background: var(--emerald-dark);
  border-color: var(--emerald-dark);
  color: #FFFFFF;
  box-shadow: 0 1px 4px rgba(8, 61, 38, 0.2);
}

/* Event & Special Cards in Feed */
.sb-event-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 2px 7px;
  border-radius: 4px;
}

.sb-special-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #C2410C;
  background: #FFEDD5;
  border: 1px solid #FDBA74;
  padding: 2px 7px;
  border-radius: 4px;
}

.sb-cover-badge {
  font-size: 10px;
  font-weight: 700;
  color: #065F46;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.sb-event-host {
  font-size: 11.5px;
  color: #475569;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sb-event-desc, .sb-special-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sb-ig-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #E1306C;
  text-decoration: none;
  background: rgba(225, 48, 108, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.sb-ig-link-btn:hover {
  background: rgba(225, 48, 108, 0.16);
  color: #C13584;
}

/* Detail View Event & Special Blocks */
.sb-detail-events-block, .sb-detail-specials-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
}

.sb-detail-events-container-open {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-detail-event-item, .sb-detail-special-item {
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.sb-detail-event-item.is-focused-event {
  background: rgba(13, 92, 58, 0.04);
  border: 1.5px solid var(--emerald);
  box-shadow: 0 2px 10px rgba(13, 92, 58, 0.12);
}

.sb-detail-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sb-detail-item-title {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.sb-event-selected-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--emerald);
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 4px;
}

.sb-event-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald-dark);
  background: rgba(13, 92, 58, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sb-detail-item-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-cover-badge {
  font-size: 11px;
  font-weight: 700;
  color: #065F46;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  padding: 1px 6px;
  border-radius: 4px;
}

.sb-detail-item-desc {
  font-size: 12px;
  color: var(--text-main);
  margin-top: 6px;
  line-height: 1.45;
}

.sb-detail-empty-events {
  padding: 18px 16px;
  text-align: center;
  background: #F8FAFC;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ==========================================================================
   Venue Owner Module Enhancements: Live Review, Pencil Icons, Calendar, Vouchers
   ========================================================================== */

/* Currently Live On Your Listing Card (Overview Tab) */
.biz-live-preview-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 92, 58, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.biz-live-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.biz-live-indicator-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #D1FAE5;
  color: #065F46;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.biz-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.biz-live-col {
  background: #FAF7F2;
  border: 1px solid rgba(13, 92, 58, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
}

.biz-live-col-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--emerald-dark);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.biz-live-items-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.biz-live-deal-chip {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.biz-live-deal-title {
  font-weight: 800;
  color: var(--text-main);
}

.biz-live-deal-days {
  color: var(--emerald-dark);
  font-weight: 700;
  font-size: 11px;
  margin-top: 2px;
}

.biz-live-deal-items {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.35;
}

/* Pencil Icon & Deal Title Styling */
.deal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.deal-pencil-btn {
  background: #FAF7F2;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald);
  transition: all 0.15s ease;
}

.deal-pencil-btn:hover {
  background: #D1FAE5;
  border-color: var(--emerald);
}

/* Interactive Events Calendar */
.biz-calendar-container {
  background: #FFFFFF;
  border: 1px solid rgba(13, 92, 58, 0.15);
  border-radius: 12px;
  padding: 18px;
}

.cal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cal-nav-btn {
  background: #FAF7F2;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  color: var(--emerald-dark);
  transition: all 0.15s ease;
}

.cal-nav-btn:hover {
  background: #D1FAE5;
}

.cal-month-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--emerald-dark);
}

.cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.cal-day-cell {
  min-height: 72px;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  padding: 6px;
  background: #FAF7F2;
  transition: all 0.15s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-day-cell:hover {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.cal-day-cell.other-month {
  opacity: 0.35;
  background: #FFFFFF;
}

.cal-day-cell.today {
  border-color: var(--emerald);
  background: #F0FDF4;
}

.cal-day-num {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-main);
}

.cal-event-chip {
  background: var(--emerald);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.cal-event-chip.recurring {
  background: #854D0E;
}

.cal-event-chip.trivia {
  background: #4338CA;
}

/* Digital Redemption Pass Voucher */
.voucher-pulse-circle {
  width: 68px;
  height: 68px;
  background: #D1FAE5;
  color: #065F46;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 16px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.voucher-live-badge {
  background: #D1FAE5;
  color: #065F46;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 8px;
}

.voucher-code-container {
  background: #FAF7F2;
  border: 2px dashed #059669;
  border-radius: 12px;
  padding: 16px 20px;
}

.voucher-code-number {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--emerald-dark);
  margin: 6px 0;
}

/* Date Range Freshness Controls */
.biz-date-input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border-light);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
}
.biz-date-input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 2px rgba(13, 92, 58, 0.15);
}

.btn-range-preset {
  background: #FAF7F2;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-range-preset:hover, .btn-range-preset.active {
  background: var(--emerald-dark);
  color: #FFFFFF;
  border-color: var(--emerald-dark);
}

/* Collapsible Active Schedules (Overview) */
.biz-overview-schedule-card {
  border: 1.5px solid rgba(13, 92, 58, 0.15);
  border-left: 4px solid var(--emerald);
  border-radius: 8px;
  margin-bottom: 10px;
  background: #FFFFFF;
  overflow: hidden;
  transition: all 0.2s ease;
}
.biz-overview-schedule-card:hover {
  border-color: var(--emerald);
}
.biz-overview-sched-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  background: #FFFFFF;
  user-select: none;
  gap: 12px;
}
.biz-overview-schedule-card.is-collapsed .biz-overview-sched-body {
  display: none;
}
.biz-overview-sched-body {
  padding: 12px 14px;
  border-top: 1px solid #F1ECE5;
  background: #FAF7F2;
}
.biz-sched-chevron {
  transition: transform 0.2s ease;
  font-size: 12px;
  color: var(--text-muted);
}
.biz-overview-schedule-card:not(.is-collapsed) .biz-sched-chevron {
  transform: rotate(180deg);
}

/* Collapsible Deal Packages (Deals & Menus) */
.deal-package-card.is-collapsed .deal-pkg-body {
  display: none;
}
.btn-deal-collapse {
  background: #FAF7F2;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-deal-collapse:hover {
  background: #E2E8F0;
  color: var(--text-main);
}

/* Flash Specials Scheduling Mode Selector */
.flash-mode-toggle {
  display: inline-flex;
  background: #F1ECE5;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 14px;
}
.flash-mode-btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.flash-mode-btn.active {
  background: #FFFFFF;
  color: var(--emerald-dark);
  box-shadow: var(--shadow-sm);
}

.scheduled-flash-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-left: 4px solid #3B82F6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   First Wave Founding Venue Badges (Vintage Lithograph Edition)
   ========================================================================== */

/* 1. Sidebar Card: Action container with Badge placed immediately left of Heart */
.card-actions-top {
  display: flex;
  align-items: center;
  gap: 7.5px;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.first-wave-sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-top: 4px;
  position: relative;
  z-index: 12;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  filter: 
    drop-shadow(0 1px 5px rgba(245, 158, 11, 0.95)) 
    drop-shadow(0 1px 11px rgba(245, 158, 11, 0.6)) 
    drop-shadow(0 0.5px 1.5px rgba(251, 191, 36, 1));
}

.first-wave-sidebar-badge:hover {
  transform: scale(1.15);
  z-index: 20;
  filter: 
    drop-shadow(0 1px 8px rgba(245, 158, 11, 1)) 
    drop-shadow(0 2px 18px rgba(245, 158, 11, 0.8)) 
    drop-shadow(0 1px 2.5px rgba(251, 191, 36, 1));
}

.first-wave-sidebar-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 2. Unboxed Badge with Intense Radiating Golden Glow (Expanded Sidebar & Full Modal) */
.sb-detail-title-row,
.modal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
  overflow: visible;
}

.sb-detail-title-info,
.modal-title-info {
  flex: 1;
  min-width: 0;
}

/* Modal Header Address & Inline Action Buttons */
.modal-address-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.modal-address-text {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.modal-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Base unboxed container */
.first-wave-vertical-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 4px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 10;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  cursor: default;
}

.first-wave-vertical-badge:hover {
  transform: translateY(-2px);
}

/* Sidebar Detail Expansion Badge sizing */
.first-wave-v-badge-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px auto;
  filter: 
    drop-shadow(0 0 8px rgba(245, 158, 11, 0.9)) 
    drop-shadow(0 0 18px rgba(245, 158, 11, 0.65)) 
    drop-shadow(0 0 30px rgba(251, 191, 36, 0.4)) 
    drop-shadow(0 0 2px rgba(251, 191, 36, 1));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}

.first-wave-vertical-badge:hover .first-wave-v-badge-img {
  transform: scale(1.08);
  filter: 
    drop-shadow(0 0 14px rgba(245, 158, 11, 1)) 
    drop-shadow(0 0 28px rgba(245, 158, 11, 0.85)) 
    drop-shadow(0 0 46px rgba(251, 191, 36, 0.6)) 
    drop-shadow(0 0 3.5px rgba(251, 191, 36, 1));
}

.first-wave-v-badge-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.1;
}

/* Single line caption: FIRST WAVE */
.first-wave-v-text-2 {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #B45309;
  white-space: nowrap;
  text-align: center;
  margin-top: 1px;
}

/* 3. Popup Window / Full Modal: Enlarged Badge & Magnified Radiance */
.modal-title-row .first-wave-v-badge-img {
  width: 72px;
  height: 72px;
  margin: 0 auto 6px auto;
  filter: 
    drop-shadow(0 0 10px rgba(245, 158, 11, 0.95)) 
    drop-shadow(0 0 24px rgba(245, 158, 11, 0.7)) 
    drop-shadow(0 0 42px rgba(251, 191, 36, 0.45)) 
    drop-shadow(0 0 2.5px rgba(251, 191, 36, 1));
}

.modal-title-row .first-wave-vertical-badge:hover .first-wave-v-badge-img {
  transform: scale(1.08);
  filter: 
    drop-shadow(0 0 16px rgba(245, 158, 11, 1)) 
    drop-shadow(0 0 34px rgba(245, 158, 11, 0.9)) 
    drop-shadow(0 0 56px rgba(251, 191, 36, 0.65)) 
    drop-shadow(0 0 4px rgba(251, 191, 36, 1));
}

.modal-title-row .first-wave-v-text-2 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin-top: 2px;
}

/* ==========================================================================
   Private Beta Portal Access Gate (Gated until Sign In / Sign Up)
   ========================================================================== */
.beta-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: radial-gradient(circle at 50% 25%, #064E3B 0%, #022C22 55%, #0B1120 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  box-sizing: border-box;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.beta-gate-card {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 24px;
  border-top: 4px solid var(--sun-gold);
  padding: 36px 32px 30px;
  box-shadow: 0 25px 70px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
  position: relative;
  margin: auto;
  box-sizing: border-box;
}

.beta-gate-header {
  text-align: center;
  margin-bottom: 22px;
}

.beta-gate-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 16px auto;
  text-align: left;
}

.beta-gate-logo-icon {
  width: 66px;
  height: 66px;
  min-width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(243, 167, 18, 0.45));
}

.beta-gate-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.beta-gate-brand-pau-hana {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.05em;
  color: var(--emerald-dark);
  line-height: 1;
  text-transform: uppercase;
}

.beta-gate-brand-hunter {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.22em;
  color: var(--emerald);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 5px;
}

.beta-gate-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 20px 0;
  padding: 0 4px;
}

.beta-gate-role-prompt {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--emerald-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.beta-gate-role-prompt::before,
.beta-gate-role-prompt::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 45px;
  background: rgba(13, 92, 58, 0.18);
}

.beta-gate-role-buttons {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.beta-gate-role-or {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: lowercase;
  user-select: none;
  padding: 0 2px;
}

.beta-role-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--linen);
  border: 1.5px solid rgba(13, 92, 58, 0.16);
  border-radius: 14px;
  padding: 13px 16px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--emerald-dark);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.beta-role-btn .role-icon {
  font-size: 18px;
}

.beta-role-btn:hover {
  background: #FFFFFF;
  border-color: var(--emerald);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 92, 58, 0.12);
}

.beta-role-btn.active {
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  border-color: var(--emerald-dark);
  color: #FFFFFF;
  box-shadow: 0 6px 18px var(--emerald-glow);
  transform: translateY(-1px);
}

.beta-role-module {
  animation: fadeInGateModule 0.25s ease-out;
}

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

.beta-gate-have-account-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.beta-gate-have-account-text {
  font-weight: 500;
}

.beta-gate-login-pill-btn {
  background: transparent;
  border: 1.5px solid var(--emerald);
  color: var(--emerald);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.03em;
}

.beta-gate-login-pill-btn:hover {
  background: var(--emerald);
  color: #FFFFFF;
  box-shadow: 0 2px 8px var(--emerald-glow);
  transform: translateY(-1px);
}

.beta-module-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--emerald-dark);
  text-align: center;
  margin: 16px 0 14px 0;
  letter-spacing: -0.2px;
}

.beta-gate-test-creds {
  background: var(--linen);
  border: 1px dashed rgba(13, 92, 58, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
}

.beta-gate-test-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--emerald-dark);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.beta-gate-test-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.beta-gate-test-item {
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.18s ease;
}

.beta-gate-test-item:hover {
  border-color: var(--emerald);
  background: var(--linen);
}

.beta-gate-test-item .fill-arrow {
  color: var(--emerald);
  font-weight: 800;
}

.beta-gate-tabs {
  display: flex;
  background: var(--linen);
  border-radius: 999px;
  padding: 4px;
  margin: 18px 0 18px 0;
  border: 1px solid var(--border-light);
}

.beta-gate-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.beta-gate-tab.active {
  background: #FFFFFF;
  color: var(--emerald);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.beta-gate-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.beta-gate-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.beta-gate-feedback {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.beta-gate-feedback.error {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECDD3;
}
.beta-gate-feedback.success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.auth-field-hint {
  font-size: 11px;
  line-height: 1.4;
  color: #64748B;
  margin-top: 4px;
  font-weight: 500;
}

.auth-field-status {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px;
  display: none;
}
.auth-field-status.available {
  display: block;
  color: #059669;
}
.auth-field-status.taken {
  display: block;
  color: #DC2626;
}
.auth-field-status.checking {
  display: block;
  color: #64748B;
  font-style: italic;
}

.bg-reset-offer-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bg-reset-offer-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bg-reset-offer-icon {
  font-size: 18px;
  line-height: 1;
}

.bg-reset-offer-text-wrap {
  flex: 1;
}

.bg-reset-offer-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #92400E;
}

.bg-reset-offer-desc {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #B45309;
  line-height: 1.35;
}

.bg-reset-action-btn {
  width: 100%;
  padding: 9px 12px;
  background: #D97706;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bg-reset-action-btn:hover {
  background: #B45309;
  transform: translateY(-1px);
}

.bg-reset-status-box {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
  margin-bottom: 14px;
  line-height: 1.4;
}

.beta-claim-confirm-view {
  animation: fadeIn 0.3s ease-in-out;
}

.claim-confirm-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFBEB 100%);
  border: 1.5px solid #FDE68A;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.08);
  margin: 10px 0 6px;
}

.claim-confirm-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  color: #B45309;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 9999px;
  margin-bottom: 16px;
  border: 1px solid #FCD34D;
}

.claim-confirm-greeting {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #1E293B;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

.claim-confirm-body {
  font-size: 14px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 18px 0;
  font-weight: 500;
}

.claim-confirm-welcome {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: #D97706;
  margin: 0;
}

.beta-gate-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .beta-gate-card {
    padding: 26px 18px 22px;
    border-radius: 20px;
  }
  .beta-gate-brand-lockup {
    gap: 12px;
  }
  .beta-gate-logo-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }
  .beta-gate-brand-pau-hana {
    font-size: 26px;
  }
  .beta-gate-brand-hunter {
    font-size: 16px;
    letter-spacing: 0.18em;
  }
  .beta-gate-role-buttons {
    gap: 8px;
  }
  .beta-role-btn {
    padding: 11px 12px;
    font-size: 14px;
  }
}

.account-security-section {
  margin-top: 8px;
}