/* ======================================================
   EQUINE TRANSPORT BOOKING SYSTEM
   MAIN STYLESHEET

   Sections
   01 Global Foundation
   02 Layout
   03 Hero
   04 Buttons
   05 Fleet Cards
   06 Booking Layout
   07 Forms
   08 Admin
   09 Signature Pad
   10 Mobile Navigation
   11 Fleet Slideshow
   12 Reviews Modal
   13 Booking Flow
   14 Vouchers
   15 Availability Calendar
   16 Calendar Tooltip
   17 Calendar Vehicle Preview
   18 Mobile Calendar Preview
   19 Booking Form Layout
====================================================== */


/* ======================================================
   GLOBAL FOUNDATION
   Reset, browser fixes, variables
====================================================== */

/* Safari desktop only: Increase button text size */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance:none) {
    .btn, button.btn, a.btn {
      font-size: 20px !important;
    }
  }
}

/* ======================================================
   ROOT VARIABLES
====================================================== */

:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #1d2530;
  --muted: #5a6675;
  --line: #dbe1e8;
  --accent: #1f6feb;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "SF Pro Display", "SF Pro Text", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f6 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.45;
}

/* iOS fix – prevent wobble repaint */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

/* ======================================================
   PAGE LAYOUT
   Containers, header, navigation
====================================================== */

html {
  scroll-padding-top: 80px; /* adjust to your header height */
}

.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
}

.brand-logo {
  width: 54px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
}

.main-nav {
  display: flex;
  gap: 18px;
}

.main-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
}

/* ======================================================
   HERO SECTION
====================================================== */

.hero {
  padding: 40px 0 10px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: center;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.03;
}

.lead {
  color: var(--muted);
  font-size: 18px;
  max-width: 62ch;
}

/* HERO IMAGE WRAPPER */

/* HERO IMAGE WRAPPER */

.hero-image-wrap{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  clip-path: inset(0 round 28px);
}

/* HERO IMAGE */

.hero-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;

  border-radius:0; /* important */

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

.hero-image.fade-out{
  opacity:0;
}

/* hover zoom */

.hero-image-wrap:hover .hero-image{
  transform:scale(1.02);
}


/* PREMIUM HERO GLASS OVERLAY */

.hero-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 55%,
      rgba(0,0,0,0.18) 100%
    );

  pointer-events:none;
}


/* HERO ACTION BUTTONS */

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}

/* FLOATING HERO CTA */

.hero-floating-cta{
  position:absolute;
  bottom:22px;
  left:22px;

  display:flex;
  align-items:center;
  gap:8px;

  padding:12px 18px;

  background:rgba(30,30,30,0.75);
  backdrop-filter:blur(10px);

  color:white;
  text-decoration:none;
  font-weight:600;
  font-size:14px;

  border-radius:999px;

  transition:all .25s ease;
}

.hero-floating-cta span{
  font-size:16px;
  transition:transform .25s ease;
}

.hero-floating-cta:hover{
  background:rgba(20,20,20,0.9);
  transform:translateY(-2px);
}

.hero-floating-cta:hover span{
  transform:translateX(4px);
}

.hero-floating-cta{
  z-index:2;
}

/* ======================================================
   BUTTON SYSTEM
====================================================== */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 0 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn.ghost {
  background: #fff;
  color: var(--accent);
}

.section { padding: 30px 0; }
.section-head h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); }

/* ======================================================
   FLEET LISTING
   Vehicle cards
====================================================== */

.fleet-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fleet-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.fleet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.fleet-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.fleet-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1; /* THIS is key */
}

.fleet-card-book {
  margin-top: auto; /* pushes button to bottom */
  width: 100%;
}

.fleet-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.muted { color: var(--muted); }
.tiny { font-size: 13px; }

/* ======================================================
   BOOKING LAYOUT
   Main booking UI grid
====================================================== */

.booking-wrap { padding: 34px 0; }
.booking-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.card-stack {
  display: grid;
  gap: 16px;
}

/* ======================================================
   FORM ELEMENTS
   Inputs, labels, fields
====================================================== */

.form-field label {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

input, select, textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  font: inherit;
  background: #fafbfc;
}

textarea { min-height: 100px; }


.checkline {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
}



