/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@view-transition {
    navigation: auto;
}

body :is(h1, h2, h3, h4, h5, h6, p){
    margin: 0;
}

.container.grid-container{
    padding-left: 0;
    padding-right: 0;
}

.content-area .container-fluid{
    padding: 2rem clamp(1rem, 4vw, 4rem);
}


.btn{
    padding: 1rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    border-radius: 2rem;
    border: none;

    &.btn-primary{
        background: var(--secondary-500);
        color: #fff;

        &:hover{
            background: var(--secondary-700);
        }
    }

    &.btn-secondary{
        background: var(--background-200);
        color: var(--support-300);
        
        &:hover{
            background: var(--background-400);
        }
    }
    &.btn-link{
        text-decoration: underline;
        padding: 0;
        background: none;
        color: var(--main-400);
    }

    &:has(svg){
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
}


.badge{
    background-color: var(--main-400);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 400;
    color: #ffffff;
}

.swiper {
    & .swiper-slide {
        aspect-ratio: 16 / 9;

        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &>.swiper-button-next,
    &>.swiper-button-prev {
        color: #fff;
        background: rgba(132, 132, 132, 0.5);
        border-radius: 100vw;
        padding: 1rem;
        width: 3.5rem;
        height: 3.5rem;
    }
    
    &>.swiper-button-next{
        right: 1rem;
    }
    &>.swiper-button-prev {
        left: 1rem;
    }

    &>.swiper-pagination{
        background: rgba(132, 132, 132, 0.5);
        width: max-content;
        max-width: calc(100% - 2rem);
        bottom: -4px;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0.25rem;
        border-radius: 0.25rem;
        color: #ffffff;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 300;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        &:before{
            content: '';
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffffff" viewBox="0 0 24 24"><path d="M21.5 9c0-2.45-.493-4.036-1.479-5.021C19.037 2.993 17.451 2.5 15 2.5H9c-2.45 0-4.036.493-5.021 1.479C2.993 4.964 2.5 6.549 2.5 9v6c0 2.45.493 4.036 1.479 5.021.985.986 2.57 1.479 5.021 1.479h6c2.45 0 4.036-.493 5.021-1.479.986-.985 1.479-2.57 1.479-5.021V9Zm1 6c0 2.55-.507 4.464-1.771 5.729C19.463 21.992 17.549 22.5 15 22.5H9c-2.55 0-4.464-.507-5.729-1.771C2.007 19.463 1.5 17.549 1.5 15V9c0-2.55.507-4.464 1.771-5.729C4.536 2.007 6.451 1.5 9 1.5h6c2.55 0 4.464.507 5.729 1.771C21.992 4.536 22.5 6.451 22.5 9v6Z"/><path d="M10.5 8a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm1 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm5.725 4.12c.967-.83 2.503-.83 3.47 0l1.631 1.4a.5.5 0 0 1-.652.76l-1.63-1.4c-.556-.478-1.454-.508-2.053-.09l-.115.09-4.16 3.57c-.967.83-2.504.83-3.472 0l-.004-.004-.326-.287c-.502-.431-1.317-.504-1.918-.175l-.117.071-4.93 3.31a.5.5 0 1 1-.557-.83l4.93-3.31.186-.114c.893-.492 2.06-.434 2.887.155l.17.135.005.004.326.286.115.089c.598.418 1.498.388 2.054-.09l4.16-3.57Z"/></svg>');
            background-size: 1rem;
            background-repeat: no-repeat;
            width: 1rem;
            height: 1rem;
            margin-right: 0.25rem;
        }
        &[data-append]::after{
            content: attr(data-append);
            margin-left: 0.25rem;
        }
    }
}


.wow_page_header{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
	max-height: 376px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    color: #ffffff;
    text-align: center;

    &:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(20, 20, 20, 0.56);
    }

    &>*{
        z-index: 1;
    }

    &.swiper{
        padding: 0;

        
        & .swiper-slide {
            height: 376px;
            width: auto;
        }
    }
}

.page-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--background-200);

    &>*{
        margin: 0;
    }

    & h1{
        font-size: 2rem;
        line-height: 3rem;
        font-weight: 500;
        color: var(--support-700);
    }

    & p{
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: var(--support-300);
    }
}

