/* ═══ Класичний пошуковий віджет [anex_search] — форма search-classic на головній ═══
   Всі правила заскоуплені під .anex-scw (специфічність 0,2,0+ перекриває
   reset.css Hello Elementor, який вантажиться після нашого CSS). */

.anex-scw {
  position: relative;
  z-index: 10; /* віджет завжди над декоративними hero-блоками Elementor */

  --anex-red: #f31624;
  --anex-red-hover: #de0f1c;
  --anex-text: #1a2233;
  --anex-label: #8b95a8;
  --anex-line: #e8ecf2;
  --anex-bg: #f6f8fb;
  --anex-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-radius: 14px;

  font-family: var(--anex-font);
  color: var(--anex-text);
  -webkit-font-smoothing: antialiased;
}
.anex-scw *,
.anex-scw *::before,
.anex-scw *::after { box-sizing: border-box; }

/* ─── Таби ──────────────────────────────────────────────────────────── */

.anex-scw .sc-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--anex-line);
  border-radius: 12px;
}
.anex-scw .sc-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  margin: 0;
  font: 700 14px var(--anex-font);
  color: var(--anex-text);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.anex-scw .sc-tab.is-active {
  background: var(--anex-red);
  color: #fff;
}
.anex-scw .sc-tab:not(.is-active):hover { color: var(--anex-red); }

/* ─── Форма ─────────────────────────────────────────────────────────── */

.anex-scw .sc-form {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 0.65fr 1fr 1.1fr auto;
  gap: 12px;
  align-items: end;
  margin: 0;
  background: #fff;
  border: 1px solid var(--anex-line);
  border-radius: var(--sc-radius);
  padding: 16px;
  box-shadow: 0 6px 24px rgba(26, 34, 51, 0.06);
}

.anex-scw .sc-field { min-width: 0; position: relative; }

.anex-scw .sc-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--anex-label);
  margin: 0 0 6px;
}

.anex-scw .sc-select,
.anex-scw .sc-input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  margin: 0;
  font: 600 14px var(--anex-font);
  color: var(--anex-text);
  background: #fff;
  border: 1px solid var(--anex-line);
  border-radius: 10px;
  outline: none;
  appearance: auto;
  box-shadow: none;
}
.anex-scw .sc-select:focus,
.anex-scw .sc-input:focus { border-color: var(--anex-red); }

/* Приховані <select> — залишаються джерелом значення/стану, керуються кастомним UI нижче */
.anex-scw .sc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Напрямок / Звідки — кастомний dropdown (список — 1в1 як на xo.ua) */
.anex-scw .sc-dd-btn,
.anex-scw button.sc-select {
  background: #fff;
  color: var(--anex-text);
}
.anex-scw .sc-dd-btn {
  text-align: left;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anex-scw .sc-dd-btn::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--anex-label);
  border-bottom: 1.5px solid var(--anex-label);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.anex-scw .sc-dd-btn:hover,
.anex-scw .sc-dd-btn:focus,
.anex-scw button.sc-select:hover,
.anex-scw button.sc-select:focus {
  border-color: var(--anex-red);
  background: #fff;
  color: var(--anex-text);
}
.anex-scw .sc-dd-btn[aria-expanded="true"] { border-color: var(--anex-red); }

.anex-scw .sc-dd-panel {
  position: absolute;
  z-index: 5000;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-width: 90vw;
  max-height: 350px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.anex-scw .sc-dd-first {
  padding: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e1e1e1;
}

.anex-scw .sc-dd-group { padding: 0 16px; margin-bottom: 24px; }
.anex-scw .sc-dd-group:last-child { margin-bottom: 16px; }

.anex-scw .sc-dd-group__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #202020;
  margin: 0 0 2px;
}

.anex-scw .sc-dd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}

.anex-scw .sc-dd-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.15s, background-color 0.15s;
}
.anex-scw .sc-dd-row:hover .sc-dd-checkbox { border-color: #3579e7; }
.anex-scw .sc-dd-row.is-checked .sc-dd-checkbox {
  border-color: #3579e7;
  background: #3579e7;
}
.anex-scw .sc-dd-checkbox svg { width: 12px; height: 12px; opacity: 0; }
.anex-scw .sc-dd-row.is-checked .sc-dd-checkbox svg { opacity: 1; }

.anex-scw .sc-dd-row__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  color: #202020;
}

.anex-scw .sc-dateto-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.anex-scw .sc-dateto-plus { font-weight: 700; color: var(--anex-label); }
.anex-scw .sc-input--dateto { width: 64px; text-align: center; padding: 0 6px; }
.anex-scw .sc-dateto-days { font-size: 13px; color: var(--anex-label); white-space: nowrap; }

/* Туристи */
.anex-scw .sc-guests-btn {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  margin: 0;
  font: 600 14px var(--anex-font);
  color: var(--anex-text);
  text-align: left;
  background: #fff;
  border: 1px solid var(--anex-line);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: none;
}
.anex-scw .sc-guests-btn:hover { border-color: var(--anex-red); background: #fff; color: var(--anex-text); }

.anex-scw .sc-guests-pop {
  position: absolute;
  z-index: 5000;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--anex-line);
  border-radius: var(--sc-radius);
  box-shadow: 0 12px 36px rgba(26, 34, 51, 0.16);
}
.anex-scw .sc-guests-group { margin-bottom: 12px; }

