/* ============================================================================
   Travelligent — Customer self-booking journey chrome.
   Ported from ui-mockups/assets/customer.css (approved mockup, 26 July 2026) to
   match the customer-booking mockup batch exactly. Layers on top of the shared
   travelligent.css (reuses its --tl-* CSS variables — no redefinition here).
   Used by _CustomerLayout.cshtml (nav bar) and the _CustomerStepper partial
   (9-step progress indicator) across the whole CustomerBooking/Customer journey.
   ============================================================================ */
.cnav{background:#fff;border-bottom:1px solid var(--tl-line);padding:12px 0;position:sticky;top:0;z-index:10}
.cnav .inner{max-width:1120px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:22px}
.cnav a.link{color:var(--tl-muted);text-decoration:none;font-weight:600;font-size:.88rem;background:none;border:0}
.cnav a.link:hover{color:var(--tl-navy)}
.cwrap{max-width:1120px;margin:0 auto;padding:22px 18px}
.cwrap-narrow{max-width:820px}

/* Stepper */
.stepper{display:flex;align-items:center;gap:0;margin:6px 0 20px;overflow-x:auto}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:92px;position:relative}
.stepper .st .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.82rem;
  background:#eef1f7;color:#9aa5bd;border:2px solid #eef1f7;z-index:2}
.stepper .st .lb{font-size:.68rem;color:#9aa5bd;font-weight:600;text-align:center;white-space:nowrap}
.stepper .st.done .num{background:#e6f7ee;color:var(--tl-green);border-color:#e6f7ee}
.stepper .st.active .num{background:var(--tl-grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(31,111,224,.35)}
.stepper .st.active .lb{color:var(--tl-navy)}
.stepper .bar{height:2px;background:#eef1f7;flex:1;min-width:14px;margin-top:-16px}
.stepper .bar.done{background:#bfe6cf}

/* Hero search */
.chero{background:var(--tl-grad-navy);border-radius:18px;color:#fff;padding:34px}
.chero h1{font-weight:800;letter-spacing:-.02em}

/* Feature strip (static marketing copy, search page) */
.feature-strip{border:1px solid var(--tl-line);border-radius:14px;background:#fff;padding:16px 18px}
.feature-strip .f{color:var(--tl-ink,#1b2437)}
.feature-strip .f i{font-size:1.3rem;color:var(--tl-blue)}
.feature-strip .f div div{font-size:.72rem;color:var(--tl-muted)}

/* Customer hotel card (results list) */
.chotel{display:flex;gap:14px;border:1px solid var(--tl-line);border-radius:14px;padding:14px;background:#fff;margin-bottom:14px}
.chotel img{width:200px;height:150px;object-fit:cover;border-radius:12px;flex:0 0 200px}

/* Hotel details: gallery + room selection */
.gmain{width:100%;height:320px;object-fit:cover;border-radius:14px}
.gt{width:100%;height:74px;object-fit:cover;border-radius:8px}
.room{border:1px solid var(--tl-line);border-radius:12px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.room.sel{border-color:var(--tl-blue);background:#f5f9ff}

.summary-row{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.88rem}
.summary-row.total{border-top:1px solid var(--tl-line);margin-top:6px;padding-top:10px;font-weight:800}

/* Payment method selector */
.pay-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--tl-line);border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer}
.pay-opt.sel{border-color:var(--tl-blue);background:#f5f9ff}

.qr{width:110px;height:110px;background:conic-gradient(#000 0 25%,#fff 0 50%,#000 0 75%,#fff 0);background-size:14px 14px;outline:1px solid #ddd}
.success-ring{width:96px;height:96px;border-radius:50%;background:#e6f7ee;display:grid;place-items:center;color:var(--tl-green);font-size:3rem;margin:0 auto}

/* Manage Booking action list */
.act{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--tl-line);border-radius:12px;text-decoration:none;color:var(--tl-ink,#1b2437)}
.act:hover{border-color:var(--tl-blue);background:#f5f9ff}
.act i.lead{font-size:1.3rem;color:var(--tl-blue)}
.act.disabled{opacity:.55;pointer-events:none}

/* E-Voucher key/value rows */
.kv{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed var(--tl-line);font-size:.88rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--tl-muted)}
.badge-soft{background:#eef4ff;color:var(--tl-blue);border-radius:6px;padding:.25rem .6rem;font-size:.72rem;font-weight:700}