@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ----------------------------------------------------------------------------
 * Easy!Appointments - Online Appointment Scheduler
 *
 * @package     EasyAppointments
 * @author      A.Tselegidis <alextselegidis@gmail.com>
 * @copyright   Copyright (c) Alex Tselegidis
 * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
 * @link        https://easyappointments.org
 * @since       v1.5.0
 * ---------------------------------------------------------------------------- */
/* Responsive booking wizard styles (rounded corners and shadow on md+ screens) */
@media (min-width: 768px) {
  #book-appointment-wizard {
    border-radius: var(--bs-border-radius) !important;
    box-shadow: var(--bs-box-shadow-sm) !important; } }

/* Active step indicator - dynamic state that changes via JavaScript */
#book-appointment-wizard .book-step.active-step {
  height: 45px !important;
  width: 45px !important;
  background: var(--bs-white) !important;
  padding: 7px !important;
  margin-right: 13px !important;
  margin-top: 0 !important; }

#book-appointment-wizard .book-step.active-step strong {
  color: var(--bs-primary) !important;
  font-size: 21px !important; }

/* Inactive step indicator - ensures consistent styling when step becomes inactive */
#book-appointment-wizard .book-step:not(.active-step) {
  height: 35px !important;
  width: 35px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  padding: 8px !important;
  margin-right: 12px !important;
  margin-top: 6px !important; }

#book-appointment-wizard .book-step:not(.active-step) strong {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important; }

/* Selected hour button state */
#book-appointment-wizard #available-hours .available-hour {
  margin-bottom: 10px; }

#book-appointment-wizard #available-hours .selected-hour {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-white) !important; }

/* Captcha refresh icon hover effect */
#book-appointment-wizard .captcha-title .fa-sync-alt {
  cursor: pointer;
  transition: all 0.3s linear; }

#book-appointment-wizard .captcha-title .fa-sync-alt:hover {
  color: var(--bs-primary); }

/* Language popover list */
.popover .popover-title {
  text-align: center; }

.popover .popover-content #language-list .language {
  margin: 15px 0; }

#book-appointment-wizard .flatpickr-calendar.inline {
  margin: auto; }










/* ===== ФИНАЛЬНАЯ ВЕРСТКА ===== */

/* Скрываем выбор часового пояса на шаге 2 */
.mb-3:has(#select-timezone),
#select-timezone,
label[for="select-timezone"] { display: none !important; }

/* Скрываем строку часового пояса в деталях записи (шаг 4) */
#appointment-details > div:has(i.fa-globe),
#appointment-details > div:has(svg.fa-globe),
#appointment-details > div:has(.fa-globe) { display: none !important; }

/* Адаптивность (минимальные правки) */
#main.container.min-vh-100,
#main.container { min-height: auto !important; height: auto !important; }
.row.wrapper.min-vh-100,
.row.wrapper { min-height: auto !important; height: auto !important; }
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container,
.frame-container { min-height: auto !important; height: auto !important; }

/* Кнопка "Далее" — цвет как у шапки */
.btn-dark,
.button-next,
#button-next-1,
#button-next-2,
#button-next-3 {
    background-color: #2780e3 !important;
    border-color: #2780e3 !important;
    color: #ffffff !important;
}
.btn-dark:hover,
.button-next:hover,
#button-next-1:hover,
#button-next-2:hover,
#button-next-3:hover {
    background-color: #1e6ac2 !important;
    border-color: #1e6ac2 !important;
}

/* Скругление углов 30px */
.btn, button,
input[type="button"], input[type="submit"],
.form-control, .form-select, select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea,
#select-service, #select-provider,
#available-hours button, #available-hours .btn,
#timezone-info, .badge { border-radius: 30px !important; }
.form-select, select { padding-right: 40px !important; }
#header { border-top-left-radius: 30px !important; border-top-right-radius: 30px !important; }
#frame-footer { border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; }
#book-appointment-wizard { border-radius: 30px !important; overflow: hidden !important; }

/* Адаптивность для телефонов */
@media (max-width: 767px) {
    .btn, .form-control, .form-select, #timezone-info,
    #available-hours button, #available-hours .btn { border-radius: 20px !important; }
    #header, #frame-footer, #book-appointment-wizard { border-radius: 20px !important; }
}

