@import url('theme.css');
@import url('components/bottom-sheet.css');
@import url('components/chat.css');
@import url('components/markers.css');
@import url('components/nav.css');
@import url('components/widgets.css');
@import url('components/taxi.css');
@import url('components/ride.css');
@import url('components/adventures.css');
@import url('components/water-tours.css');
@import url('components/blogger-route.css');
@import url('components/chat-widgets.css');
@import url('components/reservation.css');
@import url('components/mystery-quest.css');
@import url('components/taxi-new.css');
@import url('components/notification.css');
@import url('components/welcome.css');
@import url('components/courchevel.css');
@import url("components/vau-legend.css");
 
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--app-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh; /* Use dynamic viewport height for mobile */
    transition: background-color 0.4s ease;
    overflow: hidden; /* Prevent scrolling on the page itself */
    touch-action: none; /* Disable browser handling of gestures (zooming, panning) globally */
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

/* Итоговая иерархия слоев:*/
/* Карта */
/* Маркеры (z-index ~5-51) */
/* Интелектуальный слой / Intelligence Layer (z-index 52) */
/* Элементы управления VAU / Top Bar (z-index 55) */
/* Область чата / Main Content Area (z-index 115) (Содержит чат с z-index 120) */
/* Меню активностей (z-index 120) */
/* Нижняя панель / Bottom Sheet (z-index 125) */
/* Попапы локаций и фильтров (z-index 1001) */
/* Нижнее меню / Bottom Nav (z-index 1005) */
/* Панель действий карточки / Card Action Bar (z-index 1006) */
/* Лента приключений / Adventures Feed (z-index 1007) */

/* --- Рамка Телефона --- */
.phone-container {
    /* Responsive Sizing */
    height: 95dvh; /* Occupy most of the vertical space, respecting mobile UI */
    aspect-ratio: 490 / 844; /* Maintain phone-like proportions */
    max-height: 844px; /* Don't grow larger than the original design height */
    max-width: 590px; /* Don't grow larger than the original design width */
    border-radius: 50px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    border: 10px solid black;
    background-color: var(--phone-bg);
    transition: background-color 0.4s ease;
}

/* On mobile screens, make the width responsive to the screen, not the aspect ratio */
@media (max-width: 480px) {
    .phone-container {
        width: 95vw; /* 95% of viewport width */
        height: 95dvh; /* Keep height responsive */
        
        /* Override desktop-specific constraints */
        aspect-ratio: unset; /* Remove aspect ratio constraint */
        max-width: 100%;
        max-height: 100%;
        border-radius: 25px; /* Reduce border radius for smaller screens */
    }
}

/* --- Карта --- */
#map { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Эффект размытия и затемнения карты. 
   Применяется в режиме Details/Guides View. 
   Убирается в режиме Directions View. */
#map.sheet-active {
    filter: blur(5px) brightness(0.7);
    transform: scale(1.02);
}

/* Убираем стандартный логотип */
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib {
    display: none !important;
}

/* --- ОБЛАСТЬ КОНТЕНТА --- */
/* Определяет безопасную зону между верхним краем и нижней навигацией */
.main-content-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Высота рассчитывается с учетом нижнего меню (60px), чтобы освободить место внизу */
    /* ПРАВКА: Уменьшаем отступ снизу до 40px, чтобы убрать зазор над нижним меню */
    height: calc(100% - 75px);
    pointer-events: none; /* По умолчанию не перехватывает клики */
    /* z-index убираем, чтобы не создавать новый контекст наложения */
}

/* Когда область активна (например, внутри чата), она должна перехватывать клики */
.main-content-area > * {
    pointer-events: auto;
}

/* Когда чат активен, z-index области должен быть выше, чтобы чат был над картой */
/* ПРАВКА: Правило height: 100% удалено, так как оно приводило к перекрытию нижнего меню. */
/* Теперь .main-content-area всегда будет иметь высоту calc(100% - 60px), как определено выше. */
body.chat-active .main-content-area {
    z-index: 115; /* Higher than vau-hud (55) to ensure chat is on top */
}

/* =====================================================
   REUSABLE ANIMATIONS
 ===================================================== */


/* Внутренняя волна удалена по запросу */

/* Анимация для внешнего свечения, исходящего от контура */
@keyframes outer-glow-animation {
    0% {
        /* Начало анимации: свечение с небольшим размытием, но без распространения */
        box-shadow: 0 0 5px 0px var(--vau-gold);
    }
    100% {
        /* Конец анимации: свечение расширяется, размывается и полностью исчезает */
        box-shadow: 0 0 20px 25px transparent;
    }
}

