/* PUBLIC */
@import url('https://fonts.googleapis.com/css2?family=Asap:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

:root {
    --bs-dark-rgb: 0, 0, 0;
    --bs-font-sans-serif: "Asap", sans-serif;
    --bs-body-font-size: 15px;
    --bs-body-color: var(--bs-white);
}

.font-serif {
    font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
}


.font_forum {
    font-family: "Forum", serif;
}

.h1,
.h2,
.h3,
.h4 {
    font-weight: 200;
    text-transform: uppercase;
}

.h1,
.h2,
.h3 {
    font-size: 35px;
}

.h4 {
    font-size: 25px;
}

.h1,
.h2,
.h3,
.h4 {
    text-transform: uppercase;
    margin: 0;
}

.p,
.p-2 {
    font-size: 20px;
}

@media (min-width: 992px) {
    .h1 {
        font-size: 64px;
    }

    .h2 {
        font-size: 50px;
    }

    .h3 {
        font-size: 50px;
    }

    .h4 {
        font-size: 45px;
    }

    .p {
        font-size: 24px;
    }

    .p-2 {
        font-size: 22px;
    }
}

.site-navbar-logo {
    display: block;
    width: auto;
    height: 35px;
}

.site-navbar-nav {
    text-transform: uppercase;
    font-size: 27px;
}

#heroCarousel .carousel-indicators [data-bs-target] {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid var(--bs-white);
    background-color: transparent;
}

#heroCarousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--bs-white);
}

#heroCarousel .carousel-control-prev::before,
#heroCarousel .carousel-control-next::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 1px solid var(--bs-white);
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    transform: translate(-50%, -50%);
}

#heroCarousel .carousel-control-prev-icon {
    background-image: url(/lw_assets/images/arrow-left.svg);
}

#heroCarousel .carousel-control-next-icon {
    background-image: url(/lw_assets/images/arrow-right.svg);
}

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    filter: grayscale(1) invert(1);
}

@media (min-width: 992px) {
    .site-navbar-logo {
        height: 59px;
    }

    .site-navbar-nav {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .site-navbar .navbar-collapse.show {
        height: calc(100vh - 16px - 40px - 8px);
        display: flex;
    }

    .site-navbar .navbar-collapse {
        display: none;
        align-items: center;
        justify-content: center;
    }

    .site-navbar-nav {
        text-align: center;
    }
}




/* UTILITY */
.btn {
    --bs-btn-color: var(--bs-black);
}

.btn-main {
    border-radius: 4px;
    background-color: var(--bs-white);
}

.btn-main:hover {
    border-color: var(--bs-white);
}

.fs-60,
.fs-70 {
    font-size: 35px;
}

.fs-22 {
    font-size: 22px;
}

.fs-26 {
    font-size: 26px;
}

.svg-rt {
    position: absolute;
    right: -1px;
    top: -1px;
    transform: rotate(270deg);
}

.svg-rb {
    position: absolute;
    right: -1px;
    bottom: -1px;
}

.svg-lb {
    position: absolute;
    left: -1px;
    bottom: -1px;
    transform: rotate(90deg);
}

.svg-lt {
    position: absolute;
    left: -1px;
    top: -1px;
    transform: rotate(180deg);
}

.svg-ct {
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
}

.svg-lc {
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
}

.svg-rc {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

.svg-cb {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: rotate(180deg) translateX(50%);
}

.bg-gray {
    background-color: #1C1C1C;
}

@media (min-width: 992px) {
    .fs-60 {
        font-size: 60px;
    }

    .fs-70 {
        font-size: 60px;
    }
}

/* PARALLAX */
.parallax-svg {
    width: 16vw;
    height: 16vw;
}

.parallax-svg-cta,
.parallax-svg-contatti {
    width: 45vw;
}

.parallax-img {
    overflow: hidden;
    position: relative;
    height: 100%;
    z-index: -1;
}

.parallax-title {
    font-size: 30px;
    font-family: var(--bs-font-sans-serif);
    padding: 8px 0;
    margin: 0;
}

.parallax-cta {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-size: clamp(12px, 1.5vw, 16px);
    text-transform: uppercase;
    letter-spacing: 0.5vw;
    margin-top: -8px;
}

.parallax-background-section {
    height: 60vh;
}

@media (min-width: 576px) {

    .parallax-svg-cta,
    .parallax-svg-contatti {
        width: 35vw;
    }
}

@media (min-width: 992px) {
    .parallax-svg {
        width: 7vw;
        height: 7vw;
    }

    .parallax-svg-cta {
        width: 23vw;
    }

    .parallax-svg-contatti {
        width: 15vw;
    }
}

@media (min-width: 1600px) {

    .parallax-svg-cta {
        width: 19vw;
    }

}

/* SEZIONE STORIA */
#history_description {
    position: relative;
    top: -30px;
    font-size: 24px;
    width: 50%;
    margin-bottom: -30px;
}

.history_title {
    color: var(--bs-gray-500);
    font-size: 47px;
}

.history_title.active {
    color: var(--bs-black);
}

.swiper {
    padding-bottom: calc(var(--swiper-navigation-size) + 1rem);
}

.swiper-button-next,
.swiper-button-prev {
    width: var(--swiper-navigation-size);
    background-color: white;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 999px;
    top: auto;
    bottom: 0.5rem;
}

.swiper-button-next {
    right: 0;
}

.swiper-button-prev {
    left: auto;
    right: calc(var(--swiper-navigation-size) + 0.5rem);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: var(--bs-card-spacer-y);
    line-height: var(--swiper-navigation-size);
}

.swiper-slide {
    width: 30%;
}

@media (min-width: 992px) {
    .swiper-slide {
        width: 50%;
    }

    .history_title {
        font-size: 200px;
    }

}

/* SEZIONE PUBLICAZIONE  */
.publication-img {
    width: 100%;
}

@media (min-width: 992px) {
    .publication-img {
        width: 50vw;
    }
}

/* FORM CONTATTI */
#formContatti .form-control,
#signupForm .form-control,
#loginForm .form-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--bs-gray-500);
    border-radius: 0;
    font-size: 20px;
    /* color: var(--bs-white); */
    padding: 16px 0;
}

