/*
 * Preferiti: pulsante nell'intestazione e pannello laterale con gli annunci
 * salvati. Le variabili di colore sono quelle del tema.
 */

/* --- Pulsante nell'intestazione ------------------------------------- */

.ip-preferiti-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--ip-navy);
    font-size: 20px;
    line-height: 1;
    padding: 0 10px;
    cursor: pointer;
}

/* Nessuna cornice al clic: il pulsante apre il pannello e basta. Il contorno
   resta solo per chi naviga da tastiera, dove serve a capire dove ci si
   trova. */
.ip-preferiti-btn:focus {
    outline: none;
    box-shadow: none;
}

.ip-preferiti-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ip-navy, rgb(19, 34, 144)) 35%, transparent);
    outline-offset: 2px;
}

.ip-preferiti-btn__label {
    font-size: 14px;
    font-weight: 600;
}

.ip-preferiti-btn__badge {
    position: absolute;
    top: -6px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ip-preferiti-btn.is-vuoto .ip-preferiti-btn__badge {
    display: none;
}

/* Versione mobile, accanto al pulsante di chiamata: a destra lo spazio e'
   piu' ampio, per staccare bene il cuore dal pulsante del telefono. */
.mobile-header-actions .ip-preferiti-btn {
    font-size: 18px;
    padding: 0 23px 0 8px;
}

.mobile-header-actions .ip-preferiti-btn__label {
    display: none;
}

/* Il numero sta all'angolo in alto a destra del cuore: prima era ancorato
   al bordo del pulsante e finiva contro il tasto del telefono, poi troppo a
   sinistra e copriva l'icona. L'icona occupa i 18 pixel dopo il primo, quindi
   il conteggio parte appena oltre il suo spigolo. */
.mobile-header-actions .ip-preferiti-btn__badge {
    top: -9px;
    right: auto;
    left: 20px;
}

/* --- Cuore attivo sulle schede -------------------------------------- */

.property-card-home__favorite.is-preferito,
.ip-preferito-btn.is-preferito {
    color: #e74c3c;
}

/* --- Pannello laterale ----------------------------------------------- */

.ip-preferiti-pannello {
    position: fixed;
    inset: 0;
    z-index: 1080;
}

.ip-preferiti-pannello__sfondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 27, 45, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.ip-preferiti-pannello.is-aperto .ip-preferiti-pannello__sfondo {
    opacity: 1;
}

.ip-preferiti-pannello__corpo {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--ip-pannello-fondo, var(--ip-superficie));
    box-shadow: -8px 0 24px rgba(15, 27, 45, .18);
    transform: translateX(100%);
    transition: transform .25s ease;
}

.ip-preferiti-pannello.is-aperto .ip-preferiti-pannello__corpo {
    transform: translateX(0);
}

.ip-preferiti-pannello__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #e9ecef;
}

.ip-preferiti-pannello__titolo {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f1b2d;
}

.ip-preferiti-pannello__chiudi {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
}

.ip-preferiti-pannello__contenuto {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.ip-preferiti-pannello__piede {
    padding: 14px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ip-preferiti-vuoto {
    margin: 24px 0;
    text-align: center;
    color: #6c757d;
}

.ip-preferiti-vuoto i {
    display: block;
    font-size: 34px;
    margin-bottom: 12px;
    color: #ced4da;
}

/* --- Scheda dell'annuncio nel pannello -------------------------------- */

.ip-preferiti-card {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f5;
}

.ip-preferiti-card:last-child {
    border-bottom: 0;
}

.ip-preferiti-card__media {
    flex: 0 0 96px;
    width: 96px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.ip-preferiti-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ip-preferiti-card__body {
    flex: 1;
    min-width: 0;
    padding-right: 22px;
}

.ip-preferiti-card__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.ip-preferiti-card__title a {
    color: #0f1b2d;
}

.ip-preferiti-card__location,
.ip-preferiti-card__ref {
    margin: 0 0 2px;
    font-size: 13px;
    color: #6c757d;
}

.ip-preferiti-card__location i {
    margin-right: 6px;
}

.ip-preferiti-card__price {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ip-navy);
}

.ip-preferiti-card__remove {
    position: absolute;
    top: 12px;
    right: 0;
    border: 0;
    background: transparent;
    color: #adb5bd;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.ip-preferiti-card__remove:hover {
    color: #e74c3c;
}

body.ip-preferiti-aperto {
    overflow: hidden;
}

/* --- Annunci non piu' disponibili ------------------------------------- */

.ip-preferiti-avviso {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff4e5;
    color: #8a5300;
    font-size: 14px;
}

.ip-preferiti-avviso__pulisci {
    border: 0;
    background: transparent;
    color: #8a5300;
    font-weight: 700;
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
}

.ip-preferiti-card--non-disponibile {
    opacity: .72;
}

.ip-preferiti-card--non-disponibile .ip-preferiti-card__media img {
    filter: grayscale(1);
}

.ip-preferiti-card__avviso {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #c0392b;
}

.ip-preferiti-card__avviso i {
    margin-right: 6px;
}

/* --- Informativa iubenda nel piede di pagina --------------------------- */

.site-footer-home__iubenda a {
    color: inherit;
    font-size: 13px;
}

@media (max-width: 767.98px) {
    /* Su telefono resta il solo collegamento testuale, in corpo ridotto:
       il logo del badge occupava troppo spazio. */
    .site-footer-home__iubenda img,
    .site-footer-home__iubenda svg,
    .site-footer-home__iubenda .iubenda-white,
    .site-footer-home__iubenda .iubenda-black,
    .site-footer-home__iubenda .iub-badge,
    .site-footer-home__iubenda [class*="iubenda-badge"] {
        display: none !important;
    }

    .site-footer-home__iubenda a {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        font-size: 12px;
        text-decoration: underline;
    }
}

/* --- Preferenze iubenda: pulsante fisso in basso a sinistra ------------
   Su telefono il pulsante finisce sopra la barra con Chiama, WhatsApp e
   Indicazioni, coprendone il primo tasto: viene nascosto. Le preferenze
   restano raggiungibili dal collegamento nel piede di pagina. */

@media (max-width: 767.98px) {
    .iubenda-tp-btn,
    .iubenda-cs-preferences-link {
        display: none !important;
    }
}

/* --- Rete di sicurezza per le schede animate ---------------------------
   Il tema mostra gli elementi con data-animate solo quando parte
   l'animazione di ingresso. Se per qualsiasi motivo non parte (scheda del
   browser non in primo piano al caricamento, schede aggiunte dallo
   scorrimento infinito) gli annunci resterebbero invisibili: dopo un breve
   istante vengono comunque mostrati. */

@keyframes ip-comparsa-sicurezza {
    to { opacity: 1; }
}

.latest-properties-grid [data-animate]:not(.animated) {
    animation: ip-comparsa-sicurezza .3s ease 1.5s forwards;
}

/* Una volta contrassegnate come "animate", le schede dell'elenco restano
   visibili anche se l'animazione di ingresso non arriva in fondo. */
.latest-properties-grid [data-animate].animated {
    opacity: 1 !important;
}

/* Stato dell'annuncio nel pannello dei preferiti. */
.ip-preferiti-card__stato {
    display: inline-block;
    margin: 4px 0 0;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef0f6;
    color: var(--ip-navy);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ip-preferiti-card__media {
    position: relative;
}