/* ============================================================
   Chifbay — the booking flow.
   Shared by book.html, book-day.html and book-sunset.html.
   Loads after peak.css and reuses its palette, fonts and buttons.
   ============================================================ */

/* ------------------------------------------------------------- the header
   Deliberately short. The visitor came here to book, so the picker has to be
   on screen without scrolling — the photo sells, it does not fill the page. */
.bkhero{position:relative;color:var(--on-photo);min-height:330px;display:flex;align-items:flex-end;overflow:hidden;
  margin-top:0;padding-top:120px}
.bkhero .bkhbg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.04)}
.bkhero .bkhov{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--scrim-rgb),.72) 0%,rgba(var(--scrim-rgb),.42) 38%,rgba(var(--scrim-rgb),.86) 78%,var(--ink) 100%)}
.bkhc{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px 42px}
.bkhc h1{font-size:clamp(2.3rem,5.4vw,4rem);margin:14px 0 16px}
.bkhc h1 em{font-style:italic;background:linear-gradient(130deg,#e0be7a,#f0c96a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bkhc p{max-width:56ch;color:var(--on-photo-dim);font-weight:300;font-size:clamp(.92rem,1.4vw,1.05rem);
  line-height:1.75;margin:0}
.bkkick{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--photo-accent);display:inline-flex;align-items:center;gap:12px}
.bkkick::before{content:"";width:28px;height:1px;background:var(--photo-accent);opacity:.7}

/* Only ever shown when the URL carries ?test=<token>. Loud on purpose. */
.bktest{margin:0 0 26px;padding:13px 18px;border-radius:var(--radius);font-size:.86rem;
  line-height:1.6;background:rgba(212,84,84,.12);border:1px solid rgba(212,84,84,.45);
  color:#ffc9c9;font-family:'Space Mono',monospace;letter-spacing:.03em}

/* ------------------------------------------------------------------ layout */
.bkwrap{max-width:1120px;margin:0 auto;padding:44px 32px 90px}
.bksteps{display:flex;gap:8px;justify-content:center;margin-bottom:34px}
.bkdot{width:38px;height:3px;border-radius:2px;background:rgba(var(--edge-rgb),.14);transition:background .3s}
.bkdot.now{background:var(--teal)}
.bkdot.done{background:rgba(var(--teal-rgb),.42)}
.bkstep{display:none}
.bkstep.on{display:block;animation:bkin .35s ease both}
@keyframes bkin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bkh{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.6rem,3.2vw,2.3rem);
  margin:0 0 6px;font-weight:400;letter-spacing:-.02em}
.bksub{color:var(--muted);margin:0 0 26px;font-size:.94rem}

