:root {
  --black:#0a0a0a;
  --white:#ffffff;
  --accent:#ffd60a;
  --muted:#6b6b6b;
  --container:1200px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

html, body{
  height:auto;
  overflow-x:hidden;  
  overflow-y:auto;    
}

body{
  position:static !important;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  border-bottom:1px solid #eee;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  height:56px;
  width:auto;
}
.brand-text .title{font-weight:700;}
.brand-text .tag{font-size:12px;color:var(--muted);}

.main-nav a{
  margin-left:18px;
  text-decoration:none;
  color:var(--black);
  font-weight:600;
  transition:color .2s ease;
}
.main-nav a:hover{color:var(--accent);}

/* Hero */
.hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.95)),
    url("assets/hero-bike.jpg") center/cover no-repeat;
  color:#fff;
  padding:64px 0;
}
.hero-inner{
  display:flex;
  gap:30px;
  align-items:center;
  flex-direction:column;
}
.hero-left,.hero-right{flex:1;}
.hero-right{display:flex;justify-content:center;}
.hero h1{font-size:40px;margin:0 0 12px;}
.lead{color:#ddd;max-width:650px;}
.cta-row{margin-top:18px;display:flex;gap:12px;}
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
}
.btn.primary{
  background:var(--accent);
  color:#000;
}
.btn:disabled,
.btn[disabled]{
  opacity:0.6;
  cursor:not-allowed;
  pointer-events:none;
}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
/* Primary Button Hover */
.btn.primary:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 24px rgba(255,214,10,.45);
  background:#ffdf3a;
}

.btn.primary:disabled{
  background:#e5e5e5;
  color:#9a9a9a;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}

/* Ghost Button Hover */
.btn.ghost:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
}
/* Button Click */
.btn:active{
  transform:scale(.98);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* Cards */
.card{
  background:#fff;
  border-radius:10px;
  padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.card-logo{
  height:72px;
  width:auto;
  display:block;
  margin:0 auto 8px;
}
.card-prices{
  display:flex;
  flex-direction:column;
  color:#000;
  gap:8px;
  padding-top:8px;
}
.card-prices div{
  display:flex;
  justify-content:space-between;
  font-weight:600;
}

/* Sections + Grid */
.section{padding:56px 0;}
.alt{
  background:#f7f7f7;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.grid{display:grid;gap:18px;}
.services-grid{grid-template-columns:1fr;}

@media (min-width:720px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
  .hero-inner{flex-direction:row;}
}
.service-card{font-size:20px;}

/* Pricing Grid */
.pricing-grid{grid-template-columns:1fr;}
.price-card .price{
  font-size:28px;
  font-weight:800;
  margin-top:8px;
}
@media (min-width:720px){
  .pricing-grid{grid-template-columns:repeat(3,1fr);}
}

/* Booking Form */
.booking-grid,
#signup-form input{width:100%;}

.booking-grid input,
.booking-grid select,
.booking-grid textarea,
#signup-form input{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
}

.booking-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media (min-width:720px){
  .booking-grid{grid-template-columns:repeat(2,1fr);}
  .booking-grid textarea{grid-column:1 / span 2;}
  .booking-grid button,
  #booking-status{grid-column:1 / span 2;}

  /* ✅ make slot picker breathe on desktop */
  .time-picker{grid-column:1 / -1;}
}


.slot.selected::after{
  content:"✓";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  font-weight:900;
  color:#0a0a0a;
  opacity:.85;
}

/* Status text + admin */
.form-status{
  font-size:14px;
  margin-top:6px;
}
.form-status.success{color:green;}
.form-status.error{color:#c00;}
.admin-card{margin-top:16px;}
.admin-bookings{
  margin-top:14px;
  max-height:320px;
  overflow:auto;
  font-size:14px;
}
.admin-bookings table{
  width:100%;
  border-collapse:collapse;
}
.admin-bookings th,
.admin-bookings td{
  padding:6px 8px;
  border-bottom:1px solid #eee;
}

/* Time picker wrapper */
.time-picker{
  display:flex;
  flex-direction:column;
  gap:6px;

  /* ✅ IMPORTANT: always full width (fixes your "off by a little") */
  width:100%;
  justify-self:stretch;
}
#slot-picker{
  width:100%;
  justify-self:stretch;
}

/* ---------------------------
   Horizontal slot scroller
   3 visible desktop, 2 mobile
--------------------------- */
.slot-picker{
  --gap: 10px;

  display:flex;
  gap:var(--gap);
  margin-top:10px;

  width:100%;
  justify-self:stretch;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  scroll-snap-type:x mandatory;
  scroll-padding:0;

  /* ✅ no side padding = math stays perfect */
  padding:6px 0 10px;
}

/* ================================
   SLOT PICKER: LEVEL UP PACK 🔥
   - Animated underline label
   - Lock icon on disabled slots
   - Pulse on selected slot
================================ */

/* Select Time label (center + bold + underline animation) */
.time-picker > label{
  text-align:center;
  font-weight:900;
  font-size:16px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#0a0a0a;
  position:relative;
  display:inline-block;
  align-self:center; /* keeps it centered even in flex column */
  padding-bottom:6px;
}

.time-picker > label::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  height:3px;
  width:70%;
  transform:translateX(-50%) scaleX(0.35);
  transform-origin:center;
  background:var(--accent);
  border-radius:999px;
  opacity:.95;
  animation:labelUnderline 1.4s ease-in-out infinite;
}

@keyframes labelUnderline{
  0%,100%{
    transform:translateX(-50%) scaleX(0.35);
    opacity:.75;
  }
  50%{
    transform:translateX(-50%) scaleX(1);
    opacity:1;
  }
}

/* ================================
   TIME + SLOT PICKER (CLEAN + FIRE)
   - Desktop: 3 slots visible
   - Mobile: 2 slots visible
   - Smooth snap scroll
   - No layout breaking
================================ */

/* Wrapper */
.time-picker{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  justify-self:stretch;
}

/* Label */
.time-picker > label{
  text-align:center;
  font-weight:900;
  font-size:16px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:#0a0a0a;
  position:relative;
  width:100%;
  margin:0;
  padding-bottom:8px;
}

/* underline */
.time-picker > label::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  height:3px;
  width:78%;
  transform:translateX(-50%);
  background:var(--accent);
  border-radius:999px;
  opacity:.95;
}

