/* =========================================================
   ROOMA City Picker — CSS (чистовая версия)
   Что где править: см. блоки PATCH ниже
   ========================================================= */

/* ---------- ТРИГГЕР (мини-виджет в шапке) ---------- */
/* Кнопка со строкой города и стрелкой. Без фонов, без рамок. */
.city-picker__button{
  display:inline-flex; align-items:center; gap:8px;
  padding:0; background:none; border:0; box-shadow:none;
  cursor:pointer; color:inherit; font-size:14px; line-height:1;
}
.city-picker__button:focus{ outline:none; box-shadow:none; }
/* Текст города — при ховере только прозрачность */
.city-picker__label{ transition:opacity .2s ease; }
.city-picker__button:hover .city-picker__label{ opacity:.3; }
/* Иконка стрелки — двигаем на 4px вправо при ховере */
.city-picker__icon{
  width:14px; height:14px; transition:transform .2s ease;
}
.city-picker__button:hover .city-picker__icon{ transform:translateX(4px); }

/* ---------- ОВЕРЛЕЙ / ПОПАП ---------- */
.city-modal{ position:fixed; inset:0; z-index:9999; }
.city-modal[hidden]{ display:none !important; }
.city-modal__backdrop{
  position:absolute; inset:0; background:#000; opacity:0;
  transition:opacity .25s ease;
}
.city-modal__panel{
  position:relative; width:calc(100% - 40px); max-width:640px;
  margin:10vh auto 0; background:#fff; border-radius:0; /* без скруглений */
  padding:32px; box-shadow:none; opacity:0; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.city-modal.is-open .city-modal__backdrop{ opacity:.9; }
.city-modal.is-open .city-modal__panel{ opacity:1; transform:translateY(0); }

/* ---------- HEADER ---------- */
.city-modal__header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:20px;
}
.city-modal__header h2{ margin:0; font-size:20px; }

/* PATCH: крестик "Х" — 14px, никаких заливок/рамок при hover */
.item-close{
  width:14px; height:14px; padding:0;
  background:none !important; border:0 !important; box-shadow:none !important;
  cursor:pointer; position:relative; flex:0 0 14px;
}
.item-close:focus,
.item-close:hover{ background:none !important; border:0 !important; box-shadow:none !important; outline:none; }
/* Полоски, образующие "Х". Толщина — height. Цвет — background. */
.item-close__bar{
  position:absolute; left:0; right:0; top:50%;
  height:2px; background:#111; transform-origin:center;
  transition:transform .2s ease, opacity .2s ease;
}
.item-close__bar--1{ transform:translateY(-50%) rotate(45deg); }
.item-close__bar--2{ transform:translateY(-50%) rotate(-45deg); }
/* При hover превращаемся в "–" (нижняя полоса исчезает, верхняя выравнивается) */
.item-close:hover .item-close__bar--2{ opacity:0; }
.item-close:hover .item-close__bar--1{ transform:translateY(-50%) rotate(0deg); }

/* ---------- BODY ---------- */
.city-modal__row{ margin-bottom:16px; }

/* PATCH: дропдаун выбора города — строгий, без скруглений
   — рамка 1px #111
   — своя стрелка справа (твоя иконка) */
.city-select{
  width:100%; height:48px; border:1px solid #111; border-radius:0;
  background:#fff; font-size:14px; line-height:1;
  padding:0 44px 0 14px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url('https://roomadesign.ru/wp-content/uploads/2023/11/button-arrow.svg');
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px;
}
.city-select:focus{ outline:none; box-shadow:none; }

/* Поиск — строгий, без скруглений */
.city-search{ position:relative; }
.city-search__icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; /* PATCH: иконка поиска — 14px */
}
.city-search__input{
  width:100%; height:48px; border:1px solid #111; border-radius:0;
  background:#fff; font-size:14px; padding:0 14px 0 36px;
}
.city-search__input:focus{ outline:none; box-shadow:none; }

/* Кнопка "определить автоматически" — плоская, строгая */
.city-autodetect{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid #111; border-radius:0; background:#fff; cursor:pointer;
}
.city-autodetect__icon{ width:16px; height:16px; }

