/* ОБЩИЕ СТИЛИ */
:root {
    /* Новый градиент: Белый сверху -> Нежный розовый снизу */
    --bg-gradient-start: #ffffff;
    --bg-gradient-end: #fce4ec; 
    --btn-bg: #ffffff;
    --text-dark: #333;
    --text-pink: #d81b60;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    background-attachment: fixed; /* Чтобы фон не двигался при скролле */
    min-height: 100vh;
    color: #333;
}

a {
    text-decoration: none;
    color: inherit;
}

/* СЕКЦИЯ HERO */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    min-height: 20vh; /* Чтобы растянуть */
}

.logo-container {
    margin-bottom: 20px;
}

.logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    background: white; /* Заглушка если лого прозрачное */
    
    /* --- ДОБАВЬ ВОТ ЭТУ СТРОЧКУ --- */
    border: 1px solid #000; /* Толщина 3px, сплошная линия, темно-серый цвет (почти черный) */
}

.location-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 90%;
    max-width: 400px;
}

.btn-location {
    background: var(--btn-bg);
    padding: 15px;
    border-radius: 50px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.btn-location:hover {
    transform: scale(1.02);
}

.contact-icons {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
    color: white;
}

.icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border: 2px solid #ff80ab;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ff80ab;
    margin-bottom: 5px;
}

.price-link-container {
    margin-top: 30px;
}

