@charset "UTF-8";
/* ==========================================================================
   Единые стили для страниц поиска: метро, район, город, подробный поиск
   Файл: /css/search.css
   Используется в: searchmetro.php, searchraion.php, searchgorod.php, search.php

   Структура файла:
     1. Обёртка страницы
     2. Заголовок страницы
     3. Форма поиска (карточка)
     4. Сетки (grid) для блоков поиска
     5. Элемент списка (чекбокс/ссылка/счётчик)
     6. Поля ввода, селекты, узкие поля диапазонов
     7. Счётчик анкет («таблетка»)
     8. Кнопка отправки формы
     9. Адаптивность (медиазапросы)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ОБЁРТКА СТРАНИЦЫ
   Центрирует контент по горизонтали и ограничивает максимальную ширину.
   Используется как внешний контейнер для формы поиска.
   -------------------------------------------------------------------------- */
.search-wrap {
    max-width: 1100px;      /* Ограничение ширины контента на больших экранах */
    margin: 0 auto;         /* Центрирование по горизонтали */
    padding: 20px 10px;     /* Внутренние отступы: 20px сверху/снизу, 10px по бокам */
}

/* --------------------------------------------------------------------------
   2. ЗАГОЛОВОК СТРАНИЦЫ ПОИСКА
   Крупный красный заголовок по центру (h1 внутри .search-title).
   -------------------------------------------------------------------------- */
.search-title {
    text-align: center;         /* Выравнивание по центру */
    margin: 0 0 20px;           /* Отступ только снизу */
    font-size: 26px;            /* Крупный размер */
    color: #FF0000;             /* Красный цвет (фирменный акцент) */
    line-height: 1.3;           /* Компактный межстрочный интервал */
    word-wrap: break-word;      /* Перенос длинных слов, чтобы не ломать вёрстку */
}

/* --------------------------------------------------------------------------
   3. ФОРМА ПОИСКА — КАРТОЧКА
   Белая карточка с розовой рамкой, скруглением и мягкой тенью.
   -------------------------------------------------------------------------- */
.search-form {
    background: #fff;                            /* Белый фон карточки */
    border: 2px solid #FFD1DC;                   /* Светло-розовая рамка */
    border-radius: 12px;                         /* Скруглённые углы */
    padding: 20px;                               /* Внутренние отступы */
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);   /* Мягкая тень */
    width: 100%;                                 /* На всю ширину родителя */
}

/* Подсказка над списком чекбоксов — красный текст по центру */
.search-hint {
    text-align: center;      /* По центру */
    margin-bottom: 20px;     /* Отступ снизу до первой сетки */
    font-size: 15px;         /* Чуть крупнее базового */
    color: #FF0000;          /* Красный акцент */
    line-height: 1.4;        /* Читабельный интервал */
}

/* --------------------------------------------------------------------------
   4. СЕТКИ (GRID) ДЛЯ БЛОКОВ ПОИСКА
   Базовая сетка — 3 колонки. Модификаторы меняют число колонок.
   -------------------------------------------------------------------------- */
.search-list {
    display: grid;                              /* Включаем CSS Grid */
    grid-template-columns: repeat(3, 1fr);      /* 3 равные колонки по умолчанию */
    gap: 12px;                                  /* Отступы между ячейками */
    width: 100%;                                /* На всю ширину формы */
}

/* Геолокация (город + район + метро) — 3 колонки в одну строку */
.search-list--geo {
    grid-template-columns: repeat(3, 1fr);
}

/* Параметры (возраст, рост, вес, грудь) — 4 колонки в одну строку */
.search-list--params {
    grid-template-columns: repeat(4, 1fr);
}

/* Внешность / Услуги / Стоимость — 3 колонки (как базовая сетка) */
.search-list--appearance {
    grid-template-columns: repeat(3, 1fr);
}

/* --------------------------------------------------------------------------
   5. ЭЛЕМЕНТ СПИСКА
   Карточка-ячейка внутри сетки: чекбокс + подпись + (опционально) счётчик.
   -------------------------------------------------------------------------- */
.search-item {
    display: flex;                          /* Flex, чтобы чекбокс и текст были в ряд */
    align-items: center;                    /* Вертикальное центрирование */
    flex-wrap: wrap;                        /* Перенос на узких экранах */
    gap: 8px;                               /* Отступы между элементами внутри */
    padding: 10px 12px;                     /* Внутренние отступы */
    border: 1px solid #eee;                 /* Светлая рамка */
    border-radius: 8px;                     /* Скругление */
    background: #fafafa;                    /* Очень светлый фон */
    transition: .2s;                        /* Плавные переходы при hover */
    font-size: 15px;                        /* Базовый размер текста */
    min-width: 0;                           /* Разрешаем сжатие во flex/grid */
    width: 100%;                            /* На всю ширину ячейки */
}

/* Состояние наведения — лёгкий розовый фон и подсветка рамки */
.search-item:hover {
    background: #fff5f5;                              /* Нежно-розовый фон */
    border-color: #e0b0b0;                            /* Розоватая рамка */
    box-shadow: 0 2px 8px rgba(224, 176, 176, .25);   /* Мягкая тень */
}

