/* ════════════════════════════════════════════════════════════════════════
   Окно обратного звонка EnvyBox — в оформлении сайта клиники.

   T-ALBA-ENVYBOX-THEME-01 (17.09.2026, просьба Vadim'а «переделай всплывающее
   окно под наш стиль»).

   Как было: белая панель, красная кнопка «Жду звонка!», системный шрифт и
   синий логотип на белом — чужой сайт поверх нашего.

   Как здесь: тёмная панель, наш зелёный акцент, наши шрифты и скругления.

   🪤 ПОЧЕМУ ТУТ СТОЛЬКО !important. Разметку и часть стилей виджет рисует
   своим скриптом и дописывает их прямо в атрибут style — без !important наши
   правила проигрывают. Это не лень, а единственный способ перекрасить чужой
   виджет, не трогая его код.

   🪤 ЧЕГО ЖДАТЬ. Классы (`cbk-*`) придумали не мы. Обновят виджет — часть
   правил перестанет попадать в цель, и окно вернётся к белому. Заметить это
   можно только глазами: сторож на такое не поставишь, чужую вёрстку никто нам
   не обещал. Поэтому при жалобе «окно стало белым» первым делом смотреть
   сюда, а не искать поломку у себя.

   Цвета берём из общих переменных сайта (assets/css/main.css): там же они
   меняются для всего сайта разом (§🔁 «один факт — одно место»).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Подложка: затемняем страницу, как в наших окнах ──────────────────── */
.cbk-window-bgr {
  background-color: rgba(11, 11, 10, .72) !important;
  backdrop-filter: blur(2px);
}