.btn-price {
    background: var(--btn-bg);
    padding: 10px 40px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* СЕКЦИЯ ГАЛЕРЕЯ */
.gallery-section {
    background: white;
    padding: 40px 20px;
    text-align: center;
    /* Округление сверху как на фото 2 (эффект волны или выреза можно добавить SVG, но пока просто фон) */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px; 
    margin-top: -20px; /* Небольшой нахлест */
}

.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.slider-wrapper {
    width: 600px;
    height: 700px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.slide.active {
    display: block;
}

.slider-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
}
.dot.active {
    background: #333;
}

/* СЕКЦИЯ ЦЕНЫ */
.pricing-section {
    background: white;
    padding: 20px;
    text-align: center;
}

.pricing-section h2, .gallery-section h2 {
    font-weight: 600;
    margin-bottom: 20px;
}

.tabs-header {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    border-bottom: 2px solid #eee;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
    color: #888;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    color: #333;
    background: #ffebee;
    border-bottom: 3px solid #ff80ab;
    font-weight: 600;
}

.tab-content {
    display: none;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.tab-content.active {
    display: block;
}

.price-header-label {
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #444;
}

/* СЕКЦИЯ ФУТЕР */
.footer-section {
    /* Продолжаем темный градиент или просто темный фон, если блок отдельный */
    background: transparent; 
    padding: 40px 20px;
    color: #333; /* На темном фоне лучше белый, но на фото текст черный. */
    text-align: center;
}

/* На последнем скриншоте фон снова темнеет, сделаем текст белым для читаемости снизу */
.footer-section {
    color: #2c1a24;
}

.instagram-link {
    display: inline-block;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    color: #d81b60;
}

.locations-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.location-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

.location-item i {
    font-size: 1.2rem;
}

.loc-details strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 3px;
}

.loc-details p {
    margin: 0;
    font-size: 0.8rem;
}

.location-phone {
    margin-left: 35px; /* отступ под иконку */
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.made-by {
    display: block;
    margin-top: 50px;
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Адаптив для широких экранов */
@media (min-width: 768px) {
    .pricing-section, .gallery-section {
        padding: 60px;
    }
}

/* Адаптив для широких экранов (планшеты горизонтально и ПК) */
@media (min-width: 768px) {
    
    /* Увеличиваем общие отступы секций для "воздуха" на больших экранах */
    .pricing-section, .gallery-section {
        padding: 80px 40px;
    }

    /* --- ГЛАВНОЕ ИЗМЕНЕНИЕ: Увеличиваем карусель --- */
    .slider-wrapper {
        /* Делаем её значительно больше */
        width: 600px; 
        height: 700px; 
        
        /* На случай если экран планшета чуть меньше 700px, 
           чтобы карусель не вылезла за край */
        max-width: 95%; 
    }

    /* Также немного увеличим кнопки навигации (< и >) чтобы они соответствовали размеру */
    .slider-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    /* Немного увеличим отступ для точек снизу */
    .slider-dots {
        margin-top: 15px;
    }
}

/* --- НОВЫЕ СТИЛИ ДЛЯ ПРАЙСА --- */

.price-category-title {
    text-align: left;
    font-weight: 600;
    margin: 25px 0 10px;
    font-size: 1rem;
    text-transform: uppercase;
    color: #333;
    border-bottom: 2px solid #ffebee; /* Легкая линия подчеркивания */
    padding-bottom: 5px;
}

/* Мелкий текст для уточнений внутри строки */
.price-row small {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}

/* Примечания под ценами (*оплата за густоту и т.д.) */
.price-note {
    font-size: 0.75rem;
    color: #d81b60;
    text-align: left;
    margin-bottom: 10px;
    font-style: italic;
}
/* Иконки контактов */
.contact-icons {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
    /* Цвет текста теперь темный, так как фон светлый */
    color: #555; 
}
.icon-link { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; cursor: pointer; }
.icon-circle {
    width: 50px; height: 50px;
    border: 2px solid #ff80ab;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #ff80ab; margin-bottom: 5px; background: white;
}
.price-link-container { margin-top: 30px; }
.btn-price { background: #333; color: white; padding: 10px 40px; border-radius: 50px; text-transform: uppercase; font-weight: 600; }

/* =========================================================
   1. СНАЧАЛА БАЗОВЫЕ СТИЛИ (МОБИЛЬНЫЕ)
   ========================================================= */

/* СЛАЙДЕР С ВИДЕО */
.gallery-section {
    background: rgba(255,255,255, 0.6);
    padding: 40px 20px; 
    text-align: center;
    border-radius: 20px; 
    margin: 20px;
}
.slider-container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    margin: 20px 0; 
}

/* Базовый размер для телефонов */
.slider-wrapper {
    width: 300px;         /* <-- Для мобильных */
    height: 400px;        /* <-- Для мобильных */
    overflow: hidden; 
    border-radius: 10px; 
    position: relative;
    background: #000; 
}

.slide { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: none; 
    cursor: zoom-in; 
}
.slide.active { display: block; }

.slider-btn { 
    background: white; 
    border: none; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    cursor: pointer; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.slider-dots { display: flex; justify-content: center; gap: 8px; }
.dot { width: 8px; height: 8px; background: #ddd; border-radius: 50%; }
.dot.active { background: #d81b60; }

/* ЦЕНЫ И ФУТЕР */
.pricing-section { background: white; padding: 20px; text-align: center; border-radius: 20px; margin: 0 20px 20px; }
.footer-section { padding: 40px 20px; color: #333; text-align: center; }
.instagram-link { display: inline-block; margin-bottom: 30px; font-weight: 600; color: #d81b60; }
.locations-list { max-width: 500px; margin: 0 auto; text-align: left; }
.location-item { display: flex; gap: 15px; align-items: center; margin-bottom: 5px; }
.location-phone { margin-left: 35px; font-size: 0.9rem; margin-bottom: 20px; color: #666; }

/* --- МОДАЛЬНЫЕ ОКНА --- */
.modal-overlay, .lightbox-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    align-items: center; justify-content: center;
}

/* Окно звонка */
.modal-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 350px;
    position: relative;
}
.close-modal {
    position: absolute; top: 10px; right: 15px;
    font-size: 2rem; cursor: pointer; color: #aaa;
}
.phone-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.phone-btn {
    background: #fce4ec; color: #d81b60;
    padding: 12px; border-radius: 10px;
    font-weight: 600; display: block;
}

/* Lightbox */
.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}
.lightbox-content img, .lightbox-content video {
    max-width: 100%; max-height: 80vh;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.close-lightbox {
    position: absolute; top: 20px; right: 20px;
    font-size: 3rem; color: white; cursor: pointer;
}


/* =========================================================
   2. В САМОМ КОНЦЕ - АДАПТИВ ДЛЯ КОМПЬЮТЕРОВ
   (Перезаписывает стили выше, если экран широкий)
   ========================================================= */

@media (min-width: 768px) {
    
    /* Отступы */
    .pricing-section, .gallery-section {
        padding: 80px 40px;
    }

    /* --- УВЕЛИЧИВАЕМ КАРУСЕЛЬ --- */
    .slider-wrapper {
        width: 600px !important;  /* Сделал еще чуть больше */
        height: 750px !important;
        max-width: 95%; 
    }

    /* Увеличиваем кнопки слайдера */
    .slider-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .slider-dots {
        margin-top: 15px;
    }
}

/* --- УВЕДОМЛЕНИЕ О КОПИРОВАНИИ (TOAST) --- */
.toast-notification {
    visibility: hidden; /* Скрыто по умолчанию */
    min-width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 16px;
    position: fixed;
    z-index: 2000; /* Поверх всего, даже модальных окон */
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

/* Класс, который мы добавим через JS, чтобы показать уведомление */
.toast-notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* Небольшая анимация подъема */
}

/* Немного изменим курсор на кнопках телефона, чтобы было понятно, что это действие */
.phone-btn {
    cursor: copy; /* Курсор "копирования" */
}
.phone-btn:active {
    background-color: #f8bbd0; /* Эффект нажатия */
    transform: scale(0.98);
}