/* Основной контейнер */
        .select-wrapper {
            position: relative;
            width: 280px;
        }

        /* Кастомный select */
        .custom-select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 100%;
            height: 48px;
            padding: 0 48px 0 20px;
            font-size: 18px;
            font-weight: 700;
            color: #FF3F50;
            font-size: 18px;
            background-color: #ffffff;            
            border-radius: 48px;
            border: 2px solid #E4E4E4;
            box-shadow: 0px 29px 22px -9px rgba(232, 60, 76, 0.15);
            cursor: pointer;
            transition: box-shadow 0.2s ease;
            /* Кастомная стрелка через SVG (иконка в виде стрелки вниз) */
            background-image: url(../img/select.svg);
            background-repeat: no-repeat;
            background-position: right 20px center;
            background-size: 9px;
            /* Отключаем стандартную стрелку в Firefox */
            text-overflow: '';
        }
        

        /* Убираем стандартную стрелку в IE */
        .custom-select::-ms-expand {
            display: none;
        }

        /* Стили при фокусе / наведении */
        .custom-select:hover {
            box-shadow: 0 4px 12px rgba(255, 63, 80, 0.15);
        }

        .custom-select:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 63, 80, 0.25);
        }

        /* Стили для выпадающего списка (options) */
        .custom-select option {
            font-size: 16px;
            font-weight: 500;
            color: #FF3F50;
            background-color: #ffffff;
            padding: 12px 20px;
            border-radius: 24px; /* скругление для каждого пункта */
        }

        /* Стилизация самого выпадающего списка в браузерах на основе WebKit (Chrome, Safari, Edge) */
        .custom-select::-webkit-listbox,
        .custom-select::-webkit-calendar-picker-indicator {
            display: none; /* скрываем индикатор, чтобы не мешал */
        }

        /* Основной фокус на список — кастомный фон и скругление */
        .custom-select:focus option:checked {
            background: #fff0f2;
            color: #FF3F50;
        }

        /* Дополнительно — для Firefox, чтобы задать стиль выпадающему списку */
        @-moz-document url-prefix() {
            .custom-select {
                background-color: #ffffff;
                color: #FF3F50;
            }
            .custom-select option {
                background-color: #ffffff;
                color: #FF3F50;
                padding: 8px 16px;
                border-radius: 24px;
            }
        }

        /* Стили для выпадающего списка через псевдоэлементы (для WebKit) — 
           это даст возможность сделать общий фон и скругление для выпадашки */
        .custom-select:focus::-webkit-calendar-picker-indicator {
            display: none;
        }

        /* Для браузеров на WebKit — меняем фон и скругление самого выпадающего окна */
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
            .custom-select {
                background-color: #ffffff;
            }
            /* Стилизация выпадающего списка: фон, скругление, отступы */
            .custom-select option {
                padding: 12px 20px;
                border-radius: 24px;
                background-color: #ffffff;
                color: #FF3F50;
            }
            /* При наведении на option в WebKit */
            .custom-select option:hover {
                background: #ffe5e8;
                color: #FF3F50;
            }
        }

        /* Дополнительный трюк для Firefox: задаём скругление для выпадающего списка через outline */
        .custom-select:-moz-focusring {
            color: #FF3F50;
            outline: none;
        }

        /* Для лучшей поддержки — стилизуем option при выборе */
        .custom-select option:checked {
            background: #fff0f2;
            color: #FF3F50;
        }

        /* Чтобы текст внутри select был по центру по вертикали */
        .custom-select {
            line-height: 48px;
        }

        /* Для красоты — затемнение фона при разворачивании списка (опционально) */
        .select-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border-radius: 48px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
        }

        /* Стилизация выпадающего списка — общий подход для всех браузеров */
        /* Задаём фон и скругление для контейнера выпадающего списка 
           (работает в Chrome/Edge через псевдоэлемент) */
        .custom-select::-webkit-listbox {
            background: #ffffff;
            border-radius: 24px;
            border: 1px solid rgba(255, 63, 80, 0.15);
            padding: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        /* Дополнительно для браузеров на базе Chromium — скругление фона выпадашки */
        .custom-select::-webkit-calendar-picker-indicator {
            display: none;
        }

        /* Стили для option при наведении (Chrome/Edge) */
        .custom-select option:hover {
            background-color: #ffe5e8;
            color: #FF3F50;
        }

        /* Для Firefox — кастомный фон выпадающего списка */
        .custom-select:focus > option {
            background-color: #ffffff;
            border-radius: 24px;
        }

        /* Дополнительное скругление для option в Firefox */
        .custom-select option {
            border-radius: 24px;
            margin: 4px 0;
        }

        /* чтобы option не прилипали к краям */
        .custom-select option:first-of-type {
            margin-top: 4px;
        }
        .custom-select option:last-of-type {
            margin-bottom: 4px;
        }

        /* Текст внутри select - цвет #FF3F50 */
        .custom-select {
            color: #FF3F50;
        }

        /* Стилизация для темной темы (опционально) — оставляем белый фон */
        .custom-select {
            background-color: #ffffff;
        }

        /* Убираем стандартный outline для Firefox */
        .custom-select:-moz-focusring {
            outline: 1px solid rgba(255, 63, 80, 0.3);
            outline-offset: 2px;
        }

        /* Стили для выпадающего списка в Safari */
        .custom-select option {
            background-color: #ffffff;
            color: #FF3F50;
        }

        /* Специально для Safari — задаём скругление списку через -webkit-appearance */
        .custom-select {
            -webkit-appearance: none;
        }

        /* Для Edge (Chromium) — скругление фона выпадающего окна */
        .custom-select::-webkit-calendar-picker-indicator {
            opacity: 0;
        }

        /* Стили для контейнера опций при открытом списке (некоторые браузеры) */
        .custom-select:focus::-webkit-datetime-edit {
            color: #FF3F50;
        }

        /* Плавный переход для фона при наведении */
        .custom-select option {
            transition: background 0.15s ease;
        }

        /* Задание скругления для выпадающего списка в целом через теневой DOM (не везде работает) */
        .custom-select {
            --select-option-border-radius: 24px;
        }

        /* Добавляем отступы и скругление для option в Chrome */
        .custom-select option {
            padding: 10px 18px;
            border-radius: 24px;
            background: #ffffff;
        }

        /* Стилизация состояния disabled (если нужно) */
        .custom-select:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        

        /* Однако при открытом списке в Chrome верхнее скругление сохраняется, а нижнее — как у выпадающего окна */
        /* Это делает переход более естественным */

        /* Дополнительный стиль для фона выпадающего списка в Firefox */
        .custom-select:focus {
            background-color: #ffffff;
        }

        /* Гарантируем, что option будут с белым фоном и скруглением */
        .custom-select option {
            background: #ffffff !important;
            color: #FF3F50 !important;
            border-radius: 24px !important;
            padding: 10px 18px !important;
            margin: 2px 0 !important;
        }

        /* Наведение на option в Firefox */
        .custom-select option:hover {
            background: #ffe5e8 !important;
            color: #FF3F50 !important;
        }

        /* Выбранный пункт */
        .custom-select option:checked {
            background: #fff0f2 !important;
            color: #FF3F50 !important;
        }