/*
 * Smart Hub V5 notice styles.
 *
 * These styles define the scrolling news bar and the modal cards used in
 * the Smart Hub notice. Variables at the top allow for easy theming
 * and maintain z-index stacking contexts. Media queries adjust the
 * layout for mobile and desktop views.
 */

:root {
    /* Z-Index Massimo Assoluto (32-bit integer limit) */
    --hub-z-bar: 2147483640;
    --hub-z-overlay: 2147483645;
    --hub-z-modal: 2147483647;
    --hub-height: 48px;
    --hub-blue: #0071e3;
    --hub-green: #34c759;
    --hub-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- BARRA SCORREVOLE --- */
/*
 * Gruppo di regole condivise per la barra scorrevole e il contenitore slider.
 * In precedenza le proprietà width e overflow venivano ripetute sia su
 * .bpc-news-wrap che su .bpc-news-slider. Le unifichiamo qui per
 * eliminare duplicazioni inutili e ridurre il peso del CSS senza
 * modificare la resa visiva. La proprietà position resta sulle singole
 * classi per non interferire con il layout a griglia.
 */
.bpc-news-wrap,
.bpc-news-slider {
    width: 100%;
    overflow: hidden;
}

.bpc-news-wrap {
    position: relative;
    z-index: var(--hub-z-bar);
    /*
     * Pre‑alloca sempre lo spazio occupato dalla barra per evitare spostamenti
     * di layout (CLS) quando la notifica appare.
     * Qui utilizziamo la variabile --hub-height (48px) come min‑height
     * permanente, mentre l’altezza effettiva rimane 0 finché non viene
     * mostrata la barra. Questo approccio mantiene inalterato lo spazio
     * verticale e previene il salto dei contenuti sottostanti quando la
     * barra diventa visibile.
     */
    /* Parte chiusa */
    height: 0;
    opacity: 0;
    /* Durata transizione ridotta a 0.4s per una resa più fluida */
    transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
    /* Nasconde il contenuto durante l'animazione di apertura per evitare FOUC */
    overflow: hidden;
    background: #000;
    cursor: pointer;
    font-family: var(--hub-font);
}

.bpc-news-wrap.is-visible {
    height: var(--hub-height);
    opacity: 1;
}

/* Sfondo Aurora */
.bpc-news-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(270deg, #0071e3, #34c759, #5856d6, #ff2d55, #0071e3);
    background-size: 600% 600%;
    animation: bpcAurora 25s ease infinite;
}
.bpc-news-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.15);
}
@keyframes bpcAurora {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.bpc-news-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hub-height);
    /*
     * Utilizziamo un padding orizzontale simmetrico per allineare il contenuto
     * della barra. In precedenza il padding era asimmetrico (40px a destra e 15px a sinistra),
     * causando un disallineamento visivo soprattutto su schermi piccoli. Ora
     * impostiamo una spaziatura uniforme a sinistra e a destra.
     */
    padding: 0 20px;
}

/* Slider */
/*
 * Definizione del contenitore slider. Raggruppiamo le proprietà ripetute
 * (display: flex, align-items, justify-content) in modo da alleggerire il
 * CSS. La dichiarazione height rimane specifica dello slider.
 */
