/* ---------------------------------------------------------
   CSS СТИЛИ (Отвечают за красоту и положение по центру)
--------------------------------------------------------- */

/* Сброс стандартных отступов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Центрирование всего контента на экране */
body {
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Начинаем сверху, так как лого теперь вверху */
}

.container {
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-logo {
    width: 130px;
    /* 200px * 0.65 = 130px (на 35% меньше) */
    height: auto;
    margin-top: 50pt;
    margin-bottom: 30px;
    /* Отступ до заголовка */
}

h1 {
    font-size: 48px;
    font-weight: 500;
    color: #2e2e2e;
    margin-bottom: 50px;
}

/* Колонка с кнопками */
.selection-group {
    display: flex;
    flex-direction: column;
    /* Кнопки друг под другом */
    align-items: center;
    width: 100%;
}

/* --- БАЗОВЫЙ СТИЛЬ КНОПКИ --- */
.btn {
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 20px;
    border-radius: 12px;
    min-width: 220px;
    padding: 15px 40px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    position: relative;
    margin-bottom: 24px;
    display: block;
    text-decoration: none;
    /* Убираем подчёркивание у ссылок-кнопок */
    color: inherit;
    /* Наследуем цвет текста */
}

.btn:hover {
    transform: scale(1.05);
    /* Увеличение при наведении */
    z-index: 2;
}

.btn:active {
    transform: scale(0.95);
    /* Нажатие */
}

/* --- КНОПКИ ГОРОДОВ (Желтые) --- */
.btn-city {
    background-color: #ffc266;
    color: #333;
    font-weight: 500;
    z-index: 10;
}

/* --- КНОПКА РАМЕННАЯ (Серый градиент + рамка при наведении) --- */
.btn-ramen {
    background: linear-gradient(to bottom, #F3F4F6, #D1D4D6);
    color: #333;
    font-weight: 500;
    border: 1px solid #F3F4F6;

    transition:
        transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-ramen:hover {
    background: linear-gradient(to bottom, #ffffff, #e5e7eb);
    border-color: #9ca3af;
    /* Появление рамки */
    box-shadow: none;
    /* ИСПРАВЛЕНО: Тень полностью убрана */
}

/* --- КНОПКА IZAKAYA (Премиум с толстой обводкой) --- */
.btn-izakaya {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 15px;
    border: 4px solid #ffffff;
    /* Толстая основная рамка */
    padding: 15px 45px;
    isolation: isolate;
    position: relative;
}

/* Внешняя тонкая рамка */
.btn-izakaya::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid #ffffff;
    border-radius: 20px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Внутренняя серая рамка (при наведении) */
.btn-izakaya::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1.5px solid #ffffff;
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.btn-izakaya:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Контейнер для выпадающего списка */
.dropdown-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    /* Добавляем отступ, чтобы кнопка не прилипала */
}

/* --- LOADER STYLES --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-content {
    text-align: center;
}

.logo-wrapper {
    position: relative;
    width: 200px;
    /* Размер логотипа в лоадере */
    height: 200px;
    margin-bottom: 20px;
}

.logo-wrapper svg {
    width: 100%;
    height: 100%;
}

.logo-bg {
    filter: grayscale(1);
    opacity: 0.1;
}

.logo-fill {
    /* Использование clippath для обрезки (лучшая поддержка на мобильных) */
    -webkit-clip-path: url(#wave-clip);
    clip-path: url(#wave-clip);
}