/* Mappa a tutta larghezza sopra i risultati (Hotellistpage.html), non piu' nella sidebar
   "hidden-mobile" del tema (invisibile sotto i 992px). */
.ywh-list-map-wrapper {
    margin-bottom: 1.5rem;
}

/* Colonna filtri facilities (List.html, dentro il plugin - non piu' nella sidebar statica).
   Bug reale corretto (2026-08-07): "striped-background" (sul markup HTML) non ha MAI avuto una
   regola CSS attiva in questo progetto - e' stata disattivata altrove rinominandola in
   ".NOstriped-background" (custom.css di sculptor_ywh), quindi il pannello non ha mai avuto uno
   sfondo proprio. Su desktop non si notava (dentro il flusso normale della pagina, sfondo bianco
   della pagina sotto), diventato visibile ora che su mobile e' un overlay fisso sopra il
   contenuto (foto/card sotto che trasparivano). Sfondo bianco esplicito qui, non piu' affidato a
   una classe di fatto inerte. */
.ywh-filters-boxed {
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    background-color: #fff;
}
.ywh-filters-heading {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.ywh-filters-boxed .form-check {
    margin-bottom: 0.5rem;
}
/* Sottotitoli "Stars"/"Facilities" dentro la sidebar filtri (2026-07-26, da quando la sidebar
   contiene piu' di una sezione di filtri, non solo le facilities). */
.ywh-filters-subheading {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}
.ywh-filters-subheading:first-of-type {
    margin-top: 0;
}

/* Filtro nazione (2026-08-10) - lista di link, non checkbox (selezione singola, vedi
   AccomodationController::buildCountryFilterOptions()). */
.ywh-country-filter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}
.ywh-country-filter-list li {
    margin-bottom: 0.35rem;
}
.ywh-country-filter-list a {
    color: inherit;
    text-decoration: none;
}
.ywh-country-filter-list a:hover {
    text-decoration: underline;
}
.ywh-country-filter-list li.is-active a {
    font-weight: 600;
    color: var(--main-color, #ffb900);
}
/* Accordion (2026-08-10): le voci oltre le prime N (COUNTRY_FILTER_VISIBLE_COUNT in
   AccomodationController) restano nascoste finche' la lista non ha ".is-expanded". */
.ywh-country-filter-list .ywh-country-extra {
    display: none;
}
.ywh-country-filter-list.is-expanded .ywh-country-extra {
    display: list-item;
}
.ywh-country-filter-toggle {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1rem;
    color: var(--main-color, #ffb900);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.ywh-country-filter-toggle:hover {
    text-decoration: underline;
}

/* Pannello filtri a comparsa su mobile (2026-08-07) - vedi commento in List.html. Scoped
   interamente alla stessa soglia "lg" di Bootstrap (991.98px): da 992px in su nessuna di queste
   regole si applica, "#ywh-filters-panel" resta la sidebar statica di sempre. z-index 10000 (sopra
   l'header fisso del tema, 9999 - sculptor_ywh/custom.css): un pannello a tutta altezza deve
   coprire anche l'header quando aperto, altrimenti la sua parte superiore risulterebbe nascosta
   sotto di esso. */
@media (max-width: 991.98px) {
    #ywh-filters-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 340px;
        z-index: 10000;
        margin: 0;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #ywh-filters-panel.is-open {
        transform: translateX(0);
    }
    .ywh-filters-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .ywh-filters-backdrop.is-open {
        display: block;
    }
    .ywh-filters-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 2.25rem;
        height: 2.25rem;
        border: 0;
        border-radius: 50%;
        background-color: #eef1f5;
        color: #1c2733;
        font-size: 1rem;
    }
}
/* Blocca lo scroll della pagina sotto il pannello aperto (qualunque larghezza schermo il JS lo
   applichi, ma in pratica solo sotto 992px dato che il bottone che lo attiva e' "d-lg-none"). */
.ywh-filters-open-lock {
    overflow: hidden;
}

/* Titolo dinamico della lista hotel (List.html) - "Hotels in {città/paese}" o generico.
   font-size esplicito: senza, un <h1> nudo eredita una dimensione del tema non pensata per stare
   sopra una lista di card (troppo grande rispetto alle intestazioni vicine). */
