/* ============================================================================
   lp-booking.css — попап «телефон + бажаний час» посадкових (NIGHT-B 29.08).
   Витягнуто з інлайну kadroom.html (перший носій, N-LP 09.08), щоб пʼять
   SEO-посадкових хвилі 2 (спека 41 §3) жили з ОДНОГО джерела — той самий
   урок, що й css/lp.css 13.08. kadroom.html поки лишається зі своєю копією
   (унесення — окремим заходом, щоб не чіпати перевірену сторінку).

   Що всередині: модалка .m-bk* · пікер часу .sp-* · тост .m-toast ·
   спалах «Прийнято!» .bk-accept. Токени (--c1 --b1 --t --g …) — з css/lp.css,
   підключати ПІСЛЯ нього. Логіка — js/shared/lp-page.js.
   ============================================================================ */

/* ── ПОПАП «контакти + бажаний час» (порт #mBk головної + канон-пікер) ── */
.m-bk-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);opacity:0;transition:opacity .25s var(--ease-out);z-index:998}
.m-bk-backdrop.open{opacity:1}
.m-bk{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:100%;max-width:480px;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--c1);border:1px solid var(--b1);border-bottom:none;border-radius:16px 16px 0 0;padding:18px 18px 0;z-index:999;transition:transform .3s var(--ease-out);box-sizing:border-box}
.m-bk.open{transform:translate(-50%,0)}
.m-bk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.m-bk-title{font-family:var(--font-head);font-size:22px;font-weight:var(--head-weight);letter-spacing:.5px;text-transform:uppercase;color:var(--t);line-height:1.05}
.m-bk-close{background:none;border:none;color:var(--t4);font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.m-bk-form{display:flex;flex-direction:column;gap:14px}
.m-bk-field{display:flex;flex-direction:column;gap:6px}
.m-bk-lbl{font-size:12px;color:var(--t3);letter-spacing:.3px}
.m-bk-lbl em{color:var(--r);font-style:normal}
.m-bk-lbl .opt{color:var(--t5)}
.m-bk-field input,.m-bk-field textarea{background:#1a1a1a;border:1px solid var(--b1);color:var(--t);padding:12px;font-size:16px;font-family:inherit;border-radius:10px;outline:none;width:100%;box-sizing:border-box}/* 16px — без autozoom на iOS */
.m-bk-field input:focus,.m-bk-field textarea:focus{border-color:#3a3a3a}
.m-bk-field textarea{resize:none}
.m-bk-field input.pulse{animation:mBkPulse 1.6s ease-in-out infinite}
@keyframes mBkPulse{0%,100%{border-color:var(--b1)}50%{border-color:var(--g)}}
.m-bk-err{font-size:11px;color:var(--r)}
.m-bk-send .m-bk-lbl{margin-bottom:2px}
.m-bk-send{position:sticky;bottom:0;z-index:5;background:var(--c1);margin:0 -18px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--b1)}
.m-bk-note{font-family:var(--font-body);font-size:11.5px;color:var(--t4);line-height:1.45;margin:-2px 0 2px}
.m-bk-tabs{display:flex;gap:8px}
.m-bk-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:#1a1a1a;border:2px solid var(--b1);color:var(--t2);padding:11px 4px;border-radius:10px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;transition:border-color .2s,opacity .2s,background .2s,color .2s}
.m-bk-tab svg{width:24px;height:24px;fill:currentColor}
.m-bk-tab[data-channel="telegram"]{color:#2aabee}
.m-bk-tab[data-channel="viber"]{color:#7d4cc4}
.m-bk-tab[data-channel="call"]{color:var(--g)}
.m-bk-tab span{color:var(--t)}
.m-bk-tab.is-locked{opacity:.4}
.m-bk-tab.is-sending{opacity:.6;pointer-events:none;animation:none !important}
@keyframes mBkTabBlink{0%,100%{border-color:var(--b1);box-shadow:0 0 0 0 transparent}50%{border-color:currentColor;box-shadow:0 0 9px -1px currentColor}}
.m-bk-tab.is-live{animation:mBkTabBlink 3.6s ease-in-out infinite}
.m-bk-tab.is-live:nth-child(1){animation-delay:0s}
.m-bk-tab.is-live:nth-child(2){animation-delay:1.2s}
.m-bk-tab.is-live:nth-child(3){animation-delay:2.4s}
@media(prefers-reduced-motion:reduce){.m-bk-tab.is-live,.m-bk-field input.pulse{animation:none}}
.m-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1a1a1a;border:1px solid var(--b1);color:var(--t);padding:12px 22px;border-radius:30px;font-size:14px;z-index:1000;opacity:0;transition:opacity .3s;max-width:90vw;text-align:center}
.m-toast.show{opacity:1}
.m-toast.ok{border-color:var(--g)}
.m-toast.err{border-color:var(--r)}
/* ── ВИБІР ЧАСУ: власний UI поверх канон-модуля SlotPicker (канон 09.08) ── */
.sp-box{background:#171717;border:1px solid #232323;border-radius:14px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:12px}
.sp-days{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sp-days::-webkit-scrollbar{display:none}
.sp-day{flex:0 0 auto;min-width:58px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border:1px solid #2a2a2a;background:#1e1e1e;color:var(--t2);border-radius:11px;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.15;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.sp-day .dow{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t5)}
.sp-day:hover{border-color:#3a3a3a}
.sp-day[aria-pressed="true"]{background:var(--g);border-color:var(--g);color:#101804;transform:translateY(-1px);box-shadow:0 6px 16px rgba(205,248,105,.16)}
.sp-day[aria-pressed="true"] .dow{color:rgba(16,24,4,.66)}
/* Періоди — сегмент-контрол */
.sp-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#1b1b1b;border:1px solid #262626;border-radius:12px;padding:4px}
.sp-part{border:none;background:transparent;color:var(--t2);border-radius:9px;padding:10px 6px;cursor:pointer;font-family:var(--font-body);font-size:13.5px;font-weight:600;min-height:44px;transition:background .16s ease,color .16s ease,opacity .16s ease}
.sp-part:hover{background:#242424}
.sp-part[aria-pressed="true"]{background:var(--g);color:#101804}
.sp-part.dim{opacity:.34}
.sp-part.dim[aria-pressed="true"]{opacity:.75}
/* Слоти — 3 в ряд, великі */
.sp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp-slot{padding:13px 6px;border:1px solid #2c2c2c;background:#1e1e1e;color:var(--t);border-radius:11px;cursor:pointer;font-family:var(--font-body);font-size:15.5px;font-weight:600;min-height:48px;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.sp-slot:hover{border-color:#3d3d3d;transform:translateY(-1px)}
.sp-slot[aria-pressed="true"]{background:var(--g);border-color:var(--g);color:#101804;box-shadow:0 6px 16px rgba(205,248,105,.16)}
.sp-slot.current{border-style:dashed;background:transparent;color:var(--t4);cursor:default}
.sp-slot.skel{pointer-events:none;color:transparent;border-color:transparent;background:linear-gradient(90deg,#1c1c1c,#242424,#1c1c1c);background-size:200% 100%;animation:spSkel 1.15s ease-in-out infinite}
@keyframes spSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Повідомлення пікера — на ВСЮ ширину над слотами (інакше сідає в колонку гріду) */
.sp-msg{grid-column:1 / -1;font-size:13px;line-height:1.5;color:var(--t3);margin:2px 0}
.sp-msg button{display:inline-block;margin-left:6px;padding:7px 12px;border:1px solid var(--g);background:transparent;color:var(--g);border-radius:9px;font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;min-height:40px}
.sp-note{font-size:12.5px;line-height:1.5;color:var(--t4);margin-top:-2px}
.sp-note.warn{color:#ffb454}
.sp-note.hold{color:var(--g)}
@media(prefers-reduced-motion:reduce){.sp-day,.sp-slot{transition:none}.sp-slot.skel{animation:none}}
/* ── Booking accepted — TSJ-TV flash ── */
.bk-accept{position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.78);opacity:0;pointer-events:none;transition:opacity .38s ease}
.bk-accept.vis{opacity:1;pointer-events:auto}
.bk-accept-in{text-align:center;padding:0;background:none;box-shadow:none;animation:bkAcceptPop .55s cubic-bezier(.22,1,.36,1) both}
.bk-accept-tv{width:min(320px,85vw);height:auto;display:block;margin:0 auto 32px;object-fit:contain}
.bk-accept-lbl{font-family:var(--font-head);font-size:clamp(52px,16vw,68px);font-weight:var(--head-weight);color:#fff;text-transform:uppercase;letter-spacing:6.885px;line-height:1.2}
@media(min-width:768px){.bk-accept-lbl{letter-spacing:9.18px}}
@keyframes bkAcceptPop{from{opacity:0;transform:scale(.88) translateY(32px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(prefers-reduced-motion:reduce){.bk-accept-in{animation:none}}