/* =========================================================================
   BOOK NOW — dedicated styling. Loaded ONLY on book.html.
   Scoped under body.page-book so nothing here can ever affect any other
   page. Mirrors the Rent Now page's "always-dark, canvas-backed" visual
   language, but with its own deeper/thicker galaxy (see js/book.js) and
   its own vehicle-detail + booking layout, per the brief that this must
   feel like a distinct, more exclusive space rather than a copy.
   ========================================================================= */
body.page-book{
  background: #050506;
}

/* Several elements below (.book-gallery-placeholder, .btn via style.css,
   .book-lightbox-placeholder) set an explicit `display` unconditionally,
   which ties with and then beats the browser's own [hidden]{display:none}
   UA rule on specificity + source order. Toggling the `hidden` attribute
   on any element on this page must always actually hide it. */
body.page-book [hidden]{
  display: none !important;
}

/* ---------------------------------------------------------------------
   THE DEEPER GALAXY — a single <canvas> (see js/book.js → initDeepGalaxy),
   built as its own multi-layer system distinct from Rent Now's wave:
   a far starfield, a middle layer of soft golden "cloud" blobs + thick
   light trails, and a nearer layer of brighter drifting particles — the
   layering itself is what reads as "thicker/deeper" rather than raw
   particle count, which is kept modest for performance.
   --------------------------------------------------------------------- */
body.page-book .bookverse{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
body.page-book .bookverse-wave{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease-out;
}
body.page-book .bookverse-wave.is-live{ opacity: 1; }
body.page-book .book-page,
body.page-book .site-footer{
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   PAGE LAYOUT
   --------------------------------------------------------------------- */
body.page-book .book-page{
  padding-top: calc(var(--nav-h) + 2.4rem);
  padding-bottom: 6rem;
}
.book-back-row{ margin-bottom: 2.2rem; }
.back-link{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .3s;
}
.back-link:hover{ color: var(--gold); }

.book-layout{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 960px){
  .book-layout{ grid-template-columns: 1fr; gap: 2.6rem; }
}

/* ---------------------------------------------------------------------
   GALLERY
   --------------------------------------------------------------------- */
.book-gallery{ position: relative; }
.book-gallery-main{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated-2);
  perspective: 1200px;
  cursor: pointer;
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.75), 0 0 0 1px rgba(230,199,102,.1);
}
/* Fills the empty space that object-fit:contain leaves around a photo
   whose proportions don't match this box — a soft, blurred, darkened
   blow-up of the very same photo (never a different image), so the
   frame always reads as full and intentional rather than letterboxed
   on flat black. Sits behind the real photo; z-index below it. */
