/* ═══════════════════════════════════════════════════════════════════════════════
   RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

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

html, body {
    width: 100%;
    overflow-x: hidden;
    background-image: url('../assets/images/pattern.webp');
    background-repeat: repeat;
    background-size: 612px 612px;
}

body.site-locked {
    overflow: hidden;
}

/* Allow menu to overflow on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: visible;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FONTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'GalatheaTwo';
    src: url('../assets/fonts/Galathea Two.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - DESKTOP
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* LOGIN CONTAINER */
    --login-container-width:  772.8px;
    --login-container-height: 579.6px;

    /* INPUT FIELD SVG */
    --input-svg-width:   676.2px;
    --input-svg-height:  200.56px;
    --input-svg-top:     77.28px;
    --input-svg-left:    48.3px;

    /* INPUT TEXT */
    --input-text-width:  385.96px;
    --input-text-height: 44px;
    --input-text-top:    78px;
    --input-text-left:   145px;
    --input-font-size:   2.3184rem;
    --label-font-size:   3.078rem;

    /* BUTTON SVG */
    --button-svg-width:  386.4px;
    --button-svg-height: 115.92px;
    --button-svg-top:    295.8px;
    --button-svg-left:   193.2px;

    /* BUTTON TEXT */
    --button-text-top:   38px;
    --button-text-left:  0px;
    --button-font-size:  2.1252rem;

    /* ERROR MESSAGE */
    --error-top:         444.36px;
    --error-left:        0px;
    --error-font-size:   2.1782rem;

    /* GALLERY BUTTONS */
    --gallery-prev-top:    49.8%;
    --gallery-prev-left:   11.2%;
    --gallery-prev-width:  11.9%;
    --gallery-next-top:    49.8%;
    --gallery-next-left:   76.1%;
    --gallery-next-width:  12%;

    /* PINTEREST BOARD */
    --pinterest-top: 73.2%;
    --pinterest-left: 29%;
    --pinterest-scale: 1.32;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PASSWORD SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */

.password-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/pattern.webp');
    background-repeat: repeat;
    background-size: 612px 612px;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.password-screen.is-hidden {
    display: none;
}

.password-screen__box {
    position: relative;
    width: var(--login-container-width);
    height: var(--login-container-height);
}

/* Password Input Field */

.password-screen__field {
    position: absolute;
    top:    var(--input-svg-top);
    left:   var(--input-svg-left);
    width:  var(--input-svg-width);
    height: var(--input-svg-height);
}

.password-screen__field::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width:  100%;
    height: 100%;
    background-image: url('../assets/images/login_field_frame.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.password-screen__input {
    position: absolute;
    top:    var(--input-text-top);
    left:   var(--input-text-left);
    width:  var(--input-text-width);
    height: var(--input-text-height);
    font-family: 'GalatheaTwo', serif;
    font-size: var(--input-font-size);
    color: #140f0d;
    border: none;
    outline: none;
    text-align: center;
    letter-spacing: 0.1em;
    z-index: 2;
    background: transparent;
}

.password-screen__fade {
    position: absolute;
    top:    calc(var(--input-text-top) - 6px);
    left:   calc(var(--input-text-left) - 103px);
    width:  calc(var(--input-text-width) + 210px);
    height: calc(var(--input-text-height) + 15px);
    border: none;
    outline: none;
    box-shadow: none;
    background-clip: padding-box;
    background: radial-gradient(
        ellipse 100% 100% at 50% 50%,
        rgb(242, 234, 220, 1) 0%,
        rgba(242, 234, 220, 0.55) 20%,
        rgba(242, 234, 220, 0.05) 50%,
        rgba(242, 234, 220, 0) 100%
    );
}

.password-screen__label {
    position: absolute;
    top:  calc(var(--input-text-top) + var(--input-text-height) / 2);
    left: calc(var(--input-text-left) + var(--input-text-width) / 2);
    transform: translate(-50%, -53%);
    font-family: 'GalatheaTwo', serif;
    font-size: calc(var(--label-font-size)*0.85);
    color: #4d3e35;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    z-index: 3;
}

.password-screen__input:not(:placeholder-shown) ~ .password-screen__label,
.password-screen__input:focus ~ .password-screen__label,
.password-screen__label.is-hidden {
    opacity: 0;
}

/* Error Message */

.password-screen__error {
    position: absolute;
    top:  calc(var(--input-text-top) + var(--input-text-height) / 2);
    left: calc(var(--input-text-left) + var(--input-text-width) / 2);
    transform: translate(-50%, -50%);
    font-family: 'GalatheaTwo', serif;
    font-size: calc(var(--input-font-size) * 1.1);
    color: #74463d;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    z-index: 4;
}

