/* ================================================================
   AQUAFREE — BOOKING SYSTEM STYLES
   css/booking.css
================================================================ */

/* ── SECTION WRAP ── */
.booking-sec{background:var(--paper);padding:80px 5%;}
.booking-wrap{max-width:1040px;margin:0 auto;}

/* ── CITY TABS ── */
.city-tabs{display:flex;gap:0;flex-wrap:wrap;border-bottom:3px solid var(--teal);}
.c-tab{padding:13px 22px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:var(--ink2);color:rgba(255,255,255,.45);border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;}
.c-tab.active{background:var(--teal-d);color:#fff;}
.c-tab .cdot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.c-tab .cdot.soon{background:var(--muted);}
.c-tab:hover:not(.active){background:var(--ink3);color:rgba(255,255,255,.7);}

/* ── STEP PROGRESS BAR ── */
.steps-bar{background:var(--ink);display:grid;grid-template-columns:repeat(6,1fr);}
.st-tab{padding:15px 6px;text-align:center;border-right:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background .2s;position:relative;}
.st-tab::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:transparent;transition:background .2s;}
.st-tab.active{background:rgba(0,180,166,.1);}
.st-tab.active::after{background:var(--teal);}
.st-tab.done{background:rgba(0,180,166,.05);}
.st-tab.done::after{background:var(--teal-d);}
.st-num{width:28px;height:28px;border-radius:50%;margin:0 auto 6px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.35);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.st-tab.active .st-num{background:var(--teal);color:#fff;}
.st-tab.done .st-num{background:var(--teal-d);color:#fff;}
.st-lbl{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.06em;text-transform:uppercase;font-weight:600;line-height:1.3;}
.st-tab.active .st-lbl,.st-tab.done .st-lbl{color:rgba(255,255,255,.65);}
.st-frac{font-size:9px;color:rgba(255,255,255,.2);margin-top:3px;}
.st-tab.active .st-frac{color:rgba(0,180,166,.5);}

/* ── STEP PANELS ── */
.s-panel{display:none;}
.s-panel.active{display:block;}
.s-body{background:var(--white);padding:40px;min-height:400px;}
.s-body h3{font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em;}
.s-body>.desc{font-size:14px;color:var(--muted);margin-bottom:30px;font-weight:300;}

/* ── STEP ACTIONS ── */
.s-actions{background:var(--paper);padding:18px 40px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);}
.s-prog-txt{font-size:12px;color:var(--muted);}
.btn-prev{background:none;border:1.5px solid var(--border);padding:11px 24px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-radius:var(--r);transition:all .2s;cursor:pointer;}
.btn-prev:hover{border-color:var(--ink);color:var(--ink);}
.btn-next{background:linear-gradient(135deg,var(--teal-d),var(--teal));border:none;padding:13px 32px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;gap:8px;transition:opacity .2s,transform .15s;box-shadow:0 4px 16px rgba(0,180,166,.3);}
.btn-next:hover{opacity:.92;transform:translateY(-1px);}
.btn-next-orange{background:linear-gradient(135deg,var(--orange-d),var(--orange));box-shadow:0 4px 16px rgba(255,107,53,.35);}

/* ── STEP 1: LOCATION ── */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.lc{border:2px solid var(--border);padding:22px 18px;cursor:pointer;transition:all .2s;border-radius:var(--r);display:flex;align-items:center;gap:14px;position:relative;}
.lc:hover{border-color:var(--teal);}
.lc.sel{border-color:var(--teal);background:var(--teal-xl);}
.lc.sel::after{content:'✓';position:absolute;top:10px;right:12px;color:var(--teal);font-weight:700;font-size:14px;}
.lc.coming{opacity:.45;pointer-events:none;}
.lc-icon{font-size:28px;flex-shrink:0;}
.lc-name{font-size:15px;font-weight:700;}
.lc-note{font-size:11px;color:var(--muted);margin-top:2px;}
.lc-bdg{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:3px;margin-top:4px;}
.lc-bdg.active{background:var(--teal-l);color:var(--teal-d);}
.lc-bdg.soon{background:var(--paper2);color:var(--muted);}

/* ── STEP 2: VEHICLE ── */
.veh-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.vc{border:2px solid var(--border);padding:22px 12px;text-align:center;cursor:pointer;transition:all .2s;border-radius:var(--r);position:relative;}
.vc:hover{border-color:var(--teal);}
.vc.sel{border-color:var(--teal);background:var(--teal-xl);}
.vc.sel::before{content:'✓';position:absolute;top:8px;right:10px;color:var(--teal);font-weight:700;font-size:12px;}
.vc-ic{font-size:34px;margin-bottom:10px;}
.vc-name{font-size:12px;font-weight:700;letter-spacing:.02em;}
.vc-ex{font-size:10px;color:var(--muted);margin-top:2px;font-weight:300;}
.vc-mul{font-size:10px;color:var(--orange);font-weight:700;margin-top:4px;}

/* ── STEP 3: PACKAGES ── */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pk{border:2px solid var(--border);cursor:pointer;transition:all .2s;border-radius:var(--r);overflow:hidden;position:relative;}
.pk:hover{border-color:var(--teal);box-shadow:var(--sh);}
.pk.sel{border-color:var(--teal);}
.pk.popular{border-color:var(--orange);}
.pk-pop-lbl{background:var(--orange);color:#fff;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px;text-align:center;}
.pk-head{background:var(--ink);padding:20px 16px;transition:background .2s;}
.pk.sel .pk-head,.pk:hover .pk-head{background:var(--teal-d);}
.pk-name{font-size:13px;font-weight:700;color:#fff;letter-spacing:.03em;margin-bottom:10px;}
.pk-price-row{display:flex;align-items:baseline;gap:2px;}
.pk-price{font-family:var(--font-head);font-size:28px;font-weight:900;color:var(--teal);line-height:1;transition:color .2s;}
.pk.sel .pk-price,.pk:hover .pk-price{color:#fff;}
.pk-cur{font-size:11px;color:rgba(255,255,255,.35);margin-left:4px;align-self:flex-end;margin-bottom:2px;}
.pk-dur{font-size:11px;color:rgba(255,255,255,.35);margin-top:6px;}
.pk-body{padding:16px;}
.pk-body ul{display:flex;flex-direction:column;gap:6px;}
.pk-body li{font-size:12px;color:var(--text);display:flex;gap:7px;align-items:flex-start;}
.pk-body li::before{content:'—';color:var(--teal);font-weight:700;flex-shrink:0;font-size:10px;margin-top:3px;}
.pk-sel-ring{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;transition:all .2s;}
.pk.sel .pk-sel-ring{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ── STEP 4: ADD-ONS ── */
.addon-list{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.ao-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s;}
.ao-row:last-child{border-bottom:none;}
.ao-row:hover{background:var(--paper);}
.ao-row.sel{background:var(--teal-xl);}
.ao-name{font-size:14px;font-weight:600;color:var(--ink);}
.ao-desc{font-size:12px;color:var(--muted);font-weight:300;margin-top:2px;max-height:0;overflow:hidden;transition:max-height .3s;}
.ao-row.exp .ao-desc{max-height:80px;}
.ao-more{font-size:11px;color:var(--teal);background:none;border:none;cursor:pointer;font-weight:600;margin-top:3px;padding:0;display:block;}
.ao-time{font-size:12px;color:var(--muted);white-space:nowrap;}
.ao-price{font-size:14px;font-weight:700;white-space:nowrap;min-width:110px;text-align:right;}
.ao-chk{width:22px;height:22px;border:2px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:all .2s;flex-shrink:0;}
.ao-row.sel .ao-chk{background:var(--teal);border-color:var(--teal);color:#fff;}
.addon-sub{background:var(--paper);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--teal);}
.addon-sub span{font-size:14px;font-weight:600;}
.addon-sub strong{font-family:var(--font-head);font-size:20px;font-weight:900;color:var(--teal-d);}

/* ── STEP 5: CALENDAR ── */
.cal-hdr{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.cal-nav-btn{width:34px;height:34px;border:1.5px solid var(--border);border-radius:var(--r);background:none;cursor:pointer;font-size:16px;transition:all .2s;display:flex;align-items:center;justify-content:center;color:var(--ink);}
.cal-nav-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
.cal-month-lbl{font-size:15px;font-weight:700;}
.cal-tbl{width:100%;border-collapse:collapse;}
.cal-tbl th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 4px;color:var(--muted);text-align:center;}
.cal-tbl td{padding:3px;text-align:center;}
.cal-day{width:100%;padding:10px 4px;font-size:13px;font-weight:500;border:1.5px solid transparent;background:none;cursor:pointer;transition:all .2s;border-radius:var(--r);}
.cal-day:hover:not(.dis):not(.unav){background:var(--teal-l);border-color:var(--teal);}
.cal-day.sel{background:var(--teal);color:#fff;font-weight:700;border-color:var(--teal);}
.cal-day.dis{color:var(--paper2);cursor:default;}
.cal-day.unav{color:var(--muted);background:var(--paper2);cursor:not-allowed;font-size:10px;}
.cal-day.tod{border-color:var(--border);font-weight:700;}
.time-wrap{margin-top:24px;}
.time-wrap h4{font-size:13px;font-weight:700;letter-spacing:.03em;margin-bottom:12px;}
.time-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.t-slot{padding:10px 6px;text-align:center;font-size:12px;font-weight:600;border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:all .2s;border-radius:var(--r);}
.t-slot:hover{border-color:var(--teal);}
.t-slot.sel{background:var(--teal);color:#fff;border-color:var(--teal);}
.t-slot.bkd{background:var(--paper2);color:var(--muted);cursor:not-allowed;text-decoration:line-through;}

/* ── STEP 6: SUMMARY ── */
.sum-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;}
.sum-hd{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding-bottom:10px;border-bottom:1.5px solid var(--border);}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(0,0,0,.05);font-size:14px;}
.sum-row .l{color:var(--muted);}
.sum-row .v{font-weight:600;text-align:right;max-width:210px;}
.sum-total{display:flex;justify-content:space-between;padding:14px 0 0;font-weight:900;font-size:17px;font-family:var(--font-head);}
.sum-total .v{color:var(--teal-d);font-size:24px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.f-row.full{grid-template-columns:1fr;}
.pay-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.pay-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--border);cursor:pointer;transition:all .2s;border-radius:var(--r);font-size:13px;font-weight:500;}
.pay-opt:hover{border-color:var(--teal);}
.pay-opt.sel{border-color:var(--teal);background:var(--teal-xl);}
.pay-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;position:relative;transition:border-color .2s;}
.pay-opt.sel .pay-radio{border-color:var(--teal);}
.pay-opt.sel .pay-radio::after{content:'';position:absolute;inset:3px;background:var(--teal);border-radius:50%;}
.pay-disclaimer{font-size:12px;color:var(--muted);line-height:1.65;font-style:italic;margin-bottom:16px;}

/* ── SUCCESS ── */
.bk-done{display:none;text-align:center;padding:80px 40px;background:var(--white);}
.done-icon{font-size:64px;margin-bottom:20px;}
.bk-done h2{font-size:34px;font-weight:900;margin-bottom:12px;letter-spacing:-.02em;}
.bk-done p{font-size:16px;color:var(--muted);max-width:480px;margin:0 auto 28px;font-weight:300;line-height:1.75;}
.ref-box{display:inline-block;background:var(--teal-xl);border:2px solid var(--teal-l);padding:18px 40px;border-radius:var(--r-lg);margin-bottom:28px;}
.ref-box .rl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.ref-box .rv{font-family:var(--font-head);font-size:30px;font-weight:900;color:var(--teal-d);}

/* ── PAYMENT MODAL ── */
#pay-modal{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;}
#pay-modal.open{display:flex;}
.pay-modal-box{background:#fff;border-radius:var(--r-lg);width:440px;max-width:95vw;box-shadow:var(--sh-xl);overflow:hidden;}
.pay-modal-hd{background:linear-gradient(135deg,var(--teal-d),var(--teal));padding:24px 28px;display:flex;align-items:center;justify-content:space-between;}
.pay-modal-hd h3{color:#fff;font-size:18px;font-weight:800;}
.pay-modal-hd button{background:rgba(255,255,255,.2);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer;}
.pay-modal-body{padding:28px;}
.pay-amount-big{text-align:center;margin-bottom:24px;}
.pay-amount-big .lbl{font-size:13px;color:var(--muted);margin-bottom:4px;}
.pay-amount-big .amt{font-family:var(--font-head);font-size:42px;font-weight:900;color:var(--teal-d);}
.pay-security{display:flex;align-items:center;gap:8px;background:var(--teal-xl);padding:10px 14px;border-radius:var(--r);margin-bottom:16px;}
.pay-security span{font-size:12px;color:var(--teal-d);}
.pay-go-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--teal-d),var(--teal));color:#fff;border:none;border-radius:var(--r);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.04em;}
.pay-go-btn:hover{opacity:.92;}
.pay-loading{display:none;text-align:center;padding:40px;}
.pay-spinner{width:48px;height:48px;border:4px solid var(--teal-l);border-top-color:var(--teal);border-radius:50%;animation:spin .9s linear infinite;margin:0 auto 16px;}
.pay-success-pane{display:none;text-align:center;padding:32px;}
.pay-success-icon{font-size:64px;margin-bottom:16px;}
.pay-success-pane h4{font-size:22px;font-weight:800;margin-bottom:10px;}
.pay-success-pane p{font-size:14px;color:var(--muted);line-height:1.7;max-width:320px;margin:0 auto 20px;}
.pay-ref{background:var(--paper);padding:14px 20px;border-radius:var(--r);display:inline-block;margin-bottom:20px;}
.pay-ref .rl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.pay-ref .rv{font-family:var(--font-head);font-size:24px;font-weight:900;color:var(--teal-d);}

/* ── BOOKING RESPONSIVE ── */
@media(max-width:768px){
  .loc-grid{grid-template-columns:1fr 1fr;}
  .steps-bar{grid-template-columns:repeat(3,1fr);}
  .s-body{padding:24px;}.s-actions{padding:16px 24px;}
  .sum-grid{grid-template-columns:1fr;}
  .f-row{grid-template-columns:1fr;}
  .time-slots{grid-template-columns:repeat(4,1fr);}
  .pkg-grid{grid-template-columns:1fr 1fr;}
  .veh-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:540px){
  .veh-grid{grid-template-columns:repeat(2,1fr);}
  .pkg-grid{grid-template-columns:1fr;}
  .loc-grid{grid-template-columns:1fr;}
  .time-slots{grid-template-columns:repeat(3,1fr);}
  .city-tabs{flex-wrap:wrap;}
  .c-tab{padding:10px 14px;font-size:11px;}
}