/* Шрифты подключены через Google Fonts в index.html */

/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Перенос целых слов без разрыва */
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}

:root {
    --color-black: #141414;
    --color-dark: #222222;
    --color-gray: #3d3d3d;
    --color-light-gray: #6e6e6e;
    --color-white: #ffffff;
    --color-cream: #fefdf9;
    --color-cream-light: #fffefc;
    --color-beige: #f5f0e8;
    --color-pink: #f8e8e8;
    --color-gold: #d4af37;
    --color-rose: #e8d4d4;
    --color-rose-dark: #d4a5a5;
    --color-text-light: #4a4a4a;
    
    /* Заголовок и монограмма (имена) — декоративный шрифт; весь остальной текст — обычный */
    --font-title: 'Caveat Brush', 'Comic Sans MS', 'Apple Chancery', 'Segoe Script', cursive;
    --font-monogram: 'Great Vibes', 'Brush Script MT', 'Apple Chancery', 'Segoe Script', cursive;
    --font-text: 'Lora', Georgia, 'Times New Roman', serif;
    
    --spacing-xs: 1.05rem;
    --spacing-sm: 2.25rem;
    --spacing-md: 3.75rem;
    --spacing-lg: 5.25rem;
    --spacing-xl: 7.5rem;
    
    /* === РАЗМЕРЫ ШРИФТОВ (редактируйте здесь) === */
    /* Заголовки (не менять): title, monogram, greeting, section-title, program-title, wish-title, countdown-number, calendar-wedding, deco */
    --fs-intro-hint: 1rem;
    --fs-title: 1.35rem;
    --fs-title-max: 2.6rem;
    --fs-monogram: 2rem;
    --fs-monogram-max: 3.2rem;
    --fs-greeting: 1.15rem;
    --fs-greeting-max: 1.8rem;
    --fs-announcement: 0.95rem;
    --fs-announcement-max: 1.22rem;
    --fs-music-caption: 0.95rem;
    --fs-music-caption-max: 1.1rem;
    --fs-section-title: 1.35rem;
    --fs-section-title-max: 2.2rem;
    --fs-invitation-text: 0.95rem;
    --fs-invitation-text-max: 1.25rem;
    --fs-dresscode-text: 1.22rem;
    --fs-dresscode-colors: 1.18rem;
    --fs-map-description: 1.15rem;
    --fs-address: 1.1rem;
    --fs-map-link: 1rem;
    --fs-countdown-number: 3.2rem;
    --fs-countdown-label: 0.95rem;
    --fs-program-title: 1.7rem;
    --fs-program-time: 1.65rem;
    --fs-program-text: 1.3rem;
    --fs-wishes-intro: 1.15rem;
    --fs-wishes-intro-max: 1.5rem;
    --fs-wish-title: 1.05rem;
    --fs-wish-title-max: 1.2rem;
    --fs-wish-p: 0.9rem;
    --fs-wish-p-max: 1.05rem;
    --fs-form-label: 1rem;
    --fs-form-hint: 0.9rem;
    --fs-submit-btn: 1.05rem;
    --fs-contacts-text: 1.15rem;
    --fs-organizer-name: 1.15rem;
    --fs-album-text: 1.25rem;
    --fs-album-button: 1rem;
    --fs-rsvp-success: 1.05rem;
    --fs-rsvp-success-close: 1rem;
    --fs-rsvp-validation-title: 1.12rem;
    --fs-rsvp-validation-close: 1rem;
    --fs-guest-item-title: 1.05rem;
    --fs-add-guest-btn: 0.9rem;
    --fs-remove-guest: 0.88rem;
    --fs-music-btn: 0.83rem;
    --fs-hall-placeholder: 0.88rem;
    --fs-calendar-header: 1.05rem;
    --fs-calendar-weekday: 0.88rem;
    --fs-calendar-day: 0.95rem;
    --fs-calendar-wedding: 5rem;
    --fs-deco: 1.4rem;
    --fs-deco-hero: 1.8rem;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

/* На мобильных — без горизонтального скролла; на десктопе — контент может выходить (повёрнутое фото) */
@media (max-width: 1024px) {
    html {
        overflow-x: hidden;
    }
}

@media (min-width: 1025px) {
    html {
        overflow-x: visible;
    }
}

/* Скрытие прокруток везде */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Улучшение для touch-устройств */
* {
    -webkit-tap-highlight-color: transparent;
}

button,
a {
    touch-action: manipulation;
}

body {
    font-family: var(--font-text);
    color: var(--color-black);
    background-color: var(--color-cream);
    background-image: url('fon/background.jpg');
    background-size: cover;
    background-position: 80% center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    line-height: 1.8;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    /* Безопасные зоны для вырезов/островков на телефонах */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Принудительный шрифт для iOS Safari: наследование + !important, затем исключения для заголовка и монограммы */
body * {
    font-family: inherit;
}
body *:not(.title):not(.monogram) {
    font-family: var(--font-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.title {
    font-family: var(--font-monogram) !important;
}
.monogram {
    font-family: var(--font-monogram) !important;
}

@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }
}

@media (min-width: 1025px) {
    body {
        overflow-x: visible;
    }
}

/* Интро-экран (фото №2 + шторы) */
body.intro-active,
body.modal-open {
    overflow: hidden;
}

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: block;
    /* Фон как на основной странице, на весь экран */
    background-image: url('fon/background.jpg');
    background-size: cover;
    background-position: 75% center; /* смещено вправо */
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    overflow: hidden;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* Улучшенная поддержка touch на iOS */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Гарантируем, что элемент кликабелен */
    pointer-events: auto;
}

.intro-overlay:focus {
    outline: none;
}

.intro-overlay::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.intro-overlay.intro-opening {
    opacity: 0;
    transition: opacity 300ms ease;
}

.intro-overlay.intro-done {
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease;
}

.intro-hint {
    position: absolute;
    bottom: max(3rem, calc(env(safe-area-inset-bottom, 0) + 1.5rem));
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-family: var(--font-text);
    font-size: var(--fs-intro-hint);
    text-align: center;
    padding: 1rem 2rem;
    padding-left: max(2rem, env(safe-area-inset-left, 0) + 1rem);
    padding-right: max(2rem, env(safe-area-inset-right, 0) + 1rem);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 2rem;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    animation: introHintPulse 2s ease-in-out infinite;
}

@keyframes introHintPulse {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }
}

.intro-overlay.intro-opening .intro-hint,
.intro-overlay.intro-done .intro-hint {
    opacity: 0;
    transition: opacity 200ms ease;
}

/* Контейнер для сердечек по всей странице */
.hearts-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: visible;
}

/* Отдельное сердечко */
.heart {
    position: fixed;
    font-size: 18px;
    color: #d4a5a5;
    opacity: 0.5;
    font-family: Arial, sans-serif;
    animation: heartFloat 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes heartFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) translateX(4px) rotate(3deg);
    }
    50% {
        transform: translateY(-12px) translateX(0) rotate(-2deg);
    }
    75% {
        transform: translateY(-8px) translateX(-4px) rotate(3deg);
    }
}

/* На мобильных - меньше сердечек */
@media (max-width: 768px) {
    .heart {
        font-size: 14px;
        opacity: 0.25;
    }
}

/* интро всегда fullscreen; адаптация не нужна */

/* Отключаем fixed background на мобильных для производительности */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
    }
    
    body::before {
        background-attachment: scroll;
    }
    
    .background-overlay {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
    }
    
    .intro-overlay {
        background-attachment: scroll;
    }
}

/* Дополнительная оптимизация для очень маленьких экранов */
@media (max-width: 480px) {
    body {
        background-attachment: scroll;
    }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-cream);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

/* Повторяющийся узор ЕВ — в 2 раза плотнее, без наезда на контент */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20'%3E%3Ctext x='0' y='15' font-family='Georgia, serif' font-size='14' fill='rgba(26,26,26,0.09)'%3E%D0%95%D0%92%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
    z-index: -2;
    pointer-events: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0));
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
}

/* Перекрывающаяся ЕВ в контейнерах — больше букв по странице */
.container::before,
.container::after {
    content: 'ЕВ';
    position: absolute;
    font-family: var(--font-monogram);
    font-size: var(--fs-deco);
    color: var(--color-black);
    opacity: 0.24;
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.4em;
}
/* Контейнер: ЕВ в углах, чтобы не наезжать на секции */
.container::before {
    bottom: -0.5rem;
    left: 10%;
    transform: rotate(5deg);
}
.container::after {
    top: -0.5rem;
    right: 10%;
    left: auto;
    transform: rotate(-5deg);
}

