/* ============================================================
   Онлайн-запись — стили модуля (префикс .bk-)
   Использует переменные дизайн-системы из style.css
   ============================================================ */

.booking{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

.bk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(20px,3vw,32px)}

.bk-loading{text-align:center;color:var(--muted);font-size:14.5px;padding:26px 10px;line-height:1.6}
.bk-loading a{color:var(--green-d)}
.bk-retry{font-family:inherit;font-size:14px;font-weight:800;color:var(--green-d);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px;margin:10px 0;cursor:pointer;transition:.15s}
.bk-retry:hover{border-color:var(--green);transform:translateY(-1px)}

/* ---------- Вкладки способа записи ---------- */
.bk-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.bk-tab{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink-soft);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:12px 8px;cursor:pointer;transition:.18s var(--ease);white-space:nowrap}
.bk-tab:hover{border-color:var(--green);color:var(--green-d);transform:translateY(-1px)}
.bk-tab.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(10,157,51,.28)}

/* ---------- Поиск врача ---------- */
.bk-search{margin-bottom:14px}
.bk-search input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;background:#fff;outline:none;transition:.15s}
.bk-search input:focus{border-color:var(--green)}

/* ---------- Списки выбора (клиники/врачи/спец./услуги) ---------- */
.bk-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-item,.bk-clinic-tab{font-family:inherit;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:15px 17px;cursor:pointer;transition:.18s var(--ease);display:flex;flex-direction:column;gap:3px}
.bk-item:hover,.bk-clinic-tab:hover{border-color:var(--green);box-shadow:var(--sh-1);transform:translateY(-2px)}
.bk-item-title{font-size:15px;font-weight:800;color:var(--ink);line-height:1.35}
.bk-item-sub{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.45}

/* ---------- Аватары врачей ---------- */
.bk-item-doc{flex-direction:row;align-items:center;gap:12px}
.bk-item-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-ava{width:52px;height:52px;flex:0 0 auto;border-radius:14px;background-size:cover;background-repeat:no-repeat;background-color:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-1)}
.bk-ava-init{display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:900;font-size:17px;border:0}
.bk-sel-doc{display:flex;align-items:center;gap:12px}
.bk-sel-doc .bk-ava{width:58px;height:58px;border-radius:16px}
.bk-sel-doc b{display:block;font-size:15.5px;color:var(--ink)}
.bk-sel-doc small{display:block;color:var(--muted);font-weight:600;font-size:12.5px;margin-top:2px}

/* ---------- Панель записи ---------- */
.bk-selected{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(10,157,51,.08),rgba(15,181,166,.08));border:1px solid rgba(10,157,51,.25);border-radius:14px;padding:13px 16px;margin-bottom:18px}
.bk-sel-summary{font-size:14.5px;font-weight:800;color:var(--ink)}
.bk-change{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--green-d);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.15s}
.bk-change:hover{border-color:var(--green)}

.bk-section{margin-bottom:18px}
.bk-label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.bk-section select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;background:#fff;outline:none;transition:.15s;appearance:auto}
.bk-section select:focus{border-color:var(--green)}

/* Табы клиник (спец./услуги) */
.bk-clinic-tabs{display:flex;flex-direction:column;gap:8px}
.bk-clinic-tab.active{border-color:var(--green);background:linear-gradient(135deg,rgba(10,157,51,.09),rgba(15,181,166,.09))}
.bk-clinic-tab.active .bk-item-title{color:var(--green-d)}

/* Инфо о клинике */
.bk-clinic-info{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:18px}

