/* --- Media Queries per Responsive Design --- */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        padding: 0;
        background-color: white; /* Sfondo bianco su mobile */
        display: block; /* Rimuove il flex centering del body */
    }

    .main-menu-btn {
        font-size: 1.3rem; /* Aumenta la dimensione del testo per una migliore leggibilità su mobile */
        padding: 22px 20px; /* Aumenta leggermente il padding per bilanciare */
    }

    #submenu-list li a {
        font-size: 1.3rem;
        min-height: 128px;
        padding: 24px 76px 24px 22px;
    }

    #submenu-list li {
        border-radius: 30px;
        margin-bottom: -34px;
    }

    #submenu-list li a::after {
        right: 20px;
        bottom: 20px;
        width: 34px;
        height: 34px;
    }

    .submenu-link-label {
        gap: 12px;
    }

    .submenu-type-icon {
        font-size: 1.45rem;
    }

    .filter-btn {
        padding: 9px 14px;
        font-size: 0.88rem;
        gap: 8px;
    }

    .submenu-header,
    .list-view-header {
        position: relative;
        overflow: visible;
        min-height: 58px;
    }

    .submenu-header #search-container,
    .list-view-header #search-container {
        position: absolute;
        top: 50%;
        right: 8px;
        left: auto;
        transform: translateY(-50%);
        margin: 0;
        z-index: 8;
    }

    .submenu-header #search-container.search-open,
    .list-view-header #search-container.search-open {
        width: calc(100% - 58px);
        max-width: none;
        min-height: 46px;
        padding: 10px 14px;
        background: #f1f1f1;
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }

    .submenu-header.search-active .filter-btn,
    .list-view-header.search-active .filter-btn {
        padding-left: 12px;
        padding-right: 12px;
        gap: 0;
    }

    .submenu-header.search-active .filter-btn span,
    .list-view-header.search-active .filter-btn span {
        display: none;
    }

    .submenu-header.search-active .filter-btn i,
    .list-view-header.search-active .filter-btn i {
        margin: 0;
    }

    .submenu-header.search-active #search-container,
    .list-view-header.search-active #search-container {
        margin-left: 0;
    }

    .submenu-header #search-container.search-open #search-close-icon,
    .list-view-header #search-container.search-open #search-close-icon {
        display: block;
        position: static;
        color: #666;
        font-size: 1.1rem;
        margin-left: 10px;
        cursor: pointer;
    }

    .submenu-header #search-container.search-open #search-icon,
    .list-view-header #search-container.search-open #search-icon {
        display: none;
    }

    .submenu-header #search-container.search-open #search-input,
    .list-view-header #search-container.search-open #search-input {
        min-width: 0;
    }

    #submenu-title, #list-title, #bollicine-menu h2, #all-grapes-menu h2 {
        font-size: 1.2rem;
    }

    /* NUOVO: Adatta i bottoni Italia/Esteri su mobile */
    .region-control-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .modal-content {
        width: 95%;
        padding: 20px;
    }

    #modal-tech-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tech-value {
        max-width: 100%;
        text-align: left;
    }

    .price-row .tech-value {
        justify-content: flex-start;
    }
    /* NUOVO: Stili per il footer su mobile/tablet */
    footer {
        /* Non è più necessario nascondere il footer, il layout flexbox lo gestisce correttamente */
    }

    .footer-content h4 {
        font-size: 1.1rem; /* Riduci la dimensione del titolo */
    }

    .footer-content p, .copyright {
        font-size: 0.6rem; /* Riduci la dimensione del testo */
        margin: 4px 0; /* Margine minimo tra i paragrafi */
    }

    .credits {
        font-size: 0.4rem; /* Dimensione specifica per mobile/tablet */
    }

    /* NUOVO: Mappa più grande su mobile per migliorare l'usabilità */
    #italy-map {
        max-height: 70vh; /* Aumenta l'altezza massima rispetto ai 300px desktop */
    }

    /* FIX: App Container Full Screen su Mobile */
    .app-container {
        width: 100%;
        max-width: none;
        height: 100vh; /* Fallback */
        height: 100dvh; /* FIX: Usa dynamic viewport height per evitare problemi con barre browser */
        max-height: none;
        border-radius: 0; /* Rimuove angoli arrotondati */
        box-shadow: none; /* Rimuove ombra */
        padding: 15px 0; /* Padding verticale solo */
    }

    header, #navigation-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #kitchen-selection .collections-list {
        margin-left: -5px; /* Adatta margine su mobile */
        margin-right: -5px;
    }

    /* NUOVO: Modali Slide-Up su Mobile */
    .modal-overlay {
        align-items: flex-end; /* Allinea in basso */
        padding: 0;
    }
    .modal-content {
        border-radius: 30px 30px 0 0; /* Arrotonda solo sopra */
        margin: 0;
        max-width: none;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Animazione discesa ricerca */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    #italy-map-container {
        max-height: 75vh; /* Permette al contenitore di espandersi */
    }

    /* Ottimizza spazio per la mappa */
    .map-modal-content {
        width: 100%;
        padding: 20px 5px;
    }

    /* NUOVO: Griglia 2x2 su Mobile per i pulsanti Landing */
    .landing-buttons {
        gap: 10px;
        padding: 10px;
    }

    .landing-btn {
        min-width: 135px; /* Ridotto per permettere 2 colonne su schermi piccoli */
        min-height: 140px;
        padding: 15px 10px;
    }

    .landing-btn .landing-btn-title {
        font-size: 1.2rem;
        gap: 5px;
    }

    .landing-btn i {
        font-size: 2rem;
    }

    #alphabet-index,
    #wineries-alphabet-index,
    #monovarietal-alphabet-index {
        right: 5px; /* Closer to edge on smaller screens */
        padding: 3px;
    }
    .index-letter {
        font-size: 0.6rem;
        padding: 1px 3px;
    }

    #wine-modal #modal-tech-list li.price-row.multi-price {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 14px 16px !important;
        border-radius: 18px;
        margin-top: 14px;
    }

    #wine-modal #modal-tech-list li.price-row.multi-price .tech-label {
        width: auto;
        flex: 0 0 auto;
        min-width: 0;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        justify-content: center;
        text-align: center;
    }

    #wine-modal #modal-tech-list li.price-row.single-price {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 14px 16px !important;
        border-radius: 18px;
        margin-top: 14px;
    }

    #wine-modal #modal-tech-list li.price-row.single-price .tech-label {
        width: auto;
        flex: 0 0 auto;
        min-width: 48px;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        justify-content: flex-start;
        text-align: left;
    }

    #wine-modal #modal-tech-list li.price-row .tech-value {
        width: auto;
        max-width: 100%;
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    #wine-modal #modal-tech-list li.price-row .price-part {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        padding: 9px 9px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(93, 135, 255, 0.12);
        font-size: 0.93rem;
        min-width: 0;
        overflow: hidden;
    }

    #wine-modal #modal-tech-list li.price-row .price-part-label {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        min-width: 0;
        text-align: left;
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    #wine-modal #modal-tech-list li.price-row .price-part-label span:last-child {
        min-width: 0;
        white-space: nowrap;
    }

    #wine-modal #modal-tech-list li.price-row .price-part-value {
        min-width: 58px;
        max-width: none;
        text-align: right;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        white-space: nowrap;
        margin-left: 6px;
        font-size: 0.9rem;
    }
}

