/* Ish Travel – book page styles.
 * Generated from phase 2/design/book.html (approved designs, 24 Oct 2026).
 * Edit here from now on; the design HTML is no longer the source. */

.hero h1{font-size:clamp(46px, 7.4vw, 88px); max-width:13ch; line-height:1.02}

.hero__intro{font-size:19px; max-width:46ch; text-shadow:0 1px 14px rgba(0,0,0,.55)}

.hero h1,.hero__eyebrow{text-shadow:0 2px 24px rgba(0,0,0,.3)}

.dest__visual{position:relative; max-width:500px; width:100%; justify-self:center; display:grid; gap:22px}

.dest__visual svg{width:100%; height:auto; display:block; overflow:visible}

.dest__photo{transition:opacity .5s}

.dest__name{font:300 clamp(30px,3.4vw,40px)/1 var(--serif); fill:#fff; font-style:italic}

.dest__sub{font:600 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; fill:#FFD9A8}

.months{display:grid; gap:10px}

.months__head{display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}

.months__head b{color:var(--fg); font-weight:600}

.months ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12,1fr); gap:4px}

.months li{text-align:center; font:600 11px/1 var(--sans); padding:9px 0; border-radius:999px; background:var(--fill); color:var(--muted); transition:background .35s, color .35s}

.months li.on{background:var(--red); color:#fff}

.dest__list a{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 18px; padding:18px 4px; text-decoration:none; transition:padding .3s}

.dest__list b{font:300 clamp(26px,3vw,32px)/1.1 var(--serif); transition:color .3s}

.home-tag{font:600 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--red); border:1px solid currentColor; border-radius:999px; padding:4px 8px; margin-left:10px; vertical-align:middle; font-style:normal}

@media (max-width:820px){
  .topbar__l a:not(:first-child){display:none}
  .qs{grid-template-columns:1fr 1fr; border-radius:26px}
  .qs__f{border-right:0; border-bottom:1px solid rgba(18,17,15,.12)}
  .qs__f:first-child{grid-column:1 / -1}
  .qs__f:nth-child(3){border-bottom:1px solid rgba(18,17,15,.12)}
  .qs__f:focus-within{border-radius:18px}
  .qs .btn{grid-column:1 / -1; justify-content:center; margin-top:8px}
  .ways,.dest,.cta,.news{grid-template-columns:1fr}
  .way{min-height:440px}
  .way__body{padding:26px}
  .dest__visual{max-width:400px}
  .cta::after{display:none}
}

@media (max-width:560px){
  .topbar__r a:not(.heart){display:none}
  .wa span{display:none}
  .wa{padding:16px}
  .months li{font-size:9px}
  .hdr__bar{height:66px}
  .logo small{display:none}
  .hero .wrap{padding-block:120px 28px}
  .hero__intro{font-size:17px}
  .exp{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .why div,.why div + div{padding-left:0; border-left:0; border-bottom:1px solid var(--line); padding-bottom:24px}
  .dep{grid-template-columns:1fr auto; grid-template-areas:"d p" "t t" "s b"; gap:12px}
  .ftr__top{grid-template-columns:1fr}
  .news form{flex-direction:column; border-radius:24px}
  .news input{padding:14px 16px}
  .news .btn{justify-content:center}
  .head{margin-bottom:30px}
}

.bhdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--bg); border-bottom:1px solid var(--line)}

.bhdr .wrap{display:flex; align-items:center; gap:18px; height:72px}

.bhdr__secure{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--muted); margin-left:auto}

.bhdr__secure svg{color:var(--st-tea)}

.hold{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:9px 14px; background:var(--bg-alt); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums}

.hold svg{color:var(--st-ocean)}

.hold b{font-weight:700}

.hold.warn{background:color-mix(in srgb, var(--st-turmeric) 14%, var(--bg)); color:var(--st-turmeric)}

.hold.warn svg{color:inherit}

.hold.gone{background:color-mix(in srgb, var(--red-deep) 12%, var(--bg)); color:var(--red-deep)}

.steps-nav{border-bottom:1px solid var(--line); background:var(--bg)}

.steps-nav ol{list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); counter-reset:st}

.steps-nav li{position:relative}

.steps-nav button{width:100%; background:none; border:0; padding:16px 6px 14px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:600; color:var(--muted); cursor:default; border-bottom:2px solid transparent}

.steps-nav button i{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:12px; flex:none}