/* Класс для активации пульсирующей анимации */
.pulse-animation-active {
    position: relative;
    overflow: hidden; /* Обрезаем внутреннюю волну */
    /* Применяем внешнюю анимацию к самому элементу */
    animation: outer-glow-animation 1.8s infinite ease-out;
    animation-delay: 0.5s; /* Увеличиваем задержку */
}

/* Псевдо-элемент для внутренней волны удален */

/* Псевдо-элемент ::after больше не нужен для этой анимации */

.pulse-animation-active span {
    position: relative;
    z-index: 1;
}

.locations-toggle-container,
.vau-icon-container,
.theme-toggle-container {
    background: var(--glass-bg);
    backdrop-filter: var(--vau-glass-blur);
    -webkit-backdrop-filter: var(--vau-glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background-color 0.3s, transform 0.3s ease;
}

.locations-toggle-container:hover,
.vau-icon-container:hover,
.theme-toggle-container:hover {
    transform: scale(1.1);
}

.locations-toggle-container i,
.theme-toggle-container i {
    font-size: 15px; /* Размер 2/3 */
    color: var(--vau-text-primary);
}

#locations-popup {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 220px;
    background: var(--glass-bg);
    backdrop-filter: var(--vau-glass-blur);
    -webkit-backdrop-filter: var(--vau-glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 16px;
    z-index: 1001;
    overflow: hidden;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: top left;
}

#locations-popup.hidden {
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none;
}

.locations-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vau-border-color);
}

.locations-popup-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #87CEEB; /* Нежно-синий цвет */
}

body[data-theme="light"] .locations-popup-header h4 {
    color: #00008B; /* Темно-синий для светлой темы */
}

#close-locations-popup {
    display: none; /* Скрываем крестик */
}

.locations-list {
    padding: 8px 0;
}

.location-item {
    padding: 4px 8px;
    cursor: pointer;
    font-size: 15px;
    position: relative;
}

.location-item span {
    display: block;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background-color 0.2s, color 0.2s;
    color: var(--text-primary);
}

.location-item:hover span {
    background-color: var(--vau-card-bg-hover);
}

.location-item.active span {
    background-color: var(--vau-primary-color-alpha);
    font-weight: 600;
    color: var(--text-primary); /* Белый цвет в темной теме */
}

.location-item:active span {
    transform: scale(0.96);
    background-color: rgba(var(--vau-primary-color-rgb), 0.3);
}

#filters-popup {
    position: absolute;
    top: 80px;
    right: 20px; /* Changed from left to right */
    width: 220px;
    background: var(--glass-bg);
    backdrop-filter: var(--vau-glass-blur);
    -webkit-backdrop-filter: var(--vau-glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 16px;
    z-index: 1001;
    overflow: hidden;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: top right; /* Changed from top left */
}

#filters-popup.hidden {
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none;
}

.filters-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vau-border-color);
}

.filters-popup-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #87CEEB; /* Нежно-синий цвет */
}

body[data-theme="light"] .filters-popup-header h4 {
    color: #00008B; /* Темно-синий для светлой темы */
}

#close-filters-popup {
    display: none; /* Скрываем крестик */
}

.filters-list {
    padding: 8px 0;
}

.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 15px;
    position: relative;
}

.filter-item span {
    display: block;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background-color 0.2s, color 0.2s;
    color: var(--text-primary);
    flex-grow: 1;
}

.filter-item:hover span {
    background-color: var(--vau-card-bg-hover);
}

.filter-item.control-item {
    font-weight: 600;
}

.filter-item.active span {
    color: var(--text-primary);
}

.filter-item:active span {
    transform: scale(0.98);
    background-color: rgba(var(--vau-primary-color-rgb), 0.3);
}

.filter-icon {
    font-size: 16px;
    width: 24px; /* Фиксированная ширина для выравнивания */
    text-align: center;
    margin-left: 10px;
    transition: color 0.3s;
}

/* --- Цвета иконок для темной темы --- */
body[data-theme="dark"] .filter-icon {
    color: #6c757d; /* Светло-серый для неактивных */
}

body[data-theme="dark"] .filter-item.active .filter-icon {
    color: #ffffff; /* Белый для активных */
}

/* --- Цвета иконок для светлой темы --- */
body[data-theme="light"] .filter-icon {
    color: #adb5bd; /* Темно-серый для неактивных */
}

body[data-theme="light"] .filter-item.active .filter-icon {
    color: #000000; /* Черный для активных */
}

.filter-separator {
    border: none;
    height: 1px;
    background-color: var(--vau-border-color);
    margin: 4px 16px;
}

