/* =====================================================================
   BOOK NOW — Step-wise Wizard styles
   ===================================================================== */
.booking-wrap{background:var(--cream);padding:60px 0 90px}
.booking-grid{display:grid;grid-template-columns:1fr 350px;gap:34px;align-items:start}
.booking-grid > div{min-width:0}

/* ---- Progress ---- */
.wizard{background:var(--ivory);border:1px solid rgba(201,162,75,.2);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}
.progress{display:flex;background:var(--grad-navy);padding:22px 26px;gap:6px;overflow-x:auto}
.pstep{display:flex;align-items:center;gap:10px;flex:1;min-width:max-content}
.pstep .pn{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.08);color:rgba(247,244,237,.6);border:1.5px solid rgba(247,244,237,.18);transition:.35s}
.pstep .pl{color:rgba(247,244,237,.55);font-size:.82rem;font-weight:500;white-space:nowrap;transition:.35s}
.pstep.active .pn{background:var(--grad-gold);color:var(--navy);border-color:transparent;box-shadow:var(--shadow-gold)}
.pstep.active .pl{color:var(--white-warm)}
.pstep.done .pn{background:var(--gold-deep);color:var(--white-warm);border-color:transparent}
.pstep.done .pl{color:rgba(247,244,237,.8)}
.pstep .bar{flex:1;height:1.5px;background:rgba(247,244,237,.15);margin:0 4px;min-width:20px}