.content-area > form{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    gap: 2rem;


    & h3{
        font-size: 1.25rem;
        line-height: 2rem;
        font-weight: 700;
        color: var(--support-700);
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 0.5rem;
    }

    &>main:not(.accommodations-list-container){
        width: calc(70% - 1rem);
        display: flex;
        flex-direction: column;
        gap: 2rem;

        &>section{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            gap: 1.5rem;

            &>h2{
                font-size: 1.5rem;
                line-height: 2.5rem;
                font-weight: 700;
                color: var(--main-400);
            }

            &>ul{
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;

                &>li{
                    border: 1px solid var(--support-300);
                    border-bottom-left-radius: 1rem;
                    border-bottom-right-radius: 1rem;
                    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 1rem, rgba(255, 255, 255, 1) 1rem, rgba(255, 255, 255, 1) 100%);
                    padding: 1.5rem;
                    display: flex;
                    flex-direction: row;
                    justify-content: stretch;
                    align-items: center;
                    gap: 2rem;

                    &:first-of-type{
                        border-top-left-radius: 1rem;
                        border-top-right-radius: 1rem;
                    }
                    
                    &:not(:first-of-type){
                        margin-top: -1rem;
                        padding-top: 2rem;
                        border-top: 0;
                    }

                    &>div{
                        flex-grow: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: start;
                        gap: 0.5rem;

                        & p, & li{
                            font-size: 1rem;
                            line-height: 1.5rem;
                            font-weight: 500;
                            color: var(--support-300);
                        }

                        & button{
                            padding: 0.5rem 1rem;
                            font-size: 0.75rem;
                            line-height: 1rem;
                            font-weight: 400;
                            border-radius: 2rem;
                            color: var(--support-300);
                            background-color: var(--background-200);
                            justify-content: start;

                            &[data-target="#modalTariffsDetails"]{
                                width: 100%;
                                padding: 1rem;
                                color: var(--support-700);
                                font-size: 1rem;
                                line-height: 1.5rem;
                                font-weight: 500;
                                border-radius: 0.5rem;
                            }
                        }
                    }

                    &>span{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: end;
                        flex-shrink: 0;

                        font-size: 0.875rem;
                        line-height: 1.5rem;
                        font-weight: 500;
                        color: var(--support-300);

                        @media screen and (width <= 768px)  {
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            flex-wrap: wrap;
                        }

                        &>span{
                            display: flex;
                            flex-direction: row;
                            justify-content: end;
                            align-items: center;
                            gap: 1.5rem;
                            /*
                            @media screen and (width <= 768px)  {
                                &:last-of-type{
                                    width: 100%;
                                }
                            } */

                        }

                        & [data-price]{
                            font-size: 1.5rem;
                            line-height: 2.5rem;
                            font-weight: 700;
                            color: var(--support-700);
                            gap: 1rem;

                            &>.badge-promo{
                                border: 1px solid var(--actions-discount);
                                border-radius: 0.25rem;
                                padding: 0 0.25rem;
                                font-size: 1rem;
                                line-height: 1.5rem;
                                font-weight: 400;
                                color: var(--actions-discount);
                            }
                            &>del{
                                font-size: 1.25rem;
                                line-height: 2rem;
                                font-weight: 400;
                                color: var(--support-300);
                            }
                        }
                    }
                }
            }

            &>section{
                border: 1px solid var(--support-300);
                border-bottom-left-radius: 1rem;
                border-bottom-right-radius: 1rem;
                background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 1rem, rgba(255, 255, 255, 1) 1rem, rgba(255, 255, 255, 1) 100%);
                padding: 1.5rem 1.5rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                &:first-of-type{
                    border-top-left-radius: 1rem;
                    border-top-right-radius: 1rem;
                }
                &:not(:first-of-type){
                    margin-top: -1rem;
                    padding-top: 2rem;
                    border-top: 0;
                }
            }
        }

        &>footer.form-actions{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            &>button{
                flex-grow: 1;

                
                &#submitBtn{
                    flex-grow: 5;
                }
            }
        }
    }
    &>aside{
        width: calc(30% - 1rem);
        border-radius: 1rem;
        /* overflow: hidden; */

        @media screen and (height >= 768px) {
            position: sticky;
            top: 1rem;
        }

        &>section{
            border: 1px solid var(--support-300);
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 1rem, rgba(255, 255, 255, 1) 1rem, rgba(255, 255, 255, 1) 100%);
            padding: 1rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            &[data-summary="accommodation"]{
                gap: 1rem;

                &>.accommodation-title{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    gap: 1rem;

                    &>span{
                        background: var(--background-200);
                        color: var(--support-300);
                        padding: 0.25rem 0.5rem;
                        border-radius: 0.25rem;
                        font-size: 0.75rem;
                        line-height: 1rem;
                        font-weight: 400;
                    }
                }
            }

            &:not([data-summary="accommodation"])>ul{
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: stretch;
                gap: 1rem;
                color: var(--support-300);

                &>li{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 1rem;
                    line-height: 1.5rem;
                    font-weight: 400;

                    &>span{
                        display: flex;
                        flex-direction: row;
                        justify-content: start;
                        align-items: center;
                        gap: 0.5rem;

                        &:last-of-type{
                            padding: 0.25rem 0.5rem;
                            border-radius: 0.25rem;
                            background-color: var(--background-200);
                        }
                    }
                }
            }

            &:first-of-type{
                border-top-left-radius: 1rem;
                border-top-right-radius: 1rem;
            }
            &:not(:first-of-type){
                margin-top: -1rem;
                padding-top: 2rem;
                border-top: 0;
            }
            &:not(:first-of-type, [data-summary="total"]):not(:has(li)){
                display: none;
            }

            &[data-summary="total"]{
                background: var(--background-200);
                position: relative;
                z-index: -1;
            }
        }

    }

    
    @media screen and (width <= 768px) {
        flex-direction: column-reverse;

        &>main:not(.accommodations-list-container),
        &>aside{
            width: 100%;
        }

        &>main:not(.accommodations-list-container){
            &>section{
                &>ul>li{
                    flex-direction: column;
                    align-items: stretch;
                    padding: 1.5rem 1rem;
                    gap: 1.5rem;

                    & .wow-checkbox-input,
                    & .wow-number-input{
                        width: 100%;
                    }
                }
            }
        }
    }
}




