/*
=============================================================================
СТИЛИ САЙТА САЛОНА КРАСОТЫ
=============================================================================
Автор: Frontend-разработчик

Структура файла:
1. CSS Variables (переменные цветов, шрифтов, размеров)
2. Reset & Base (сброс стилей, базовые настройки)
3. Typography (типографика)
4. Layout (общие стили компоновки)
5. Components (кнопки, формы, карточки)
6. Sections (стили секций)
7. Navigation (боковая навигация)
8. Responsive (адаптивность)
9. Animations (анимации)
=============================================================================
*/

/* =============================================================================
   1. CSS VARIABLES - Переменные для единообразия стилей
   ============================================================================= */

:root {
    /* Цветовая палитра - нежные, женственные тона */
    --color-primary: #c9a86c;         /* Золотистый - основной акцент */
    --color-primary-dark: #a88b4a;    /* Тёмный золотой для hover */
    --color-secondary: #f5ebe0;       /* Кремовый - фоновый */
    --color-accent: #d4a5a5;          /* Розовый - дополнительный акцент */

    /* Нейтральные цвета */
    --color-white: #ffffff;
    --color-black: #1a1a1a;
    --color-gray-light: #f8f8f8;
    --color-gray: #888888;
    --color-gray-dark: #444444;

    /* Фоны секций */
    --bg-hero: linear-gradient(135deg, #f5ebe0 0%, #eddcd2 100%);
    --bg-light: #ffffff;
    --bg-cream: #faf7f2;
    --bg-dark: #2d2d2d;

    /* Шрифты */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Open Sans', -apple-system, sans-serif;

    /* Размеры */
    --container-width: 1200px;
    --section-padding: 100px;
    --border-radius: 8px;

    /* Тени */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* Анимации */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* =============================================================================
   2. RESET & BASE - Сброс стилей браузера
   ============================================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Плавная прокрутка при переходе по якорям */
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-white);
    /* Скрываем горизонтальный скролл */
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

ul, ol {
    list-style: none;
}

/* =============================================================================
   3. TYPOGRAPHY - Стили текста
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-black);
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

/* Декоративная линия под заголовком */
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: var(--color-primary);
    margin: 20px auto 0;
}

.section-subtitle {
    text-align: center;
    color: var(--color-gray);
    font-size: 1.1rem;
    margin-top: -30px;
    margin-bottom: 40px;
}

/* =============================================================================
   4. LAYOUT - Контейнеры и сетки
   ============================================================================= */

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

.sections-container {
    /* CSS Scroll Snap - "прилипание" к секциям */
    scroll-snap-type: y proximity;
}

.section {
    /* Каждая секция занимает минимум высоту экрана */
    min-height: 100vh;
    padding: var(--section-padding) 0;

    /* Точка прилипания scroll snap */
    scroll-snap-align: start;

    /* Флексбокс для центрирования контента */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =============================================================================
   5. COMPONENTS - Переиспользуемые компоненты
   ============================================================================= */

/* --- Кнопки --- */
.btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-white);
}

/* --- Формы --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--color-gray-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(201, 168, 108, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

/* =============================================================================
   6. SECTIONS - Стили отдельных секций
   ============================================================================= */

/* --- HERO (Главный баннер) --- */
.hero-section {
    background: var(--bg-hero);
    text-align: center;
    position: relative;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-black);
    animation: fadeInUp 1s ease;
}

.hero-tagline {
    font-size: 1.5rem;
    color: var(--color-gray-dark);
    margin-bottom: 40px;
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-btn {
    animation: fadeInUp 1s ease 0.4s both;
}

/* Индикатор прокрутки внизу hero-секции */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--color-gray);
    font-size: 0.9rem;
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--color-gray);
    border-bottom: 2px solid var(--color-gray);
    transform: rotate(45deg);
    margin: 10px auto 0;
}

/* --- О САЛОНЕ --- */
.about-section {
    background-color: var(--bg-light);
}

.about-content {
    text-align: center;
}

.about-text {
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    color: var(--color-gray-dark);
}

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

.feature {
    padding: 30px;
    background: var(--bg-cream);
    border-radius: var(--border-radius);
    transition: transform var(--transition-normal);
}

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

.feature-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.feature h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.feature p {
    color: var(--color-gray);
    font-size: 0.95rem;
}