.steps-nav li.done button{color:var(--fg); cursor:pointer}

.steps-nav li.done button i{background:var(--fg); border-color:var(--fg); color:var(--bg)}

.steps-nav li.now button{color:var(--fg); border-color:var(--red)}

.steps-nav li.now button i{background:var(--red); border-color:var(--red); color:#fff}

.steps-nav li.done button:hover span{color:var(--red)}

.bgrid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(28px,4vw,60px); align-items:start; padding-block:40px 120px}

.step{padding-block:0}

.step[hidden]{display:none}

.step > header{margin-bottom:26px}

.step h1{font-size:clamp(36px,4.4vw,48px)}

.step h1 em{color:var(--red)}

.step > header p{color:var(--muted); margin-top:10px; max-width:60ch}

.panel{border:1px solid var(--line); border-radius:22px; background:var(--card); padding:clamp(20px,3vw,30px); display:grid; gap:20px}

.panel + .panel{margin-top:18px}

.panel__head{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}

.panel__head h2{font-size:26px; font-weight:400}

.panel__head span{font-size:13px; color:var(--muted)}

.row{display:grid; gap:14px 16px; grid-template-columns:repeat(2, minmax(0,1fr))}

.row--3{grid-template-columns:110px minmax(0,1fr) minmax(0,1fr)}

.row--4{grid-template-columns:repeat(4, minmax(0,1fr))}

.f{display:grid; gap:6px; align-content:start; min-width:0}

.f > label,.f > .flabel{font-size:13px; font-weight:600}

.f > label small,.f > .flabel small{font-weight:400; color:var(--muted)}

.f input:not([type=checkbox]):not([type=radio]):not([type=file]),.f select,.f textarea{width:100%; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:12px 14px; font-size:15px; transition:border-color .2s, box-shadow .2s}

.f select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}

.f textarea{min-height:90px; resize:vertical}

.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent)}

.f.bad input,.f.bad select{border-color:var(--red-deep)}

.err{display:none; font-size:13px; color:var(--red-deep); font-weight:600}

.f.bad .err{display:block}

.hint{font-size:12.5px; color:var(--muted)}

.inline-chk{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer}

.inline-chk input{accent-color:var(--red); width:16px; height:16px}

.phone{display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px}

.notice{display:flex; gap:14px; align-items:flex-start; border-radius:16px; padding:14px 16px; font-size:14px; background:color-mix(in srgb, var(--st-ocean) 9%, var(--card)); border:1px solid color-mix(in srgb, var(--st-ocean) 30%, transparent)}

.notice svg{color:var(--st-ocean); flex:none; margin-top:2px}

.notice b{display:block}

.notice a,.notice button.linkbtn{color:var(--st-ocean); font-weight:700}

.notice--warn{background:color-mix(in srgb, var(--st-turmeric) 9%, var(--card)); border-color:color-mix(in srgb, var(--st-turmeric) 35%, transparent)}

.notice--warn svg{color:var(--st-turmeric)}

.notice--ok{background:color-mix(in srgb, var(--st-tea) 9%, var(--card)); border-color:color-mix(in srgb, var(--st-tea) 35%, transparent)}

.notice--ok svg{color:var(--st-tea)}

.linkbtn{background:none; border:0; padding:0; font-weight:600; color:var(--red); cursor:pointer; font-size:inherit}

.trav-tag{display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

.code{display:flex; gap:8px}

.code input{flex:1; min-width:0}

.code .btn{padding:12px 18px; font-size:14px}

.code-msg{font-size:13px; font-weight:600}

.code-msg.ok{color:var(--st-tea)}

.code-msg.no{color:var(--red-deep)}

.from-link{font:600 11px/1 var(--sans); letter-spacing:.06em; color:var(--st-tea); border:1px solid currentColor; border-radius:999px; padding:3px 8px; margin-left:6px}

.opts{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr))}

.opt{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px; align-items:start; border:1.5px solid var(--line); border-radius:18px; padding:16px 18px; cursor:pointer; background:var(--bg); transition:border-color .2s, background .2s}

.opt:hover{border-color:color-mix(in srgb, var(--fg) 40%, transparent)}

.opt input{margin:3px 0 0; accent-color:var(--red); width:18px; height:18px; grid-row:1 / span 2}

.opt b{font-size:15px}

.opt span{grid-column:2; font-size:13px; color:var(--muted)}