.anex-scw .sc-chiprow { display: flex; gap: 8px; }
.anex-scw .sc-chiprow button {
  flex: 1;
  height: 38px;
  padding: 0;
  margin: 0;
  font: 600 14px var(--anex-font);
  color: var(--anex-text);
  background: #fff;
  border: 1px solid var(--anex-line);
  border-radius: 9px;
  cursor: pointer;
}
.anex-scw .sc-chiprow button.is-active {
  background: var(--anex-red);
  border-color: var(--anex-red);
  color: #fff;
}

.anex-scw .sc-guests-ages { display: grid; gap: 8px; margin-bottom: 12px; }
.anex-scw .sc-guests-ages label {
  font-size: 12px;
  font-weight: 600;
  color: var(--anex-label);
}
.anex-scw .sc-guests-ages select {
  height: 40px;
  width: 100%;
  font: 600 14px var(--anex-font);
  border: 1px solid var(--anex-line);
  border-radius: 9px;
  background: #fff;
  color: var(--anex-text);
}

/* Кнопки */
.anex-scw .sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  margin: 0;
  font: 700 15px var(--anex-font);
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  box-shadow: none;
}
.anex-scw .sc-btn--primary { background: var(--anex-red); color: #fff; }
.anex-scw .sc-btn--primary:hover { background: var(--anex-red-hover); color: #fff; }
.anex-scw .sc-guests-apply { width: 100%; }

/* ─── Мобільний hero головної (Elementor) ───────────────────────────────
   Структура: #f490c83 — mobile-only фото (268px), за ним контейнер
   віджета, внутрішня обгортка якого (#669225e) в Elementor має
   margin-top:-200px — це затягувало форму під шапку сайту й зрізало
   таби та поле «Напрямок». Залишаємо фото як фон і м'якший наїзд:
   видно ~120px фото, таби лягають на фото, картка нижче. */

@media (max-width: 767px) {
  .elementor-element.elementor-element-f490c83 {
    background-size: cover !important;
    background-position: center top !important;
  }
  /* Внутрішній блок (#669225e) в Elementor має margin-top:-200px, але
     батько (#e4a46d1) з overflow:hidden ОБРІЗАЄ все, що вилазить вище
     його межі — саме так зникали таби і поле «Напрямок». Тому наїзд на
     фото робимо самим батьком, а внутрішній відступ обнуляємо. */
  .elementor-element.elementor-element-669225e {
    --margin-top: 0px !important;
    margin-top: 0 !important;
  }
  .elementor-element.elementor-element-e4a46d1 {
    --margin-top: -150px !important;
    margin-top: -150px !important;
    transform: none !important;
    position: relative;
    z-index: 20;
  }
}

/* ─── Адаптив ───────────────────────────────────────────────────────── */

/* iOS: нативний date-інпут ігнорує height без скидання appearance */
.anex-scw input[type="date"].sc-input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  display: flex;
  align-items: center;
}

@media (max-width: 1100px) and (min-width: 641px) {
  .anex-scw .sc-form {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "country country from from"
      "date dateto nights nights"
      "guests guests submit submit";
  }
  .anex-scw .sc-field--country { grid-area: country; }
  .anex-scw .sc-field--from { grid-area: from; }
  .anex-scw .sc-field--date { grid-area: date; }
  .anex-scw .sc-field--dateto { grid-area: dateto; }
  .anex-scw .sc-field--nights { grid-area: nights; }
  .anex-scw .sc-field--guests { grid-area: guests; }
  .anex-scw .sc-field--submit { grid-area: submit; }
  .anex-scw .sc-btn--search { width: 100%; }
}

@media (max-width: 640px) {
  /* Чітка сітка без порожніх клітинок */
  .anex-scw .sc-form {
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-areas:
      "country country"
      "from from"
      "date dateto"
      "nights nights"
      "guests guests"
      "submit submit";
    gap: 10px;
    padding: 14px;
  }
  .anex-scw .sc-field--country { grid-area: country; }
  .anex-scw .sc-field--from { grid-area: from; }
  .anex-scw .sc-field--date { grid-area: date; }
  .anex-scw .sc-field--dateto { grid-area: dateto; }
  .anex-scw .sc-field--nights { grid-area: nights; }
  .anex-scw .sc-field--guests { grid-area: guests; }
  .anex-scw .sc-field--submit { grid-area: submit; }

  /* «+N діб» без порожнього лейбла, по лінії інпута дати */
  .anex-scw .sc-field--dateto .sc-label { display: none; }
  .anex-scw .sc-input--dateto { flex: 1; width: auto; }

  .anex-scw .sc-btn--search { width: 100%; height: 50px; }
  .anex-scw .sc-guests-pop { left: 0; right: auto; width: 100%; }
  .anex-scw .sc-dd-panel { left: 0; width: 100%; max-width: none; }

  /* Таби на всю ширину */
  .anex-scw .sc-tabs { display: flex; width: 100%; }
  .anex-scw .sc-tab { flex: 1; justify-content: center; padding: 10px 8px; }
}