/* Default: nascondi dropdown su desktop */
.prenotazioni-mobile-select-wrapper {
    display: none;
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {

    .nav-underline .nav-link {
        font-size: 14px;
    }

    .nav-underline .nav-link.active,
    .nav-underline .show>.nav-link {
        font-size: 14px;
    }

    .magazzino-detail-column {
        padding: 64px 44px;
    }

    .btn-seleziona-destinatario,
    .btn-seleziona-destinatario:hover {
        padding: 12px 50px;
    }

    .btn-cerca-prenotazioni,
    .btn-cerca-prenotazioni:hover {
        padding: 9px 20px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {

    /* Custom navbar toggler icon */
    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler:focus {
        border: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler-icon {
        background-image: url('../img/hamburger-icon.svg') !important;
        background-size: contain;
        width: 30px;
        height: 30px;
    }

    /* Mobile Menu Offcanvas Styles */
    .mobile-menu-offcanvas {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #F6F6F6;
    }

    .mobile-menu-offcanvas .offcanvas-header {
        padding: 20px 24px;
        border-bottom: none;
        background-color: var(--secondary-bg-color);
    }

    .mobile-menu-offcanvas .mobile-menu-logo img {
        max-width: 150px;
    }

    .mobile-menu-offcanvas .btn-close {
        font-size: 24px;
        opacity: 1;
        background: transparent url('../img/close-simple-icon.svg') center/contain no-repeat;
        padding: 0;
        width: 24px;
        height: 24px;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-menu-offcanvas .btn-close:focus {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .mobile-menu-offcanvas .offcanvas-body {
        padding: 40px 24px 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--primary-bg-color);
    }

    .mobile-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-item {
        margin-bottom: 0;
        border-bottom: 1px solid #E0E0E0;
    }

    .mobile-nav-link {
        display: block;
        padding: 20px 0;
        color: #313131;
        font-family: var(--primary-font-family);
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        text-decoration: none;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        color: #03A9F4;
    }

    .mobile-menu-footer {
        margin-top: auto;
        padding-top: 40px;
    }

    .mobile-area-personale {
        display: flex;
        align-items: center;
        padding: 16px 0;
        color: #313131;
        font-family: var(--primary-font-family);
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        text-decoration: none;
        margin-bottom: 24px;
    }

    .mobile-area-personale img {
        filter: brightness(0) saturate(100%) invert(58%) sepia(93%) saturate(2684%) hue-rotate(170deg) brightness(100%) contrast(96%);
        width: 26px;
        height: 26px;
    }

    .mobile-lang-selector {
        display: flex;
        gap: 16px;
    }

    .mobile-lang-btn {
        background: transparent;
        border: none;
        color: #757575;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 400;
        padding: 8px 16px;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .mobile-lang-btn.active {
        color: #03A9F4;
        font-weight: 500;
    }

    .mobile-lang-btn:hover {
        color: #03A9F4;
    }

    /* Dropdown per prenotazioni su mobile/tablet */
    .prenotazioni-mobile-select-wrapper {
        display: block;
        margin-bottom: 24px;
    }

    .prenotazioni-mobile-select {
        width: 100%;
        padding: 18px 19px;
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20.2px;
        background-color: var(--secondary-bg-color);
        background-image: url("../img/arrow_down.svg");
        background-repeat: no-repeat;
        background-position: right 16px center;
        border: 0;
        background-size: 16px;
        border-radius: 10px;
        appearance: none;
        cursor: pointer;
        transition: border-color 0.3s ease;
    }

    .prenotazioni-mobile-select:focus {
        outline: none;
        border-color: #03A9F4;
    }

    /* Nascondi le tab classiche su mobile/tablet */
    .tab-prenotazioni {
        display: none !important;
    }

    h2 {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 36.525px;
    }

    h2.nome-utente {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 36.525px;
    }

    h3 {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 36.525px;
    }

    .btn-confirm-request,
    .btn-confirm-request:hover {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .prenotazioni-card {
        background: none;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
    }

    .prenotazione-info-home {
        border-bottom: none !important;
        padding: 21px 13px !important;
        border-radius: 10px;
        background: var(--secondary-bg-color);
    }

    .card.card-vettori {
        padding: 28px 45px;
    }

    #proseguiStep2Btn {
        padding: 19px 50px;
        width: 75% !important;
    }

    #mappaModal>.modal-dialog {
        margin: 0;
        max-width: 100%;
    }

    #map {
        min-height: 350px;
    }

    .magazzino-detail-column {
        padding: 14px 27px;
    }

    .btn-seleziona-destinatario,
    .btn-seleziona-destinatario:hover {
        width: 100%;
    }

    .indirizzi-page-wrapper .search-magazzino-input,
    .indirizzi-page-wrapper form,
    .indirizzi-page-wrapper .search-magazzino-wrapper,
    .indirizzi-page-wrapper .btn-conferma-prenotazione {
        width: 100%;
    }

    .card-indirizzo {
        padding: 20px 15px;
    }

    .card-vettore {
        padding: 10px 20px;
        background-color: var(--secondary-bg-color);
        border-radius: 12px;
        overflow: hidden;
    }

    .card-indirizzo .indirizzo-logo {
        width: 55px;
        height: 55px;
    }

    .card-vettore .indirizzo-logo {
        width: 30px;
        height: 30px;
    }

    .card-indirizzo p,
    .card-vettore p {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 19px;
    }

    .card-indirizzo .ragione-sociale-text,
    .card-vettore .ragione-sociale-text {
        color: #8A8A8A;
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24.171px;
    }

    .indirizzo-logo img {
        max-width: 55px;
        max-height: 55px;
    }

    .card-vettore .indirizzo-logo img {
        max-width: 30px;
        max-height: 30px;
    }

    .invite-vet,
    .new-vet,
    .inp-s-w100,
    .inp-s-w100 .search-magazzino-wrapper {
        width: 100%;
    }

    .tab-pane-prenotazioni .border-divider {
        border-bottom: solid 1px #D1D1D1 !important;
        border-radius: 0;
    }

    .tab-content-prenotazioni {
        border-radius: 10px;
    }

    .new-icon {
        width: 30px;
        height: 30px;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {

    /* Fix overflow prenotazioni */
    .prenotazione-info-home .sub-info-home {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .prenotazione-info-home .title-prenotazione-info-home {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .prenotazione-info-home {
        overflow-x: visible !important;
    }

    .prenotazione-info-home [class*="col-"] {
        overflow-x: visible !important;
    }

    h2 {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 25px;
    }

    h2.nome-utente {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
    }

    .profile-image {
        max-width: 60px;
        max-height: 60px;
    }

    .tab-pren-home,
    #prenotazioniTabContent {
        border-radius: 10px;
    }

    .package-info-icon {
        max-width: 64px;
        max-height: 64px;
        width: 100%;
        height: auto;
    }

    .tab-content-prenotazioni {
        padding: 20px;
    }

    .prenotazione-info-home {
        padding-bottom: 3rem !important;
    }

    h1.title-prenotazioni.step-1 {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 27px;
        font-style: normal;
        font-weight: 600;
        line-height: 36.525px;
    }

    h4.vettore-info.step-1 {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 36.525px;
    }

    .magazzino-card {
        padding: 27px 24px !important;
    }

    .magazzino-mappa-link {
        color: var(--link-text-color);
        font-family: var(--primary-font-family);
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 19px;
    }

    .magazzino-mappa-link img {
        width: 17px;
        height: 17px;
    }

    .magazzino-detail-column .border-divider {
        border: none !important;
    }

    .label-step-5 {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 36.525px;
        margin-bottom: 0;
    }

    .btn-modifica img,
    .btn-elimina img {
        width: 30px;
        height: auto;
    }

    .card-indirizzo .ragione-sociale-text,
    .card-vettore .ragione-sociale-text {
        color: #8A8A8A;
        font-family: var(--primary-font-family);
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 24.171px;
    }

    .h-90 {
        height: 60vh !important;
    }
}

/* Extra Small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

    /* Fix overflow prenotazioni */
    .prenotazione-info-home .sub-info-home {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .prenotazione-info-home .title-prenotazione-info-home {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .prenotazione-info-home {
        overflow-x: visible !important;
    }

    .prenotazione-info-home [class*="col-"] {
        overflow-x: visible !important;
    }

    .offcanvas-header .btn-close {
        margin: 0;
    }

    .calendario-wrapper .flatpickr-day {
        height: auto;
        max-width: 13.28% !important;
    }

    .vettore-info-card img {
        max-width: 60px;
        max-height: 60px;
    }

    .vettore-info-card h5 {
        color: #8A8A8A;
        font-family: var(--primary-font-family);
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 13px;
    }

    .card-prenotazione.pending {
        padding: 20px;
    }

    .title-status-page.pending {
        color: var(--third-text-color);
        text-align: center;
        font-family: var(--primary-font-family);
        font-size: 27px;
        font-style: normal;
        font-weight: 600;
        line-height: 36.525px;
    }

    .box-prenotazione-cod p {
        color: var(--third-text-color);
        text-align: center;
        font-family: var(--primary-font-family);
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }

    .warning-text.pending {
        color: var(--link-text-color);
        font-family: var(--primary-font-family);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 21.2px;
        text-align: start !important;
    }

    .alert-warning-text.penging {
        color: var(--link-text-color);
        font-family: var(--primary-font-family);
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 21.2px;
        text-align: start !important;
    }

    .h-90 {
        height: 60vh !important;
    }

    .sub-title-dettaglio {
        color: var(--third-text-color);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 36.525px;
    }

    .detail-txt-cusotm {
        width: 75%;
    }
}