/* NUOVO: Media query per il comportamento della ricerca su TABLET e DESKTOP */
@media (min-width: 769px) {
    .submenu-header #search-container.search-open,
    .list-view-header #search-container.search-open {
        position: absolute; /* Si sgancia dal flusso per non spostare gli altri elementi */
        top: 5px;           /* Allineamento verticale simile a prima */
        right: 0;           /* Ancorato a destra */
        width: 50%;         /* Occupa metà dello spazio, evitando di toccare il titolo */
        max-width: 450px;   /* Limite massimo di larghezza per schermi molto grandi */
        flex-grow: 0;       /* Disabilita la crescita flessibile */
    }

    #food-category-anchors,
    #list-category-anchors {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    /* Alphabetical Index Styling */
    #alphabet-index,
    #wineries-alphabet-index,
    #monovarietal-alphabet-index {
        position: sticky; /* Sticky within its parent scroll container */
        top: 10px; /* Distance from the top of the scroll container */
        align-self: flex-start; /* Align to the start of the cross-axis in a flex container */
        margin-left: 10px; /* Space from the main list content */
        display: flex;
        flex-direction: column;
        gap: 2px;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(5px);
        border-radius: 10px;
        padding: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 100; /* Ensure it's above other content */
        height: fit-content; /* Only take up necessary height */
    }

    .index-letter {
        font-size: 0.7rem;
        font-weight: bold;
        color: var(--text-secondary);
        padding: 2px 5px;
        cursor: pointer;
        transition: all 0.2s;
        border-radius: 5px;
        text-align: center;
    }

    .index-letter:hover {
        background-color: var(--accent-color);
        color: white;
    }

    /* Ensure the actual lists take up available space */
    #all-grapes-list,
    #wineries-list,
    #monovarietal-list {
        flex-grow: 1;
        margin-right: 10px; /* Space between list and index */
    }
}