/* the display-currency picker, sitting beside the step-1 heading */
.bkcurrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bkcurrow .bkh{margin-bottom:0}
.bkcurpick{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-top:6px}
.bkcurpick span{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bkcurpick select{padding:8px 11px;border-radius:var(--radius-sm,8px);background:rgba(var(--edge-rgb),.05);
  border:1px solid var(--hair-strong);color:var(--paper);font:inherit;font-size:.82rem}
.bkcurpick select:focus{outline:none;border-color:var(--teal)}
.bkcurpick select option{background:var(--mid);color:var(--paper)}
@media(max-width:560px){.bkcurrow{flex-direction:column;align-items:stretch}}

/* the converted estimate next to a real EUR price — never the same size or
   weight as the real number, and always carries its own "≈" so it can never
   be mistaken for a second real price. */
.bkfxest{font-family:'Space Mono',monospace;font-size:.6em;font-weight:400;
  color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.bkload{color:var(--muted);font-size:.92rem;padding:26px 0}
.bkload a{color:var(--teal)}

/* --------------------------------------------------------------- the map
   A drawing, not a real map: the stops sit at their true sailing distance
   from Funchal, so the spacing on screen matches the spacing on the water. */
.bkmapbox{margin:0 0 40px;padding:22px 24px 18px;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#0d2035,#081625);
  border:1px solid var(--hair)}
.bkmaph{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.bkmapc{color:var(--muted);font-size:.86rem;line-height:1.7;max-width:74ch;margin:0 0 6px}
.bkmapsvg{width:100%;height:auto;display:block}
.bkmland{fill:#14304a;stroke:rgba(224,190,122,.4);stroke-width:1.2}
.bkmfar{fill:#0e2438}
.bkmwave{fill:none;stroke:rgba(224,190,122,.09);stroke-width:1.4}
.bkmtrack{fill:none;stroke:var(--photo-accent);stroke-width:2.4;stroke-dasharray:9 7;stroke-linecap:round}
.bkmtrack.dim{stroke:rgba(255,255,255,.13);stroke-dasharray:3 8}
.bkmtick{stroke:rgba(255,255,255,.16);stroke-width:1}
.bkmedge{fill:#7a9aaa;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55}
.bkms .bkmdot{fill:#0b1c2e;stroke:rgba(255,255,255,.24);stroke-width:2}
.bkms .bkmn{fill:rgba(240,245,244,.32);font-family:'Inter',sans-serif;font-size:13.5px;
  text-anchor:middle;font-weight:500}
.bkms .bkmc{fill:rgba(122,154,170,.42);font-family:'Space Mono',monospace;font-size:10px;
  text-anchor:middle;letter-spacing:.04em}
.bkms.on .bkmdot{fill:var(--photo-accent);stroke:rgba(224,190,122,.3);stroke-width:5}
.bkms.on .bkmn{fill:#f0f5f4}
/* Same dim/gold split as the dot and label above — a place icon per stop
   (fisherman at Câmara de Lobos, the cliff at Cabo Girão…), same style as
   the itinerary timeline's data-ic set. */
.bkmicon path{fill:none;stroke:#7a9aaa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.bkmicon .eye{fill:#7a9aaa;opacity:.55}
.bkms.on .bkmicon path{stroke:#e0be7a;opacity:1}

/* --------------------------------------------------------- reassurance
   Answers the questions guests keep asking on WhatsApp AFTER paying — boat
   model, skippers, bathroom, food — before they ever have to ask. Real
   Chifbay photos, not stock, so "is it really like Instagram" answers
   itself. Page tokens (not the map's fixed navy) so this flips with the
   light/dark theme like the rest of the funnel. */
.bkreassure{display:grid;grid-template-columns:1fr 1.3fr 1fr;margin:0 0 40px;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hair);background:var(--mid)}
.bkr-photo{background-size:cover;background-position:center;min-height:220px}
.bkr-body{padding:26px 28px}
.bkr-kick{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin-bottom:14px;display:block}
.bkr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bkr-list li{display:flex;gap:10px;font-size:.88rem;line-height:1.55;color:var(--paper-dim)}
.bkr-list svg{flex-shrink:0;width:17px;height:17px;margin-top:2px;stroke:var(--teal);
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bkr-list strong{color:var(--paper);font-weight:600}
@media(max-width:860px){.bkreassure{grid-template-columns:1fr}.bkr-photo{min-height:170px}}
.bkms.on .bkmicon .eye{fill:#e0be7a;opacity:1}
.bkms.on .bkmc{fill:#7a9aaa}
.bkms.on .bkmtick{stroke:rgba(224,190,122,.32)}
.bkms.turn .bkmring{fill:none;stroke:var(--photo-accent);stroke-width:1.4;opacity:.5}
.bkms.turn .bkmc{fill:var(--photo-accent)}
/* Under 760px the SVG labels would render at about 6px. Show the list instead. */
.bkrl{list-style:none;margin:6px 0 0;padding:0;display:none}
.bkrl li{position:relative;padding:0 0 16px 26px;color:var(--paper)}
.bkrl li::before{content:"";position:absolute;left:3px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--teal)}
.bkrl li::after{content:"";position:absolute;left:7px;top:20px;bottom:0;width:1px;
  background:rgba(var(--teal-rgb),.28)}
.bkrl li:last-child{padding-bottom:0}
.bkrl li:last-child::after{display:none}
.bkrl li b{display:block;font-weight:500;font-size:.95rem}
.bkrl li span{display:block;color:var(--muted);font-size:.78rem;font-family:'Space Mono',monospace;
  letter-spacing:.05em}
.bkrl li.turn b{color:var(--teal)}

/* ------------------------------------------------------------- the choices */
/* Two across, always. Three would leave the fourth option stranded on its own
   row on the page that sells all four. */
.bkcards{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:800px){.bkcards{grid-template-columns:1fr}}
.bkcard{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  background:rgba(var(--edge-rgb),.03);border:1px solid var(--hair);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.bkcard:hover{border-color:rgba(var(--teal-rgb),.45);transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(var(--shadow-rgb),.35)}
.bkcard.sel{border-color:var(--teal);background:rgba(var(--teal-rgb),.06)}
.bkcpic{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;background:var(--mid)}
.bkcpic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bkcard:hover .bkcpic img{transform:scale(1.05)}
.bkcdur{position:absolute;left:14px;bottom:14px;padding:6px 13px;border-radius:100px;
  background:rgba(var(--scrim-rgb),.74);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
  font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.14em;color:var(--on-photo)}
.bkcbody{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.bkck{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal)}
.bkcard h3{font-size:1.5rem;margin:9px 0 10px}
.bkcard>.bkcbody>p{color:var(--paper-dim);font-size:.92rem;line-height:1.66;margin:0 0 16px;font-weight:300}

/* the route, as a line of place names with the turning point in gold */
.bkrt{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px 0 14px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:16px}
.bkrtp{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.05em;color:var(--muted)}
.bkrtp.turn{color:var(--teal)}
.bkrta{color:rgba(var(--teal-rgb),.4);font-size:.8rem}

.bkcl{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.bkcl li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.55;
  color:var(--paper-dim)}
.bkcl svg{width:15px;height:15px;flex-shrink:0;margin-top:4px;fill:none;stroke:var(--teal);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bkcfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap}
.bkprice{font-family:'Playfair Display',Georgia,serif;font-size:1.85rem;display:flex;
  align-items:baseline;gap:8px;line-height:1}
.bkprice em{font-style:normal;font-size:.62rem;color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;font-family:'Space Mono',monospace}
.bkcmeta{display:block;margin-top:14px;color:var(--muted);font-size:.76rem;
  font-family:'Space Mono',monospace;letter-spacing:.04em}

/* --------------------------------------------------------------- buttons */
.bkbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.87rem;border-radius:100px;
  padding:13px 26px;background:var(--teal);color:var(--on-accent);
  transition:transform .2s,box-shadow .2s,opacity .2s}
.bkbtn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px rgba(var(--teal-rgb),.34)}
.bkbtn:disabled{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none}
.bkbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.bkbtn.bksm{padding:11px 20px;font-size:.82rem}
.bkback{background:none;border:0;color:var(--muted);font:inherit;font-size:.86rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:6px 0}
.bkback:hover{color:var(--paper)}
.bkactions{display:flex;gap:16px;align-items:center;margin-top:28px;flex-wrap:wrap}

/* ---------------------------------------------------- what they picked */
.bkpicked{display:flex;align-items:center;gap:18px;padding:14px 18px;border-radius:var(--radius);
  background:rgba(var(--teal-rgb),.06);border:1px solid rgba(var(--teal-rgb),.24);margin-bottom:26px}
.bkpicked img{width:74px;height:56px;object-fit:cover;border-radius:9px;flex-shrink:0}
.bkpicked strong{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;
  font-weight:400;margin-top:3px}
.bkpicked .bkpm{display:block;color:var(--muted);font-size:.8rem;font-family:'Space Mono',monospace;
  margin-top:3px}
.bkpicked .bkback{margin-left:auto;flex-shrink:0}

/* ------------------------------------------------------------- calendar */
.bkcalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bkcalhead strong{font-family:'Playfair Display',Georgia,serif;font-size:1.18rem;font-weight:400;
  text-transform:capitalize}
.bknav{width:38px;height:38px;border-radius:50%;background:rgba(var(--edge-rgb),.05);
  border:1px solid var(--hair-strong);color:var(--paper);font-size:1.1rem;cursor:pointer;
  line-height:1;transition:border-color .2s}
.bknav:hover{border-color:var(--teal)}
#bkcal{max-width:560px}
.bkgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bkdow{text-align:center;font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.bkday{position:relative;min-height:46px;padding:12px 0 16px;display:flex;align-items:center;
  justify-content:center;border-radius:10px;font-size:.92rem;background:rgba(var(--edge-rgb),.045);
  border:1px solid transparent;color:var(--paper);font-family:inherit;cursor:pointer;transition:.2s}
.bkday i{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--teal)}
.bkday:hover{border-color:rgba(var(--teal-rgb),.55)}
.bkday.sel{background:var(--teal);color:var(--on-accent);font-weight:600}
.bkday.sel i{background:var(--ink)}
.bkday.off{opacity:.18;background:transparent;cursor:default;border-color:transparent}
.bkhint{color:var(--muted);font-size:.9rem;margin:22px 0 10px}
.bktimerow{display:flex;flex-wrap:wrap;gap:10px}
.bktime{padding:13px 28px;border-radius:10px;background:rgba(var(--edge-rgb),.05);
  border:1px solid var(--hair-strong);color:var(--paper);font:inherit;font-size:1rem;cursor:pointer;
  transition:.2s}
.bktime:hover{border-color:var(--teal)}
.bktime.sel{background:var(--teal);color:var(--on-accent);border-color:var(--teal);font-weight:600}

/* ------------------------------------------------------------- the form */
.bksumbox{padding:20px 22px;border-radius:var(--radius);background:rgba(var(--teal-rgb),.07);
  border:1px solid rgba(var(--teal-rgb),.28);display:grid;gap:5px;margin-bottom:26px}
.bksumbox strong{font-family:'Playfair Display',Georgia,serif;font-size:1.2rem;font-weight:400}
.bksumbox span{font-size:.88rem;color:var(--paper-dim)}
.bksumprice{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem!important;
  color:var(--teal)!important;margin-top:6px}
.bkfields{display:grid;gap:16px;grid-template-columns:1fr 1fr;max-width:720px}
.bkfield{display:flex;flex-direction:column;gap:7px}
.bkfield.wide{grid-column:1/-1}
.bkfield label{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.bkfield input,.bkfield select{padding:13px 15px;border-radius:10px;background:rgba(var(--edge-rgb),.05);
  border:1px solid var(--hair-strong);color:var(--paper);font:inherit;font-size:.98rem}
.bkfield input:focus,.bkfield select:focus{outline:none;border-color:var(--teal)}
.bkfield select option{background:var(--mid);color:var(--paper)}

/* the country-code select and the number input read as one control */
.bkphonerow{display:flex;gap:8px}
/* Flag + full dial code only now — nothing left long enough to need
   truncating, but the overflow rules stay as a safety net regardless. */
.bkphonerow #bkcc{flex:0 0 auto;width:92px;padding-right:6px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bkphonerow #bkphone{flex:1 1 auto;min-width:0}
/* Long option text ("🇵🇹 +351 Portugal") is what makes the list searchable
   and accessible; the CLOSED box stays a compact chip by clipping to an
   ellipsis. Flag and code come first in the string precisely so the country
   name is what gets clipped, not the part that actually identifies it. */
@media(max-width:640px){.bkphonerow #bkcc{width:86px}}
.bkmsg{display:none;margin-top:16px;padding:13px 16px;border-radius:10px;font-size:.9rem;max-width:720px}
.bkmsg.on{display:block}
.bkmsg.err{background:rgba(212,84,84,.12);border:1px solid rgba(212,84,84,.4);color:#ffc9c9}
.bksafe{color:var(--muted);font-size:.8rem;margin-top:20px;line-height:1.7;max-width:64ch}
#bkstripe{min-height:520px;border-radius:var(--radius);overflow:hidden}

/* ------------------------------------------------------------ under 760px */
@media(max-width:760px){
  .bkmapsvg{display:none}
  .bkrl{display:block}
  .bkmapbox{padding:20px}
}
@media(max-width:640px){
  /* clears the announcement bar plus the fixed nav */
  .bkhero{min-height:0;padding-top:132px}
  .bkhc{padding:0 18px 30px}
  .bkwrap{padding:30px 18px 70px}
  .bkcards{grid-template-columns:1fr}
  .bkfields{grid-template-columns:1fr}
  .bkcbody{padding:20px}
  .bkcfoot{flex-direction:column;align-items:stretch}
  .bkcfoot .bkbtn{width:100%}
  .bkprice{justify-content:flex-start}
  .bkpicked{flex-wrap:wrap;gap:12px}
  .bkpicked .bkback{margin-left:0;width:100%;text-align:left}
  .bkdot{width:30px}
  .bktime{flex:1 1 132px;text-align:center;padding:14px 12px}
  .bkday{min-height:42px;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  .bkstep.on{animation:none}
  .bkcard,.bkcpic img,.bkbtn{transition:none}
  .bkcard:hover{transform:none}
}

/* Light mode: pale red on pale pink is unreadable, so the warnings darken. */
:root[data-theme="light"] .bktest,
:root[data-theme="light"] .bkmsg.err{color:#8c1d1d;background:rgba(212,84,84,.1)}