/* ===== ФИНАЛЬНАЯ ВЕРСТКА +30% шрифтов + стилизованная контактная информация ===== */

/* 1. Убираем лишнюю высоту — кнопка "Далее" видна */
#main.container.min-vh-100,
#main.container { min-height: auto !important; height: auto !important; }
.row.wrapper.min-vh-100,
.row.wrapper { min-height: auto !important; height: auto !important; }
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container,
.frame-container { min-height: auto !important; height: auto !important; }

/* 2. Компактные отступы */
#wizard-frame-1, #wizard-frame-2, #wizard-frame-3, #wizard-frame-4 {
    padding-top: 6px !important; padding-bottom: 10px !important;
}
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container {
    padding-top: 4px !important; padding-bottom: 6px !important;
}
.frame-title,
h2.frame-title { margin-top: 4px !important; margin-bottom: 14px !important; }
#header { padding: 16px 20px !important; }
.frame-content { margin: 0 !important; }
#book-appointment-wizard { margin: 10px auto !important; }
.command-buttons { margin: 10px auto !important; padding: 6px 0 !important; }
#timezone-info { padding: 10px 15px !important; margin-bottom: 8px !important; }

/* 3. Скрываем селектор часового пояса и строку в деталях записи */
.mb-3:has(#select-timezone),
#select-timezone,
label[for="select-timezone"] { display: none !important; }
#appointment-details > div:has(i.fa-globe),
#appointment-details > div:has(svg.fa-globe),
#appointment-details > div:has(.fa-globe) { display: none !important; }

/* 4. ШРИФТЫ +30% */
body { font-size: 130% !important; }
.form-control, .form-select { font-size: 1.25rem !important; padding: 10px 14px !important; }
label, .form-label { font-size: 1.25rem !important; }
.btn { font-size: 1.25rem !important; padding: 10px 22px !important; }
.frame-title, h2.frame-title { font-size: 1.65rem !important; }
#timezone-info { font-size: 1.25rem !important; }
#timezone-info p { font-size: 1.25rem !important; }
#company-name { font-size: 1.65rem !important; }
#steps strong { font-size: 1.3em !important; }
#frame-footer small { font-size: 1.1rem !important; }
#available-hours button, #available-hours .btn {
    font-size: 1.25rem !important; padding: 12px 20px !important;
}

/* 5. КНОПКА "ДАЛЕЕ" — цвет шапки */
.btn-dark, .button-next,
#button-next-1, #button-next-2, #button-next-3 {
    background-color: #2780e3 !important;
    border-color: #2780e3 !important;
    color: #ffffff !important;
}
.btn-dark:hover, .button-next:hover,
#button-next-1:hover, #button-next-2:hover, #button-next-3:hover {
    background-color: #1e6ac2 !important;
    border-color: #1e6ac2 !important;
}
#book-appointment-submit {
    background-color: #2780e3 !important;
    border-color: #2780e3 !important;
    color: #ffffff !important;
}
#book-appointment-submit:hover {
    background-color: #1e6ac2 !important;
    border-color: #1e6ac2 !important;
}

/* 6. СКРУГЛЕНИЕ 30px везде */
.btn, button,
input[type="button"], input[type="submit"],
.form-control, .form-select, select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea,
#select-service, #select-provider,
#available-hours button, #available-hours .btn,
#timezone-info, .badge { border-radius: 30px !important; }
.form-select, select { padding-right: 40px !important; }
#header { border-top-left-radius: 30px !important; border-top-right-radius: 30px !important; }
#frame-footer { border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; }
#book-appointment-wizard { border-radius: 30px !important; overflow: hidden !important; }

/* 7. КОНТАКТНАЯ ИНФОРМАЦИЯ — рамка + фон + центрирование */
#customer-details {
    background-color: rgba(39, 128, 227, 0.10) !important; /* тот же цвет, 10% прозрачности */
    border: 2px solid rgba(39, 128, 227, 0.30) !important; /* тот же цвет, 30% прозрачности */
    border-radius: 30px !important;
    padding: 20px 24px !important;
    text-align: center !important; /* центрируем текст внутри блока */
    margin: 12px auto !important; /* центрируем блок на странице */
    max-width: 520px !important;
    box-shadow: 0 2px 8px rgba(39, 128, 227, 0.08) !important;
}

