/* ============================================================
   MILKIA - Header, search & mobile overrides
   - Header is always solid so content never shows through it
   - Public site: search icon on every viewport -> floating panel
   - Public site: compact one-row header + tidy burger menu at <=1100px
   - Owner dashboard (.owner-head) keeps its own header/drawer (owner.css)
   ============================================================ */

:root{--head-h:64px}

/* ---- Header: solid at all times ---- */
.site-head,
.site-head.scrolled{
  background:rgba(245,242,237,.94);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--border-light);
}
.site-head{padding:.9rem 0}
.site-head.scrolled{padding:.7rem 0}

/* ---- Search icon button ---- */
.mobile-search-btn{
  display:none;align-items:center;justify-content:center;
  background:none;border:none;padding:.5rem;color:var(--ink);cursor:pointer;
  border-radius:50%;transition:background .2s;flex:0 0 auto;order:2;
}
.site-head:not(.owner-head) .mobile-search-btn{display:flex}
.mobile-search-btn:hover,.mobile-search-btn:focus{background:var(--border-light);outline:none}
.mobile-search-btn:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.mobile-search-btn[aria-expanded="true"]{background:var(--border-light)}

/* ---- Public search: floating panel under the header ---- */
.site-head:not(.owner-head) #mobile-search-form{
  display:none;
  position:absolute;
  top:calc(100% + .5rem);
  left:50%;
  transform:translateX(-50%);
  width:min(560px,calc(100vw - 2rem));
  max-width:none;
  margin:0;
  padding:.35rem .35rem .35rem 1.1rem;
  box-shadow:0 12px 32px rgba(28,25,23,.16);
  z-index:60;
  order:0;
}
.site-head:not(.owner-head) #mobile-search-form.is-visible{display:flex !important;animation:searchIn .18s ease-out}
.site-head:not(.owner-head) #mobile-search-form input{flex:1;width:auto;min-width:0;font-size:1rem}
@keyframes searchIn{
  from{opacity:0;transform:translate(-50%,-8px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* ---- Public burger menu: tidy floating card ---- */
.site-head .mobile-nav{
  left:auto;right:1rem;
  top:calc(100% + .4rem);
  width:min(300px,calc(100vw - 2rem));
  padding:.5rem;
  border:1px solid var(--border-light);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
}
.site-head .mobile-nav-inner{gap:0}
.site-head .mobile-nav a:not(.btn){
  display:block;
  padding:.85rem 1rem;
  border-bottom:none;
  border-radius:14px;
  font-size:1rem;
}
.site-head .mobile-nav a:not(.btn):hover,
.site-head .mobile-nav a.active{background:var(--bg);color:var(--accent)}
.site-head .mobile-nav-divider{margin:.4rem .5rem}
.site-head .mobile-cta-btn{width:auto;margin:.4rem .5rem .5rem;justify-content:center}
/* never show My Bookings twice */
.site-head .mobile-nav-inner:has(a[href*="my-bookings"]:not(.mobile-cta-btn)) .mobile-cta-btn[href*="my-bookings"]{display:none}
.mobile-account-header{padding:.8rem 1rem;border-bottom:1px solid var(--border-light);margin-bottom:.4rem;text-align:left}
.mobile-account-header strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.2rem}
.mobile-account-header small{color:var(--ink-soft);font-size:.85rem}

/* ---- Tablet & phone public header (burger visible) ---- */
@media(max-width:1100px){
  .site-head:not(.owner-head) .head-row{flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:.4rem}
  .site-head:not(.owner-head) .wordmark{margin-right:auto}
  .site-head:not(.owner-head) .mobile-menu-btn{order:3;flex:0 0 auto;display:flex}
  /* sign-in / my bookings live in the burger menu */
  .site-head:not(.owner-head) .head-cta{order:4;width:0;flex:0 0 0;gap:0;min-width:0}
  .site-head:not(.owner-head) .head-cta > a{display:none}
  .site-head:not(.owner-head) .account-dropdown.desktop-only{display:none !important}
}

/* ---- Phones / small tablets ---- */
@media(max-width:760px){
  html{font-size:15px}
  body{line-height:1.5}

  .site-head,.site-head.scrolled{padding:.6rem 0}
  .wordmark{font-size:1.05rem;letter-spacing:.12em}
  .owner-head .mobile-search-btn{display:flex}

  /* Home hero: full height, content at the bottom */
  .hero{min-height:100dvh;padding-top:0;padding-bottom:0;display:flex;align-items:flex-end;justify-content:center;text-align:center}
  .hero .wrap{width:100%;padding-bottom:clamp(3rem,8vh,5rem)}
  .hero-content{max-width:100%;text-align:center}
  .hero-content .display{font-size:clamp(2rem,8vw,2.8rem);margin-bottom:1rem;line-height:1.1}
  .hero-content .lead{font-size:1rem;margin-bottom:1.2rem;max-width:100%}
  .hero-cta{gap:.75rem;flex-direction:column;align-items:center;margin-top:auto}
  .hero-cta .btn{width:100%;justify-content:center;max-width:280px}

  /* Sub-page headings: always clear of the fixed header */
  .hero-sub{padding-top:calc(var(--head-h) + 2rem);padding-bottom:2.2rem}
  .hero-sub .display{font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.1;word-break:break-word}
  .hero-sub .lead{font-size:.95rem;max-width:100%}
  .hero-sub .label{word-break:break-word;white-space:normal;max-width:100%}
  .hero-sub > .wrap > div{overflow-wrap:anywhere}
  .section-tight{padding:calc(var(--head-h) + 1.5rem) 0 3rem}
  .hero-sub.section-tight{padding-top:calc(var(--head-h) + 2rem)}

  /* Sections & cards */
  .section{padding:clamp(2.5rem,7vw,3.5rem) 0}
  .car-card__content{padding:1.1rem 1.15rem 1.25rem}
  .car-card__title{font-size:1.15rem}
  .car-card__description{font-size:.88rem}
  .car-card__price{font-size:1rem}
  .car-card__btn{font-size:.82rem;padding:.65rem 1rem}

  /* Grids */
  .fleet,.why-grid,.rates-grid{gap:1rem}
  .foot-grid{gap:1.5rem;grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr}
  .bento > *{grid-column:1/-1 !important}

  /* Booking */
  .booking-steps{gap:.6rem;margin-bottom:1.6rem;padding-bottom:.8rem}
  .step-indicator .step-num{width:28px;height:28px;font-size:.72rem}
  .step-indicator span:last-child{font-size:.82rem}
  .booking-summary{padding:1rem;position:static}
  .booking-summary .price-now{font-size:1.3rem}
  .radio-option{padding:.9rem 1rem}
  .radio-option-title{font-size:.9rem}
  .radio-option-desc{font-size:.78rem}

  /* Forms & buttons */
  .form-input,.form-select,.form-textarea{padding:.75rem .9rem;font-size:.95rem}
  .btn{padding:.8rem 1.25rem;font-size:.92rem}
  .btn-lg{padding:.85rem 1.4rem;font-size:.92rem}
  .btn-pill{padding:.65rem 1.15rem;font-size:.8rem}

  /* Footer */
  .foot{padding:3rem 0 2rem;margin-top:1.5rem}
  .foot-bot{margin-top:2.5rem;padding-top:1.2rem}
}

/* ---- Tiny phones ---- */
@media(max-width:480px){
  .hero-sub .display{font-size:clamp(1.9rem,9vw,2.4rem)}
  .hero-content .display{font-size:clamp(1.9rem,9vw,2.4rem)}
  .hero .wrap{padding-bottom:clamp(2.5rem,7vh,4rem)}
  .section{padding:2.2rem 0}
  .car-card__content{padding:1rem}
  .car-card__title{font-size:1.1rem}
  .btn{padding:.78rem 1.1rem;font-size:.9rem}
  .btn-pill{padding:.6rem 1rem;font-size:.78rem}
  .foot{padding:2.5rem 0 1.5rem}
}

/* ---- Primary buttons: dark on light surfaces ----
   main.css made .btn-main white everywhere (meant for the dark hero), which made
   Sign In / View Details / Browse the fleet invisible on light pages. */
.btn-main{background:var(--ink);color:var(--surface-warm);border:2px solid var(--ink)}
.btn-main:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hero .btn-main,.hero-cta .btn-main{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-main:hover,.hero-cta .btn-main:hover{background:var(--surface-warm);border-color:var(--surface-warm);color:var(--ink)}

/* Password fields: no padlock background icon - only the Show/Hide button */
input[type="password"],.pw-wrap > input,.form-group input[type="password"]{background-image:none !important}