/* assets/booking.css — booking with Zopi: the day-and-time picker (assets/booking.js), used on the website
   (book.php, dark), a booking's private link (booking.php, light or dark) and the portal. Colours come from
   the page around it, so it fits each. */
.bkp{--bkp-line:rgba(127,140,160,.38);--bkp-acc:#00C2FF;--bkp-on:#041320}
.bkp-h{font-weight:600;font-size:.92rem;margin:.2rem 0 .55rem}
.bkp-days{display:flex;gap:.45rem;overflow-x:auto;padding:.15rem .1rem .55rem;margin-bottom:.6rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bkp-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:.05rem;min-width:4.4rem;padding:.5rem .4rem;border-radius:10px;
  border:1px solid var(--bkp-line);background:transparent;color:inherit;font:inherit;cursor:pointer;line-height:1.25}
.bkp-day .bkp-wd{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.bkp-day b{font-size:.92rem}
.bkp-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.45rem;margin-bottom:.4rem}
.bkp-time{min-height:44px;padding:.45rem .3rem;border-radius:10px;border:1px solid var(--bkp-line);background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.bkp-day:hover,.bkp-time:hover{border-color:var(--bkp-acc)}
.bkp-day.on,.bkp-time.on{background:var(--bkp-acc);border-color:var(--bkp-acc);color:var(--bkp-on)}
.bkp-day.on .bkp-wd{opacity:1}
.bkp-day:focus-visible,.bkp-time:focus-visible{outline:3px solid var(--bkp-acc);outline-offset:2px}
.bkp-note{font-size:.8rem;opacity:.8;margin:.3rem 0 0}
.bkp-load,.bkp-none{margin:.3rem 0;line-height:1.55}
.bkp-none a{color:inherit;font-weight:600}

/* book.php */
.bk-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem;align-items:start}
.bk-grid>*{min-width:0}
.bkp{max-width:100%;min-width:0}
.bk-side h2{font-family:"Syne",sans-serif;font-size:1.25rem;margin:0 0 .6rem}
.bk-side ol{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.8rem}
.bk-side li{display:flex;gap:.8rem;align-items:flex-start}
.bk-side li span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,194,255,.14);color:#00C2FF;font-weight:700;font-size:.85rem}
.bk-side li small{display:block;color:var(--muted2,#9fb0c2);font-size:.84rem;line-height:1.5}
.bk-step{border-top:1px solid rgba(255,255,255,.1);padding-top:1.1rem;margin-top:1.1rem}
.bk-step:first-of-type{border-top:0;padding-top:0;margin-top:0}
.bk-step h3{font-size:1rem;margin:0 0 .7rem;display:flex;gap:.55rem;align-items:center}
.bk-step h3 span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#00C2FF;color:#041320;font-size:.78rem;font-weight:700}
.bk-picked{font-weight:600;color:#00C2FF;margin:.2rem 0 0;min-height:1.4em}
.bk-how{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 .9rem;border:0;padding:0}
.bk-how legend{font-size:.78rem;color:var(--muted2,#9fb0c2);margin-bottom:.35rem;font-weight:500;padding:0}
.bk-how label{display:flex;gap:.45rem;align-items:center;padding:.55rem .85rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);cursor:pointer;font-size:.9rem}
.bk-how input{accent-color:#00C2FF;width:16px;height:16px}
.bk-how label:has(input:checked){border-color:#00C2FF;background:rgba(0,194,255,.08)}
.bk-err{color:#FF8A80;font-weight:600;margin:.2rem 0 .8rem;display:none}
.bk-portal{margin-top:1rem;font-size:.86rem;color:var(--muted2,#9fb0c2)}
.bk-portal a{color:#00C2FF}
@media (max-width:860px){.bk-grid{grid-template-columns:minmax(0,1fr)}}

/* booking.php: the private link (with proposal-view.css's .pl page) */
.bk-facts{display:grid;gap:.4rem;margin:.6rem 0 0}
.bk-facts div{display:grid;grid-template-columns:7rem 1fr;gap:.6rem}
.bk-facts dt{color:var(--pl-mute);font-size:.86rem}
.bk-facts dd{margin:0;font-weight:500}
@media (max-width:520px){.bk-facts div{grid-template-columns:1fr;gap:0}}