/* ── Сама панель ──────────────────────────────────────────────────────── */
.callbackkiller.cbk-window,
body .callbackkiller.cbk-window.cbk-background {
  background: var(--bg-elev, #14140F) !important;
  color: var(--fg, #F4F1EA) !important;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
  border-left: 1px solid var(--divider, rgba(244, 241, 234, .08)) !important;
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .7) !important;
}

body .callbackkiller.cbk-window *,
body .callbackkiller.cbk-window :not(.ignore-global) {
  font-family: inherit !important;
}

/* Заголовок и пояснения */
body .callbackkiller.cbk-window .cbk-form-title,
body .callbackkiller.cbk-window .cbk-form-text,
body .callbackkiller.cbk-window .cbk-service-name,
body .callbackkiller.cbk-window .cbk-visitor-name,
body .callbackkiller.cbk-window .cbk-text-after-call {
  color: var(--fg-strong, #FFFFFF) !important;
}

body .callbackkiller.cbk-window .cbk-form-text {
  color: var(--fg-muted, #9C978B) !important;
  line-height: 1.55 !important;
}

/* ── Кнопка «Закрыть» ─────────────────────────────────────────────────── */
body .callbackkiller.cbk-window .cbk-close-window {
  color: var(--fg-muted, #9C978B) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  opacity: 1 !important;
  transition: color .2s ease !important;
}
body .callbackkiller.cbk-window .cbk-close-window:hover {
  color: var(--accent-strong, #A6C7B4) !important;
}

/* ── Логотип: их файл синий на белом, на тёмном он смотрелся заплаткой ── */
body .callbackkiller.cbk-window .cbk-window-logo img {
  display: none !important;
}
body .callbackkiller.cbk-window .cbk-window-logo {
  background: url("/assets/logo-alba.svg") center / contain no-repeat !important;
}

/* ── Поля ввода и списки (день, время, телефон) ───────────────────────── */
body .callbackkiller.cbk-window .cbk-input,
body .callbackkiller.cbk-window .cbk-select,
body .callbackkiller.cbk-window select,
body .callbackkiller.cbk-window input[type="text"],
body .callbackkiller.cbk-window input[type="tel"],
body .callbackkiller.cbk-window input[type="email"] {
  background: var(--bg-card, #17170F) !important;
  color: var(--fg-strong, #FFFFFF) !important;
  border: 1px solid var(--divider-strong, rgba(244, 241, 234, .16)) !important;
  border-radius: var(--radius-sm, 8px) !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color .2s ease !important;
}

body .callbackkiller.cbk-window .cbk-input:focus,
body .callbackkiller.cbk-window select:focus {
  border-color: var(--accent, #7EA593) !important;
  outline: none !important;
}

body .callbackkiller.cbk-window .cbk-input::placeholder {
  color: var(--fg-dim, #5F5B54) !important;
}

/* ── Главная кнопка: была красная, стала наша ─────────────────────────── */
body .callbackkiller.cbk-window .cbk-button,
body .callbackkiller.cbk-window .cbk-button.cbk-button-lg,
body .callbackkiller.cbk-window .cbk-button-yes,
body .callbackkiller.cbk-window .cbk-link-btn {
  background: var(--accent, #7EA593) !important;
  background-image: none !important;
  color: var(--bg, #0B0B0A) !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: .01em !important;
  padding: 14px 24px !important;
  box-shadow: 0 6px 24px -8px var(--accent-glow, rgba(126, 165, 147, .16)) !important;
  transition: background .2s ease, transform .2s ease !important;
}

body .callbackkiller.cbk-window .cbk-button:hover,
body .callbackkiller.cbk-window .cbk-button-lg:hover {
  background: var(--accent-strong, #A6C7B4) !important;
  transform: translateY(-1px) !important;
}

/* Второстепенная кнопка («Нет» в опросе после звонка) */
body .callbackkiller.cbk-window .cbk-button-no {
  background: transparent !important;
  color: var(--fg-muted, #9C978B) !important;
  border: 1px solid var(--divider-strong, rgba(244, 241, 234, .16)) !important;
  border-radius: 100px !important;
}

/* ── Согласие на обработку данных ─────────────────────────────────────── */
body .callbackkiller.cbk-window .cbk-agreements-container,
body .callbackkiller.cbk-window .cbk-label,
body .callbackkiller.cbk-window .cbk-personal-agreement,
body .callbackkiller.cbk-window .ws-checkbox-text-wrapper {
  color: var(--fg-dim, #5F5B54) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body .callbackkiller.cbk-window .cbk-agreement-link,
body .callbackkiller.cbk-window a {
  color: var(--accent-strong, #A6C7B4) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── Таймер ожидания звонка ───────────────────────────────────────────── */
body .callbackkiller.cbk-window .cbk-timer,
body .callbackkiller.cbk-window .cbk-number,
body .callbackkiller.cbk-window .cbk-number-sec,
body .callbackkiller.cbk-window .cbk-number-msec {
  color: var(--accent-strong, #A6C7B4) !important;
  background: transparent !important;
}

/* ── Ошибки полей ─────────────────────────────────────────────────────── */
body .callbackkiller.cbk-window .error-box {
  color: #E0796B !important;
  font-size: 12px !important;
}


/* ── Текст: перебиваем правило виджета ────────────────────────────────────
   Виджет дописывает ПОСЛЕ нашей темы:
       .cbk-window :not(.ignore-global) { color: rgb(51,51,51) !important; }
   На белой панели это читалось, на нашей тёмной текст слился бы с фоном.
   При равном весе побеждает правило, которое идёт позже, поэтому здесь вес
   выше: лишний класс и `body`. Замерено в браузере на живом сайте,
   а не выведено из головы (§👁 v3.16). */
body .callbackkiller.cbk-window :not(.ignore-global) {
  color: var(--fg, #F4F1EA) !important;
}
body .callbackkiller.cbk-window .cbk-form-text,
body .callbackkiller.cbk-window .cbk-agreements-container,
body .callbackkiller.cbk-window .cbk-label,
body .callbackkiller.cbk-window .ws-checkbox-text-wrapper {
  color: var(--fg-muted, #9C978B) !important;
}
body .callbackkiller.cbk-window a,
body .callbackkiller.cbk-window a.cbk-agreement-link,
body .callbackkiller.cbk-window a.cbk-close-window {
  color: var(--accent-strong, #A6C7B4) !important;
}


/* ── Строка «день / время»: два списка должны влезать в одну строку ───────
   Панель узкая — 341px, под саму строку остаётся 260px. С нашими отступами
   каждый список стал 137px, и «10:00» переехало на вторую строку. Замерено в
   браузере (§👁 v3.16), поэтому и лечим размером, а не «на глаз». */
body .callbackkiller.cbk-window .cbk-select,
body .callbackkiller.cbk-window select {
  padding: 10px 10px !important;
  max-width: 45% !important;
  font-size: 14px !important;
}

/* Поле телефона занимает строку целиком — так привычнее и не ломается при
   узкой панели. */
body .callbackkiller.cbk-window .cbk-input[type="tel"],
body .callbackkiller.cbk-window #cbkPhoneInput {
  width: 100% !important;
  box-sizing: border-box !important;
}