ul.accommodation-features{
    list-style: none;
    padding: 1rem;
    margin: 0;
    background: var(--background-200);
    border-radius: 0.5rem;
    color: var(--main-400);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    
    &>li{
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
    }
}

.accommodations-list-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 50%, 544px), 1fr));
    gap: 2rem;

    &>article{
        border-radius: 1rem;
        overflow: hidden;
        position: relative;

        &>.badge{
            padding: 0.25rem 1rem;
            border-radius: 0 0 0.25rem 0.25rem;
            font-size: 0.875rem;
            line-height: 1.5rem;
            font-weight: 500;
            position: absolute;
            z-index: 2;
            top: 1rem;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        &>section{
            border: 1px solid var(--support-300);
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            border-top: 0;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            transition: 0.25s ease-in-out all;

            &:not(:first-of-type){
                margin-top: -1rem;
                padding-top: 2rem;
            }

            &>.accommodation-title{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 1rem;

                &>h2{
                    font-size: 1.25rem;
                    line-height: 2rem;
                    font-weight: 700;
                }
                &>span{
                    background: var(--background-200);
                    color: var(--support-300);
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                    font-size: 0.75rem;
                    line-height: 1rem;
                    font-weight: 400;
                }
            }

            &>.accommodation-actions{
                display: flex;
                flex-direction: row;
                justify-content: stretch;
                align-items: center;
                gap: 0;

            }

            
            &>.accommodation-actions .btn{
                &[type="submit"]{
                    flex-grow: 1;
                }
            }
        }
        
        &>.swiper{
            border: 1px solid var(--support-300);
            border-bottom: 0;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            
            &>.swiper-button-next,
            &>.swiper-button-prev {
                opacity: 0;
                transition: 0.25s ease-in-out all;
            }
        }

        &:hover {
            & .swiper-button-next,
            & .swiper-button-prev {
                opacity: 1;
            }

            & section:first-of-type{
                background: var(--background-200);
            }

            & .accommodation-title span{
                background-color: #ffffff;
            }
        }

        &.is-loading{
            position: relative;
            pointer-events: none;

            & span,
            & .swiper-slide,
            & ul,
            & button {
                position: relative;
                overflow: hidden;

                &::after{
                    content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    90deg,
                    #dddddd 25%,
                    #f5f5f5 50%,
                    #dddddd 75%
                );
                background-size: 200% 100%;
                animation: skeleton-animation 2s ease-in-out infinite;
                border-radius: 6px;
                z-index: 1;
                }
            }


            & .accommodation-actions button {
                min-height: 44px;
                min-width: 140px;
                border-radius: 8px;
            }

        }
    }
}