.password-screen__error.is-visible {
    opacity: 1;
}

/* Submit Button */

.password-screen__btn-wrapper {
    position: absolute;
    top:    var(--button-svg-top);
    left:   var(--button-svg-left);
    width:  var(--button-svg-width);
    height: var(--button-svg-height);
    cursor: pointer;
}

.password-screen__btn-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width:  100%;
    height: 100%;
    background-image: url('../assets/images/login_button.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.15s ease;
}

.password-screen__btn-wrapper:hover::before {
    opacity: 0.8;
}

.password-screen__btn {
    position: absolute;
    top:  var(--button-text-top);
    left: var(--button-text-left);
    width:  100%;
    height: auto;
    font-family: 'GalatheaTwo', serif;
    font-size: var(--button-font-size);
    color: #ece9e3;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    letter-spacing: 0.15em;
    text-align: center;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(57, 52, 45, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAVIGATION MENU
   ═══════════════════════════════════════════════════════════════════════════════ */

.menu {
    position: fixed;
    z-index: 1001;
    transform: translateY(-1.2px);
    --png-max-width:  1244px;
    --menu-width-pct: 15.7;
    --menu-left-pct:  76.8;
    --menu-top:       0px;
    top:  var(--menu-top);
    left: calc(50vw - min(100vw, var(--png-max-width)) / 2 + min(100vw, var(--png-max-width)) * var(--menu-left-pct) / 100);
    width: calc(min(100vw, var(--png-max-width)) * var(--menu-width-pct) / 100);
    pointer-events: none;
}

.menu__image,
.menu__buttons.is-open {
    pointer-events: all;
}

.menu__image {
    width: 100%;
    cursor: pointer;
}

.menu__image img {
    display: block;
    width: 100%;
}

.menu__buttons {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.menu__buttons.is-open {
    display: block;
    pointer-events: all;
}

.menu__btn {
    position: absolute;
    display: block;
    cursor: pointer;
}

.menu__btn--nachalo  { top:  2.2%; left: 14%; width: 70%; height: 8%; }
.menu__btn--myasto   { top: 11.5%; left: 14%; width: 70%; height: 8%; }
.menu__btn--programa { top: 21%;   left: 14%; width: 70%; height: 8%; }
.menu__btn--vprosnik { top: 30.3%; left: 14%; width: 70%; height: 8%; }
.menu__btn--toalet   { top: 39.7%; left: 14%; width: 70%; height: 8%; }
.menu__btn--galeriya { top: 49%;   left: 14%; width: 70%; height: 8%; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTIONS - SHARED LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.section__inner {
    position: relative;
    width: 100%;
    max-width: 1244px;
    aspect-ratio: 1037 / 4312;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 1 - HERO / MAP
   ═══════════════════════════════════════════════════════════════════════════════ */

#section-1 {
    background-color: transparent;
}

#section-1 .section__inner {
    background-image: url('../assets/images/portrait.webp');
}

.overlay {
    position: absolute;
}

.overlay iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.map-overlay {
    top:    57.08%;
    left:   25%;
    width:  50%;
    height: 8.25%;
    border-radius: 12.5px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 2 - QUESTIONNAIRE
   ═══════════════════════════════════════════════════════════════════════════════ */

.questionaire {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -1px;
}

.questionaire__inner {
    position: relative;
    width: 100%;
    max-width: 1244px;
    aspect-ratio: 1037 / 1297;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    background-image: url('../assets/images/questionaire.webp');
}

.questionaire-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Form Inputs */

.q-input {
    position: absolute;
    pointer-events: all;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'GalatheaTwo', serif;
    font-size: 1.4vw;
    color: #705143;
}

textarea.q-input {
    resize:     none;
    overflow-y: auto;
    line-height: 1.4;
    padding:    0;
    vertical-align: top;
}

.q-input--1 { top: 28.2%;  left: 25%; width: 50%; height: 3.6%; }
.q-input--2 { top: 38.45%; left: 25%; width: 50%; height: 10.3%; }
.q-input--3 { top: 55.8%;  left: 25%; width: 50%; height: 3.6%; }
.q-input--4 { top: 67.8%;  left: 25%; width: 50%; height: 3.6%; }
.q-input--5 { top: 79.45%; left: 25%; width: 50%; height: 3.6%; }

/* Submit Button */

.q-submit-wrapper {
    position: absolute;
    top:    87.7%;
    left:   22.6%;
    width:  55%;
    height: 5.6%;
    pointer-events: all;
}

.q-submit {
    position: absolute;
    top:    0;
    left:   0;
    width:  100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 2;
}

.q-submit-idle,
.q-submit-hover {
    position: absolute;
    top:    -4.4%;
    left:   -1.81%;
    width:  103.5%;
    aspect-ratio: 590 / 78;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;
}

.q-submit-idle {
    opacity: 1;
}

.q-submit-hover {
    opacity: 0;
}

@media (hover: hover) {
    .q-submit-wrapper:hover .q-submit-idle  { opacity: 0; }
    .q-submit-wrapper:hover .q-submit-hover { opacity: 1; }
}

.q-submit-wrapper.is-touched .q-submit-idle  { opacity: 0; }
.q-submit-wrapper.is-touched .q-submit-hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 3 - DRESS CODE
   ═══════════════════════════════════════════════════════════════════════════════ */

.dress-code {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -1.9%;
    z-index: 0;
}

.dress-code__inner {
    position: relative;
    width: 100%;
    max-width: 1244px;
    aspect-ratio: 1037 / 2267;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    background-image: url('../assets/images/dress-code.webp');
}

.pinterest-board-section {
    position: absolute;
    top: var(--pinterest-top);
    left: var(--pinterest-left);
    transform: scale(var(--pinterest-scale));
    transform-origin: top left;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 4 - GALLERY
   ═══════════════════════════════════════════════════════════════════════════════ */

.gallery {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -3%;
    z-index: 1;
}

.gallery__inner {
    position: relative;
    width: 100%;
    max-width: 1244px;
    aspect-ratio: 1037 / 900;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    background-image: url('../assets/images/gallery.webp');
}

.gallery__frame {
    position: absolute;
    top:    35.58%;
    left:   27.3%;
    width:  45.4%;
    height: 40.7%;
    overflow: hidden;
    border-radius: 27px;
    cursor: pointer;
}

.gallery__track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
    will-change: transform;
}

.gallery__track img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Navigation Buttons */

.gallery__btn {
    position: absolute;
    cursor: pointer;
    pointer-events: all;
    aspect-ratio: 1;
}

.gallery__btn-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.gallery__btn--prev {
    top:    var(--gallery-prev-top);
    left:   var(--gallery-prev-left);
    width:  var(--gallery-prev-width);
}

.gallery__btn--next {
    top:    var(--gallery-next-top);
    left:   var(--gallery-next-left);
    width:  var(--gallery-next-width);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GALLERY LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════════ */

.gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9998;
    justify-content: center;
    align-items: center;
}

.gallery-lightbox.is-visible {
    display: flex;
}

.gallery-lightbox__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.gallery-lightbox__img {
    max-width:  90vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.gallery-lightbox__close {
    position: absolute;
    top:   20px;
    right: 20px;
    width:  40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    font-family: sans-serif;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.gallery-lightbox__close:hover {
    opacity: 1;
}

/* Navigation */

.gallery-lightbox__navigation {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 80px;
    z-index: 3;
}

.gallery-lightbox__nav-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gallery-lightbox__nav-img--idle {
    opacity: 1;
}

/* Desktop: Show hover on :hover only (NOT on .is-touched) */
@media (hover: hover) {
    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--prev:hover) .gallery-lightbox__nav-img--idle {
        opacity: 0;
    }

    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--prev:hover) .gallery-lightbox__nav-img--hover-left {
        opacity: 1;
    }

    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--next:hover) .gallery-lightbox__nav-img--idle {
        opacity: 0;
    }

    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--next:hover) .gallery-lightbox__nav-img--hover-right {
        opacity: 1;
    }
}

/* Mobile/Touch: Show hover ONLY when actively touching (.is-touched) */
@media (hover: none) {
    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--prev.is-touched) .gallery-lightbox__nav-img--idle {
        opacity: 0;
    }

    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--prev.is-touched) .gallery-lightbox__nav-img--hover-left {
        opacity: 1;
    }

    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--next.is-touched) .gallery-lightbox__nav-img--idle {
        opacity: 0;
    }

    .gallery-lightbox__navigation:has(.gallery-lightbox__nav-btn--next.is-touched) .gallery-lightbox__nav-img--hover-right {
        opacity: 1;
    }
}