.book-gallery-blur{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(30px) brightness(.68) saturate(1.2);
  transform: scale(1.22);
}
.book-gallery-main img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  --tiltx: 0deg;
  --tilty: 0deg;
  --gscale: 1;
  transform: rotateX(var(--tiltx)) rotateY(var(--tilty)) scale(var(--gscale));
  transition: transform .5s cubic-bezier(.22,.8,.32,1);
  will-change: transform;
}
.book-gallery-main:hover img{ --gscale: 1.035; }
.book-gallery-placeholder{
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  color: var(--text-faint);
  background: radial-gradient(60% 60% at 50% 42%, rgba(201,169,98,.09), transparent 72%);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.book-gallery-placeholder svg{ width: 46px; height: 46px; stroke: var(--gold); opacity: .55; }
.book-gallery-hint{
  text-align: center;
  margin-top: 1rem;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.book-gallery-thumbs{
  display: flex;
  gap: .7rem;
  margin-top: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.book-thumb{
  width: 68px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s, border-color .3s;
  background: var(--bg-elevated-2);
  padding: 0;
  position: relative;
}
.book-thumb:hover{ opacity: .85; }
.book-thumb.is-active{ opacity: 1; border-color: var(--gold); }
.book-thumb img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.book-thumb-placeholder{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.book-thumb-placeholder svg{ width: 18px; height: 18px; stroke: var(--gold); opacity: .5; }

/* ---------------------------------------------------------------------
   LIGHTBOX
   --------------------------------------------------------------------- */
.book-lightbox{
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(3,3,4,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.book-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.book-lightbox-inner{
  position: relative;
  max-width: min(920px, 88vw);
  width: 100%;
}
/* Same blurred-blow-up fill as the main gallery card, sized to the
   inner wrapper (which can be wider than a portrait photo's rendered
   size) so the fullscreen view never shows flat empty gutters either. */
.book-lightbox-blur{
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(34px) brightness(.68) saturate(1.2);
  transform: scale(1.22);
}
.book-lightbox img{
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  margin: 0 auto;
  background: var(--bg-elevated-2);
}
.book-lightbox-placeholder{
  aspect-ratio: 4/3;
  border-radius: 6px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  color: var(--text-faint);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.book-lightbox-placeholder svg{ width: 48px; height: 48px; stroke: var(--gold); opacity: .5; }
.book-lightbox-close{
  position: absolute;
  top: -46px; right: 0;
  z-index: 2; /* must stay above .book-lightbox-blur regardless of DOM order */
  background: none; border: none;
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: .2em .3em;
}
.book-lightbox-close:hover{ color: var(--gold); }
.book-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* same fix as .book-lightbox-close — must stay above the blur */
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(10,9,6,.55);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.book-lightbox-nav:hover{ border-color: var(--gold); color: var(--gold); }
.book-lightbox-prev{ left: -58px; }
.book-lightbox-next{ right: -58px; }
@media (max-width: 760px){
  .book-lightbox-prev{ left: 8px; }
  .book-lightbox-next{ right: 8px; }
}

/* ---------------------------------------------------------------------
   VEHICLE INFO
   --------------------------------------------------------------------- */
.book-info h1{
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.2;
  margin-top: .5rem;
}
.book-price{
  margin-top: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.book-price .amount b{
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--gold);
  font-weight: 700;
}
.book-price .unit{
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.book-specs{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.book-specs span{
  font-size: .82rem;
  color: var(--text-muted);
}
.book-desc{
  margin-top: 1.2rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: .95rem;
}
.book-features{
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.book-features li{
  position: relative;
  padding-left: 1.2em;
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.book-features li::before{
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------------------------------------------------------------------
   DATE SELECTION
   --------------------------------------------------------------------- */
.book-dates{
  margin-top: 2.6rem;
  padding-top: 2.1rem;
  border-top: 1px solid var(--border);
}
.book-dates h2{
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
}
.book-date-row{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.book-date-row label{
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.book-date-row input[type="date"]{
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: .75em .9em;
  border-radius: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  color-scheme: dark;
}
.book-date-row input[type="date"]:focus{
  outline: none;
  border-color: var(--gold);
}
.book-date-hint{
  margin-top: .9rem;
  font-size: .78rem;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------------
   BOOKING SUMMARY
   --------------------------------------------------------------------- */
.book-summary{
  margin-top: 2rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-elevated);
}
.book-summary h2{
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.book-summary-row{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  padding: .38rem 0;
}
.book-summary-row span:last-child{ color: var(--text); text-align: right; }
.book-summary-total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
}
.book-summary-total span:last-child{
  color: var(--gold);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   CONFIRM + CONFIRMATION STATE
   --------------------------------------------------------------------- */
.book-confirm-btn{
  margin-top: 1.8rem;
  width: 100%;
}
.book-confirm-btn:disabled{
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(.25);
}
.book-confirm-btn:disabled:hover{
  transform: none;
  box-shadow: none;
  background-position: 0 50%;
}

/* ---------------------------------------------------------------------
   BOOKING MODAL — "Confirm Booking" flow: customer info + collection
   method (deliver / pickup) → summary → static success state. Same
   overlay language as .book-lightbox (fixed, dark backdrop, opacity
   transition) so it feels like part of the same page, not a bolted-on
   widget. No WhatsApp automation here yet — the success step is a
   plain confirmation message, wired up separately later.
   --------------------------------------------------------------------- */
.booking-modal{
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(3,3,4,.94);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.2rem, 4vh, 3rem) 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  overflow-y: auto;
}
.booking-modal.is-open{ opacity: 1; pointer-events: auto; }
.booking-modal-inner{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 2.4rem clamp(1.4rem, 4vw, 2.6rem) 2.2rem;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(230,199,102,.08);
}
.booking-modal-close{
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: .2em .3em;
  transition: color .3s;
}
.booking-modal-close:hover{ color: var(--gold); }

.booking-step h2{
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  margin-top: .5rem;
}
.booking-step-sub{
  margin-top: .5rem;
  color: var(--text-muted);
  font-size: .88rem;
}

.booking-field-group{
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.booking-field-group h3{
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}
.booking-subheading{ margin-top: .6rem; }

.booking-field-row{
  display: flex;
  gap: 1rem;
}
.booking-field-row > label{ flex: 1; min-width: 0; }

.booking-step label{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0;
}
.booking-step label em{
  color: var(--text-faint);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.booking-step input[type="text"],
.booking-step input[type="tel"],
.booking-step select,
.booking-step textarea{
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: .8em .9em;
  border-radius: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: .92rem;
  color-scheme: dark;
  width: 100%;
}
.booking-step select{ cursor: pointer; }
.booking-step select:disabled{ opacity: .5; cursor: not-allowed; }
.booking-step textarea{ resize: vertical; min-height: 4.2em; font-family: inherit; }
.booking-step input:focus,
.booking-step select:focus,
.booking-step textarea:focus{
  outline: none;
  border-color: var(--gold);
}

.booking-method-options{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.booking-method-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.4rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .3s, color .3s, background .3s;
}
.booking-method-icon{ font-size: 1.6rem; }
.booking-method-btn:hover{ border-color: var(--gold); color: var(--text); }
.booking-method-btn.is-active{
  border-color: var(--gold);
  color: var(--text);
  background: linear-gradient(160deg, rgba(201,169,98,.14), transparent 70%);
  box-shadow: 0 0 0 1px var(--gold) inset;
}

.booking-pickup-text{
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.6;
  margin: 0;
}
.booking-pickup-text svg{
  flex-shrink: 0;
  width: 20px; height: 20px;
  stroke: var(--gold);
  margin-top: .1em;
}

.booking-form-error{
  margin-top: 1.4rem;
  padding: .8em 1em;
  border: 1px solid #a8453f;
  border-radius: 4px;
  color: #e8a49f;
  font-size: .8rem;
  background: rgba(168,69,63,.08);
}

.booking-step-actions{ margin-top: 2.2rem; }
.booking-step-actions .btn{ width: 100%; }
.booking-step-actions-split{ display: flex; gap: 1rem; }
.booking-step-actions-split .btn,
.booking-step-actions-split .btn-ghost{ flex: 1; margin: 0; }

/* Summary */
.booking-summary-card{
  margin-top: 1.6rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
}
.booking-summary-media{
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--bg-elevated-2);
}
.booking-summary-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.booking-summary-card h3{
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin-bottom: .9rem;
}
.booking-summary-row{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  padding: .4rem 0;
}
.booking-summary-row span:first-child{ flex-shrink: 0; }
.booking-summary-row span:last-child{
  color: var(--text);
  text-align: right;
  max-width: 60%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.booking-summary-divider{
  margin: .6rem 0;
  border-top: 1px solid var(--border);
}

/* Success */
.booking-step-success{ text-align: center; }
.booking-step-success svg{
  width: 42px; height: 42px;
  stroke: var(--gold);
  margin: .5rem 0 1rem;
}
.booking-step-success h3{
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
}
.booking-step-success p{
  margin: .7rem auto 0;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 42ch;
}

.booking-share-image{ padding-top: 1.2rem; border-top: 1px solid var(--border); }
.booking-share-hint{
  margin: 0 auto .8rem;
  font-size: .78rem;
  color: var(--text-faint);
  line-height: 1.6;
  max-width: 38ch;
}

/* ---------------------------------------------------------------------
   MOBILE / LITE
   --------------------------------------------------------------------- */
@media (max-width: 640px){
  .book-lightbox-inner{ max-width: 94vw; }
  .book-date-row{ flex-direction: column; }
  .booking-modal-inner{ padding: 2rem 1.2rem 1.8rem; }
  .booking-field-row{ flex-direction: column; }
  .booking-method-options{ grid-template-columns: 1fr; }
  .booking-step-actions-split{ flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce){
  body.page-book .bookverse-wave{ transition: none; opacity: 1; }
  .book-gallery-main img{ transition: none; }
}