.hire-form-info {
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.hire-form-info h4 {
  margin: 0 0 8px;
  font-size: 18px;
}

.hire-form-info ul {
  margin: 10px 0;
  padding-left: 18px;
}

.hire-form-info li {
  margin: 6px 0;
}

.quote {
  background: #f0f5ff;
  border: 1px solid #cad9ff;
  border-radius: 12px;
  padding: 12px;
  color: #1b3f91;
  font-weight: 600;
}

.availability-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.availability-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 10px;
  align-items: center;
}

.availability-item h4 {
  margin: 0 0 6px;
  font-size: 16px;
}

.availability-image{
  width:120px;
  height:85px;
  object-fit:cover;
  border-radius:10px;
}

.availability-info{
  min-width:0;
}

.availability-item .choose-lorry{
  align-self:center;
}

.availability-item{
  transition: transform .15s ease, box-shadow .15s ease;
}

.availability-item:hover{
  transform: translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.success {
  margin-top: 10px;
  background: #edfdf2;
  border: 1px solid #b6efcb;
  color: #137a3d;
  padding: 10px 12px;
  border-radius: 10px;
}

.booking-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.booking-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.booking-item .muted {
  display: inline-block;
  margin-top: 2px;
}


/* ===============================
   STEP 2 — SEARCH SUMMARY
=============================== */

.availability-search-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
}

.search-chip-accent {
  background: rgba(31, 111, 235, 0.08);
  border-color: rgba(31, 111, 235, 0.18);
  color: var(--accent);
}

/* ===============================
   STEP 2 — RESULT CARD POLISH
=============================== */

.availability-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}

.availability-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.availability-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.availability-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.availability-price-note {
  font-size: 13px;
  color: var(--muted);
}

.availability-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.availability-item .choose-lorry {
  min-width: 170px;
}

.availability-empty-state {
  padding: 8px 0 2px;
}

/* ===============================
   STEP 2 — PRICE PREVIEW
=============================== */

.price-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 10px;
}

.price-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.price-confirm {
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .availability-item {
    grid-template-columns: 1fr;
  }

  .availability-actions {
    justify-content: stretch;
  }

  .availability-item .choose-lorry {
    width: 100%;
    min-width: 0;
  }

  .availability-search-summary {
    gap: 6px;
  }

  .search-chip {
    width: 100%;
    border-radius: 12px;
  }

  .availability-price {
    font-size: 22px;
  }
}

/* ======================================================
   ADMIN PANEL
====================================================== */

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

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

.admin-table-wrap {
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.empty-note {
  color: var(--muted);
  font-size: 14px;
}


.availability-status {
  margin: 18px 0;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: 14px;
}

.availability-status.ok {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.10);
}

.availability-status.error {
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
}

.terms-card h3 {
  margin: 14px 0 8px;
}

.terms-card ul {
  margin: 0 0 10px;
  padding-left: 18px;
}

.terms-card li {
  margin: 5px 0;
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding: 20px 0 34px;
  color: var(--muted);
}

/* ======================================================
   SIGNATURE PAD (DRAWABLE ON MOBILE)
====================================================== */

.signature-wrap {
  margin-top: 6px;
}

#signaturePad {
  width: 100%;
  height: 160px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.signature-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.signature-actions button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease;
}

.signature-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}


@media (max-width: 980px) {
  .hero-grid, .booking-grid, .fleet-grid, .booking-list {
    grid-template-columns: 1fr 1fr;
  }
  .hero-grid { grid-template-columns: 1fr; }
  .booking-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .main-nav { gap: 12px; font-size: 14px; }
  .brand span { font-size: 14px; }
  .fleet-grid, .booking-list, .form-grid {
    grid-template-columns: 1fr;
  }
  .availability-item {
    grid-template-columns: 1fr;
  }
  #signaturePad {
  height: 180px;
}


}

/* ======================================================
   MOBILE NAVIGATION
====================================================== */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 650px) {
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 16px 20px;
    gap: 16px;
    z-index: 19;
  }
  .main-nav.open { display: flex; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; font-size: 16px; }
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 350px) {
  .hero-image { display: none; }
}

@supports (font: -apple-system-body) {
  @media (hover: hover) and (pointer: fine) {
    .btn { font-size: 17px; }
  }
}



/* ======================================================
   FLEET CARD SLIDESHOW (APPLE STYLE)
====================================================== */

.fleet-image-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #000;
}

