/* P5 Chauffeurs — consent banner + mobile booking widget fixes
   Upload to: public_html/assets/css/p5-extras.css
   Loaded after main.css / components.css so these rules win. */

/* ---------------- Cookie banner ---------------- */
.p5cc{
  position:fixed;z-index:120;left:50%;bottom:16px;
  width:min(560px,calc(100% - 24px));
  display:flex;align-items:center;gap:14px;
  padding:12px 12px 12px 18px;
  background:rgba(20,18,15,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(201,168,106,.22);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  color:#ece6d9;font:inherit;font-size:13.5px;line-height:1.45;
  opacity:0;transform:translate(-50%,12px);
  transition:opacity .22s ease,transform .22s ease;
}
.p5cc.is-open{opacity:1;transform:translate(-50%,0)}
.p5cc__txt{margin:0;flex:1}
.p5cc__txt a{color:#c9a86a;text-decoration:underline;text-underline-offset:2px}
.p5cc__btns{display:flex;gap:8px;flex-shrink:0}
.p5cc__btn{
  appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  min-height:40px;padding:0 16px;border-radius:999px;
  background:transparent;color:#ece6d9;border:1px solid rgba(236,230,217,.28);
}
.p5cc__btn--on{background:#c9a86a;border-color:#c9a86a;color:#14120f}
.p5cc__btn:focus-visible{outline:2px solid #c9a86a;outline-offset:2px}

.p5cc__short{display:none}
/* Phones: one compact row (short text, two equal buttons) instead of a tall sheet */
@media (max-width:640px){
  .p5cc{
    left:0;bottom:0;width:100%;transform:translateY(100%);
    flex-direction:row;align-items:center;gap:10px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) 14px;
    border-radius:14px 14px 0 0;border-width:1px 0 0;font-size:13px;line-height:1.35;
  }
  .p5cc.is-open{transform:translateY(0)}
  .p5cc__long{display:none}
  .p5cc__short{display:inline}
  .p5cc__txt{min-width:0}
  .p5cc__btns{gap:6px}
  .p5cc__btn,.p5cc__btn--on{flex:none;min-height:40px;padding:0 13px;font-size:12px;letter-spacing:.04em;
    background:transparent;color:#ece6d9;border:1px solid rgba(201,168,106,.55)}
  /* Steps aside while someone is typing in a form; it comes back when the keyboard closes */
  .kb-open .p5cc.is-open{transform:translateY(100%)}
  html.kb-open{--p5-cc-h:0px !important}
}
@media (prefers-reduced-motion:reduce){.p5cc{transition:none}}

/* ---------------- WhatsApp button ---------------- */
.wa-fab{transition:opacity .2s ease,transform .2s ease,bottom .2s ease}
.wa-fab.is-tucked{opacity:0;transform:scale(.8);pointer-events:none}
@media (max-width:640px){
  .wa-fab{
    width:44px!important;height:44px!important;
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom) + var(--p5-cc-h,0px))!important;
  }
  .wa-fab svg{width:20px;height:20px}
}

/* ---------------- Booking widget on phones ---------------- */
@media (max-width:640px){
  /* Home hero card */
  .hero__card{padding:14px 12px 12px!important}
  .hero__cardTitle{font-size:1.15rem!important;margin-bottom:8px!important;line-height:1.2}

  .bw{gap:10px!important}

  /* Vehicles: all six visible at once in a compact 3x2 grid - no scrolling or swiping to reach one */
  .bw__vehicles{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;
    overflow:visible!important;margin:0!important;padding:0!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .bw__veh{
    flex:none!important;width:auto!important;min-width:0!important;
    min-height:44px!important;height:auto!important;
    padding:6px 4px!important;border-radius:10px!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:1px!important;
    white-space:nowrap;line-height:1.15!important;text-align:center;
  }
  .bw__veh > *{margin:0!important}
  .bw__vehName{font-size:12.5px!important}
  .bw__vehPax{font-size:10px!important;opacity:.7;margin-left:0!important}
  .bw__compareLink{margin-top:-4px!important;font-size:11.5px!important}

  /* Fields + buttons */
  .bw__field{gap:2px!important}
  .bw__addStop{margin-top:-4px!important}
  .bw__submit{min-height:48px!important;padding-top:0!important;padding-bottom:0!important}
  .bw__steps{margin-bottom:0!important}
  .bw__or{margin-top:4px!important}
  .bw__gift{margin-top:6px!important}

  /* /book: put the form first on phones, intro text after it */
  .split:has(.bw){display:flex!important;flex-direction:column}
  .split:has(.bw) > :has(.bw){order:-1}
}