/* ==========================================================================
   TOC: ОГЛАВЛЕНИЕ СТИЛЕЙ САЙТА "СОЛВЕКС"
   1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (Цвета, Шрифты, Тени, Отступы)
   2. БАЗОВЫЕ СТИЛИ (Body, Typography, Скроллбары, Vue.js фиксы)
   3. UI ЭЛЕМЕНТЫ (Кнопки, Поля ввода, Валидация, Чекбоксы, Тумблеры, Алерты)
   4. ШАПКА И ФУТЕР (Навигация, Корзина, Мобильное меню, Подвал сайта)
   5. HERO БЛОКИ И ХЛЕБНЫЕ КРОШКИ (Главный слайдер, Универсальные шапки)
   6. ПОИСК И ФИЛЬТРЫ (Горизонтальная панель, Липкий сайдбар)
   7. КАРТОЧКИ КОНТЕНТА (Выдача круизов, Теплоходы, Новости, Акции, Бейджи)
   8. СТРАНИЦЫ ДЕТАЛИЗАЦИИ (Страница тура tour.php, теплохода ship.php)
   9. ОФОРМЛЕНИЕ ЗАКАЗА (Корзина cart.php, Оплата checkout.php)
   10. ЛИЧНЫЙ КАБИНЕТ (Сайдбар пользователя, История заказов, Избранное)
   11. КОНТЕНТНЫЕ СТРАНИЦЫ (О компании, Тексты новостей - WYSIWYG)
   12. МОДАЛЬНЫЕ ОКНА И АНИМАЦИИ (Всплывающие окна, Skeleton Loader)
   13. БЛОК ПОДПИСКИ НА РАССЫЛКУ (ФУТЕР)
   14. ПАНЕЛЬ УПРАВЛЕНИЯ (АДМИНКА) - Дашборд и статистика
   15. ФИКСЫ ОТРИСОВКИ (Z-index и обрезка карточек при наведении)
   ========================================================================== */


/* =========================================
   1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
   ========================================= */
:root {
    /* --- Цветовая палитра бренда --- */
    --primary-blue: #0A192F;       /* Основной темно-синий (морской/премиальный) */
    --primary-blue-hover: #172A45; /* Цвет при наведении */
    --accent-gold: #CBA37A;        /* Золотой акцент для кнопок и бейджей */
    --accent-gold-hover: #B58D62;  
    --brand-red: #E30613;          /* Красный для скидок и важных уведомлений */

    /* --- Цвета действий (UI/UX паттерны) --- */
    --action-green: #10B981;       /* Зеленый для кнопок покупки/бронирования */
    --action-green-hover: #059669; 
    --urgency-red: #EF4444;        /* Красный для "Осталось мало мест" */
    --success-bg: #dcfce7;         /* Светло-зеленый фон для статуса "Оплачено" */

    /* --- Фоны и поверхности --- */
    --bg-body: #F8FAFC;            /* Очень светло-серый (базовый фон сайта) */
    --bg-surface: #FFFFFF;         /* Белый (для карточек и блоков) */
    --bg-surface-alt: #F1F5F9;     /* Светло-серый для выделения неактивных зон */
    --header-bg: rgba(10, 25, 47, 0.98); /* Полупрозрачный синий для шапки (эффект стекла) */
    --footer-bg: #0A192F;          
    --hero-overlay: rgba(10, 25, 47, 0.65); /* Затемнение поверх фотографий в слайдере */

    /* --- Типографика (цвета текста) --- */
    --text-dark: #0F172A;          /* Почти черный для главных заголовков */
    --text-main: #334155;          /* Темно-серый для основного текста (снижает нагрузку на глаза) */
    --text-muted: #64748B;         /* Серый для второстепенного текста и дат */
    --text-white: #FFFFFF;         

    /* --- Линии и рамки --- */
    --border-color: #E2E8F0;       /* Стандартная обводка карточек */
    --border-hover: #CBD5E1;       /* Обводка при наведении */

    /* --- Шрифты --- */
    --font-body: 'Inter', sans-serif;         /* Читаемый шрифт для длинных текстов */
    --font-heading: 'Montserrat', sans-serif; /* Геометрический шрифт для заголовков */

    /* --- Тени (Система Apple/Airbnb) --- */
    --shadow-sm: 0 2px 8px rgba(10, 25, 47, 0.04);  /* Мягкая тень для статичных карточек */
    --shadow-md: 0 4px 15px rgba(10, 25, 47, 0.06); /* Тень при наведении (эффект поднятия) */
    --shadow-lg: 0 10px 30px rgba(10, 25, 47, 0.1); /* Глубокая тень для модальных окон */
    
    /* --- Скругления углов --- */
    --radius-sm: 4px;   /* Мелкие элементы (бейджи, инпуты) */
    --radius-md: 8px;   /* Кнопки, небольшие карточки */
    --radius-lg: 12px;  /* Главные блоки, модальные окна */

    /* --- Размеры и геометрия --- */
    --container-width: 1200px; /* Максимальная ширина контента */
    --header-height: 70px;     /* Высота фиксированной шапки (нужно для отступов) */
    --sticky-offset: 90px;     /* Отступ для липких элементов сверху (шапка + 20px) */
}


/* =========================================
   2. БАЗОВЫЕ СТИЛИ
   ========================================= */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body { 
    margin: 0; padding: 0; 
    font-family: var(--font-body);
    background-color: var(--bg-body); 
    color: var(--text-main); 
    line-height: 1.5; 
}

/* ВАЖНО: Скрывает нескомпилированные шаблоны Vue.js */
[v-cloak] { display: none !important; }

input, button, select, textarea { font-family: inherit; }

h1, h2, h3, h4 { 
    margin-top: 0; 
    color: var(--primary-blue); 
    font-family: var(--font-heading); 
}

a { color: var(--primary-blue); text-decoration: none; transition: 0.2s; }
a:hover { color: var(--accent-gold); }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

/* Кастомный современный скроллбар */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-surface-alt); }
::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: var(--radius-sm); }


/* =========================================
   3. UI ЭЛЕМЕНТЫ (Кнопки, Формы, Валидация, Алерты)
   ========================================= */
