/* Mobile version: stack boxes vertically */
@media (max-width: 1515px) {
    .map-additional {
        display: none !important;
    }
}

@media (max-width: 1426px) {
    /* ------------------ MAP -------------------- */
    .map-page-block {
        width: 90% !important;
    }
    /* ------------------ MAP -------------------- */

    /* --------------------- INTRODUCTION -------------------- */
    .introduction-page-block {
        padding: 0 60px 0 60px;
    }

    .button-blue {
        &.introduction {
            margin-left: 0;
        }
    }
    /* --------------------- INTRODUCTION -------------------- */

    /* ------------- FOOTER -------------- */
    .footer-gray {
        width: 100%;
        text-align: center;
        .text {
            text-align: right;
            flex: 0 0 90%;
            max-width: 90%;
            width: 90%;
        }
    }
    .footre-container {
        width: 100% !important;
    }
    .footer-container-logo {
        margin-left:60px;
    }
    .footer-container-text {
        width: 90%;
        margin: 0 60px 0 0;
        padding: 0;
        align-items: flex-start;
        text-align: left;
        flex-direction: column;
        gap: 30px !important; /* Menší mezera mezi bloky na mobilu */
    }
    /* ------------- FOOTER -------------- */

    /* ------------- MENU ---------------- */

    .menu-wrapper {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    }

    .menu-container-links {
        padding-right: 40px;
    }

    .menu-container-login {
        flex: 0 0 100%;
        padding-right: 40px;
        box-sizing: border-box;
    }
    /* ------------- MENU ---------------- */

    /* --------------------- TIMELINE -------------------- */
    .timeline-container {
        padding: 0 20px;
    }
    /* --------------------- TIMELINE -------------------- */

    /* ------------------ BENEFITS ---------------- */
    .benefits-page-block {
        width: 90% !important;
    }
    .benefits-page-footer-block {
        width: 90% !important;
    }
    .how-it-works-full-page-block {
        .whole-content {
            width: 90%;
        }
    }
    /* ------------------ BENEFITS ---------------- */
}

@media(max-width: 1260px) {
    /* ------------ HOW IT WORKS -------------- */
    .how-it-works-page-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-image: none;
        background-color: var(--color-light-orange);

        .hot-it-works-wrapper {
            width: 90%;
            height: 100%;
            box-sizing: border-box;

            .row {
                display: flex;
                flex-direction: column;
                width: 100%;
                box-sizing: border-box;
                min-height: 84px;
                .left-content,
                .right-content {
                    flex: 1 1 auto;
                    width: 100%;
                    box-sizing: border-box;
                }
                .left-content {
                    flex: none;
                    height: 350px;
                    background-size: cover;
                    background-position: center;
                    background-image: url("../images/photos/VOL02162-12ce54b1879bceb9188d9ad6673961bc.jpg");
                }
                .right-content {
                    margin-top:60px;
                }
                .content-wrapper {
                    padding: 0 !important;
                    .left {
                        width: 122px;
                        min-height: 84px;
                        flex-shrink: 0;
                        box-sizing: border-box;
                    }
                    .right {
                        flex: 1;
                        padding: 0 0 20px 0;
                        text-align: left;
                        min-height: 84px;
                        box-sizing: border-box;
                        &.bottom-border {
                            border-bottom: solid 4px var(--color-white);
                        }
                    }
                }
            }
        }
    }

    /* ------------ HOW IT WORKS -------------- */
}