.opt em{font-style:normal; font-weight:700; font-size:14px; grid-row:1; grid-column:3; white-space:nowrap; font-variant-numeric:tabular-nums}

.opt:has(input:checked){border-color:var(--red); background:color-mix(in srgb, var(--red) 4%, var(--card))}

.opt--wide{grid-column:1 / -1}

.opt--off{opacity:.5; cursor:not-allowed}

.skip{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.ftrav{display:flex; flex-wrap:wrap; gap:8px 18px}

.drop-zone{border:1.5px dashed var(--line); border-radius:16px; padding:18px; text-align:center; font-size:14px; color:var(--muted)}

.drop-zone b{color:var(--fg)}

.rev-sec{border:1px solid var(--line); border-radius:18px; padding:18px 20px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; background:var(--card)}

.rev-sec + .rev-sec{margin-top:10px}

.rev-sec h3{font-size:20px; font-weight:400}

.rev-sec dl{grid-column:1 / -1; margin:6px 0 0; display:grid; grid-template-columns:170px minmax(0,1fr); gap:6px 16px; font-size:14px}

.rev-sec dt{color:var(--muted)}

.rev-sec dd{margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere}

.terms{display:grid; gap:4px}

.term{display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:15px; line-height:1.55}

.term:last-child{border-bottom:0}

.term input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--red)}

.term a{color:var(--red); font-weight:600}

.term small{display:block; font-size:12.5px; color:var(--muted); margin-top:4px}

.term .pay-phrase{font-weight:700}

.fineprint{font-size:13px; color:var(--muted); display:grid; gap:6px}

.fineprint a{color:var(--fg); font-weight:600}

.tick-count{font-size:13px; font-weight:600; color:var(--muted)}

.gate{border-radius:18px; border:1px solid var(--line); padding:18px; display:grid; gap:12px; background:var(--bg)}

.gate__logos{display:flex; gap:8px; flex-wrap:wrap}

.gate__logos span{border:1px solid var(--line); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; letter-spacing:.06em; background:var(--card)}

.actions{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap}

.actions .btn[disabled]{opacity:.45; cursor:not-allowed}

.btn--big{padding:17px 28px; font-size:16px}

.sum{position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden; box-shadow:0 30px 60px -40px rgba(18,17,15,.35)}

.sum__img{position:relative; height:150px}

.sum__img img{width:100%; height:100%; object-fit:cover}

.sum__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(10,9,8,.7))}

.sum__img div{position:absolute; left:20px; right:20px; bottom:14px; z-index:1; color:#fff}

.sum__img small{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#FFD9A8}

.sum__img b{display:block; font:400 26px/1.1 var(--serif); margin-top:6px}

.sum__body{padding:20px; display:grid; gap:16px}

.sum__facts{display:grid; gap:8px; font-size:14px}

.sum__facts div{display:flex; gap:10px; align-items:center}

.sum__facts svg{color:var(--muted); flex:none}

.lines{display:grid; gap:9px; font-size:14px; border-top:1px solid var(--line); padding-top:16px}

.lines div{display:flex; justify-content:space-between; gap:12px}

.lines span{color:var(--muted)}

.lines b{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}

.lines .disc b{color:var(--st-tea)}

.lines .tot{border-top:1px solid var(--line); padding-top:10px; margin-top:4px; font-size:15px}

.lines .tot span{color:var(--fg); font-weight:600}

.paybox{border-radius:18px; background:var(--bg-alt); padding:16px; display:grid; gap:10px}

.payseg{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--fill); border-radius:999px; padding:4px}

.payseg button{border:0; background:transparent; border-radius:999px; padding:9px 8px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted)}

.payseg button[aria-pressed="true"]{background:var(--card); color:var(--fg); box-shadow:0 4px 12px -8px rgba(18,17,15,.5)}

.payseg button:disabled{cursor:not-allowed}

.due{display:flex; justify-content:space-between; align-items:baseline; gap:10px}

.due span{font-size:14px; font-weight:600}

.due b{font:400 34px/1 var(--serif); font-variant-numeric:tabular-nums}

.later{display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}

.sum__rules{font-size:12.5px; color:var(--muted); display:grid; gap:6px}

.sum__rules div{display:flex; gap:8px; align-items:flex-start}

.sum__rules svg{flex:none; margin-top:2px}