/* Метка (strong) — не сжимается, не переносится */
.search-item > strong {
    flex: 0 0 auto;         /* Фиксированный размер, не растягивается */
    white-space: nowrap;    /* Запрет переноса строки */
}

/* Чекбокс — увеличенный, красный акцент, фиксированный размер */
.search-item input[type=checkbox] {
    width: 18px;
    height: 18px;
    min-width: 18px;        /* Не даём сжаться */
    cursor: pointer;        /* Курсор-указатель */
    flex-shrink: 0;         /* Запрет сжатия во flex */
    accent-color: #c00;     /* Красный цвет галочки (совр. браузеры) */
    margin: 0;              /* Сброс отступов браузера */
}

/* Ссылка внутри элемента (например, название услуги) */
.search-item a.link {
    color: #333;                            /* Тёмно-серый текст */
    text-decoration: none;                  /* Без подчёркивания по умолчанию */
    word-wrap: break-word;                  /* Перенос длинных слов */
    overflow-wrap: anywhere;                /* Агрессивный перенос при нехватке места */
    min-width: 0;                           /* Разрешаем сжатие */
}

/* Ховер ссылки — красный цвет и подчёркивание */
.search-item a.link:hover {
    color: #c00;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. ПОЛЯ ВВОДА И СЕЛЕКТЫ ВНУТРИ ФОРМЫ
   Единый стиль для text/tel/number/email/select внутри .search-item и .search-form.
   -------------------------------------------------------------------------- */
.search-item input[type=text],
.search-item input[type=tel],
.search-item input[type=number],
.search-item input[type=email],
.search-item select,
.search-form input[type=text],
.search-form input[type=tel],
.search-form input[type=number],
.search-form input[type=email],
.search-form select {
    flex: 1 1 auto;                     /* Растягивается на доступное место */
    min-width: 0;                       /* Разрешаем сжатие */
    width: 100%;                        /* На всю ширину контейнера */
    max-width: 100%;                    /* Не выходить за пределы */
    padding: 8px 10px;                  /* Внутренние отступы */
    font-size: 15px;                    /* Читабельный размер */
    line-height: 1.3;                   /* Компактный интервал */
    border: 1px solid #ccc;             /* Серая рамка */
    border-radius: 6px;                 /* Скругление */
    background: #fff;                   /* Белый фон */
    color: #333;                        /* Тёмно-серый текст */
    transition: border-color .2s, box-shadow .2s;  /* Плавные переходы */
    -webkit-appearance: none;           /* Убираем нативные стили (Safari) */
    -moz-appearance: none;              /* Убираем нативные стили (Firefox) */
    appearance: none;                   /* Убираем нативные стили (стандарт) */
}

/* Фокус — красная рамка и мягкое свечение */
.search-item input[type=text]:focus,
.search-item input[type=tel]:focus,
.search-item input[type=number]:focus,
.search-item input[type=email]:focus,
.search-item select:focus,
.search-form input[type=text]:focus,
.search-form select:focus {
    border-color: #c00;                             /* Красная рамка */
    box-shadow: 0 0 0 3px rgba(204, 0, 0, .1);      /* Мягкое свечение */
    outline: none;                                  /* Убираем стандартный outline */
}

/* Кастомная стрелка у селектов (SVG в background-image) */
.search-item select,
.search-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;                   /* Не повторять */
    background-position: right 10px center;         /* Стрелка справа */
    background-size: 10px;                          /* Размер стрелки */
    padding-right: 30px;                            /* Место под стрелку */
}

/* Узкие поля для диапазонов (age, height, weight, bust) */
.search-item input[size="3"],
.search-item input.small {
    flex: 1 1 0;            /* Равномерное распределение между полями */
    min-width: 50px;        /* Минимальная ширина */
    max-width: 90px;        /* Максимальная ширина */
    width: auto;            /* Не тянется на всю ширину */
    text-align: center;     /* Центрирование цифр */
    padding: 8px 6px;       /* Чуть меньше боковых отступов */
}

/* Разделитель диапазона «-» между двумя полями */
.search-item .range-sep {
    flex: 0 0 auto;         /* Не сжимается и не растягивается */
    color: #999;            /* Серый цвет */
    font-weight: bold;      /* Жирный */
    user-select: none;      /* Запрет выделения */
}

/* Чекбокс-подпись — вся строка кликабельна */
.search-item label {
    cursor: pointer;        /* Курсор-указатель */
    user-select: none;      /* Запрет выделения текста */
    width: 100%;            /* На всю ширину ячейки */
}

/* --------------------------------------------------------------------------
   7. СЧЁТЧИК АНКЕТ — красная «таблетка» справа от ссылки
   Используется на страницах поиска (metro/raion/gorod) для числа анкет.
   -------------------------------------------------------------------------- */