@media (max-width: 1150px) {
    /* --------------------- INTRODUCTION -------------------- */
    .introduction-page-block {
        padding: 0 60px;
        flex-direction: column;
        align-items: center;
    }

    .intro-text,
    .intro-video {
        width: 100%;
    }

    .intro-video {
        height: auto;
    }

    .button-blue {
        &.introduction {
            margin-left: 12px;
        }
    }
    /* --------------------- INTRODUCTION -------------------- */

    /* ------------- TIMELINE -------------- */
    .reservation-step-gap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
        height: 82px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="3" height="1" fill="%23DFDFDF"/></svg>');
        background-repeat: repeat-x;
        background-position: center;
    }
    /* ------------- TIMELINE -------------- */


    /* ------------- FOOTER -------------- */
    .footer-container-logo {
        margin: 0 0 0 60px;
        padding: 0;
        text-align: left;
    }
    /* ------------- FOOTER -------------- */

    /* ------------- MENU ---------------- */
    .menu-container-links {
        display: none;
    }

    .menu-container-hamburger {
        cursor: pointer;
        margin-top: 36px;
        font-size: 32px;
        display: block;
        padding-right: 20px;
    }

    .mobile-menu-links {
        display: block;
        position: fixed;
        top: 140px;
        left: 0;
        width: 100%;

        height: calc(100vh - 140px); /* Změna z max-height na height */
        overflow: hidden; /* ovládá scroll wrapper, ne přímo tady */

        background-color: var(--color-white);
        z-index: 9999;
        padding: 0 20px;
        box-sizing: border-box;

        opacity: 0;
        pointer-events: none;
        visibility: hidden;

        transition: opacity 0.6s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .mobile-menu-links.open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .scroll-wrapper {
        height: 100%;
        overflow-y: auto;
    }

    .mobile-menu-links-item {
        text-align: left;
        font-family: Fieldwork, Geo Bold, serif;
        font-weight: 700;
        font-size: 16px;
        color: #302393;
    }

    .menu-container-login {
        display: none;
    }

    .mobile-container-links {
        flex: 1 1 auto;
        max-width: 1366px;
        min-width: 200px;
        padding: 24px 0 0 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 58px;
        .item {
            font-family: Fieldwork, Geo Bold, serif;
            font-weight: 700;
            font-size: 16px;
            color: #302393;
            padding: 0 0 15px 0;
            text-decoration: none !important;
            &.orange {
                color: var(--color-orange) !important;
            }
            &:hover,
            &:focus,
            &:active,
            &:link,
            &:visited {
                /*color: #302393 !important;*/
                text-decoration: none !important;
            }
            &.button  {
                background-color: #302393 !important;
                color: #ff9b19 !important;
                border-radius: 30px 30px 30px 0 !important;
                padding: 11px 22px 11px 22px;
                text-decoration: none !important;
                &.orange {
                    background-color: #ff9b19 !important;
                    color: #ffffff !important;
                }
            }
        }
    }
    /* ------------- MENU -------------- */

    /* ----------- RESERVATION MAP ------------- */
    .view-container-menu {
        display: flex; /* Enables flexbox */
        justify-content: space-between; /* Spaces them out */
        height: fit-content;
        flex-direction: column;
        margin: 54px 0 0 0;
        text-align: center !important;
        align-items: center !important;
        gap: 0;
        width: 90%;
    }

    .view-container {
        display: flex;  /* Enables flexbox */
        justify-content: space-between;  /* Spaces them out */
        height: fit-content;
        flex-direction: column;
        margin: 56px 0 0 0;
        text-align: center !important;
        align-items: center;
        gap: 36px;
        width: 90%;
        &.padding-side {
            padding: 0;
        }
        &.margin-zero {
            margin: 0;
        }
        .depo {
            padding-left: 0 !important;
            font-size: 48px !important;
            width: 100% !important;
            align-items: flex-start;
            text-align: left;
        }
        .medium {
            font-size: 24px !important;
            align-items: flex-start;
            margin: 0 !important;;
            text-align: left;
        }
        .gap-zero {
            gap: 0;
        }
    }

    .map-menu-top-border {
        border-top: solid 2px var(--color-light-orange);
    }

    .view-box {
        display: flex;
        flex-wrap: wrap;
        margin: 0 !important;
        padding: 0 !important;
        width: 90% !important;
    }

    .group {
        gap: 10px;
        flex-wrap: wrap;
        align-items: flex-start;
        .button-orange {
            margin-bottom: 2px;
        }
    }

    .view-box-menu {
        width: 100% !important;
    }

    .view-box-full {
        padding: 0 !important;
        box-sizing: border-box;
        margin: 0 auto;
        width: 90% !important;
    }

    #schedule {
        align-items: center !important;
    }

    .styled-select {
        margin: 0;
        padding: 0;
        width: 100%;
        &.margin-left {
            margin-left: 0;
        }
    }

    .reservation-box {
        padding: 18px 0 64px 0 !important;
        margin: 0 !important;
        width: 100%;
        align-items: center;
        text-align: center;
        border-radius: 0 !important;
    }

    .week-move-term-box {
        display: inline-block;
    }

    .schedule {
        align-items: center;
    }

    .reservation-term {
        width: 90% !important;
        margin: 0 auto;
        box-sizing: border-box;
        overflow: hidden;
    }

    .scroll-container,
    .custom-popup,
    .reservation-box {
        border-radius: 0 !important;
    }
    /* ----------- RESERVATION MAP ------------- */
}