/* Заголовки внутри блока — тоже центрированы */
#customer-details h3,
#customer-details strong {
    text-align: center !important;
}

/* Строки внутри блока — центрируем содержимое */
#customer-details > div,
#customer-details > p {
    display: block !important;
    text-align: center !important;
}

/* Детали записи — тоже центрируем, чтобы сочеталось */
#appointment-details {
    text-align: center !important;
    margin: 12px auto !important;
    max-width: 520px !important;
}

/* Контейнер вокруг деталей — центрируем обе колонки */
#wizard-frame-4 .frame-content {
    justify-content: center !important;
    align-items: center !important;
}

/* ===== Адаптивность для телефонов ===== */
@media (max-width: 767px) {
    body { font-size: 125% !important; }
    #wizard-frame-1, #wizard-frame-2, #wizard-frame-3, #wizard-frame-4 {
        padding: 8px !important;
    }
    #header { padding: 12px 15px !important; }
    .frame-title, h2.frame-title { font-size: 1.45rem !important; }
    #company-name { font-size: 1.45rem !important; }
    #timezone-info { font-size: 1.1rem !important; padding: 8px 10px !important; }
    .form-control, .form-select { font-size: 1.1rem !important; padding: 9px 13px !important; }
    .btn { font-size: 1.1rem !important; padding: 9px 18px !important; }
    .btn, .form-control, .form-select, #timezone-info,
    #available-hours button, #available-hours .btn {
        border-radius: 20px !important;
    }
    #header, #frame-footer, #book-appointment-wizard {
        border-radius: 20px !important;
    }
    /* На телефоне — контактный блок на всю ширину, скругление 20px */
    #customer-details, #appointment-details {
        max-width: 100% !important;
        padding: 16px 18px !important;
        border-radius: 20px !important;
        margin: 10px 0 !important;
    }
}
/* ===== ФИНАЛЬНАЯ ВЕРСТКА +30% шрифтов + ЦЕНТРИРОВАНИЕ КОНТАКТОВ ===== */

/* 1. Убираем лишнюю высоту – кнопка "Далее" видна */
#main.container.min-vh-100,
#main.container { min-height: auto !important; height: auto !important; }
.row.wrapper.min-vh-100,
.row.wrapper { min-height: auto !important; height: auto !important; }
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container,
.frame-container { min-height: auto !important; height: auto !important; }

/* 2. Компактные отступы */
#wizard-frame-1, #wizard-frame-2, #wizard-frame-3, #wizard-frame-4 {
  padding-top: 6px !important; padding-bottom: 10px !important;
}
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container {
  padding-top: 4px !important; padding-bottom: 6px !important;
}
.frame-title,
h2.frame-title { margin-top: 4px !important; margin-bottom: 14px !important; }
#header { padding: 16px 20px !important; }
.frame-content { margin: 0 !important; }
#book-appointment-wizard { margin: 10px auto !important; }
.command-buttons { margin: 10px auto !important; padding: 6px 0 !important; }
#timezone-info { padding: 10px 15px !important; margin-bottom: 8px !important; }

