/* =====================================================
   patra.fit × SimplyBook — Custom CSS FINAL v4
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Типографика ── */
body,
input,
button,
select,
textarea,
.unit-name,
.company-name,
.step-title,
.service-name,
.provider-name {
  font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3,
.company-name,
.unit-name,
.timeline-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* ── Фон ── */
body {
  background-color: #f5f2ea !important;
}

/* ── Шапка ── */
.navbar,
.sb-header,
.booking-header,
[class*="header--top"],
.company-header,
.intro-header {
  background-color: #2f3a28 !important;
  border-bottom: none !important;
}

.company-name,
.navbar .company-name,
.header .company-name {
  color: #ffffff !important;
  font-family: 'Fraunces', serif !important;
}

/* ── Баннер ── */
.intro-section,
.sb-intro,
.banner,
.company-banner,
[class*="banner-image"],
[class*="intro-image"],
.hero-image {
  max-height: 160px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.intro-section img,
.banner img,
.company-banner img,
[class*="banner-image"] img {
  object-fit: cover !important;
  object-position: center !important;
  max-height: 160px !important;
  width: 100% !important;
}

/* ── Контент ── */
.content-wrapper,
.booking-content,
.sb-content,
.container,
.main-content {
  background-color: #f5f2ea !important;
}

/* ── Карточки ── */
.unit-wrapper,
.unit-item,
.provider-item,
.service-item,
.unit-block,
.timeline-unit {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(47, 58, 40, 0.09) !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.unit-item:hover,
.provider-item:hover,
.service-item:hover {
  box-shadow: 0 8px 28px rgba(47, 58, 40, 0.12) !important;
  transform: translateY(-2px) !important;
}

.unit-name, .provider-name, .service-name { color: #2f3a28 !important; font-weight: 500 !important; }
.unit-price, .price, .service-price { color: #2f3a28 !important; font-weight: 500 !important; }
.unit-description, .service-description, .provider-description { color: #888888 !important; font-size: 13px !important; line-height: 1.55 !important; }

/* ── Кнопки ── */
.btn-primary,
.book-now,
.booking-btn,
.submit-btn,
.continue-btn,
[class*="btn-book"],
[class*="btn-confirm"],
.button-primary,
input[type="submit"],
button[type="submit"] {
  background-color: #a8c26a !important;
  color: #1e2b16 !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  transition: background-color 0.15s !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary:hover,
.book-now:hover,
[class*="btn-book"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #c5dc85 !important;
  color: #1e2b16 !important;
  transform: none !important;
}

.btn-default, .btn-secondary, .btn-outline, .button-secondary {
  background-color: transparent !important;
  color: #2f3a28 !important;
  border: 1px solid rgba(47, 58, 40, 0.25) !important;
  border-radius: 9px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
}

/* ── Шаги ── */
.step-number { background-color: #2f3a28 !important; color: #ffffff !important; border-radius: 50% !important; font-weight: 500 !important; }
.step-title { color: #2f3a28 !important; font-weight: 500 !important; }
.step-active .step-number, .step.active .step-number { background-color: #a8c26a !important; color: #1e2b16 !important; }
.step-active .step-title, .step.active .step-title { color: #a8c26a !important; }
.step-done .step-number, .step.done .step-number { background-color: #2f3a28 !important; }

/* ── Календарь ── */
.datepicker, .calendar-wrapper, .datepicker-wrapper { background: #ffffff !important; border-radius: 14px !important; border: 1px solid rgba(47, 58, 40, 0.09) !important; }
.datepicker th, .calendar th, .day-header { color: #2f3a28 !important; font-weight: 500 !important; font-size: 12px !important; }
.datepicker .active, .datepicker td.active, .day.selected, .day.active { background-color: #2f3a28 !important; color: #ffffff !important; border-radius: 8px !important; }
.datepicker td:hover, .day:hover:not(.disabled) { background-color: #e8f0d8 !important; color: #2f3a28 !important; border-radius: 8px !important; }

/* ── Слоты ── */
.time-slot, .slot, [class*="time-item"], [class*="slot-item"] { background-color: #e8f0d8 !important; color: #2f3a28 !important; border: 1px solid rgba(47, 58, 40, 0.12) !important; border-radius: 8px !important; font-weight: 400 !important; transition: background-color 0.15s !important; }
.time-slot:hover, .slot:hover { background-color: #a8c26a !important; color: #1e2b16 !important; border-color: #a8c26a !important; }
.time-slot.selected, .slot.selected, .time-slot.active { background-color: #2f3a28 !important; color: #ffffff !important; border-color: #2f3a28 !important; }
.time-slot.busy, .time-slot.disabled, .slot.disabled { background-color: #c8d4b8 !important; color: #999 !important; opacity: 0.5 !important; cursor: not-allowed !important; }

/* ═══════════════════════════════════════════════════
   PHONE FIELD — ПОЛНОЕ СКРЫТИЕ ITI, ЧИСТЫЙ ИНПУТ
   
   Прячем весь блок с флагом/дропдауном (iti),
   показываем только реальный input[type=tel]
   с обычным стилем и placeholder "+34 612 345 678"
   ═══════════════════════════════════════════════════ */

/* Скрываем всю обёртку iti с флагом и дропдауном */
.form-group.phone .iti,
.form-group.phone .iti__country-container,
.form-group.phone .iti__flag-container,
.form-group.phone button.iti__selected-country,
.form-group.phone .iti__dropdown-content,
.form-group.phone .iti__arrow,
.form-group.phone .iti__search-input,
.form-group.phone .iti__country-list {
  display: none !important;
}

/* Сбрасываем .input-group — убираем flex-обёртку с border */
.form-group.phone .input-group {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Показываем реальный инпут как обычное поле */
.form-group.phone input[type="tel"] {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(47, 58, 40, 0.18) !important;
  border-radius: 9px !important;
  color: #2f3a28 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  /* Нормальный padding — флага нет, не нужен отступ слева */
  padding: 10px 14px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
  /* Placeholder через attr не меняем — меняем через CSS ниже */
}

.form-group.phone input[type="tel"]:focus {
  border-color: #a8c26a !important;
  box-shadow: 0 0 0 3px rgba(168, 194, 106, 0.15) !important;
}

/* Placeholder — показываем формат с кодом страны */
.form-group.phone input[type="tel"]::placeholder {
  color: #bbb !important;
  content: "+34 612 345 678" !important;
}

/* Если placeholder не меняется через CSS (браузер берёт из HTML attr),
   добавляем подсказку через label или описание ниже поля */
.form-group.phone::after {
  content: "Incluye el código de país, ej. +34 612 345 678";
  display: block !important;
  font-size: 11px !important;
  color: #aaa !important;
  margin-top: 5px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ═══ КОНЕЦ БЛОКА ТЕЛЕФОНА ═══════════════════════════ */

/* ── Поля ввода (все) ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea {
  background-color: #ffffff !important;
  border: 1px solid rgba(47, 58, 40, 0.18) !important;
  border-radius: 9px !important;
  color: #2f3a28 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color 0.15s !important;
  box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: #a8c26a !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 194, 106, 0.15) !important;
}

select {
  background-color: #ffffff !important;
  border: 1px solid rgba(47, 58, 40, 0.18) !important;
  border-radius: 9px !important;
  color: #2f3a28 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
}

label, .form-label, .field-label {
  color: #2f3a28 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

input[type="checkbox"] {
  accent-color: #a8c26a !important;
}

/* ── Подтверждение ── */
.confirmation-wrapper, .booking-confirmation, .success-block { background: #ffffff !important; border-radius: 16px !important; border: 1px solid rgba(47, 58, 40, 0.09) !important; }
.confirmation-title, .success-title { color: #2f3a28 !important; font-family: 'Fraunces', serif !important; }
.confirmation-icon, .success-icon { color: #a8c26a !important; }

/* ── Футер ── */
.booking-footer, .sb-footer, .footer-booking { background-color: #1e2b16 !important; color: rgba(255,255,255,0.4) !important; }
.booking-footer a, .sb-footer a { color: rgba(255,255,255,0.4) !important; }
.booking-footer a:hover, .sb-footer a:hover { color: rgba(255,255,255,0.7) !important; }

/* ── Алерты ── */
.alert-success { background-color: #e8f0d8 !important; border-color: #a8c26a !important; color: #2f3a28 !important; border-radius: 10px !important; }
.alert-info { background-color: rgba(168,194,106,0.1) !important; border-color: rgba(168,194,106,0.3) !important; color: #2f3a28 !important; border-radius: 10px !important; }

/* ── Бейджи ── */
.badge, .tag, .label-tag { background-color: #f5f2ea !important; color: #2f3a28 !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 500 !important; padding: 3px 10px !important; }

/* ── Скроллбар ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f5f2ea; }
::-webkit-scrollbar-thumb { background: #c8d4b8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #a8c26a; }