/* --- УСЛУГИ --- */
.services-section {
    background-color: var(--bg-cream);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.service-category {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
}

.category-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary-dark);
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.service-item:last-child {
    border-bottom: none;
}

.service-info {
    flex: 1;
}

.service-name {
    display: block;
    font-weight: 500;
    margin-bottom: 3px;
}

.service-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--color-gray);
}

.service-details {
    text-align: right;
    white-space: nowrap;
    margin-left: 15px;
}

.service-duration {
    display: block;
    font-size: 0.85rem;
    color: var(--color-gray);
}

.service-price {
    display: block;
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
}

/* --- МАСТЕРА --- */
.masters-section {
    background-color: var(--bg-light);
}

.masters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.master-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.master-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.master-photo {
    height: 300px;
    overflow: hidden;
    background-color: var(--bg-cream);
}

.master-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.master-photo-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: var(--color-gray);
}

.master-info {
    padding: 25px;
}

.master-name {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.master-spec {
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 5px;
}

.master-exp {
    font-size: 0.9rem;
    color: var(--color-gray);
    margin-bottom: 10px;
}

.master-bio {
    font-size: 0.9rem;
    color: var(--color-gray-dark);
}

/* --- ЗАПИСЬ --- */
.booking-section {
    background: linear-gradient(135deg, var(--bg-cream) 0%, #e8dfd4 100%);
}

.booking-form {
    max-width: 700px;
    margin: 0 auto;
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.btn-submit {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    margin-top: 10px;
}

.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    display: none;
}

.form-message.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* --- КОНТАКТЫ --- */
.contacts-section {
    background-color: var(--bg-dark);
    color: var(--color-white);
}

.contacts-section .section-title {
    color: var(--color-white);
}

.contacts-section .section-title::after {
    background-color: var(--color-primary);
}

.contacts-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contacts-info {
    padding-right: 30px;
}

.contact-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.contact-icon {
    font-size: 1.5rem;
}

.contact-text strong {
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary);
}

.contact-text p {
    color: #ccc;
}

.contact-text a {
    color: #ccc;
}

.contact-text a:hover {
    color: var(--color-primary);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.social-link {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    transition: background var(--transition-fast);
}

.social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.contacts-map {
    height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #444;
}

.contacts-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray);
}

/* --- Нет данных --- */
.no-data {
    text-align: center;
    color: var(--color-gray);
    font-size: 1.1rem;
    padding: 50px;
}

/* =============================================================================
   7. NAVIGATION - Боковая навигация
   ============================================================================= */

.side-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.side-nav ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    transition: all var(--transition-normal);
}

.nav-dot:hover,
.nav-dot.active {
    background-color: var(--color-primary);
    transform: scale(1.3);
}

.nav-label {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.nav-dot:hover .nav-label {
    opacity: 1;
    visibility: visible;
}

/* =============================================================================
   8. FOOTER
   ============================================================================= */

.footer {
    background-color: #1a1a1a;
    color: var(--color-gray);
    padding: 30px 0;
    text-align: center;
    font-size: 0.9rem;
}

/* =============================================================================
   9. RESPONSIVE - Адаптивность для разных экранов
   ============================================================================= */

/* Планшеты */
@media (max-width: 992px) {
    .hero-title {
        font-size: 3rem;
    }

    .about-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .contacts-content {
        grid-template-columns: 1fr;
    }

    .contacts-info {
        padding-right: 0;
    }
}

/* Мобильные */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    .section-title {
        font-size: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-tagline {
        font-size: 1.2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .booking-form {
        padding: 25px;
    }

    /* Скрываем боковую навигацию на мобильных */
    .side-nav {
        display: none;
    }

    .masters-grid {
        grid-template-columns: 1fr;
    }
}

/* Маленькие мобильные */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .btn {
        padding: 12px 25px;
        font-size: 0.9rem;
    }

    .service-item {
        flex-direction: column;
        gap: 10px;
    }

    .service-details {
        text-align: left;
        margin-left: 0;
    }
}

/* =============================================================================
   10. ANIMATIONS - Анимации
   ============================================================================= */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Анимация появления секций при прокрутке */
.section {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

/* Первая секция видна сразу */
.hero-section {
    opacity: 1;
    transform: none;
}