/* --- Settings Button Animation --- */
.settings-container {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-main-icon,
.settings-option-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    background: var(--glass-bg);
    backdrop-filter: var(--vau-glass-blur);
    -webkit-backdrop-filter: var(--vau-glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.settings-main-icon i,
.settings-option-icon i {
    font-size: 15px;
    color: var(--vau-text-primary);
}

body[data-theme="dark"] .settings-main-icon i,
body[data-theme="dark"] .settings-option-icon i {
    color: white;
}

body[data-theme="light"] .settings-main-icon i,
body[data-theme="light"] .settings-option-icon i {
    color: black;
}

.settings-option-icon {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none; /* Initially not clickable */
}

.settings-container.expanded .settings-main-icon {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.settings-container.expanded .settings-option-icon {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto; /* Clickable when expanded */
}

.settings-container.expanded #settings-theme-button {
    transform: translateY(50px) scale(1);
}

.settings-container.expanded #settings-filter-button {
    transform: translateY(100px) scale(1);
}
/* --- Стили для карточки ресторана --- */

.restaurant-meta-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 12px;
    margin-bottom: 16px;
}

.restaurant-meta-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.restaurant-meta-aside .vau-card-meta-item {
    font-size: 0.9em;
    color: var(--vau-gray-dark);
}

.rating-item {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 8px;
}

.rating-item:hover {
    background-color: var(--vau-gray-light);
    box-shadow: 0 0 20px rgba(227, 181, 82, 0.6); /* Gold glow */
}

.detail-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.detail-photo-item {
    width: 100%;
    padding-bottom: 75%; /* Соотношение сторон 4:3 */
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.cta-disabled {
    background-color: var(--vau-gray-medium) !important;
    cursor: not-allowed;
    color: var(--vau-gray-dark) !important;
}
/* --- Анимация для иконки звезды --- */
@keyframes pulse-star {
  0% { color: var(--vau-gold); }
  50% { color: var(--vau-primary); }
  100% { color: var(--vau-gold); }
}

.pulse-star-animation {
  animation: pulse-star 1s 3;
}
/* --- Стили для нового "лендинг"-дизайна ресторана --- */

.restaurant-card-new {
    /* Убираем внутренние отступы, так как контент будет управлять ими */
    padding: 0 !important;
}

.restaurant-card-new .vau-card-text-content {
    padding: 16px;
}

.landing-back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.landing-back-button:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Унифицируем кнопки */
.restaurant-card-new .vau-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.restaurant-card-new .vau-card-actions button {
    width: 100%;
    padding: 14px;
    font-size: 1em;
    font-weight: bold;
}
/* --- Финальные стили для карточки ресторана по макету --- */

.restaurant-card-final {
    padding: 0 !important;
    overflow: hidden; /* Убираем скролл */
}

.restaurant-hero-image {
    position: relative;
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
}

.hero-action-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: var(--vau-gold);
    color: var(--vau-dark-text);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.hero-action-button:hover {
    background: #FFC107; /* Немного темнее золотой при наведении */
    transform: scale(1.1);
}

.hero-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%; /* Примерная ширина как на макете */
    height: 5px;
    background-color: var(--vau-gold);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.restaurant-card-final .vau-card-content {
    padding: 0;
}

.restaurant-card-final .vau-card-text-content {
    padding: 10px 10px 30px 10px;
}

.restaurant-card-final .restaurant-meta-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 16px 0;
}

.restaurant-card-final .vau-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.restaurant-card-final .vau-card-actions button {
    width: 100%;
    padding: 14px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 25px; /* Скругленные кнопки как на макете */
}

/* .restaurant-card-final .cta-secondary {
    background-color: var(--vau-gray-medium);
    color: var(--vau-light);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.restaurant-card-final .cta-secondary:hover {
    background-color: #5a5a5a;
    box-shadow: 0 0 15px rgba(180, 180, 180, 0.2);
} */

.restaurant-card-final .cta-primary {
    background-color: var(--vau-gold);
    color: #000000;
}

.restaurant-card-final .detail-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
/* --- Стили для PDF Viewer Modal --- */

.pdf-viewer-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.pdf-viewer-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.pdf-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background-color: #1a1a1a;
    color: white;
    flex-shrink: 0;
}

.pdf-viewer-title {
    font-size: 1.1em;
    font-weight: 600;
}

.pdf-viewer-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-viewer-button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
}

.pdf-viewer-button:disabled {
    color: #555;
    cursor: not-allowed;
}

.pdf-viewer-content {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 10px;
}

#pdf-canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #444;
}

.cta-primary.confirmed,
.cta-secondary.confirmed,
.cta-primary.confirmed:disabled,
.cta-secondary.confirmed:disabled {
    background: var(--vau-success) !important;
    color: white !important;
    border-color: var(--vau-success) !important;
    cursor: default;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.version-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 15px;
}

#update-ai-cache-btn {
    cursor: pointer;
    text-decoration: underline;
}

#update-ai-cache-btn:hover {
    color: var(--vau-text-primary);
}