/* ==========================================================================
   FILE: main.css
   DESCRIPTION: Ice Peaks - Clean Rounded Style (Anti-Shard Version)
   ========================================================================== */

/* --- 1. GLOBAL & TYPOGRAPHY --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* 
   Font: Almoni DL 
   Foundry: AlefAlefAlef (https://alefalefalef.co.il)
   License: Webfont License for icepeaks.co.il / iisfevents.online
*/

@font-face {
    font-family: 'Almoni';
    src: url('../fonts/almoni-regular-aaa.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* Жирный шрифт */
@font-face {
    font-family: 'Almoni';
    src: url('../fonts/almoni-bold-aaa.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* Применяем ко всему сайту */
body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea {
    font-family: 'Almoni', sans-serif !important;
}

:root {
    --brand-yellow: #fcd35e;
    --brand-orange: #f18a25;
    --brand-blue-light: #7bbce8;
    --brand-blue-medium: #59a4d7;
    --brand-blue-dark: #3591cf;
    
    /* Присваиваем основные роли */
    --ice-bg: #eaf8ff;
    --ice-dark: #074492;
    --ice-primary: var(--brand-blue-dark); /* Основной синий */
    --ice-accent: var(--brand-yellow);     /* Акцентный желтый */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    position: relative;
    font-family: 'Roboto', sans-serif;
    background-color: var(--ice-bg);
    color: #333;
}

a { cursor: pointer; text-decoration: none; transition: all 0.3s ease; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6, a, button, .btn { font-family: 'Montserrat', sans-serif; font-weight: 700; }

.container { width: 100%; max-width: 1310px; margin: 0 auto; padding: 0 15px; }

/* === УНИФИЦИРОВАННЫЕ КНОПКИ (Мלבנים מעוגלים) === */
.btn, .main-provide-permission, .btn-shard {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 35px; 
    font-size: 16px; font-weight: 800;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    clip-path: none !important; /* УДАЛЕНО */
    border-radius: var(--btn-radius); /* КРУГЛЫЕ УГЛЫ */
    transition: all 0.3s ease;
}

/* Основная синяя кнопка */
.btn-primary, .main-provide-permission { 
    background: var(--ice-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(26, 84, 234, 0.2);
}

.btn-primary:hover, .main-provide-permission:hover { 
    background: var(--ice-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7, 68, 146, 0.3);
}

/* ==========================================================================
   2. HEADER (CLEAN & ENLARGED LOGO)
   ========================================================================== */
.main-header {
    display: flex; justify-content: space-between; align-items: center;
    height: 110px; padding: 0 40px;
    position: relative; z-index: 100;
    background: rgba(255, 255, 255, 0.95); /* Более плотный белый фон */
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #e1efff;
}

/* ЛОГОТИПЫ: Холон больше, Федерация меньше */
.main-header-left { display: flex; align-items: center; gap: 20px; }

.main-header-left-logo img { 
    width: 180px; /* Увеличили лого Холона (было 145) */
    height: auto; 
}

.iisf-logo img { 
    height: 45px; /* Уменьшили федерацию (было 65) */
    width: auto; 
    filter: grayscale(0.2); /* Слегка приглушили, чтоб не отвлекал */
}

.main-header-right { display: flex; align-items: center; gap: 20px; }
.main-header-right-orders { display: flex; align-items: center; gap: 12px; }

/* === КНОПКИ В ХЕДЕРЕ (БЕЗ ОСКОЛКОВ) === */
.main-header-right-orders a {
    padding: 0 20px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    text-transform: uppercase;
    clip-path: none !important;
    border-radius: 10px; /* Скругление */
    transition: all 0.3s ease;
}

/* Забронировать - Синяя */
.orders-book-now { 
    background-color: var(--brand-blue-dark) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

/* Кнопка VIP День Рождения (Оранжевая — чтобы выделялась!) */
.orders-book-now.orders-vip-birthday {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
}

.orders-book-now:hover, .orders-vip-birthday:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* === ЯЗЫКИ (Langs) - Квадратные со скруглением === */
.main-header-right-langs ul { display: flex; gap: 8px; }
.main-header-right-langs a {
    width: 40px; height: 40px; 
    border: 2px solid #e1efff; 
    border-radius: 8px; /* Скругленный квадрат */
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; 
    color: var(--ice-dark); 
    background: #fff;
    transition: all 0.3s;
}

.main-header-right-langs .langs--active a { 
    background: var(--ice-primary); 
    color: #fff; 
    border-color: var(--ice-primary);
}

.main-header-right-langs a:hover { 
    border-color: var(--ice-primary);
    color: var(--ice-primary);
}

/* === БУРГЕР (Синий и аккуратный) === */
.main-header-right-menus {
    display: flex; cursor: pointer; width: 45px; height: 45px;
    align-items: center; justify-content: center;
}
.main-header-right-menus span, 
.main-header-right-menus:before, 
.main-header-right-menus:after {
    content: ''; display: block; width: 30px; height: 3px;
    background: var(--ice-dark); /* Темно-синий */
    position: absolute; transition: all 0.3s ease;
    border-radius: 3px;
}
.main-header-right-menus:before { transform: translateY(-9px); }
.main-header-right-menus:after { transform: translateY(9px); }
/* ==========================================================================
   3. MOBILE MENU (REVISED)
   ========================================================================== */
.open-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease;
}

.open-menu--links {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 450px; height: 100vh;
    /* Синий градиент */
    background: linear-gradient(160deg, var(--ice-primary), var(--ice-dark));
    /* Скошенный край слева */
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    
    transform: translateX(100%); 
    transition: transform 0.4s ease-in-out;
    
    display: flex; flex-direction: column; 
    z-index: 1001;
    
    /* Отступы внутри меню */
    padding: 0 30px 0 50px; 
}

body.menu-open { overflow: hidden; }
body.menu-open .open-menu { opacity: 1; visibility: visible; }
body.menu-open .open-menu--links { transform: translateX(0); }

/* --- ВЕРХНЯЯ ПАНЕЛЬ (Языки + место под крестик) --- */
.mobile-menu-top-bar {
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Языки слева */
    height: 120px; /* Высота как у хедера, чтобы выровнять с крестиком */
    width: 100%;
    flex-shrink: 0;
}

/* Языки в мобильном меню */
.mobile-langs { display: flex; gap: 15px; }
.mobile-langs a {
    width: 45px; height: 45px; 
    border: 2px solid rgba(255,255,255,0.4); 
    border-radius: 50%; /* Сделаем круглыми для аккуратности или оставьте clip-path */
    /* Если хотите осколки - раскомментируйте строку ниже: */
    /* clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); */
    
    display: flex; align-items: center; justify-content: center; 
    color: #fff; font-weight: 700; font-size: 14px;
    transition: all 0.3s;
}
.mobile-langs a.active { 
    background: #fff; 
    color: var(--ice-primary); 
    border-color: #fff;
    font-weight: 800;
}

/* --- ИСПРАВЛЕНИЕ КРЕСТИКА (БУРГЕРА) --- */
/* Крестик находится в main-header, но когда меню открыто, он должен быть белым */
body.menu-open .main-header-right-menus span { background: transparent !important; }

body.menu-open .main-header-right-menus:before,
body.menu-open .main-header-right-menus:after {
    background-color: #ffffff !important; /* Ярко-белый цвет */
    height: 3px !important; /* Чуть тоньше для изящности */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Тень чтобы видно на любом фоне */
}

/* --- СКРОЛЛ НАВИГАЦИИ --- */
.open-menu--links--scroll { 
    flex: 1; 
    overflow-y: auto; 
    padding-bottom: 50px; 
    padding-top: 20px;
    /* Тонкая линия разделения языков и меню */
    border-top: 1px solid rgba(255,255,255,0.1);
}

.open-menu--links__navigation li a {
    display: block; padding: 15px 0; color: #fff; font-size: 22px; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.open-menu--links__navigation li a:hover { 
    padding-left: 10px; 
    color: #e0f2fe; 
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* --- НИЖНЯЯ ЧАСТЬ (IISF) --- */
.mobile-menu-extras { 
    margin-top: 30px; 
    padding-top: 20px; 
    border-top: 1px solid rgba(255,255,255,0.1); 
}
.mobile-iisf img { height: 60px; width: auto; opacity: 0.8; }

/* --- ВЕРХНЯЯ ПАНЕЛЬ --- */
.mobile-menu-top-bar {
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* Разносим языки и крестик по краям */
    height: 100px;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 20px;
}

/* --- ЯВНЫЙ КРЕСТИК ВНУТРИ МЕНЮ --- */
.mobile-close-btn {
    width: 45px; 
    height: 45px; 
    cursor: pointer; 
    position: relative;
    border: 2px solid rgba(255,255,255,0.3); /* Легкая рамка */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}

.mobile-close-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    transform: rotate(90deg); /* Эффект вращения */
}

.mobile-close-btn span {
    display: block;
    width: 24px; 
    height: 2px; 
    background: #fff; 
    position: absolute;
    border-radius: 2px;
}

.mobile-close-btn span:first-child { transform: rotate(45deg); }
.mobile-close-btn span:last-child { transform: rotate(-45deg); }


/* --- ИСПРАВЛЕНИЕ: Скрываем старый бургер при открытом меню --- */
/* Чтобы он не просвечивал или не мешал */
body.menu-open .main-header-right-menus { opacity: 0; pointer-events: none; }


/* --- Видео-баннер (Уменьшили высоту до 45vh, чтобы видео влезало) --- */
.full-screen-video-container {
    width: 100%; 
    height: 45vh; /* Было 60vh */
    min-height: 300px; 
    overflow: hidden;
    position: relative;
}
.full-screen-video-container video {
    width: 100%; height: 100%; object-fit: cover;
}

@media (max-width: 900px) {
    /* 1. Уменьшаем высоту контейнера еще немного, чтобы "раскрыть" бока видео */
    .full-screen-video-container {
        height: 25vh !important; /* Было 30vh, уменьшили до 25 */
        min-height: 180px;
        background: #000;
        overflow: hidden;
    }

    .full-screen-video-container video {
        width: 100%;
        height: 100%;
        /* object-fit: cover оставляет небольшую обрезку, но заполняет экран. 
           Если хочешь ВООБЩЕ без обрезки (но будут черные полоски сверху/снизу), 
           поменяй на 'contain' */
        object-fit: cover; 
        
        /* Гарантируем отсутствие искусственного масштабирования */
        transform: scale(1); 
        object-position: center center;
    }

    /* 2. Поправим логотипы, чтобы они не жались друг к другу */
    .main-header-left {
        gap: 10px;
    }
    .main-header-left-logo img {
        max-height: 40px; /* Еще чуть компактнее */
    }
    .iisf-logo img {
        max-height: 25px;
    }
}

    /* 3. Убираем лишние отступы, чтобы карточки были видны сразу */
    .main-provide {
        padding: 20px 0;
        margin-top: 0;
    }

    .main-provide-container {
        gap: 15px;
    }

    /* Карточки в одну колонку, но поменьше */
    .ice-shard-link {
        width: 100%;
        max-width: 320px;
        height: 280px;
    }

    .shard-label p {
        font-size: 22px; /* Уменьшаем шрифт на мобилках */
    }
    
    /* Кнопка "Разрешение" тоже чуть меньше */
    .main-provide-permission {
        width: 90%;
        padding: 12px 20px;
        font-size: 14px;
    }


/* --- СЕКЦИЯ УСЛУГ (3 сверху, 2 снизу) --- */
.main-provide { 
    padding: 60px 0; 
    background: #fff; 
}

.main-provide-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.provide-row { 
    display: flex; 
    justify-content: center; 
    gap: 25px; 
    flex-wrap: wrap; 
}

/* КАРТОЧКА (Компактная) */
.ice-shard-link {
    width: 300px;  /* Размер под сетку 3 в ряд */
    height: 300px; 
    display: block;
    position: relative;
    text-decoration: none;
}

.shard-shadow-wrapper {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.shard-shape {
    width: 100%;
    height: 100%;
    position: relative; 
    overflow: hidden;
    border-radius: 20px; /* Скругление как просила */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.shard-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ТЕКСТ ПОВЕРХ КАРТИНКИ (Центрирование) */
.shard-label {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(7, 68, 146, 0.35); /* Затемнение чтобы текст читался */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2;
}

.shard-label p {
    color: #fff !important; /* Текст теперь белый */
    font-size: 28px; 
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Тень для читаемости */
}

/* Ховер эффект */
.ice-shard-link:hover .shard-shadow-wrapper {
    transform: translateY(-10px);
}

.provide-row div:nth-child(1) .shard-label { background: rgba(53, 145, 207, 0.6); }

/* Дни рождения — Оранжевый */
.provide-row div:nth-child(2) .shard-label { background: rgba(241, 138, 37, 0.6); }

/* Группы — Средне-синий */
.provide-row div:nth-child(3) .shard-label { background: rgba(89, 164, 215, 0.6); }

/* Фигурное катание — Голубой */
.provide-row-bottom div:nth-child(1) .shard-label { background: rgba(123, 188, 232, 0.6); }

/* Магазин — Желтый (текст сделаем темным для читаемости) */
.provide-row-bottom div:nth-child(2) .shard-label { background: rgba(252, 211, 94, 0.7); }
.provide-row-bottom div:nth-child(2) .shard-label p { color: var(--ice-dark) !important; text-shadow: none; }

/* Обертка кнопки (Центрирование) */
.permission-btn-wrapper {
    display: flex;
    justify-content: center; /* Центрирует по горизонтали */
    width: 100%;             /* Занимает всю ширину */
    margin-top: 50px;        /* Отступ от карточек */
    clear: both;
}

/* Сама кнопка (проверяем стили) */
.main-provide-permission {
    display: inline-flex;    /* Чтобы внутренние отступы работали корректно */
    align-items: center;
    justify-content: center;
    background-color: var(--brand-yellow) !important;
    color: var(--ice-dark) !important;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 15px !important; /* Те самые скругленные углы */
    box-shadow: 0 4px 15px rgba(252, 211, 94, 0.3);
    transition: all 0.3s ease;
    clip-path: none !important; /* Убираем осколок окончательно */
}

.main-provide-permission:hover {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(241, 138, 37, 0.4);
}
/* === 3. MAP SECTION (Выпрямленная и современная) === */
.main-page-map {
    padding: 80px 0;
    background-color: var(--ice-bg);
}

.main-page-map h3 {
    font-size: 36px;
    text-align: center;
    color: var(--ice-dark);
    margin-bottom: 40px;
}

.main-map-block {
    display: flex; /* ВОТ ЭТО ВЕРНЕТ КАРТУ В РЯД */
    flex-wrap: wrap; /* Для мобилок */
    background: #fff;
    border-radius: 25px; /* Скругление как просила */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(7, 68, 146, 0.1);
}

.main-map-block--frame {
    flex: 1.5; /* Карта шире текста */
    min-height: 450px;
    line-height: 0; /* Убирает лишние зазоры */
}

.main-map-block--frame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.main-map-block--info {
    flex: 1;
    padding: 50px 40px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Фикс для иврита (RTL) — чтобы текст карты был справа */
[dir="rtl"] .main-map-block--info {
    text-align: right;
}

.main-map-block--info h4 {
    font-size: 32px;
    color: var(--ice-dark);
    margin-bottom: 20px;
}

.main-map-block--info p {
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
}

.main-map-block--info a {
    color: var(--ice-primary);
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
    display: block;
    margin-top: 10px;
}

/* === 4. GALLERY (Чистая без осколков) === */
.main-block-gallery {
    padding: 80px 0;
    background: #fff;
}

.main-block-gallery h3 {
    font-size: 36px;
    text-align: center;
    color: var(--ice-dark);
    margin-bottom: 40px;
}

.gallery-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Стили слайдов Swiper */
.swiper-slide {
    width: 320px !important; /* Фиксируем ширину */
    height: 240px !important;
    border-radius: 15px !important; /* Скругляем углы */
    overflow: hidden;
    clip-path: none !important; /* УБИРАЕМ ОСКОЛКИ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Кнопки навигации галереи */
.swiper-button-prev, .swiper-button-next {
    color: var(--ice-dark);
}

/* === MOBILE ADAPTIVE === */
@media (max-width: 900px) {
    .main-map-block {
        flex-direction: column; /* На мобилке карта над текстом */
    }
    .main-map-block--frame {
        height: 300px;
    }
    .main-map-block--info {
        text-align: center !important;
        padding: 30px 20px;
    }
}


/* ==========================================================================
   3. FOOTER (CLEAN & ROUNDED STYLE)
   ========================================================================== */
.main-footer {
    background-color: var(--brand-blue-dark); 
    padding: 60px 0 30px 0; 
    color: #fff;
    /* УБРАЛИ рваный верх и клип-пасы */
    clip-path: none !important;
    margin-top: 0; 
    position: relative; 
    z-index: 5;
    border-top: 4px solid var(--ice-primary); /* Акцентная линия вместо зигзага */
}

.footer-content {
    max-width: 1310px; 
    margin: 0 auto; 
    padding: 0 20px;
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 30px; 
    flex-wrap: wrap;
}

.footer-section {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    gap: 10px;              
}

.footer-section h3 { 
    font-size: 22px; 
    margin-bottom: 15px; 
    color: var(--ice-accent) !important; 
    text-transform: uppercase; 
}

.footer-section p, .footer-section a.text-link { 
    color: rgba(255,255,255,0.8) !important; 
    font-size: 16px; 
}

.footer-phone-btn {
    border: 2px solid var(--brand-yellow) !important;
    color: var(--brand-yellow) !important;
    border-radius: 12px !important;
}

.footer-phone-btn:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--ice-dark) !important;
}


/* КОНТЕЙНЕР СОЦСЕТЕЙ */
.social-icons {
    display: flex;          
    flex-direction: row;    
    gap: 12px;              
    margin-top: 10px;       
}

/* ИКОНКИ — теперь скругленные квадраты */
.social-icons a {
    width: 45px; 
    height: 45px; 
    background: rgba(255,255,255,0.1); 
    color: #fff !important;
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    /* УБРАЛИ осколок, добавили скругление */
    clip-path: none !important;
    border-radius: 10px; 
    
    transition: all 0.3s ease;
    font-size: 20px; 
}

/* ЦВЕТНЫЕ ХОВЕРЫ (как просила дизайнер) */
.social-icons a:hover { 
    transform: translateY(-5px); 
    color: #fff !important;
}

.social-icons a.fb:hover { background-color: #1877F2; }
.social-icons a.ins:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-icons a.tk:hover { background-color: #000000; border: 1px solid #ff0050; }
.social-icons a.map:hover { background-color: #EA4335; }

.footer-copyright { 
    text-align: center; 
    margin-top: 40px; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 20px; 
    font-size: 14px; 
    opacity: 0.5; 
}

/* === ИСПРАВЛЕНИЕ АДАПТИВА ДЛЯ ФУТЕРА === */
@media (max-width: 900px) {
    .footer-content { 
        flex-direction: column; 
        text-align: center; 
        align-items: center; 
        gap: 40px;
    }
    /* Выпрямляем карту и другие блоки в мобилке */
    .main-map-block--info, .full-screen-video-container {
        clip-path: none !important;
        border-radius: 0;
    }
}


/* ==========================================================================
   PAGE: PUBLIC SKATING (CLEAN & STRAIGHT)
   ========================================================================== */

.page-header-banner {
    position: relative;
    width: 100%;
    /* clamp(мин_высота, предпочтительная, макс_высота) */
    height: clamp(400px, 40vw, 550px); 
    overflow: hidden;
    background-color: #000;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.page-header-banner .banner-img {
    width: 100%;
    height: 100%;
    /* 'cover' всегда будет немного обрезать, если пропорции фото и экрана разные */
    object-fit: cover; 
    
    /* ВАЖНО: Настраиваем фокус. 
       'center 15%' заставляет браузер всегда показывать верхнюю часть фото (головы). 
       Если головы всё равно режет — поставь 'center top' или 'center 10%' */
    object-position: center 55%; 
    
    opacity: 0.8;
    transition: opacity 0.5s ease;
}

/* Затемнение поверх картинки */
.page-header-banner .banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Темная вуаль */
    z-index: 1;
}

/* ЗАГОЛОВОК ПОВЕРХ КАРТИНКИ */
.page-header-banner .banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 2;
    padding: 0 20px;
}

.page-header-banner .banner-title h1 {
    font-size: clamp(28px, 5vw, 56px); /* Шрифт тоже будет уменьшаться плавно */
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
}

/* Адаптив для мобилок */
@media (max-width: 900px) {
    .page-header-banner { height: 120px; }
    .page-header-banner .banner-title h1 { font-size: 32px; }
}

/* --- Мощный заголовок в две строки --- */
.intro-text {
    text-align: center;
    max-width: 900px; /* Ограничиваем ширину, чтобы текст сам прыгнул на 2 строки */
    margin: 0 auto 60px auto;
}

.intro-text h3 {
    color: var(--brand-blue-dark);
    font-size: 38px; /* Делаем крупнее */
    font-weight: 800;
    line-height: 1.3;
    text-transform: none;
}

/* --- СЕКЦИЯ ШАГОВ (ВЫПРЯМЛЕННАЯ) --- */

/* Общий стиль для всех карточек шагов */
.step-card {
    background: #fff;
    border-radius: 15px; /* Скругление вместо осколков */
    padding: 40px;
    position: relative;
    border: 3px solid var(--brand-blue-dark); /* Четкая синяя рамка */
    box-shadow: 0 10px 30px rgba(7, 68, 146, 0.1);
    margin-bottom: 30px;
}

/* ШАГ 1: Делаем ОЧЕНЬ высоким, чтобы влез весь календарь */
.step-card-wide {
    width: 100%;
}

.calendar-wrapper {
    width: 100%;
    height: 1000px; /* Увеличили высоту до 1000px, чтобы календарь раскрылся */
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e1efff;
}

.calendar-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ШАГИ 2 и 3 (В ряд) */
.steps-row {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

.steps-row .step-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f9fcff; /* Легкий голубоватый фон для шагов 2 и 3 */
}

/* Номера шагов (крупно и в углу) */
.step-number {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 80px;
    font-weight: 900;
    color: var(--brand-blue-dark);
    opacity: 0.1;
    line-height: 1;
}

/* --- КНОПКИ (БЕЗ СКОСОВ - ПРЯМОУГОЛЬНЫЕ) --- */
.btn-shard, .btn-shard-accent {
    clip-path: none !important; /* ПРИНУДИТЕЛЬНО УБИРАЕМ ТРЕУГОЛЬНИКИ */
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%; /* На мобилках на всю ширину */
    max-width: 320px;
}

/* Синяя кнопка (Шаг 2) */
.btn-shard {
    background-color: var(--brand-blue-dark) !important;
    color: #fff !important;
}

/* Желтая кнопка (Шаг 3) */
.btn-shard-accent {
    background: var(--brand-yellow) !important;
    color: var(--ice-dark) !important;
    box-shadow: 0 4px 15px rgba(252, 211, 94, 0.3);
}

.btn-shard:hover, .btn-shard-accent:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
}

/* Адаптив */
@media (max-width: 900px) {
    .steps-row { flex-direction: column; }
    .calendar-wrapper { height: 800px; }
}

/* --- Кнопки (Скругленные прямоугольники) --- */
.btn-shard {
    clip-path: none !important; /* УБИРАЕМ ОСКОЛОК */
    border-radius: 12px !important;
    background-color: var(--brand-blue-dark);
    color: #fff !important;
    padding: 15px 35px;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-shard-accent {
    background: var(--brand-yellow); /* Наш корпоративный желтый */
    color: var(--ice-dark) !important;
}

.btn-shard:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Адаптивность для мобилок */
@media (max-width: 900px) {
    .page-header-banner { height: 250px; }
    .page-header-banner .banner-title h1 { font-size: 32px; }
    .steps-row { flex-direction: column; }
    .step-card { padding: 30px 20px; }
}

/* ==========================================================================
   PAGE: BIRTHDAY (BRANDED VERSION)
   ========================================================================== */

/* Баннер полосой */
.birthday-banner {
    height: 400px;
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.btn-brand-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--brand-yellow) !important;
    color: var(--ice-dark) !important;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Интро и иконки */
.birthday-intro-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 0;
}

.birthday-text { flex: 1.5; }
.brand-title-main { font-size: 42px; color: var(--brand-blue-dark); margin-bottom: 10px; }
.brand-subtitle { font-size: 24px; color: var(--brand-orange); margin-bottom: 20px; }
.brand-description { font-size: 18px; color: #555; line-height: 1.6; }

.birthday-icons-set {
    flex: 1;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.icon-item {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 35px; color: #fff !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.bg-orange { background-color: var(--brand-orange) !important; }
.bg-blue   { background-color: var(--brand-blue-dark) !important; }
.bg-pink   { background-color: #D81B60 !important; }

/* Сетка цветных карточек */
.birthday-features { padding: 60px 0; background: #fff; }
.section-title-center { text-align: center; margin-bottom: 50px; }
.section-title-center h2 { font-size: 36px; color: var(--brand-blue-dark); }

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    padding: 50px 20px;
    border-radius: 25px;
    text-align: center;
    transition: transform 0.3s ease;
    border: none !important;
}

/* Цвета карточек */
.color-orange { background-color: var(--brand-orange) !important; }
.color-blue   { background-color: var(--brand-blue-dark) !important; }
.color-pink   { background-color: #D81B60 !important; }

.feature-card i { font-size: 50px; color: #fff !important; margin-bottom: 25px; display: block; }
.feature-card p { font-size: 22px; color: #fff !important; font-weight: 800; line-height: 1.2; }

.feature-card:hover { transform: translateY(-10px); filter: brightness(1.1); }

/* Доп услуги */
.addons-box-new {
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, #D81B60 100%);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    margin: 40px 0;
}
.addons-box-new h3 { color: var(--brand-yellow); font-size: 28px; margin-bottom: 10px; }

/* Табы */
.tabs-nav-new { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
.tab-btn-new {
    padding: 15px 40px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s;
}
.tab-btn-new.active {
    background: var(--brand-blue-dark);
    color: #fff;
    border-color: var(--brand-blue-dark);
}

.tab-content-new {
    border: 3px solid var(--tab-theme);
    background-color: var(--tab-bg);
    border-radius: 25px;
    padding: 40px;
    display: none;
}
.tab-content-new.active { display: block; }

.reasons-list-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    list-style: none;
    padding: 0;
}
.reasons-list-new li {
    position: relative;
    padding-left: 35px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}
.reasons-list-new li::before {
    content: '★';
    position: absolute; left: 0;
    color: var(--tab-theme);
    font-size: 20px;
}

/* Финальный блок с кнопкой на странице ДР */
.birthday-footer-cta-final {
    padding: 60px 0 80px 0;
    background-color: #f9fcff; /* Очень легкий фон, чтобы отделить от контента */
    text-align: center;
    border-top: 1px solid #e1efff;
}

.cta-content-box h3 {
    font-size: 26px;
    color: var(--ice-dark);
    margin-bottom: 30px;
    font-weight: 700;
}

/* Используем уже готовую логику для желтой кнопки */
.birthday-footer-cta-final .btn-shard-accent {
    max-width: 400px; /* Сделаем её пошире для веса */
    padding: 20px 50px;
    font-size: 20px;
    box-shadow: 0 10px 20px rgba(252, 211, 94, 0.2);
}

.birthday-footer-cta-final .btn-shard-accent i {
    margin-right: 10px;
}

/* RTL фикс для иконки в кнопке */
[dir="rtl"] .birthday-footer-cta-final .btn-shard-accent i {
    margin-right: 0;
    margin-left: 10px;
}

/* RTL Фиксы */
[dir="rtl"] .reasons-list-new li { padding-left: 0; padding-right: 35px; text-align: right; }
[dir="rtl"] .reasons-list-new li::before { left: auto; right: 0; }
[dir="rtl"] .birthday-text { text-align: right; }

/* Мобилки */
@media (max-width: 900px) {
    .birthday-intro-grid { flex-direction: column; text-align: center; }
    .features-grid { grid-template-columns: 1fr; }
    .reasons-list-new { grid-template-columns: 1fr; }
    .tabs-nav-new { flex-direction: column; }
}

/* ==========================================================================
   PAGE: GROUPS & EVENTS (BRANDED & STRAIGHT)
   ========================================================================== */

.groups-banner {
    height: 400px;
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.groups-info-section { padding: 60px 0; background: #fff; }

.participant-badge {
    width: 140px; height: 140px;
    background: #fff;
    border: 5px solid var(--brand-blue-dark); /* Синяя рамка */
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 10px 25px rgba(53, 145, 207, 0.2);
    transform: rotate(-5deg); /* Оставим легкий наклон для стиля */
}

.badge-number { font-size: 52px; color: var(--brand-blue-dark); font-weight: 900; line-height: 1; }
.badge-label { font-size: 14px; font-weight: 800; color: #333; text-transform: uppercase; }

.groups-main-title {
    font-size: 42px; color: var(--brand-blue-dark); font-weight: 800;
}

.groups-accent-text {
    color: var(--brand-orange); /* Оранжевый акцент */
    font-size: 26px; margin: 40px 0;
}

/* Синяя плашка уведомления */
.info-alert-box {
    background: #f0f8ff;
    border: none;
    border-left: 6px solid var(--brand-blue-dark);
    border-radius: 12px;
    padding: 30px;
    margin-top: 40px;
}

[dir="rtl"] .info-alert-box {
    border-left: none;
    border-right: 6px solid var(--brand-blue-dark);
}

/* --- КОНТРАСТНЫЙ БЛОК КОНТАКТОВ В ГРУППАХ --- */
.groups-contacts-section {
    padding: 60px 0 100px 0;
    background-color: #f0f8ff; /* Светло-голубой фон для контраста с белым телом сайта */
    border-top: 2px solid #e1efff;
    text-align: center;
}

.contacts-intro {
    font-size: 20px;
    font-weight: 700;
    color: var(--ice-dark);
    margin-bottom: 50px;
}

.contacts-row {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--ice-dark);
    transition: transform 0.3s ease;
}

.contact-item:hover { transform: translateY(-5px); }

/* Крупные иконки */
.contact-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff !important;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.bg-blue-brand { background-color: var(--brand-blue-dark) !important; }
.bg-orange-brand { background-color: var(--brand-orange) !important; }

.contact-label { font-size: 14px; text-transform: uppercase; font-weight: 800; opacity: 0.7; margin-bottom: 5px; }
.contact-number { font-size: 24px; font-weight: 900; }

/* КНОПКА РАЗРЕШЕНИЯ (ЖЕЛТАЯ) */
.contacts-btn-wrapper {
    margin-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 50px;
}

.btn-brand-yellow-large {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: var(--brand-yellow) !important;
    color: var(--ice-dark) !important;
    padding: 20px 60px;
    border-radius: 15px;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(252, 211, 94, 0.4);
    transition: all 0.3s ease;
    clip-path: none !important;
}

.btn-brand-yellow-large:hover {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
    transform: scale(1.05);
}

/* Адаптив */
@media (max-width: 768px) {
    .contacts-row { gap: 30px; }
    .contact-icon { width: 70px; height: 70px; font-size: 30px; }
    .btn-brand-yellow-large { padding: 15px 30px; font-size: 18px; width: 100%; max-width: 320px; }
}

/* Галерея без осколков */
.groups-banner-section .swiper-slide {
    clip-path: none !important;
    border-radius: 15px;
}

/* ==========================================================================
   PAGE: SPORT / SKATING SCHOOL (STRAIGHT & BRANDED)
   ========================================================================== */

.sport-banner {
    clip-path: none !important; /* Убрали скос */
    border-bottom: 4px solid var(--brand-blue-dark);
}

.sport-categories-section {
    padding: 80px 0;
    background-color: #f9fcff;
}

.sport-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* КАРТОЧКА (БЕЗ ОСКОЛКОВ) */
.sport-card {
    background-color: #fff;
    background-image: none !important; /* Убрали фон-картинку, если она мешает */
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.sport-card-img {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: #fff;
}

.sport-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.sport-card-body {
    padding: 25px;
    text-align: center;
    background: var(--brand-blue-dark); /* Дефолтный цвет плашки */
    transition: background 0.3s ease;
}

.sport-card-body h3 {
    margin: 0;
    font-size: 22px;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
}

/* === ЭФФЕКТЫ ПРИ НАВЕДЕНИИ (ИНДИВИДУАЛЬНЫЕ ЦВЕТА) === */

.sport-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 1. Фигурное катание -> РОЗОВЫЙ */
.fs-card:hover .sport-card-body {
    background-color: #D81B60 !important;
}

/* 2. Частные уроки -> ЖЕЛТЫЙ (fcd35e) */
.pl-card:hover .sport-card-body {
    background-color: #fcd35e !important;
}
.pl-card:hover .sport-card-body h3 {
    color: var(--ice-dark) !important; /* Темный текст на желтом фоне */
}

/* 3. Хоккей -> СИНИЙ (3591cf) */
.hockey-card-item:hover .sport-card-body {
    background-color: #3591cf !important;
}

.sport-card:hover .sport-card-img img {
    transform: scale(1.1);
}

/* Финальный блок CTA */
.sport-footer-cta-final {
    padding: 80px 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
}

.sport-footer-cta-final h3 {
    font-size: 26px;
    color: var(--brand-blue-dark);
    margin-bottom: 30px;
}

/* Адаптив */
@media (max-width: 900px) {
    .sport-grid { grid-template-columns: 1fr; padding: 0 20px; }
    .sport-banner { height: 180px; }
}
/* ==========================================================================
   PAGE: SKATING CLUBS (STRAIGHT & BRANDED)
   ========================================================================== */

.clubs-banner {
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

/* ==========================================================================
   PAGE: SKATING CLUBS (FIXED & COMPACT)
   ========================================================================== */

/* Секция со списком */
.clubs-list-section {
    padding: 60px 0;
    background-color: #f9fcff;
}

/* Сетка: СТРОГО 2 колонки */
.clubs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* КАРТОЧКА */
.club-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 2px solid #e1efff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем всё содержимое */
    text-align: center;
    transition: all 0.3s ease;
}

.club-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue-dark);
}

/* ЛОГОТИП (Жесткое ограничение, чтобы не нализало) */
.club-logo {
    width: 100%;
    height: 120px; /* Фиксированная высота для лого */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.club-logo img {
    max-height: 100px; /* Картинка не может быть выше 100px */
    max-width: 200px;  /* И не шире 200px */
    width: auto;
    height: auto;
    object-fit: contain; /* Сохраняет пропорции */
}

/* ТЕКСТ */
.club-name {
    font-size: 24px;
    color: var(--brand-blue-dark);
    font-weight: 800;
    margin-bottom: 20px;
}

.club-details {
    width: 100%;
}

.detail-row {
    margin-bottom: 15px;
}

.detail-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-blue-medium);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.detail-value {
    font-size: 18px;
    color: #333;
    font-weight: 500;
}

.phone-link {
    display: block;
    color: var(--brand-orange);
    text-decoration: none;
    font-weight: 700;
    margin-top: 5px;
}

/* Кнопка внизу страницы */
.clubs-footer-cta-final {
    padding: 60px 0 100px 0;
    text-align: center;
    background: #fff;
}

/* АДАПТИВ */
@media (max-width: 850px) {
    .clubs-grid {
        grid-template-columns: 1fr; /* На мобилке в один ряд */
        padding: 0 20px;
    }
}

/* ==========================================================================
   PAGE: PRIVATE LESSONS (ULTRA COMPACT & BRANDED)
   ========================================================================== */

/* Общие отступы секций */
.staff-section { 
    padding: 60px 0; 
}

/* Фон для секции тренеров */
.coaches-bg-new { 
    background-color: #f0f8ff; 
    border-top: 1px solid #e1efff; 
    border-bottom: 1px solid #e1efff;
}

/* Фон для секции инструкторов */
.instructors-bg-new { 
    background-color: #ffffff; 
}

/* --- ЗАГОЛОВКИ СЕКЦИЙ (ТРЕНЕРЫ / ИНСТРУКТОРЫ) --- */
.section-header-branded {
    text-align: center;
    margin-bottom: 50px;
    width: 100%;
}

.section-header-branded h3 {
    font-family: 'Almoni', sans-serif !important;
    font-size: 34px;
    color: var(--brand-blue-dark);
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем иконку и текст */
    gap: 12px;
}

.section-header-branded h3 i {
    color: var(--brand-blue-light);
    font-size: 28px;
}

.section-header-branded p {
    font-family: 'Almoni', sans-serif !important;
    font-size: 18px;
    color: #666;
    font-weight: 500;
}

/* --- СЕТКА: 4 КАРТОЧКИ В РЯД --- */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Ровно 4 колонки */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- КОМПАКТНАЯ КАРТОЧКА-ВИЗИТКА --- */
.staff-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px 15px;
    text-align: center;
    border: 2px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    clip-path: none !important; /* Убираем осколки */
}

.staff-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue-dark);
    box-shadow: 0 10px 25px rgba(53, 145, 207, 0.1);
}

/* Круг с иконкой внутри карточки */
.staff-icon-circle {
    width: 55px; 
    height: 55px;
    border-radius: 50%;
    background: #f4f8fb;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 22px; 
    color: var(--brand-blue-dark);
    margin-bottom: 15px;
}

/* Имя (Шрифт Almoni) */
.staff-name {
    font-family: 'Almoni', sans-serif !important;
    font-size: 19px;
    font-weight: 800;
    color: var(--ice-dark);
    margin-bottom: 15px;
    line-height: 1.2;
    min-height: 46px; /* Чтобы кнопки всегда были на одной линии */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Кнопка телефона (Овальная) */
.staff-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    border: 2px solid var(--brand-blue-light);
    color: var(--brand-blue-dark) !important;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.staff-phone-btn:hover {
    background-color: var(--brand-blue-dark);
    color: #fff !important;
    border-color: var(--brand-blue-dark);
}

/* Индивидуальные стили для Инструкторов (чуть другой оттенок иконки) */
.instructor-style .staff-icon-circle {
    color: var(--brand-orange);
    background: #fffcf5;
}

/* --- НИЖНИЙ CTA --- */
.lessons-footer-cta-final {
    padding: 80px 0;
    text-align: center;
    background-color: #f9fcff;
    border-top: 1px solid #e1efff;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1100px) {
    .staff-grid { grid-template-columns: repeat(3, 1fr); } /* 3 в ряд на планшетах */
}

@media (max-width: 768px) {
    .staff-grid { 
        grid-template-columns: repeat(2, 1fr); /* 2 в ряд на мобилках */
        gap: 12px;
        padding: 0 10px;
    }
    .staff-card { padding: 20px 10px; }
    .staff-name { font-size: 16px; min-height: 40px; }
    .staff-phone-btn { padding: 6px 12px; font-size: 12px; }
    .section-header-branded h3 { font-size: 26px; }
}
/* ==========================================================================
   PAGE: HOCKEY (CLEAN & PROFESSIONAL)
   ========================================================================== */

.hockey-banner {
    /* Наследует clamp высоту из общих настроек баннера */
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.hockey-intro-section { padding: 60px 0; background: #fff; }

/* Сетка клубов */
.hockey-clubs-section {
    padding: 60px 0;
    background-color: #f9fcff; /* Легкий контрастный фон */
}

.hockey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* КАРТОЧКА КЛУБА */
.hockey-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    border: 2px solid #e1efff; /* Тонкая синяя рамка */
    box-shadow: 0 10px 20px rgba(53, 145, 207, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    clip-path: none !important; /* Убираем осколок */
}

.hockey-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-blue-dark);
    box-shadow: 0 15px 30px rgba(53, 145, 207, 0.15);
}

.hockey-logo {
    height: 140px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 25px;
}

.hockey-logo img {
    max-height: 100%; max-width: 100%; object-fit: contain;
}

.no-logo-placeholder {
    width: 100px; height: 100px;
    background: #f0f8ff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: var(--brand-blue-light);
}

.hockey-club-name {
    font-size: 26px;
    color: var(--brand-blue-dark);
    font-weight: 800;
    margin-bottom: 25px;
}

/* Кнопка сайта (Синяя) */
.club-website-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--brand-blue-dark);
    color: #fff !important;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.club-website-btn:hover { background-color: var(--ice-dark); }

/* Соцсети в кружках */
.hockey-socials { display: flex; justify-content: center; gap: 15px; }

.social-icon-circle {
    width: 45px; height: 45px;
    border-radius: 50%;
    background: #f0f4f8;
    color: var(--ice-dark) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: all 0.3s;
}

.social-icon-circle:hover { transform: scale(1.1); color: #fff !important; }
.social-icon-circle.fb:hover { background-color: #1877F2; }
.social-icon-circle.ins:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* Нижний блок CTA */
.hockey-footer-cta-final {
    padding: 80px 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
}

.hockey-footer-cta-final h3 {
    font-size: 26px;
    color: var(--brand-blue-dark);
    margin-bottom: 30px;
}

/* Мобилки */
@media (max-width: 768px) {
    .hockey-grid { grid-template-columns: 1fr; }
    .hockey-card { padding: 30px 20px; }
}

/* ==========================================================================
   PAGE: PRICE LIST (CLEAN & STRAIGHT)
   ========================================================================== */

.price-banner {
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.banner-btn-wrapper { margin-top: 20px; }

/* Секция цен */
.price-list-section {
    padding: 60px 0;
    background-color: #f9fcff;
}

.narrow-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* КАРТОЧКА КАТЕГОРИИ */
.price-category-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 50px;
    overflow: hidden;
    border: 2px solid #e1efff;
    clip-path: none !important;
}

.category-header {
    background: var(--brand-blue-dark); /* Корпоративный синий */
    padding: 25px;
    text-align: center;
}

.category-header h2 {
    color: #fff;
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'Almoni', sans-serif !important;
}

/* ТАБЛИЦА */
.price-table-wrapper { padding: 10px 0; }

.modern-price-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-price-table th {
    text-align: left;
    padding: 20px 30px;
    color: #888;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 2px solid #f4f8fb;
}

/* RTL поддержка для иврита */
[dir="rtl"] .modern-price-table th { text-align: right; }
[dir="rtl"] .modern-price-table th.col-price { text-align: left; }
[dir="rtl"] .td-price { text-align: left; }

.modern-price-table tr {
    transition: background 0.3s;
    border-bottom: 1px solid #f4f8fb;
}
.modern-price-table tr:last-child { border-bottom: none; }
.modern-price-table tr:hover { background-color: #fafdff; }

.modern-price-table td {
    padding: 25px 30px;
    vertical-align: middle;
}

.service-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ice-dark);
    font-family: 'Almoni', sans-serif !important;
}

.service-desc {
    font-size: 15px;
    color: #666;
    margin-top: 5px;
}

.price-tag {
    font-size: 26px;
    font-weight: 900;
    color: var(--brand-blue-dark);
    white-space: nowrap;
}

/* Кнопка в баннере */
.btn-brand-yellow {
    display: inline-flex;
    background-color: var(--brand-yellow) !important;
    color: var(--ice-dark) !important;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Финальный CTA */
.price-footer-cta-final {
    padding: 80px 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
}

.price-footer-cta-final h3 {
    font-size: 26px;
    color: var(--brand-blue-dark);
    margin-bottom: 30px;
}

/* Адаптив */
@media (max-width: 900px) {
    .modern-price-table th { display: none; }
    .modern-price-table td { padding: 20px; }
    .price-tag { font-size: 22px; }
    .service-title { font-size: 18px; }
    .category-header h2 { font-size: 20px; }
}


/* ==========================================================================
   PAGE: PRO SHOP (STRAIGHT & ICONIC)
   ========================================================================== */

.shop-banner {
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.shop-section { padding: 50px 0 80px 0; background-color: #f9fcff; }

/* Описание магазина */
.shop-intro-box {
    text-align: center; max-width: 800px; margin: 0 auto 50px auto;
    background: #fff; padding: 35px; border-radius: 20px;
    border: 2px solid #e1efff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.shop-intro-box h3 { color: var(--brand-blue-dark); font-size: 28px; margin-bottom: 10px; font-weight: 800; }

/* ТАБЫ С ИКОНКАМИ */
.shop-tabs {
    display: flex; justify-content: center; gap: 15px; margin-bottom: 60px; flex-wrap: wrap;
}

.shop-tab-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 25px;
    background: #fff;
    border: 2px solid #e1efff;
    border-radius: 12px; /* Скругленный прямоугольник */
    color: var(--ice-dark);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

.shop-tab-btn i { font-size: 18px; color: var(--brand-blue-medium); }

.shop-tab-btn:hover {
    border-color: var(--brand-blue-dark);
    transform: translateY(-3px);
}

.shop-tab-btn.active {
    background-color: var(--brand-blue-dark);
    color: #fff !important;
    border-color: var(--brand-blue-dark);
    box-shadow: 0 5px 15px rgba(53, 145, 207, 0.3);
}
.shop-tab-btn.active i { color: #fff; }

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center; /* Центрирует карточки, если их мало в ряду */
}

/* КАРТОЧКА ТОВАРА */
.product-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-blue-light);
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
}

.product-img-wrapper {
    height: 250px; padding: 25px;
    background: #fff; display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #f4f8fb;
}
.product-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-info { padding: 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-title { font-size: 18px; font-weight: 700; color: var(--ice-dark); margin-bottom: 15px; }

.price-val { font-size: 22px; font-weight: 900; color: var(--brand-blue-dark); }

/* Кнопка "Уточнить цену" */
.call-for-price-btn {
    display: block; padding: 8px; font-size: 13px; font-weight: 800;
    color: var(--brand-orange); border: 2px solid var(--brand-orange);
    border-radius: 8px; text-transform: uppercase;
}

/* Нижний блок */
.shop-footer-cta-final { padding: 80px 0; text-align: center; background: #fff; border-top: 1px solid #eee; }

@media (max-width: 900px) {
    .shop-tabs { gap: 10px; }
    .shop-tab-btn { padding: 10px 15px; font-size: 14px; }
}

/* ==========================================================================
   PAGE: PROMOTIONS & BENEFITS (STRAIGHT & CLEAN)
   ========================================================================== */

.promotions-banner {
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.promotions-intro { padding: 60px 0 40px 0; background: #fff; }

.partners-section {
    padding: 0 0 80px 0;
    background-color: #fff;
}

/* Сетка: Логотипы будут аккуратно заполнять ряды */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* КАРТОЧКА ПАРТНЕРА (Выпрямленная) */
.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 15px; /* Скругление */
    height: 140px; 
    padding: 25px;
    border: 2px solid #f4f8fb;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    clip-path: none !important;
}

.partner-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue-light);
    box-shadow: 0 10px 25px rgba(53, 145, 207, 0.1);
}

.partner-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(0); /* Оставляем цветными, как просила дизайнер */
    transition: transform 0.3s;
}

.partner-card:hover img {
    transform: scale(1.05);
}

/* Нижний блок CTA */
.promotions-footer-cta-final {
    padding: 80px 0;
    text-align: center;
    background-color: #f9fcff;
    border-top: 1px solid #e1efff;
}

.promotions-footer-cta-final h3 {
    font-size: 26px;
    color: var(--brand-blue-dark);
    margin-bottom: 30px;
}

/* Адаптив для мобилок */
@media (max-width: 900px) {
    .partners-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
        padding: 0 15px;
    }
    .partner-card { height: 110px; padding: 15px; }
}

/* ==========================================================================
   PAGE: PERMISSION FORM (CLEAN & PROFESSIONAL)
   ========================================================================== */

.permission-banner {
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.permission-section { padding: 60px 0 100px 0; background-color: #f9fcff; }

/* Сообщение об успехе */
.flash-message-new {
    background: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    display: flex; gap: 20px; align-items: center;
}
.flash-icon { font-size: 40px; }
.flash-content h3 { color: #2e7d32; margin-bottom: 5px; font-weight: 800; }
.btn-brand-blue-small {
    display: inline-block; background: var(--brand-blue-dark); color: #fff !important;
    padding: 10px 25px; border-radius: 8px; text-decoration: none; margin-top: 10px;
}

/* Юридический бокс */
.legal-box-new {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #e1efff;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.legal-header-new {
    background: var(--brand-blue-dark);
    color: #fff;
    padding: 20px 30px;
}
.legal-header-new h3 { margin: 0; font-size: 20px; font-weight: 700; }

.legal-content-new {
    padding: 30px;
    max-height: 250px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* ФОРМА */
.ice-form-new {
    background: #fff;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(53, 145, 207, 0.1);
}

.form-row-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.form-group-new label {
    display: block;
    font-weight: 800;
    color: var(--ice-dark);
    margin-bottom: 8px;
    font-size: 15px;
}

.form-input-new {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #f0f4f8;
    border-radius: 12px;
    background: #fcfdfe;
    font-size: 16px;
    transition: all 0.3s;
}

.form-input-new:focus {
    border-color: var(--brand-blue-dark);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(53, 145, 207, 0.1);
}

/* Кнопка добавления ребенка */
.add-child-btn-new {
    width: 100%;
    padding: 15px;
    background: #f0f8ff;
    color: var(--brand-blue-dark);
    border: 2px dashed var(--brand-blue-light);
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 30px;
    transition: all 0.3s;
}
.add-child-btn-new:hover { background: #e1efff; border-style: solid; }

.child-input-group-new { margin-top: 15px; animation: fadeIn 0.4s ease; }

/* Чекбоксы */
.checkbox-group-new { margin-bottom: 20px; }
.checkbox-container-new {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    cursor: pointer;
}
.checkbox-container-new input {
    width: 22px; height: 22px;
    accent-color: var(--brand-blue-dark);
    cursor: pointer;
}
.checkbox-text { font-size: 15px; color: #555; line-height: 1.4; }
.bold-text { font-weight: 800; color: var(--ice-dark); }

/* Кнопка отправки */
.form-submit-wrapper-new {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

@media (max-width: 768px) {
    .form-row-new { grid-template-columns: 1fr; gap: 15px; }
    .ice-form-new { padding: 30px 20px; }
}

/* ==========================================================================
   PAGE: SCHEDULE (STRAIGHT & BRANDED)
   ========================================================================== */

.schedule-banner {
    clip-path: none !important;
    border-bottom: 4px solid var(--brand-blue-dark);
}

.schedule-section { padding: 60px 0; background-color: #f9fcff; }

.schedule-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* КАЛЕНДАРЬ */
.calendar-card {
    flex: 1.5;
    background: #fff;
    border-radius: 25px;
    padding: 35px;
    border: 2px solid #e1efff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.calendar-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;
}

.brand-title-calendar { font-size: 28px; color: var(--brand-blue-dark); font-weight: 800; text-transform: capitalize; }

.cal-nav-btn {
    width: 45px; height: 45px; border-radius: 50%; border: none;
    background: #f0f8ff; color: var(--brand-blue-dark); cursor: pointer;
    transition: 0.3s; display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover { background: var(--brand-blue-dark); color: #fff; }

.calendar-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; font-weight: 800; color: #aaa; margin-bottom: 15px; font-size: 14px;
}

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }

/* ДЕНЬ (ВЫПРЯМЛЕННЫЙ) */
.day {
    aspect-ratio: 1/1; background: #fff; border: 1px solid #f4f8fb;
    border-radius: 12px; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; padding-top: 10px; transition: 0.2s; position: relative;
}

.day:not(.padding):hover { background: #f0f8ff; border-color: var(--brand-blue-light); transform: translateY(-2px); }

.day.active { background: var(--brand-blue-dark) !important; color: #fff !important; border-color: var(--brand-blue-dark); }

.day.current-day { border: 2px solid var(--brand-yellow); }

.day-number { font-weight: 800; font-size: 18px; }

/* Точки */
.event-dots { display: flex; gap: 4px; margin-top: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.day.active .dot { background-color: #fff !important; }

/* ПАНЕЛЬ СОБЫТИЙ */
.events-panel {
    flex: 1; background: #fff; border-radius: 25px; padding: 35px;
    border: 2px solid #e1efff; display: flex; flex-direction: column; min-height: 550px;
}

.events-header { margin-bottom: 25px; border-bottom: 2px solid #f4f8fb; padding-bottom: 15px; }
.selected-date-text { font-size: 24px; color: var(--brand-blue-dark); font-weight: 800; }

.event-card {
    background: #fcfdfe; border-radius: 15px; padding: 15px 20px;
    margin-bottom: 15px; display: flex; align-items: center; gap: 20px;
    border: 1px solid #f0f4f8; transition: 0.3s;
}
.event-card:hover { transform: translateX(10px); background: #f0f8ff; }

.event-time-badge { font-weight: 900; color: var(--brand-blue-dark); font-size: 18px; min-width: 65px; }
.event-info h4 { margin: 0; font-size: 17px; color: var(--ice-dark); font-weight: 800; }

/* Легенда */
.calendar-legend { display: flex; gap: 20px; margin-top: 30px; justify-content: center; font-size: 14px; font-weight: 700; color: #777; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.dot.bg-blue { background: var(--brand-blue-dark); }
.dot.bg-orange { background: var(--brand-orange); }

@media (max-width: 900px) {
    .schedule-layout { flex-direction: column; }
    .calendar-card, .events-panel { width: 100%; padding: 20px; }
    .day { aspect-ratio: auto; height: 60px; }
}

/* ==========================================================================
   RTL FIXES (ИСПРАВЛЕНИЯ ДЛЯ ИВРИТА)
   ========================================================================== */

/* --- 1. Исправление КАРТЫ на главной --- */
[dir="rtl"] .main-map-block--info {
    /* Убираем отступ слева, который был для английского */
    margin-left: 0;
    
    /* Делаем наложение справа */
    margin-right: -20px;
    
    /* Зеркалим форму осколка, чтобы она стыковалась с картой */
    clip-path: polygon(0 5%, 95% 0, 100% 100%, 5% 95%);
}

/* Если на мобильном карта и текст тоже наезжают, поправим это: */
@media (max-width: 900px) {
    [dir="rtl"] .main-map-block--info {
        margin-right: 0;
        margin-top: -30px; /* На мобильном они друг под другом */
        clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
    }
}


/* --- 2. Исправление СПИСКОВ (Звездочки) на Дне Рождения --- */
[dir="rtl"] .reasons-list li {
    /* Меняем отступ текста: не слева, а справа */
    padding-left: 0;
    padding-right: 30px;
}

[dir="rtl"] .reasons-list li::before {
    /* Перемещаем звездочку с левого края на правый */
    left: auto;
    right: 0;
}


/* --- 3. Исправление ТАБЛИЦЫ ЦЕН (Price List) --- */
/* Чтобы цены и названия не прилипали не к тем краям */
[dir="rtl"] .modern-price-table th { 
    text-align: right; 
}
[dir="rtl"] .modern-price-table th.col-price { 
    text-align: left; 
}
[dir="rtl"] .td-price { 
    text-align: left; 
}


/* --- 4. Исправление КАРТОЧЕК В МАГАЗИНЕ --- */
/* Бейдж "Нет в наличии" переносим налево (или направо, как удобнее) */
[dir="rtl"] .out-of-stock-badge {
    left: auto;
    right: 15px;
}

