/* Magik: payment and the live trip board. */

.pay-grid,
.trip-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(24px,3.5vw,48px); align-items:start;
}
/* Measured off the header, not a number typed when the header was a
   different height. The bar lays the page's own colour back down for its
   full height and fades it out over another 44px, and the docked search
   bar drops a shadow into the same band — at 92 the top of this card sat
   inside all of it and its own edge disappeared. Same fix as the boat
   page's order panel and the menu's cart. */
.pay-side{position:sticky; top:calc(var(--header-h, 76px) + 46px)}

/* The big number at the top of the payment screen. */
.totalbox{
  padding:24px 26px 26px; border-radius:var(--r-card); margin-bottom:18px;
  background:var(--cardbg); border:var(--cardbd); box-shadow:var(--elev);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.totalbox i{
  font-style:normal; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.totalbox .huge{
  display:block; margin:6px 0 4px;
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:800; font-size:clamp(38px,5.5vw,58px); line-height:1; letter-spacing:-.03em;
}
.totalbox p{color:var(--muted); font-size:14.5px}

/* Stacked rows: today, balance, cancellation, payment methods. */
.lines{padding:0; overflow:hidden}
.ln{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 18px; background:none; border:none;
  font-family:"Lexend",sans-serif; color:inherit;
}
.ln + .ln{border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.ln-ic{
  width:34px; height:34px; border-radius:var(--r-chip); flex:none; display:grid;
  place-items:center; font-size:15px; color:var(--ac);
  background:color-mix(in srgb, var(--tint2) 76%, transparent);
}
.ln-ic.ok{color:var(--su-text); background:color-mix(in srgb, var(--tint) 72%, transparent)}
.ln > span:nth-child(2){display:grid; gap:1px; flex:1; min-width:0}
.ln b{font-size:15px; font-weight:550}
.ln i{font-style:normal; font-size:12.5px; color:var(--muted)}
.ln > b.num{font-size:16px; font-weight:600; flex:none}

.methods .ln{cursor:pointer; transition:background .16s}
.methods .ln:hover{background:color-mix(in srgb, var(--ink) 3%, transparent)}
.methods .ln.on{background:color-mix(in srgb, var(--tint) 42%, transparent)}
.methods .ln:focus-visible{outline:2px solid var(--ac); outline-offset:-2px}
.rad{
  width:19px; height:19px; border-radius:50%; flex:none;
  border:1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.rad.on{
  border-color:var(--su); background:var(--su);
  box-shadow:inset 0 0 0 3px var(--surface);
}
.sec-h{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); font-family:"Lexend",sans-serif; font-weight:600;
  margin:26px 0 10px;
}

.waiting{text-align:center; padding:clamp(36px,6vw,64px) 26px; max-width:560px; margin-inline:auto}
.waiting-ic{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto 16px; font-size:24px; color:var(--ac);
  background:color-mix(in srgb, var(--tint2) 76%, transparent);
}
.waiting h2{font-size:26px; margin-bottom:10px}
.waiting .sub{max-width:44ch; margin-inline:auto}

/* Trip board */
.trip-grid .live-card{margin-bottom:16px}
.trip-grid .live-card img{aspect-ratio:16/9}
.crew-card{display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:16px}
.crew-card img{width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none}
.crew-card div{flex:1; display:grid; gap:2px; min-width:0}
.crew-card b{font-size:16px}
.crew-card i{font-style:normal; font-size:13px; color:var(--muted)}
.callbtn{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid;
  place-items:center; color:#fff; background:var(--btnbg);
  box-shadow:var(--btnsh); text-decoration:none;
}
.trip-grid .kpis{margin-top:0; margin-bottom:16px}

.meter{
  height:7px; border-radius:99px; overflow:hidden; margin-bottom:16px;
  background:color-mix(in srgb, var(--ink) 9%, transparent);
}
.meter span{
  display:block; height:100%; border-radius:99px; background:var(--btnbg);
}
.note-card{display:flex; align-items:center; gap:13px; padding:14px 16px; margin-bottom:12px}
.note-card p{font-size:14px; color:var(--muted)}

/* Rating sheet */
.rate-sheet{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:24px; background:color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.rate-card{
  width:min(400px,100%); text-align:center; padding:30px 26px;
  border-radius:var(--r-card); background:var(--surface);
  border:var(--cardbd); box-shadow:0 30px 60px -30px rgba(var(--sh),.7);
}
.rate-card h3{font-size:24px; margin-bottom:6px}
.stars{display:flex; justify-content:center; gap:6px; margin:22px 0 18px}
.stars button{
  width:46px; height:46px; border:none; background:none; cursor:pointer;
  color:color-mix(in srgb, var(--ink) 20%, transparent); font-size:26px;
  display:grid; place-items:center; transition:color .14s, transform .14s;
}
.stars button:hover,.stars button.lit{color:var(--wa); transform:scale(1.12)}
.stars button:focus-visible{outline:2px solid var(--ac); outline-offset:2px}

/* Favourite heart on a result card */
.boat{position:relative}
.fav{
  position:absolute; right:12px; top:12px; z-index:3;
  width:36px; height:36px; border-radius:50%; cursor:pointer; border:none;
  display:grid; place-items:center; font-size:17px;
  color:var(--ink); background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 8px -3px rgba(var(--sh),.5);
  transition:transform .16s, color .16s;
}
.fav:hover{transform:scale(1.1)}
.fav:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.fav.on{color:var(--hi)}
.fav.on .ic{fill:var(--hi)}
.boat .pill.promo-tag{top:56px}

/* Owner: answering a request */
.deal-acts{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}
.deal-acts .btn,.deal-acts .btn-ghost{flex:1; min-width:120px}

@media (max-width:1040px){
  .pay-grid,.trip-grid{grid-template-columns:1fr}
  .pay-side{position:static}
}
@media (max-width:760px){
  .ln{padding:14px}
  .totalbox{padding:20px}
}

/* Five-step tracker, as the app draws it above a booking. */
.stages{
  display:flex; list-style:none; margin:0 0 22px; padding:0;
  counter-reset:none;
}
.stage{
  flex:1; display:grid; justify-items:center; gap:6px; position:relative;
  font-size:11.5px; font-weight:500; color:var(--muted); text-align:center;
}
.stage.done{color:var(--ink)}
.stage-dot{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--muted);
  font-size:13px; position:relative; z-index:2;
}
.stage.done .stage-dot{background:var(--su); color:var(--onacc)}
.stage.now .stage-dot{box-shadow:0 0 0 4px color-mix(in srgb, var(--su) 22%, transparent)}
/* connector, drawn behind the dots */
.stage::before{
  content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px;
  background:color-mix(in srgb, var(--ink) 10%, transparent); z-index:1;
}
.stage:first-child::before{display:none}
.stage.done::before{background:var(--su)}

.declined{display:flex; align-items:center; gap:11px; padding:14px 16px; margin-bottom:20px}
.declined .ic{color:var(--da)}

.sign-card{display:flex; align-items:flex-start; gap:14px; padding:16px 18px; margin-top:16px}
.sign-card div{flex:1; display:grid; gap:4px; min-width:0}
.sign-card b{font-size:15.5px}
.sign-card i{font-style:normal; font-size:13px; color:var(--muted); line-height:1.5}
.sign-card .btn{flex:none; align-self:center}
@media (max-width:620px){
  .stage span:last-child{font-size:10px}
  .sign-card{flex-direction:column}
  .sign-card .btn{width:100%}
}

/* ---- confirm and pay ------------------------------------------------
 *
 * The last step of the booking sequence. Four questions down the left —
 * two covers, how to pay, what to pay with — and the day itself pinned
 * on the right, because every one of those questions is answered against
 * it. Nothing here is preselected except the deposit, which is the way
 * Magik has always taken money.
 */
.paysec{margin:0 0 clamp(26px,3.4vw,40px)}
.paysec-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:6px}
.paysec-head h2{font-size:clamp(19px,2.2vw,24px)}
.paysec-head h2 .ic{width:16px; height:16px; color:var(--muted); vertical-align:-1px}
.paysec-by{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--muted); white-space:nowrap;
}
.paysec > .sub{max-width:62ch; margin-bottom:14px}
.note-line{
  display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:14px;
  border-radius:var(--r-img); font-size:13.5px; color:var(--su-text);
  background:color-mix(in srgb, var(--tint2) 58%, transparent);
}
.note-line .ic{flex:none; width:16px; height:16px}

/* One answer among two. A whole card is the hit area: a 19px circle is
   not a thing to ask somebody to hit while deciding about insurance. */
.payopt{
  display:block; padding:16px 18px; margin-bottom:10px; cursor:pointer;
  border-radius:var(--r-card); background:var(--cardbg); border:var(--cardbd);
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.payopt:hover{background:color-mix(in srgb, var(--surface) 92%, transparent)}
.payopt:focus-visible{outline:2px solid var(--ac); outline-offset:2px}
.payopt.on{border-color:var(--su); box-shadow:var(--elev)}
.payopt-top{display:flex; align-items:center; gap:12px}
.payopt-top b{font-size:16px; font-weight:600; flex:1; min-width:0}
.payopt-price{margin:8px 0 0 31px; font-size:17px; font-weight:600}
.payopt-price em{font-style:normal; font-size:13px; font-weight:400; color:var(--muted)}
.payopt-note{margin:6px 0 0 31px; font-size:13.5px; color:var(--muted); line-height:1.55; max-width:58ch}
.perks{list-style:none; margin:12px 0 0 31px; padding:0; display:grid; gap:7px}
.perks li{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted)}
.perks .ic{width:15px; height:15px; color:var(--su-text); flex:none}

/* The card, under the method that needs one. */
.cardbox{padding:4px 18px 18px; display:grid; gap:12px}
.cardrow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.cardbox .fine{margin:0}
.fine.bad{color:var(--da)}
@media (max-width:520px){ .cardrow{grid-template-columns:1fr 1fr} }

/* What is true of every charter, said once, at the point of paying. */
.assure{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px}
.assure li{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted)}
.assure .ic{
  width:32px; height:32px; padding:8px; border-radius:var(--r-chip); flex:none;
  color:var(--su-text); background:color-mix(in srgb, var(--tint) 62%, transparent);
}
.terms{margin-bottom:14px; max-width:66ch}
.fine-link{font-size:13px; color:var(--muted)}
.btn.big{width:100%; padding:16px 22px; font-size:16.5px}