/* Список подсказок — без скруглений, строгие границы */
.city-modal__suggestions{
  border:1px solid #111; border-radius:0; background:#fff; overflow:hidden;
}
.city-suggest{ list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.city-suggest__item{ padding:10px 12px; cursor:pointer; background:#fff; }
.city-suggest__item:hover,
.city-suggest__item.is-active{ background:#f0f0f0; }
.city-suggest__item--empty{ color:#888; cursor:default; }

/* Подпись под формой */
.city-modal__note{ color:#666; font-size:12px; line-height:1.4; margin-top:8px; }

/* ---------- FOOTER ---------- */
/* PATCH: кнопка "ПРОДОЛЖИТЬ" — чёрная; при hover — лёгкая прозрачность */
.city-modal__footer{ margin-top:20px; }
.city-modal__submit{
  width:100%; height:52px; border:1px solid #111; border-radius:0;
  background:#111; color:#fff; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  cursor:pointer; transition:opacity .15s ease;
}
.city-modal__submit:hover{ opacity:.85; }

/* ---------- INLINE-сообщение об ошибке гео ---------- */
.city-inline-msg{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:8px; padding:10px 12px; border-radius:0;
  background:#fff4f4; border:1px solid #ffd6d6; color:#8a2a2a; font-size:13px;
}
.city-inline-msg__text{ line-height:1.35; }
.city-inline-msg__retry{
  border:1px solid #111; background:#111; color:#fff; border-radius:0;
  padding:6px 10px; cursor:pointer; font-size:12px; white-space:nowrap;
}

/* ---------- A11y helper ---------- */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================
   HOTFIX #1 — мини-виджет (убрать фон на hover/focus/active)
   ========================= */
.city-picker .city-picker__button,
.city-picker .city-picker__button:hover,
.city-picker .city-picker__button:focus,
.city-picker .city-picker__button:active {
  background: none !important;   /* ← убираем любой фон */
  border: none !important;       /* ← и любые бордеры */
  box-shadow: none !important;   /* ← и тени */
}

/* только эффекты из ТЗ: opacity текста + сдвиг иконки */
.city-picker .city-picker__button:hover .city-picker__label { opacity: .3 !important; }
.city-picker .city-picker__button:hover .city-picker__icon  { transform: translateX(4px) !important; }

/* =========================
   HOTFIX #2 — кнопка "ПРОДОЛЖИТЬ" (строго чёрная)
   ========================= */
.city-modal .city-modal__submit{
  background: #111 !important;   /* ← чёрный фон */
  color: #fff !important;         /* ← белый текст */
  border: 1px solid #111 !important;
  border-radius: 0 !important;
}
.city-modal .city-modal__submit:hover{
  background: #111 !important;    /* фон остаётся чёрным */
  color: #fff !important;
  opacity: .85 !important;        /* только лёгкая прозрачность */
}

/* =========================
   HOTFIX #3 — крестик закрытия 14px без заливки
   ========================= */
.city-modal .item-close{
  width: 14px !important;         /* ← размер крестика */
  height: 14px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.city-modal .item-close:Hover,
.city-modal .item-close:focus{
  background: none !important;    /* никаких заливок при hover/focus */
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
}
/* полоски крестика: толщина/цвет — правь здесь при необходимости */
.city-modal .item-close__bar{
  left: 0; right: 0; top: 50%;
  height: 1.5px !important;         /* ← толщина линий "Х" */
  background: #111 !important;
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease;
}
.city-modal .item-close__bar--1{ transform: translateY(-50%) rotate(45deg); }
.city-modal .item-close__bar--2{ transform: translateY(-50%) rotate(-45deg); }
/* превращение в "–" при hover без заливки */
.city-modal .item-close:hover .item-close__bar--2{ opacity: 0; }
.city-modal .item-close:hover .item-close__bar--1{ transform: translateY(-50%) rotate(0deg); }

/* =========================
   PATCH — уменьшить стрелку в мини-виджете
   ========================= */
.city-picker .city-picker__icon {
  width: 10px !important;   /* ← ширина стрелки */
  height: 10px !important;  /* ← высота стрелки */
  transition: transform .2s ease;
  opacity: .85;             /* чуть мягче по контрасту */
}

.city-picker .city-picker__button:hover .city-picker__icon {
  transform: translateX(4px) !important;
  opacity: 1;
}

/* === FIX: текст города не должен перекрашиваться на hover === */
.city-picker .city-picker__button,
.city-picker .city-picker__button:hover,
.city-picker .city-picker__button:focus,
.city-picker .city-picker__button:active {
  color: #111 !important;     /* фиксируем цвет текста */
  background: none !important; /* без фонов */
  border: none !important;
  box-shadow: none !important;
}

/* эффект ТОЛЬКО прозрачностью у текста и сдвигом стрелки */
.city-picker .city-picker__button:hover .city-picker__label { 
  opacity: .3 !important; 
}
.city-picker .city-picker__button:hover .city-picker__icon  { 
  transform: translateX(4px) !important; 
}

/* === FIX: поиск города — отступ текста и прозрачная иконка === */
.city-search {
  position: relative;
}

.city-search__icon {
  position: absolute;
  left: 14px;                 /* ← отступ иконки от левого края */
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  opacity: 0.3;               /* ← делает иконку менее навязчивой */
  pointer-events: none;       /* чтобы клик шёл в input */
}

/* поле ввода — добавляем больше отступа слева под иконку */
.city-search__input {
  width: 100%;
  height: 48px;
  border: 1px solid #111;
  border-radius: 0;
  background: #fff;
  font-size: 14px;
  padding: 0 14px 0 42px;     /* ← теперь placeholder дальше от иконки */
  color: #111;
}

/* цвет placeholder чуть светлее, как в макете */
.city-search__input::placeholder {
  color: #aaa;
  opacity: 1;
}

/* мягкая подсветка совпадений в списке */
.city-suggest mark{
  background: #ffeab5;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
  color: inherit;
  padding: 0 0.5px;
}

/* ===== АККОРДЕОН ГОРОДА ===== */
/* Тогглер */
.city-acc__toggle{
  width:100%; height:48px; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid #111; border-radius:0; padding:0 14px; cursor:pointer;
}
.city-acc__toggle:focus{ outline:none; }

/* Плюс/минус (как у "Х": из двух полос) */
.acc-plus{ position:relative; width:14px; height:14px; flex:0 0 14px; }
.acc-plus__bar{
  position:absolute; left:0; right:0; top:50%; height:2px; background:#111;
  transform:translateY(-50%); transition:transform .2s ease, opacity .2s ease;
}
.acc-plus__bar--v{
  transform: translateY(-50%) rotate(90deg); /* вертикальная черта для "+" */
}
/* Открытое состояние: превращаемся в "–" (убираем вертикальную) */
.city-accordion.is-open .acc-plus__bar--v{ opacity:0; transform: translateY(-50%) rotate(90deg); }

/* Панель со списком — только верх/низ светло-серые + разделители между пунктами */
.city-acc__panel{
  border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; border-left:0; border-right:0;
  background:#fff;
}
.city-acc__list{ margin:0; padding:0; list-style:none; }
.city-acc__item{ border-bottom:1px solid #e5e5e5; }
.city-acc__item:last-child{ border-bottom:0; }
.city-acc__option{
  width:100%; text-align:left; padding:12px 14px; background:#fff; border:0; border-radius:0; cursor:pointer;
}
.city-acc__option:hover{ background:#f0f0f0; }

/* Скрыто/видимо */
.city-acc__panel[hidden]{ display:none !important; }

/* ==== ACCORDION — выравнивание по краям и без ховеров ==== */

/* Кнопка-тогглер: строгая, без ховеров, выравнено по краям */
.city-acc__toggle{
  width:100%; height:64px;               /* если нужно 48px — поменяй */
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;                         /* общий внутренний отступ */
  background:#fff !important;
  border:1px solid #111; border-radius:0;
  cursor:pointer;
}
.city-acc__toggle:hover,
.city-acc__toggle:focus,
.city-acc__toggle:active{
  background:#fff !important;
  box-shadow:none !important;
  outline:none !important;
  border-color:#111 !important;
}

/* Плюс/минус из дивов (анимация как у "Х") */
.acc-plus{ position:relative; width:14px; height:14px; flex:0 0 14px; }
.acc-plus__bar{
  position:absolute; left:0; right:0; top:50%;
  height:2px; background:#111; transform:translateY(-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.acc-plus__bar--h{ /* горизонтальная черта (минус) — всегда видна */ }
.acc-plus__bar--v{ transform: translateY(-50%) rotate(90deg); } /* вертикальная для плюсика */

/* Открыт аккордеон ⇒ превращаемся в "–": вертикальную прячем */
.city-accordion.is-open .acc-plus__bar--v{
  opacity:0; transform: translateY(-50%) rotate(90deg);
}

/* Панель: только верх/низ границы, без боковых; по краям ровно */
.city-acc__panel{
  border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;
  border-left:0; border-right:0;
  background:#fff;
  margin:0; padding:0;
}
.city-acc__panel[hidden]{ display:none !important; }

/* Список — без внешних отступов, линии между пунктами во всю ширину */
.city-acc__list{ list-style:none; margin:0; padding:0; }
.city-acc__item{ border-bottom:1px solid #e5e5e5; }
.city-acc__item:last-child{ border-bottom:0; }

/* Пункты: без ховеров, ровные отступы слева/справа как у тогглера */
.city-acc__option{
  width:100%; text-align:left; padding:18px 16px;
  background:#fff !important; border:0; border-radius:0; cursor:pointer;
}
.city-acc__option:hover,
.city-acc__option:focus,
.city-acc__option:active{
  background:#fff !important; color:inherit !important;
  outline:none !important; box-shadow:none !important;
}

/* Поиск: чтобы края совпадали визуально с аккордеоном */
.city-search__input{ padding:0 16px 0 42px; }  /* левый отступ под лупу + общий 16px */
.city-search__icon{ left:16px; opacity:.3; }

/* На маленьких экранах можно уменьшить высоту тогглера */
@media (max-width:480px){
  .city-acc__toggle{ height:56px; padding:0 14px; }
  .city-acc__option{ padding:16px 14px; }
}

/* =========================
   HOTFIX — аккордеон по ТЗ
   ========================= */

/* Заголовок аккордеона: только верх/низ светло-серые,
   без левого/правого бордера. Паддинг только по вертикали (24px). */
.city-acc__toggle{
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: #fff !important;
  height: auto !important;
  padding: 24px 0 !important;     /* ← только top/bottom */
  margin: 0 !important;
  box-shadow: none !important;
}
.city-acc__toggle:hover,
.city-acc__toggle:focus,
.city-acc__toggle:active{
  background: #fff !important;    /* без ховеров */
  box-shadow: none !important;
  outline: none !important;
}

/* Плюс/минус — остаётся как есть (div'ы). Ничего не меняем, 
   только на всякий случай убираем возможные ховер-цвета. */
.acc-plus__bar{ background:#111 !important; }

/* Панель аккордеона: только верх/низ светло-серые,
   без боковых и без внутренних отступов. */
.city-acc__panel{
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
}

/* Элементы списка — разделители по всей ширине, без ховеров. */
.city-acc__list{ margin:0 !important; padding:0 !important; list-style:none; }
.city-acc__item{ border-bottom:1px solid #e5e5e5; }
.city-acc__item:last-child{ border-bottom:0; }

.city-acc__option{
  width:100%; text-align:left; padding:24px 0 !important; /* ← только top/bottom */
  background:#fff !important; border:0 !important; border-radius:0 !important;
  cursor:pointer;
}
.city-acc__option:hover,
.city-acc__option:focus,
.city-acc__option:active{
  background:#fff !important; color:inherit !important;
  outline:none !important; box-shadow:none !important;
}

/* "Определить автоматически" — только светло-серый фон, без бордера. */
.city-autodetect{
  border: 0 !important;
  background: #f5f5f5 !important;   /* можешь осветлить/затемнить: #f2f2f2/#eee */
  padding: 24px 16px !important;     /* если нужен ровный вертикальный ритм */
}
.city-autodetect:hover,
.city-autodetect:focus,
.city-autodetect:active{
  background: #f5f5f5 !important;    /* без ховеров */
  box-shadow: none !important;
}

/* Поиск оставим как есть, но чтобы визуально совпадал по краям: */
.city-search__input{ padding: 0 0 0 42px !important; } /* без правого внутреннего отступа */
.city-search__icon{ left: 0 !important; margin-left: 0 !important; }

/* === FIX: у заголовка аккордеона НИКАКИХ ховеров === */
.city-acc__toggle,
.city-acc__toggle:hover,
.city-acc__toggle:focus,
.city-acc__toggle:active {
  background: #fff !important;
  color: #111 !important;                 /* текст не пропадает */
  box-shadow: none !important;
  outline: none !important;

  /* только top/bottom светло-серые; слева/справа нет */
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-left: 0 !important;
  border-right: 0 !important;

  padding: 24px 0 !important;             /* только вертикальные отступы */
}

/* не даём теме перекрасить подпись внутри заголовка */
.city-acc__toggle .city-acc__label {
  color: #111 !important;
  opacity: 1 !important;
}

/* плюс/минус — без реакций на hover */
.city-acc__toggle .acc-plus__bar,
.city-acc__toggle:hover .acc-plus__bar,
.city-acc__toggle:focus .acc-plus__bar,
.city-acc__toggle:active .acc-plus__bar {
  background: #111 !important;
}

/* === FIX: пункты в аккордеоне тоже без ховеров и без подложек === */
.city-acc__option,
.city-acc__option:hover,
.city-acc__option:focus,
.city-acc__option:active {
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  padding: 24px 0 !important;             /* горизонтальных паддингов нет */
}

/* разделители и панель — фиксируем, чтобы не темнели на hover */
.city-acc__panel,
.city-acc__item,
.city-acc__panel:hover,
.city-acc__item:hover {
  border-top-color: #e5e5e5 !important;
  border-bottom-color: #e5e5e5 !important;
}

/* "определить автоматически" — только светло-серый фон, ни рамок, ни ховера */
.city-autodetect,
.city-autodetect:hover,
.city-autodetect:focus,
.city-autodetect:active {
  background: #f5f5f5 !important;
  border: 0 !important;
  box-shadow: none !important;
}