.ywh-list-title {
    margin: 1rem 0;
    font-size: 1.75rem;
    text-transform: uppercase;
}

/* Altezza uniforme e FISSA per tutte le card della lista hotel (2026-07-25, quarto tentativo).
   Storia: (1) altezza fissa in px sul solo contenitore immagine (240px) lasciava una fascia bianca
   quando la colonna di testo era piu' alta; (2) height:100% sul contenitore immagine, contando
   sullo stretch di default di Bootstrap ".row" (display:flex, align-items:stretch), risultava
   inaffidabile in pratica; (3) altezza fissa sulla ".row" con height:100% ancora a catena sul
   contenitore immagine (contando che lo stretch rendesse "definita" l'altezza della colonna, e
   quindi risolvibile la percentuale) - bug reale trovato in produzione: l'immagine usciva comunque
   dalla card quando piu' alta di 300px, cioe' quell'altezza non arrivava mai a diventare un valore
   concreto per il figlio, e "overflow:hidden" su un box la cui altezza risulta di fatto "auto" non
   taglia nulla. Soluzione definitiva: altezza in PX LETTERALE (non percentuale) direttamente sul
   contenitore immagine stesso - nessuna catena di percentuali su piu' livelli genitore/figlio da
   cui dipendere, quindi nessuna ambiguita' possibile: overflow:hidden ora taglia sempre, qualunque
   sia il comportamento di stretch della riga circostante. */
.ywh-hotel-card .row {
    height: 300px;
}
.ywh-hotel-card .cruise_item_inner_content {
    height: 100%;
    overflow: hidden;
}
.ywh-hotel-card-img-wrapper.cruise_item_img {
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 20px 0 0 20px;
}
.ywh-hotel-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.ywh-hotel-card-img-wrapper:hover .ywh-hotel-card-image {
    transform: scale(1.05);
}
/* Nome struttura su una sola riga con ellissi: la piu' probabile causa di sforamento
   dell'altezza fissa sopra (nomi molto lunghi altrimenti andrebbero a capo su 2+ righe). */
.ywh-hotel-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Città/paese (+ indirizzo se presente, 2026-07-25): stessa tecnica di sopra, stesso motivo -
   con l'indirizzo aggiunto sulla stessa riga il testo combinato puo' diventare lungo. */
.ywh-hotel-card-location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ywh-hotel-card-rating-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.ywh-hotel-card-rating-badge i {
    color: #f5a623;
}

/* Bug reale corretto (2026-08-07): l'altezza fissa a 300px sopra e' pensata SOLO per il layout
   desktop, dove le colonne "col-lg-4"/"col-lg-8" stanno affiancate e condividono quei 300px (foto
   a sinistra, testo a destra alto quanto vuole grazie a height:100%+overflow:hidden). Sotto i
   992px Bootstrap impila le due colonne (nessuna classe col-md/col-sm su AccomodationBox.html,
   comportamento di default): la STESSA riga da 300px deve allora contenere PRIMA la foto a piena
   larghezza (anch'essa fissata a 300px) POI tutto il testo sotto - budget insufficiente anche solo
   per la foto, con titolo/indirizzo/stelle/descrizione/facilities/bottone tagliati via
   overflow:hidden. Il tema originale non ha nessun vincolo di altezza qui (vedi ".cruise_item_img"/
   ".cruise_item_inner_content" in style.css, solo padding) - il vincolo fisso e' un'aggiunta
   nostra, mai corredata di un'eccezione mobile. Sotto i 992px: riga e contenuto tornano ad altezza
   naturale, la foto prende un'altezza fissa piu' bassa (non serve piu' "budgetare" la riga intera).
   Ellissi su titolo/indirizzo e line-clamp sulla descrizione (sopra/sotto in questo file) restano
   utili ma non piu' l'unica difesa contro lo sforamento. */
@media (max-width: 991.98px) {
    .ywh-hotel-card .row {
        height: auto;
    }
    .ywh-hotel-card-img-wrapper.cruise_item_img {
        height: 220px;
        border-radius: 20px 20px 0 0;
    }
    .ywh-hotel-card .cruise_item_inner_content {
        height: auto;
        overflow: visible;
        padding-top: 15px;
    }
}