.pricing-section{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    @media all and (width <= 768px)  {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    &>div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        color: var(--support-300);
        font-size: 0.875rem;
        line-height: 1.5rem;
        font-weight: 400;

        &:last-child{
            align-items: center;
            flex-direction: row;
            gap: 1.5rem;

            & span{
                font-size: 0.875rem;
                line-height: 1.5rem;
                font-weight: 400;
                
                &[data-accommodation-daily-price],
                &[data-daily-price],
                &[data-total-price]{
                    font-size: 2rem;
                    line-height: 3rem;
                    font-weight: 700;
                    color: var(--support-700);

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.5rem;

                    &>del{
                        font-size: 1.25rem;
                        line-height: 2rem;
                        font-weight: 400;
                        color: var(--support-300);
                    }
                }
            }
        }
    }
}


/* Flatpickr Calendar */
.flatpickr-calendar{

    /* &.inline{
        width: 100% !important;
    } */

    &.inline .dayContainer .flatpickr-day{
        display: flex;
        flex-direction: column;
        gap: 0;
        font-size: 0.875rem;
        line-height: 1.5rem;
        color: var(--support-300);
        height: inherit;
        min-height: 3rem;

        &.wow-calendar-day-unvailable:not(.nextMonthDay, .prevMonthDay){
            /* text-decoration: line-through;
            color: #ccc; */
            opacity: 0.25;
            pointer-events: none;
        }

        &:not(.flatpickr-disabled, .wow-calendar-day-unvailable, .wow-calendar-day-available){
            pointer-events: none;
            color: #ccc;
            position: relative;
        }

        &:not(.flatpickr-disabled, .wow-calendar-day-unvailable, .wow-calendar-day-available, .nextMonthDay, .prevMonthDay):before{
            content: '';
            width: 40%;
            height: 2px;
            background: #ccc;
            position: absolute;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            animation: hitZak 0.4s ease-in-out infinite alternate;
        }

        &>span{
            font-size: 0.625rem;
            line-height: 1rem;
            font-weight: 300;
        }
    }

}

@keyframes hitZak {
    0% {
        left: 0;
        transform: translateX(-1%);
    }
    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}

/* Fix select2 when the adminbar is visible */
body.admin-bar .select2-container--open > .select2-dropdown{
    top: 2rem;
}
@media screen and (max-width: 767px) {
    body.admin-bar .select2-container--open > .select2-dropdown{
        top: 46px;
    }
}

#wowBookingsFormSearch{
    background-color: var(--background-200);
    
    &>section{
        border-radius: 1rem;
        border-color: var(--support-300);

        
        & .wow-search{
            border-radius: 0.5rem;
            font-weight: 500;
            max-width: 800px;

            & input{
                font-weight: 500;
            }
        }
        & .wow-submit{
            border-radius: 100vw;
            max-width: 200px;
        }
        
        & .wow-icon{
            background-color: #ffffff;
            color: var(--support-300);
            border-radius: 100vw;
            padding: 1rem;
        }
        
        &:has(section.show) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        
        &>section#bookingSearchFormContent{
            border-radius: 0 0 1rem 1rem;
            background-color: var(--background-200);
            border-color: var(--support-300);

            
            &>.section-group{
                border-radius: 1rem;
                border-color: var(--support-300);
                flex-grow: inherit;
                max-width: 800px;
                flex-grow: 1;

                &.section-group-inline{
                    max-width: 1200px;
                }   

                &.section-guests{
                    max-width: 410px;
                }

                &>.form-group{

                    &>label{
                        font-weight: 500;
                    }
                }
            }

                &  > button.wow-submit.inline{
                    max-width: calc(1200px + 410px + 1rem) !important;  /* flatpicker + guests + gap */
                }
            
        }
        
    }
}