/* The day, beside the money. */
/* TIGHT. This panel is read beside a form, and every pixel it spends on
   air is a pixel of the bill that has to be scrolled to. */
.sum-card{padding:18px}
.sum-boat{display:flex; align-items:center; gap:12px}
.sum-art{width:52px; height:52px; border-radius:13px; overflow:hidden; flex:none}
.sum-art img{width:100%; height:100%; object-fit:cover}
.sum-boat div{display:grid; gap:2px; min-width:0}
.sum-boat i{font-style:normal; font-size:12.5px; color:var(--muted)}
.sum-boat b{font-size:15.5px; font-weight:600; line-height:1.25}
.sum-when{
  margin:13px 0; padding:11px 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size:13px; line-height:1.45; color:var(--muted);
}
/* The three groups. A run of rows with the charter somewhere in the
   middle of the towels does not say what the boat cost. */
.breakdown.tight .row{padding:5px 0; font-size:13.5px}
.breakdown.tight .row.total{margin-top:8px; padding-top:10px; font-size:15px}
.breakdown.tight .row em{font-size:11.5px}
.sum-card .sum-h{
  margin:12px 0 2px; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.sum-card .sum-h:first-child{margin-top:0}

/* the terms, where the money is */
.sum-cancel{margin-top:14px; padding-top:13px;
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.sum-cancel .tip-btn{
  display:inline-flex; align-items:center; gap:7px; padding:0;
  font-size:13px; color:var(--ink);
}
.sum-cancel .tip-btn .ic{width:15px; height:15px; color:var(--muted)}
/* the panel opens upward: this row is at the foot of a sticky card, and
   below it there is nothing but the end of the page */
.sum-cancel .tip{top:auto; bottom:calc(100% + 10px); max-width:none}

.sum-h{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:var(--muted); margin:20px 0 6px;
}
.sum-card .sub{font-size:14px; margin-bottom:4px}

/* Today and the rest, as two stops on one line. */
.paysteps{
  list-style:none; margin:18px 0 0; padding:16px 0 0; display:grid; gap:16px;
  border-top:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.paysteps li{display:flex; align-items:flex-start; gap:12px; position:relative; padding-left:24px}
.sum-card .paysteps{margin-top:14px; padding-top:14px; gap:12px}
.sum-card .paysteps b{font-size:14px}
.sum-card .paysteps i{font-size:12px}
.paysteps li::before{
  content:""; position:absolute; left:0; top:4px; width:13px; height:13px;
  border-radius:50%; border:2px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.paysteps li.now::before{border-color:var(--su)}
.paysteps li:first-child:not(:last-child)::after{
  content:""; position:absolute; left:6px; top:19px; bottom:-18px; width:1px;
  background:color-mix(in srgb, var(--ink) 15%, transparent);
}
.paysteps span{display:grid; gap:2px; flex:1; min-width:0}
.paysteps b{font-size:14.5px; font-weight:600}
.paysteps i{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.45}
.paysteps > li > b.num{font-size:15.5px; flex:none}