.bpc-news-slider {
    position: relative;
    height: var(--hub-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bpc-news-item {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * Aumentiamo la spaziatura e le dimensioni del testo per migliorare
     * la leggibilità della notifica su dispositivi mobili e desktop. L’uso
     * di clamp() permette di scalare il font in base alla larghezza dello
     * schermo, mantenendo una dimensione minima e massima.
     */
    gap: 10px;
    color: #fff;
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.bpc-news-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bpc-news-item.exit {
    opacity: 0;
    transform: translateY(-20px);
}

.bpc-news-icon {
    /* Icona più grande e responsiva per una migliore visibilità */
    font-size: clamp(18px, 4vw, 22px);
}
.bpc-news-more {
    /* Freccia/etichetta con dimensioni maggiori e padding incrementato. La
     * letter-spacing è leggermente ridotta per evitare spaziature eccessive
     * quando il font cresce su schermi più ampi.
     */
    font-size: clamp(12px, 3vw, 14px);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 8px;
}

/* Chiudi Barra */
.bpc-news-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    /* Aumentiamo la dimensione e il padding del bottone di chiusura per
     * migliorare la tappabilità su dispositivi touch. */
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 10px;
    z-index: 20;
}
.bpc-news-close:hover {
    color: #fff;
}

/* --- MODALE (POPUP) --- */
.bpc-hub-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--hub-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.bpc-hub-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.bpc-hub-card {
    position: fixed;
    z-index: var(--hub-z-modal);
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    font-family: var(--hub-font);
}

/* STILE DESKTOP (Card Centrata) */
@media (min-width: 601px) {
    .bpc-hub-card {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -45%) scale(0.95);
        width: 440px;
        max-width: 90%;
        border-radius: 24px;
        padding: 40px;
    }
    .bpc-hub-card.is-open {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }
    .bpc-hub-handle {
        display: none;
    }
}

/* STILE MOBILE (Bottom Sheet - Risolve il problema grafico) */
@media (max-width: 600px) {
    .bpc-hub-card {
        /* Occupiamo sempre l'intera larghezza disponibile, con bordo
         * superiore arrotondato. Non usiamo valori fissi di translate
         * per nascondere la card: sarà controllata dallo script tramite
         * le classi `is-open` e CSS transitions. */
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        border: none;
        /* Spigoli più generosi per un aspetto più moderno */
        border-radius: 26px 26px 0 0;
        /* Garantiamo che il padding sia conteggiato nella dimensione
         * totale del box: box-sizing evita che il padding spinga
         * l'elemento fuori dallo schermo su device molto piccoli. */
        box-sizing: border-box;
        /* Padding uniforme, con uno spazio addizionale per la safe area
         * solo se disponibile. Usando `max()` tra 24px e la safe-area,
         * garantiamo che il contenuto non rimanga nascosto sotto la
         * barra degli strumenti su iOS. */
        padding: 24px 24px max(24px, env(safe-area-inset-bottom)) 24px;
        /* La card viene nascosta fuori schermo con translate; utilizziamo
         * 100% dell'altezza della card stessa affinché l'animazione di
         * apertura/chiusura sia corretta indipendentemente dal suo
         * contenuto. */
        transform: translateY(100%);
        /* Limitiamo l'altezza al 90% della viewport meno le safe areas in
         * alto e in basso. In questo modo la modale non può mai
         * superare lo schermo anche su dispositivi con notch o barre
         * software alte. */
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
        overflow-y: auto;
    }
    .bpc-hub-card.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /* Maniglia per indicare trascinamento */
    .bpc-hub-handle {
        width: 60px;
        height: 6px;
        background: #e0e0e0;
        border-radius: 10px;
        margin: 0 auto 24px auto;
    }
    /* Nascondi la X su mobile, si chiude cliccando fuori o swipe (simulato) */
    .bpc-hub-close {
        display: none;
    }
    .bpc-news-text {
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Riduci il padding orizzontale della barra su mobile per sfruttare al meglio
     * lo spazio disponibile. Mantenere un padding più contenuto (12px) evita che
     * l’icona e il testo risultino troppo spostati verso il centro sui dispositivi
     * con larghezza ridotta.
     */
    .bpc-news-container {
        padding: 0 12px;
    }
}

/* Contenuti Card */
.bpc-hub-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f2f2f7;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bpc-hub-icon-circle {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    background: #f5f5f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.bpc-hub-title {
    /* Titolo responsive: dimensione adattiva in base alla larghezza dello
     * schermo. Il margine inferiore è leggermente aumentato per separare
     * meglio dal contenuto sottostante.
     */
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
    margin: 0 0 12px;
    color: #1d1d1f;
    text-align: center;
}

.bpc-hub-desc {
    /* Testo descrittivo responsivo con line-height aumentato per una
     * lettura più confortevole. L'altezza della riga e il margine
     * inferiore sono calibrati per creare più respiro fra i paragrafi.
     */
    font-size: clamp(15px, 4vw, 16px);
    line-height: 1.6;
    color: #515154;
    margin-bottom: 32px;
    text-align: center;
}

/* Bottoni */
.bpc-hub-actions {
    display: flex;
    flex-direction: column;
    /* Aumentiamo lo spazio tra i bottoni per una migliore separazione. */
    gap: 14px;
}
.bpc-hub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* Aumentiamo il padding e il raggio dei bottoni per renderli più
     * comodi da cliccare e per allinearli allo stile Apple più
     * morbido. Font-size responsivo per adattarsi a dispositivi di
     * dimensioni differenti.
     */
    padding: 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(17px, 4vw, 18px);
    text-align: center;
    transition: transform 0.2s ease;
    box-sizing: border-box; /* Importante per padding */
}
.bpc-hub-btn:active {
    transform: scale(0.98);
}
.bpc-hub-btn.primary {
    background: var(--hub-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}
.bpc-hub-btn.call {
    background: var(--hub-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

/* [Theme Architect] Scroll lock (body.no-scroll) è SSOT in core/global.css. */