/* Brand & Layout */
:root {
  --brand-dark: #0f172a; /* slate-900 */
  --brand: #1e293b;      /* slate-800 */
  --accent: #26a69a;     /* materialize teal */
  --bg: #f7f8fa;
}

body.site-bg { background: var(--bg); color: #222; }
.brand-text { color: var(--brand-dark) !important; font-weight: 700; }
.nav-elevated { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.nav-elevated a, .nav-elevated i { color: var(--brand-dark) !important; }

/* Sections */
.section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.section-alt { background: #fff; }
.section-head { margin-bottom: 1rem; }
.section-title { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.section-kicker { margin: .25rem 0 0; color: #64748b; }

/* Hero */
.hero { padding: 3.5rem 0; }
.gradient-hero { color: #fff; background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0ea5a5 100%); }
.hero-inner { display: flex; align-items: center; min-height: 280px; }
.hero-title { margin: 0 0 .5rem; font-weight: 800; letter-spacing: .2px; }
.hero-subtitle { margin: 0 0 1.25rem; color: rgba(255,255,255,.9); }
.btn-cta { background: var(--accent); }

/* Cards */
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.price-chip { background: #e0f2f1; color: #00695c; margin-right: .5rem; }
.time-chip { background: #e3f2fd; color: #0d47a1; }

/* Avatar */
.avatar-circle { width: 64px; height: 64px; border-radius: 50%; background: #e2e8f0; color: #0f172a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; }

/* Hours & Map */
.hours-list .collection-item { border-left: 3px solid var(--accent); }
.map-placeholder { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 8px; color: #607d8b; }

/* Footer */
.footer-elevated { background: var(--brand-dark); }
.footer-list { list-style: none; margin: 0; }
.footer-list li { color: #cfd8dc; margin-bottom: .25rem; display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }

/* Utilities */
.sticky-cta { position: sticky; bottom: 0; z-index: 1000; padding: .75rem 0; background: rgba(255,255,255,.8); backdrop-filter: blur(6px); border-top: 1px solid rgba(2,6,23,.06); }
.btn-full { width: 100%; }
.modal .modal-footer { position: static; }

/* Tabs: match site accent */
.tabs .tab a { color: var(--accent); }
.tabs .tab a.active { color: var(--accent); font-weight: 600; }
.tabs .indicator { background-color: var(--accent); }

/* Full-screen modal for booking */
.modal.modal-full {
  max-height: 100vh;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0;
  margin: 0;
}
.modal.modal-full .modal-content {
  height: calc(100vh - 56px);
  overflow: auto;
  position: relative;
}
.close-x {
  position: absolute;
  top: .25rem;
  right: .25rem;
  color: #263238;
  z-index: 2;
}
.close-x i { font-size: 28px; }

/* Sidenav full-screen layering */
.sidenav { width: 100vw !important; z-index: 1100 !important; }
.sidenav-overlay { z-index: 1099 !important; }

/* Slots as chips */
.slot-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-chip { border: 1px solid #cfd8dc; border-radius: 20px; padding: .35rem .75rem; cursor: pointer; background: #fff; }
.slot-chip input[type="radio"] { display: none; }
.slot-chip.active, .slot-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Quantity controls */
.qty-group { display: inline-flex; align-items: center; gap: 6px; }
.qty-input { width: 64px; text-align: center; }
.qty-minus, .qty-plus { min-width: 32px; height: 32px; line-height: 32px; padding: 0; }
.qty-disabled { opacity: .4; pointer-events: none; }