/* ===== Review page: itinerary, extras, seat map, price panel ===== */
.rvw{max-width:1040px;margin:0 auto}
.rvw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.steps{display:flex;gap:0;list-style:none;margin:6px 0 0;padding:0;font-size:.82rem;color:var(--mute)}
.steps li{padding:6px 16px 6px 22px;position:relative;background:#fff;border:1px solid var(--line);border-left:0}
.steps li:first-child{border-left:1px solid var(--line);border-radius:999px 0 0 999px;padding-left:18px}
.steps li:last-child{border-radius:0 999px 999px 0}
.steps li.on{background:#FFF3E4;color:var(--orange-dk);font-weight:800}
.steps li.done{color:var(--ok)}
.rvw-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.rvw-main,.rvw-side{min-width:0}
.card,.extras,.xgroup,.seatgroup,.seatpanel,.cabinwrap,.cabin-scroll,.paxpane,.itin{min-width:0;max-width:100%}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px;margin-bottom:12px}

.itin-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.itin-head h2{margin:3px 0 2px;font-size:1.12rem;overflow-wrap:anywhere}
.itin-head p{margin:0;color:var(--mute);font-size:.88rem}
.pill-dark{display:inline-block;background:var(--navy);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.itin-fare{text-align:right}.itin-fare b{display:block;font-size:1.18rem;font-weight:800;color:var(--navy)}.itin-fare small{color:var(--mute);font-size:.74rem}

.hop{display:grid;grid-template-columns:1.4fr .7fr 1fr .7fr .9fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.hop:last-of-type{border-bottom:0}
.hop-air{display:flex;align-items:center;gap:10px;min-width:0}
.hop-air b{display:block;font-size:.95rem}.hop-air small{display:block;color:var(--mute);font-size:.78rem}
.hop-time{text-align:center}.hop-time b{display:block;font-size:1.02rem;font-weight:800;color:var(--navy)}
.hop-time small{color:var(--mute);font-size:.78rem}.hop-time em{display:block;font-style:normal;color:var(--mute);font-size:.7rem}
.hop-line{text-align:center;color:var(--mute);font-size:.76rem}
.hop-line i{display:block;height:2px;background:linear-gradient(90deg,var(--line),var(--orange),var(--line));margin:6px auto;width:85%;border-radius:2px}
.hop-bag{text-align:right;font-size:.8rem;color:var(--ink)}.hop-bag small{color:var(--mute)}

.extras{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.extras h3{margin:0 0 12px;font-size:1.05rem}.extras h3 small{color:var(--mute);font-weight:500;font-size:.8rem;margin-left:6px}
.paxtabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.paxtabs::-webkit-scrollbar{display:none}
.paxtab{flex:none;white-space:nowrap}
.paxtab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font:inherit;font-weight:700;font-size:.8rem;color:var(--mute);cursor:pointer}
.paxtab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.xgroup{margin-bottom:14px}
.xgroup h4{margin:0 0 8px;font-size:.9rem;color:var(--ink)}
.xcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.xcard{position:relative;display:block;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;background:#fff;transition:border-color .12s,box-shadow .12s}
.xcard:hover{border-color:#CBD5E1}
.xcard input{position:absolute;opacity:0;width:0;height:0}
.xcard b{display:block;font-size:.86rem;color:var(--navy)}
.xcard span{display:block;font-size:.76rem;color:var(--mute);margin-top:2px}
.xcard em{display:block;font-style:normal;font-weight:800;color:var(--orange-dk);margin-top:5px;font-size:.84rem}
.xcard:has(input:checked){border-color:var(--orange);background:#FFF9F2;box-shadow:0 0 0 3px #FFE9CC}
.xcards.meals .xcard b{font-size:.9rem}

/* ===== seat map: letters down the side, rows across, like a cabin plan ===== */
.seatgroup{background:#FBFCFD;border:1px solid var(--line);border-radius:12px;padding:10px}
.segtabs{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.segtabs::-webkit-scrollbar{display:none}
.segtab{flex:none}
.segtab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font:inherit;font-weight:700;font-size:.8rem;color:var(--navy);cursor:pointer;line-height:1.15}
.segtab small{display:block;font-weight:500;font-size:.7rem;color:var(--mute)}
.segtab.on{border-color:var(--orange);background:#FFF3E4;color:var(--orange-dk)}
.bandbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:8px;font-size:.72rem;color:var(--mute)}
.band i{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:6px;vertical-align:-2px;border:1px solid rgba(0,0,0,.08)}
.band.b0 i{background:#fff;border-color:var(--line)}
.band.b1 i{background:#FEF3C7;border-color:#FCD34D}
.band.b2 i{background:#FEE2E2;border-color:#FCA5A5}
.band.gone i{background:#E9ECEF;border-color:#DEE2E6}
.bandbar .craft{margin-left:auto;font-weight:600}

.cabinwrap{position:relative;display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cabin-front{flex:none;width:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#F1F5F9,#fff);border-right:1px dashed var(--line)}
.cabin-front span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:700}
.cabin-scroll{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 10px;max-height:330px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.cabin-scroll::-webkit-scrollbar{height:8px}
.cabin-scroll::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px}
.cabin-grid{width:max-content}
.cabin-grid{border-collapse:separate;border-spacing:3px}
.cabin-grid th{width:18px;font-size:.72rem;color:var(--mute);font-weight:700;text-align:center}
.cabin-grid td{padding:0;text-align:center}
.cabin-grid tr.aisle td{height:14px}
.cabin-grid tr.aisle span{display:block;font-size:.66rem;color:#CBD5E1}
.cabin-grid tr.rownums td{font-size:.68rem;color:var(--mute);padding-top:2px}

.seat{position:relative;width:26px;height:26px;border:0;background:none;padding:0;cursor:pointer;display:block}
.seat .seat-back{position:absolute;inset:0;border-radius:9px 9px 6px 6px;border:1.5px solid #E2E8F0;background:#fff;transition:transform .1s,box-shadow .1s}
.seat .seat-back:after{content:"";position:absolute;left:3px;right:3px;bottom:2px;height:7px;border-radius:4px;background:rgba(0,0,0,.05)}
.seat .seat-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.52rem;font-weight:700;color:var(--navy);opacity:0;transition:opacity .1s}
.seat:hover .seat-label{opacity:1}
.seat:hover:not(:disabled) .seat-back{transform:translateY(-2px);box-shadow:0 4px 10px rgba(16,24,40,.12);border-color:var(--orange)}
.seat.b1 .seat-back{background:#FEF3C7;border-color:#FCD34D}
.seat.b2 .seat-back{background:#FEE2E2;border-color:#FCA5A5}
.seat.gone .seat-back{background:#E9ECEF;border-color:#E9ECEF}
.seat.gone .seat-back:before{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#ADB5BD;transform:translate(-50%,-50%)}
.seat:disabled{cursor:not-allowed}
.seat.mine .seat-back{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 3px #FFE9CC}
.seat.mine .seat-label{opacity:1;color:#fff}
.seat.gap{display:block;width:26px;height:26px}
.seatpick{margin:12px 0 0;font-size:.86rem;color:var(--mute)}
.seatpick b{color:var(--navy)}
@media(max-width:700px){.seat,.seat.gap{width:30px;height:30px}.cabin-front{width:38px}}

.rules{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.rules summary{font-weight:700;cursor:pointer}
.rulebox{padding-top:10px}.rulebox p{margin:4px 0;font-size:.88rem}
.ruletext{overflow-wrap:anywhere;white-space:pre-wrap;font-size:.78rem;color:var(--mute);background:var(--bg);border-radius:8px;padding:10px;max-height:190px;overflow:auto;margin-top:6px}

.rvw-side .card{position:sticky;top:74px}
.price{text-align:left}
.price h2{font-size:1.05rem;margin-bottom:10px}
/* both actions must stack and stay inside the card: .btn is inline-block globally, which let the
   ghost button sit on the same line and spill past the panel edge */
.price .btn{display:block;width:100%;box-sizing:border-box;margin:10px 0 0;text-align:center;white-space:nowrap}
.price .btn.ghost{margin-top:8px}
.price .assure{text-align:left}
.price .line small{display:block;color:var(--mute);font-size:.72rem;font-weight:500}
.holdbox{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px;margin:10px 0 4px;cursor:pointer}
.holdbox input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--orange)}
.holdbox b{display:block;font-size:.9rem}.holdbox small{color:var(--mute);font-size:.76rem}
.assure{list-style:none;margin:14px 0 0;padding:0;font-size:.78rem;color:var(--mute)}
.assure li{padding-left:18px;position:relative;margin-bottom:5px}
.assure li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
/* ---------- round trip: one flight at a time ---------- */
.legsteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px;scroll-margin-top:80px}
.legstep{display:flex;gap:10px;align-items:center;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;color:var(--ink);cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s}
.legstep:hover{border-color:#CBD5E1}
.legstep.on{border-color:var(--orange);box-shadow:0 0 0 3px #FFE9CC}
.legstep-no{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;background:var(--bg);color:var(--mute);border:1px solid var(--line)}
.legstep.on .legstep-no{background:var(--orange);border-color:var(--orange);color:#fff}
.legstep.done:not(.on) .legstep-no{background:var(--ok);border-color:var(--ok);color:#fff;font-size:0}
.legstep.done:not(.on) .legstep-no:after{content:"✓";font-size:.85rem}
.legstep-txt{min-width:0}
.legstep-txt small{display:block;font-size:.72rem;color:var(--mute)}
.legstep-txt b{display:block;font-size:1rem;color:var(--navy)}
.legstep-txt em{display:block;font-style:normal;font-size:.74rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legstep.done .legstep-txt em{color:var(--ok);font-weight:600}
.rvw.stepped [data-legpanel]{display:none}
.rvw.stepped [data-legpanel].active{display:block;animation:legin .2s ease-out}
@keyframes legin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.legnav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.legnav[hidden],.legnav .btn[hidden]{display:none}
.legnav .btn{white-space:nowrap}
.legnav [data-next]{margin-left:auto}
.legnav-hint{flex:1 1 180px;font-size:.8rem;color:var(--ok);font-weight:600;text-align:center}
.legnav-hint:empty{display:none}
.paxtab.done:not(.on){color:var(--ok);border-color:#BBF7D0}
.paxtab.done:after{content:" ✓"}
.seat.held .seat-back{background:#FFE9CC;border-color:#FDBA74}
.seat.held{cursor:not-allowed}
@media(max-width:560px){
  .legsteps{grid-template-columns:1fr 1fr;gap:6px}
  .legstep{padding:8px;gap:7px}
  .legstep-no{width:24px;height:24px}
  .legnav .btn{flex:1 1 100%;margin:0}
  .legnav [data-next]{order:-1}
}
/* ---------- responsive ---------- */
@media(max-width:1024px){
  .rvw-grid{grid-template-columns:1fr}
  .rvw-side .card{position:static}
  .rvw-side{order:-1}                       /* price summary first on tablets */
  .xcards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(max-width:820px){
  .rvw-head{flex-direction:column;gap:10px}
  .steps{display:none}
  .itin-head{flex-direction:column;gap:6px}
  .itin-fare{text-align:left}
  .hop{grid-template-columns:auto 1fr auto;grid-template-areas:"air air air" "dep line arr" "bag bag bag";gap:10px}
  .hop-air{grid-area:air}.hop-line{grid-area:line}.hop-bag{grid-area:bag;text-align:left;border-top:1px dashed var(--line);padding-top:8px}
  .hop-time:first-of-type{grid-area:dep;text-align:left}
  .hop-time:last-of-type{grid-area:arr;text-align:right}
  .card{padding:16px}
  .bandbar{gap:10px;font-size:.72rem}
  .bandbar .craft{margin-left:0;width:100%}
}
@media(max-width:560px){
  .rvw-head h1{font-size:1.4rem}
  .xcards{grid-template-columns:1fr 1fr;gap:8px}
  .xcard{padding:10px}
  .xcard b{font-size:.88rem}.xcard em{margin-top:6px;font-size:.85rem}
  .seatgroup{padding:10px;margin-left:-6px;margin-right:-6px}
  .cabin-front{width:30px}
  .cabin-front span{font-size:.62rem;letter-spacing:.1em}
  .cabin-scroll{padding:10px 8px}
  .seat,.seat.gap{width:24px;height:24px}
  .cabin-grid{border-spacing:3px}
  .seat .seat-label{opacity:1;font-size:.55rem}   /* no hover on touch, so always show the code */
  .holdbox{padding:10px}
  .price .line{font-size:.88rem}
}
@media(hover:none){
  .seat .seat-label{opacity:1}
  .seat:hover:not(:disabled) .seat-back{transform:none;box-shadow:none}
}
/* ---- "i" beside Extras: hover or tap for the per-item breakdown ---- */
.infowrap{position:relative;display:inline-block;vertical-align:middle;margin-left:7px;transform:translateY(-1px)}
.infobtn{width:15px;height:15px;padding:0;border:1px solid var(--line,#d8dde5);background:#fff;color:var(--mute,#6b7280);
  border-radius:50%;font:600 10px/13px Georgia,serif;cursor:pointer;display:block}
.infobtn:hover,.infobtn:focus-visible{border-color:var(--orange,#f58220);color:var(--orange,#f58220);outline:none}
.infotip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);z-index:30;
  min-width:150px;max-width:210px;padding:8px 10px;border-radius:8px;background:#1f2937;color:#fff;
  font:500 12px/1.65 inherit;white-space:pre-line;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:opacity .13s}
.infotip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#1f2937}
.infowrap:hover .infotip,.infobtn:focus-visible + .infotip{opacity:1;visibility:visible}
@media (max-width:560px){.infotip{left:auto;right:-6px;transform:none}.infotip::after{left:auto;right:12px;margin:0}}

/* ---- Price summary: keep everything inside the card ----
   The rows are flex, and a flex item will not shrink below its own text unless told to.
   "GST on service fee (18%)" and the hold-box wording were therefore widening the card
   past its 300px column and spilling the dotted rules and the ✓ list outside it. */
.rvw-side, .rvw-side .card, .price{min-width:0}
.price .line{align-items:baseline}
.price .line > span:first-child{min-width:0;flex:1 1 0;overflow-wrap:anywhere}
.price .line > span:last-child{flex:0 0 auto;white-space:nowrap}
/* flex-basis must be 0, not auto: with auto the span starts at its full text width and
   never shrinks, which is what pushed this paragraph outside the card. */
.holdbox{flex-wrap:nowrap}
.holdbox > span{min-width:0;flex:1 1 0;display:block}
.holdbox b{display:block}
.holdbox small{display:block;white-space:normal;word-break:break-word}
.assure li{overflow-wrap:anywhere}