.fleet-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease;
}

.fleet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background .3s ease;
}

.fleet-overlay:hover {
  background: rgba(0,0,0,.32);
}


/* ======================================================
   APPLE STYLE PLAY BUTTON
====================================================== */

.apple-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .25s ease;
}

.apple-play-btn:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

.apple-play-btn svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  margin-left: 2px;
}

/* Fade entire overlay when playing */
.fleet-overlay.playing {
  background: transparent;
}





.fleet-overlay.playing .play-button {
  opacity: .45;
  transform: scale(.85);
}

/* ==========================================
   CLEAN APPLE-STYLE CHECKBOX (FIXED ALIGNMENT)
========================================== */

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.checkbox-line input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.checkbox-line input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox-line input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-line span {
  font-size: 14px;
  line-height: 1.4;
}

.header-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 16px 16px 14px;
  margin-bottom: 14px;
  position: relative;
}






/* ==========================================
   HERO CTA ROW — CLEAN VERSION
========================================== */


.hero-reviews {
  display: flex;
  align-items: center;
  height: 44px;
  flex-shrink: 0;
}

.hero-reviews iframe,
.hero-reviews > div {
  max-width: 240px;
  height: 44px !important;
}

/* ==========================================
   FORCE REVIEWS TO MATCH BUTTON EXACTLY
========================================== */


.hero-reviews iframe,
.hero-reviews > div {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* Normalize inner content */
.hero-reviews * {
  line-height: 1 !important;
}

/* Match font weight */
.hero-reviews {
  font-weight: 600 !important;
}

/* Ensure border thickness matches */
.hero-reviews iframe {
  border-radius: 12px !important;
}
/* Safari desktop only: Increase button text size */

/* ==========================================
   HERO CTA ROW (3 buttons aligned)
========================================== */

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Ensure consistent height for normal buttons */
.hero-cta-row .btn {
  min-height: 44px;
}


/* ======================================================
   GOOGLE REVIEWS MODAL
====================================================== */

.reviews-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.reviews-overlay.active{
  display: flex;
}


/* ==========================================
   MODAL STRUCTURE
========================================== */

.reviews-modal{
  width: min(980px, 94vw);
  max-height: 85vh;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 40px 90px rgba(0,0,0,.28);

  display: flex;
  flex-direction: column;
  overflow: hidden; /* Important */
  position: relative;
}

/* Header (drag + close always visible) */
.reviews-header{
  position: relative;
  padding: 10px 0 6px 0;
  flex-shrink: 0;
}

/* Drag handle */
.reviews-drag{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  margin: 0 auto;

  animation: pulseHandle 2s infinite;
}

@keyframes pulseHandle{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}

/* Close button */
.reviews-close{
  position: absolute;
  top: 4px;
  right: 10px;

  width: 48px;
  height: 48px;

  border-radius: 50%;
  border: none;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);

  font-size: 28px;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 2;
}

/* Scrollable content */
.reviews-content{
  overflow: auto;
  padding: 12px 18px 20px 18px;
}


/* ==========================================
   MOBILE LAYOUT
========================================== */