/* 3. Скрываем селектор часового пояса и строку в деталях записи */
.mb-3:has(#select-timezone),
#select-timezone,
label[for="select-timezone"] { display: none !important; }
#appointment-details > div:has(i.fa-globe),
#appointment-details > div:has(svg.fa-globe),
#appointment-details > div:has(.fa-globe) { display: none !important; }

/* 4. ШРИФТЫ +30% (не уменьшаем) */
body { font-size: 130% !important; }
.form-control, .form-select { font-size: 1.25rem !important; padding: 10px 14px !important; }
label, .form-label { font-size: 1.25rem !important; }
.btn { font-size: 1.25rem !important; padding: 10px 22px !important; }
.frame-title, h2.frame-title { font-size: 1.65rem !important; }
#timezone-info { font-size: 1.25rem !important; }
#timezone-info p { font-size: 1.25rem !important; }
#company-name { font-size: 1.65rem !important; }
#steps strong { font-size: 1.3em !important; }
#frame-footer small { font-size: 1.1rem !important; }
#available-hours button, #available-hours .btn { font-size: 1.25rem !important; padding: 12px 20px !important; }

/* 5. КНОПКА "ДАЛЕЕ" - цвет шапки */
.btn-dark,
.button-next,
#button-next-1, #button-next-2, #button-next-3 {
  background-color: #2780e3 !important;
  border-color: #2780e3 !important;
  color: #ffffff !important;
}
.btn-dark:hover, .button-next:hover,
#button-next-1:hover, #button-next-2:hover, #button-next-3:hover {
  background-color: #1e6ac2 !important;
  border-color: #1e6ac2 !important;
}
#book-appointment-submit {
  background-color: #2780e3 !important;
  border-color: #2780e3 !important;
  color: #ffffff !important;
}
#book-appointment-submit:hover {
  background-color: #1e6ac2 !important;
  border-color: #1e6ac2 !important;
}

/* 6. СКРУГЛЕНИЕ 30px везде */
.btn, button,
input[type="button"], input[type="submit"],
.form-control, .form-select, select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea,
#select-service, #select-provider,
#available-hours button, #available-hours .btn,
#timezone-info, .badge { border-radius: 30px !important; }
.form-select, select { padding-right: 40px !important; }
#header { border-top-left-radius: 30px !important; border-top-right-radius: 30px !important; }
#frame-footer { border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; }
#book-appointment-wizard { border-radius: 30px !important; overflow: hidden !important; }

/* 7. КОНТАКТНАЯ ИНФОРМАЦИЯ - рамка + фон + ЦЕНТРИРОВАНИЕ */
#customer-details {
  background-color: rgba(39, 128, 227, 0.10) !important;
  border: 2px solid rgba(39, 128, 227, 0.30) !important;
  border-radius: 30px !important;
  padding: 20px 24px !important;
  text-align: center !important;
  margin: 12px auto !important;
  max-width: 520px !important;
  box-shadow: 0 2px 8px rgba(39, 128, 227, 0.08) !important;
}
#customer-details h3,
#customer-details strong { text-align: center !important; }
#customer-details > div,
#customer-details > p { display: block !important; text-align: center !important; }

/* 8. ЦЕНТРИРУЕМ КОЛОНКИ НА ШАГЕ 4 — делаем их полной ширины */
#wizard-frame-4 .row {
  justify-content: center !important;
}
#wizard-frame-4 .col-12.col-lg-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}
#appointment-details {
  text-align: center !important;
  margin: 12px auto !important;
  max-width: 520px !important;
}

/* ===== Адаптивность для телефонов ===== */
@media (max-width: 767px) {
  body { font-size: 125% !important; }
  #wizard-frame-1, #wizard-frame-2, #wizard-frame-3, #wizard-frame-4 { padding: 8px !important; }
  #header { padding: 12px 15px !important; }
  .frame-title, h2.frame-title { font-size: 1.45rem !important; }
  #company-name { font-size: 1.45rem !important; }
  #timezone-info { font-size: 1.1rem !important; padding: 8px 10px !important; }
  .form-control, .form-select { font-size: 1.1rem !important; padding: 9px 13px !important; }
  .btn { font-size: 1.1rem !important; padding: 9px 18px !important; }
  .btn, .form-control, .form-select, #timezone-info,
  #available-hours button, #available-hours .btn { border-radius: 20px !important; }
  #header, #frame-footer, #book-appointment-wizard { border-radius: 20px !important; }
  #customer-details, #appointment-details {
    max-width: 100% !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
    margin: 10px 0 !important;
  }
  #wizard-frame-4 .col-12.col-lg-6 {
    max-width: 100% !important;
  }
}
/* ===== ВОССТАНОВЛЕННАЯ ВЕРСТКА +30% шрифтов ===== */

/* 1. Убираем лишнюю высоту – кнопка "Далее" видна */
#main.container.min-vh-100,
#main.container { min-height: auto !important; height: auto !important; }
.row.wrapper.min-vh-100,
.row.wrapper { min-height: auto !important; height: auto !important; }
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container,
.frame-container { min-height: auto !important; height: auto !important; }

