/* ============================================================
   PLC — Booking / Checkout
   Reuses styles.css tokens. Premium, calm, foreigner-friendly.
   ============================================================ */

/* ---------- Checkout shell ---------- */
.co-top{ padding-top:90px; }
.co-head{ padding-top:14px; padding-bottom:26px; } /* keep .wrap left/right padding */
.co-head .eyebrow{ margin-bottom:12px; }
.co-head h1{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.co-head p{ color:var(--ink-soft); margin:8px 0 0; font-size:1.02rem; }

/* progress */
.steps-rail{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:20px; }
.steps-rail .s{ flex:none; }
.steps-rail .lbl{ white-space:nowrap; }
.steps-rail .s{ display:inline-flex; align-items:center; gap:9px; }
.steps-rail .n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-head); font-weight:700; font-size:.82rem; background:var(--gold); color:#fff; }
.steps-rail .s.todo .n{ background:#fff; color:var(--ink-soft); border:1.5px solid var(--line); }
.steps-rail .lbl{ font-family:var(--f-head); font-weight:700; font-size:.86rem; color:var(--ink); }
:lang(ja) .steps-rail .lbl{ font-family:var(--f-jp); }
.steps-rail .s.todo .lbl{ color:var(--ink-soft); }
.steps-rail .bar{ width:26px; height:1.5px; background:var(--line); }

/* layout */
.co-grid{ display:grid; gap:26px; grid-template-columns:1fr; padding-bottom:120px; }

/* form card */
.fcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.fcard + .fcard{ margin-top:22px; }
.fcard__h{ padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:13px; }
.fcard__h .ic{ width:38px; height:38px; border-radius:11px; background:var(--cloud); display:grid; place-items:center; flex:none; }
.fcard__h .ic img{ width:24px; height:24px; }
.fcard__h .t{ font-family:var(--f-head); font-weight:700; font-size:1.12rem; color:var(--ink); }
:lang(ja) .fcard__h .t{ font-family:var(--f-jp); }
.fcard__h .num{ margin-left:auto; font-family:var(--f-head); font-weight:700; font-size:.74rem; letter-spacing:.16em; color:var(--gold); }
.fcard__b{ padding:22px 24px 26px; }

/* fields */
.frow{ display:grid; gap:18px; grid-template-columns:1fr; }
.frow.two{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field[hidden]{ display:none; }
.field > label{ font-family:var(--f-head); font-weight:700; font-size:.82rem; color:var(--ink); display:flex; align-items:center; gap:7px; }
:lang(ja) .field > label{ font-family:var(--f-jp); }
.field .req{ color:var(--gold); font-size:.9em; }
.field .hint{ font-size:.78rem; color:var(--ink-soft); font-weight:500; }
.input, .select, .textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; font-weight:600; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .15s, box-shadow .15s; }
:lang(ja) .input, :lang(ja) .select, :lang(ja) .textarea{ font-family:var(--f-jp); }
.input::placeholder, .textarea::placeholder{ color:#9aa3b2; font-weight:500; }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(181,137,74,.16); }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5A75' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; cursor:pointer; }
.input-group{ display:flex; align-items:stretch; }
.input-group .pfx{ display:inline-flex; align-items:center; gap:7px; padding:0 14px; background:var(--cloud); border:1.5px solid var(--line); border-right:none; border-radius:12px 0 0 12px; font-family:var(--f-head); font-weight:700; font-size:.92rem; color:var(--ink-soft); white-space:nowrap; }
.input-group .pfx img{ width:18px; height:18px; }
.input-group .input{ border-radius:0 12px 12px 0; }

/* ---------- Hotel autocomplete ---------- */
.ac{ position:relative; }
.ac__list{ position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px;
  list-style:none; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh);
  max-height:296px; overflow-y:auto; }
.ac__list[hidden]{ display:none; }
.ac__opt{ display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:10px; cursor:pointer; }
.ac__opt:hover, .ac__opt.active{ background:var(--cloud); }
.ac__opt .pin{ width:30px; height:30px; border-radius:8px; background:var(--blue-soft,#EAF3FC); display:grid; place-items:center; flex:none; margin-top:1px; }
.ac__opt .pin svg{ width:17px; height:17px; color:var(--blue,#2E86DE); }
.ac__opt .meta{ min-width:0; }
.ac__opt .nm{ font-family:var(--f-head); font-weight:700; font-size:.96rem; color:var(--ink); line-height:1.2; }
:lang(ja) .ac__opt .nm{ font-family:var(--f-jp); }
.ac__opt .ad{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac__opt mark{ background:transparent; color:var(--gold); font-weight:800; }
.ac__empty{ padding:14px 12px; font-size:.88rem; color:var(--ink-soft); }
.ac__manual{ display:flex; align-items:center; gap:10px; padding:11px 12px; margin-top:2px; border-radius:10px; cursor:pointer;
  font-family:var(--f-head); font-weight:700; font-size:.9rem; color:var(--blue,#2E86DE); background:var(--blue-soft,#EAF3FC); }
:lang(ja) .ac__manual{ font-family:var(--f-jp); }
.ac__manual:hover, .ac__manual.active{ background:#DCEBFA; }
.ac__manual svg{ width:17px; height:17px; flex:none; }
.ac__picked.is-manual{ background:#FBF6E6; border-color:#EBDDB0; }
.ac__picked.is-manual svg{ color:#C79A2E; }
.ac__pwr{ display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:7px 10px 3px; font-size:.68rem; color:#9aa3b2; border-top:1px solid var(--line); margin-top:4px; }
.ac__pwr b{ font-weight:700; color:#7e879a; }
.ac__picked{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:10px 12px; background:#F2F8F2; border:1px solid #CDE6CD; border-radius:11px; font-size:.86rem; color:var(--ink); }
.ac__picked[hidden]{ display:none; }
.ac__picked svg{ width:17px; height:17px; color:var(--green,#2E9E6B); flex:none; margin-top:2px; }
.ac__picked-addr{ flex:1 1 auto; min-width:0; }
:lang(ja) .ac__picked-addr{ word-break:keep-all; }
.ac__editaddr{ flex:none; align-self:center; font-family:var(--f-head); font-weight:700; font-size:.8rem;
  color:var(--navy,#15315E); background:#fff; border:1.5px solid #CDE6CD; border-radius:999px; padding:6px 13px; cursor:pointer; transition:background .15s, border-color .15s; }
:lang(ja) .ac__editaddr{ font-family:var(--f-jp); }
.ac__editaddr:hover{ background:#EAF5EA; border-color:#9FD3A0; }
.notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:11px 13px;
  background:#FBF6E6; border:1px solid #EBDDB0; border-radius:11px; font-size:.83rem; line-height:1.55; color:#6E5B22; }
.notice svg{ width:17px; height:17px; color:#C79A2E; flex:none; margin-top:2px; }
:lang(ja) .notice span{ word-break:keep-all; }
/* estimated terminal box */
.termbox{ border:1.5px solid #BFD8C9; background:#EFF7F2; border-radius:14px; padding:14px 16px; }
.termbox__row{ display:flex; align-items:center; gap:12px; }
.termbox__ic{ width:40px; height:40px; border-radius:11px; background:#fff; display:grid; place-items:center; flex:none; border:1px solid #CFE6DA; }
.termbox__ic img{ width:24px; height:24px; }
.termbox__b{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.termbox__label{ font-family:var(--f-head); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#3C7A5C; }
:lang(ja) .termbox__label{ font-family:var(--f-jp); letter-spacing:.04em; }
.termbox__val{ font-family:var(--f-head); font-weight:800; font-size:1.18rem; color:var(--ink); }
:lang(ja) .termbox__val{ font-family:var(--f-jp); }
.termbox__note{ font-size:.8rem; color:#5d7068; line-height:1.5; margin:10px 0 0; }
:lang(ja) .termbox__note{ word-break:keep-all; }
.rrow--term dd{ color:var(--navy); }
.review__termnote{ font-size:.8rem; color:var(--ink-soft); line-height:1.55; margin:12px 30px 0; padding-top:12px; border-top:1px dashed var(--line); }
:lang(ja) .review__termnote{ word-break:keep-all; }
.addr{ border:1px solid var(--line); border-radius:14px; padding:16px; background:#fff; }
.addr__h{ display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.addr__h b{ font-family:var(--f-head); font-weight:700; font-size:.96rem; color:var(--ink); }
:lang(ja) .addr__h b{ font-family:var(--f-jp); }
.addr__h span{ font-size:.78rem; color:var(--ink-soft); }
.addr .frow{ margin-bottom:14px; }
.addr .frow:last-of-type{ margin-bottom:0; }
.addr .notice{ margin-top:14px; }
.opt{ font-family:var(--f-body); font-weight:600; font-size:.72rem; color:var(--ink-soft); background:var(--cloud); border-radius:6px; padding:2px 7px; margin-left:4px; }
:lang(ja) .opt{ font-family:var(--f-jp); }
@keyframes autofillGlow{ 0%{ background:#FBF6E6; } 100%{ background:var(--paper); } }
.is-autofilled{ animation:autofillGlow 1.1s ease-out 1; }

/* choice tiles (airport, time window) */
.choice{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.choice.three{ grid-template-columns:1fr; }
.choice label{ position:relative; display:flex; align-items:center; gap:13px; padding:15px 16px; border:1.5px solid var(--line); border-radius:14px; cursor:pointer; background:var(--paper); transition:border-color .15s, background .15s; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice .tick{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:none; display:grid; place-items:center; transition:.15s; }
.choice .tick::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--gold); transform:scale(0); transition:transform .15s; }
.choice label .body{ display:flex; flex-direction:column; line-height:1.25; }
.choice label .body b{ font-family:var(--f-head); font-weight:700; font-size:.98rem; color:var(--ink); }
:lang(ja) .choice label .body b{ font-family:var(--f-jp); }
.choice label .body span{ font-size:.78rem; color:var(--ink-soft); }
.choice input:checked + .tick{ border-color:var(--gold); }
.choice input:checked + .tick::after{ transform:scale(1); }
.choice input:checked ~ .body b{ color:var(--ink); }
.choice label:has(input:checked){ border-color:var(--gold); background:#FBF7EE; }

/* luggage capacity guide */
.capguide{ border:1.5px solid var(--line); border-radius:14px; background:var(--cloud); padding:16px 18px; }
.capguide__h{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.capguide__h .ic{ width:34px; height:34px; border-radius:10px; background:#fff; display:grid; place-items:center; flex:none; border:1px solid var(--line); }
.capguide__h .ic img{ width:22px; height:22px; }
.capguide__h b{ font-family:var(--f-head); font-weight:700; font-size:1rem; color:var(--ink); }
:lang(ja) .capguide__h b{ font-family:var(--f-jp); }
.capguide__lead{ font-size:.9rem; color:var(--ink-soft); margin:0 0 10px; }
.capguide__rows{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.capguide__row{ display:flex; align-items:center; gap:11px; font-size:.95rem; font-weight:600; color:var(--ink); }
.capguide__row .sz{ width:28px; height:28px; border-radius:8px; background:var(--navy); color:#fff; font-family:var(--f-head); font-weight:800; font-size:.82rem; display:grid; place-items:center; flex:none; }
.capguide__note{ font-size:.84rem; color:var(--ink-soft); margin:4px 0 0; line-height:1.55; }
.capguide__flat{ display:flex; align-items:flex-start; gap:9px; margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--line); font-size:.86rem; font-weight:600; color:var(--navy); line-height:1.5; }
.capguide__flat svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px; }
:lang(ja) .capguide__lead,:lang(ja) .capguide__note,:lang(ja) .capguide__flat{ word-break:keep-all; }

/* luggage information */
.lug{ border:1.5px solid var(--line); border-radius:14px; background:#fff; padding:16px 18px; }
.lug__h{ display:flex; align-items:center; gap:10px; }
.lug__h .ic{ width:34px; height:34px; border-radius:10px; background:var(--cloud); display:grid; place-items:center; flex:none; border:1px solid var(--line); }
.lug__h .ic img{ width:22px; height:22px; }
.lug__h b{ font-family:var(--f-head); font-weight:700; font-size:1rem; color:var(--ink); }
:lang(ja) .lug__h b{ font-family:var(--f-jp); }
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); width:max-content; }
.stepper__btn{ width:46px; height:46px; font-size:1.4rem; font-weight:700; color:var(--navy); background:#fff; display:grid; place-items:center; transition:background .15s; }
.stepper__btn:hover{ background:var(--cloud); }
.stepper__btn:disabled{ color:#c2cad6; cursor:not-allowed; background:#fff; }
.stepper__val{ min-width:60px; text-align:center; font-family:var(--f-head); font-weight:800; font-size:1.18rem; color:var(--ink); border-left:1.5px solid var(--line); border-right:1.5px solid var(--line); height:46px; line-height:46px; }

/* consent */
.consent{ display:flex; align-items:flex-start; gap:13px; padding:16px; background:var(--cloud); border-radius:14px; }
.consent input{ position:absolute; opacity:0; pointer-events:none; }
.consent .box{ width:24px; height:24px; border-radius:7px; border:2px solid var(--line); background:#fff; flex:none; display:grid; place-items:center; margin-top:1px; transition:.15s; }
.consent .box svg{ width:15px; height:15px; color:#fff; opacity:0; transition:opacity .15s; }
.consent label:has(input:checked) .box{ background:var(--gold); border-color:var(--gold); }
.consent label:has(input:checked) .box svg{ opacity:1; }
.consent label{ display:flex; align-items:flex-start; gap:13px; cursor:pointer; }
.consent .txt{ font-size:.9rem; color:var(--ink); line-height:1.6; }
.consent .txt a{ color:var(--gold); border-bottom:1px solid var(--gold); font-weight:600; }
.consent-note{ font-size:.82rem; color:var(--ink-soft); line-height:1.55; margin:10px 4px 0; }
:lang(ja) .consent-note{ word-break:keep-all; }

/* ---------- Summary rail ---------- */
.summary{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; align-self:start; }
.summary__media{ position:relative; height:120px; overflow:hidden; }
.summary__media img{ width:100%; height:100%; object-fit:cover; }
.summary__media .cap{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px 18px;
  background:linear-gradient(0deg, rgba(14,24,48,.72), transparent 80%); }
.summary__media .cap b{ font-family:var(--f-head); font-weight:700; color:#fff; font-size:1.02rem; white-space:nowrap; }
:lang(ja) .summary__media .cap b{ font-family:var(--f-jp); }
.summary__b{ padding:20px 22px 22px; }
.summary__b h3{ font-family:var(--f-head); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
:lang(ja) .summary__b h3{ font-family:var(--f-jp); letter-spacing:.08em; }
.sline{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.92rem; }
.sline:last-of-type{ border-bottom:none; }
.sline .k{ color:var(--ink-soft); flex:none; }
.sline .v{ font-family:var(--f-head); font-weight:700; color:var(--ink); text-align:right; min-width:0; overflow-wrap:anywhere; }
:lang(ja) .sline .v{ word-break:normal; line-break:strict; }
:lang(ja) .sline .v{ font-family:var(--f-jp); }
.sline .v.muted{ color:#9aa3b2; font-weight:600; font-family:var(--f-body); }
/* fee breakdown lines */
.sline--fee{ font-size:.86rem; padding:6px 0; border-bottom:none; }
.sline--fee .k{ color:var(--ink-soft); font-weight:500; }
.sline--fee .v{ font-size:.9rem; }
#sumDiscLine .v{ color:var(--gold); }
#sumStorageLine .v, #sumEarlyLine .v{ color:var(--navy); }
/* add-on option boxes */
.optbox{ border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; background:var(--paper); }
.optbox .checkline{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.optbox .checkline input{ margin-top:3px; width:20px; height:20px; flex:none; accent-color:var(--gold); }
.optbox__t{ display:flex; flex-direction:column; gap:4px; }
.optbox__t b{ font-family:var(--f-head); font-weight:700; font-size:.98rem; color:var(--ink); }
:lang(ja) .optbox__t b{ font-family:var(--f-jp); }
.optbox__t span{ font-size:.84rem; color:var(--ink-soft); line-height:1.55; }
:lang(ja) .optbox__t span{ word-break:normal; overflow-wrap:anywhere; }
.optbox__fields{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:12px; }
.optbox__fields[hidden]{ display:none; }
.optbox__fee{ margin:0; font-family:var(--f-head); font-weight:700; font-size:.84rem; color:var(--navy); }
:lang(ja) .optbox__fee{ font-family:var(--f-jp); }
.optbox__hint{ margin:0; font-size:.8rem; color:var(--ink-soft); line-height:1.55; }
:lang(ja) .optbox__hint{ word-break:normal; overflow-wrap:anywhere; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .grid2{ grid-template-columns:1fr; } }
/* accordion option plans (exclusive) */
.optacc{ display:flex; flex-direction:column; gap:10px; }
.optacc__item{ border:1px solid var(--line); border-radius:14px; background:var(--paper); overflow:hidden; transition:border-color .15s; }
.optacc__item.open{ border-color:var(--gold); }
.optacc__head{ width:100%; display:flex; align-items:flex-start; gap:12px; text-align:left; cursor:pointer; padding:16px; }
.optacc__item.open .optacc__head{ background:#FBF7EE; }
.optacc__chk{ width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--gold); cursor:pointer; }
.optacc__b{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.optacc__b b{ font-family:var(--f-head); font-weight:700; font-size:.98rem; color:var(--ink); }
:lang(ja) .optacc__b b{ font-family:var(--f-jp); }
.optacc__b > span{ font-size:.84rem; color:var(--ink-soft); line-height:1.55; }
:lang(ja) .optacc__b > span{ word-break:normal; overflow-wrap:anywhere; }
.optradio__fee{ font-family:var(--f-head); font-weight:700; font-size:.82rem; color:var(--navy) !important; }
:lang(ja) .optradio__fee{ font-family:var(--f-jp); }
.optbox__fields{ margin:0 16px 16px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:12px; }
.optbox__fields[hidden]{ display:none; }
.optbox__fee{ margin:0; font-family:var(--f-head); font-weight:700; font-size:.84rem; color:var(--navy); }
:lang(ja) .optbox__fee{ font-family:var(--f-jp); }
.summary__total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:2px solid var(--line); }
.summary__total .k{ font-family:var(--f-head); font-weight:700; color:var(--ink); font-size:1.02rem; }
:lang(ja) .summary__total .k{ font-family:var(--f-jp); }
.summary__total .amt{ font-family:var(--f-head); font-weight:700; color:var(--ink); font-size:1.8rem; white-space:nowrap; }
.summary__total .amt small{ font-size:.8rem; color:var(--ink-soft); font-weight:600; margin-left:4px; }
.summary__assure{ display:grid; gap:12px; margin-top:18px; }
.summary__assure .a{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; line-height:1.45; color:var(--ink); }
.summary__assure .a svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px; }
.summary .btn{ width:100%; margin-top:18px; }
.summary__fine{ font-size:.76rem; color:var(--ink-soft); text-align:center; margin:12px 0 0; }
/* campaign price — struck list price + discounted, with a small note */
.amt-was{ font-size:.6em; font-weight:600; color:#9aa3b2; text-decoration:line-through; margin-right:4px; }
.summary__campaign{ font-family:var(--f-head); font-weight:700; font-size:.78rem; letter-spacing:.01em; color:var(--gold); text-align:right; margin:7px 0 0; }
:lang(ja) .summary__campaign{ font-family:var(--f-jp); }

/* desktop submit (in form column) hidden on mobile where sticky bar is used */
.co-submit{ margin-top:22px; }
.co-submit .btn{ width:100%; }

/* ---------- Mobile sticky confirm ---------- */
.cobar{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(252,251,248,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:14px; align-items:center;
  box-shadow:0 -8px 24px rgba(16,24,48,.1); }
.cobar .pm{ flex:1; line-height:1.2; }
.cobar .pm span{ font-size:.72rem; color:var(--ink-soft); display:block; }
.cobar .pm b{ font-family:var(--f-head); font-weight:700; font-size:1.18rem; color:var(--ink); }
:lang(ja) .cobar .pm b{ font-family:var(--f-jp); }
.cobar .btn{ padding-inline:26px; }

/* ---------- Confirmation overlay ---------- */
.confirm{ position:fixed; inset:0; z-index:120; background:rgba(14,24,48,.5); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; }
.confirm.show{ display:flex; }
.confirm__card{ background:#fff; border-radius:22px; box-shadow:var(--sh-lg,0 30px 80px rgba(14,24,48,.4)); max-width:460px; width:100%; overflow:hidden; }
.confirm__hero{ position:relative; height:150px; overflow:hidden; }
.confirm__hero img{ width:100%; height:100%; object-fit:cover; }
.confirm__hero .badge{ position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); width:64px; height:64px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--sh); }
.confirm__hero .badge svg{ width:34px; height:34px; color:var(--gold); }
.confirm__b{ padding:44px 30px 30px; text-align:center; }
.confirm__b h2{ font-size:1.5rem; }
.confirm__b p{ color:var(--ink-soft); margin:10px 0 0; font-size:.96rem; }
.confirm__ref{ display:inline-block; margin:18px 0 0; font-family:var(--f-head); font-weight:700; letter-spacing:.1em; color:var(--ink); background:var(--cloud); border-radius:10px; padding:10px 18px; }
.confirm__b .btn{ width:100%; margin-top:22px; }

/* review (step 3) modal */
.confirm__card--wide{ max-width:560px; max-height:90vh; display:flex; flex-direction:column; }
.review__head{ padding:26px 30px 18px; border-bottom:1px solid var(--line); }
.review__head .eyebrow{ margin-bottom:8px; }
.review__head h2{ font-size:1.4rem; }
.review__sub{ color:var(--ink-soft); font-size:.92rem; margin:8px 0 0; }
:lang(ja) .review__sub{ word-break:keep-all; }
.review__body{ padding:18px 30px; overflow-y:auto; }
.review__refline{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--cloud); border-radius:12px; padding:12px 16px; margin-bottom:8px; }
.review__refline span{ font-size:.84rem; color:var(--ink-soft); }
:lang(ja) .review__refline span{ font-family:var(--f-jp); }
.review__refline b{ font-family:var(--f-head); font-weight:700; letter-spacing:.08em; color:var(--ink); }
.review__list{ margin:0; }
.rrow{ display:grid; grid-template-columns:42% 58%; gap:14px; padding:11px 2px; border-bottom:1px dashed var(--line); }
.rrow:last-child{ border-bottom:none; }
.rrow dt{ font-size:.86rem; color:var(--ink-soft); margin:0; }
:lang(ja) .rrow dt{ font-family:var(--f-jp); }
.rrow dd{ font-family:var(--f-head); font-weight:700; font-size:.92rem; color:var(--ink); margin:0; word-break:break-word; }
:lang(ja) .rrow dd{ font-family:var(--f-jp); word-break:normal; }
.review__actions{ display:flex; gap:12px; padding:18px 30px 24px; border-top:1px solid var(--line); }
.review__actions .btn{ flex:1; }
.review__actions .btn-gold{ flex:1.4; }
/* booking card: flex column so fields can be reordered per direction via order */
.bcard{ display:flex; flex-direction:column; }
.review__error{ margin:0 30px 22px; padding:12px 14px; border-radius:12px; background:#FCEDEA; border:1px solid #F0C7BE; color:#9A2A14; font-size:.86rem; line-height:1.5; }
:lang(ja) .review__error{ word-break:keep-all; }

/* ---- pre-submit confirmation sections ---- */
.rsec{ margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.rsec__h{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.rsec__ic{ width:38px; height:38px; border-radius:11px; background:var(--cloud); display:grid; place-items:center; flex:none; border:1px solid var(--line); }
.rsec__ic img{ width:23px; height:23px; }
.rsec__ic--warn{ background:#FBF1E2; border-color:#EBD7A8; color:#C2871F; }
.rsec__ic--warn svg{ width:21px; height:21px; }
.rsec__h b{ font-family:var(--f-head); font-weight:700; font-size:1rem; color:var(--ink); }
:lang(ja) .rsec__h b{ font-family:var(--f-jp); }
.rsec__lead{ font-size:.9rem; color:var(--ink-soft); margin:0 0 10px; }
.rcap{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.rcap__row{ display:flex; align-items:center; gap:11px; font-size:.94rem; font-weight:600; color:var(--ink); }
.rcap__sz{ width:30px; height:30px; border-radius:8px; background:var(--navy); color:#fff; font-family:var(--f-head); font-weight:800; font-size:.84rem; display:grid; place-items:center; flex:none; }
.rsec__notes{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.rsec__notes li{ font-size:.84rem; color:var(--ink-soft); line-height:1.55; }
:lang(ja) .rsec__notes li{ word-break:normal; overflow-wrap:anywhere; }
/* alert variant */
.rsec--alert{ background:#FBF6E6; border-color:#EBDDB0; }
.rsec--alert p{ font-size:.86rem; color:#6E5B22; line-height:1.6; margin:0 0 8px; }
.rsec--alert p:last-child{ margin-bottom:0; }
.rsec--alert #rcTimeDep{ font-weight:700; color:#7a5e12; }
:lang(ja) .rsec--alert p{ word-break:normal; overflow-wrap:anywhere; }
/* payment / 15-min notice — calm beige card, not an aggressive red */
.rsec--pay{ background:#FBF8EF; border-color:#E7DCBE; }
.rsec--pay .rsec__h b{ color:#6E5B22; }
.rsec__notes--pay{ padding-left:18px; }
.rsec__notes--pay li{ color:#5d5535; font-size:.86rem; line-height:1.6; }
:lang(ja) .rsec__notes--pay li{ word-break:normal; overflow-wrap:anywhere; }
/* handover checks */
.rsec__checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.rsec__checks li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink); line-height:1.5; }
.rsec__checks li svg{ width:17px; height:17px; color:var(--green,#2E9E6B); flex:none; margin-top:2px; }
:lang(ja) .rsec__checks li span{ word-break:normal; overflow-wrap:anywhere; }
/* consent checklist */
.rsec--agree{ background:#fff; border-color:#D9CFA6; }
.rsec__agreeh{ display:block; font-family:var(--f-head); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
:lang(ja) .rsec__agreeh{ font-family:var(--f-jp); letter-spacing:.04em; }
.ragree{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:9px 0; }
.ragree + .ragree{ border-top:1px solid var(--line); }
.ragree input{ position:absolute; opacity:0; pointer-events:none; }
.ragree__box{ width:24px; height:24px; border-radius:7px; border:2px solid var(--line); background:#fff; flex:none; display:grid; place-items:center; margin-top:1px; transition:.15s; }
.ragree__box svg{ width:15px; height:15px; color:#fff; opacity:0; transition:opacity .15s; }
.ragree:has(input:checked) .ragree__box{ background:var(--gold); border-color:var(--gold); }
.ragree:has(input:checked) .ragree__box svg{ opacity:1; }
.ragree__t{ font-size:.9rem; color:var(--ink); line-height:1.55; min-width:0; }
:lang(ja) .ragree__t{ word-break:normal; overflow-wrap:anywhere; }
.ragree__hint{ font-size:.8rem; color:#C0503F; font-weight:600; margin:12px 0 0; }
:lang(ja) .ragree__hint{ word-break:normal; overflow-wrap:anywhere; }
/* consent tooltip */
.ragree__help{ position:relative; flex:none; width:18px; height:18px; margin-left:6px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); font:700 11px/16px var(--f-head); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; align-self:center; padding:0; }
.ragree__help:hover, .ragree__help.open{ border-color:var(--gold); color:var(--gold); }
.ragree__tip{ position:absolute; z-index:60; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:250px; max-width:74vw; white-space:pre-line; background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 8px 24px rgba(20,30,50,.16); border-radius:10px; padding:10px 12px; font:400 .78rem/1.5 var(--f-body, sans-serif); text-align:left; opacity:0; visibility:hidden; transition:opacity .12s; pointer-events:none; }
:lang(ja) .ragree__tip{ word-break:normal; overflow-wrap:anywhere; }
.ragree__help:hover .ragree__tip, .ragree__help.open .ragree__tip{ opacity:1; visibility:visible; }
.ragree__tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#fff; }
/* disabled submit */
.review__actions .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

@media (max-width:560px){
  .review__head{ padding:22px 18px 16px; }
  .review__body{ padding:16px 18px; }
  .review__actions{ padding:16px 18px 20px; }
  .review__termnote{ margin-left:0; margin-right:0; }
  .review__error{ margin-left:18px; margin-right:18px; }
  /* modal fits the phone and only its body scrolls (background stays put) */
  .confirm{ padding:14px; align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .confirm__card{ max-height:calc(100dvh - 28px); display:flex; flex-direction:column; }
  .confirm__card--wide{ max-height:calc(100dvh - 28px); }
  .review__body{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  /* review rows stack so long addresses / hotel names never overflow */
  .rrow{ grid-template-columns:1fr; gap:3px; padding:10px 2px; }
  .rrow dd{ font-size:.94rem; overflow-wrap:anywhere; }
  :lang(ja) .rrow dd{ word-break:normal; overflow-wrap:anywhere; }
  .review__refline{ flex-wrap:wrap; }
  .review__refline b{ overflow-wrap:anywhere; }
  /* kill any left/right drift: body scrolls vertically only, children may shrink */
  .review__body{ overflow-x:hidden; }
  .review__body *{ min-width:0; max-width:100%; }
  .confirm__card, .confirm__card--wide{ overflow-x:hidden; }
  .review__head, .review__actions{ max-width:100%; }
  .review__head *{ min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .rrow dt, .rrow dd{ overflow-wrap:anywhere; word-break:break-word; }
  .sline{ gap:10px; }
  .sline .v{ overflow-wrap:anywhere; }
}

/* select-style picker input (airline): chevron + full-width tap affordance */
.field--pick{ position:relative; }
.input--pick{ width:100%; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2315315E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:20px 20px; }
.input--pick::-webkit-calendar-picker-indicator{ opacity:0; position:absolute; right:0; top:0; width:44px; height:100%; cursor:pointer; }
@media (max-width:939px){
  .input--pick{ min-height:54px; font-size:1rem; padding-right:48px; background-position:right 16px center; background-size:22px 22px; }
}

/* error state */
.field.invalid .input, .field.invalid .select, .field.invalid .textarea{ border-color:#D26A5B; box-shadow:0 0 0 3px rgba(210,106,91,.14); }
.err-msg{ color:#C0503F; font-size:.8rem; font-weight:600; display:none; }
.field.invalid .err-msg{ display:block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:620px){
  .frow.two{ grid-template-columns:1fr 1fr; }
  .choice.three{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:940px){
  .co-grid{ grid-template-columns:1.7fr 1fr; gap:34px; align-items:start; }
  .summary{ position:sticky; top:88px; }
  .cobar{ display:none !important; }
  .co-submit{ display:none; }
}
@media (max-width:939px){
  /* extra clearance so the sticky CTA never sits on the last field (bar ≈78px + safe-area) */
  .co-grid{ padding-bottom:112px; }
  /* summary is a read-only recap, not an input — hide on mobile; the sticky bar carries price + CTA */
  .summary{ display:none; }
  .co-submit{ display:none; }

  /* HORIZONTAL OVERFLOW FIX (Japanese):
     Long JP note/hint sentences use word-break:keep-all for tidy wrapping on the
     wide desktop column. When the form stacks to one narrow column, keep-all makes
     a whole CJK sentence unbreakable, forcing the form wider than the phone screen.
     Allow natural CJK wrapping when stacked, and let grid/flex items shrink. */
  :lang(ja) .notice span,
  :lang(ja) .termbox__note,
  :lang(ja) .capguide__lead,
  :lang(ja) .capguide__note,
  :lang(ja) .capguide__flat,
  :lang(ja) .consent-note,
  :lang(ja) .consent .txt,
  :lang(ja) .review__sub,
  :lang(ja) .review__error,
  :lang(ja) .review__termnote,
  :lang(ja) .ac__picked-addr,
  :lang(ja) .hint,
  :lang(ja) .field .err-msg{
    word-break:normal; line-break:auto; overflow-wrap:anywhere;
  }
  /* grid/flex children must be allowed to shrink below their content min-width */
  .co-grid, .co-form, .fcard, .fcard__h, .fcard__b,
  .field, .frow, .choice, .lug, .capguide, .addr, .termbox, .ac, .input-group{ min-width:0; }

  /* iOS date/time inputs ignore width:100% and carry an intrinsic min-width with
     the native picker, so they overflow their field on real iPhones (desktop
     Chromium shrinks them fine, which is why it isn't visible in preview).
     Reset the native appearance on mobile so they obey the column width. */
  .input[type="date"], .input[type="time"]{
    -webkit-appearance:none; appearance:none;
    width:100%; min-width:0; max-width:100%;
  }
}
@media (max-width:620px){
  /* progress tracker: tidy 2×2 grid, no dangling connector lines */
  .steps-rail{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:18px; }
  .steps-rail .bar{ display:none; }
  .steps-rail .s{ width:100%; }
  .steps-rail .lbl{ white-space:normal; line-height:1.2; }
}

/* ============================================================
   Squared-card design — site-wide (matches station.html)
   Card / box / field containers get sharp corners; circles,
   pills and small icon tiles keep their radius.
   ============================================================ */
.fcard, .input, .select, .textarea,
.input-group .pfx, .input-group .input,
.ac__list, .termbox, .addr, .choice label,
.capguide, .lug, .stepper, .consent,
.summary, .optbox, .optacc__item,
.confirm__card, .confirm__ref,
.notice, .review__refline, .review__error, .rsec{
  border-radius:0 !important;
}