#formContatti .form-control-textarea {
    padding: 16px 0;
    height: 63px;
}

#formContatti #mail_accetto+label,
#signupForm #mail_accetto+label {
    font-size: 13px;
}

#formContatti .form-control::placeholder,
#signupForm .form-control::placeholder,
#loginForm .form-control::placeholder {
    color: var(--bs-white);
}

#formContatti .form_message,
#signupForm .form_message {
    border: 1px solid var(--bs-gray-500);
    border-radius: 8px;
    padding: 16px;
}

#formContatti .custom-file-control {
    display: flex;
    padding: 0;
}

#formContatti #file-label {
    background-color: var(--bs-white);
    color: var(--bs-black);
    padding: 0.5rem;
    cursor: pointer;
}

#formContatti #file-chosen {
    padding: 6px 12px;
}

#formContatti .custom-checkbox,
#signupForm .custom-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--bs-white);
    display: inline-block;
    position: relative;
}

#formContatti .custom-checkbox:checked,
#signupForm .custom-checkbox:checked {
    background-color: transparent;
}

#formContatti .custom-checkbox.is-invalid,
#signupForm .custom-checkbox.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

#formContatti .custom-checkbox:checked::after,
#signupForm .custom-checkbox:checked::after {
    content: "✓";
    /* Simbolo di spunta */
    font-size: 10px;
    color: var(--bs-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* SEZIONE SCARICA PRENOTAZIONE */
.scarica-prenotazione {
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: underline;
    word-spacing: 1rem;
}

@media (min-width: 992px) {
    .scarica-prenotazione {
        font-size: 30px;
    }
}

/* AUTH TAB */
.nav-tabs-auth .nav-link {
    border: 0;
    color: var(--bs-gray-500);
}

.nav-tabs-auth .nav-link.active {
    background-color: transparent;
    color: var(--bs-white);
}

/* SEZIONE TEAM */
.team-name {
    font-weight: bold;
}

.team-name,
.team-role {
    font-size: 20px;
}

@media (min-width: 992px) {
    .team-name {
        font-size: 35px;
    }

    .team-role {
        font-size: 30px;
    }
}

/* PROFILE */
.container_profile label,
.container_profile input,
.container_profile .card-header {
    color: var(--bs-black);
}

.container_profile input:focus {
    color: var(--bs-black);
}

/* FOOTER */
.main-footer-logo {
    height: 32px;
}

.btn-icon {
    border: 1px solid var(--bs-white);
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    border-color: var(--bs-white);
}

.btn-icon i {
    color: var(--bs-white);
}

@media (min-width: 992px) {
    .main-footer-logo {
        height: 70px;
    }
}




/* NAVBAR */
.main-navbar .nav-link {
    color: var(--bs-white);
    font-size: 26px;
    text-transform: uppercase;
}

.main-navbar .nav-link:hover {
    text-decoration: underline;
    font-weight: 700;
}

.main-navbar .nav-link-active {
    font-weight: 700;
}

.main-navbar .btn-area-amministrativa {
    background-color: var(--bs-white);
    padding: 8px 16px;
    color: var(--bs-black);
}

@media (min-width: 992px) {
    .main-navbar .nav-link {
        font-size: 16px;
    }

    .main-navbar .btn-area-amministrativa {
        background-color: transparent;
        color: var(--bs-white);
    }
}

.navbar {
    position: fixed;
    background-color: #000000 !important;
    width: 100%;
    z-index: 999;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: #fff;
}

@media (max-width: 992px) {

    .navbar-collapse {
        position: fixed;
        top: 82px;
        left: -100vw;
        width: 100%;
        margin-left: 0;
        bottom: auto;
        flex-direction: column !important;
        height: 100vh;
        background-color: transparent !important;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
        overflow: hidden;
        z-index: 9999;
        padding-top: 100px;
    }

    .navbar-collapse.show {
        left: 0vw;
        bottom: 0vh;
        height: 100vh;
        background-color: #18191A !important;
        overflow: auto;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 520px) {
        .navbar-collapse {
            top: 55px;
        }
    }

    .navbar-nav {
        width: 100%;
        text-align: center !important;
        margin: auto;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-top: 40px;
    }

    /* effetto menù */
    .navbar-toggler {
        box-shadow: none !important;
        z-index: 99999;
        background-color: transparent !important;
        color: #ffffff !important;
    }

    .navbar-toggler span {
        display: block;
        color: #ffffff !important;
        height: 3px;
        width: 34px;
        margin-top: 7px !important;
        margin-bottom: 0px;
        position: relative;
        left: 0;
        opacity: 1;
        transition: all 0.35s ease-out;
        transform-origin: center left;
        border-radius: 10px;
        border-color: #ffffff !important;
        background-color: #ffffff !important;
    }

    @media (max-width: 767px) {
        .navbar .container {
            padding-left: 10px;
            padding-right: 10px;
        }
    }



    .navbar-toggler span:nth-child(1) {}

    .navbar-toggler:not(.collapsed) span:nth-child(1) {
        transform: translate(15%, -99%) rotate(45deg);
        background-color: #ffffff !important;
    }

    .navbar-toggler:not(.collapsed) span:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggler:not(.collapsed) span:nth-child(3) {
        transform: translate(15%, 33%) rotate(-45deg);
        background-color: #ffffff !important;
    }

    .navbar-toggler span:nth-child(1) {
        transform: translate(0%, 0%) rotate(0deg);
    }

    .navbar-toggler span:nth-child(2) {
        opacity: 1;
    }

    .navbar-toggler span:nth-child(3) {
        transform: translate(0%, 0%) rotate(0deg);
    }
}



@media (min-width: 992px) {
    .nav-item {
        margin-left: 18px;
    }
}

@media (min-width: 1222px) {
    .nav-item {
        margin-left: 30px;
    }
}


.heightvh {
    height: 80vh;
}

@media (max-width: 767px) {
    .heightvh {
        height: auto;
    }
}


/* public-profile-page */
.public-profile-page .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
}