@media (max-width: 768px) {
    h3 {
        font-size: 52px;
    }

    .styled-select {
        margin-bottom: 24px !important;
        &.show {
            display: block;
        }
    }

    /* --------------------- INTRODUCTION -------------------- */
    .introduction-page-block {
        padding: 0;
        flex-direction: column;
        align-items: center;
    }

    .intro-text,
    .intro-video {
        width: 90%;
    }

    .intro-video {
        height: auto;
    }
    /* --------------------- INTRODUCTION -------------------- */

    /* ------------- OUR LIFTS -------------- */
    .our-lifts-list-container {
        display: flex;
        flex-direction: column; /* Stack vertically */
        align-items: center;
        text-align: center;
        gap: 0;              /* Reduced gap on mobile */
        padding: 20px 0 0 0;
        .our-lifts-row {
            width: 90% !important;
            box-sizing: border-box;
        }
    }
    /* ------------- OUR LIFTS -------------- */

    /* ------------- BENEFITS -------------- */
    .benefits-page-block {
        display: flex;
        flex-direction: column; /* Stack vertically */
        align-items: center;
        text-align: center;
    }

    .styled-select {
        margin: 0;
        gap: 0;              /* Reduced gap on mobile */
        padding: 20px 0 0 0;
        .benefits-box {
            width: 90% !important;
            box-sizing: border-box;
        }
    }
    /* ------------- BENEFITS -------------- */

    /* ----------- HOW IT WORKS ---------- */
    .how-it-works-page-block {
        .hot-it-works-wrapper {
            .row {
                display: flex;
                flex-direction: column;
                .left-content {
                    height: clamp(240px, 18vw, 350px);
                }
                .right-content {
                    .content-wrapper {
                        .point {
                            position: absolute;
                            width: 82px !important;
                            height: 82px !important;
                            font-size: 45px !important;
                        }
                        .right {
                            .subject {
                                font-size: 56px;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
    /* ----------- HOW OT WORKS ---------- */

    /* ------------- TIMELINE -------------- */
    .timeline-container {
        display: flex;
        justify-content: space-evenly !important;
        align-items: center;
        padding: 0;
    }

    .point {
        width: clamp(50px, 12vw, 82px) !important;
        height: clamp(50px, 12vw, 82px) !important;
        font-size:  clamp(16px, 6vw, 45px) !important;
    }

    .reservation-step {
        width: clamp(50px, 12vw, 82px) !important;
        height: clamp(50px, 12vw, 82px) !important;
    }

    .reservation-step-gap {
        display: none !important;
    }

    /* ------------- TIMELINE -------------- */

    .form-group {
        align-content: center;
    }

    .reservation-text {
        margin: 0 !important;
        padding: 0 !important;
        min-width: auto !important;
        max-width: 90% !important;
        width: 90% !important;
    }

    .item-select {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* ------------- PRICE -------------- */
    .price-list-text {
        margin: 0 !important;
        padding: 0 !important;
        min-width: auto !important;
        width: 90% !important;
    }

    .item {
        width: 90%;
    }

    .price-list-container {
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 36px;
        padding: 0;
        gap: 20px;
        align-items: center;
    }


    .page-block {
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        &.margin-zero {
            margin-bottom: 0 !important;
        }
    }

    .price-row {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0;
        padding: 0;
        gap: 20px;
        align-items: center;
        box-sizing: border-box;
        &.align-left {
            align-items: flex-start !important;
            text-align: left !important;
        }
    }

    .price-list-box .item-select {
        margin: 0 !important; /* Tohle zarovná blok na střed */
        text-align: left !important;
    }

    .price-list-box .subject {
        margin: 0 auto !important; /* Tohle zarovná blok na střed */
        text-align: left !important;
    }

    /* ------------- PRICE -------------- */

    .hide-div {
        display: none;
    }

    .reservation-image {

        display: none !important;
    }
    .reservation-step {
        width: 60px !important;
        height: 60px !important;
    }
    .reservation-step-gap {
        width: 85px !important;
        height: 60px !important;
        padding: 0 14px;
        margin: 0 14px;
    }

    /*input {*/
    /*    width: 90%;*/
    /*}*/

    textarea {
        width: 100% !important; /* Přizpůsobí se rodiči */
        max-width: 100% !important; /* Maximální šířka třeba na větších obrazovkách */
        min-width: 200px; /* Minimální šířka */
    }

    .mobile-menu-links {
        text-align: left !important;
        .item {
            text-align: left !important;
        }
    }

    label[for="formOperator"],
    label[for="formInsurance"]{
        text-align: left !important;
    }
}

@media (max-width: 715px) {
    /* --------------------- FOOTER -------------- */
    .footer-container-text {
        margin-left:60px;
    }
    /* --------------------- FOOTER -------------- */
}

@media(max-width: 523px) {
    /* --------------------- INTRODUCTION -------------------- */
    .introduction-page-block {
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        justify-content: left !important;
        width: 90%;

        .intro-text {
            width: 90%;
            text-align: left;
            display: block;
            box-sizing: border-box;
            margin: 0 auto;

            .subject {
                font-size: clamp(24px, 18vw, 89px);
                word-wrap: break-word;
                overflow-wrap: break-word;
                white-space: normal;
            }

            .text {
                font-size: clamp(14px, 5vw, 19px);
                word-wrap: break-word;
                overflow-wrap: break-word;
                white-space: normal;
            }
        }

        .intro-video {
            width: 100%;
        }
    }

    .button-blue {
        &.introduction {
            margin-left: 0;
        }
    }

    .price-box {
        margin-bottom: 10px;
    }
    /* --------------------- INTRODUCTION -------------------- */

    /* ----------- RESERVATION MAP ------------- */

    /* ----------- RESERVATION MAP ------------- */
}