/* Slot row */
.slot-picker{
  --gap:10px;

  display:flex;
  gap:var(--gap);
  width:100%;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  scroll-snap-type:x mandatory;
  scroll-padding-left:6px;
  scroll-padding-right:6px;

  padding:8px 6px 12px;
  border-radius:12px;

  /* subtle background so it looks intentional */
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.06);
}

/* Scrollbar (optional but clean) */
.slot-picker::-webkit-scrollbar{ height:7px; }
.slot-picker::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.16);
  border-radius:999px;
}
.slot-picker::-webkit-scrollbar-track{ background:transparent; }

/* Slot button */
.slot{
  /* 3 visible on desktop */
  flex:0 0 calc((100% - (var(--gap) * 2)) / 3);
  scroll-snap-align:start;

  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  border-radius:999px;

  padding:12px 10px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;

  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background-color .12s ease;
  position:relative;
}

/* Mobile: 2 visible, bigger tap targets */
@media (max-width:720px){
  .time-picker > label{ font-size:15px; }

  .slot-picker{
    padding:10px 8px 12px;
    border-radius:14px;
  }

  .slot{
    flex-basis: calc((100% - var(--gap)) / 2);
    padding:14px 12px;
    font-size:15px;
  }
}

/* Hover/press */
.slot:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  border-color:rgba(255,214,10,.70);
}

.slot:active{
  transform:scale(.98);
}

/* Selected: clean glow (no crazy pulse on mobile) */
.slot.selected{
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0a0a;
  box-shadow:0 10px 22px rgba(255,214,10,.40);
}

/* ====================================
   SLOT CHECKMARK (CLEAN / CSS ONLY)
==================================== */

/* Make slots relative for overlay */
.slot{
  position: relative;
}