main#bookingCompleted {
    display: flex;
    flex-direction: row-reverse;
    /* width: 100vw;
    height: 100%;
    position: relative; */
    background-color: var(--support-700);
    overflow-y: hidden;
    position: relative;

    &>img{
        width: 50vw;
        object-fit: cover;
        clip-path: polygon(0% 0, 100% 0%, 75% 100%, 0% 100%);
    }

    &>aside {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        padding: 3rem 4rem;
        color: #fff;
        /* background-color: var(--support-700);
        clip-path: polygon(30% 0, 100% 0%, 100% 100%, 0% 100%);
        z-index: 1;
        position: absolute;
        right: 0;
        height: 100%;
        top: 0; */
        width: 100%;


        & h1 {
            font-size: 2rem;
            line-height: 3rem;
            font-weight: 500;
            color: var(--main-400);
        }

        & p {
            font-size: 1.25rem;
            line-height: 2rem;
            font-weight: 700;
        }

        

        &>header{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            
            & p {
                font-weight: 400;
            }
        }

        &>footer{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 1rem;

            & .btn{
                background-color: var(--main-400);
                text-decoration: none;
            }
        }

        &>section{
            width: 100%;

            &>div{
                border: 1px solid var(--support-300);
                border-radius: 1rem;
                padding: 1rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                width: 100%;

                &:not(:first-of-type){
                    border-top: 0;
                    margin-top: -1rem;
                    padding-top: 2rem;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                }

                &>ul{
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    font-size: 1rem;
                    line-height: 1.5rem;
                    font-weight: 400;
                    color: var(--support-300);

                    &>li{
                        display: flex;
                        flex-direction: row;
                        justify-content: start;
                        align-items: center;
                        gap: 0.5rem;
                    }
                }
            }
        }
    }

    
    &>span.divider{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        background: #ffffff;
        color: var(--support-700);
        position: absolute;
        top: -10%;
        left: calc(50vw - 10%);
        min-width: 2.5rem;
        height: 120%;
        rotate: 24deg;
        padding: 1.5rem;
        writing-mode: sideways-lr;
        text-align: center;

        font-size: 2rem;
        line-height: 3rem;
        font-weight: 500;
        color: var(--secondary-500);

        &>svg{
            width: 2rem;
            height: 2rem;
            rotate: -90deg;
        }
    }

    @media screen and (width <= 1330px) {
        
        &{
            flex-direction: column;

            &>aside{
                padding: 3rem 1rem;
                
                &>*{
                    max-width: 600px;
                }
            }

            &>img{
                width: 100%;
                clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
                height: 80vw;
            }

            &>span.divider{
                writing-mode: horizontal-tb;
                left: -10%;
                width: 120%;
                height: auto;
                rotate: -3deg;
                top: inherit;
                bottom: 0;
                bottom: calc(80vw - 75px);
                font-size: 1.5rem;
                padding: 1rem;
            }
        }
    }
}


@keyframes skeleton-animation {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: 0% 0;
    }
}


.accommodations-list {
    & .empty-list{
        padding: 6rem 1rem;
        background-color: #000000;
        color: #ffffff;
        font-size: 1.25rem;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 32px;

        & div {
            gap: 0.5rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        & button {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.5rem 1.5rem;
            background-color: var(--main-400);
            color: #ffffff;
            border-radius: 1rem;

        }

        @media screen and (max-width: 1024px) {
            font-size: 1rem;
            /* flex-direction: column;
            button {
                width: clamp(350px  , 50%, 400px);
            } */
             @media screen and (max-width: 768px) {
            padding: 1.5rem 1rem;
            flex-direction: column;
            button {
                width: clamp(350px, 50%, 400px);
            }
        }
        }
    }
}


.header-step {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    &>div{
        padding: 4px 16px 4px 16px;

        &.active{
            border: 1px solid #8A8A8A;
            border-top: 0px;
            border-bottom: 0px;
            border-radius: 8px;
        }

        
        &>div:first-child{
            color: #8A8A8A;
        }
    }
}

.wow-wpml-language-selector{
    display: inline-flex;

    &>a{
        display: inline-flex;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.5rem 1.5rem;
        border-radius: 0.5rem;
        color: var(--support-400);
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;
        line-height: 24px;
        transition: background 0.25s ease-in-out;

        &:hover{
            background: #fff;
            color: var(--main-400);
        }

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

            &{
                padding: 0.5rem;
            }
            &>span{
                display: none;
            }
        }
    }
}

.wow-terms-conditions{
    color: #6c757d;
    font-size: 0.875rem;

    &>p{
        margin-bottom: 0.5rem !important;
    }
}