/* --- Сброс и базовые стили --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif; /* Шрифт текста */
    color: #333;
    background-color: #f9f9f9;
}

/* --- Заглушки Header/Footer --- */
.site-header, .site-footer {
    background-color: #222;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.site-header {
    border-bottom: 5px solid #d4af37; /* Золотая полоска */
}

/* --- Hero Section (Поезд) --- */
.hero-section {
    position: relative;
    height: 400px; /* Высота как на скрине примерно */
    width: 100%;
    /* НОВАЯ ССЫЛКА НА ИЗОБРАЖЕНИЕ */
    background-image: url('https://www.wbstudiotour.co.uk/wp-content/uploads/2019/08/Hogwarts-Express.jpg'); 
    background-size: cover;
    background-position: center 30%; /* Смещаем, чтобы поезд был виден лучше */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Затемнение фона для читаемости текста */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4); 
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

/* SVG Узор */
.hero-flourish {
    width: 140px;
    height: auto;
    fill: #fff; /* Белый цвет узора */
    display: block;
    margin: 0 auto 10px auto;
}

/* Заголовок "Tickets Please" */
.hero-content h1 {
    font-family: 'Cinzel', serif; /* Магический шрифт с засечками */
    font-size: 3.5rem;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-top: 10px;
}

/* --- Info Bar (Белая полоса с иконками) --- */
.info-bar {
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

.info-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center; /* Центрируем блок целиком */
    align-items: center;
    /* ИЗМЕНЕНИЕ: nowrap запрещает перенос на новую строку на ПК */
    flex-wrap: nowrap; 
    /* ИЗМЕНЕНИЕ: Уменьшили отступ, чтобы влезло в одну строку */
    gap: 20px; 
    padding: 0 20px;
}

.info-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #444;
    /* Позволяем элементам немного сжиматься, если экран узкий, но не переноситься */
    flex: 0 1 auto;
}

.info-item img {
    height: 35px; /* Размер иконок */
    width: auto;
    margin-right: 10px;
    flex-shrink: 0; /* Чтобы иконка не сжималась */
}

/* --- Booking Intro Text --- */
.booking-intro {
    text-align: center;
    padding: 40px 20px;
    /* ИЗМЕНЕНИЕ: Увеличили максимальную ширину, чтобы текст влез в одну строку */
    max-width: 1100px;
    margin: 0 auto;
}

.booking-intro p {
    font-family: 'Cinzel', serif; /* Тот же шрифт, что в заголовке */
    font-size: 1.5rem;
    color: #333;
    line-height: 1.4;
}

/* --- Адаптивность для мобильных (меньше 768px) --- */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .info-bar .container {
        /* На мобильных разрешаем перенос в столбик */
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .booking-intro p {
        font-size: 1.2rem;
    }
}
/* --- Блок календаря (Availability Card) --- */
.availability-section {
    padding: 0 20px 40px 20px; /* Отступы снаружи */
    display: flex;
    justify-content: center;
}

.availability-card {
    background-color: #fff;
    width: 100%;
    max-width: 1000px; /* Ширина карточки */
    
    /* Тень (Shadow) как на скрине */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
    border-radius: 5px; /* Скругление углов карточки */
    
    /* Flexbox для расположения текста слева, кнопки справа */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    padding: 30px; /* Внутренний отступ */
    margin-top: 10px;
    gap: 30px; /* Расстояние между текстом и кнопкой */
}

.availability-text {
    font-size: 1rem;
    font-weight: 700; /* Жирный текст как на скрине */
    color: #222;
    line-height: 1.4;
    text-align: left;
}

/* --- Кнопка (View Calendar) --- */
.btn-outline {
    display: inline-block;
    text-decoration: none;
    background-color: transparent;
    
    /* Синий цвет границы и текста */
    color: #005f88; 
    border: 1px solid #005f88;
    
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap; /* Чтобы текст кнопки не переносился */
    transition: all 0.3s ease;
}

/* Эффект при наведении на кнопку */
.btn-outline:hover {
    background-color: #005f88;
    color: #fff;
}

/* --- Адаптивность для мобильных --- */
@media (max-width: 768px) {
    .availability-card {
        flex-direction: column; /* Текст сверху, кнопка снизу */
        text-align: center;
        padding: 20px;
    }

    .availability-text {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .btn-outline {
        width: 100%; /* Кнопка на всю ширину на телефоне */
        text-align: center;
    }
}



/* --- Секция с билетами (Grid) --- */
.tickets-section {
    padding: 40px 0;
    background-color: #f9f9f9;
}

/* Контейнер для сетки (если его еще нет в коде) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.ticket-grid {
    display: grid;
    /* 3 колонки равной ширины */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Расстояние между карточками */
}