/* Card della lista hotel: ombra leggera con effetto hover, per renderle piu' invitanti invece di
   un semplice bordo piatto. */
.ywh-hotel-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ywh-hotel-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.ywh-hotel-card-stars {
    color: #f5a623;
    margin-bottom: 0.5rem;
}

/* Descrizione della card fissata a 2 righe, sempre della stessa altezza (2026-07-25) - sia che il
   teaser occupi 1 riga o 2, min-height copre il caso corto e -webkit-line-clamp tronca quello
   lungo, cosi' l'altezza della colonna di testo (e quindi, vedi sopra, della foto affiancata) non
   varia da card a card. Scoping a ".ywh-hotel-card" (non solo ".cruise_content_middel_wrapper",
   condivisa dal tema con altri tipi di card che hanno struttura diversa, es. left/right interni). */
.ywh-hotel-card .cruise_content_middel_wrapper p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    min-height: 3em;
    margin-bottom: 0;
}

.ywh-hotel-card-facilities {
    margin-bottom: 0.75rem;
}
/* 2 colonne x 2 righe invece del flex-wrap naturale ereditato da .ywh-facilities-chips (dava
   "3 su una riga + 1 sulla seconda" con 4 elementi) - richiesto 2026-07-25. Selettore a doppia
   classe: stessa specificita' (una classe) della regola .ywh-facilities-chips piu' sotto in questo
   file, ma vince comunque perche' piu' specifica (due classi), indipendentemente dall'ordine. */
.ywh-facilities-chips.ywh-hotel-card-facilities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.ywh-hotel-card-facilities li {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}

/* Pagina "tutte le città di un paese" (MenuController::citiesAction). */
.ywh-cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem 1rem;
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}
.ywh-cities-grid li a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    background-color: #eef1f5;
    color: #1c2733;
    text-decoration: none;
}
.ywh-cities-grid li a:hover,
.ywh-cities-grid li a:focus {
    background-color: #dfe4ea;
}

/* Pagina "tutti i paesi" (MenuController::allCountriesAction, 2026-08-18) - riusa
   ".ywh-cities-grid" sopra per la griglia dei singoli link, ma raggruppata per sotto-regione
   invece di un'unica lista piatta ("sembrava un foglio Excel" con ~249 paesi in fila), con
   ricerca live (custom.js, sculptor_ywh) e bandiera per paese (icona core TYPO3, stesso registro
   del selettore lingua in header). */