/* ---- Steps ---- */
.wizard-body{padding:38px 40px}
.step-panel{display:none;animation:fadeStep .45s var(--ease)}
.step-panel.active{display:block}
@keyframes fadeStep{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.step-panel h2{font-size:1.6rem;margin-bottom:6px}
.step-panel .sub{color:var(--muted);margin-bottom:26px;font-size:.96rem}

/* ---- Option cards ---- */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.opt{
  position:relative;cursor:pointer;border:1.5px solid rgba(201,162,75,.28);border-radius:var(--radius-sm);
  padding:22px 20px;background:var(--cream);transition:.3s var(--ease);display:flex;flex-direction:column;gap:8px;
}
.opt:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .ic{width:46px;height:46px;border-radius:12px;background:var(--grad-panel);display:grid;place-items:center;color:var(--gold-deep)}
.opt .ic svg{width:26px;height:26px}
.opt b{font-family:var(--serif);color:var(--navy);font-size:1.1rem}
.opt small{color:var(--muted);font-size:.84rem;line-height:1.4}
.opt .tick{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);display:none;place-items:center}
.opt .tick svg{width:15px;height:15px}
.opt.selected{border-color:var(--gold);background:linear-gradient(135deg,#fbf6ea,#f3e8cc);box-shadow:var(--shadow-gold)}
.opt.selected .tick{display:grid}

/* ---- Counter / stepper ---- */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.field{margin-bottom:22px}
.field > label{display:block;font-weight:600;color:var(--navy);margin-bottom:10px;font-size:.95rem}
.stepper{display:inline-flex;align-items:center;gap:0;border:1.5px solid rgba(201,162,75,.3);border-radius:50px;overflow:hidden;background:var(--cream)}
.stepper button{width:44px;height:46px;font-size:1.3rem;color:var(--gold-deep);background:var(--ivory);transition:.25s;font-weight:600}
.stepper button:hover{background:var(--grad-gold);color:var(--navy)}
.stepper .val{width:56px;text-align:center;font-weight:700;color:var(--navy);font-size:1.1rem;font-family:var(--serif)}

/* ---- Inputs ---- */
.inp,input.inp{
  width:100%;min-height:50px;padding:14px 16px;border:1.5px solid rgba(201,162,75,.3);border-radius:var(--radius-sm);
  background:var(--cream);font-family:inherit;font-size:.96rem;line-height:1.3;color:var(--charcoal);transition:.25s;
}
.inp:focus,input.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15);background:#fff}
.inp:invalid,input.inp:invalid{box-shadow:none}
.inp:focus:invalid,input.inp:focus:invalid{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
/* Custom required-field error state — used instead of the browser's native red
   validation outline (forms are marked novalidate; main.js drives this class). */
.inp.inp-error{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(184,137,46,.18)}
textarea.inp{resize:vertical;min-height:100px}
/* Normalise native <select> chrome so it renders pixel-identical to text/date inputs across browsers */
select.inp{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8892E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}

/* ---- Add-ons (checkbox cards) ---- */
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.addon{display:flex;align-items:center;gap:14px;cursor:pointer;border:1.5px solid rgba(201,162,75,.28);border-radius:var(--radius-sm);padding:16px 18px;background:var(--cream);transition:.3s}
.addon:hover{border-color:var(--gold)}
.addon input{position:absolute;opacity:0}
.addon .box{width:26px;height:26px;flex:0 0 auto;border-radius:7px;border:1.5px solid var(--taupe);display:grid;place-items:center;color:transparent;transition:.25s}
.addon .box svg{width:16px;height:16px}
.addon.selected{border-color:var(--gold);background:linear-gradient(135deg,#fbf6ea,#f3e8cc)}
.addon.selected .box{background:var(--grad-gold);border-color:transparent;color:var(--navy)}
.addon .txt b{display:block;color:var(--navy);font-size:.95rem}
.addon .txt span{font-size:.82rem;color:var(--gold-deep);font-weight:600}

/* ---- Nav buttons ---- */
.wizard-foot{display:flex;justify-content:space-between;gap:14px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(201,162,75,.2)}
.wizard-foot .btn.hide{visibility:hidden}

/* ---- Summary sidebar ---- */
.summary{position:sticky;top:100px;display:grid;gap:20px}
.summary-card{background:var(--grad-navy);color:var(--white-warm);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-md);border:1px solid rgba(217,190,126,.3)}
.summary-card h3{color:var(--white-warm);font-size:1.2rem;margin-bottom:4px}
.summary-card .est-sub{color:rgba(247,244,237,.6);font-size:.82rem;margin-bottom:20px}
.est-price{font-family:var(--serif);font-size:3rem;font-weight:800;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.est-price small{font-size:1rem;color:rgba(247,244,237,.7);font-family:var(--sans);-webkit-text-fill-color:rgba(247,244,237,.7)}
.sum-lines{margin:22px 0 0;display:grid;gap:0}
.sum-lines li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(247,244,237,.14);font-size:.88rem;color:rgba(247,244,237,.82)}
.sum-lines li span:last-child{color:var(--gold-soft);font-weight:600;text-align:right}
.sum-lines li.empty{color:rgba(247,244,237,.45);justify-content:center;border:none;font-style:italic}
.est-note{display:flex;gap:8px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid rgba(247,244,237,.12);font-size:.76rem;line-height:1.45;color:rgba(247,244,237,.6)}
.est-note svg{width:15px;height:15px;color:var(--gold-soft);flex:0 0 auto;margin-top:2px}
/* ---- Booking summary card ---- */
.bsum-list{display:grid;gap:0}
.bsum-list .bsum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(30,42,74,.12);font-size:.88rem}
.bsum-list .bsum-row:last-child{border-bottom:none}
.bsum-list .bsum-row .k{color:var(--muted);flex:0 0 auto}
.bsum-list .bsum-row .v{color:var(--navy);font-weight:600;text-align:right}
.bsum-list .bsum-empty{color:var(--muted);font-style:italic;font-size:.86rem;padding:4px 0}
.bsum-list .bsum-total{margin-top:4px;border-top:1.5px solid rgba(201,162,75,.35);border-bottom:none;padding-top:12px}
.bsum-list .bsum-total .k{color:var(--navy);font-weight:700}
.bsum-list .bsum-total .v{color:var(--gold-deep);font-family:var(--serif);font-size:1.15rem}
.safety{background:var(--ivory);border:1px solid rgba(201,162,75,.2);border-radius:var(--radius);padding:24px 24px}
.safety .sh{display:flex;align-items:center;gap:10px;color:var(--navy);font-family:var(--serif);font-size:1.1rem;margin-bottom:12px}
.safety .sh svg{width:24px;height:24px;color:var(--gold-deep)}
.safety li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin-bottom:9px}
.safety li svg{width:16px;height:16px;color:var(--gold-deep);flex:0 0 auto;margin-top:3px}
/* ---- Services info card (right sidebar) ---- */
.svc-guide .sg-item{padding:14px 0;border-bottom:1px dashed rgba(30,42,74,.12)}
.svc-guide .sg-item:last-child{border-bottom:none;padding-bottom:0}
.svc-guide .sg-item b{display:block;font-family:var(--serif);color:var(--navy);font-size:1rem;margin-bottom:3px}
.svc-guide .sg-item p{font-size:.86rem;color:var(--muted);line-height:1.5}

/* ---- Success ---- */
.booking-success{display:none;text-align:center;padding:60px 30px}
.booking-success.show{display:block;animation:fadeStep .5s var(--ease)}
.booking-success .check{width:90px;height:90px;margin:0 auto 24px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;color:var(--navy);box-shadow:var(--shadow-gold)}
.booking-success .check svg{width:48px;height:48px}
.booking-success h2{font-size:2rem;margin-bottom:12px}
.booking-success p{color:var(--muted);max-width:460px;margin:0 auto 10px}

/* ---- Review step ---- */
.review-summary{background:var(--cream);border:1px solid rgba(201,162,75,.22);border-radius:var(--radius-sm);padding:24px 26px}
.review-summary .rrow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(30,42,74,.12);font-size:.94rem}
.review-summary .rrow:last-child{border:none}
.review-summary .rrow span:first-child{color:var(--muted)}
.review-summary .rrow span:last-child{color:var(--navy);font-weight:600;text-align:right}

@media(max-width:980px){
  .booking-grid{grid-template-columns:minmax(0,1fr)}
  .summary{position:static;grid-template-columns:1fr 1fr;display:grid}
}
@media(max-width:640px){
  .wizard-body{padding:26px 22px}
  .progress .pl{display:none}
  .progress{padding:14px 12px;gap:4px}
  .pstep{flex:0 0 auto;min-width:0;gap:4px}
  .pstep .pn{width:24px;height:24px;font-size:.72rem}
  .pstep .bar{min-width:8px;margin:0 2px}
  .field-row{grid-template-columns:1fr}
  .summary{grid-template-columns:1fr}
  .opt-grid{grid-template-columns:1fr!important}
}