/* 2. Компактные отступы */
#wizard-frame-1, #wizard-frame-2, #wizard-frame-3, #wizard-frame-4 {
  padding-top: 6px !important; padding-bottom: 10px !important;
}
#wizard-frame-1 .frame-container,
#wizard-frame-2 .frame-container,
#wizard-frame-3 .frame-container,
#wizard-frame-4 .frame-container {
  padding-top: 4px !important; padding-bottom: 6px !important;
}
.frame-title, h2.frame-title { margin-top: 4px !important; margin-bottom: 14px !important; }
#header { padding: 16px 20px !important; }
.frame-content { margin: 0 !important; }
#book-appointment-wizard { margin: 10px auto !important; }
.command-buttons { margin: 10px auto !important; padding: 6px 0 !important; }
#timezone-info { padding: 10px 15px !important; margin-bottom: 8px !important; }

/* 3. Скрываем селектор часового пояса и строку в деталях записи */
.mb-3:has(#select-timezone),
#select-timezone,
label[for="select-timezone"] { display: none !important; }
#appointment-details > div:has(i.fa-globe),
#appointment-details > div:has(svg.fa-globe),
#appointment-details > div:has(.fa-globe) { display: none !important; }

/* 4. ШРИФТЫ +30% */
body { font-size: 130% !important; }
.form-control, .form-select { font-size: 1.25rem !important; padding: 10px 14px !important; }
label, .form-label { font-size: 1.25rem !important; }
.btn { font-size: 1.25rem !important; padding: 10px 22px !important; }
.frame-title, h2.frame-title { font-size: 1.65rem !important; }
#timezone-info { font-size: 1.25rem !important; }
#timezone-info p { font-size: 1.25rem !important; }
#company-name { font-size: 1.65rem !important; }
#steps strong { font-size: 1.3em !important; }
#frame-footer small { font-size: 1.1rem !important; }
#available-hours button, #available-hours .btn { font-size: 1.25rem !important; padding: 12px 20px !important; }

/* 5. КНОПКА "ДАЛЕЕ" - цвет шапки */
.btn-dark, .button-next,
#button-next-1, #button-next-2, #button-next-3 {
  background-color: #2780e3 !important;
  border-color: #2780e3 !important;
  color: #ffffff !important;
}
.btn-dark:hover, .button-next:hover,
#button-next-1:hover, #button-next-2:hover, #button-next-3:hover {
  background-color: #1e6ac2 !important;
  border-color: #1e6ac2 !important;
}
#book-appointment-submit {
  background-color: #2780e3 !important;
  border-color: #2780e3 !important;
  color: #ffffff !important;
}
#book-appointment-submit:hover {
  background-color: #1e6ac2 !important;
  border-color: #1e6ac2 !important;
}

/* 6. СКРУГЛЕНИЕ 30px */
.btn, button,
input[type="button"], input[type="submit"],
.form-control, .form-select, select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea, #select-service, #select-provider,
#available-hours button, #available-hours .btn,
#timezone-info, .badge { border-radius: 30px !important; }
.form-select, select { padding-right: 40px !important; }
#header { border-top-left-radius: 30px !important; border-top-right-radius: 30px !important; }
#frame-footer { border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; }
#book-appointment-wizard { border-radius: 30px !important; overflow: hidden !important; }

/* ===== 7. ШАГ 4: ЦЕНТРИРОВАНИЕ КОЛОНОК ===== */

/* Строка становится flex-колонкой, чтобы колонки складывались друг под другом */
#wizard-frame-4 .row.frame-content {
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Каждая колонка — 520px максимум, центрируется через margin: auto */
#wizard-frame-4 .col-12.col-lg-6 {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto 16px auto !important;
  padding: 0 !important;
  text-align: center !important;
  float: none !important;
}

/* Сам блок контактов: рамка + фон + скругление.
   Специфичность (2 ID) > (1 ID + 2 класса), поэтому padding 20px 24px
   НЕ будет перебит правилом выше. */
