/* SALON-UI-v1: убрать брендинг и лишнее со страницы записи EA */
.footer-powered-by, #select-language { display: none !important; }
#appointment-details div:has(> .fa-clock), #appointment-details div:has(> .fa-globe) { display: none !important; }
label[for="select-timezone"], #select-timezone { display: none !important; }
#service-description { display: none !important; }

/* SALON-BRAND-v1 (30.09.2026): фирменный стиль GLÜCK (макеты визиток/логотипа): чёрная полоса с логотипом, под ней «Онлайн-запись»,
   шрифт текста — Century Gothic (если есть на устройстве), иначе Didact Gothic (свободный аналог, лежит у нас в /salon/fonts).
   Подключается на квизе (index.html) и на страницах EA (booking_layout, message_layout — через patch.sh). Техдолг: /opt/salon/TECHDEBT.md */
@font-face { font-family: "Didact Gothic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/salon/fonts/dg-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Didact Gothic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/salon/fonts/dg-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --gl-font: "Century Gothic", CenturyGothic, "Didact Gothic", "Trebuchet MS", Arial, sans-serif; --gl-bar: 60px; --gl-sub: 40px; --gl-ink: #111; --gl-line: #e3e3e3;
  --bs-font-sans-serif: var(--gl-font); --bs-body-font-family: var(--gl-font); }

/* шапка: одна и та же на всех экранах, закреплена сверху */
html body { padding-top: calc(var(--gl-bar) + var(--gl-sub)) !important; font-family: var(--gl-font) !important; }
.gl-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: var(--gl-bar); background: #000; display: flex; align-items: center; justify-content: center; }
.gl-bar a { display: block; line-height: 0; }
.gl-bar img { height: 30px; width: auto; display: block; }
.gl-sub { position: fixed; top: var(--gl-bar); left: 0; right: 0; z-index: 1040; height: var(--gl-sub); background: #fff; border-bottom: 1px solid var(--gl-line);
  display: flex; align-items: center; justify-content: center; font-family: var(--gl-font); font-size: 16px; font-weight: 400; letter-spacing: .04em; color: var(--gl-ink); }

/* всё, что имеет собственный шрифт, — в фирменный (иконки Font Awesome не трогаем) */
body, button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6, .btn, .form-control, .form-select, .form-label, .modal, .popover, .tooltip,
.flatpickr-calendar, .flatpickr-calendar *, .tippy-box { font-family: var(--gl-font) !important; }
h1, h2, h3, h4, h5, h6, b, strong, .btn, .fw-semibold, .fw-bold, .frame-title { font-weight: 400 !important; }