/* Буквы Е и В по всей странице — в середине блоков */
.photos-gallery::after,
.wedding-date-text::after,
.countdown::after,
.invitation-text::before,
.calendar-container::after,
.hall-photo-placeholder::before,
.wishes-list::before,
.rsvp-form::after,
.greeting::after,
.announcement::before,
.section-title::before,
.section-title::after,
.dresscode-content::before,
.map-description::after,
.address::before,
.program-list::before,
.program-list::after,
.contacts-text::before,
.album-text::after,
.album-button-wrap::before,
.album-button-wrap::after,
.wishes-button-wrap::after,
.wishes-button-wrap::before,
.map-link-wrap::after,
.map-link-wrap::before,
.radio-group::before,
.checkbox-group::before,
.calendar-header::after,
.countdown-label::after,
.add-guest-btn::before,
.wishes-button::before,
.invitation-text::after,
.inline-photos-container::before,
.inline-photos-container::after,
.contact-info::after,
.contact-info::before,
.hall-carousel-wrap::before,
.hall-carousel-wrap::after,
.dresscode-colors::after,
.program-item::after,
.rsvp-form::before,
.submit-btn::before,
.radio-group::after,
.checkbox-group::after,
.album-button::before,
.organizer-name::after,
.map-link::before,
.contact-info::before,
.form-group:nth-of-type(2)::before,
.form-group:nth-of-type(4)::after,
.form-group:nth-of-type(6)::before,
.form-group:nth-of-type(1)::before,
.form-group:nth-of-type(3)::after,
.form-group:nth-of-type(5)::before,
.calendar-container::before,
.wedding-date-text::before,
.dresscode-text::after,
.map-link::after,
.album-button::after,
.organizer-name::before,
.program-item::before,
.countdown-item::before {
    position: absolute;
    font-family: var(--font-monogram);
    font-size: var(--fs-deco);
    color: var(--color-black);
    opacity: 0.20;
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.35em;
}
.photos-gallery { position: relative; }
.photos-gallery::after { content: 'В'; top: 25%; right: 8%; transform: rotate(12deg); opacity: 0.20; }
.wedding-date-text { position: relative; }
.wedding-date-text::after { content: 'Е'; top: 50%; right: 5%; transform: translateY(-50%) rotate(-8deg); opacity: 0.20; }
.wedding-date-text::before { content: 'В'; top: 30%; left: 5%; transform: translateY(-50%) rotate(8deg); font-size: 0.9rem; }
.countdown { position: relative; }
.countdown::after { content: 'ЕВ'; bottom: -0.5rem; right: 12%; transform: rotate(10deg); opacity: 0.20; }
.invitation-text { position: relative; }
.invitation-text::before { content: 'Е'; top: 20%; left: 8%; transform: rotate(-15deg); opacity: 0.20; }
.invitation-text::after { content: 'В'; bottom: 15%; right: 8%; transform: rotate(12deg); font-size: 0.9rem; opacity: 0.18; }
.calendar-container { position: relative; }
.calendar-container::after { content: 'В'; top: 40%; left: 5%; transform: rotate(8deg); opacity: 0.20; }
.calendar-container::before { content: 'Е'; bottom: 20%; right: 8%; transform: rotate(-10deg); font-size: 0.9rem; }
.hall-photo-placeholder { position: relative; }
.hall-photo-placeholder::before { content: 'ЕВ'; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); opacity: 0.20; }
.wishes-list { position: relative; }
.wishes-list::before { content: 'Е'; top: 30%; right: 10%; transform: rotate(5deg); opacity: 0.20; }
.rsvp-form { position: relative; }
.rsvp-form::after { content: 'В'; bottom: 10%; left: 8%; transform: rotate(-12deg); opacity: 0.20; }
.greeting { position: relative; }
.greeting::after { content: 'ЕВ'; top: 50%; right: 5%; transform: translateY(-50%) rotate(10deg); opacity: 0.20; }
.announcement { position: relative; }
.announcement::before { content: 'Е'; top: 10%; left: 3%; transform: rotate(-18deg); opacity: 0.20; }
.section-title { position: relative; }
.section-title::before { content: 'Е'; top: 50%; left: -1.5rem; transform: translateY(-50%) rotate(-12deg); font-size: 1rem; opacity: 0.20; }
.section-title::after { content: 'В'; top: 50%; right: -1.5rem; transform: translateY(-50%) rotate(12deg); font-size: 1rem; opacity: 0.20; }
.dresscode-content { position: relative; }
.dresscode-content::before { content: 'В'; top: 20%; left: 5%; transform: rotate(8deg); opacity: 0.20; }
.dresscode-text { position: relative; }
.dresscode-text::after { content: 'ЕВ'; bottom: -0.3rem; right: 10%; transform: rotate(6deg); font-size: 0.8rem; }
.map-description { position: relative; }
.map-description::after { content: 'Е'; bottom: 10%; right: 8%; transform: rotate(-10deg); opacity: 0.20; }
.address { position: relative; }
.address::before { content: 'ЕВ'; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); opacity: 0.20; }
.program-list { position: relative; }
.program-list::before { content: 'Е'; top: 0.5rem; left: 10%; transform: rotate(-8deg); opacity: 0.20; }
.program-list::after { content: 'В'; bottom: 0.5rem; right: 10%; transform: rotate(8deg); opacity: 0.20; }
.contacts-text { position: relative; }
.contacts-text::before { content: 'ЕВ'; top: 30%; right: 5%; transform: rotate(5deg); opacity: 0.20; }
.album-text { position: relative; }
.album-text::after { content: 'Е'; bottom: -0.5rem; right: 12%; transform: rotate(15deg); opacity: 0.20; }
.album-button-wrap { position: relative; }
.album-button-wrap::before { content: 'В'; top: 50%; left: 5%; transform: translateY(-50%) rotate(10deg); opacity: 0.20; }
.album-button-wrap::after { content: 'Е'; top: 50%; right: 5%; transform: translateY(-50%) rotate(-10deg); font-size: 0.9rem; opacity: 0.18; }
.wishes-button-wrap { position: relative; }
.wishes-button-wrap::after { content: 'ЕВ'; top: 50%; right: 8%; transform: translateY(-50%) rotate(-6deg); opacity: 0.20; }
.wishes-button-wrap::before { content: 'Е'; top: 50%; left: 8%; transform: translateY(-50%) rotate(8deg); font-size: 0.9rem; opacity: 0.18; }
.map-link-wrap { position: relative; }
.map-link-wrap::after { content: 'Е'; bottom: 5%; left: 50%; transform: translateX(-50%) rotate(5deg); opacity: 0.20; }
.map-link-wrap::before { content: 'В'; top: 5%; right: 15%; transform: rotate(-8deg); font-size: 0.85rem; opacity: 0.18; }
.inline-photos-container { position: relative; }
.inline-photos-container::before { content: 'Е'; top: 0.5rem; left: 8%; transform: rotate(-10deg); font-size: 1rem; opacity: 0.20; }
.inline-photos-container::after { content: 'В'; bottom: 0.5rem; right: 8%; transform: rotate(10deg); font-size: 1rem; opacity: 0.20; }
.contact-info { position: relative; }
.contact-info::after { content: 'В'; bottom: -0.5rem; right: 15%; transform: rotate(-8deg); font-size: 0.9rem; opacity: 0.20; }
.contact-info::before { content: 'Е'; top: -0.3rem; left: 20%; transform: rotate(-10deg); font-size: 0.85rem; opacity: 0.20; }
.hall-carousel-wrap { position: relative; }
.hall-carousel-wrap::before { content: 'Е'; top: 0.5rem; left: 10%; transform: rotate(-12deg); font-size: 0.95rem; opacity: 0.24; }
.hall-carousel-wrap::after { content: 'В'; bottom: 0.5rem; right: 10%; transform: rotate(12deg); font-size: 0.95rem; opacity: 0.24; }
.dresscode-colors { position: relative; }
.dresscode-colors::after { content: 'ЕВ'; bottom: -0.4rem; right: 15%; transform: rotate(8deg); font-size: 0.85rem; opacity: 0.22; }
.program-item { position: relative; }
.program-item:nth-child(odd)::after { content: 'Е'; top: 50%; right: 0.5rem; transform: translateY(-50%) rotate(10deg); font-size: 0.8rem; opacity: 0.22; }
.program-item:nth-child(even)::after { content: 'В'; top: 50%; left: 0.5rem; transform: translateY(-50%) rotate(-10deg); font-size: 0.8rem; opacity: 0.22; }
.program-item:nth-child(odd)::before { content: 'В'; top: 0.5rem; left: 0.5rem; transform: rotate(-8deg); font-size: 0.7rem; opacity: 0.18; }
.program-item:nth-child(even)::before { content: 'Е'; top: 0.5rem; right: 0.5rem; transform: rotate(8deg); font-size: 0.7rem; opacity: 0.18; }
.rsvp-form::before { content: 'Е'; top: 1rem; right: 10%; transform: rotate(-8deg); font-size: 0.95rem; opacity: 0.24; }
.form-group:nth-of-type(1)::before { content: 'Е'; top: 50%; left: -0.5rem; transform: translateY(-50%) rotate(-5deg); font-size: 0.75rem; }
.form-group:nth-of-type(2)::before { content: 'В'; top: 50%; right: -0.5rem; left: auto; transform: translateY(-50%) rotate(6deg); font-size: 0.8rem; }
.form-group:nth-of-type(3)::after { content: 'Е'; top: 50%; right: -0.5rem; transform: translateY(-50%) rotate(6deg); font-size: 0.75rem; }
.form-group:nth-of-type(4)::after { content: 'Е'; top: 50%; left: -0.5rem; right: auto; transform: translateY(-50%) rotate(-6deg); font-size: 0.8rem; }
.form-group:nth-of-type(5)::before { content: 'В'; bottom: 0.3rem; left: 10%; transform: rotate(-5deg); font-size: 0.7rem; }
.form-group:nth-of-type(6)::before { content: 'В'; bottom: 0.5rem; right: 15%; left: auto; transform: rotate(5deg); font-size: 0.75rem; }
.form-group { position: relative; }
.submit-btn { position: relative; }
.submit-btn::before { content: 'ЕВ'; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); font-size: 1rem; opacity: 0.20; }
.radio-group { position: relative; }
.radio-group::after { content: 'Е'; bottom: -0.3rem; right: 10%; transform: rotate(8deg); font-size: 0.75rem; opacity: 0.20; }
.radio-group::before { content: 'В'; top: -0.2rem; left: 10%; transform: rotate(-6deg); font-size: 0.7rem; opacity: 0.18; }
.checkbox-group { position: relative; }
.checkbox-group::after { content: 'В'; bottom: -0.3rem; left: 10%; transform: rotate(-8deg); font-size: 0.75rem; opacity: 0.20; }
.checkbox-group::before { content: 'Е'; top: -0.2rem; right: 10%; transform: rotate(8deg); font-size: 0.7rem; opacity: 0.18; }
.calendar-header { position: relative; }
.calendar-header::after { content: 'ЕВ'; bottom: -0.25rem; right: 5%; transform: rotate(5deg); font-size: 0.75rem; opacity: 0.18; }
.countdown-label { position: relative; }
.countdown-item:nth-child(odd) .countdown-label::after { content: 'Е'; position: absolute; bottom: -0.15rem; left: -0.25rem; font-family: var(--font-monogram); font-size: 0.55rem; color: var(--color-black); opacity: 0.16; z-index: -1; pointer-events: none; transform: rotate(-5deg); letter-spacing: 0; }
.countdown-item:nth-child(even) .countdown-label::after { content: 'В'; position: absolute; bottom: -0.15rem; right: -0.25rem; left: auto; font-family: var(--font-monogram); font-size: 0.55rem; color: var(--color-black); opacity: 0.16; z-index: -1; pointer-events: none; transform: rotate(5deg); letter-spacing: 0; }
.add-guest-btn { position: relative; }
.add-guest-btn::before { content: 'ЕВ'; top: 50%; left: -1.2rem; transform: translateY(-50%) rotate(-8deg); font-size: 0.75rem; opacity: 0.18; }
.wishes-button { position: relative; }
.wishes-button::before { content: 'Е'; top: 50%; right: -0.9rem; transform: translateY(-50%) rotate(8deg); font-size: 0.75rem; opacity: 0.18; }
.album-button { position: relative; }
.album-button::before { content: 'ЕВ'; top: 50%; left: -1rem; transform: translateY(-50%) rotate(-10deg); font-size: 0.85rem; opacity: 0.22; }
.album-button::after { content: 'ЕВ'; top: 50%; right: -1rem; transform: translateY(-50%) rotate(10deg); font-size: 0.8rem; }
.organizer-name { position: relative; }
.organizer-name::after { content: 'В'; top: 50%; right: -0.8rem; transform: translateY(-50%) rotate(8deg); font-size: 0.8rem; opacity: 0.22; }
.organizer-name::before { content: 'Е'; top: 50%; left: -0.8rem; transform: translateY(-50%) rotate(-8deg); font-size: 0.8rem; }
.map-link { position: relative; }
.map-link::before { content: 'Е'; top: 50%; left: -0.8rem; transform: translateY(-50%) rotate(-8deg); font-size: 0.8rem; opacity: 0.22; }
.map-link::after { content: 'В'; top: 50%; right: -0.8rem; transform: translateY(-50%) rotate(8deg); font-size: 0.8rem; }
.music-caption { position: relative; }
.music-caption::after { content: 'ЕВ'; position: absolute; bottom: -0.3rem; right: 10%; font-family: var(--font-monogram); font-size: 0.85rem; color: var(--color-black); opacity: 0.2; z-index: -1; pointer-events: none; transform: rotate(6deg); letter-spacing: -0.3em; white-space: nowrap; }
.countdown-item { position: relative; }
/* Таймер: каждый блок — два угла, без наезда между блоками */
.countdown-item:nth-child(1)::after { content: 'Е'; position: absolute; bottom: -0.2rem; left: 2%; font-family: var(--font-monogram); font-size: 0.7rem; color: var(--color-black); opacity: 0.20; z-index: -1; pointer-events: none; transform: rotate(-8deg); letter-spacing: 0; }
.countdown-item:nth-child(1)::before { content: 'В'; top: -0.15rem; right: 2%; transform: rotate(6deg); font-size: 0.6rem; opacity: 0.16; }
.countdown-item:nth-child(2)::after { content: 'В'; position: absolute; bottom: -0.2rem; right: 2%; font-family: var(--font-monogram); font-size: 0.7rem; color: var(--color-black); opacity: 0.20; z-index: -1; pointer-events: none; transform: rotate(8deg); letter-spacing: 0; }
.countdown-item:nth-child(2)::before { content: 'Е'; top: -0.15rem; left: 2%; transform: rotate(-6deg); font-size: 0.6rem; opacity: 0.16; }
.countdown-item:nth-child(3)::after { content: 'Е'; position: absolute; top: -0.2rem; left: 2%; font-family: var(--font-monogram); font-size: 0.7rem; color: var(--color-black); opacity: 0.20; z-index: -1; pointer-events: none; transform: rotate(-5deg); letter-spacing: 0; }
.countdown-item:nth-child(3)::before { content: 'В'; bottom: -0.15rem; right: 2%; transform: rotate(5deg); font-size: 0.6rem; opacity: 0.16; }
.countdown-item:nth-child(4)::after { content: 'В'; position: absolute; top: -0.2rem; right: 2%; font-family: var(--font-monogram); font-size: 0.7rem; color: var(--color-black); opacity: 0.20; z-index: -1; pointer-events: none; transform: rotate(5deg); letter-spacing: 0; }
.countdown-item:nth-child(4)::before { content: 'Е'; bottom: -0.15rem; left: 2%; transform: rotate(-5deg); font-size: 0.6rem; opacity: 0.16; }