#wizard-frame-4 #customer-details {
  padding: 20px 24px !important;
  background-color: rgba(39, 128, 227, 0.10) !important;
  border: 2px solid rgba(39, 128, 227, 0.30) !important;
  border-radius: 30px !important;
  box-shadow: 0 2px 8px rgba(39, 128, 227, 0.08) !important;
  text-align: center !important;
}

#wizard-frame-4 #customer-details h3,
#wizard-frame-4 #customer-details strong,
#wizard-frame-4 #customer-details > div,
#wizard-frame-4 #customer-details > p {
  text-align: center !important;
}

/* ===== 8. Адаптивность для телефонов ===== */
@media (max-width: 767px) {
  body { font-size: 125% !important; }
  #wizard-frame-1, #wizard-frame-2, #wizard-frame-3, #wizard-frame-4 { padding: 8px !important; }
  #header { padding: 12px 15px !important; }
  .frame-title, h2.frame-title { font-size: 1.45rem !important; }
  #company-name { font-size: 1.45rem !important; }
  #timezone-info { font-size: 1.1rem !important; padding: 8px 10px !important; }
  .form-control, .form-select { font-size: 1.1rem !important; padding: 9px 13px !important; }
  .btn { font-size: 1.1rem !important; padding: 9px 18px !important; }
  .btn, .form-control, .form-select, #timezone-info,
  #available-hours button, #available-hours .btn { border-radius: 20px !important; }
  #header, #frame-footer, #book-appointment-wizard { border-radius: 20px !important; }
  #wizard-frame-4 .col-12.col-lg-6 {
    max-width: 100% !important;
    margin: 8px auto !important;
  }
  #wizard-frame-4 #customer-details {
    padding: 16px 18px !important;
    border-radius: 20px !important;
  }
}

/* ===== АДАПТИВНАЯ ШАПКА E!A ===== */
#company-name { min-width: 0; max-width: 100%; overflow: hidden; }
#company-name .display-booking-selection {
    display: block;
    font-size: 0.92em !important;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#steps { flex-shrink: 0; }
@media (max-width: 991px) {
    #company-name .display-booking-selection { font-size: 0.85em !important; }
}
@media (max-width: 767px) {
    #company-name .display-booking-selection {
        font-size: 0.8em !important;
        white-space: normal;
        word-break: break-word;
    }
    #steps { width: 160px !important; }
}

/* ============================================================
   MODERN 2026 REDESIGN
   ============================================================ */
:root {
    --brand-1: #4F7FFF;
    --brand-2: #8B5CF6;
    --brand-grad: linear-gradient(135deg, #4F7FFF 0%, #8B5CF6 100%);
    --brand-soft: rgba(79,127,255,0.08);
    --text-1: #0F172A;
    --text-2: #475569;
    --border-1: #E7ECF5;
    --r-xl: 32px;
    --r-lg: 24px;
    --r-md: 16px;
}

body, .body, .content, main, button, input, select, textarea {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body {
    background:
        radial-gradient(circle at 0% 0%, rgba(139,92,246,0.10) 0%, transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(79,127,255,0.10) 0%, transparent 42%),
        #F5F8FF !important;
    min-height: 100vh !important;
    color: var(--text-1) !important;
}

#book-appointment-wizard {
    background: #FFFFFF !important;
    border-radius: var(--r-xl) !important;
    box-shadow: 0 24px 64px rgba(15,23,42,0.09), 0 6px 18px rgba(15,23,42,0.05) !important;
    border: 1px solid var(--border-1) !important;
    overflow: hidden !important;
    max-width: 760px !important;
    margin: 32px auto !important;
}

#header {
    background: var(--brand-grad) !important;
    padding: 28px 32px !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
}

#header::before {
    content: '';
    position: absolute;
    top: -60%; right: -20%;
    width: 70%; height: 220%;
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%);
    pointer-events: none;
}

#company-name {
    position: relative; z-index: 2;
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    line-height: 1.25 !important;
}

.display-booking-selection {
    font-size: 0.9rem !important;
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

#steps strong {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18) !important;
    border: 2px solid rgba(255,255,255,0.42) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 4px;
    transition: all 0.25s ease;
}

.wizard-frame {
    padding: 36px 40px 24px !important;
    animation: m26-fade 0.35s ease;
}

@keyframes m26-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.frame-container { min-height: auto !important; }