/* ---- страницы EA: чёрно-белая гамма вместо зелёной ---- */
#book-appointment-wizard, #message-frame { box-shadow: none !important; }
#main.container .wrapper { align-items: flex-start !important; min-height: 0 !important; }
#main.container { min-height: 0 !important; }
#header { background: #fff !important; color: var(--gl-ink) !important; padding: 14px 16px 6px !important; }
#header #company-logo { display: none !important; }
#header #company-name { margin: 0 !important; font-size: 0 !important; color: var(--gl-ink) !important; }
#header .display-booking-selection { font-size: 15px !important; color: #555 !important; }
#header #steps { margin: 10px auto 4px !important; }
#header .book-step { background: #ededed !important; border-radius: 50% !important; }
#header .book-step strong { color: #777 !important; }
#header .book-step.active-step { background: #000 !important; }
#header .book-step.active-step strong { color: #fff !important; }
.frame-title { font-size: 22px !important; color: var(--gl-ink) !important; }
#main .text-primary, #main a:not(.btn), #main .btn-link, .modal a:not(.btn) { color: var(--gl-ink) !important; }
.bg-primary { background-color: #000 !important; }
.btn-primary, #book-appointment-submit, .available-hour.selected-hour, .btn-check:checked + .btn {
  background: #000 !important; background-image: none !important; border-color: #000 !important; color: #fff !important; box-shadow: none !important; }
.btn-outline-primary, .btn-outline-secondary { color: var(--gl-ink) !important; border-color: #bbb !important; background: #fff !important; }
.available-hour { color: var(--gl-ink) !important; }
.form-control:focus, .form-select:focus, .btn:focus { border-color: #000 !important; box-shadow: 0 0 0 .15rem rgba(0,0,0,.12) !important; }
.form-check-input:checked { background-color: #000 !important; border-color: #000 !important; }
/* календарь flatpickr (тема material_green → чёрная) */
.flatpickr-months, .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-weekdays, span.flatpickr-weekday {
  background: #000 !important; color: #fff !important; fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #000 !important; border-color: #000 !important; color: #fff !important; }
.flatpickr-day.today { border-color: #000 !important; }
.flatpickr-innerContainer, .flatpickr-calendar { border-color: var(--gl-line) !important; box-shadow: none !important; }
/* экран «Заявка отправлена» и окна сообщений (message_layout) */
#message-frame { border: 0 !important; margin-top: 8px !important; }
#message-frame .text-success, #message-frame h3, #message-frame h4 { color: var(--gl-ink) !important; }
#message-frame .bg-success { background-color: #000 !important; --bs-bg-opacity: 1 !important; }
#message-frame .bg-success i, #message-frame .rounded-circle i { color: #fff !important; }
#message-frame small:has(a[href*="easyappointments.org"]) { display: none !important; }
body { background: #fff !important; }
/* SALON-BRAND-v1.1: выбранное время, значок «заявка отправлена», фокус галочки */
html body #book-appointment-wizard #available-hours .available-hour.selected-hour,
html body #book-appointment-wizard #available-hours .available-hour.selected-hour:hover { background: #000 !important; background-color: #000 !important; border-color: #000 !important; color: #fff !important; }
html body #message-frame .rounded-circle { background: #fff !important; border: 1.5px solid #000 !important; }
html body #message-frame .rounded-circle i { color: #000 !important; }
.form-check-input:focus { border-color: #000 !important; box-shadow: 0 0 0 .15rem rgba(0,0,0,.12) !important; }
/* SALON-BRAND-v1.2: мастер один (авторский салон) — имя мастера клиентке не показываем */
#appointment-details > div > div.fw-bold.text-muted { display: none !important; }
/* SALON-BRAND-v1.3: центровка. Шагов три (выбор услуги пропущен), а место в EA отведено под четыре — кружки съезжали влево */
#header { flex-direction: column !important; align-items: center !important; }
#header #company-name { float: none !important; width: 100% !important; text-align: center !important; }
#header #company-name > div { justify-content: center !important; }
#header #steps { float: none !important; width: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px; margin: 10px auto 4px !important; }
#header .book-step { float: none !important; margin: 0 !important; flex: 0 0 auto; }
/* список времени: отступ под полосу прокрутки был только справа */
#available-hours { padding-left: .5rem !important; padding-right: .5rem !important; }
/* кнопки «Предыдущий / Следующий»: скрытая кнопка не занимает место, группа по центру */
.command-buttons { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px; flex-wrap: wrap; }
.command-buttons button[style*="visibility: hidden"], .command-buttons button[style*="visibility:hidden"] { display: none !important; }
.command-buttons .btn { margin: 0 !important; }
/* квиз: заголовок и пояснение по центру, как на остальных экранах */
.w h1, .w .note, .w .hi { text-align: center; }
html body #book-appointment-wizard #header #steps .book-step { margin: 0 !important; float: none !important; }
/* экран подтверждения на широком экране: обе колонки по центру (было: левая влево, правая вправо) */
html body #appointment-details, html body #customer-details, html body #appointment-details *, html body #customer-details * { text-align: center !important; }

/* SALON-MOB-v1 (30.09.2026): телефон. EA резервировал под шаг 500px высоты — кнопки уезжали под экран. Теперь кнопки шага закреплены у нижнего края экрана и видны всегда. */
html body .frame-container { min-height: 0 !important; }
@media (max-width: 767.98px) {
  html body #book-appointment-wizard { overflow: visible !important; }
  html body #book-appointment-wizard .command-buttons { position: sticky; bottom: 0; z-index: 5; background: #fff; margin: 0 -1rem !important;
    padding: 10px 1rem calc(10px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--gl-line); flex-wrap: nowrap; }
  html body #book-appointment-wizard .command-buttons .btn { flex: 1 1 0; white-space: nowrap; padding-left: .5rem !important; padding-right: .5rem !important; }
  html body .frame-title { margin-bottom: 1rem !important; }
}

/* SALON-MOB-v2 (30.09.2026): кнопки шага одинаковой ширины и по центру (на последнем шаге «Записаться» лежит внутри формы — растягиваем форму, а не кнопку) */
html body #book-appointment-wizard .command-buttons > * { flex: 1 1 0; min-width: 0 !important; max-width: 260px; }
html body #book-appointment-wizard #book-appointment-form { display: block !important; }
html body #book-appointment-wizard #book-appointment-form .btn { width: 100% !important; }
@media (max-width: 767.98px) { html body #book-appointment-wizard .command-buttons > * { max-width: none; } }

/* SALON-MOB-v2.1: ровно пополам (при flex-basis 0 кнопка «Назад» выходила шире на свои поля) */
html body #book-appointment-wizard .command-buttons > .btn, html body #book-appointment-wizard .command-buttons > form { flex: 1 1 50% !important; }