/* ── Google Fonts ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── StreetBite Design Tokens ─────────────────── */
:root {
  /* Primary orange — search button, CTAs, badges */
  --sb-primary:       #E67E22;
  --sb-primary-dk:    #C0621A;
  --sb-primary-lt:    #FDF3E7;

  /* Deep blue — navbar, footer, logo, icons */
  --sb-green:         #1E3A5F;
  --sb-green-mid:     #2B5797;
  --sb-green-lt:      #4A90D9;
  --sb-green-pale:    #EEF4FB;

  /* Announcement bar blue */
  --sb-bar:           #B3D4F0;
  --sb-bar-text:      #1E3A5F;

  /* Backgrounds */
  --sb-bg:            #FFFFFF;
  --sb-bg-soft:       #F7F9FC;
  --sb-bg-hero:       #F5F0FD;

  /* Text */
  --sb-text:          #1A2B3C;
  --sb-text-mid:      #3D5A80;
  --sb-text-muted:    #6B7280;

  /* Borders & shadows */
  --sb-border:        #E2E8F0;
  --sb-shadow-sm:     0 1px 3px rgba(30,58,95,0.08);
  --sb-shadow-md:     0 4px 16px rgba(30,58,95,0.10);
  --sb-radius:        12px;
  --sb-radius-sm:     8px;
  --sb-radius-pill:   999px;

  /* Status colours */
  --sb-open:          #2B5797;
  --sb-open-bg:       #EEF4FB;
  --sb-closed:        #9CA3AF;
  --sb-closed-bg:     #F3F4F6;

  /* Tabler primary override (used by dashboard & admin layouts) */
  --tblr-primary:     #E67E22;
  --tblr-primary-rgb: 230, 126, 34;

  /* Legacy aliases for auth pages & chat widget */
  --sb-dark:          #1E3A5F;
  --sb-light:         #F7F9FC;
}

/* ── Base typography ──────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--sb-text);
  background-color: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--sb-text);
}

main {
  color: var(--sb-text);
  background-color: var(--sb-bg);
}

a { color: var(--sb-primary); }
a:hover { color: var(--sb-primary-dk); }


/* ══════════════════════════════════════════════════
   NAVBAR — white with green accents
   ══════════════════════════════════════════════════ */
.sb-navbar {
  background-color: var(--sb-bg) !important;
  border-bottom: 1px solid var(--sb-border);
  padding: 0.75rem 0;
  box-shadow: var(--sb-shadow-sm);
}

.sb-navbar .navbar-brand {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sb-green) !important;
  letter-spacing: -0.5px;
}

.sb-navbar .navbar-brand span {
  color: var(--sb-primary) !important;
}

.sb-navbar .nav-link {
  color: var(--sb-text) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem !important;
  border-radius: var(--sb-radius-sm);
  transition: background 0.15s, color 0.15s;
}

.sb-navbar .nav-link:hover {
  color: var(--sb-green) !important;
  background-color: var(--sb-green-pale);
}

.sb-navbar .navbar-toggler {
  color: var(--sb-green) !important;
  border-color: var(--sb-border) !important;
}

/* Sign In button — outlined green */
.btn-signin {
  border: 1.5px solid var(--sb-green);
  color: var(--sb-green);
  background: transparent;
  border-radius: var(--sb-radius-pill);
  padding: 0.4rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.btn-signin:hover {
  background: var(--sb-green);
  color: white;
}

/* Register button — solid orange */
.btn-register {
  background: var(--sb-primary);
  color: white;
  border: none;
  border-radius: var(--sb-radius-pill);
  padding: 0.4rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.btn-register:hover {
  background: var(--sb-primary-dk);
  color: white;
}

/* Dashboard / Admin buttons in navbar (logged in) */
.sb-navbar .btn-outline-light {
  border-color: var(--sb-green) !important;
  color: var(--sb-green) !important;
  border-radius: var(--sb-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}
.sb-navbar .btn-outline-light:hover {
  background: var(--sb-green) !important;
  color: white !important;
}

.sb-navbar .dropdown-menu { min-width: 160px; }


/* ══════════════════════════════════════════════════
   HERO — warm off-white
   ══════════════════════════════════════════════════ */
.sb-hero {
  background-color: var(--sb-bg-hero);
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sb-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(230,126,34,0.10) 0%, transparent 70%);
  border-radius: 50%;
}

.sb-hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(74,144,217,0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.sb-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--sb-text);
  line-height: 1.15;
  letter-spacing: -1px;
}

.sb-hero p.lead {
  font-size: 1.1rem;
  color: var(--sb-text-mid);
  font-weight: 400;
}

/* Hero search bar — unified pill */
.hero-search-form {
  max-width: 640px;
  margin: 2rem auto 0;
}

.hero-search-bar {
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--sb-radius-pill);
  box-shadow: var(--sb-shadow-md);
  padding: 0.35rem 0.4rem 0.35rem 1.1rem;
  gap: 0;
}