/* Базовая золотая кнопка */
.btn-primary { 
    background: var(--accent-gold); 
    color: var(--text-white); 
    padding: 12px 24px; 
    border-radius: var(--radius-md); 
    font-weight: 600; 
    text-decoration: none; 
    border: none; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    display: inline-block; 
    text-align: center; 
}
.btn-primary:hover:not(:disabled) { 
    background: var(--accent-gold-hover); 
    transform: translateY(-1px);
}
.btn-primary:disabled { 
    background: var(--border-hover); 
    cursor: not-allowed; 
    transform: none; 
    opacity: 0.7; 
}

/* Формы ввода */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.form-control, .form-input { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    font-size: 14px; 
    color: var(--text-dark); 
    background: #fff; 
    transition: all 0.2s ease; 
    outline: none;
}
.form-control:focus, .form-input:focus { 
    border-color: var(--primary-blue); 
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}
.form-input:disabled, .form-input[readonly] { 
    background: var(--bg-body); color: var(--text-muted); cursor: not-allowed; 
}

/* --- Валидация полей (Зеленая галочка при правильном вводе в Checkout) --- */
.input-wrapper { position: relative; display: block; }
.input-wrapper input { padding-right: 40px; }
.valid-icon { 
    position: absolute; right: 12px; top: 50%; margin-top: -10px; 
    width: 20px; height: 20px; background: var(--action-green); 
    color: white; border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; opacity: 0; visibility: hidden; 
    transform: scale(0.5); transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1); 
}
.valid-icon svg { width: 12px; height: 12px; stroke-width: 3; }
.input-wrapper.is-valid .valid-icon { opacity: 1; visibility: visible; transform: scale(1); }
.input-wrapper.is-valid input { border-color: var(--action-green); background-color: #f0fdf4; }

/* Кастомные чекбоксы */
.custom-checkbox { 
    display: flex; align-items: flex-start; margin-bottom: 8px; font-size: 13px; 
    cursor: pointer; color: var(--text-main); position: relative; padding-left: 24px; user-select: none;
}
.custom-checkbox input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { 
    position: absolute; top: 0; left: 0; height: 16px; width: 16px; 
    background-color: var(--bg-surface); border: 1px solid var(--border-hover); 
    border-radius: var(--radius-sm); transition: 0.2s;
}
.custom-checkbox:hover input ~ .checkmark { border-color: var(--primary-blue); }
.custom-checkbox input:checked ~ .checkmark { background-color: var(--primary-blue); border-color: var(--primary-blue); }
.checkmark:after { 
    content: ""; position: absolute; display: none; left: 5px; top: 2px; 
    width: 3px; height: 7px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after { display: block; }

/* Тумблер (Switch) - переключатель iOS стиля */
.switch { position: relative; width: 36px; height: 20px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider-toggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-hover); transition: .4s; border-radius: 20px; }
.slider-toggle:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: var(--text-white); transition: .4s; border-radius: 50%; }
.switch input:checked + .slider-toggle { background-color: var(--primary-blue); }
.switch input:checked + .slider-toggle:before { transform: translateX(16px); }

/* Системные уведомления (Alerts) */
.alert-success { background: #dcfce7; color: #15803d; padding: 16px 20px; border-radius: 12px; margin-bottom: 25px; border: 1px solid #bbf7d0; font-weight: 600; display: flex; align-items: center; gap: 12px; animation: slideDown 0.4s ease; }
.alert-error { background: #fee2e2; color: #b91c1c; padding: 16px 20px; border-radius: 12px; margin-bottom: 25px; border: 1px solid #fca5a5; font-weight: 600; display: flex; align-items: center; gap: 12px; animation: slideDown 0.4s ease; }

@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }


/* =========================================
   4. ШАПКА И ФУТЕР
   ========================================= */
.main-header { 
    background: var(--header-bg); 
    color: var(--text-white); 
    padding: 15px 0; 
    position: fixed; 
    width: 100%; top: 0; 
    z-index: 1000; 
    box-shadow: var(--shadow-sm); 
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 42px; display: block; }
.main-nav a { color: var(--text-white); text-decoration: none; margin-left: 20px; font-weight: 500; transition: 0.2s;}
.main-nav a:hover { color: var(--accent-gold); }
.btn-cabinet { border: 1px solid rgba(255,255,255,0.3); padding: 6px 15px; border-radius: 20px; background: transparent; color: white; cursor: pointer; }

/* --- Иконка корзины с красным счетчиком в шапке --- */
.btn-cart-nav { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-right: 15px; color: inherit; transition: 0.2s; }
.btn-cart-nav:hover { color: var(--accent-gold); }
.cart-badge { 
    position: absolute; top: -8px; right: -10px; background: var(--brand-red); 
    color: white; border-radius: 50%; width: 18px; height: 18px; 
    font-size: 11px; display: flex; align-items: center; justify-content: center; 
    font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

/* --- Кнопка авторизации через Яндекс --- */
.yandex-auth-btn { transition: 0.2s; }
.yandex-auth-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Мобильное Бургер меню */
.burger-menu-btn { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background: none; border: none; cursor: pointer; z-index: 1001; }
.burger-menu-btn span { width: 100%; height: 3px; background: var(--text-white); border-radius: 2px; transition: 0.3s; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--primary-blue); z-index: 1000; transform: translateX(100%); transition: 0.4s; display: flex; align-items: center; justify-content: center; }
.mobile-overlay.active { transform: translateX(0); }
.mobile-nav-links { display: flex; flex-direction: column; text-align: center; gap: 25px; }
.mobile-link { color: var(--text-white); font-size: 24px; text-decoration: none; font-weight: bold; }

/* Футер (Подвал сайта) */
.main-footer { background: var(--footer-bg); color: var(--text-white); padding: 50px 0 20px; margin-top: 50px; }
.footer-grid-layout { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px;}
.footer-col h4 { color: var(--text-white); margin-bottom: 20px; text-transform: uppercase; font-family: var(--font-heading); font-size: 14px;}
.footer-links-list { list-style: none; padding: 0; margin: 0;}
.footer-links-list li { margin-bottom: 10px; }
.footer-links-list a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px;}
.footer-links-list a:hover { color: var(--accent-gold); }
.footer-phone-link { color: var(--accent-gold); font-size: 20px; font-weight: bold; text-decoration: none;}
.footer-social-icon { background: rgba(255,255,255,0.1); color: var(--text-white); padding: 8px 15px; border-radius: var(--radius-sm); font-size: 13px; text-decoration: none;}
.footer-social-icon:hover { background: var(--accent-gold); }
.footer-bottom-line { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }

/* Уведомление о Cookie */
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--header-bg); backdrop-filter: blur(10px); padding: 15px 0; z-index: 9999; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 768px) { 
    .main-nav { display: none; } 
    .burger-menu-btn { display: flex; } 
    .footer-grid-layout { grid-template-columns: 1fr; text-align: center; gap: 30px;} 
}


/* =========================================
   5. HERO БЛОКИ И ХЛЕБНЫЕ КРОШКИ
   ========================================= */
/* Главный слайдер на index.php */
.hero-section { 
    position: relative; 
    overflow: hidden; 
    background-color: var(--primary-blue); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    height: 60vh; 
    min-height: 400px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: var(--text-white); 
    margin-top: var(--header-height); 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Плавное схлопывание при скролле */
}

/* Состояние свернутого баннера при скролле (управляется через script.js) */
.hero-section.scrolled-collapse {
    height: 0;
    min-height: 0;
    opacity: 0;
    margin-top: var(--header-height); 
    pointer-events: none;
}

/* Чтобы текст внутри баннера тоже плавно исчезал */
.hero-section .hero-content { transition: all 0.3s ease; }
.hero-section.scrolled-collapse .hero-content { opacity: 0; transform: translateY(-20px); }

.hero-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; }
.hero-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 4.5s ease-in-out, transform 7s linear; transform: scale(1); }
.hero-slide.active { opacity: 1; transform: scale(1.05); } 
.hero-overlay-dark { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 25, 47, 0.4); z-index: 1; }
.hero-content { position: relative; z-index: 2; }
.hero-content h1 { font-size: clamp(28px, 5vw, 52px); margin-bottom: 15px; color: var(--text-white); line-height: 1.2; }
.hero-content p { font-size: 18px; opacity: 0.9; margin-bottom: 25px; }