.sum__help{font-size:13px; color:var(--muted); text-align:center; border-top:1px solid var(--line); padding-top:14px}

.msum{display:none}

.conf{max-width:860px; margin:0 auto; padding-block:50px 120px; display:grid; gap:24px}

.conf__hero{text-align:center; display:grid; justify-items:center; gap:14px}

.conf__mark{width:84px; height:110px; position:relative}

.conf__mark svg{width:100%; height:100%}

.conf__mark path.d{fill:var(--red); transform-origin:50% 60%; animation:popin .7s cubic-bezier(.2,.9,.3,1.3) both}

.conf__mark path.c{fill:none; stroke:#fff; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:tick .5s .55s ease forwards}

@keyframes popin{from{transform:scale(.3); opacity:0}}

@keyframes tick{to{stroke-dashoffset:0}}

.conf h1{font-size:clamp(40px,5.6vw,60px)}

.conf h1 em{color:var(--red)}

.conf__ref{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; font-size:15px}

.conf__ref b{font:400 24px/1 var(--serif); letter-spacing:.02em}

.conf__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}

.conf__grid .panel{gap:12px}

.conf__grid h2{font-size:22px; font-weight:400}

.next{list-style:none; margin:0; padding:0; display:grid; gap:0}

.next li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px}

.next li:last-child{border-bottom:0}

.next li span small{display:block; color:var(--muted); font-size:12.5px}

.next li > i{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:12px}

.next li.ok > i{background:var(--st-tea); border-color:var(--st-tea); color:#fff}

.next a{font-weight:600; color:var(--red); text-decoration:none; font-size:13px; white-space:nowrap}

.conf__acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.bftr{border-top:1px solid var(--line); padding-block:22px; font-size:13px; color:var(--muted)}

.bftr .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}

.bftr nav{display:flex; gap:16px; flex-wrap:wrap}

.bftr a{text-decoration:none}

.demo{position:fixed; left:calc(16px + env(safe-area-inset-left,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:90; background:var(--fg); color:var(--bg); border-radius:14px; padding:10px 12px; font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:calc(100vw - 32px); box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}

.demo b{font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:10px; opacity:.7}

.demo button{background:transparent; color:inherit; border:1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer}

.demo button:hover{background:color-mix(in srgb, var(--bg) 15%, transparent)}

@media (max-width:1060px){
  .bgrid{grid-template-columns:1fr; padding-top:0}
  .sum{display:none}
  .msum{display:block; position:sticky; top:calc(72px + env(safe-area-inset-top,0px)); z-index:45; background:var(--card); border-bottom:1px solid var(--line); margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); margin-bottom:24px}
  .msum > button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px max(20px, env(safe-area-inset-right,0px)) 14px max(20px, env(safe-area-inset-left,0px)); background:none; border:0; cursor:pointer; text-align:left}
  .msum > button small{display:block; font-size:12px; color:var(--muted)}
  .msum > button b{font:400 24px/1 var(--serif)}
  .msum > button span:last-child{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600}
  .msum > button svg{transition:transform .3s}
  .msum.open > button svg{transform:rotate(180deg)}
  .msum__body{display:none; padding:0 max(20px, env(safe-area-inset-right,0px)) 18px max(20px, env(safe-area-inset-left,0px)); max-height:60vh; overflow:auto}
  .msum.open .msum__body{display:grid; gap:14px}
  .steps-nav button span{display:none}
  .steps-nav li.now button span{display:inline}
  .steps-nav ol{grid-template-columns:repeat(6, auto); justify-content:space-between}
}

@media (max-width:680px){
  .row,.row--4,.opts,.skip,.conf__grid{grid-template-columns:1fr}
  .row--3{grid-template-columns:100px minmax(0,1fr)}
  .row--3 > :last-child{grid-column:1 / -1}
  .bhdr__secure span,.bhdr .logo span{display:none}
  .bhdr .wrap{height:64px}
  .msum{top:calc(64px + env(safe-area-inset-top,0px))}
  .rev-sec dl{grid-template-columns:1fr; gap:2px}
  .rev-sec dd{margin-bottom:8px}
  .actions{flex-direction:column-reverse; align-items:stretch}
  .actions .btn{justify-content:center}
  .wa span{display:none}
  .wa{padding:16px; bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .demo{right:auto}
  .demo:not(.open) button{display:none}
  .demo b{cursor:pointer}
  .demo:not(.open) b::after{content:" ▸"}
}