@media (max-width: 650px){

  .hero-cta-row{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .hero-cta-row > a.btn,
  .hero-cta-row > div{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hero-cta-row > div .elfsight-app-e41d37ef-1961-4257-bd95-84aca6aa69dd{
    width: 100% !important;
  }

  /* Bottom sheet behaviour */
  .reviews-overlay{
    align-items: flex-end;
    padding: 0;
  }

  .reviews-modal{
    width: 100%;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;

    animation: sheetUp .25s ease;
  }

  @keyframes sheetUp{
    from{ transform: translateY(40px); opacity: 0; }
    to{ transform: translateY(0); opacity: 1; }
  }

}

.summary-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.summary-row {
  display:flex;
  justify-content:space-between;
  margin:8px 0;
}

.summary-row.total {
  font-size:18px;
}

.summary-row.pay-now {
  color:#1f6feb;
  font-weight:600;
}

.summary-row.outstanding {
  color:#555;
}

.summary-note {
  font-size:13px;
  color:#666;
  margin-top:8px;
}

.summary-row.loading {
  opacity: 0.5;
}

/* =================================
   Summary vehicle preview
================================= */

.summary-vehicle{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.summary-vehicle-image{
  width:70px;
  height:55px;
  object-fit:cover;
  border-radius:8px;
}

.summary-vehicle-name{
  font-weight:600;
}

/* ======================================================
   BOOKING FLOW STEPS
====================================================== */

.booking-steps{
  display:flex;
  gap:14px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.step{
  font-size:14px;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}

.step.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.booking-step{
  display:none;
}

.booking-step.active{
  display:block;
  animation:fadeStep .25s ease;
}

@keyframes fadeStep{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

.checkout-breakdown{
  background:#f0f5ff;
  border:1px solid #cad9ff;
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
  font-weight:600;
}

.requirements-box{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:18px;
}

.requirements-box ul{
  margin:8px 0 0;
  padding-left:18px;
}

.confirm-btn{
  font-size:18px;
  height:52px;
}







/* ======================================================
   Booking form + voucher (added)
====================================================== */

.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

.availability-form .form-grid,
.booking-form .form-grid{
  display:grid;
  gap:14px;
}

@media (min-width: 720px){

  /* Availability form stays multi-column */
  .availability-form .form-grid{
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items:end;
  }

  /* Booking form stays single column */
  .booking-form .form-grid{
    grid-template-columns: 1fr;
  }

}

.form-field label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin:0 0 6px;
  color: var(--text, #0f172a);
}



.form-field.full{ grid-column: 1 / -1; }

.form-field-actions{ display:flex; align-items:end; }
.form-field-actions .btn{ width:100%; }


/* ======================================================
   VOUCHERS & EXTRAS
====================================================== */

.voucher-card {
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
}

.voucher-left{ flex:1; }
.voucher-left label {
  display:block;
  font-size:14px;
  font-weight:600;
  margin:0 0 6px;
}
.voucher-left input {
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.12);
}

.voucher-right {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.btn.btn-ghost {
  background: transparent;
  border: 1px solid rgba(31,111,235,0.35);
  color: var(--accent, #1f6feb);
}

.voucher-message {
  font-size: 13px;
  line-height: 1.25;
}
.voucher-message.ok{ color: #059669; }
.voucher-message.error{ color: #dc2626; }
.voucher-message.muted{ color: rgba(15,23,42,0.65); }

/* Safari date input fix */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}


/* ======================================================
   AVAILABILITY CALENDAR
====================================================== */

.cal-wrap {
  margin:16px 0 20px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  width:100%;
  overflow:hidden;
}

/* ------------------------------------------------------
   Header
------------------------------------------------------ */

.cal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.cal-title {
  font-weight:600;
  font-size:16px;
}

.cal-nav {
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fafbfc;
  cursor:pointer;
  transition:.2s;
}

.cal-nav:hover {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* ------------------------------------------------------
   Weekdays
------------------------------------------------------ */

.cal-weekdays {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.cal-weekdays div {
  text-align:center;
  padding:6px 0;
}

/* ------------------------------------------------------
   Calendar grid
------------------------------------------------------ */

.cal-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
}

/* ------------------------------------------------------
   Day cell
------------------------------------------------------ */

.cal-day {
  aspect-ratio:1/1;
  border-radius:10px;
  border:2px solid transparent;
  background:#fafbfc;
  font-size:13px;
  font-weight:500;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition:.15s;

  position:relative;   /* important for labels */
  overflow:hidden;
  min-height:42px;
  padding-bottom:14px;
  z-index:1;
}


/* ------------------------------------------------------
   Availability states
------------------------------------------------------ */

.cal-day.cal-available{
  border-color:#22c55e;
  background:rgba(34,197,94,.06);
}


.cal-day.cal-unavailable{
  border-color:#ef4444;
  background:rgba(239,68,68,.06);
  opacity:.85;
}

.cal-day.cal-no-start{
  opacity:.45;
  cursor:not-allowed;
}

/* past days */

.cal-past{
  opacity:.35;
  pointer-events:none;
  background:#f5f7fa;
  color:#9aa3af;
}

/* ------------------------------------------------------
   Today marker
------------------------------------------------------ */

.cal-day.cal-today{
  border:2px solid var(--accent);
}

/* ------------------------------------------------------
   Weekend shading
------------------------------------------------------ */

.cal-day.cal-weekend{
  background:rgba(0,0,0,.06);
}

.cal-day.cal-weekend.cal-available{
  background:rgba(34,197,94,.10);
}

.cal-day.cal-weekend.cal-unavailable{
  background:rgba(239,68,68,.12);
}

/* ------------------------------------------------------
   Preview highlight
------------------------------------------------------ */

.cal-preview{
  background:rgba(31,111,235,.12);
  border-color:#1f6feb;
}

/* ------------------------------------------------------
   Vehicle booking bars
------------------------------------------------------ */

.cal-line {
  position:relative;
  height:3px;
  border-radius:2px;
  background:#cde8cd;
  overflow:hidden;
  opacity:.9;
}

/* full day */

.cal-line.booked-full{
  background:#ef4444;
}

/* morning */

.cal-line.booked-am::before{
  content:"";
  position:absolute;
  left:0;
  width:50%;
  top:0;
  bottom:0;
  background:#ef4444;
}

/* afternoon */

.cal-line.booked-pm::after{
  content:"";
  position:absolute;
  right:0;
  width:50%;
  top:0;
  bottom:0;
  background:#ef4444;
}

/* both halves */

.cal-line.booked-am.booked-pm{
  background:#ef4444;
}

/* mobile */

@media(max-width:768px){

  .cal-line { height:1.5px }
  .cal-lines { gap:1px }

}

/* ------------------------------------------------------
   Legend
------------------------------------------------------ */

.cal-legend{
  display:flex;
  gap:12px;
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}

.cal-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.cal-dot-available{background:#22c55e}
.cal-dot-unavailable{background:#ef4444}

/* ======================================================
   Vehicle preview popup
====================================================== */

.vehicle-preview{
  position:absolute;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  font-size:13px;
  z-index:20;
  pointer-events:none;
  transform:translate(-50%,-110%);
  opacity:0;
  transition:.15s;
}

.vehicle-preview:not(.hidden){opacity:1}

.preview-item{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

.preview-img{
  width:60px;
  height:45px;
  object-fit:cover;
  border-radius:8px;
}

.preview-text{
  flex:1;
}

.preview-status{
  margin-bottom:6px;
}

.preview-select {
  cursor: pointer;
}

.preview-select:active {
  transform: scale(0.98);
}

.preview-status-good{color:#22c55e}
.preview-status-low{color:#f59e0b}
.preview-status-none{color:#ef4444}

/* ======================================================
   Mobile preview panel
====================================================== */

.mobile-preview{
  margin-bottom:14px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-size:14px;
  line-height:1.45;
}

.mobile-preview strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.mobile-preview.hidden{
  display:none;
}



html {
  scroll-behavior: smooth;
}


.reset-btn{
  opacity:0.8;
}


/* ===============================
   Per-vehicle lines
=============================== */

.cal-lines {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  z-index:2;
}



/* MORNING */

.cal-line.booked-am::before {
  content: "";
  position: absolute;
  left: 0;
  width: 50%;
  top: 0;
  bottom: 0;
  background: #ef4444;
  border-radius: 2px 0 0 2px;
}

/* AFTERNOON */

.cal-line.booked-pm::after {
  content: "";
  position: absolute;
  right: 0;
  width: 50%;
  top: 0;
  bottom: 0;
  background: #ef4444;
  border-radius: 0 2px 2px 0;
}

.cal-day::before {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {

  .cal-line {
    height: 1.5px;
  }

  .cal-lines {
    gap: 1px;
  }

}



/* =================================
   Keep day number visible when selected
================================= */

.cal-day.cal-selected.cal-booked {

  color: var(--text);           /* keep number dark */
  background: inherit;          /* keep booking background */
  
}

/* Optional: make selected outline clearer */

.cal-day.cal-selected.cal-booked {
  box-shadow: 0 0 0 2px var(--accent) inset;
}

.availability-item.preselected {
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(31,111,235,0.12);
}

.calendar-vehicle-label {
  max-width: 1100px;
  margin: 0 auto 12px auto;
  padding: 10px 14px;
  border-radius: 10px;

  background: #eef4ff;
  border: 1px solid #cfe0ff;

  font-size: 14px;
  font-weight: 500;
  color: #1f3b8b;
}

.calendar-vehicle-label strong {
  font-weight: 600;
}

.calendar-vehicle-label.hidden {
  display: none;
}

.duration-highlight{
  outline:3px solid #1f6feb;
  outline-offset:4px;
  animation:highlightPulse 1.5s ease;
  transition:outline .2s ease;
}

@keyframes highlightPulse {

  0%   { box-shadow: 0 0 0 rgba(31,111,235,0); }
  50%  { box-shadow: 0 0 12px rgba(31,111,235,0.4); }
  100% { box-shadow: 0 0 0 rgba(31,111,235,0); }

}

.field-error{
  font-size:13px;
  color:#c62828;
  margin-top:6px;
}
/* =========================
   BOOKING FORM LAYOUT
   Clean single column
========================= */

#booking-form{
  max-width:520px;
  margin:30px auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* form field */

.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* labels */

.form-field label{
  font-size:15px;
  font-weight:500;
  color:#1d2530;
}

/* inputs */

.form-field input,
.form-field select{
  width:100%;
  height:54px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid #dbe1e8;
  font-size:16px;
  font-family:inherit;
  background:#ffffff;
  box-sizing:border-box;
  transition:border .15s ease, box-shadow .15s ease;
}

/* focus */

.form-field input:focus,
.form-field select:focus{
  outline:none;
  border-color:#1f6feb;
  box-shadow:0 0 0 3px rgba(31,111,235,0.12);
}

/* readonly */

input[readonly]{
  background:#f5f7fa;
}

/* date icon */

.form-field input[type="date"]{
  padding-right:40px;
}


/* =========================
   EXTRAS CARD ROWS
========================= */

.extras-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:18px 0;
}

/* each option row */

.check{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#f8fafc;

  cursor:pointer;
}

/* square checkbox */

.check input[type="checkbox"]{

  appearance:none;
  -webkit-appearance:none;

  width:22px;
  height:22px;
  min-height:22px;      /* override global rule */
  padding:0;            /* override global rule */

  border:2px solid var(--line);
  border-radius:0;

  background:#fff;

  cursor:pointer;
  position:relative;
  flex-shrink:0;
}

/* checked state */

.check input[type="checkbox"]:checked{
  background:var(--accent);
  border-color:var(--accent);
}

/* checkmark */

.check input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;

  left:50%;
  top:50%;

  width:6px;
  height:12px;

  border:solid #fff;
  border-width:0 2px 2px 0;

  transform:translate(-50%,-60%) rotate(45deg);
}

/* label text */

.check span{
  font-size:15px;
  color:var(--text);
}

/* dartford row */

.dartford-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#f8fafc;
}

/* remove inner card inside dartford */

.dartford-row .check{
  padding:0;
  border:none;
  background:transparent;
}

/* number input */

.dartford-count input{
  width:80px;
  height:42px;
  text-align:center;

  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}

.dartford-count input:disabled{
  opacity:.45;
}


/* =========================
   PAYMENT BUTTON
========================= */

.form-actions{
  margin-top:18px;
}

.form-actions .btn{
  width:100%;
  height:54px;
  font-size:18px;
}

/* =========================
   ACTION BUTTON ROW
========================= */

.details-actions{
  display:flex;
  gap:14px;
  margin-bottom:30px;
  flex-wrap:wrap;
}

.details-actions .btn{
  flex:1;
  min-width:140px;
  text-align:center;
}

/* =========================
   BOOKING SECTION SPACING
========================= */

#booking h2{
  margin-bottom:30px;
}

/* =========================
   DESKTOP FORM GRID
========================= */


/* fields that should span full width */

.form-full{
  grid-column:1 / -1;
}

/* HERO OVERLAY */

/* HERO OVERLAY */

.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none; /* overlay itself ignores clicks */

  transition:opacity .4s ease;
  z-index:4;
}

.hero-overlay .apple-play-btn{
  pointer-events:auto; /* BUT the button can be clicked */
}

.hero-overlay.playing{
  opacity:0;
  pointer-events:none;
}

.apple-play-btn{
  position:relative;
  z-index:5;
}

.customer-badge {
  margin-top: 6px;
  font-size: 14px;
  color: #16a34a;
  font-weight: 500;
}

.customer-badge.hidden {
  display: none;
}

/* ===================================
BOOKING SUMMARY CARD
=================================== */

.booking-summary-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  margin-top:24px;
  margin-bottom:18px;
  max-width:520px;
}

.summary-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:14px;
}

.summary-lines{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color:var(--text);
}

.summary-row.muted{
  color:var(--muted);
}

.summary-divider{
  height:1px;
  background:var(--line);
  margin:12px 0;
}

.summary-total{
  display:flex;
  justify-content:space-between;
  font-size:17px;
  font-weight:600;
}

.summary-due{
  display:flex;
  justify-content:space-between;
  font-size:18px;
  font-weight:700;
  color:var(--accent);
}

.summary-remaining{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--muted);
}

#step-4 .btn.ghost {
  margin-top: 6px;
  margin-bottom: 22px;
}

/* =================================
   FORCE SAME STYLE FOR SELECTED DAY
================================= */

.cal-day.cal-selected {
  border-color: var(--accent) !important;
  background: rgba(37,99,235,0.10) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
  color: var(--text) !important;
  font-weight:600;
}

.cal-selected {
  outline:2px solid var(--accent);
  outline-offset:-2px;
  background:rgba(31,111,235,0.08);
  transition:all .15s ease;
}

.next-available {
  margin-top:12px;
}

.next-available .btn {
  margin-top:6px;
}

/* =================================
   Urgency banner
================================ */

.urgency-banner{
  background:#fff4e5;
  border:1px solid #ffd7a3;
  color:#a15c00;
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  margin-bottom:14px;
}

/* calendar tile must be relative */
.cal-day{
  position:relative;
}

/* ===============================
   LAST SLOT BADGE
=============================== */

/* "1 left" label inside calendar */
.cal-last-label {
  position: absolute;
  top: 6px;
  right: 6px;

  font-size: 12px;
  font-weight: 600;

  padding: 4px 6px;
  border-radius: 10px;

  background: #facc157c; /* amber */
  color: #111;

  z-index: 5;
}


/* ===============================
   LAST SLOT TILE (DESKTOP)
=============================== */

.cal-last {
  border-color: #f59e0b;
  background: rgba(245, 159, 11, 0);
}

/* ===============================
   MOBILE VERSION
=============================== */

@media (max-width: 768px) {

  .cal-last-label {

    top: 50%;
    left: 50%;
    right: auto;

    color: #FFFF00;

    transform: translate(-50%, -50%);

    /* perfect centering */
    display: flex;
    flex-direction: column;        /* 👈 KEY for 2 lines */
    align-items: center;
    justify-content: center;
    text-align: center;

    /* sizing */
    min-width: 52px;              /* slightly wider for 2 lines */
    min-height: 36px;             /* 👈 important for vertical balance */

    padding: 6px 10px;

    /* typography */
    line-height: 1.05;            /* 👈 better for stacked text */
    font-size: 13px;
    font-weight: 600;

    /* your colours untouched */
    background: rgba(21, 59, 250, 0.562);
    backdrop-filter: blur(6px);

    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  }

}

/* ===============================
   MOBILE — let badge do the work
=============================== */

@media (max-width: 768px) {

  .cal-last {
    border-color: #f59e0b;
    background: transparent; /* cleaner than rgba(...,0) */
  }

}

/* ===============================
   PRESELECTED WARNING
=============================== */

.availability-warning {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #b91c1c;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.preselected-warning {
  margin-top: 12px;
}

.preselected-warning .availability-warning {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #b91c1c;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.availability-warning {
  animation: fadeSlideIn 0.25s ease;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   Availability Loader (Apple style)
=============================== */

.availability-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
  gap: 12px;
  color: var(--muted);
  animation: fadeIn 0.2s ease;
}

/* dots */
.loader-dots {
  display: flex;
  gap: 6px;
}

.loader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: loaderPulse 1.4s infinite ease-in-out;
}

.loader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loaderPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* text */
.loader-text {
  font-size: 14px;
  letter-spacing: 0.2px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ===============================
   Availability Warning — Polished
=============================== */

.availability-warning {
  padding: 24px 28px;
  border-radius: 16px;
  line-height: 1.5;
}

/* spacing between text + buttons */
.availability-warning .warning-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* buttons */
.warning-actions .btn {
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 12px;
}

/* make primary feel stronger */
.warning-actions .btn.primary {
  min-width: 180px;
}

/* ghost button balance */
.warning-actions .btn.ghost {
  min-width: 160px;
}

/* ===============================
   MOBILE IMPROVEMENT
=============================== */

@media (max-width: 640px) {

  .availability-warning {
    padding: 20px;
  }

  .warning-actions {
    flex-direction: column;
  }

  .warning-actions .btn {
    width: 100%;
  }

}

.availability-warning strong {
  font-weight: 600;
}

.confirmation-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  margin: 40px auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.confirmation-dates {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.confirmation-summary div {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===============================
   Summary Loading State
=============================== */

#checkout-summary.loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Optional shimmer (premium feel) */

#checkout-summary.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  animation: shimmer 1.2s infinite;
  pointer-events: none;
  border-radius: 16px;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.confirmation-card.success {
  text-align: center;
}

.confirmation-ref {
 margin-bottom: 12px;
 font-size: 13px;
 color:var(--muted);
}

.confirmation-section {
  margin: 14px 0;
}

.confirmation-section.highlight {
  margin-top: 16px;
  font-size: 18px;
  color: #16a34a;
}

.confirmation-footer {
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 16px;
}


.confirmation-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.confirmation-section.grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.label {
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}

.value {
  font-size: 15px;
}

.value.strong {
  font-weight: 600;
}

.price-box {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}

.price-row.total {
  font-weight: 600;
  font-size: 17px;
}

.price-row.paid {
  color: #16a34a;
}

.price-row.outstanding {
  color: #dc2626;
  font-weight: 600;
}

.confirmation-status {
  text-align: center;
  margin: 16px 0;
  font-weight: 600;
  color: #16a34a;
}
.confirmation-card.pro {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  overflow: hidden;
}



/* CONTENT ABOVE BACKGROUND */
.confirmation-card.pro > * {
  position: relative;
  z-index: 1;
}


/* ===============================
   CONFIRMATION — APPLE STYLE
=============================== */

.confirmation-card.apple {
  max-width: 560px;
  margin: 20px auto;
  padding: 22px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.confirmation-header h2 {
  margin:0;
  font-size:22px;
}

.confirmation-block {
  margin-bottom:16px;
}

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

.payment-card {
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid var(--line);
}

.payment-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:14px;
}

.payment-row.total {
  font-weight:600;
  font-size:16px;
}

.payment-row.paid {
  color:#137a3d;
}

.payment-row.remaining {
  color:#1f6feb;
  font-weight:600;
}

/* TRUST */

.confirmation-trust {
  margin-top:18px;
  display:grid;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}

.trust-item {
  display:flex;
  align-items:center;
  gap:6px;
}

/* ACTION */

.confirmation-actions {
  margin-top:20px;
}

.confirmation-card.apple::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/logo.png") center center / 180px no-repeat;
  opacity: 0.04; /* subtle watermark */
  pointer-events: none;
}

/* ===============================
   BOOKING 2 COLUMN LAYOUT
=============================== */

.booking-two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

.booking-main {
  min-width: 0;
}

.booking-summary {
  position: relative;
}

/* ===============================
   STICKY SUMMARY
=============================== */

.summary-sticky-wrap {
  position: sticky;
  top: 100px; /* below header */
}

/* ===============================
   MOBILE FIX
=============================== */

@media (max-width: 900px) {
  .booking-two-col {
    grid-template-columns: 1fr;
  }

  .summary-sticky-wrap {
    position: static;
  }
}

#app-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  padding: 14px 22px;
  border-radius: 12px;

  font-size: 15px;
  font-weight: 500;

  z-index: 9999;

  opacity: 0;
  pointer-events: none;

  transition: 
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* visible state */
#app-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.admin-notes {
  margin-top: 6px;
  padding: 8px;
  background: #fff8dc;
  border-left: 3px solid #facc15;
  font-size: 13px;
}

.summary-row.notes {
  font-size: 13px;
  color: #444;
  border-top: 1px dashed #ddd;
  padding-top: 6px;
}

.notes-important {
  color: #b91c1c;
  font-weight: 600;
}

/* ===============================
   DEPOSIT PAGE
=============================== */

.deposit-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deposit-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  text-align: center;
}

.deposit-logo {
  width: 120px;
  margin-bottom: 10px;
}

.deposit-card h2 {
  margin-bottom: 8px;
}

#booking-info {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.deposit-card label {
  display: block;
  text-align: left;
  margin: 12px 0 6px;
  font-weight: 600;
}

.deposit-card input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.stripe-card {
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

#submit-btn {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #1f6feb;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.deposit-note {
  margin-top: 16px;
  font-size: 13px;
  color: #666;
}