/* Универсальная шапка внутренних страниц */
.page-hero-section { margin-top: 120px; margin-bottom: 35px; }
.page-breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
.page-breadcrumbs a:hover { color: var(--primary-blue); }
.page-breadcrumbs .sep { color: #cbd5e1; font-size: 11px; }
.page-breadcrumbs .current { color: var(--text-main); font-weight: 500; }
.page-title { font-size: clamp(28px, 4vw, 40px); color: var(--text-dark); margin: 0; font-family: var(--font-heading); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }

@media (max-width: 768px) {
    .page-hero-section { margin-top: 90px; margin-bottom: 20px; }
    .page-breadcrumbs { font-size: 12px; }
}


/* =========================================
   6. ПОИСК И ФИЛЬТРЫ
   ========================================= */
.search-section { padding: 40px 0; }

/* Правильный размер для заголовка "Поиск круизов" */
.psb-title { 
    font-size: 22px; 
    color: var(--text-dark); 
    margin: 0; 
    font-family: var(--font-heading); 
    font-weight: 800; 
}

/* Горизонтальная панель поиска */
.premium-search-box { 
    background: var(--bg-surface); border-radius: var(--radius-lg); padding: 20px; 
    box-shadow: var(--shadow-md); margin-bottom: 30px; border: 1px solid var(--border-color); 
    position: sticky; top: var(--header-height); z-index: 100; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95);
}
.psb-header { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.psb-tabs { display: flex; gap: 8px; flex-wrap: wrap;}
.psb-tab { padding: 6px 14px; border: none; border-radius: var(--radius-sm); background: var(--bg-surface-alt); color: var(--text-muted); font-weight: 500; cursor: pointer; transition: 0.2s; font-size: 13px; }
.psb-tab.active { background: var(--primary-blue); color: var(--text-white); }
.psb-tab:hover:not(.active) { background: var(--border-color); }

.psb-fields { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: center; }
.psb-field { display: flex; align-items: center; border: 1px solid var(--border-hover); border-radius: var(--radius-md); padding: 0 10px; height: 42px; background: var(--bg-surface); position: relative; cursor: pointer; transition: 0.2s; }
.psb-field:hover { border-color: var(--accent-gold); }
.psb-icon { color: var(--text-muted); margin-right: 8px; font-size: 15px;}
.psb-input { border: none; outline: none; background: transparent; width: 100%; font-size: 13px; color: var(--text-main); height: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pseudo-input { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; max-width: 85%;}
.psb-dropdown-menu { position: absolute; top: calc(100% + 5px); left: 0; width: 240px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 15px; z-index: 100; cursor: default; }
.psb-field select.psb-input { padding: 8px 30px 8px 0; }

/* Вертикальный Сайдбар с фильтрами */
.search-layout { display: grid; grid-template-columns: 280px 1fr; gap: 25px; align-items: start; }
.sidebar-filters { 
    background: var(--bg-surface); padding: 15px; border-radius: var(--radius-md); border: 1px solid var(--border-color); 
    position: sticky; top: calc(var(--header-height) + 140px); 
    max-height: calc(100vh - var(--header-height) - 160px); overflow-y: auto; padding-right: 5px; z-index: 10;
}
.sidebar-filters::-webkit-scrollbar { width: 4px; }
.sidebar-filters::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: var(--radius-sm); }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
#reset-filters { background: none; border: none; color: var(--primary-blue); cursor: pointer; font-size: 13px; font-weight: bold; padding: 0;}

.filter-block { padding-top: 15px; border-top: 1px solid var(--border-color); margin-bottom: 5px;}
.accordion-header { font-size: 13px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none;}
.filter-content { margin-top: 12px; }

/* Поиск по списку внутри фильтра */
.filter-search-box { position: relative; margin-bottom: 12px; }
.filter-search-box input { width: 100%; padding: 8px 10px 8px 30px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 12px; outline: none; }
.filter-search-box .fsb-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
.filter-scroll-list { max-height: 180px; overflow-y: auto; padding-right: 5px; }

/* Фильтр Цены (Двойной ползунок) */
.price-inputs-connected { display: flex; align-items: center; border: 1px solid var(--border-hover); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 15px; background: var(--bg-surface); }
.price-inputs-connected .input-half { flex: 1; display: flex; align-items: center; padding: 8px 10px; }
.price-inputs-connected .divider { width: 1px; height: 25px; background: var(--border-hover); }
.price-inputs-connected .prefix { color: var(--text-muted); font-size: 12px; margin-right: 6px; }
.price-inputs-connected .suffix { color: var(--text-main); font-size: 13px; margin-left: 6px; font-weight: bold;}
.price-inputs-connected input { border: none; outline: none; width: 100%; font-size: 14px; font-weight: bold; color: var(--text-main); padding: 0; background: transparent;}

.dual-range-slider { position: relative; height: 4px; background: #e2e8f0; border-radius: 4px; margin: 25px 0 20px 0; }
.slider-fill { position: absolute; height: 100%; background: var(--primary-blue); border-radius: 4px; z-index: 1; }
.dual-range-slider input[type="range"] { position: absolute; width: 100%; height: 4px; top: 0; left: 0; margin: 0; -webkit-appearance: none; background: transparent; pointer-events: none; z-index: 2; }
.dual-range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--primary-blue); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* Переключатель валют */
.currency-toggle { display: flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; background: var(--bg-surface);}
.currency-toggle input { display: none; }
.currency-toggle label { flex: 1; text-align: center; padding: 6px 0; cursor: pointer; font-size: 12px; font-weight: bold; color: var(--text-muted); border-right: 1px solid var(--border-color); }
.currency-toggle input:checked + label { background: var(--primary-blue); color: var(--text-white); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 600;}

/* Верхняя панель сортировки */
.results-summary-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; margin-bottom: 24px; border-bottom: 1px solid #e2e8f0; border-radius: var(--radius-md); transition: all 0.3s ease; }
.results-count { font-size: 15px; color: #475569; }
.results-count strong { color: #0f172a; font-weight: 600; }
.results-sort select { appearance: none; background: transparent; border: none; color: #2563eb; font-size: 14px; font-weight: 500; cursor: pointer; padding-right: 18px; outline: none; }
.sort-arrow { position: absolute; right: 0; color: #2563eb; font-size: 9px; pointer-events: none; top: 50%; transform: translateY(-50%);}

@media (max-width: 992px) {
    .search-layout { grid-template-columns: 1fr; }
    .sidebar-filters, .premium-search-box { position: static; max-height: none; }
    .psb-fields { grid-template-columns: 1fr 1fr; }
    .psb-fields button[type="submit"] { grid-column: span 2; }
}
@media (max-width: 768px) {
    .psb-fields { grid-template-columns: 1fr; }
    .psb-fields button[type="submit"] { grid-column: span 1; }
    .search-section { padding: 20px 0; }
}


/* =========================================
   7. КАРТОЧКИ (Круизы, Теплоходы, Новости, Бейджи)
   ========================================= */

/* --- Бейджи для карточек новостей и акций --- */
.action-badge { 
    position: absolute; top: 15px; left: 15px; background: var(--brand-red); 
    color: white; padding: 4px 10px; border-radius: 4px; font-size: 11px; 
    font-weight: bold; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 3; 
}
.action-period { 
    display: inline-block; background: #fff3e0; color: #b45309; 
    padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; 
    margin-bottom: 12px; border: 1px solid #fed7aa; 
}

/* --- 7.1 Карточка Круиза (Выдача) --- */
.cruise-results { display: flex; flex-direction: column; gap: 15px; position: relative; transition: opacity 0.3s ease;}
.cruise-results.is-loading { opacity: 0.5; pointer-events: none; filter: grayscale(20%); } 
.cruise-card-rich { display: grid; grid-template-columns: 280px 1fr 220px; background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s; }
.cruise-card-rich:hover { box-shadow: var(--shadow-md); }

.cc-gallery-wrapper { position: relative; overflow: hidden; background: var(--bg-surface-alt); }
.cc-gallery-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%;}
.cc-gallery-scroll img { scroll-snap-align: start; flex: 0 0 100%; width: 100%; height: 100%; min-height: 200px; object-fit: cover;}

.cc-info { padding: 15px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color);}
.cc-info h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.3; }
.cc-ship { font-size: 12px; color: var(--text-main); font-weight: 600; margin-bottom: 8px;}
.clickable-route { cursor: pointer; background: var(--bg-surface-alt); padding: 8px; border-radius: var(--radius-sm); margin: 8px 0; transition: 0.2s; }
.clickable-route:hover { background: var(--border-color); color: var(--primary-blue); }
.cabin-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; border-bottom: 1px dashed var(--border-color); padding: 4px 0; }

.cc-action { padding: 15px 20px; display: flex; flex-direction: column; justify-content: center; background: var(--bg-surface);}
.btn-book { background: var(--action-green); color: var(--text-white); border: none; padding: 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.2s; width: 100%; text-align: center; display: block; }
.btn-book:hover { background: var(--action-green-hover); }

/* Всплывающие подсказки (Popover) */
.action-popover { position: relative; display: inline-block; cursor: pointer; }
.dashed-link { font-size: 11px; color: var(--text-muted); border-bottom: 1px dashed var(--text-muted); transition: 0.2s; white-space: nowrap; }
.dashed-link:hover { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
.promo-trigger { background: var(--brand-red); color: var(--text-white); padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: bold; display: inline-block; transition: 0.2s; }
.action-popover .popover-content { display: none; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); width: 250px; padding: 12px; border-radius: var(--radius-md); font-size: 12px; z-index: 100; text-align: left; line-height: 1.5; box-shadow: var(--shadow-lg); cursor: default; }
.action-popover:hover .popover-content { display: block; }
.action-popover .popover-content::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; }
.tooltip-white { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); }
.tooltip-white::after { border-color: var(--bg-surface) transparent transparent transparent; }
.tooltip-dark { background: var(--text-dark); color: var(--text-white); }
.tooltip-dark::after { border-color: var(--text-dark) transparent transparent transparent; }
.promo-item { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); font-weight: bold; }
.promo-item:last-child { border-bottom: none; }