/* Фоновое изображение */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('fon/background.jpg');
    /* Основной фон: полноэкранный, по центру */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
    filter: blur(3px);
}

/* Разделители со звёздочками — скрыты */
.decorative-divider {
    display: none;
}


.decorative-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: var(--spacing-sm);
    opacity: 0.6;
}

/* Анимация появления при скролле */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero секция */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5vh var(--spacing-md);
    padding-bottom: 5vh;
    position: relative;
}

/* В hero убираем лишние ЕВ в контейнере, буквы ЕВ по углам hero оставляем */
.hero .container::before,
.hero .container::after { display: none; }
.hero .music-section::before,
.hero .music-section::after { display: none; }
.hero .music-caption::after { display: none; }
.hero .photos-gallery::after { display: none; }
.hero .greeting::after { display: none; }
.hero .announcement::before { display: none; }
.hero .inline-photos-container::before,
.hero .inline-photos-container::after { display: none; }

/* Перекрывающаяся пара ЕВ — общий стиль */
/* Буквы ЕВ на втором плане по всей странице */
/* ЕВ в секциях — в ~3 раза заметнее по всей странице */
.hero::before,
.hero::after,
.music-section::before,
.music-section::after,
.date-section::before,
.date-section::after,
.countdown-section::before,
.countdown-section::after,
.invitation-section::before,
.invitation-section::after {
    content: 'ЕВ';
    position: absolute;
    font-family: var(--font-monogram);
    font-size: var(--fs-deco-hero);
    color: var(--color-black);
    opacity: 0.22;
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.42em;
}
.dresscode-section::before,
.dresscode-section::after,
.map-section::before,
.map-section::after {
    content: 'ЕВ';
    position: absolute;
    font-family: var(--font-monogram);
    font-size: var(--fs-deco-hero);
    color: var(--color-black);
    opacity: 0.24;
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.42em;
}
.program-section::before,
.program-section::after,
.wishes-section::before,
.wishes-section::after {
    content: 'ЕВ';
    position: absolute;
    font-family: var(--font-monogram);
    font-size: var(--fs-deco-hero);
    color: var(--color-black);
    opacity: 0.26;
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.42em;
}
.rsvp-section::before,
.rsvp-section::after,
.contacts-section::before,
.contacts-section::after,
.album-section::before,
.album-section::after {
    content: 'ЕВ';
    position: absolute;
    font-family: var(--font-monogram);
    font-size: var(--fs-deco-hero);
    color: var(--color-black);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.42em;
}

/* Hero: ЕВ слева и справа сверху, плюс по центру снизу */
.hero::before {
    top: 1.5rem;
    left: 0.5rem;
    transform: rotate(-18deg);
    font-size: 1.2rem;
    opacity: 0.12;
}
.hero::after {
    top: 1.5rem;
    right: 0.5rem;
    transform: rotate(18deg);
    font-size: 1.2rem;
    opacity: 0.12;
}