/* Checkmark bubble (hidden by default) */
.slot::after{
  content: "✓";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  opacity: 0;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: #ffd60a;
  color: #ffd60a;

  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

/* Show checkmark when selected */
.slot.selected::after{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Disabled slot keeps lock only */
.slot.disabled::after{
  display: none;
}


/* Disabled: locked */
.slot.disabled{
  opacity:.45;
  cursor:not-allowed;
  border-style:dashed;
  box-shadow:none;
  transform:none;
  background:#fff;
}

.slot.disabled::after{
  content:"🔒";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:.9;
  pointer-events:none;
}

.slot.disabled:hover{
  transform:none;
  box-shadow:none;
  border-color:rgba(0,0,0,.14);
}


/* Footer */
.site-footer{
  background:#0b0b0b;
  color:#fff;
  padding:36px 0;
  margin-top:32px;
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.footer-logo{
  height:48px;
  width:auto;
}
@media (min-width:720px){
  .footer-inner{grid-template-columns:repeat(3,1fr);}
}
.muted{color:var(--muted);font-size:14px;}
.copyright{
  padding:18px 0;
  font-size:13px;
  color:#999;
  text-align:center;
}

/* ---------------------------------------------------
   MOBILE OPTIMIZATION (max-width: 720px)
----------------------------------------------------- */
@media (max-width: 720px) {

  .hero{
    padding:48px 0;
    text-align:center;
    background-position:center;
  }

  .hero h1{
    font-size:32px;
    line-height:1.2;
  }

  .lead{
    font-size:15px;
    padding:0 12px;
  }

  .cta-row{
    flex-direction:column;
    width:100%;
  }

  .cta-row .btn{
    width:100%;
    text-align:center;
  }

  .card{
    padding:20px;
    border-radius:12px;
  }

  .card-logo{height:64px;}

  .services-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .booking-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .booking-grid textarea{grid-column:1;}
  .booking-grid button{grid-column:1 !important;}

  input, select, textarea{
    font-size:16px;
  }

  .footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-logo{margin:0 auto;}

  .header-inner{
    flex-direction:column;
    gap:10px;
  }

  .main-nav{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .main-nav a{font-size:15px;}

  .btn{
    width:100%;
    text-align:center;
    font-size:16px;
    padding:12px 16px;
  }
}

/* ---------------------------------------------------
   MOBILE CENTER ALIGNMENT BOOST
   (fixed so it does NOT break slot scroller)
----------------------------------------------------- */
@media (max-width: 720px) {

  .section,
  .alt{
    text-align:center;
  }

  .hero-inner{align-items:center;}
  .hero-left,
  .hero-right{text-align:center;}

  .card{text-align:center;}

  .card-prices div{
    justify-content:center;
    gap:12px;
  }

  .grid,
  .services-grid,
  .pricing-grid{
    justify-items:center;
  }

  /* ✅ keep form centered, but DO NOT shrink children */
  .booking-grid{
    justify-items:stretch;
  }

  /* Center text inside inputs, but keep full width */
  .booking-grid input,
  .booking-grid select,
  .booking-grid textarea,
  .booking-grid button{
    text-align:center;
    justify-self:stretch;
    width:100%;
  }

  .footer-inner{
    text-align:center;
    justify-items:center;
  }

  .footer-inner .col{
    align-items:center;
  }
}

/* ===========================
   MOBILE: MAKE IT FIRE 🔥
   (Overrides only <= 720px)
=========================== */
@media (max-width:720px){

  /* Global spacing + type */
  body{ font-size:16px; }
  .container{ padding:0 14px; }
  .section{ padding:34px 0; }
  .muted{ font-size:13px; line-height:1.45; }

  /* Header: stop ugly wrap */
  .site-header{ position:sticky; top:0; backdrop-filter:saturate(1.2) blur(6px); }
  .header-inner{
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px 0;
  }
  .brand{ justify-content:center; }
  .logo{ height:48px; }
  .brand-text .title{ font-size:16px; }
  .brand-text .tag{ font-size:11px; }

  /* Nav as a scrollable row (clean, no wrap) */
  .main-nav{
    width:100%;
    display:flex;
    gap:10px;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:4px 2px 8px;
    border-top:1px solid rgba(0,0,0,.05);
  }
  .main-nav a{
    margin-left:0;
    white-space:nowrap;
    font-size:14px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
  }

  /* Hero: make it hit */
  .hero{
    padding:44px 0 34px;
    text-align:left;
    background-position:center;
  }
  .hero-inner{
    flex-direction:column;
    gap:16px;
  }
  .hero h1{
    font-size:30px;
    line-height:1.12;
    margin:0 0 10px;
  }
  .lead{
    font-size:14px;
    line-height:1.5;
    padding:0;
    max-width:100%;
  }
  .cta-row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:12px;
  }
  .btn{
    width:100%;
    text-align:center;
    padding:13px 16px;
    border-radius:12px;
    font-size:16px;
  }

  /* Cards: nicer, less chunky */
  .card{
    border-radius:16px;
    padding:16px;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
  }
  .card:hover{ transform:none; } /* mobile hover weirdness */
  .card-logo{ height:56px; }
  .card-prices div{ font-size:14px; }

  /* Grids: make everything one column clean */
  .services-grid,
  .pricing-grid{ grid-template-columns:1fr; gap:14px; }
  .service-card{ font-size:18px; }

  /* Booking form: make it feel premium */
  .booking-grid{
    grid-template-columns:1fr !important;
    gap:12px;
    justify-items:stretch;
  }
  .booking-grid input,
  .booking-grid select,
  .booking-grid textarea{
    width:100%;
    padding:13px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    font-size:16px;
    background:#fff;
    text-align:left; /* 🔥 this is big — centered inputs look cooked */
  }
  .booking-grid textarea{
    min-height:110px;
    resize:vertical;
  }
  .booking-grid button{
    grid-column:1 !important;
  }

  /* Time picker: make it look like a real component */
  .time-picker{ margin-top:2px; }
  .time-picker > label{
    font-size:14px;
    letter-spacing:.4px;
  }

  /* Slot scroller: better visuals + spacing */
  .slot-picker{
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:10px 10px 14px;
    gap:10px;
  }

  /* 2 visible: more breathing room + consistent width */
  .slot{
    flex-basis: calc((100% - 10px) / 2);
    padding:14px 12px;
    border-radius:999px;
    font-size:15px;
  }

  /* Selected: pop more on mobile */
  .slot.selected{
    box-shadow:0 14px 30px rgba(255,214,10,.35);
  }

  /* Footer */
  .site-footer{ padding:28px 0; }
  .footer-inner{ text-align:left; gap:14px; }
  .footer-logo{ height:44px; }
}

/* ✅ HARD MOBILE FIX: stops "tiny site on the left" */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img, video, canvas, svg{
  max-width:100%;
  height:auto;
}

@media (max-width: 720px){
  .container, .section, .alt, .grid, .card, form{
    max-width:100%;
  }
}

/* iOS text size weirdness */
body{
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 720px){

  /* ✅ force booking form to actually fit the screen */
  #booking-form,
  .booking-grid{
    width:100%;
    max-width:100%;
    justify-items:stretch;
  }

  /* ✅ slot scroller must not create page-wide overflow */
  .slot-picker{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
  }

  /* ✅ remove the "min-width" that causes overflow */
  .slot{
    min-width:0 !important;
    flex: 0 0 calc((100% - var(--gap)) / 2); /* 2 visible on mobile */
  }

  /* ✅ keep inputs from causing sideways overflow */
  input, select, textarea, button{
    max-width:100%;
  }
}


/* ✅ MOBILE FIX: stop booking section from overflowing right */
@media (max-width: 720px){

  /* Make the booking grid stretch full width (NOT centered/shrunk) */
  .booking-grid{
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  /* Every direct child should be allowed to shrink and fit */
  .booking-grid > *{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Time picker row must be full width */
  .time-picker,
  #slot-picker{
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* Slot scroller must not create page-wide overflow */
  .slot-picker{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* Kill any min-width that forces overflow */
  .slot{
    min-width: 0 !important;
    flex: 0 0 calc((100% - var(--gap)) / 2) !important; /* 2 visible */
  }

  /* Keep label centered and bold */
  .time-picker > label{
    width: 100%;
    text-align: center;
    font-weight: 900;
  }
}