.hero-search-icon {
  color: var(--sb-text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.hero-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: var(--sb-text);
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0;
}

.hero-search-bar input::placeholder { color: var(--sb-text-muted); }

.hero-search-divider {
  width: 1px;
  height: 24px;
  background: var(--sb-border);
  flex-shrink: 0;
  margin: 0 0.6rem;
}

.hero-search-bar select {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  color: var(--sb-text-mid);
  cursor: pointer;
  padding: 0.45rem 0;
  max-width: 150px;
  -webkit-appearance: none;
  appearance: none;
}

.hero-search-btn {
  background: var(--sb-primary);
  color: white;
  border: none;
  border-radius: var(--sb-radius-pill);
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.hero-search-btn:hover { background: var(--sb-primary-dk); }

@media (max-width: 576px) {
  .hero-search-bar {
    flex-wrap: wrap;
    border-radius: var(--sb-radius);
    padding: 0.75rem;
    gap: 0.5rem;
  }
  .hero-search-bar input { width: 100%; }
  .hero-search-divider { display: none; }
  .hero-search-bar select { max-width: 100%; flex: 1; }
  .hero-search-btn { width: 100%; padding: 0.65rem; }
}

/* Open Now button */
.btn-open-now {
  background: var(--sb-open-bg);
  color: var(--sb-open);
  border: 1.5px solid var(--sb-green-lt);
  border-radius: var(--sb-radius-pill);
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-open-now:hover {
  background: var(--sb-green-lt);
  color: white;
}

/* City quick-link pills */
.sb-city-pill {
  display: inline-block;
  background: white;
  border: 1.5px solid var(--sb-border);
  color: var(--sb-text);
  border-radius: var(--sb-radius-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}

.sb-city-pill:hover {
  background: var(--sb-green);
  border-color: var(--sb-green);
  color: white;
}


/* ══════════════════════════════════════════════════
   FOOD TRUCK CARDS
   ══════════════════════════════════════════════════ */
.sb-card {
  background: white;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  overflow: hidden;
  box-shadow: var(--sb-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.sb-card:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.sb-card .card-img-top {
  height: 180px;
  object-fit: cover;
  background: var(--sb-bg-soft);
}

.sb-card .card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sb-text);
  margin-bottom: 0.15rem;
}

.sb-card .card-locality {
  font-size: 0.82rem;
  color: var(--sb-text-muted);
}

/* Truck detail page hero */
.detail-hero {
  background: var(--sb-green);
}

.detail-hero-title {
  color: white !important;
}

/* Legacy .truck-card alias */
.truck-card {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  overflow: hidden;
  box-shadow: var(--sb-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.truck-card:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-2px);
}
.truck-card .card-img-top {
  height: 180px;
  object-fit: cover;
  background: var(--sb-bg-soft);
}

/* Open/Closed status badges */
.badge-open {
  background: var(--sb-open-bg) !important;
  color: var(--sb-open) !important;
  border-radius: var(--sb-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-closed {
  background: var(--sb-closed-bg) !important;
  color: var(--sb-closed) !important;
  border-radius: var(--sb-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Cuisine badge */
.badge-cuisine {
  background: var(--sb-green-pale) !important;
  color: var(--sb-green-mid) !important;
  border-radius: var(--sb-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
}


/* ══════════════════════════════════════════════════
   HOMEPAGE SECTIONS
   ══════════════════════════════════════════════════ */
/* Featured Trucks section */
.sb-section {
  padding: 4rem 0;
  background: white;
  color: var(--sb-text);
}

.sb-section-title,
.section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sb-text);
  margin-bottom: 0.4rem;
}

.sb-section-sub {
  color: var(--sb-text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Browse by Cuisine — light green-tinted background */
.sb-cuisine-section {
  background: var(--sb-green-pale);
  padding: 4rem 0;
  color: var(--sb-text);
}

.sb-cuisine-tile {
  background: white;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 1.25rem 0.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--sb-text);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.15s;
  display: block;
  box-shadow: var(--sb-shadow-sm);
}

.sb-cuisine-tile:hover {
  background: var(--sb-green);
  color: white;
  border-color: var(--sb-green);
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

.sb-cuisine-tile i {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--sb-primary);
}

.sb-cuisine-tile:hover i {
  color: white;
}

/* Legacy .cuisine-tile alias */
.cuisine-tile {
  text-align: center;
  padding: 1.25rem .75rem;
  border-radius: var(--sb-radius);
  background: #fff;
  border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow-sm);
  transition: all 0.15s;
}
.cuisine-tile:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-md); }
.cuisine-tile i { font-size: 1.75rem; color: var(--sb-primary); margin-bottom: .5rem; display: block; }

/* How It Works section */
.sb-hiw-section {
  background: white;
  padding: 4rem 0;
  color: var(--sb-text);
}

.sb-hiw-icon {
  width: 64px; height: 64px;
  background: var(--sb-green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: var(--sb-green);
}

.sb-hiw-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sb-text);
  margin-bottom: 0.4rem;
}

.sb-hiw-desc {
  font-size: 0.875rem;
  color: var(--sb-text-muted);
  line-height: 1.6;
}

/* Content sections — explicit colour reset */
main > section {
  color: var(--sb-text);
  background-color: white;
}


/* ══════════════════════════════════════════════════
   FOOTER — deep green
   ══════════════════════════════════════════════════ */
.sb-footer {
  background: var(--sb-green) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 3rem 0 1.5rem;
}

.sb-footer h6 {
  color: white !important;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.sb-footer h6 span { color: var(--sb-primary) !important; }

.sb-footer p {
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  line-height: 1.6;
}

.sb-footer a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.sb-footer a:hover { color: white !important; }

.sb-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.25rem;
  margin-top: 2rem;
  color: rgba(255,255,255,0.45);
}


/* ══════════════════════════════════════════════════
   SEARCH FILTER SIDEBAR
   ══════════════════════════════════════════════════ */
.sb-filter-panel {
  background: white;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 1.25rem;
  box-shadow: var(--sb-shadow-sm);
}

.sb-filter-panel h6 {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sb-text-muted);
  margin-bottom: 0.75rem;
}

.sb-filter-panel .form-check-label {
  font-size: 0.875rem;
  color: var(--sb-text);
}

.sb-filter-panel .form-check-input:checked {
  background-color: var(--sb-green);
  border-color: var(--sb-green);
}


/* ══════════════════════════════════════════════════
   GENERAL BOOTSTRAP OVERRIDES
   ══════════════════════════════════════════════════ */
.btn-sb {
  background: var(--sb-primary);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: .5rem 1.25rem;
  border-radius: var(--sb-radius-pill);
  transition: background 0.15s;
}
.btn-sb:hover { background: var(--sb-primary-dk); color: #fff; }

.btn-sb-outline {
  border: 2px solid var(--sb-primary);
  color: var(--sb-primary);
  background: transparent;
  font-weight: 600;
  padding: .45rem 1.2rem;
  border-radius: var(--sb-radius-pill);
}
.btn-sb-outline:hover { background: var(--sb-primary); color: #fff; }

/* Override Bootstrap primary colour */
.btn-primary {
  background-color: var(--sb-primary) !important;
  border-color: var(--sb-primary) !important;
  border-radius: var(--sb-radius-pill);
  font-weight: 600;
}
.btn-primary:hover {
  background-color: var(--sb-primary-dk) !important;
  border-color: var(--sb-primary-dk) !important;
}

/* Form controls */
.form-control, .form-select {
  border-color: var(--sb-border);
  border-radius: var(--sb-radius-sm);
  color: var(--sb-text);
  font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sb-green);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.10);
}

/* Pagination */
.page-link {
  color: var(--sb-green);
  border-radius: var(--sb-radius-sm) !important;
}
.page-item.active .page-link {
  background-color: var(--sb-green);
  border-color: var(--sb-green);
}

/* Form checks */
.form-check-input:checked {
  background-color: var(--sb-green);
  border-color: var(--sb-green);
}


/* ══════════════════════════════════════════════════
   AUTH PAGES (unchanged structure)
   ══════════════════════════════════════════════════ */
.auth-page {
  background: var(--sb-green);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 460px;
}
.auth-card .card { border: none; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.auth-card .card-body { padding: 2rem; }
.auth-card h4 { font-weight: 700; color: var(--sb-text); }
.auth-card h4 span { color: var(--sb-primary); }