/* ---------- Календарь ---------- */
.bk-cal{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;background:var(--bg);padding:10px 12px;border-bottom:1px solid var(--line)}
.bk-cal-title{font-size:15px;font-weight:800;color:var(--ink)}
.bk-cal-nav{position:relative;font-family:inherit;font-size:20px;line-height:1;font-weight:800;color:var(--green-d);background:#fff;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;cursor:pointer;transition:.15s}
.bk-cal-nav:hover{border-color:var(--green)}
.bk-badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;background:var(--grad);color:#fff;border-radius:999px;font-size:10px;font-weight:800;line-height:17px;text-align:center;box-sizing:border-box;pointer-events:none}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:10px}
.bk-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;border-radius:10px;color:var(--ink-soft);border:2px solid transparent}
.bk-day-head{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bk-day-other{color:#c6d2c9}
.bk-day-off{color:#c6d2c9}
.bk-day-avail{background:rgba(10,157,51,.1);color:var(--green-d);font-weight:800;cursor:pointer;transition:.12s}
.bk-day-avail:hover{background:rgba(10,157,51,.2)}
.bk-day-today{border-color:rgba(10,157,51,.45)}
.bk-day-sel{background:var(--grad);color:#fff}
.bk-day-sel:hover{background:var(--grad)}
.bk-cal-hint{font-size:12.5px;color:var(--muted);text-align:center;padding:0 12px 12px;line-height:1.5}
.bk-cal-legend{display:flex;gap:16px;justify-content:center;border-top:1px solid var(--line);padding:9px;font-size:11.5px;color:var(--muted)}
.bk-cal-legend span{display:flex;align-items:center;gap:6px}
.bk-dot{width:9px;height:9px;border-radius:50%;background:var(--grad)}
.bk-dot-off{background:#d5dfd8}

/* ---------- Слоты времени ---------- */
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.bk-slot{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:11px 4px;cursor:pointer;transition:.14s;text-align:center}
.bk-slot:hover{border-color:var(--green);color:var(--green-d)}
.bk-slot.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(10,157,51,.3)}
.bk-slot-busy{color:#c0ccc3;background:var(--bg);cursor:not-allowed;text-decoration:line-through}
.bk-slot-busy:hover{border-color:var(--line);color:#c0ccc3}
.bk-slot-night{border-left:3px solid var(--teal)}

/* ---------- Контактные данные ---------- */
.bk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-field{display:flex;flex-direction:column}
.bk-field-full{grid-column:1/-1}
.bk-field label{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.bk-field input,.bk-field select,.bk-field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;background:#fff;outline:none;transition:.15s}
.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus{border-color:var(--green)}
.bk-field textarea{min-height:84px;resize:vertical}

/* Комбобокс «Вид питомца» */
.bk-combo{position:relative}
.bk-combo-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);max-height:264px;overflow-y:auto;padding:6px}
.bk-combo-item{display:block;width:100%;text-align:left;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:none;border:0;border-radius:8px;padding:10px 12px;cursor:pointer;transition:.12s}
.bk-combo-item:hover,.bk-combo-item.active{background:rgba(10,157,51,.09);color:var(--green-d)}
.bk-combo-sep{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;padding-top:12px}
.bk-combo-empty{padding:12px;font-size:13px;color:var(--muted);text-align:center;line-height:1.5}

.bk-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--muted);font-weight:500;cursor:pointer;line-height:1.5}
.bk-consent input{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:var(--green)}
.bk-consent a{color:var(--green-d);font-weight:700}

.bk-alert{background:#fff2f0;border:1px solid rgba(214,69,49,.35);color:#b3261e;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;margin:14px 0 0;line-height:1.5}
.bk-alert-ok{background:#eaf6ec;border-color:rgba(10,157,51,.3);color:var(--green-d)}

.bk-submit-row{margin-top:16px}
.bk-submit-row .btn{width:100%}
.bk-note{display:block;text-align:center;color:var(--muted);font-size:12px;margin-top:10px}

/* ---------- Экран успеха ---------- */
.bk-success{text-align:center;padding:clamp(30px,5vw,52px)}
.bk-success-icon{width:74px;height:74px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 14px 34px rgba(10,157,51,.35)}
.bk-success-icon svg{width:36px;height:36px}
.bk-success h2{font-size:clamp(21px,2.6vw,28px);font-weight:900;margin-bottom:12px}
.bk-success-text{display:block;color:var(--ink-soft);font-size:15px;line-height:1.65;max-width:440px;margin:0 auto 22px}
.bk-success-details{display:block;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-weight:700;color:var(--ink);margin-bottom:14px;text-align:left}

/* ---------- Приложение клиники (Telegram / MAX) ---------- */
.bk-app{max-width:440px;margin:0 auto 20px;padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-radius:16px;text-align:left}
.bk-app-head{font-weight:800;font-size:15px;color:var(--ink);margin-bottom:6px}
.bk-app p{margin:0 0 13px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.bk-app-btns{display:flex;gap:10px;flex-wrap:wrap}
.bk-app-btn{flex:1;min-width:160px;display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:12px;font-weight:800;font-size:14px;text-decoration:none;color:#fff;transition:filter .15s,transform .15s}
.bk-app-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bk-app-tg{background:#2AABEE}
.bk-app-max{background:linear-gradient(135deg,#8E55FF,#3D7DFF)}
.bk-app-btn img{width:20px;height:20px;margin-right:8px;border-radius:5px}
.bk-app-hint{text-align:center;color:var(--muted);font-size:14px;margin-top:16px}
.bk-app-hint a{color:var(--green-d);font-weight:800;white-space:nowrap}
.bk-app-hint img{display:inline-block;width:18px;height:18px;border-radius:4px;vertical-align:-4px;margin-right:5px}

/* Honeypot */
.bk-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- Адаптив ---------- */
@media(max-width:700px){
  .bk-tabs{grid-template-columns:1fr 1fr}
  .bk-list{grid-template-columns:1fr}
  .bk-form-grid{grid-template-columns:1fr}
  .bk-slots{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
  .bk-cal-grid{gap:2px;padding:8px}
  .bk-day{font-size:12.5px;border-radius:8px}
}