.search-count {
    display: inline-block;      /* Строчно-блочный */
    min-width: 32px;            /* Минимальная ширина */
    padding: 2px 8px;           /* Внутренние отступы */
    background: #c00;           /* Красный фон */
    color: #fff;                /* Белый текст */
    border-radius: 20px;        /* Сильное скругление — «таблетка» */
    text-align: center;         /* Центрирование числа */
    font-weight: bold;          /* Жирный */
    font-size: 13px;            /* Чуть меньше базового */
    margin-left: auto;          /* Прижимает к правому краю */
    flex-shrink: 0;             /* Не сжимается */
}

/* --------------------------------------------------------------------------
   8. КНОПКА ОТПРАВКИ ФОРМЫ
   Красная кнопка «Поиск» с ховером и лёгким подъёмом.
   -------------------------------------------------------------------------- */
.search-submit {
    text-align: center;     /* Центрирование кнопки */
    margin-top: 24px;       /* Отступ сверху от последнего блока */
    width: 100%;            /* На всю ширину */
}

/* Общий стиль кнопки (класс .buten) */
.search-submit .buten,
.search-form .buten {
    display: inline-block;      /* Строчно-блочная */
    width: auto;                /* Ширина по содержимому */
    max-width: 100%;            /* Не выходить за пределы */
    padding: 12px 40px;         /* Внутренние отступы */
    font-size: 16px;            /* Крупный шрифт */
    background: #c00;           /* Красный фон */
    color: #fff;                /* Белый текст */
    border: none;               /* Без рамки */
    border-radius: 8px;         /* Скругление */
    cursor: pointer;            /* Курсор-указатель */
    font-weight: bold;          /* Жирный */
    transition: .2s;            /* Плавные переходы */
    -webkit-appearance: none;   /* Сброс нативных стилей */
    appearance: none;
}

/* Ховер кнопки — темнее, чуть выше, с тенью */
.search-submit .buten:hover,
.search-form .buten:hover {
    background: #a00;                               /* Тёмно-красный */
    transform: translateY(-1px);                    /* Лёгкий подъём */
    box-shadow: 0 4px 12px rgba(200, 0, 0, .3);     /* Красная тень */
}

/* --------------------------------------------------------------------------
   9. АДАПТИВНОСТЬ
   Постепенно уменьшаем число колонок и отступы на узких экранах.
   -------------------------------------------------------------------------- */

/* Планшеты (<= 900px): сетки в 2 колонки */
@media (max-width: 900px) {
    .search-list            { grid-template-columns: repeat(2, 1fr); }
    .search-list--geo       { grid-template-columns: repeat(2, 1fr); }
    .search-list--params    { grid-template-columns: repeat(2, 1fr); }
    .search-list--appearance{ grid-template-columns: repeat(2, 1fr); }
}

/* Планшеты/телефоны (<= 768px): уменьшаем отступы, шапка в столбик */
@media (max-width: 768px) {
    .search-wrap  { padding: 15px 8px; }    /* Меньше отступы */
    .search-form  { padding: 14px; }        /* Меньше внутренние отступы */
    .page-header  {                          /* Шапка страницы — в столбик */
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Телефоны (<= 560px): сетки в 1 колонку, уменьшенные размеры */
@media (max-width: 560px) {
    /* Все сетки — в одну колонку */
    .search-list,
    .search-list--geo,
    .search-list--params,
    .search-list--appearance {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search-title { font-size: 20px; }          /* Меньше заголовок */

    .search-item { padding: 8px 10px; gap: 6px; }   /* Компактнее ячейки */

    /* Метка занимает всю строку, переносится */
    .search-item > strong { white-space: normal; flex: 1 1 100%; }

    /* Поля ввода — на всю ширину */
    .search-item input[type=text],
    .search-item select,
    .search-form input[type=text],
    .search-form select { flex: 1 1 100%; }

    /* Кнопка — на всю ширину */
    .search-submit .buten,
    .search-form .buten { width: 100%; padding: 12px 20px; }

    /* Узкие поля диапазонов — по 2 в ряд */
    .search-list--params .search-item input[size="3"],
    .search-list--params .search-item input.small {
        flex: 1 1 calc(50% - 20px);     /* Две колонки с учётом gap */
        min-width: 0;
        max-width: none;
        width: auto;
        padding: 10px 8px;              /* Крупнее для тапа пальцем */
        font-size: 15px;
    }
    /* Разделитель «-» остаётся между полями */
    .search-list--params .search-item .range-sep {
        flex: 0 0 auto;
        margin: 0 2px;
    }
    /* Метка диапазона — на всю ширину, отступ снизу */
    .search-list--params .search-item > strong {
        flex: 1 1 100%;
        margin-bottom: 4px;
    }
    .search-list--params .search-item {
        padding: 10px;
    }
}

/* Очень узкие экраны (<= 360px): минимум размеров */
@media (max-width: 360px) {
    .search-title { font-size: 17px; }      /* Ещё меньше заголовок */
    .search-item { padding: 6px 8px; }      /* Минимальные отступы */

    /* Узкие поля диапазонов — компактнее */
    .search-list--params .search-item input[size="3"],
    .search-list--params .search-item input.small {
        padding: 10px 6px;
        font-size: 14px;
    }
}