.gallery-lightbox__nav-btn {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    outline: none;
    z-index: 2;
}

.gallery-lightbox__nav-btn--prev {
    left: 0;
}

.gallery-lightbox__nav-btn--next {
    right: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUCCESS POPUP
   ═══════════════════════════════════════════════════════════════════════════════ */

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 16, 0, 0.73);
    backdrop-filter: blur(6px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popup-overlay.is-visible {
    display: flex;
}

.popup-overlay img {
    width: min(654px, 90vw);
    aspect-ratio: 654 / 490;
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLET & RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* TABLET SIZE (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* QUESTIONNAIRE - TABLET */
    .q-input {
        font-size: 2.5vw !important;
    }

    .q-input-error-message {
        font-size: 2.5vw !important;
    }
}

/* MOBILE & RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        /* LOGIN CONTAINER */
        --login-container-width:  320px;
        --login-container-height: 260px;

        /* INPUT FIELD SVG */
        --input-svg-width:   520px;
        --input-svg-height:  130px;
        --input-svg-top:     -10px;
        --input-svg-left:    -96px;

        /* INPUT TEXT */
        --input-text-width:  250px;
        --input-text-height: 28px;
        --input-text-top:    51px;
        --input-text-left:   135px;
        --input-font-size:   1rem;
        --label-font-size:   1.6758rem;

        /* BUTTON SVG */
        --button-svg-width:  200px;
        --button-svg-height: 100px;
        --button-svg-top:    125px;
        --button-svg-left:   60px;

        /* BUTTON TEXT */
        --button-text-top:   37.1px;
        --button-text-left:  3px;
        --button-font-size:  1.4rem;

        /* ERROR MESSAGE */
        --error-top:         195px;
        --error-left:        0px;
        --error-font-size:   1.254rem;

        /* GALLERY BUTTONS */
        --gallery-prev-top:    49.4%;
        --gallery-prev-left:   5.2%;
        --gallery-prev-width:  14%;
        --gallery-next-top:    49.4%;
        --gallery-next-left:   79.9%;
        --gallery-next-width:  14%;

        /* PINTEREST BOARD */
        --pinterest-top: 73.2%;
        --pinterest-left: 28%;
        --pinterest-scale: 1.5;
    }

    .password-screen__label {
        position: absolute;
        top:  calc(var(--input-text-top) + var(--input-text-height) / 2);
        left: calc(var(--input-text-left) + var(--input-text-width) / 2);
        transform: translate(-50%, -53%);
        font-family: 'GalatheaTwo', serif;
        font-size: calc(var(--label-font-size)*1);
        color: #4d3e35;
        opacity: 1;
        pointer-events: none;
        transition: opacity 0.15s ease;
        white-space: nowrap;
        z-index: 3;
    }

    .password-screen__error {
        position: absolute;
        top:  calc(var(--input-text-top) + var(--input-text-height) / 2);
        left: calc(var(--input-text-left) + var(--input-text-width) / 2);
        transform: translate(-50%, -50%);
        font-family: 'GalatheaTwo', serif;
        font-size: calc(var(--input-font-size) * 1.7);
        color: #74463d;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        white-space: nowrap;
        z-index: 4;
    }

    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    html {
        scroll-behavior: smooth;
    }

    #section-1 {
        margin-top: 0 !important;
        margin-bottom: 0;
    }

    /* SECTIONS - MOBILE LAYOUT */
    .section__inner {
        aspect-ratio: unset;
        padding-top: calc(4312 / 1037 * 114%);
        background-size: 114% 100%;
        background-position: center top;
    }

    .questionaire__inner {
        aspect-ratio: unset;
        padding-top: calc(1297 / 1037 * 114%);
        background-size: 114% 100%;
        background-position: center top;
        clip-path: none;
    }

    /* QUESTIONNAIRE - MOBILE */
    .q-input {
        font-size: 4vw !important;
    }

    .q-input-error-message {
        font-size: 4vw !important;
    }

    .q-input--1 { top: 28.4%;  left: 21.8%; width: 56.7%; height: 3.4%; }
    .q-input--2 { top: 38.6%;  left: 21.8%; width: 56.7%; height: 10.2%; }
    .q-input--3 { top: 55.85%; left: 21.8%; width: 56.7%; height: 3.4%; }
    .q-input--4 { top: 67.9%;  left: 21.8%; width: 56.7%; height: 3.4%; }
    .q-input--5 { top: 79.52%; left: 21.8%; width: 56.7%; height: 3.4%; }

    .q-submit-wrapper {
        top:    87.8%;
        left:   17.8%;
        width:  65%;
        height: 5.4%;
    }

    .q-submit-idle,
    .q-submit-hover {
        top:    -4.4%;
        left:   -0.4%;
        width:  100%;
    }

    /* DRESS CODE - MOBILE */
    .dress-code__inner {
        aspect-ratio: unset;
        padding-top: calc(2267 / 1037 * 114%);
        background-size: 114% 100%;
        background-position: center top;
    }

    /* GALLERY - MOBILE */
    .gallery__inner {
        aspect-ratio: unset;
        padding-top: calc(900 / 1037 * 114%);
        background-size: 114% 100%;
        background-position: center top;
    }

    .gallery__frame {
        top:    35.67%;
        left:   24.31%;
        width:  51.45%;
        height: 40.7%;
        border-radius: 19px;
        overflow: hidden;
    }

    /* MAP - MOBILE */
    .map-overlay {
        top:    57.1%;
        left:   21.514%;
        width:  56.8%;
        height: 8.22%;
        border-radius: 9px;
        overflow: hidden;
    }

    /* MENU - MOBILE */
    .menu {
        --menu-width-pct: 21;
        --menu-left-pct:  79.2;
        --menu-top:       0px;
    }

    .menu__btn--nachalo   { top:  2.7%; }
    .menu__btn--myasto    { top: 12.7%; }
    .menu__btn--programa  { top: 23.1%; }
    .menu__btn--vprosnik  { top: 33.3%; }
    .menu__btn--toalet    { top: 43.6%; }
    .menu__btn--galeriya  { top: 53.7%; }

    .menu__btn--nachalo,
    .menu__btn--myasto,
    .menu__btn--programa,
    .menu__btn--vprosnik,
    .menu__btn--toalet,
    .menu__btn--galeriya {
        left: 14.8%;
        width: 70%;
        height: 9%;
    }

    /* OVERLAPS - MOBILE */
    .questionaire { margin-top: 0px; }
    .dress-code   { margin-top: -1.6%; }
    .gallery      { margin-top: -3.4%; }

    /* LIGHTBOX - MOBILE */
    .gallery-lightbox__img {
        max-height: 70vh;
    }

    .gallery-lightbox__navigation {
        bottom: -90px;
        width: 300px;
        height: 60px;
    }

    .popup-overlay img {
        width: calc(100dvw - 40px);
        max-width: 654px;
        height: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXTRA SMALL SCREENS (< 400px width)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    :root {
        --login-container-width:  280px;
        --login-container-height: 220px;

        --input-svg-width:   440px;
        --input-svg-height:  95px;
        --input-svg-top:     25px;
        --input-svg-left:    -75px;

        --input-text-width:  186px;
        --input-text-height: 21px;
        --input-text-top:    37.2px;
        --input-text-left:   126px;
        --input-font-size:   0.9rem;
        --label-font-size:   1.254rem;

        --button-svg-width:  220px;
        --button-svg-height: 64px;
        --button-svg-top:    130px;
        --button-svg-left:   35px;

        --button-text-top:   23px;
        --button-text-left:  1px;
        --button-font-size:  1rem;

        --error-top:         165px;
        --error-left:        0px;
        --error-font-size:   0.9405rem;
    }

    .password-screen__label {
        position: absolute;
        top:  calc(var(--input-text-top) + var(--input-text-height) / 2.01);
        left: calc(var(--input-text-left) + var(--input-text-width) / 2);
        transform: translate(-50%, -53%);
        font-family: 'GalatheaTwo', serif;
        font-size: calc(var(--label-font-size)*1.08);
        color: #4d3e35;
        opacity: 1;
        pointer-events: none;
        transition: opacity 0.15s ease;
        white-space: nowrap;
        z-index: 3;
    }

    .password-screen__error {
        position: absolute;
        top:  calc(var(--input-text-top) + var(--input-text-height) / 2.1);
        left: calc(var(--input-text-left) + var(--input-text-width) / 2);
        transform: translate(-50%, -50%);
        font-family: 'GalatheaTwo', serif;
        font-size: calc(var(--input-font-size) * 1.50);
        color: #74463d;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        white-space: nowrap;
        z-index: 4;
    }
}

@media (max-height: 400px) {
    :root {
        --login-container-width:  280px;
        --login-container-height: 220px;

        --input-svg-width:   440px;
        --input-svg-height:  95px;
        --input-svg-top:     25px;
        --input-svg-left:    -75px;

        --input-text-width:  190px;
        --input-text-height: 21px;
        --input-text-top:    35.5px;
        --input-text-left:   124px;
        --input-font-size:   0.9rem;
        --label-font-size:   1.254rem;

        --button-svg-width:  220px;
        --button-svg-height: 64px;
        --button-svg-top:    130px;
        --button-svg-left:   35px;

        --button-text-top:   24px;
        --button-text-left:  0px;
        --button-font-size:  0.85rem;

        --error-top:         165px;
        --error-left:        0px;
        --error-font-size:   0.9405rem;
    }
}