@charset "UTF-8";
/* =====================================================================
   elm-mio-viaggio.css  (14/10/2026) - "IL MIO VIAGGIO", parti globali
   ---------------------------------------------------------------------
   Caricato dalla MasterPage su tutte le pagine. Contiene SOLO:
     1) il link "Il mio viaggio" nella barra alta desktop (accanto a "Cerca")
     2) il contatore dei salvati
     3) l'avviso in basso "Salvato in Il mio viaggio - Apri / Annulla"
     4) il cuore sulle card (.pc-fav, stile in custom_elbamylove.css):
        qui solo lo stato acceso e il focus
   Il cuore dell'header MOBILE sta in elm-mobile-nav.css (sezione 10).
   La pagina della lista ha il suo file: il-mio-viaggio.css.
   Il comportamento e' in App_Script/elm-mio-viaggio.js.
   Classi senza prefisso .elm- (le .elm-* stanno solo in elm-mobile-nav.css).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) BARRA ALTA DESKTOP - stessa pillola di "Cerca" (elm-ricerca.css)
   --------------------------------------------------------------------- */
.hotale-top-bar-right-social a.mv-apri-barra {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 13px 0 13px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: var(--r-pill);
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease;
}
.hotale-top-bar-right-social a.mv-apri-barra i { font-size: 14px; line-height: 1; }
.hotale-top-bar-right-social a.mv-apri-barra:hover,
.hotale-top-bar-right-social a.mv-apri-barra:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .7);
    color: #fff !important;
}
.hotale-top-bar-right-social a.mv-apri-barra:focus-visible {
    outline: 2px solid var(--gold-lt);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   2) CONTATORE (barra alta desktop). Nascosto con 0 salvati (attributo hidden).
   --------------------------------------------------------------------- */
.mv-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--gold);
    color: var(--ink) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.mv-conta[hidden] { display: none; }

/* ---------------------------------------------------------------------
   3) AVVISO IN BASSO (lo crea elm-mio-viaggio.js al primo salvataggio)
   Su telefono/tablet sta SOPRA la barra "Preventivo" e le pillole delle
   liste (z-index 790, a 10px dal fondo, alte ~48px) e la barra CTA delle schede (.elm-mbar, ~70px).
   --------------------------------------------------------------------- */
.mv-avviso {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 11px 10px 11px 18px;
    border-radius: var(--r-card);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(24, 20, 15, .28);
    transform: translate(-50%, 16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility 0s linear .3s;
}
.mv-avviso.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility 0s;
}
.mv-avviso-t { min-width: 0; }
/* Reset espliciti: il tema GoodLayers da' stile a <button> e <a> */
.mv-avviso .mv-avviso-a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-badge);
    background: transparent;
    color: var(--gold-lt) !important;
    font: 600 14px/36px var(--font-body);
    letter-spacing: .02em;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
}
.mv-avviso .mv-avviso-a:hover,
.mv-avviso .mv-avviso-a:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
}
.mv-avviso .mv-avviso-a:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 1px; }

@media (max-width: 991.98px) {
    .mv-avviso { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }   /* sopra barra Preventivo (58px) e barra CTA delle schede (~70px) */
}
@media (prefers-reduced-motion: reduce) {
    .mv-avviso, .mv-avviso.is-on { transition: opacity .15s ease, visibility 0s; transform: translate(-50%, 0); }
}
@media print {
    .mv-avviso, .mv-apri-barra { display: none !important; }
}

/* ---------------------------------------------------------------------
   4) CUORE SULLE CARD (.pc-fav: forma e posizione in custom_elbamylove.css)
   Stato acceso dato da elm-mio-viaggio.js (.is-on + .liked). Qui solo il
   focus da tastiera e un piccolo "battito" al salvataggio.
   --------------------------------------------------------------------- */
.pc-fav[data-mv] { color: var(--ink); }
.pc-fav[data-mv].is-on { color: var(--red); }
.pc-fav[data-mv]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-mv].mv-batte i { animation: mv-battito .32s ease-out; }
@keyframes mv-battito {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    [data-mv].mv-batte i { animation: none; }
}

/* ---------------------------------------------------------------------
   5) "SALVA NEL MIO VIAGGIO" NELL'HERO delle schede di spiagge, luoghi,
   eventi e itinerari (sfondo scuro). Markup: MioViaggioUrl.BottoneSalva().
   Salvato = pieno rosso, come il cuore delle schede attivita'
   (.elm-pill-save.is-on in scheda-dettaglio.css).
   --------------------------------------------------------------------- */
.mv-salva {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: .3rem 0 1.4rem;
    padding: 0 18px 0 15px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--r-pill);
    background: rgba(10, 12, 18, .22);
    color: #fff;
    font: 600 .875rem/1 var(--font-body);
    letter-spacing: .01em;
    text-transform: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: background-color .2s ease, border-color .2s ease;
}
.mv-salva i { font-size: 1.05rem; line-height: 1; }
.mv-salva:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.mv-salva:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.mv-salva.is-on,
.mv-salva.is-on:hover { background: var(--promo); border-color: var(--promo); color: #fff; }
.ph-meta + .mv-salva { margin: 1.2rem 0 0; }
@media print { .mv-salva { display: none !important; } }