/* =========================================================
   BikeGarageNearMe — Light Theme (Yellow & White)
   Cleaned: single source of truth, no duplicate/alt styles
   ========================================================= */

/* ---------- Base palette ---------- */
:root{
  --bg: #ffffff;
  --text: #111827;        /* very dark gray */
  --muted: #6b7280;       /* slate */
  --line: rgba(17,24,39,.08);

  --brand: #ffc107;       /* primary yellow */
  --brand-2: #ffd54d;     /* lighter yellow */
  --brand-dark: #f59e0b;  /* darker/hover */
}

/* ---------- Resets & typography ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff; color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }
.fw-700{ font-weight:700 } .fw-800{ font-weight:800 }
.text-muted{ color:var(--muted)!important }
.link-muted{ color:var(--muted) } .link-muted:hover{ color:#374151 }

/* ---------- Header: Topbar & Navbar ---------- */
.topbar{
  background:#fff8db;                         /* pale yellow */
  border-bottom:1px solid var(--line);
  color:#6b7280;
}
.bg-nav{
  background:#ffffff;
  border-bottom:3px solid var(--brand);        /* bold yellow underline */
}
.navbar .navbar-brand{ color:#111827 }
.navbar .nav-link{ color:#374151; opacity:.95; transition:color .15s ease,opacity .15s ease }
.navbar .nav-link:hover,.navbar .nav-link:focus{ color:#111827; opacity:1 }
.brand-mark{
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 0 0 2px rgba(255,193,7,.25);
}

/* ---------- Premium Location Pill (right of logo) ---------- */
/* Markup lives in navbar.php with .navbar-loc-prem */
.navbar-loc-prem{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(17,24,39,.12);
  border-radius:999px; padding:6px 40px 6px 12px;
  box-shadow:0 2px 10px rgba(17,24,39,.07);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.navbar-loc-prem:hover{
  border-color:rgba(255,193,7,.65);
  background:#fffdfa;
  box-shadow:0 6px 22px rgba(255,193,7,.18), 0 0 0 4px rgba(255,193,7,.10);
}
.navbar-loc-prem:focus-within{
  border-color:var(--brand);
  box-shadow:0 8px 28px rgba(255,193,7,.22), 0 0 0 4px rgba(255,193,7,.18);
}

/* chip showing current city */
.loc-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff8db; border:1px solid rgba(255,193,7,.45);
  border-radius:999px; padding:2px 8px; line-height:1;
}
.chip-pin{ font-size:14px }
.chip-text{
  font-size:.85rem; font-weight:700; color:#111827;
  max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* native select visually integrated */
.navbar-city-select-prem{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:0; outline:0; background:transparent;
  font-size:.95rem; font-weight:600; color:#111827;
  min-width:160px; padding:0 18px 0 0; cursor:pointer;
}
.loc-chev-prem{
  position:absolute; right:12px; width:16px; height:16px; pointer-events:none; opacity:.7;
}
.loc-clear-prem{
  position:absolute; right:32px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#6b7280; line-height:1;
  font-size:18px; padding:0 2px; cursor:pointer;
}
.loc-clear-prem:hover{ color:#111827 }
.loc-spinner{
  position:absolute; right:54px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(17,24,39,.2); border-top-color:var(--brand);
  animation:locspin .9s linear infinite; display:none;
}
.loc-spinner.on{ display:inline-block }
@keyframes locspin { to { transform:translateY(-50%) rotate(360deg) } }

@media (max-width:991.98px){
  .chip-text{ max-width:110px }
  .navbar-city-select-prem{ min-width:130px }
}

/* ---------- Hero (soft yellow glow) ---------- */
.hero-wrap{
  padding:64px 0 16px;
  background:
    radial-gradient(700px 200px at 50% 0%, rgba(255,193,7,.18), transparent 60%),
    radial-gradient(600px 160px at 50% -20%, rgba(255,213,77,.15), transparent 60%);
  border-bottom:1px solid var(--line);
}
.hero-content .lead{ color:var(--muted) }
.text-gradient{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-gap{ margin-top:-24px }

/* ---------- Premium card & form visuals ---------- */
.premium-card{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 8px 28px rgba(17,24,39,.08);
}
.premium-card h2.h5{ font-weight:800 }
.input-group-text{ background:#fffbe8; border-color:rgba(17,24,39,.1) }

.form-control{ background:#fff; border:1px solid var(--line); color:var(--text) }
.form-control::placeholder{ color:#9ca3af }
.form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(255,193,7,.25) }
.form-select{ background:#fff; border:1px solid var(--line); color:var(--text) }
.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(255,193,7,.25) }

/* ---------- Services: pill checkbox grid ---------- */
.svc-grid{
  display:grid; gap:8px; grid-template-columns:repeat(1,1fr);
}
@media (min-width:576px){ .svc-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:992px){ .svc-grid{ grid-template-columns:repeat(3,1fr) } }

.svc-pill{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(17,24,39,.12); background:#fff;
  border-radius:999px; padding:8px 12px; cursor:pointer; user-select:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.svc-pill:hover{ border-color:var(--brand); background:#fffdfa }
.svc-pill input{ position:absolute; opacity:0; pointer-events:none }
.svc-pill .pill-text{ font-weight:600; color:#111827; font-size:.95rem }

/* Checked state */
.svc-pill input:checked + .pill-text{ position:relative; padding-left:22px }
.svc-pill input:checked + .pill-text::before{
  content:'✓'; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px; line-height:16px; text-align:center; font-size:12px;
  border-radius:50%; background:var(--brand); color:#111827;
}

/* Focus ring (modern browsers) */
.svc-pill:has(input:focus-visible){
  box-shadow:0 0 0 .2rem rgba(255,193,7,.25); border-color:var(--brand);
}

/* ---------- Buttons ---------- */
.btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:1px solid rgba(255,193,7,.6); color:#111827; font-weight:700;
}
.btn-primary:hover{
  background:linear-gradient(90deg,var(--brand-dark),var(--brand));
  border-color:rgba(245,158,11,.8); color:#0b0f19;
}
.btn-outline-light{ color:#111827; background:#fff; border:1px solid var(--line) }
.btn-outline-light:hover{ background:var(--brand); border-color:rgba(255,193,7,.7) }

/* ---------- Chips / badges ---------- */
.bg-chip{
  background:#fff8db; color:#111827;
  border:1px solid rgba(255,193,7,.45);
  border-radius:999px; padding:.35rem .6rem;
}

/* ---------- Cards & Tables (optional common look) ---------- */
.card{ background:#fff; border:1px solid var(--line); color:var(--text);
  border-radius:14px; box-shadow:0 8px 26px rgba(17,24,39,.08) }
.table{ color:#111827; --bs-table-bg:#fff; --bs-table-striped-bg:#fff7d6; border-color:var(--line) }

/* ---------- Footer ---------- */
.footer{
  background:#fffaf0; border-top:2px solid #ffe08a; color:#374151;
}
.footer hr{ border-color:var(--line) }
.footer .btn.btn-outline-light{ border-color:rgba(17,24,39,.12) }
.footer .btn.btn-outline-light:hover{ background:var(--brand); border-color:var(--brand-dark); color:#111827 }

/* ---------- Helpers ---------- */
.badge.p-2{ border-radius:999px }
hr{ border-color:var(--line) }
.bg-white{ background:#fff!important }