.ywh-allcountries-search {
    max-width: 420px;
    margin: 1.5rem 0 1rem;
}
.ywh-allcountries-search-input {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #d5dae1;
    border-radius: 999px;
    font-size: 1rem;
}
.ywh-allcountries-search-input:focus {
    outline: none;
    border-color: var(--main-color, #ffb900);
    box-shadow: 0 0 0 3px rgba(255, 185, 0, 0.15);
}
.ywh-allcountries-noresults {
    color: #6b7684;
}
.ywh-allcountries-group {
    margin-top: 2rem;
}
.ywh-allcountries-group-label {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1c2733;
    border-bottom: 2px solid #eef1f5;
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}
.ywh-allcountries-list li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ywh-allcountries-list li a svg,
.ywh-allcountries-list li a img {
    flex: 0 0 auto;
    border-radius: 2px;
}
/* Nascosti via JS (custom.js) durante il filtro live, non tramite un framework di stato - sono
   solo ~249 <li> in pagina, un semplice toggle "hidden" e' piu' che sufficiente. */
.ywh-allcountries-list li[hidden],
.ywh-allcountries-group[hidden] {
    display: none;
}

/* Megamenu paesi/città (MenuController::megamenuAction) - pensato per stare nell'header di
   sculptor_ywh a posizione fissa, non fra i content element trascinabili. */
/* min-height/line-height/font-size espliciti e !important qui: il tema imposta reset globali su
   "button" (line-height/padding molto compatti, tipici delle nav Bootstrap) che schiacciavano la
   barra a ~20px di altezza - questi selettori sono esclusivi del megamenu, non toccano nient'altro. */
.ywh-megamenu-bar {
    position: relative;
    z-index: 15;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(0, 0, 0, 0.08);
}
.ywh-megamenu-countries {
    display: flex;
    align-items: stretch;
    /* Prima era "flex-wrap: nowrap" + "overflow-x: auto" (striscia scorrevole): l'overflow-x
       impostato da solo forza il browser a calcolare anche overflow-y come "auto" (regola della
       spec CSS quando un asse e' esplicito e l'altro no), che tagliava il pannello a tendina
       (position:absolute) dentro la riga alta 48px invece di lasciarlo aperto sotto - bug confermato
       due volte. "wrap" evita il problema alla radice: nessun overflow, nessuna scrollbar, il
       menu va semplicemente a capo su piu' righe se i paesi non ci stanno su una sola. */
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}
.ywh-megamenu-country {
    position: relative;
    flex: 0 0 auto;
    display: flex;
}
.ywh-megamenu-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem;
    min-height: 48px !important;
    padding: 0.5rem 1rem !important;
    border: 0;
    background: none;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    /* "--header-text-color" definita in sculptor_ywh/Resources/Public/Css/style.css (2026-08-20,
       richiesto esplicitamente: stesso navy di logo/menu principale) - fallback allo stesso hex,
       stesso principio gia' in uso in questo file per "--main-color". */
    color: var(--header-text-color, #1a2c4e);
    font-weight: bold;
}
.ywh-megamenu-toggle i {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.ywh-megamenu-country.is-open .ywh-megamenu-toggle i {
    transform: rotate(180deg);
}
.ywh-megamenu-count {
    color: #9aa5b1;
    font-size: 0.8rem;
}
/* "All countries" (2026-07-25): stessa resa visiva di ".ywh-megamenu-toggle" (i bottoni dropdown),
   ma con le sue proprieta' proprie invece di condividerne la classe - quella classe e' anche
   l'aggancio dello script del dropdown (querySelectorAll), e questo e' un link di navigazione
   reale, non un toggle (vedi commento in Megamenu.html). */
.ywh-megamenu-all-countries {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem;
    min-height: 48px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    color: var(--header-text-color, #1a2c4e);
    font-weight: bold;
    text-decoration: none;
}
.ywh-megamenu-all-countries:hover,
.ywh-megamenu-all-countries:focus {
    text-decoration: none;
    color: var(--header-text-color, #1a2c4e);
}
.ywh-megamenu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
}
.ywh-megamenu-country.is-open .ywh-megamenu-panel {
    display: block;
}
.ywh-megamenu-cities {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}
.ywh-megamenu-cities li a {
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    color: #1c2733;
    text-decoration: none;
    white-space: nowrap;
}
.ywh-megamenu-cities li a:hover,
.ywh-megamenu-cities li a:focus {
    background-color: #eef1f5;
}
.ywh-megamenu-viewall {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-top: 1px solid #eef1f5;
    padding-top: 0.6rem;
}

/* Menu "Nazioni" unito al pannello mobile "Pagine" (2026-08-07, richiesto esplicitamente) - vedi
   Megamenu.html/MenuPrimary.html per come il markup finisce dentro ".mean-nav" (il pannello che
   meanmenu genera per il menu pagine, clonando il sorgente ".mean-menu" a ogni resize). Qui solo
   l'aspetto SOLO nel nuovo contesto: da desktop (elemento nella sua posizione originale, fuori da
   ".mean-nav") nessuna di queste regole si applica, l'aspetto della barra nazioni resta quello di
   sempre.

   Bug reale corretto (2026-08-07, secondo giro): meanmenu.js nasconde INDISCRIMINATAMENTE ogni
   <ul> dentro ".mean-nav" allo stato chiuso ("jQuery(mean-nav ul).hide()", stile inline) e ne
   rivela solo il PRIMO al click sull'hamburger ("jQuery(mean-nav ul:first).slideDown()") - il
   nostro ".ywh-megamenu-countries" e' un SECONDO <ul> (dopo quello delle pagine), quindi restava
   nascosto per sempre; il titolo ".ywh-megamenu-mobile-heading" e' invece un <h3>, del tutto
   ignorato dal codice di meanmenu, quindi restava sempre visibile indipendentemente dal click
   sull'hamburger (osservato: visibile anche SENZA aver mai aperto il pannello). Fix: gestiamo noi
   la visibilita' di tutto cio' che meanmenu non sa gestire, agganciata allo stesso segnale di
   stato che il plugin usa per se stesso - la classe "meanclose" che alterna sul link
   ".meanmenu-reveal" (l'hamburger) a ogni click. "!important" necessario sulla lista nazioni: deve
   vincere sullo style inline "display:none" che jQuery.hide() applica direttamente sull'elemento
   (la specificita' di un attributo style inline batte qualunque selettore normale). */
.ywh-megamenu-mobile-heading {
    display: none;
}
/* "Destinations" per primo, senza toccare l'ordine nel DOM (2026-08-07, richiesto
   esplicitamente) - l'ordine SORGENTE deve restare "Pagine" prima di "Destinations" (meanmenu
   gestisce l'apri/chiudi SOLO sul primo <ul> che trova, ".mean-nav ul:first" - se "Destinations"
   fosse fisicamente primo nel DOM, sarebbe lui a diventare quel "primo ul" gestito da meanmenu, e
   "Pagine" resterebbe orfano/nascosto per sempre: bug reale gia' osservato spostandolo
   fisicamente). "order" su un contenitore flex ottiene lo stesso risultato visivo senza toccare
   il DOM che meanmenu legge. */
.mean-nav {
    display: flex;
    flex-direction: column;
}
.mean-nav .ywh-megamenu-mobile-slot {
    order: -1;
}
.mean-nav .ywh-megamenu-mobile-heading,
.mean-nav .ywh-megamenu-countries {
    display: none !important;
}
/* Compattato (2026-08-07, richiesto esplicitamente: "Destinations dovrebbe essere compattato") -
   meno padding verticale rispetto al primo giro, sia sul titolo che sui bottoni paese. */
.meanmenu-reveal.meanclose ~ .mean-nav .ywh-megamenu-mobile-heading {
    display: block !important;
    margin: 0;
    padding: 0.5em 5%;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa5b1;
    background-color: #f7f9fb;
}
.meanmenu-reveal.meanclose ~ .mean-nav .ywh-megamenu-countries {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}
.mean-nav .ywh-megamenu-bar {
    border-top: 0;
    background-color: transparent;
}
/* Bug reale corretto (2026-08-07, terzo giro): ".ywh-megamenu-country" e' "display:flex" (riga
   affiancata: bottone paese + pannello città) nel CSS di base, pensato per il layout ORIZZONTALE
   della barra desktop - dentro il pannello mobile, dove va impilato verticalmente come il resto
   del menu, questo faceva finire la lista città AFFIANCATA al nome del paese invece che SOTTO
   (osservato in screenshot: "Italien" a sinistra, città in colonna a destra). */
.mean-nav .ywh-megamenu-country {
    display: block;
}
.mean-nav .ywh-megamenu-toggle,
.mean-nav .ywh-megamenu-all-countries {
    width: 100%;
    min-height: 0 !important;
    padding: 0.6rem 5% !important;
    border-top: 1px solid #dbeefd !important;
}
/* Bug reale corretto (2026-08-07, terzo giro): ".mean-nav ul li" (meanmenu.css, libreria vendor)
   e' "float:left" senza un clearfix sul contenitore - va bene per un pannello corto come quello
   originale (solo pagine), ma con le nostre sezioni aggiunte (destinazioni, paesi espandibili) il
   contenuto floated non veniva piu' "contenuto" nell'altezza di ".mean-nav": lo sfondo bianco
   restava alto quanto il contenuto SENZA i nostri elementi aggiunti, che continuavano comunque a
   renderizzarsi sotto (i float non vengono mai tagliati da un genitore senza overflow:hidden) -
   risultato: contenuto della pagina sottostante visibile "attraverso" un pannello che sembrava
   finire troppo presto (osservato in screenshot: foto/titolo hotel visibili dietro al pannello
   aperto). Clearfix standard sul contenitore, scoping minimo e sicuro (nessun effetto quando il
   pannello e' corto, si limita a far si' che l'altezza reale includa SEMPRE tutto il contenuto). */
.mean-container .mean-nav::after {
    content: "";
    display: table;
    clear: both;
}
/* Pannello città: "static" invece di "absolute" solo qui (2026-08-07) - dentro un pannello mobile
   stretto e scrollabile un overlay posizionato in absolute rischia di essere tagliato dall'overflow
   di un antenato o sovrapporsi in modo scomodo; in flusso normale si espande semplicemente sotto la
   voce cliccata, stesso pattern "accordion" del resto del menu mobile. La lista città al suo
   interno e' un ALTRO <ul> colpito dallo stesso bug sopra - stessa soluzione, ma legata allo stato
   "aperto" del singolo paese (".is-open"), non a quello dell'hamburger: due segnali indipendenti,
   un paese puo' essere aperto solo se il pannello stesso lo e' gia' (altrimenti non e' cliccabile). */
.mean-nav .ywh-megamenu-panel {
    position: static;
    min-width: 0;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
    background-color: #f7f9fb;
}
.mean-nav .ywh-megamenu-cities {
    display: none !important;
}
.mean-nav .ywh-megamenu-country.is-open .ywh-megamenu-cities {
    display: block !important;
}

/* Placeholder "nessuna foto disponibile" - CSS puro, nessuna dipendenza da file immagine.
   Aggiornato 2026-07-25: misurato su dati reali di produzione, circa 2 hotel su 3 (non 1 su 3
   come stimato inizialmente dal PoC su un campione piccolo) non hanno foto in GIATA/MHG - vedi
   01-analisi-preventiva.md §3.1. E' quindi un caso FREQUENTE da gestire con eleganza, non
   un'eccezione rara. */
.ywh-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef1f5;
    color: #9aa5b1;
    max-width: 100%;
}

.ywh-image-placeholder i {
    font-size: 2.5rem;
}

/* Ottimizzazione UI/UX pagina dettaglio hotel (2026-07-24). */

.ywh-breadcrumb {
    margin: 1rem 0;
}
.ywh-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: #6b7684;
}
.ywh-breadcrumb li:not(:last-child)::after {
    content: "\203A";
    margin: 0 0.5rem;
    color: #b0b8c1;
}
.ywh-breadcrumb li[aria-current="page"] {
    color: #1c2733;
    font-weight: 600;
}

.ywh-star-rating {
    color: #f5a623;
}
.ywh-star-rating-number {
    color: #1c2733;
    font-size: 0.9rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.ywh-quick-cta {
    margin: 1rem 0;
}
/* Bug reale corretto (2026-08-07): il bottone era chiamato "quick CTA fissa" nell'intento
   originale ma non aveva mai avuto "position:fixed" - restava un blocco normale in cima alla
   pagina, scompariva scorrendo come qualunque altro contenuto. Sotto i 992px (dove questo blocco
   e' l'unico CTA rapido, l'equivalente desktop e' ".ywh-cta-sticky" nella sidebar che su mobile
   non esiste piu' essendo la sidebar impilata in fondo) diventa una barra fissa in fondo allo
   schermo, sempre raggiungibile durante lo scroll - pattern standard per i siti di prenotazione.
   z-index 40: sopra il contenuto normale, sotto l'header (9999, sculptor_ywh/custom.css) e sotto
   qualunque modale Bootstrap (lightbox foto inclusa, z-index Bootstrap di default >=1050) - i due
   non si sovrappongono comunque essendo uno in cima e l'altro in fondo allo schermo. */
@media (max-width: 991.98px) {
    .ywh-quick-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        margin: 0;
        padding: 0.65rem 1rem;
        background-color: #fff;
        box-shadow: 0 -0.35rem 1rem rgba(0, 0, 0, 0.12);
    }
}

/* Header a tutta larghezza sopra la galleria (2026-07-24: prima nome/indirizzo/stelle erano
   dentro la colonna stretta col-lg-8, la nuova galleria ha bisogno di tutta la larghezza). */
/* Titolo hotel: resta un h1 semantico (SEO/accessibilita' - un solo h1 per pagina), ma reso
   graficamente come un h2 (richiesto 2026-08-07). L'h1 di default del tema (82px/90px line-height,
   style.css) e' pensato per un banner hero a piena pagina, sproporzionato sopra indirizzo/stelle di
   questa intestazione compatta. Valori copiati 1:1 dalla regola "h2" in style.css. */
.ywh-hotel-header-main h1 {
    font-size: 36px;
    font-weight: 500;
    line-height: 40px;
}

.ywh-hotel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
/* Indirizzo (2026-07-25): secondario rispetto a città/paese sopra, grigio smorzato per
   informazioni di corredo. */
.ywh-hotel-address {
    color: #6b7684;
    font-size: 0.9rem;
    margin-top: -0.5rem;
}

/* Galleria "1 grande + 4 miniature" al posto dello slick carousel: piu' immersiva, e senza lo
   stacco visivo fra slider principale e striscia di miniature lamentato in precedenza. */
.ywh-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
    height: 480px;
    margin-bottom: 1.5rem;
}
.ywh-gallery-main,
.ywh-gallery-thumb {
    display: block;
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: zoom-in;
    background: none;
}
/* height in px letterale, non 100% (2026-07-25) - stesso bug e stessa causa gia' visti e corretti
   nelle card della lista hotel: height:100% qui dipendeva dal contenitore ".ywh-gallery-grid"
   essere "stretchato" a un valore definito dalla griglia CSS, ma in pratica risultava inaffidabile
   (foto piu' alte del previsto uscivano dal riquadro e invadevano il testo sotto). Valore letterale
   uguale a quello del contenitore: nessuna catena di percentuali da cui dipendere. */
