/* ===== Booking flow ===== */
.booking-page{background:var(--sand);min-height:100vh;padding-top:74px}
.booking-head{background:#fff;border-bottom:1px solid var(--line);padding:26px 0}
.booking-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.booking-head h1{font-size:24px}
.booking-head .secure{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.booking-head .secure svg{width:16px;height:16px;color:var(--ok)}

/* progress */
.steps-bar{background:#fff;border-bottom:1px solid var(--line-soft);padding:22px 0}
.steps{display:flex;align-items:center;gap:0;max-width:680px;margin:0 auto}
.step-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;position:relative;z-index:2}
.step-dot{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;font-weight:700;color:var(--muted);transition:all .35s var(--ease)}
.step-dot svg{width:18px;height:18px}
.step-node.active .step-dot{border-color:var(--green);background:var(--green);color:#fff}
.step-node.done .step-dot{border-color:var(--green);background:var(--green);color:#fff}
.step-node .step-lbl{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.step-node.active .step-lbl,.step-node.done .step-lbl{color:var(--green)}
.step-line{flex:1;height:2px;background:var(--line);margin:0 6px;position:relative;top:-13px}
.step-line .fill{position:absolute;inset:0;width:0;background:var(--green);transition:width .5s var(--ease)}

.booking-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding:44px 0 90px;max-width:var(--maxw);margin:0 auto}
.booking-layout .wrap{padding:0}

.step-panel{display:none}
.step-panel.active{display:block;animation:fadeUp .4s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm);margin-bottom:20px}
.panel-card h2{font-size:24px;margin-bottom:6px}
.panel-card .sub{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

.opt-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.opt-card{border:1.6px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;transition:all .25s;text-align:center}
.opt-card:hover{border-color:var(--green-300)}
.opt-card.sel{border-color:var(--green);background:var(--green-100)}
.opt-card .oc-ic{width:42px;height:42px;border-radius:11px;background:var(--sand);display:grid;place-items:center;margin:0 auto 10px;color:var(--green)}
.opt-card.sel .oc-ic{background:var(--green);color:#fff}
.opt-card h4{font-family:var(--font-body);font-size:15px}
.opt-card p{font-size:12.5px;color:var(--muted);margin-top:3px}
@media(max-width:560px){.opt-cards{grid-template-columns:1fr}}

.pay-tabs{display:flex;gap:12px;margin-bottom:24px}
.pay-tab{flex:1;border:1.6px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .25s}
.pay-tab.sel{border-color:var(--green);background:var(--green-100)}
.pay-tab .pt-ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex:none;font-weight:800;font-size:13px;color:#fff}
.pay-mpesa .pt-ic{background:#43B02A}
.pay-card .pt-ic{background:var(--green)}
.pay-tab strong{display:block;font-size:15px}
.pay-tab span{font-size:12.5px;color:var(--muted)}
.pay-body{display:none}
.pay-body.show{display:block;animation:fadeUp .3s var(--ease)}
.mpesa-note{display:flex;gap:12px;align-items:flex-start;background:#EBF7E6;border:1px solid #CBE8BF;border-radius:var(--r);padding:16px;font-size:13.5px;color:#2C6E1C;margin-top:18px}
.mpesa-note svg{width:18px;height:18px;flex:none;margin-top:1px}

.step-actions{display:flex;justify-content:space-between;gap:14px;margin-top:8px}

/* summary */
.summary{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.summary .s-media{position:relative;height:140px}
.summary .s-media .photo{position:absolute;inset:0}
.summary .s-media .s-cap{position:absolute;left:16px;bottom:14px;z-index:3;color:#fff}
.summary .s-media .s-cap h3{color:#fff;font-size:18px}
.summary .s-media .s-cap span{font-size:12.5px;opacity:.85}
.summary .s-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent,rgba(30,18,11,.8))}
.summary .s-body{padding:22px}
.s-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0;color:var(--ink-soft)}
.s-line .v{font-weight:600;color:var(--ink)}
.s-divider{height:1px;background:var(--line-soft);margin:8px 0}
.s-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.s-total .v{font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--green)}
.s-promo{display:flex;gap:8px;margin-top:16px}
.s-promo input{flex:1;border:1.5px solid var(--line);border-radius:var(--pill);padding:10px 16px;font-family:inherit;font-size:13.5px}
.s-trust{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.s-trust div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.s-trust svg{width:15px;height:15px;color:var(--ok);flex:none}

.success-card{text-align:center;padding:50px 32px}
.success-ic{width:88px;height:88px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 22px}
.success-ic svg{width:44px;height:44px}
.success-card h2{font-size:30px;margin-bottom:10px}
.success-card p{color:var(--muted);max-width:380px;margin:0 auto 24px}
.success-ref{display:inline-block;background:var(--sand);border:1px dashed var(--green-300);border-radius:var(--r);padding:12px 22px;font-family:var(--font-head);font-size:20px;color:var(--green);margin-bottom:26px}

@media(max-width:980px){
  .booking-layout{grid-template-columns:1fr}
  .summary{position:relative;top:0}
  .step-node .step-lbl{display:none}
}