/***** VARIABLE *****/

:root {
    --font-color: #0E0E0E;
    --background-color: #F5F5F5;
    --card-color: #EBEBEB;
    --font-color-w-20: #f5f5f530;
    --font-color-w-10: #f5f5f520;
    --font-color-w-60: #f5f5f570;
    --font-color-b-20: #0E0E0E30;
    --font-color-b-10: #0e0e0e20;
    --font-color-b-60: #0e0e0e70;
}


/***** HEADER *****/

.order-container {
    display: grid;
    grid-template-columns: 4fr 2fr;
    gap: 1vw;
}


/***** MODAL *****/

.modal-container {
    visibility: hidden;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100vw;
    height: 100vh;
    transition: visibility .8s;
}

.modal-container.active-modal {
    visibility: visible;
    transition: visibility 0s;
}

.overlay-modal {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--font-color-b-60);
    transition: opacity .8s cubic-bezier(.12,.85,.25,1);
}
.modal-container.active-modal .overlay-modal {
    opacity: 1;
    transition: opacity .8s cubic-bezier(.12,.85,.25,1);
}

.modal {
    opacity: 0;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 2vw));
    background: var(--background-color);
    padding: 7vw 8vw;
    border-radius: .5vw;
    transition: opacity .8s cubic-bezier(.12,.85,.25,1),
    transform .8s cubic-bezier(.12,.85,.25,1);
}
.modal-container.active-modal .modal {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity .8s cubic-bezier(.12,.85,.25,1),
    transform .8s cubic-bezier(.12,.85,.25,1);
}

.close-modal {
    position: absolute;
    top: 1.5vw;
    right: 1.5vw;
    border: none;
    background: var(--card-color);
    width: 2vw;
    height: 2vw;
    border-radius: 100%;
    cursor: pointer;
    transition: background .8s cubic-bezier(.12,.85,.25,1);
}
.close-icon {
    width: .5vw;
}

.close-modal:hover {
    background: var(--font-color-b-10);
}


/***** NAV *****/

.nav-order {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 3vw 5vw;
}



/***** SLIDER *****/

.order-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.slider-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

.slider-img {
    object-fit: cover;
    min-width: 100%;
    height: 100%;
}

.slider-nav {
    position: absolute;
    z-index: 1;
    right: 4vw;
    bottom: 3vw;
}

.slider-button {
    cursor: pointer;
    border: none;
    width: 4.6vw;
    height: 4.6vw;
    border-radius: 100%;
    background-color: var(--font-color-b-10);
    transition: .8s cubic-bezier(.12,.85,.25,1);
}

.slider-button:hover {
    background-color: var(--font-color);
}

.slider-button-arrow {
    height: 1vw;
    transition: opacity .8s cubic-bezier(.12,.85,.25,1);
}

/*.arrow-previous {
    opacity: 0.4;
}*/



/***** SLIDER-2 *****/

/*#order-gallery {
    position: relative;
    overflow: hidden;
}

.photo {
    object-fit: cover;
}

#main-image-gallery {
    width: 100%;
    height: 100%;
}

.selector-container {
    position: absolute;
    z-index: 3;
    top: 2vw;
    right: 2vw;
}

.image-gallery-box {
    position: relative;
    width: 10vw;
    height: 7vw;
    cursor: pointer;
}

.image-gallery-selector {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--background-color);
    border-radius: 0.5vw;
}

.image-gallery {
    width: 100%;
    height: 100%;
    border-radius: 0.5vw;
    border: 1px solid var(--font-color-w-10);
}

.gallery-overlay {
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--font-color);
}*/



/***** PANEL *****/


.order-panel {
    padding: 3vw;
}

.panel-card {
    padding: 1.5vw 2vw;
    background: var(--card-color);
    border-radius: .5vw;
}

.link-order {
    position: relative;
}

.link-order::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--font-color);
}





@media screen and (max-width:480px) {

    /***** NAV *****/

    .nav-order {
        display: none;
    }

    /***** HEADER *****/

    .order-container {
        display: flex;
        flex-direction: column;
    }

    .header-order {
        height: fit-content;
    }

    /***** PANEL *****/


    .order-panel {
        padding: 2em 2em 4em 2em;
        gap: 4em;
    }

    .panel-card {
        padding: 1em 1.5em;
        background: var(--card-color);
        border-radius: .3em;
    }

    /***** SLIDER *****/

    .order-slider {
        height: 120vw;
    }

    .slider-nav {
        right: 2em;
        bottom: 2em;
    }

    .slider-button {
        width: 3.5em;
        height: 3.5em;
    }

    .slider-button-arrow {
        height: .8em;
    }

    /***** MODAL *****/

    .modal {
        padding: 3em 3.5em;
        border-radius: .3em;
        transform: translate(-50%, calc(-50% + 2em));
    }

    .close-modal {
        top: 1em;
        right: 1em;
        width: 2em;
        height: 2em;
        background: transparent;
    }

    .close-modal:hover {
        background: transparent;
    }

    .close-icon {
        width: .5em;
    }
}