.frame-title, h2.frame-title {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    color: var(--text-1) !important;
    margin: 0 0 28px !important;
    text-align: center;
}

.form-control, .form-select, select {
    background: #F8FAFE !important;
    border: 1.5px solid var(--border-1) !important;
    border-radius: var(--r-md) !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    color: var(--text-1) !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    box-shadow: none !important;
}

.form-control:focus, .form-select:focus, select:focus {
    background: #fff !important;
    border-color: var(--brand-1) !important;
    box-shadow: 0 0 0 4px var(--brand-soft) !important;
    outline: none !important;
}

label, .form-label {
    font-weight: 600 !important;
    color: var(--text-2) !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
}

.btn, button.btn {
    border-radius: var(--r-md) !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease;
    border: none !important;
}

.btn-dark, #button-next-1, #button-next-2, #button-next-3, #book-appointment-submit {
    background: var(--brand-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(79,127,255,0.28) !important;
}

.btn-dark:hover, #button-next-1:hover, #button-next-2:hover, #button-next-3:hover, #book-appointment-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(79,127,255,0.38) !important;
}

.btn-outline-secondary {
    background: #fff !important;
    border: 1.5px solid var(--border-1) !important;
    color: var(--text-2) !important;
}

.btn-outline-secondary:hover {
    border-color: var(--brand-1) !important;
    color: var(--brand-1) !important;
    background: var(--brand-soft) !important;
}

.command-buttons {
    margin: 16px 0 8px !important;
    padding: 0 !important;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

#available-hours {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px 0;
}

#available-hours .btn, #available-hours button {
    border-radius: 999px !important;
    padding: 11px 22px !important;
    background: #F8FAFE !important;
    border: 1.5px solid var(--border-1) !important;
    color: var(--text-1) !important;
    font-weight: 600;
    margin: 0 !important;
    transition: all 0.18s ease;
}

#available-hours .btn:hover, #available-hours button:hover {
    border-color: var(--brand-1) !important;
    background: var(--brand-soft) !important;
    transform: translateY(-1px);
}

#available-hours .btn.active, #available-hours button.active,
#available-hours .btn-primary, #available-hours .selected {
    background: var(--brand-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(79,127,255,0.35);
}

#frame-footer {
    background: #F8FAFE !important;
    border-top: 1px solid var(--border-1) !important;
    padding: 20px 40px !important;
    border-radius: 0 !important;
    text-align: center;
}

#frame-footer small { color: #94A3B8 !important; font-size: 0.85rem !important; }

#customer-details {
    background: linear-gradient(135deg, rgba(79,127,255,0.06) 0%, rgba(139,92,246,0.06) 100%) !important;
    border: 1.5px solid rgba(79,127,255,0.18) !important;
    border-radius: var(--r-lg) !important;
    padding: 24px 28px !important;
    margin: 12px auto !important;
    max-width: 520px;
}

#appointment-details {
    text-align: center !important;
    margin: 12px auto !important;
    max-width: 520px;
}

#timezone-info {
    background: #F0F5FF !important;
    border: 1px solid #DDE7FF !important;
    border-radius: var(--r-md) !important;
    padding: 12px 18px !important;
    margin: 0 auto 20px !important;
    max-width: 640px;
    text-align: center;
    color: var(--text-2) !important;
    font-size: 0.95rem !important;
}

#custom-sms-block {
    border-radius: var(--r-lg) !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#custom-sms-policy-note {
    border-radius: var(--r-md) !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    #book-appointment-wizard { margin: 12px !important; border-radius: 24px !important; }
    #header { padding: 20px 20px !important; }
    #company-name { font-size: 1.25rem !important; }
    .wizard-frame { padding: 24px 20px 16px !important; }
    .frame-title, h2.frame-title { font-size: 1.35rem !important; margin-bottom: 20px !important; }
    #frame-footer { padding: 14px 16px !important; }
    .btn { padding: 12px 20px !important; font-size: 0.95rem !important; }
    #steps strong { width: 34px; height: 34px; font-size: 0.85rem !important; }
    .command-buttons { flex-direction: column-reverse; gap: 8px; }
    .command-buttons .btn { width: 100%; }
}