.title {
    font-family: var(--font-monogram);
    font-size: clamp(3.2rem, 5.5vw, 4.5rem);
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: none;
    font-style: normal;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.monogram {
    font-family: var(--font-monogram);
    font-size: clamp(var(--fs-monogram), 4vw, var(--fs-monogram-max));
    font-weight: normal;
    color: var(--color-black);
    margin: var(--spacing-sm) auto;
    letter-spacing: 0.5px;
    border: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 0 var(--spacing-sm);
    line-height: 1.15;
    flex-wrap: wrap;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

/* Галерея: overflow visible, чтобы фото 7 (повёрнутое) было видно целиком; прокрутки скрыты глобально */
.photos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.photos-gallery::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Фото IMG_8047.JPG без поворота, по центру, отступы от краёв как у остальных */
.photos-gallery .gallery-photo[src*="7.JPG"],
.photos-gallery .gallery-photo[src*="foto/7"],
.photos-gallery .gallery-photo[src*="IMG_8047"],
.photos-gallery img[src*="7.JPG"],
.photos-gallery img[src*="foto/7"],
.photos-gallery img[src*="IMG_8047"],
.inline-photos-container .inline-photo[src*="7.JPG"],
.inline-photos-container .inline-photo[src*="foto/7"],
.inline-photos-container .inline-photo[src*="IMG_8047"],
.inline-photos-container img[src*="7.JPG"],
.inline-photos-container img[src*="foto/7"],
.inline-photos-container img[src*="IMG_8047"] {
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: min(92vw, 1100px) !important;
    max-height: 78vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--color-rose);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Контейнер с повёрнутым фото 7 — центрирование по экрану */
.inline-photos-container.has-rotated-photo {
    min-height: 80vmin;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

@media (max-width: 480px) {
    .inline-photos-container.has-rotated-photo {
        min-height: 55vh;
    }
}

@media (max-width: 360px) {
    .inline-photos-container.has-rotated-photo {
        min-height: 50vh;
    }
}

@media (max-width: 768px) {
    .photos-gallery img[src*="7.JPG"],
    .photos-gallery img[src*="foto/7"],
    .photos-gallery img[src*="IMG_8047"],
    .inline-photos-container img[src*="7.JPG"],
    .inline-photos-container img[src*="foto/7"],
    .inline-photos-container img[src*="IMG_8047"] {
        margin-top: 2rem;
        margin-bottom: 2rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 96vw !important;
        max-height: 74vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .photos-gallery img[src*="7.JPG"],
    .photos-gallery img[src*="foto/7"],
    .photos-gallery img[src*="IMG_8047"],
    .inline-photos-container img[src*="7.JPG"],
    .inline-photos-container img[src*="foto/7"],
    .inline-photos-container img[src*="IMG_8047"] {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 98vw !important;
        max-height: 62vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
}

@media (max-width: 360px) {
    .photos-gallery img[src*="7.JPG"],
    .photos-gallery img[src*="foto/7"],
    .photos-gallery img[src*="IMG_8047"],
    .inline-photos-container img[src*="7.JPG"],
    .inline-photos-container img[src*="foto/7"],
    .inline-photos-container img[src*="IMG_8047"] {
        margin-top: 1rem;
        margin-bottom: 1rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 98vw !important;
        max-height: 54vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
}

.gallery-photo {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    border: 2px solid var(--color-rose);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    filter: grayscale(100%);
    display: block;
}

/* Обёртка фото в галерее — скрывает overflow при наведении (scale), без полосы прокрутки */
.photos-gallery .gallery-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 10;
    position: relative;
}

/* Встроенные фото в тексте */
.inline-photo {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    border: 2px solid var(--color-rose);
    margin: var(--spacing-xs);
    vertical-align: middle;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: grayscale(100%);
}

/* Контейнер встроенных фото: overflow visible, чтобы фото 7 было видно целиком; прокрутки скрыты глобально */
.inline-photos-container {
    text-align: center;
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    justify-items: center;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.inline-photos-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.inline-photos-container .inline-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-position: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.inline-photos-container .inline-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 10;
    position: relative;
}

/* Фото IMG_8047 при наведении — лёгкое увеличение без поворота */
.photos-gallery img[src*="7.JPG"]:hover,
.photos-gallery img[src*="foto/7"]:hover,
.photos-gallery img[src*="IMG_8047"]:hover,
.inline-photos-container img[src*="7.JPG"]:hover,
.inline-photos-container img[src*="foto/7"]:hover,
.inline-photos-container img[src*="IMG_8047"]:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.greeting {
    font-size: clamp(var(--fs-greeting), 2.2vw, var(--fs-greeting-max));
    font-weight: 500;
    color: var(--color-black);
    margin: var(--spacing-sm) 0;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.announcement {
    font-size: clamp(var(--fs-announcement), 1.6vw, var(--fs-announcement-max));
    font-weight: 500;
    color: var(--color-black);
    margin: var(--spacing-xs) 0;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

/* Музыка */
.music-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

.music-section--hidden {
    display: none !important;
}

.music-caption {
    font-family: var(--font-text);
    font-size: clamp(var(--fs-music-caption), 1.5vw, var(--fs-music-caption-max));
    color: var(--color-black);
    margin: 0 0 var(--spacing-md);
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

/* Только кнопки: обрезаем iframe, видна только зона с play/pause (нижняя часть виджета) */
.music-yandex-wrap {
    width: 120px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    position: relative;
    isolation: isolate;
    z-index: 1;
}

.music-yandex-iframe {
    display: block;
    border: none;
    position: absolute;
    left: 0;
    top: -176px;
    width: 614px;
    height: 244px;
    pointer-events: auto;
}

@media (max-width: 640px) {
    .music-yandex-wrap {
        width: 100px;
        height: 48px;
        border-radius: 24px;
    }
    .music-yandex-iframe {
        left: 0;
        top: -180px;
    }
}

.music-control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--spacing-sm) 0;
}

/* Скрытая запасная кнопка — остаётся только плеер Яндекс.Музыки (play/pause внутри iframe) */
.music-control--hidden {
    display: none !important;
}

/* ЕВ: музыка — сверху по центру и снизу по центру */
.music-section::before {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
}
.music-section::after {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(8deg);
}

@media (max-width: 768px) {
    .music-section {
        padding: var(--spacing-md) 0;
    }
    
    .music-button {
        padding: 0.8rem 1.8rem;
        font-size: var(--fs-music-btn);
    }
    
    .music-control {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .music-section {
        padding: var(--spacing-sm) 0;
    }
    
    .music-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        min-height: 44px;
        width: auto;
        max-width: 90%;
        margin: 0 auto;
        display: flex;
    }
    
    .music-control {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

.music-button {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-black);
    border: 2px solid var(--color-black);
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-family: var(--font-text);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    min-height: 48px;
}

.music-button:hover {
    background: var(--color-black);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.music-button.playing {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
    }
    50% {
        box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
    }
}

.music-icon {
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.music-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    margin-left: 1px;
}

.music-button.playing .music-icon::before {
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-top: none;
    border-bottom: none;
    width: 6px;
    height: 8px;
    margin-left: 0;
}

/* Плавающая кнопка пауза/плей — тянется за прокруткой */
.music-float-btn {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    right: calc(1rem + env(safe-area-inset-right, 0));
    z-index: 9998;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-black);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.music-float-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: scale(1.05);
}
.music-float-btn:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
.music-float-btn--hidden {
    display: none !important;
}
.music-float-btn--visible {
    display: flex !important;
}
/* Иконка паузы: два вертикальных столбика */
.music-float-btn-icon {
    width: 18px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
}
.music-float-btn-icon--pause::before,
.music-float-btn-icon--pause::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: currentColor;
    border-radius: 1px;
}
.music-float-btn-icon--pause::before { left: 0; }
.music-float-btn-icon--pause::after { right: 0; }
/* Иконка воспроизведения: треугольник */
.music-float-btn-icon--play {
    width: 0;
    height: 0;
    border-left: 10px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 4px;
}

/* Таймер */
.date-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

/* ЕВ: дата — слева по центру и справа по центру */
.date-section::before {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%) rotate(-15deg);
}
.date-section::after {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) rotate(15deg);
}

.wedding-date-text {
    font-family: var(--font-text);
    font-size: 1.6rem;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.calendar-container {
    max-width: 500px;
    margin: 0 auto var(--spacing-md);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .date-section {
        padding: var(--spacing-md) 0;
    }
    
    .wedding-date-text {
        font-size: 1.4rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .calendar-container {
        max-width: 100%;
        margin: 0 auto var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .calendar-header {
        font-size: 1rem;
        padding: var(--spacing-xs) 0;
        margin-bottom: var(--spacing-xs);
    }
    
    .calendar-weekday {
        font-size: 0.75rem;
        padding: 0.3rem 0;
    }
    
    .calendar-day {
        font-size: 0.85rem;
        padding: 0.5rem 0;
    }
    
    .calendar-day.wedding-date {
        padding: 0.8rem 0.2rem;
        min-height: 3rem;
    }
    
    .calendar-day.wedding-date::before {
        font-size: 5.6rem;
        top: 47%;
        -webkit-text-stroke: 1.5px var(--color-black);
        text-stroke: 1.5px var(--color-black);
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .date-section {
        padding: var(--spacing-sm) 0;
    }
    
    .wedding-date-text {
        font-size: 1.2rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .calendar-container {
        padding: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }
    
    .calendar-header {
        font-size: 0.9rem;
        padding: 0.3rem 0;
    }
    
    .calendar-weekday {
        font-size: 0.7rem;
        padding: 0.25rem 0;
    }
    
    .calendar-day {
        font-size: 0.75rem;
        padding: 0.4rem 0;
    }
    
    .calendar-day.wedding-date {
        padding: 0.7rem 0.2rem;
        min-height: 2.8rem;
    }
    
    .calendar-day.wedding-date::before {
        font-size: 4.4rem;
        top: 46%;
        -webkit-text-stroke: 1.5px var(--color-black);
        text-stroke: 1.5px var(--color-black);
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        opacity: 1;
    }
}

/* Медиа-запросы для конкретных устройств */
/* iPhone SE, iPhone 5/5S/5C (320px) */
@media (max-width: 375px) {
    .calendar-container {
        padding: 0.5rem;
    }
    
    .calendar-day {
        font-size: 0.7rem;
        padding: 0.35rem 0;
    }
    
    .calendar-day.wedding-date {
        padding: 0.6rem 0.15rem;
        min-height: 2.5rem;
    }
    
    .calendar-day.wedding-date::before {
        font-size: 4rem;
        top: 45%;
        -webkit-text-stroke: 1.2px var(--color-black);
        text-stroke: 1.2px var(--color-black);
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        opacity: 1;
    }
    
    .calendar-weekday {
        font-size: 0.65rem;
        padding: 0.2rem 0;
    }
}

/* Очень маленькие экраны (до 320px) */
@media (max-width: 320px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .intro-hint {
        font-size: 0.8rem;
        padding: 0.75rem 1.25rem;
        bottom: max(2rem, calc(env(safe-area-inset-bottom, 0) + 1rem));
    }
    
    .calendar-container {
        padding: 0.4rem;
    }
    
    .calendar-day {
        font-size: 0.65rem;
        padding: 0.3rem 0;
    }
    
    .calendar-day.wedding-date {
        padding: 0.5rem 0.1rem;
        min-height: 2.3rem;
    }
    
    .calendar-day.wedding-date::before {
        font-size: 3.6rem;
        top: 44%;
        -webkit-text-stroke: 1px var(--color-black);
        text-stroke: 1px var(--color-black);
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        opacity: 1;
    }
    
    .calendar-weekday {
        font-size: 0.6rem;
    }
}

/* Планшеты в портретной ориентации */
@media (min-width: 481px) and (max-width: 768px) {
    .calendar-day.wedding-date::before {
        font-size: 6.4rem;
    }
}

/* Десктоп: комфортная ширина текста и отступы секций */
@media (min-width: 1025px) {
    .hero {
        min-height: 100vh;
        padding: 6vh var(--spacing-lg);
    }
    
    .hero .container {
        max-width: 900px;
    }
    
    .announcement,
    .dresscode-text,
    .map-description,
    .album-text,
    .contacts-text {
        max-width: 65ch;
        margin-left: auto;
        margin-right: auto;
    }
    
    section:not(.hero) {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    
    .intro-hint {
        font-size: 1rem;
        padding: 1.25rem 2.5rem;
    }
}

/* Планшеты в альбомной ориентации */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    
    .calendar-container {
        max-width: 600px;
    }
    
    .title {
        font-size: 2.8rem;
    }
    
    .monogram {
        font-size: 2.8rem;
    }
    
    .section-title {
        font-size: 1.7rem;
    }
    
    .photos-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        gap: var(--spacing-md);
    }
    
    .inline-photos-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        gap: var(--spacing-md);
    }
    
    .rsvp-form {
        max-width: 650px;
        padding: 1.75rem;
    }
    
    .form-group input[type="text"],
    .form-group input[type="tel"] {
        font-size: 1.05rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .radio-label,
    .checkbox-label {
        font-size: 1rem;
        padding: var(--spacing-sm);
    }
    
    .submit-btn {
        font-size: 1.1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    
    .wishes-content {
        max-width: 850px;
    }
    
    .hall-photo-placeholder {
        min-height: 400px;
    }
}

/* Десктопы (desktop >= 1024px) - увеличенные размеры шрифтов */
@media (min-width: 1024px) {
    .greeting {
        font-size: clamp(1.25rem, 2.5vw, 1.95rem);
    }
    
    .announcement {
        font-size: clamp(0.95rem, 1.9vw, 1.3rem);
    }
    
    .section-title {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
    }
    
    .dresscode-text {
        font-size: 1.35rem;
    }
    
    .dresscode-colors {
        font-size: 1.28rem;
    }
    
    .map-description {
        font-size: 1.25rem;
    }
    
    .address {
        font-size: 1.2rem;
    }
    
    .address p {
        font-size: 1.2rem;
    }
    
    .map-link {
        font-size: 1.05rem;
    }
    
    .program-title {
        font-size: 1.95rem;
    }
    
    .program-text {
        font-size: 1.42rem;
    }
    
    .program-time {
        font-size: 1.65rem;
    }
    
    .contacts-text {
        font-size: 1.25rem;
    }
    
    .organizer-name {
        font-size: 1.3rem;
    }
    
    .album-text {
        font-size: 1.38rem;
    }
    
    .album-button {
        font-size: 1.05rem;
    }
    
    .form-label {
        font-size: 1.05rem;
    }
    
    .form-hint {
        font-size: 0.9rem;
    }
    
    .rsvp-form input[type="text"],
    .rsvp-form input[type="tel"] {
        font-size: 1.1rem;
    }
    
    .submit-btn {
        font-size: 1.15rem;
    }
    
    .invitation-text {
        font-size: clamp(0.95rem, 1.35vw, 1.35rem);
    }
    
    .wishes-section .invitation-text {
        font-size: 1.4rem;
    }
}

/* Большие экраны (desktop > 1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
    
    .title {
        font-size: clamp(3rem, 5vw, 4.2rem);
    }
    
    .monogram {
        font-size: clamp(2.8rem, 3.5vw, 3.5rem);
    }
    
    .section-title {
        font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    }
    
    .photos-gallery {
        max-width: 1200px;
        gap: var(--spacing-md);
    }
    
    .inline-photos-container {
        max-width: 1200px;
        gap: var(--spacing-lg);
    }
    
    .rsvp-form {
        max-width: 700px;
    }
    
    .calendar-container {
        max-width: 650px;
    }
    
    .wishes-content {
        max-width: 1000px;
    }
}

/* Очень большие экраны (ultrawide/4K > 1920px) */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    
    .greeting {
        font-size: clamp(1.35rem, 2.7vw, 2.1rem);
    }
    
    .announcement {
        font-size: clamp(1.05rem, 2.1vw, 1.4rem);
    }
    
    .section-title {
        font-size: clamp(1.7rem, 3.2vw, 2.7rem);
    }
    
    .dresscode-text {
        font-size: 1.5rem;
    }
    
    .dresscode-colors {
        font-size: 1.35rem;
    }
    
    .map-description {
        font-size: 1.35rem;
    }
    
    .address {
        font-size: 1.3rem;
    }
    
    .address p {
        font-size: 1.3rem;
    }
    
    .map-link {
        font-size: 1.15rem;
    }
    
    .program-title {
        font-size: 2.15rem;
    }
    
    .program-text {
        font-size: 1.52rem;
    }
    
    .program-time {
        font-size: 1.75rem;
    }
    
    .contacts-text {
        font-size: 1.35rem;
    }
    
    .organizer-name {
        font-size: 1.4rem;
    }
    
    .album-text {
        font-size: 1.5rem;
    }
    
    .album-button {
        font-size: 1.15rem;
    }
    
    .form-label {
        font-size: 1.15rem;
    }
    
    .form-hint {
        font-size: 1rem;
    }
    
    .rsvp-form input[type="text"],
    .rsvp-form input[type="tel"] {
        font-size: 1.2rem;
    }
    
    .submit-btn {
        font-size: 1.25rem;
    }
    
    .invitation-text {
        font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    }
    
    .wishes-section .invitation-text {
        font-size: 1.52rem;
    }
    
    .photos-gallery {
        max-width: 1400px;
    }
    
    .inline-photos-container {
        max-width: 1400px;
    }
    
    .rsvp-form {
        max-width: 800px;
    }
    
    .calendar-container {
        max-width: 750px;
    }
    
    .wishes-content {
        max-width: 1100px;
    }
}

/* Поддержка ориентации экрана - landscape для мобильных */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: auto;
        padding: var(--spacing-sm) 0;
    }
    
    .title {
        font-size: 2.4rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .monogram {
        font-size: 2.4rem;
        margin: var(--spacing-xs) auto;
    }
    
    .calendar-container {
        padding: var(--spacing-xs);
        max-width: 90%;
    }
    
    .calendar-day.wedding-date::before {
        font-size: 4rem;
    }
    
    .countdown {
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-xs);
    }
    
    .countdown-item {
        padding: 0.3rem 0.25rem;
    }
    
    .countdown-number {
        font-size: 1.5rem;
    }
    
    .countdown-label {
        font-size: 0.75rem;
    }
    
    .section-title {
        font-size: 1.4rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .photos-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
    
    .inline-photos-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .rsvp-form {
        padding: 0.75rem;
        max-width: 90%;
    }
    
    .form-group {
        margin-bottom: var(--spacing-xs);
    }
    
    .wishes-content {
        max-height: 90vh;
        padding-top: 2rem;
    }
    
    .wishes-list {
        max-height: calc(90vh - 3rem);
    }
    
    .hall-photo-placeholder {
        min-height: 250px;
    }
}

/* Landscape для планшетов */
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
    .hero {
        padding: var(--spacing-md) 0;
    }
    
    .photos-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .inline-photos-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.calendar {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;
}

.calendar-header {
    font-family: var(--font-title);
    font-size: var(--fs-calendar-header);
    color: var(--color-black);
    padding: var(--spacing-sm) 0;
    border-bottom: 2px solid var(--color-black);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: var(--spacing-xs);
}

.calendar-weekday {
    font-family: var(--font-text);
    font-size: var(--fs-calendar-weekday);
    font-weight: 600;
    color: var(--color-gray);
    text-align: center;
    padding: var(--spacing-xs) 0;
}

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

.calendar-day {
    font-family: var(--font-text);
    font-size: var(--fs-calendar-day);
    color: var(--color-black);
    text-align: center;
    padding: 0.8rem 0;
    border-radius: 6px;
    cursor: default;
    transition: all 0.2s ease;
}

.calendar-day.other-month {
    color: var(--color-light-gray);
    opacity: 0.4;
}

.calendar-day.today {
    background: rgba(212, 175, 55, 0.2);
    font-weight: 600;
}

.calendar-day.wedding-date {
    background: transparent;
    color: var(--color-black);
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
    padding: 1rem 0.2rem;
    min-height: 3.5rem;
}

/* Контур сердца сзади (только очертания, без заливки), число чёрным поверх */
.calendar-day.wedding-date::before {
    content: '♥';
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-calendar-wedding);
    color: var(--color-black);
    -webkit-text-stroke: 2px var(--color-black);
    -webkit-text-fill-color: transparent;
    text-stroke: 2px var(--color-black);
    text-fill-color: transparent;
    line-height: 1;
    z-index: -1;
    font-family: Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-weight: normal;
    opacity: 1;
    /* Улучшенная поддержка iOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Альтернативный вариант для iOS если stroke не работает */
@supports not (-webkit-text-stroke: 2px black) {
    .calendar-day.wedding-date::before {
        color: var(--color-black);
        opacity: 1;
        -webkit-text-stroke: 2px var(--color-black);
        text-stroke: 2px var(--color-black);
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }
}

/* Дополнительный fallback для старых iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .calendar-day.wedding-date::before {
        color: var(--color-black);
        opacity: 1;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }
}

.calendar-day.wedding-date::after {
    content: none;
}

.countdown-section {
    padding: var(--spacing-lg) 0;
    position: relative;
}

/* ЕВ: таймер — сверху центр, снизу центр */
.countdown-section::before {
    top: 1rem;
    left: 30%;
    transform: rotate(-12deg);
}
.countdown-section::after {
    bottom: 1rem;
    right: 25%;
    transform: rotate(12deg);
}

@media (max-width: 768px) {
    .countdown-section {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    .countdown-section {
        padding: var(--spacing-sm) 0;
    }
}

.wedding-passed-message {
    margin-top: var(--spacing-md);
    font-size: 1.5rem;
    color: var(--color-gold);
    font-weight: 600;
    font-family: var(--font-text);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.section-title {
    font-family: var(--font-title);
    font-size: clamp(var(--fs-section-title), 2.8vw, var(--fs-section-title-max));
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.countdown {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    padding: var(--spacing-sm);
}

.countdown-number {
    font-size: var(--fs-countdown-number);
    font-weight: 700;
    font-family: var(--font-text);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.countdown-label {
    font-size: var(--fs-countdown-label);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--spacing-xs);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

/* Приглашение */
.invitation-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

/* ЕВ: приглашение — по центру сверху и снизу */
.invitation-section::before {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
}
.invitation-section::after {
    bottom: 1rem;
    left: 45%;
    transform: rotate(5deg);
}

@media (max-width: 768px) {
    .invitation-section {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    .invitation-section {
        padding: var(--spacing-sm) 0;
    }
}

.invitation-text {
    font-size: clamp(var(--fs-invitation-text), 1.8vw, var(--fs-invitation-text-max));
    line-height: 1.9;
    color: var(--color-black);
    letter-spacing: 0.5px;
    max-width: 800px;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
    margin: 0 auto;
}

/* В секции пожеланий уменьшаем отступы у текста и кнопки */
.wishes-section .inline-photos-container {
    margin-bottom: 0.5rem;
}

.wishes-section .invitation-text {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: clamp(var(--fs-wishes-intro), 2vw, var(--fs-wishes-intro-max));
}

/* Дресскод */
.dresscode-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

/* ЕВ: дресскод — слева сверху, справа снизу */
.dresscode-section::before {
    top: 2rem;
    left: 15%;
    transform: rotate(-18deg);
}
.dresscode-section::after {
    bottom: 2rem;
    right: 15%;
    transform: rotate(18deg);
}

@media (max-width: 768px) {
    .dresscode-section {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    .dresscode-section {
        padding: var(--spacing-sm) 0;
    }
}

.dresscode-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md) 0.5rem;
}

.dresscode-text {
    font-size: clamp(var(--fs-dresscode-text), 2vw, 1.5rem);
    line-height: 1.9;
    color: var(--color-black);
    letter-spacing: 0.5px;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
    margin-bottom: var(--spacing-md);
}

.dresscode-colors {
    font-size: clamp(var(--fs-dresscode-colors), 1.8vw, 1.32rem);
    font-weight: 600;
    color: var(--color-black);
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
    margin-top: var(--spacing-md);
}

/* Карта */
.map-section {
    /* Чуть уменьшаем отступ снизу, чтобы следующий блок был ближе */
    padding: var(--spacing-lg) 0 var(--spacing-md);
    position: relative;
}

/* ЕВ: карта/фото зала — по центру секции сверху и снизу */
.map-section::before {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
}
.map-section::after {
    bottom: 1rem;
    left: 55%;
    transform: rotate(10deg);
}

/* ЕВ: общий альбом — по центру сверху и снизу */
.album-section::before {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
}
.album-section::after {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(8deg);
}

@media (max-width: 768px) {
    .map-section {
        padding: var(--spacing-md) 0 var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .map-section {
        padding: var(--spacing-sm) 0 var(--spacing-xs);
    }
}

.map-button {
    background: linear-gradient(135deg, 
        rgba(232, 212, 212, 0.8) 0%, 
        rgba(248, 232, 232, 0.8) 100%);
    color: var(--color-black);
    border: 2px solid #e8d4d4;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.1rem;
    font-family: var(--font-text);
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    margin: var(--spacing-md) 0;
    min-height: 44px;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.map-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

.map-link {
    display: inline-block;
    color: var(--color-black);
    text-decoration: underline;
    font-size: 1rem;
    font-family: var(--font-text);
    transition: color 0.3s ease;
    vertical-align: middle;
}

.map-link:hover {
    color: var(--color-gold);
}

/* Ссылка на карты — сердечки в разметке (span), чётко слева и справа от текста */
.map-link--heart {
    display: inline-flex;
    align-items: center;
}
.map-link--heart::before,
.map-link--heart::after {
    content: none;
    display: none;
}
.map-link-heart {
    display: inline-block;
    font-size: 1.5rem;
    color: #d4a5a5;
    margin-right: 0.5rem;
    margin-left: 0;
}
.map-link-heart--right {
    margin-right: 0;
    margin-left: 0.5rem;
}
.map-link--heart:hover .map-link-heart {
    color: #d4a5a5;
}

@media (max-width: 768px) {
    .map-link {
        display: block;
        margin-left: 0;
        margin-top: var(--spacing-sm);
        text-align: center;
    }
    .map-link--heart {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem 0.5rem;
    }
    .map-link-heart {
        opacity: 0.28;
    }
    .map-link--heart::before,
    .map-link--heart::after {
        margin: 0;
    }
}

/* Обёртка карусели фото зала — скроллбар не показывать */
.hall-carousel-wrap {
    margin-top: var(--spacing-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hall-carousel-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Заглушка под фото зала / контейнер карусели */
.hall-photo-placeholder {
    display: block;
    margin-top: 0;
    min-height: 320px;
    border-radius: 12px;
    border: 2px dashed rgba(44, 44, 44, 0.35);
    background-color: rgba(255, 255, 255, 0.6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.hall-photo-placeholder--has-image {
    border-style: solid;
    border-color: rgba(44, 44, 44, 0.2);
}

/* Карусель: дорожка и слайды */
.hall-carousel-track--hidden {
    display: none;
}

.hall-carousel-nav-hidden {
    display: none !important;
}

.hall-carousel .hall-carousel-track {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    transition: transform 0.35s ease-out;
}

.hall-carousel-slide {
    width: 100%;
    height: 100%;
    min-height: 320px;
    position: relative;
    flex-shrink: 0;
}

.hall-carousel-slide img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: grayscale(100%);
}

/* Кнопки prev/next */
.hall-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid rgba(44, 44, 44, 0.5);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-black);
    transition: background 0.2s, border-color 0.2s;
}

.hall-carousel-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-black);
}

.hall-carousel-prev { left: var(--spacing-sm); }
.hall-carousel-prev::before { content: '‹'; }
.hall-carousel-next { right: var(--spacing-sm); }
.hall-carousel-next::before { content: '›'; }

/* Точки (индикаторы) */
.hall-carousel-dots {
    position: absolute;
    bottom: var(--spacing-sm);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}

.hall-carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: 2px solid rgba(44, 44, 44, 0.5);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}

.hall-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.9);
}

.hall-carousel-dot--active {
    background: var(--color-black);
    border-color: var(--color-black);
}

/* Увеличение размера кнопок и точек карусели для touch-устройств */
@media (max-width: 768px) {
    .hall-carousel-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.4rem;
    }
    
    .hall-carousel-dot {
        width: 0.65rem;
        height: 0.65rem;
        min-width: 0.65rem;
        min-height: 0.65rem;
    }
}

@media (max-width: 480px) {
    .hall-carousel-btn {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    .hall-carousel-dot {
        width: 0.75rem;
        height: 0.75rem;
        min-width: 0.75rem;
        min-height: 0.75rem;
    }
}

@media (max-width: 360px) {
    .hall-carousel-btn {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 44px;
        min-height: 44px;
    }
}

.hall-photo-placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-text);
    font-size: var(--fs-hall-placeholder);
    color: var(--color-gray);
    pointer-events: none;
}

/* Секция карты: адрес и ссылка по центру страницы */
.map-section .container {
    text-align: center;
}
.map-link-wrap {
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}
.map-link-wrap .map-link {
    margin-left: 0;
    margin-right: 0;
}

.map-link {
    display: inline-block;
    font-size: var(--fs-map-link);
    color: var(--color-black);
    text-decoration: underline;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.wishes-button-wrap {
    text-align: center;
    margin: 0.75rem 0 0.5rem 0;
}

/* Общий альбом (ссылка на Облако Mail) — рукописный/меловой шрифт */
.album-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
    font-family: var(--font-text);
}

.album-section .section-title,
.album-section .album-text,
.album-section .album-telegram-hint,
.album-section .album-link-fallback,
.album-section .album-button {
    font-family: var(--font-text);
}

.album-text {
    font-size: clamp(var(--fs-album-text), 2vw, 1.5rem);
    line-height: 1.9;
    color: var(--color-black);
    max-width: 700px;
    margin: 0 auto var(--spacing-md);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.album-button-wrap {
    text-align: center;
    margin: var(--spacing-md) 0;
}
.album-telegram-hint {
    font-size: 0.9rem;
    color: var(--color-dark);
    font-weight: 600;
    margin: var(--spacing-sm) auto 0;
    max-width: 320px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}
.album-link-fallback {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: underline;
    margin-top: 0.25rem;
    word-break: break-all;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.album-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--fs-album-button);
    font-family: var(--font-text);
    font-weight: 600;
    color: var(--color-dark);
    background: linear-gradient(135deg, rgba(232, 212, 212, 0.95) 0%, rgba(248, 232, 232, 0.95) 100%);
    border: 2px solid var(--color-rose-dark);
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    min-height: 44px;
    touch-action: manipulation;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

.album-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

@media (max-width: 768px) {
    .album-button {
        min-height: 48px;
        padding: 14px 28px;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.map-description {
    text-align: center;
    font-size: clamp(var(--fs-map-description), 1.8vw, 1.25rem);
    color: var(--color-black);
    letter-spacing: 0.5px;
    line-height: 1.9;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
    margin-bottom: var(--spacing-md);
}

.address {
    text-align: center;
    font-size: clamp(var(--fs-address), 1.6vw, 1.2rem);
    color: var(--color-black);
    margin: var(--spacing-xs) 0 0 0;
    font-family: var(--font-text);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.address p {
    /* Убираем “пустоту” между адресом и ссылкой */
    margin: 0;
    line-height: 1.35;
}


/* Программа */
.program-section {
    padding: var(--spacing-sm) 0;
    position: relative;
    overflow: visible;
}

/* Первый блок с фото в программе — ближе к предыдущей секции (карта/ссылка) */
.program-section .inline-photos-container:first-child {
    margin-top: var(--spacing-sm);
}

/* ЕВ: программа — слева по центру, справа по центру */
.program-section::before {
    top: 40%;
    left: 1.5rem;
    transform: rotate(-20deg);
}
.program-section::after {
    top: 60%;
    right: 1.5rem;
    transform: rotate(20deg);
}

@media (max-width: 768px) {
    .program-section {
        padding: var(--spacing-xs) 0;
    }
}

@media (max-width: 480px) {
    .program-section {
        padding: 0.25rem 0;
    }
}

.program-list {
    display: grid;
    gap: 0.35rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .program-list {
        gap: 0.25rem;
        padding: 0 var(--spacing-xs);
    }
}

.program-item {
    padding: 0.5rem var(--spacing-sm);
    border-radius: 6px;
    margin-bottom: 0;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.program-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 0;
}

.program-item > * {
    position: relative;
    z-index: 1;
}

.program-title {
    font-family: var(--font-text);
    font-size: clamp(var(--fs-program-title), 2.4vw, 2rem);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.08rem;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.program-time {
    font-size: clamp(var(--fs-program-time), 1.9vw, 1.6rem);
    color: var(--color-black);
    margin-bottom: 0.1rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.program-text {
    font-size: clamp(var(--fs-program-text), 1.8vw, 1.45rem);
    color: var(--color-black);
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.program-text--todo {
    color: #8a1f1f;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.55);
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    border: 2px dashed rgba(212, 175, 55, 0.7);
    display: inline-block;
}

.content-todo {
    margin-top: 0.35rem;
    font-weight: 700;
    color: #8a1f1f;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    border: 2px dashed rgba(212, 175, 55, 0.7);
    display: inline-block;
}

/* Пожелания */
.wishes-section {
    padding: var(--spacing-md) 0 var(--spacing-sm) 0;
    text-align: center;
    position: relative;
}

/* ЕВ: пожелания — сверху центр, снизу центр */
.wishes-section::before {
    top: 1rem;
    left: 40%;
    transform: rotate(-8deg);
}
.wishes-section::after {
    bottom: 1rem;
    left: 60%;
    transform: rotate(8deg);
}

@media (max-width: 768px) {
    .wishes-section {
        padding: var(--spacing-sm) 0 var(--spacing-xs) 0;
    }
}

@media (max-width: 480px) {
    .wishes-section {
        padding: var(--spacing-xs) 0 0.5rem 0;
    }
}

.wishes-button {
    background: linear-gradient(135deg, 
        rgba(232, 212, 212, 0.8) 0%, 
        rgba(248, 232, 232, 0.8) 100%);
    color: var(--color-black);
    border: 2px solid #e8d4d4;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.1rem;
    font-family: var(--font-text);
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    min-height: 44px;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wishes-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

/* Модальное окно пожеланий — полупрозрачный тёмный фон для читаемости */
.wishes-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s;
    overflow: hidden;
}

.wishes-popup.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
}

.wishes-content {
    background-color: rgba(255, 253, 249, 0.95);
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    padding-top: 2.5rem;
    border-radius: 12px;
    border: 2px solid var(--color-rose);
    max-width: min(600px, 90vw);
    width: 100%;
    position: relative;
    z-index: 1;
    max-height: 90vh;
    min-height: 240px;
    animation: slideUp 0.3s;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wishes-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Кнопка закрыть — в стиле сайта */
.close-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.875rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-black);
    background: transparent;
    border: 2px solid var(--color-rose);
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    box-shadow: none;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
    border-color: #000;
}

.wishes-list {
    margin-top: 0.75rem;
    padding: 0;
    padding-right: 0.2rem;
    column-count: 2;
    column-gap: 0.875rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 4rem);
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wishes-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.wish-item {
    break-inside: avoid;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(255, 253, 249, 0.6);
    border: 1px solid var(--color-rose);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wish-item:hover {
    background: rgba(255, 253, 249, 0.85);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.12);
    transform: translateY(-2px);
}

.wish-title {
    font-size: clamp(var(--fs-wish-title), 1.6vw, var(--fs-wish-title-max));
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 0.4rem;
    font-family: var(--font-title);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.wish-item p {
    font-size: clamp(var(--fs-wish-p), 1.2vw, var(--fs-wish-p-max));
    line-height: 1.45;
    color: var(--color-text-light);
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

@media (max-width: 768px) {
    .wishes-list {
        column-count: 1;
        column-gap: 0;
    }
}

/* Форма RSVP */
.rsvp-section {
    padding: var(--spacing-lg) 0;
    position: relative;
}

/* ЕВ: форма — слева снизу, справа сверху */
.rsvp-section::before {
    bottom: 2rem;
    left: 20%;
    transform: rotate(-15deg);
}
.rsvp-section::after {
    top: 2rem;
    right: 20%;
    transform: rotate(15deg);
}

@media (max-width: 768px) {
    .rsvp-section {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    .rsvp-section {
        padding: var(--spacing-sm) 0;
    }
}

.rsvp-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.75rem;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Внутри анкеты возвращаем локальные базовые отступы, как были изначально */
    --spacing-xs: 0.35rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.25rem;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
    font-size: var(--fs-form-label);
}

.form-hint {
    font-size: 0.88rem;
    color: var(--color-dark);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-bottom: var(--spacing-xs);
    opacity: 1;
}

/* Подсказка ближе к пункту (напитки, горячее, посещаемость) */
.form-hint--tight {
    margin-top: 0.2rem;
    margin-bottom: 0.35rem;
}

/* Блок «Мы будем (не один)» + подсказки — комментарии сразу под пунктом */
.radio-option-with-hints {
    margin-bottom: 0.5rem;
}
.radio-option-with-hints .form-hint {
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
}
.radio-option-with-hints .form-hint:last-child {
    margin-bottom: 0;
}

/* Уведомления о незаполненных полях — в стиле сайта */
.field-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--fs-form-hint);
    font-family: var(--font-text);
    color: var(--color-rose-dark);
    font-weight: 500;
    min-height: 1.2em;
}

.form-group.has-error input[type="text"],
.form-group.has-error input[type="tel"] {
    border-color: var(--color-rose-dark);
}

.form-group input[type="text"],
.form-group input[type="tel"] {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-rose);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-text);
    background-color: var(--color-white);
    transition: all 0.3s ease;
}

/* Размеры полей ввода в анкете фиксированы, чтобы не раздувались от глобальных spacing-* */
.rsvp-form .form-group input[type="text"],
.rsvp-form .form-group input[type="tel"] {
    padding: 0.75rem 1rem !important;
    font-size: 1rem;
}

.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus {
    outline: none;
    border-color: var(--color-pink);
    box-shadow: 0 0 0 3px rgba(232, 212, 212, 0.3);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 4px;
    transition: background-color 0.2s ease;
    min-height: 44px;
    touch-action: manipulation;
}

.radio-label:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.radio-label input[type="radio"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-label input[type="radio"] + span::before {
    content: '♡';
    display: inline-block;
    font-size: 1.5rem;
    color: var(--color-rose);
    margin-right: var(--spacing-xs);
    transition: all 0.3s ease;
    line-height: 1;
}

.radio-label input[type="radio"]:checked + span::before {
    content: '♥';
    color: #d32f2f;
    transform: scale(1.2);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 4px;
    transition: background-color 0.2s ease;
    position: relative;
    min-height: 44px;
    touch-action: manipulation;
}

.checkbox-label:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.checkbox-label input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-label input[type="checkbox"] + span::before {
    content: '♡';
    display: inline-block;
    font-size: 1.5rem;
    color: var(--color-rose);
    margin-right: var(--spacing-xs);
    transition: all 0.3s ease;
    line-height: 1;
}

.checkbox-label input[type="checkbox"]:checked + span::before {
    content: '♥';
    color: #d32f2f;
    transform: scale(1.2);
}

.checkbox-label span {
    display: flex;
    align-items: center;
}

/* Гарантия: все чекбоксы в RSVP форме — сердечки (даже если где-то забыли класс) */
.rsvp-form input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rsvp-form input[type="checkbox"] + span::before {
    content: '♡';
    display: inline-block;
    font-size: 1.5rem;
    color: var(--color-rose);
    margin-right: var(--spacing-xs);
    transition: all 0.3s ease;
    line-height: 1;
}

.rsvp-form input[type="checkbox"]:checked + span::before {
    content: '♥';
    color: #d32f2f;
    transform: scale(1.2);
}

/* Чекбоксы в форме дополнительных гостей — такие же сердечки, как у основного гостя */
.rsvp-form .guest-item .checkbox-label input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.rsvp-form .guest-item .checkbox-label input[type="checkbox"] + span::before {
    content: '♡';
    display: inline-block;
    font-size: 1.5rem;
    color: var(--color-rose);
    margin-right: var(--spacing-xs);
    transition: all 0.3s ease;
    line-height: 1;
}
.rsvp-form .guest-item .checkbox-label input[type="checkbox"]:checked + span::before {
    content: '♥';
    color: #d32f2f;
    transform: scale(1.2);
}
.rsvp-form .guest-item .checkbox-label span {
    display: flex;
    align-items: center;
}

.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, 
        rgba(232, 212, 212, 0.8) 0%, 
        rgba(248, 232, 232, 0.8) 100%);
    color: var(--color-black);
    border: 2px solid #e8d4d4;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--fs-submit-btn);
    font-family: var(--font-text);
    font-weight: 500;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
    margin-top: var(--spacing-md);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    /* Улучшенная поддержка мобильных устройств */
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    tap-highlight-color: rgba(212, 175, 55, 0.3);
    touch-action: manipulation;
    min-height: 48px; /* Минимальный размер для удобного нажатия на мобильных */
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

/* Дополнительные гости */
.guest-item {
    background: rgba(255, 255, 255, 0.6);
    padding: var(--spacing-md);
    border-radius: 12px;
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--color-rose);
}

.guest-item-title {
    font-size: var(--fs-guest-item-title);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.add-guest-btn {
    background: linear-gradient(135deg, 
        rgba(232, 212, 212, 0.8) 0%, 
        rgba(248, 232, 232, 0.8) 100%);
    color: var(--color-black);
    border: 2px solid var(--color-rose);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--fs-add-guest-btn);
    font-family: var(--font-text);
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
    margin-top: var(--spacing-sm);
    /* Улучшенная поддержка мобильных устройств */
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    tap-highlight-color: rgba(212, 175, 55, 0.3);
    touch-action: manipulation;
    min-height: 44px; /* Минимальный размер для удобного нажатия на мобильных */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Скрываем блок дополнительных гостей по умолчанию (вместо inline-style) */
#additional-guests-group {
    display: none;
}

/* Порядок: формы гостей сверху, кнопка «Добавить ещё гостя» ниже */
#additional-guests-group[style*="block"] {
    display: flex !important;
    flex-direction: column;
}
#additional-guests-list {
    margin-top: var(--spacing-sm);
}
#add-guest-btn {
    margin-top: var(--spacing-md);
}

.add-guest-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

.remove-guest-btn {
    background: rgba(200, 50, 50, 0.8);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--fs-remove-guest);
    font-family: var(--font-text);
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
    margin-top: var(--spacing-sm);
    /* Улучшенная поддержка мобильных устройств */
    -webkit-tap-highlight-color: rgba(200, 50, 50, 0.5);
    tap-highlight-color: rgba(200, 50, 50, 0.5);
    touch-action: manipulation;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.remove-guest-btn:hover {
    background: rgba(200, 50, 50, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 50, 50, 0.3);
}

/* Диалог «Спасибо за ответ» — в стиле страницы (светлый фон, розовая рамка) */
.rsvp-success-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100001;
    background-color: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    padding: max(var(--spacing-md), env(safe-area-inset-top, 0)) max(var(--spacing-md), env(safe-area-inset-right, 0)) max(var(--spacing-md), env(safe-area-inset-bottom, 0)) max(var(--spacing-md), env(safe-area-inset-left, 0));
    animation: fadeIn 0.3s;
}

.rsvp-success-popup.active {
    display: flex;
}

.rsvp-success-content {
    background-color: rgba(255, 253, 249, 0.95);
    color: var(--color-black);
    font-family: var(--font-text);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 2px solid var(--color-rose);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    max-width: min(280px, 90vw);
    text-align: center;
    animation: slideUp 0.3s ease;
}

.rsvp-success-text {
    font-size: var(--fs-rsvp-success);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.rsvp-success-close {
    background: linear-gradient(135deg,
        rgba(232, 212, 212, 0.9) 0%,
        rgba(248, 232, 232, 0.9) 100%);
    color: var(--color-black);
    border: 2px solid var(--color-rose);
    padding: 0.5rem 1.25rem;
    font-size: var(--fs-rsvp-success-close);
    font-family: var(--font-text);
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    tap-highlight-color: rgba(212, 175, 55, 0.3);
    touch-action: manipulation;
    min-height: 40px;
}

.rsvp-success-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

/* Всплывающее окно: список незаполненных полей — в стиле сайта */
.rsvp-validation-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100002;
    background-color: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    padding: max(var(--spacing-md), env(safe-area-inset-top, 0)) max(var(--spacing-md), env(safe-area-inset-right, 0)) max(var(--spacing-md), env(safe-area-inset-bottom, 0)) max(var(--spacing-md), env(safe-area-inset-left, 0));
    animation: fadeIn 0.3s;
}

.rsvp-validation-popup.active {
    display: flex;
}

.rsvp-validation-content {
    background-color: rgba(255, 253, 249, 0.95);
    color: var(--color-black);
    font-family: var(--font-text);
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--color-rose);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    max-width: min(260px, 88vw);
    text-align: center;
    animation: slideUp 0.3s ease;
}

.rsvp-validation-title {
    font-size: var(--fs-rsvp-validation-title);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: var(--font-title);
    color: var(--color-black);
}

.rsvp-validation-list {
    text-align: left;
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
}

.rsvp-validation-list li {
    padding: 0.2rem 0;
    padding-left: 0.875rem;
    position: relative;
    font-size: var(--fs-form-label);
    line-height: 1.4;
}

.rsvp-validation-list li::before {
    content: '•';
    color: var(--color-gold);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.rsvp-validation-close {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 2px solid var(--color-rose);
    padding: 0.45rem 1rem;
    font-size: var(--fs-rsvp-validation-close);
    font-family: var(--font-text);
    cursor: pointer;
    border-radius: 18px;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    tap-highlight-color: rgba(212, 175, 55, 0.3);
    touch-action: manipulation;
    min-height: 38px;
}

.rsvp-validation-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
}

/* Контакты */
.contacts-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

/* ЕВ: контакты — по центру сверху и снизу */
.contacts-section::before {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
}
.contacts-section::after {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(6deg);
}

@media (max-width: 768px) {
    .contacts-section {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    .contacts-section {
        padding: var(--spacing-sm) 0;
    }
}

.contacts-text {
    font-size: clamp(var(--fs-contacts-text), 1.8vw, 1.25rem);
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.5px;
    line-height: 1.9;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.contact-info {
    margin: var(--spacing-md) 0;
}

.organizer-name {
    font-size: clamp(var(--fs-organizer-name), 1.6vw, 1.25rem);
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.organizer-phone,
.organizer-telegram {
    font-size: 1.1rem;
    color: var(--color-black);
    margin: var(--spacing-xs) 0;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 2px rgba(255, 255, 255, 0.28);
}

.organizer-phone a,
.organizer-telegram a {
    color: var(--color-black);
    text-decoration: none;
}

.organizer-phone a:hover,
.organizer-telegram a:hover {
    text-decoration: underline;
}

.hidden {
    display: none;
}

.contacts-email {
    font-size: 1.1rem;
    color: var(--color-gray);
    margin-top: var(--spacing-md);
}

.contacts-email a {
    color: var(--color-black);
    text-decoration: none;
    font-weight: 500;
}

.contacts-email a:hover {
    text-decoration: underline;
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Адаптивность: телефоны ≤768px, маленькие ≤480px/360px/320px; планшеты 769–1024px; десктоп 1025px+, большие 1200px+, ultrawide 1920px+ */
@media (max-width: 768px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100%;
    }
    
    .hero {
        min-height: auto;
        padding: var(--spacing-md) var(--spacing-sm);
        padding-top: 3vh;
        padding-bottom: 3vh;
    }
    
    .title {
        font-size: 2.6rem;
        letter-spacing: 1.5px;
        margin-bottom: var(--spacing-xs);
        line-height: 1.3;
    }
    
    .monogram {
        font-size: 2.6rem;
        width: auto;
        height: auto;
        letter-spacing: 1px;
        margin: var(--spacing-xs) auto;
    }
    
    .photos-gallery {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        margin: var(--spacing-md) 0;
        padding: 0;
        max-width: 100%;
    }
    
    .gallery-photo {
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 8px;
        border: 2px solid var(--color-rose);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .greeting {
        font-size: 1.1rem;
        margin: var(--spacing-xs) 0;
        padding: 0 var(--spacing-xs);
    }
    
    .announcement {
        font-size: 0.95rem;
        margin: var(--spacing-xs) 0;
        padding: 0 var(--spacing-xs);
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-sm);
        padding: 0 var(--spacing-xs);
        line-height: 1.3;
    }
    
    .decorative-divider {
        font-size: 1rem;
        margin: var(--spacing-sm) 0;
        letter-spacing: 0.2rem;
    }
    
    .countdown {
        gap: 0.35rem;
        padding: 0 var(--spacing-xs);
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .countdown-item {
        min-width: 0;
        padding: 0.45rem 0.35rem;
        flex: 1 1 0;
        max-width: none;
    }
    
    .countdown-number {
        font-size: 1.65rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
    }
    
    .invitation-text {
        font-size: 1.1rem;
        padding: 0 var(--spacing-sm);
        line-height: 1.7;
    }
    
    .wishes-section .invitation-text {
        font-size: 1.22rem;
    }
    
    .hall-photo-placeholder {
        min-height: 260px;
        margin: var(--spacing-md) var(--spacing-xs) 0;
    }
    
    .program-item {
        padding: 0.35rem var(--spacing-xs);
        margin-bottom: 0;
        min-height: 0;
    }
    
    .program-title {
        font-size: 1.35rem;
        margin-bottom: 0.05rem;
    }
    
    .program-time {
        font-size: 1.28rem;
        margin-bottom: 0.05rem;
    }
    
    .program-text {
        font-size: 1.06rem;
        line-height: 1.28;
    }
    
    .rsvp-form {
        padding: 1.25rem;
        margin: 0 var(--spacing-sm);
        width: calc(100% - 2 * var(--spacing-sm));
        box-sizing: border-box;
    }
    
    .form-group {
        margin-bottom: var(--spacing-md);
    }
    
    .form-group label {
        font-size: 1rem;
    }
    
    .form-group input[type="text"] {
        width: 100%;
        box-sizing: border-box;
    }
    
    .submit-btn {
        font-size: 1.1rem;
        padding: var(--spacing-sm);
        width: 100%;
        min-height: 48px;
    }
    
    .add-guest-btn {
        min-height: 44px;
        font-size: 0.95rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .remove-guest-btn {
        min-height: 40px;
        font-size: 0.85rem;
    }
    
    /* Улучшение для формы на мобильных */
    .form-group input[type="text"],
    .form-group input[type="radio"],
    .form-group input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
    }
    
    .radio-label,
    .checkbox-label {
        min-height: 44px;
        padding: var(--spacing-sm);
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    .music-button,
    .map-button,
    .wishes-button {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        width: auto;
        max-width: 90%;
    }
    
    .inline-photos-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        margin: var(--spacing-md) 0;
        padding: 0;
        max-width: 100%;
    }
    
    .inline-photos-container .inline-photo {
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 8px;
        border: 2px solid var(--color-rose);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin: 0;
    }
    
    .dresscode-content {
        padding: var(--spacing-sm) 0.5rem;
    }
    
    .dresscode-text,
    .dresscode-colors {
        padding: 0;
    }
    
    .address {
        padding: 0 var(--spacing-xs);
    }
    
    .contacts-text {
        padding: 0 var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100%;
    }
    
    .hero {
        padding: var(--spacing-sm) var(--spacing-xs);
        padding-top: 2vh;
        padding-bottom: 2vh;
    }
    
    .title {
        font-size: 2.2rem;
        letter-spacing: 1px;
        line-height: 1.2;
        margin-bottom: var(--spacing-xs);
    }
    
    .monogram {
        font-size: 2.3rem;
        width: auto;
        height: auto;
        letter-spacing: 1px;
        margin: var(--spacing-xs) auto;
    }
    
    .photos-gallery {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        padding: 0;
        max-width: 100%;
    }
    
    .gallery-photo {
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 8px;
        border: 2px solid var(--color-rose);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .greeting {
        font-size: 1.1rem;
    }
    
    .announcement {
        font-size: 0.95rem;
    }
    
    .section-title {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-xs);
        line-height: 1.2;
    }
    
    .decorative-divider {
        font-size: 0.9rem;
        margin: var(--spacing-xs) 0;
        letter-spacing: 0.15rem;
    }
    
    .countdown {
        gap: 0.25rem;
        padding: 0 var(--spacing-xs);
        justify-content: center;
    }
    
    .countdown-item {
        min-width: 55px;
        padding: 0.4rem 0.3rem;
        flex: 1 1 calc(50% - 0.125rem);
        max-width: calc(50% - 0.125rem);
    }
    
    .countdown-number {
        font-size: 1.6rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
        margin-top: 0.15rem;
    }
    
    .invitation-text {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 0 var(--spacing-xs);
        margin: var(--spacing-xs) 0;
    }
    
    .wishes-section .invitation-text {
        font-size: 1.08rem;
    }
    
    .hall-photo-placeholder {
        min-height: 220px;
        margin: var(--spacing-md) var(--spacing-xs) 0;
    }
    
    .map-button {
        width: 90%;
        font-size: 0.95rem;
        max-width: 90%;
    }
    
    .address {
        font-size: 1rem;
        padding: 0 var(--spacing-xs);
    }
    
    .address p {
        margin: 0.2rem 0;
    }
    
    .program-item {
        padding: 0.3rem var(--spacing-xs);
        min-height: 0;
        margin-bottom: 0;
    }
    
    .program-title {
        font-size: 1.22rem;
        margin-bottom: 0.04rem;
    }
    
    .program-time {
        font-size: 1.15rem;
        margin-bottom: 0.04rem;
    }
    
    .program-text {
        font-size: 1rem;
        line-height: 1.28;
    }
    
    .rsvp-form {
        padding: 0.75rem;
        margin: 0;
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-group {
        margin-bottom: var(--spacing-sm);
    }
    
    .form-group label {
        font-size: 0.95rem;
    }
    
    .form-group input[type="text"] {
        font-size: 0.95rem;
        padding: var(--spacing-xs);
        width: 100%;
        box-sizing: border-box;
    }
    
    .radio-label,
    .checkbox-label {
        font-size: 0.9rem;
        padding: var(--spacing-xs);
    }
    
    .submit-btn {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        width: 100%;
        min-height: 44px;
    }
    
    .add-guest-btn {
        min-height: 44px;
        font-size: 0.9rem;
    }
    
    .remove-guest-btn {
        min-height: 40px;
        font-size: 0.8rem;
    }
    
    .radio-label,
    .checkbox-label {
        min-height: 44px;
        padding: var(--spacing-xs);
    }
    
    .music-button,
    .wishes-button {
        font-size: 0.95rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        width: auto;
        max-width: 90%;
    }
    
    .wishes-content {
        padding: 1.25rem;
        width: 95%;
        max-width: 95%;
        margin: 0 auto;
        max-height: 98vh;
        min-height: 200px;
    }
    
    .wish-item {
        padding: 0.35rem;
        margin-bottom: 0.75rem;
    }
    
    .wish-icon {
        font-size: 1.5rem;
    }
    
    .wish-item p {
        font-size: 0.9rem;
    }
    
    .close-btn {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem;
        top: var(--spacing-xs);
        right: var(--spacing-xs);
    }
    
    .wishes-list {
        max-height: calc(98vh - 4rem);
        padding-right: 0.15rem;
    }
    
    .contacts-text {
        font-size: 1rem;
        padding: 0 var(--spacing-xs);
    }
    
    .organizer-name {
        font-size: 1.1rem;
    }
    
    .organizer-phone,
    .organizer-telegram,
    .contacts-email {
        font-size: 0.95rem;
    }
    
    .inline-photos-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        padding: 0;
        max-width: 100%;
    }
    
    .inline-photos-container .inline-photo {
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 8px;
        border: 2px solid var(--color-rose);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin: 0;
    }
    
    .dresscode-text,
    .dresscode-colors {
        padding: 0;
    }
}

/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 360px) {
    .container {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .monogram {
        font-size: 2.1rem;
        width: auto;
        height: auto;
    }
    
    .countdown {
        gap: 0.2rem;
    }
    
    .countdown-item {
        min-width: 55px;
        padding: 0.4rem;
        flex: 1 1 calc(50% - 0.1rem);
        max-width: calc(50% - 0.1rem);
    }
    
    .countdown-number {
        font-size: 1.6rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .photos-gallery {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        max-width: 100%;
    }
    
    .gallery-photo {
        border-radius: 8px;
        border: 2px solid var(--color-rose);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .inline-photos-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        max-width: 100%;
    }
    
    .inline-photos-container .inline-photo {
        border-radius: 8px;
        border: 2px solid var(--color-rose);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin: 0;
    }
    
    /* Оптимизация модального окна для очень маленьких экранов */
    .wishes-popup.active {
        padding: 0.35rem;
    }
    
    .wishes-content {
        width: 100%;
        max-width: 100%;
        padding: 0.75rem;
        padding-top: 2.5rem;
        border-radius: 12px;
        max-height: 98vh;
        min-height: 180px;
    }
    
    .close-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.4rem;
        top: 0.35rem;
        right: 0.35rem;
    }
    
    .wishes-list {
        column-count: 1;
        max-height: calc(98vh - 3.5rem);
        padding-right: 0;
    }
    
    .wish-item {
        padding: 0.35rem;
        margin-bottom: 0.35rem;
    }
    
    .wish-title {
        font-size: 0.95rem;
    }
    
    .wish-item p {
        font-size: 0.85rem;
    }
}