/* --- Карточка товара --- */
.ticket-card {
    background: #fff;
    border-radius: 8px; /* Скругление всей карточки */
    overflow: hidden; /* Чтобы контент не вылезал за скругления */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column; /* Чтобы футер прижимался к низу */
    height: 100%;
}

/* Верхняя цветная шапка */
.card-header {
    padding: 15px;
    text-align: center;
    color: #fff;
    min-height: 80px; /* Фиксированная высота шапки для ровности */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.2;
}

/* Темы цветов */
.theme-blue { background-color: #0c2a4b; }
.theme-purple { background-color: #50338e; }

/* Блок с картинкой и ценой */
.card-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Затемнение картинки */
.card-image::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.3);
}

.price-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-label {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
}

.price-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Подзаголовок (серая полоса) */
.card-subtitle {
    background-color: #f0f0f0;
    font-size: 0.75rem;
    padding: 8px 10px;
    text-align: center;
    color: #555;
    font-weight: 700;
}

/* Основной контент (список) */
.card-body {
    padding: 20px;
    flex-grow: 1; /* Растягивает этот блок, чтобы футер ушел вниз */
}

.body-intro {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.check-list {
    list-style: none; /* Убираем стандартные точки */
    padding-left: 0;
}

.check-list li {
    position: relative;
    padding-left: 25px; /* Место под галочку */
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333;
}

/* Рисуем галочку через CSS */
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 6px;
    border-left: 2px solid #333; /* Толщина галочки */
    border-bottom: 2px solid #333;
    transform: rotate(-45deg); /* Поворот чтобы получить "V" */
}

.check-list a {
    color: #005f88;
    text-decoration: underline;
}

/* Подвал карточки */
.card-footer {
    padding: 20px;
    text-align: center;
    background-color: #fff;
}

.price-info {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 1rem;
}

.spacer {
    height: 24px; /* Чтобы компенсировать отсутствие текста "Prices" во 2 и 3 карточке */
}

/* Желтая кнопка "Билет" */
.ticket-btn {
    display: block;
    width: 100%;
    background-color: #fdb913; /* Желтый цвет WB */
    color: #000;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 0;
    font-size: 1.1rem;
    margin-bottom: 10px;
    
    /* Делаем форму как на скрине ("билетик") */
    position: relative;
    mask-image: radial-gradient(circle at center left, transparent 10px, black 10px),
                radial-gradient(circle at center right, transparent 10px, black 10px);
    mask-position: top left, top right;
    mask-size: 51% 100%;
    mask-repeat: no-repeat;
    /* Если маска не сработает в старых браузерах, будет просто прямоугольник */
    border-radius: 4px;
}

.ticket-btn:hover {
    background-color: #e5a812;
}

/* Ссылка внизу */
.check-availability-link {
    font-size: 0.9rem;
    color: #005f88;
    text-decoration: none;
    font-weight: 700;
}

.check-availability-link:hover {
    text-decoration: underline;
}

/* --- Адаптивность --- */
@media (max-width: 992px) {
    .ticket-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшете */
    }
}