/* --- 7.2 Карточка Теплохода --- */
.fleet-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: 0.3s ease; height: 100%; }
.fleet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-blue); }
.fc-image-wrap { height: 240px; position: relative; background-color: #f1f5f9; }
.fc-image { width: 100%; height: 100%; object-fit: cover; }
.fc-badge { position: absolute; top: 15px; left: 15px; background: rgba(10, 25, 47, 0.8); backdrop-filter: blur(5px); color: var(--accent-gold); padding: 6px 14px; border-radius: 30px; font-weight: bold; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.fc-fav-btn { position: absolute; top: 15px; right: 15px; background: #fff; border: 1px solid var(--border-color); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: 0.2s; box-shadow: var(--shadow-sm); z-index: 5; }
.fc-fav-btn:hover { border-color: var(--border-hover); }
.fc-body { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.fc-title { font-size: 22px; margin: 0 0 8px 0; color: var(--text-dark); font-family: var(--font-heading); }
.fc-comfort-level { margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.fc-desc { color: var(--text-main); font-size: 14px; line-height: 1.6; margin-bottom: 25px; flex-grow: 1; }
.fc-stats { display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 15px; margin-bottom: 20px; font-size: 13px; color: var(--text-muted); font-weight: 500; }


/* --- 7.3 Блок Акций --- */
.home-news-section { padding: 60px 0; background: var(--bg-body); }
.home-news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }

.promos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 35px; margin-bottom: 80px; }
.promo-card { background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: 0.3s; position: relative; }
.promo-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.promo-card.expired { opacity: 0.75; }
.promo-card.expired .promo-image { filter: grayscale(0.8); } 

.promo-image-wrapper { position: relative; width: 100%; height: 220px; background-color: var(--bg-surface-alt); }
.promo-image { width: 100%; height: 100%; object-fit: cover; }
.promo-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, rgba(15, 23, 42, 0.6), transparent); }

.badge-type { position: absolute; top: 15px; left: 15px; background: rgba(255, 255, 255, 0.95); color: #0f172a; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 30px; text-transform: uppercase; box-shadow: 0 4px 6px rgba(0,0,0,0.1); backdrop-filter: blur(4px); }
.badge-discount { position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #ef4444, #b91c1c); color: #ffffff; font-size: 20px; font-weight: 900; padding: 5px 15px; border-radius: 30px; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); border: 2px solid #fff; }
.badge-expired { position: absolute; top: 15px; left: 15px; background: #64748b; color: #fff; font-size: 12px; font-weight: bold; padding: 4px 12px; border-radius: 4px; }

.promo-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.promo-title { margin: 0 0 10px 0; font-size: 22px; color: #0f172a; font-weight: 800; line-height: 1.3; font-family: var(--font-heading); }
.promo-dates { font-size: 13px; color: #64748b; margin-bottom: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.promo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.promo-tag { background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; display: flex; align-items: center; gap: 4px; }
.promo-tag.audience { background: #e0f2fe; color: #0369a1; }
.promo-tag.ships { background: #fef3c7; color: #a16207; }

.promo-desc { margin: 0 0 20px 0; font-size: 15px; color: #475569; line-height: 1.6; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Блок копирования промокода */
.promo-code-box { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 20px; cursor: pointer; transition: 0.2s; position: relative; }
.promo-code-box:hover { background: #f1f5f9; border-color: var(--primary-blue); }
.promo-code-box .code-label { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: bold; margin-bottom: 2px; }
.promo-code-box .code-value { font-size: 18px; font-weight: 900; color: #0f172a; letter-spacing: 1px; }
.promo-code-box .copy-hint { font-size: 11px; color: var(--action-green); opacity: 0; transition: 0.2s; }
.promo-code-box.copied .copy-hint { opacity: 1; }

.btn-read-more { display: inline-block; padding: 12px 20px; background: #f1f5f9; color: #0f172a; border-radius: 8px; font-size: 14px; font-weight: 700; text-align: center; transition: 0.2s; width: 100%; box-sizing: border-box; }
.btn-read-more:hover { background: var(--primary-blue); color: #ffffff; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); }


/* --- 7.4 Блок Новостей на Главной (3 Дизайна) --- */

/* ВАРИАНТ 1: ПОСТРОЧНО */
.news-layout-linear { display: flex; flex-direction: column; gap: 24px; }
.linear-card { display: flex; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s ease; text-decoration: none; min-height: 220px; }
.linear-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-blue); transform: translateX(5px); }
.linear-img { width: 320px; flex-shrink: 0; background-color: var(--bg-surface-alt); background-size: cover; background-position: center; position: relative; border-right: 1px solid var(--border-color); }
.linear-content { padding: 30px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
.linear-date { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.linear-title { font-size: 20px; font-family: var(--font-heading); color: var(--primary-blue); margin: 0 0 12px 0; line-height: 1.3; transition: color 0.2s; }
.linear-card:hover .linear-title { color: var(--accent-gold); }
.linear-excerpt { font-size: 15px; color: var(--text-main); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ВАРИАНТ 2: МОЗАИКА */
.news-layout-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 20px; }
.mosaic-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; display: flex; align-items: flex-end; box-shadow: var(--shadow-sm); background-color: var(--bg-surface-alt); }
.mosaic-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.mosaic-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.4) 50%, rgba(10, 25, 47, 0.1) 100%); transition: background 0.3s; }
.mosaic-card:hover .mosaic-bg { transform: scale(1.08); } 
.mosaic-card:hover .mosaic-overlay { background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.6) 60%, rgba(10, 25, 47, 0.3) 100%); }
.mosaic-content { position: relative; z-index: 2; padding: 25px; width: 100%; }
.mosaic-date { display: inline-block; background: var(--accent-gold); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.mosaic-title { color: #fff; font-family: var(--font-heading); font-size: 18px; margin: 0; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.mosaic-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic-card:nth-child(1) .mosaic-title { font-size: 28px; }

/* ВАРИАНТ 3: СЛАЙДЕР */
.news-layout-slider { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 15px; margin-bottom: -15px; }
.news-layout-slider::-webkit-scrollbar { display: none; }
.slider-card { flex: 0 0 calc(33.333% - 16px); min-width: 320px; scroll-snap-align: start; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; display: flex; flex-direction: column; }
.slider-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-blue); }
.slider-img { height: 220px; background-color: var(--bg-surface-alt); background-size: cover; background-position: center; position: relative; border-bottom: 1px solid var(--border-color); }
.slider-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; }
.slider-date { font-size: 12px; color: var(--accent-gold); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.slider-title { font-size: 20px; font-family: var(--font-heading); color: var(--primary-blue); margin: 0 0 10px 0; line-height: 1.4; transition: color 0.2s; align-self: stretch; }
.slider-card:hover .slider-title { color: var(--accent-gold); }
.slider-excerpt { font-size: 14px; color: var(--text-main); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; align-self: stretch; }

/* Пагинация */
.pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.page-btn { background: #fff; border: 1px solid var(--border-color); color: var(--text-dark); width: 40px; height: 40px; border-radius: var(--radius-md); font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.page-btn:hover:not(:disabled) { border-color: var(--primary-blue); color: var(--primary-blue); }
.page-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-btn.prev-next { width: auto; padding: 0 15px; font-size: 13px; text-transform: uppercase; }

/* Адаптив карточек */
@media (max-width: 1024px) { 
    .cruise-card-rich { grid-template-columns: 300px 1fr; } 
    .cc-gallery-wrapper { width: 100%; height: 100%; }
    .cc-info { border-right: none; border-bottom: 1px solid var(--border-color); }
    .cc-action { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .cc-action > div { margin-bottom: 0; text-align: left; }
    
    .slider-card { flex: 0 0 calc(50% - 12px); } 
}

@media (max-width: 992px) {
    .news-layout-mosaic { grid-template-columns: repeat(2, 1fr); } 
    .mosaic-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 768px) {
    .cruise-card-rich { grid-template-columns: 1fr; }
    .cc-action { flex-direction: column; text-align: center; }
    .cc-action > div { margin-bottom: 10px; text-align: center; }
    
    .linear-card { flex-direction: column; transform: none !important; } 
    .linear-img { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--border-color); } 
    .linear-content { padding: 20px; }
    
    .news-layout-mosaic { grid-template-columns: 1fr; grid-auto-rows: 250px; } 
    .mosaic-card:nth-child(1) { grid-column: span 1; grid-row: span 1; } 
    .mosaic-card:nth-child(1) .mosaic-title { font-size: 20px; }
    
    .slider-card { flex: 0 0 85%; min-width: 280px; } 
    .news-layout-slider { gap: 15px; }
    
    .promos-grid { grid-template-columns: 1fr; gap: 25px; margin-bottom: 40px; }
}


/* =========================================
   8. СТРАНИЦЫ ДЕТАЛИЗАЦИИ
   ========================================= */

/* --- 8.1 Страница конкретного Тура tour.php --- */
.tour-hero { background: linear-gradient(135deg, var(--primary-blue), #1e3a8a); color: var(--text-white); padding: 40px 0; border-radius: var(--radius-lg); margin-bottom: 40px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.tour-hero::after { content: '🚢'; position: absolute; right: -30px; bottom: -50px; font-size: 250px; opacity: 0.05; line-height: 1; } 

.tour-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.tour-section { background: var(--bg-surface); padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); margin-bottom: 30px; position: relative; }
.tour-tabs-container { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid var(--border-color); padding-bottom: 15px; overflow-x: auto; scrollbar-width: none; }
.tour-tab-btn { padding: 12px 24px; border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; font-size: 16px; font-weight: 600; transition: 0.2s; white-space: nowrap; color: var(--text-muted); }
.tour-tab-btn.active { background: var(--primary-blue); color: white; }

/* Список кают для выбора */
.cabin-item-row { border-radius: var(--radius-md); padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; box-shadow: var(--shadow-sm); border: 1px solid var(--border-hover); background: #fff; cursor: pointer; }
.cabin-item-row.selected { border: 2px solid var(--action-green); background: #f0fdf4; }
.cabin-item-row.booked { opacity: 0.6; background: var(--bg-body); cursor: not-allowed; border-color: var(--border-color); }
.cabin-item-info { display: flex; flex-direction: column; gap: 5px; }
.cabin-item-action { text-align: right; }

/* Таймлайн расписания круиза */
.itinerary-timeline { position: relative; padding-left: 25px; border-left: 2px solid var(--accent-gold); margin-left: 10px;}

/* --- 8.2 Страница Теплохода ship.php --- */
.ship-page-container { max-width: 1240px; margin: 0 auto; padding: 40px 20px; }
.ship-header-block { background: #fff; border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); margin-bottom: 30px; border: 1px solid var(--border-color);}
.ship-title { font-size: 36px; font-family: var(--font-heading); font-weight: bold; margin: 0 0 10px 0; color: #0f172a; }

.ship-params { display: flex; gap: 30px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.param-item .val { font-size: 24px; font-weight: bold; color: var(--primary-blue); }
.param-item .lbl { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.section-title { font-size: 28px; font-family: var(--font-heading); font-weight: bold; margin: 40px 0 20px; color: #0f172a; }

.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.crew-card { background: #fff; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; }
.crew-img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.crew-role { font-size: 12px; color: var(--accent-gold); font-weight: bold; text-transform: uppercase; }
.crew-name { font-size: 16px; font-weight: bold; color: var(--text-dark); margin-top: 4px; }

.cabin-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-bottom: 20px; overflow: hidden; display: flex; box-shadow: var(--shadow-sm); }
.cabin-gallery { width: 400px; flex-shrink: 0; background: var(--bg-surface-alt); display: flex; align-items: center; justify-content: center; }
.cabin-gallery img { width: 100%; height: 100%; object-fit: cover; }
.cabin-info { padding: 30px; flex: 1; }
.cabin-title { font-size: 22px; font-weight: bold; margin-top: 0; color: var(--text-dark); }
.cabin-desc { font-size: 14px; line-height: 1.6; color: var(--text-main); margin-bottom: 20px; }
.cabin-features { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
.feature-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); background: var(--bg-surface-alt); padding: 6px 12px; border-radius: 6px; }
.cabin-numbers { display: flex; gap: 8px; flex-wrap: wrap; }
.c-num { background: var(--primary-blue); color: #fff; font-size: 12px; font-weight: bold; padding: 4px 8px; border-radius: var(--radius-sm); }

@media (max-width: 992px) {
    .tour-layout { grid-template-columns: 1fr; gap: 25px; }
    .tour-sidebar { position: static !important; order: -1; margin-bottom: 10px; }
    .tour-main-content { order: 2; }
}
@media (max-width: 768px) {
    .tour-title { font-size: 26px !important; }
    .tour-section { padding: 20px 15px; }
    .cabin-item-row { flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px; }
    .cabin-item-action { text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--border-color); padding-top: 15px; }
    .cabin-card { flex-direction: column; }
    .cabin-gallery { width: 100%; height: 250px; }
}


/* =========================================
   9. ОФОРМЛЕНИЕ ЗАКАЗА (Корзина и Checkout)
   ========================================= */
/* Корзина (cart.php) */
.cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; }
.cart-item { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 25px; margin-bottom: 20px; display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; box-shadow: var(--shadow-sm); position: relative; transition: 0.2s; }
.cart-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.remove-item-btn { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; transition: 0.2s; padding: 5px; line-height: 1; }
.remove-item-btn:hover { color: var(--brand-red); }
.quantity-control { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty-btn { width: 28px; height: 28px; border: 1px solid var(--border-color); background: #fff; border-radius: 50%; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.qty-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.summary-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px; position: sticky; top: 140px; box-shadow: var(--shadow-sm); }

/* Оформление (checkout.php) */
.checkout-card { background: var(--bg-surface); padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); margin-bottom: 25px; }
.checkout-title { font-size: 20px; color: var(--text-dark); margin: 0 0 20px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; font-family: var(--font-heading); }
.passenger-block { background: var(--bg-surface-alt); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 15px; }
.passenger-header { font-size: 16px; font-weight: bold; color: var(--primary-blue); margin-bottom: 15px; }

/* Выбор метода оплаты */
.payment-method { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border: 2px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; background: #fff; }
.payment-method:hover { border-color: var(--border-hover); }
.payment-method.active { border-color: var(--primary-blue); background: var(--bg-surface-alt); }
.payment-method .pm-title { font-size: 15px; font-weight: 600; color: var(--text-dark); }
.payment-method .pm-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 992px) {
    .cart-grid { grid-template-columns: 1fr !important; }
    .cart-item { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .remove-item-btn { position: absolute; top: 15px; right: 15px; }
}


/* =========================================
   10. ЛИЧНЫЙ КАБИНЕТ
   ========================================= */
.cabinet-section { padding: 40px 0;}
.cabinet-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; margin-top: 20px; }
.cabinet-sidebar { background: var(--bg-surface); padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); height: fit-content; box-shadow: var(--shadow-md);}
.cabinet-user-info { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px;}
.cabinet-avatar { width: 70px; height: 70px; color: var(--text-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 15px; font-weight: bold; box-shadow: 0 4px 10px rgba(10,25,47,0.2);}
.cabinet-menu { list-style: none; padding: 0; margin: 0; }
.cabinet-tab-btn { display: block; padding: 12px 16px; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-md); transition: 0.2s; font-weight: 500; margin-bottom: 5px; font-size: 14px;}
.cabinet-tab-btn:hover { background: var(--bg-body); color: var(--primary-blue); }
.cabinet-tab-btn.active { background: #eff6ff; color: #2563eb; font-weight: bold; }
.cabinet-content { background: var(--bg-surface); padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-md);}

/* Карточка отложенного круиза (Корзина внутри кабинета) */
.mini-cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; align-items: center; padding: 20px; background: var(--bg-body); border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 15px; }

/* Карточки Избранного */
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.fav-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; position: relative; transition: 0.3s; display: flex; flex-direction: column; }
.fav-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); transform: translateY(-3px); }
.fav-img { width: 100%; height: 160px; object-fit: cover; }
.fav-badge { position: absolute; top: 10px; left: 10px; background: var(--primary-blue); color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.fav-remove { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; width: 30px; height: 30px; border-radius: 50%; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.fav-remove:hover { background: var(--brand-red); }

@media (max-width: 1024px) { .cabinet-layout { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .mini-cart-item { grid-template-columns: 1fr; text-align: center; } }


/* =========================================
   11. КОНТЕНТНЫЕ СТРАНИЦЫ (О компании, Новости)
   ========================================= */
/* Страница О компании (about.php) */
.about-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.card { background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); padding: 24px; }
.card-hover:hover { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: var(--shadow-lg); transition: 0.3s;}

@media (max-width: 992px) { .about-layout { grid-template-columns: 1fr !important; } }

/* Сетка страниц Каталога Новостей (news.php) */
.news-page-section { padding: 20px 0 80px; background-color: var(--bg-body); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; }
.news-card { display: flex; flex-direction: column; background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; text-decoration: none; height: 100%; }
.nc-image-wrap { height: 220px; background-color: var(--bg-surface-alt); position: relative; overflow: hidden; }
.nc-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-card:hover .nc-image { transform: scale(1.05); }
.nc-body { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.nc-date { font-size: 13px; color: var(--accent-gold); font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.nc-title { font-size: 20px; font-family: var(--font-heading); color: var(--text-dark); margin: 0 0 12px 0; line-height: 1.4; transition: color 0.2s; }
.news-card:hover .nc-title { color: var(--primary-blue); }
.nc-excerpt { font-size: 15px; color: var(--text-main); line-height: 1.6; margin: 0 0 20px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; }
.nc-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--border-color); font-size: 14px; font-weight: bold; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; transition: color 0.2s; }
.news-card:hover .nc-footer { color: var(--primary-blue); }
.nc-footer-arrow { transition: transform 0.3s ease; }
.news-card:hover .nc-footer-arrow { transform: translateX(5px); color: var(--accent-gold); }

.empty-news, .empty-state { text-align: center; padding: 80px 20px; background: var(--bg-surface); border-radius: var(--radius-lg); border: 2px dashed var(--border-color); }

@media (max-width: 768px) { .news-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Стилизация контента созданного в WYSIWYG редакторе */
.wysiwyg-content p { margin-bottom: 15px; }
.wysiwyg-content ul, .wysiwyg-content ol { margin-bottom: 20px; padding-left: 20px; }
.wysiwyg-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 15px 0; }
.wysiwyg-content a { color: var(--primary-blue); text-decoration: underline; }
.gallery-item-wrap:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }


/* =========================================
   12. МОДАЛЬНЫЕ ОКНА И АНИМАЦИИ
   ========================================= */
/* Глобальная Модалка */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 23, 42, 0.6); z-index: 2000; 
    display: flex; align-items: center; justify-content: center; 
    backdrop-filter: blur(3px); 
}
.modal-content { background: var(--bg-surface); padding: 25px; border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg);}
.close-modal-btn { position: absolute; right: 20px; top: 20px; background: none; border: none; font-size: 28px; color: var(--text-muted); cursor: pointer; transition: 0.2s; line-height: 1;}
.close-modal-btn:hover { color: var(--brand-red); }

/* Табы внутри модального окна */
.modal-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
.modal-tab-btn { background: none; border: none; font-size: 14px; color: var(--text-muted); cursor: pointer; font-weight: bold; padding: 5px 10px; white-space: nowrap;}
.modal-tab-btn.active { color: var(--primary-blue); border-bottom: 2px solid var(--primary-blue);}

/* Lightbox (Увеличение картинок) */
#custom-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.9); z-index: 9999; justify-content: center; align-items: center; cursor: zoom-out; }
#custom-lightbox img { max-width: 90%; max-height: 85%; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); animation: zoomIn 0.2s ease-out; }

/* Скелетная загрузка (Skeleton Loader) */
.skeleton-container { display: flex; flex-direction: column; gap: 15px; }
.skeleton-card { pointer-events: none; }
.sk-image, .sk-line { 
    background: var(--bg-surface-alt); 
    background-image: linear-gradient(90deg, rgba(226, 232, 240, 0.6) 0px, rgba(248, 250, 252, 0.8) 40px, rgba(226, 232, 240, 0.6) 80px); 
    background-size: 800px 100%; 
    animation: shimmer 1.5s infinite linear; 
    border-radius: var(--radius-sm); 
}
.sk-image { height: 100%; min-height: 220px; width: 100%; border-radius: 0; }
.sk-title { height: 24px; width: 80%; margin-bottom: 20px; }
.sk-date { height: 35px; width: 60%; margin-bottom: 20px; border-radius: var(--radius-md); }
.sk-text { height: 14px; width: 100%; margin-bottom: 10px; }
.sk-price { height: 30px; width: 120px; margin-bottom: 20px; }
.sk-btn { height: 44px; width: 100%; border-radius: var(--radius-md); margin-top: auto; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media screen and (max-width: 768px) {
    .psb-input, .filter-search-box input, input[type="text"], input[type="number"], input[type="date"], input[type="tel"], input[type="email"] { font-size: 16px !important; }
}

/* =========================================
   13. БЛОК ПОДПИСКИ НА РАССЫЛКУ (ФУТЕР)
   ========================================= */
.subscribe-wrapper {
    background: #0f172a; 
    border-radius: 12px;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0 auto 60px; 
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.subscribe-content { flex: 1; color: #ffffff; }
.subscribe-content h2 {
    font-size: 24px; font-weight: 700; margin: 0 0 12px 0;
    font-family: var(--font-heading); color: #ffffff !important; 
}
.subscribe-content p { font-size: 14px; color: #94a3b8; margin: 0; line-height: 1.5; }
.subscribe-form-container { flex: 1; max-width: 480px; position: relative; }
.subscribe-form { display: flex; gap: 15px; }
.subscribe-form input {
    flex: 1; padding: 15px 20px; border-radius: 6px; border: none;
    outline: none; font-size: 15px; font-family: var(--font-body);
}
.subscribe-form input:focus { box-shadow: 0 0 0 3px rgba(200, 161, 125, 0.3); }
.subscribe-form button {
    background: var(--accent-gold); color: #ffffff; border: none; border-radius: 6px;
    padding: 0 32px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: 0.2s ease; font-family: var(--font-body); white-space: nowrap;
}
.subscribe-form button:hover:not(:disabled) { background: var(--accent-gold-hover); }
.subscribe-form button:disabled { opacity: 0.7; cursor: not-allowed; }

.subscribe-message {
    position: absolute; bottom: -25px; left: 0;
    font-size: 13px; font-weight: 500; animation: fadeIn 0.3s ease-in;
}
.subscribe-message.success { color: #4ade80; }
.subscribe-message.error { color: #f87171; }

@media (max-width: 992px) {
    .subscribe-wrapper { flex-direction: column; text-align: center; padding: 35px 25px; gap: 25px; }
    .subscribe-form { flex-direction: column; width: 100%; }
    .subscribe-form button { padding: 15px; }
    .subscribe-message { text-align: center; width: 100%; }
}


/* =========================================
   14. ПАНЕЛЬ УПРАВЛЕНИЯ (АДМИНКА) - Дашборд и статистика
   ========================================= */
.welcome-banner {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.4);
    position: relative;
    overflow: hidden;
}
.welcome-banner h1 { font-size: 28px; margin-bottom: 10px; font-weight: 800; position: relative; z-index: 2; color: #fff; }
.welcome-banner p { font-size: 16px; opacity: 0.9; max-width: 600px; line-height: 1.5; position: relative; z-index: 2; margin: 0; }
.welcome-banner::after { content: ''; position: absolute; right: -50px; top: -100px; width: 300px; height: 300px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: 1; }
.welcome-banner::before { content: ''; position: absolute; right: 150px; bottom: -80px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: 1; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.stat-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; flex-shrink: 0;
}
.icon-blue { background: #e0f2fe; color: #0284c7; }
.icon-green { background: #dcfce7; color: #16a34a; }
.icon-gold { background: #fef9c3; color: #ca8a04; }
.icon-purple { background: #f3e8ff; color: #9333ea; }

.stat-info h3 { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 5px; line-height: 1; }
.stat-info p { font-size: 14px; color: #64748b; font-weight: 500; margin: 0; }


/* =========================================
   15. ФИКСЫ ОТРИСОВКИ (Z-index и обрезка карточек при наведении)
   ========================================= */
/* 1. Даем карточкам приоритет по Z-индексу при наведении */
.promo-card, .news-card, .slider-card, .fleet-card, .cruise-card-rich, .stat-card {
    position: relative;
    z-index: 1;
}
.promo-card:hover, .news-card:hover, .slider-card:hover, .fleet-card:hover, .cruise-card-rich:hover, .stat-card:hover {
    z-index: 20; 
}

/* 2. Расширяем невидимые границы сеток вверх, чтобы карточкам было куда "подпрыгивать" */
.promos-grid, .news-grid, .news-layout-slider, .dashboard-grid {
    padding-top: 15px !important;
    margin-top: -15px !important;
}