.ywh-gallery-main {
    height: 480px;
}
.ywh-gallery-main img,
.ywh-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.ywh-gallery-main:hover img,
.ywh-gallery-thumb:hover img {
    transform: scale(1.04);
}
.ywh-gallery-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 0.5rem;
    height: 480px;
}
.ywh-gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
}
.ywh-gallery-zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
}
@media (max-width: 767px) {
    .ywh-gallery-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .ywh-gallery-main {
        height: 260px;
    }
    .ywh-gallery-thumbs {
        display: none; /* su mobile solo la foto principale: le altre restano raggiungibili dalla lightbox */
    }
}

.ywh-content-row {
    margin-top: 0.5rem;
}

.ywh-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}
.ywh-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
}
.ywh-modal-prev {
    left: 0.5rem;
}
.ywh-modal-next {
    right: 0.5rem;
}

.ywh-section-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}
.ywh-section-jumpnav a {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background-color: #eef1f5;
    color: #1c2733;
    font-size: 0.85rem;
    text-decoration: none;
}
.ywh-section-jumpnav a:hover,
.ywh-section-jumpnav a:focus {
    background-color: #dfe4ea;
}

/* Card per ogni sezione di testo, con tinta alternata e icona: prima erano solo titolo+paragrafo
   in sequenza, monotoni su hotel con molte sezioni. */