@media (max-width: 768px) {
    .ticket-grid {
        grid-template-columns: 1fr; /* 1 колонка на телефоне */
        max-width: 400px;
        margin: 0 auto;
    }
}
/* Добавьте это к классам .theme-blue и .theme-purple */
.theme-light-blue { background-color: #225296; }

/* Стиль для центрированного текста под списком (например, "Limited Availability") */
.card-body-note {
    text-align: center;
    font-weight: 700;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #333;
}
/* --- Карточка товара (Обновленный стиль с тенью) --- */
.ticket-card {
    background: #fff; /* Белый фон обязательно */
    border-radius: 8px; /* Скругленные углы */
    overflow: hidden; /* Чтобы картинка сверху не вылезала за углы */
    
    /* ТЕНЬ (Эффект обертки) */
    /* сдвиг-x | сдвиг-y | размытие | растяжение | цвет */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
    
    /* Небольшая рамка для четкости (опционально, если хотите) */
    border: 1px solid rgba(0,0,0,0.05);

    display: flex;
    flex-direction: column; 
    height: 100%;
    
    /* Плавная анимация при наведении */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Эффект при наведении мышки */
.ticket-card:hover {
    transform: translateY(-7px); /* Карточка немного поднимается вверх */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); /* Тень становится больше и мягче */
}
.theme-dark-purple { background-color: #261541; }
/* 1. Баннер шапки */
.stepper-banner {
    width: 100%;
    height: 140px; /* Немного увеличил высоту, чтобы картинка смотрелась лучше */
    
    /* Вставляем вашу ссылку */
    background-image: url('https://book.wbstudiotour.com/build/assets/wbstl_desktop_banner-BUwR7iE3.png');
    
    background-size: cover; /* Картинка растянется на всю ширину */
    background-position: center bottom; /* Центрируем, но прижимаем к низу (обычно там важные детали) */
    background-repeat: no-repeat;
}
/* --- Stepper Page Styles --- */

/* 1. Баннер шапки */
.stepper-banner {
    width: 100%;
    height: 120px; /* Высота баннера */
    background-color: #0c2a4b; /* Темно-синий фон (заглушка) */
    /* Если найдете картинку, раскомментируйте строку ниже: */
    /* background-image: url('path/to/banner.jpg'); */
    background-size: cover;
    background-position: center;
}

/* 2. Таймер */
.timer-bar {
    background-color: #0c2a4b; /* Цвет фона из вашего кода (wbst-summary-header) */
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
}

/* Иконка часов */
.timer-icon {
    color: #d4af37; /* Золотой цвет (wbst-gold) */
    width: 20px;
    height: 20px;
}

.timer-text span {
    opacity: 0.9;
    font-weight: 300;
}

/* 3. Контейнер шагов (Stepper) */
.stepper-container {
    padding: 24px 0;
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.stepper-wrapper {
    display: flex;
    align-items: flex-start; /* Выравнивание по верху */
    width: 100%;
    max-width: 600px; /* Ограничение ширины как в оригинале */
    padding: 0 20px;
}

/* Элемент шага (Кружок + Текст) */
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px; /* Фиксированная ширина для центровки текста */
    flex-shrink: 0;
}

/* Кружок */
.step-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #0c2a4b; /* Заполненный (активный) */
    margin-bottom: 8px;
    position: relative;
    z-index: 2; /* Чтобы быть поверх линии */
}

/* Пустой кружок (неактивный) */
.step-circle.empty {
    background-color: transparent;
    border: 1px solid #888; /* Серый бордюр */
}

/* Текст шага */
.step-label {
    font-size: 0.9rem;
    color: #000;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
}

/* Соединительная линия */
.step-line {
    flex-grow: 1; /* Занимает все доступное пространство между шагами */
    height: 1px;
    background-color: #d1d5db; /* Светло-серый цвет (neutral-300) */
    margin-top: 8px; /* Выравнивание по центру кружка (16px / 2 = 8px) */
    min-width: 20px;
}
/* --- Адаптивность для мобильных (меньше 768px) --- */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .info-bar .container {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* Общие стили для блоков информации */
    .info-item {
        align-items: flex-start; /* Текст и иконка по верхнему краю */
        width: 100%;
        display: flex; /* Убедимся, что это флекс-контейнер */
    }

    /* 1. Уменьшаем обычные иконки (билет и часы) */
    .info-item img {
        height: 24px; 
        margin-top: 2px; 
        margin-right: 12px;
    }

    /* 2. СПЕЦИАЛЬНАЯ МАГИЯ ДЛЯ РЕЙТИНГА */
    
    /* Скрываем оригинальную картинку с кружочками (ищем её по alt) */
    .info-item img[alt="Rating Icon"] {
        display: none; 
    }

    /* Добавляем звездочку перед текстом во ВТОРОМ блоке (где рейтинг) */
    .info-bar .info-item:nth-child(2)::before {
        content: '★';      /* Символ звезды */
        color: #00aa6c;    /* Зеленый цвет (как у TripAdvisor) */
        font-size: 24px;   /* Размер звезды */
        line-height: 1;    /* Чтобы не ломала высоту */
        margin-right: 12px; /* Отступ до текста */
        margin-top: 2px;    /* Выравнивание по высоте первой строки */
    }
    
    .info-item span {
        font-size: 0.9rem;
        line-height: 1.35; /* Чуть увеличили межстрочный интервал для читаемости */
        flex: 1;
    }
    
    .booking-intro p {
        font-size: 1.2rem;
    }
}