.public-profile-page .nav-link:focus,
.public-profile-page .nav-link:hover {
    color: var(--bs-nav-tabs-link-active-color);
}

.btn-primary-black {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.btn-primary-black:hover {
    background-color: transparent;
    color: #000;
    border-color: #000;
}

.btn-eye-custom {
    border-color: #dee2e6;
    border-left: 0;
}

.chatta {
    position: absolute;
    opacity: 0;
    right: 70px;
    bottom: 0px;
    width: 180px;
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.btn-wa {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.btn-wa:hover .chatta {
    opacity: 1;

}

@media (min-width: 576px) {
    .lg-close {
        font-size: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* Dashboard */
@media (min-width: 768px) {
    .casi_list {
        padding-top: 46px;
    }
}

.casi_item {
    padding: 1rem;
    border: 1px solid #fff;
    background-color: #fff;
    color: #000;
    display: flex;
    align-items: start;
}

.casi_item:hover {
    background-color: #000;
    color: #fff;
}

.casi_num {
    font-size: 3rem;
    line-height: 1;
    margin-left: 1rem;
}

#ordine_form .form-control,
#ordine_form .form-control:focus {
    background-color: transparent;
    border: 1px solid var(--bs-gray-500);
}

/* Ordine */
@media (min-width: 768px) {
    .border_dashed_right {
        border-right: 1px dashed var(--bs-gray-500);
    }
}

.border_dashed_bottom {
    border-bottom: 1px dashed var(--bs-gray-500);
}



.loader {
    font-size: 10px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: fixed;
    text-indent: -9999em;
    animation: mulShdSpin 1.1s infinite ease;
    transform: translateZ(0);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loader {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 99;
}

@keyframes mulShdSpin {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

.canvas-container {
    width: 100%;
    max-height: 200px;
    aspect-ratio: 2 / 1;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid var(--bs-gray-500);
    border-radius: 0.375rem;
}

.dashboard_table_ordini .form-control,
.dashboard_table_ordini .form-select {
    color: #000 !important;
}

/* Print Ordine */
@media print {

    nav,
    #op_header,
    footer {
        display: none !important;
    }

    #op_wrapper {
        background-color: #373737;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #op_card {
        max-width: 90% !important;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }

}