/* ============================ A BOOKING LINK'S PUBLIC PAGE ============================
   book/index.php (book/book.js): the Calendar page's look -- a black heading with the green hatch under it,
   the steps on paper, Archivo, black and white, green #00FF50 for what is picked. Works on a phone. */
.bkp { --g: #00FF50; --ink: #0a0a0a; --paper: #f5f5f3; --line: #deded9; --mute: #4a4a46; font-family: 'Archivo', sans-serif; background: var(--paper); color: var(--ink); min-height: 70vh; }
.bkp *, .bkp *::before, .bkp *::after { box-sizing: border-box; }
.bkp p { margin: 0; }
.bkp h1, .bkp h2 { margin: 0; }
.bkp button { font-family: 'Archivo', sans-serif; cursor: pointer; color: inherit; }
.bkp [hidden] { display: none !important; }
.bkp-in { max-width: 1180px; margin: 0 auto; padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }

.bkp-hero { margin-top: 74px; background: var(--ink); color: var(--paper); }
.bkp-hero::after { content: ''; display: block; height: 12px; background: repeating-linear-gradient(-45deg, var(--g) 0 6px, var(--ink) 6px 12px); }
.bkp-hero .bkp-in { padding-top: clamp(28px, 4vw, 54px); padding-bottom: clamp(26px, 3vw, 44px); }
.bkp-hero-in { display: flex; gap: clamp(16px, 3vw, 32px); align-items: center; }
.bkp-av { flex: none; width: clamp(72px, 10vw, 120px); height: clamp(72px, 10vw, 120px); display: grid; place-items: center; background: var(--g) center / cover no-repeat; color: var(--ink);
          font: 900 clamp(24px, 3vw, 38px) 'Archivo', sans-serif; border: 2px solid var(--paper); }
.bkp-hero-t { min-width: 0; }
.bkp .bkp-kick { font: 800 11px 'Archivo', sans-serif; letter-spacing: .16em; color: #9a9a95; margin-bottom: 12px; overflow-wrap: anywhere; }
.bkp-kick a { color: var(--g); text-decoration: none; }
.bkp-h1 { font: 900 clamp(34px, 5.6vw, 84px)/.92 'Archivo', sans-serif; letter-spacing: -.055em; color: var(--paper); overflow-wrap: anywhere; }
.bkp .bkp-lede { margin-top: 14px; max-width: 62ch; font: 500 15.5px/1.55 'Archivo', sans-serif; color: #bdbdb8; }
@media (max-width: 560px){ .bkp-hero-in { flex-direction: column; align-items: flex-start; } }

.bkp-main { padding-top: 28px; padding-bottom: 80px; }
.bkp .bkp-own { margin: 0 0 16px; padding: 12px 14px; border: 2px dashed var(--ink); background: #fffbe6; font: 600 14px 'Archivo', sans-serif; }
.bkp-own a { color: var(--ink); font-weight: 800; }
.bkp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px){ .bkp-grid { grid-template-columns: 1fr; } }
.bkp-box { background: #fff; border: 2px solid var(--ink); padding: clamp(16px, 2.4vw, 24px); min-width: 0; }
.bkp-form, .bkp-done { margin-top: 20px; }
.bkp .bkp-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .16em; }
.bkp-step span { width: 24px; height: 24px; display: grid; place-items: center; background: var(--ink); color: var(--g); font: 900 12px 'Archivo', sans-serif; letter-spacing: 0; }
.bkp-durs + .bkp-step { margin-top: 22px; }

.bkp-durs { display: flex; flex-wrap: wrap; gap: 6px; }
.bkp-durs button { padding: 11px 16px; border: 2px solid var(--ink); background: #fff; font: 800 14px 'Archivo', sans-serif; }
.bkp-durs button.on { background: var(--ink); color: var(--g); }
.bkp-durs button:hover { box-shadow: 4px 4px 0 var(--g); }

.bkp-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bkp-cal-h b { font: 900 20px 'Archivo', sans-serif; letter-spacing: -.02em; }
.bkp-cal-h button { width: 40px; height: 40px; border: 2px solid var(--ink); background: #fff; font: 900 18px 'Archivo', sans-serif; }
.bkp-cal-h button:disabled { opacity: .3; cursor: default; }
.bkp-dow, .bkp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bkp-dow span { padding: 6px 0; text-align: center; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; }
.bkp-days button, .bkp-days .is-pad { aspect-ratio: 1 / 1; min-height: 38px; }
.bkp-days button { border: 1px solid var(--line); background: #fafaf8; font: 700 15px 'Archivo', sans-serif; color: #b5b5b0; }
.bkp-days button.has { border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 900; }
.bkp-days button.has:hover { background: var(--g); }
.bkp-days button.on { background: var(--ink) !important; color: var(--g) !important; }
.bkp-days button.is-today { text-decoration: underline; text-underline-offset: 3px; }
.bkp-days button:disabled { cursor: default; }
.bkp-days .bkp-wait, .bkp-days .bkp-none { grid-column: 1 / -1; }
.bkp .bkp-wait, .bkp .bkp-none { padding: 16px 0; font: 600 14px 'Archivo', sans-serif; color: var(--mute); }
.bkp-zone { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.bkp-zone span { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; }
.bkp-zone select { width: 100%; min-height: 44px; padding: 8px 10px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 600 14.5px 'Archivo', sans-serif; border-radius: 0; }

.bkp-dayname { margin: 0 0 12px !important; font: 900 24px/1.1 'Archivo', sans-serif; letter-spacing: -.03em; }
.bkp-dayname small { display: block; margin-top: 4px; font: 600 12.5px 'Archivo', sans-serif; letter-spacing: 0; color: var(--mute); }
.bkp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-height: 460px; overflow: auto; }
.bkp-times .bkp-wait { grid-column: 1 / -1; }
.bkp-times button { padding: 13px 8px; border: 2px solid var(--ink); background: #fff; font: 800 15px 'Archivo', sans-serif; }
.bkp-times button:hover { box-shadow: 4px 4px 0 var(--g); }
.bkp-times button.on { background: var(--g); }
@media (max-width: 860px){ .bkp-times { max-height: none; } }

.bkp-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 16px; background: var(--ink); color: var(--paper); }
.bkp-chosen b { font: 900 17px/1.3 'Archivo', sans-serif; letter-spacing: -.01em; flex: 1 1 260px; }
.bkp-chosen button { border: 0; background: transparent; color: var(--g); font: 800 12.5px 'Archivo', sans-serif; text-decoration: underline; padding: 0; }
.bkp .bkp-me { margin: 0 0 16px; font: 700 15px 'Archivo', sans-serif; }
.bkp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .bkp-two { grid-template-columns: 1fr; } }
.bkp-f { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; min-width: 0; }
.bkp-f > span { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; }
.bkp-f input, .bkp-f textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 600 15.5px 'Archivo', sans-serif; border-radius: 0; box-shadow: none; outline: none; margin: 0; }
.bkp-f textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.bkp-f input:focus, .bkp-f textarea:focus { box-shadow: 4px 4px 0 var(--g); }
.bkp-f em { font: 700 12.5px 'Archivo', sans-serif; font-style: normal; color: #b23c00; }
.bkp-f em:empty { display: none; }
.bkp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bkp .bkp-fine { margin: 0 0 16px; font: 500 13px/1.5 'Archivo', sans-serif; color: var(--mute); }
.bkp-fine a { color: var(--ink); font-weight: 800; }
.bkp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 2px solid var(--ink); background: var(--g); color: var(--ink) !important;
           font: 900 13px 'Archivo', sans-serif; letter-spacing: .14em; text-decoration: none; }
.bkp-btn:hover { box-shadow: 6px 6px 0 var(--ink); }
.bkp-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.bkp-hero .bkp-btn { margin-top: 22px; }
@media (max-width: 560px){ .bkp-form .bkp-btn { width: 100%; } }

.bkp-done { border-color: var(--ink); background: repeating-linear-gradient(135deg, #fff 0 12px, #f3fff6 12px 24px); }
.bkp .bkp-done-k { display: inline-block; margin-bottom: 14px; padding: 5px 9px; background: var(--g); font: 900 11px 'Archivo', sans-serif; letter-spacing: .16em; }
.bkp-done h2 { font: 900 clamp(28px, 4vw, 44px)/1 'Archivo', sans-serif; letter-spacing: -.045em; margin-bottom: 12px !important; }
.bkp .bkp-done-when { margin-bottom: 12px; font: 800 16px 'Archivo', sans-serif; }
.bkp-done p { font: 500 15px/1.55 'Archivo', sans-serif; margin-bottom: 10px; }
.bkp .bkp-aud { display: inline-block; margin-top: 16px; padding: 4px 8px; border: 1px solid #5a5a55; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--paper); }
.bkp-gate { max-width: 720px; }
.bkp-gate h2 { font: 900 clamp(26px, 3.6vw, 40px)/1.02 'Archivo', sans-serif; letter-spacing: -.04em; margin-bottom: 10px !important; }
.bkp-gate > p { font: 500 15px/1.55 'Archivo', sans-serif; margin-bottom: 14px; }
.bkp .bkp-gate-do { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.bkp-btn.line { background: #fff; }
@media (max-width: 560px){ .bkp-gate-do .bkp-btn { width: 100%; } }