.ywh-text-card {
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
}
.ywh-text-card-tint {
    background-color: #f7f9fb;
}
.ywh-text-card-icon {
    color: #f5a623;
    margin-right: 0.5rem;
}

/* Sottotitolo di ogni gruppo (facilities raggruppate per sezione GIATA, AccomodationController::
   buildGroupedFacilities) - piu' piccolo del titolo "Facilities" sopra, non un vero h-level nuovo
   nella gerarchia visiva della sidebar. */
.ywh-facilities-group-heading {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}
.ywh-facilities-group-heading:first-of-type {
    margin-top: 0;
}

/* Chip che vanno a capo in base al contenuto invece di una griglia a colonne fisse: risolve la
   rottura del layout con nomi di facility lunghi in una colonna stretta (2026-07-24). */
.ywh-facilities-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ywh-facilities-chips li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background-color: #eef1f5;
    font-size: 0.85rem;
}
.ywh-facilities-chips i {
    color: #2e9e5b;
}

/* Sticky solo da lg in su: su mobile il bottone segue il normale flusso della pagina (c'e' gia'
   ".ywh-quick-cta" in cima per quello). "top" via custom property impostata a runtime in Show.html
   (altezza reale dell'header del tema, che diventa fixed/sticky dopo pochi px di scroll) invece di
   un valore fisso indovinato - un valore troppo piccolo lascia il bottone nascosto SOTTO l'header
   quando entrambi sono "stuck" (bug reale corretto 2026-07-25); il fallback 90px copre il caso in
   cui il JS non sia ancora partito. z-index modesto: solo per stare sopra al normale contenuto di
   pagina, non serve competere con l'header (9999) dato che l'offset corretto li tiene gia' separati. */
@media (min-width: 992px) {
    .ywh-cta-sticky {
        position: sticky;
        top: var(--ywh-cta-offset, 90px);
        z-index: 10;
    }
}

/* CTA piu' visibile (2026-08-10, richiesto esplicitamente) - icona + leggero effetto "respiro"
   sul bordo per attirare l'occhio senza essere invadente (rispetta prefers-reduced-motion). Colore
   del "respiro" preso letteralmente da "--main-color" del tema (sculptor_ywh/style.css, #ffb900 -
   nessuna variabile "-rgb" separata gia' definita nel tema, valore RGB scritto qui a mano). Il box
   sticky desktop riceve anche uno sfondo/bordo tinti sullo stesso colore: prima si confondeva con
   lo sfondo bianco della sidebar. */
.ywh-cta-highlight i {
    margin-right: 0.4rem;
}
@media (prefers-reduced-motion: no-preference) {
    .ywh-cta-highlight {
        animation: ywhCtaPulse 2.4s ease-in-out infinite;
    }
}
@keyframes ywhCtaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 185, 0, 0.35); }
    50% { box-shadow: 0 0 0 0.5rem rgba(255, 185, 0, 0); }
}
.ywh-cta-sticky {
    background-color: rgba(255, 185, 0, 0.08);
    border: 1px solid rgba(255, 185, 0, 0.3);
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Banner "riusa i tuoi dati" nel form di contatto (ContactForm.html, 2026-07-25) - nascosto di
   default via style="display:none" inline nel template, mostrato via JS solo se c'e' un
   salvataggio recente in localStorage. */
.ywh-contact-reuse-banner {
    background-color: #eef1f5;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.ywh-contact-reuse-banner p {
    margin-bottom: 0.75rem;
}
.ywh-contact-reuse-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ywh-contact-reuse-dismiss {
    border: 0;
    background: none;
    color: #6b7684;
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 0;
}

/* Honeypot anti-spam (ContactForm.html, 2026-08-10) - fuori schermo via posizionamento assoluto,
   non "display:none": alcuni bot piu' sofisticati saltano i campi display:none in fase di
   compilazione automatica, mentre uno spostato fuori dal viewport resta "compilabile" dal loro
   punto di vista (il markup ha comunque aria-hidden + tabindex="-1" per escluderlo da tastiera/
   screen reader lato utenti reali). */
.ywh-hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ywh-form-error {
    display: block;
    color: #d9534f;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

/* Contatore caratteri messaggio del form di contatto (2026-08-10, richiesto esplicitamente). */
.ywh-form-hint {
    display: block;
    color: #8a94a3;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    text-align: right;
}

/* Spinner sul bottone di invio del form di contatto (2026-08-10, richiesto esplicitamente) -
   ".ywh-submit-label" nascosto via "visibility" (non "display:none") cosi' il bottone non cambia
   larghezza quando lo spinner appare al suo posto, centrato in assoluto sopra lo spazio del testo
   nascosto. Colori presi dallo stesso bianco del testo del bottone ("--white-color" del tema),
   nessuna nuova palette da introdurre per un elemento cosi' piccolo. */
#ywh-contact-submit {
    position: relative;
}
#ywh-contact-submit .ywh-submit-spinner {
    display: none;
}
#ywh-contact-submit.ywh-submitting {
    cursor: default;
}
#ywh-contact-submit.ywh-submitting .ywh-submit-label {
    visibility: hidden;
}
#ywh-contact-submit.ywh-submitting .ywh-submit-spinner {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ywhSubmitSpin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    #ywh-contact-submit.ywh-submitting .ywh-submit-spinner {
        animation: none;
    }
}
@keyframes ywhSubmitSpin {
    to { transform: rotate(360deg); }
}