/*
 * Widget di prenotazione Divinea / Wine Suite — adattamento allo stile Letrari.
 *
 * Base: il file css/divinea.css generato dal wizard di Divinea, poi rivisto dopo la
 * verifica del loro team tecnico (24/09/2026). Il prefisso
 * `app-divinea>#divinea-wrapper app-homepage#divinea` non è arbitrario: è quello che
 * il bundle usa nel proprio foglio e in createCustomCss().
 *
 * 1. FONT — il wizard scrive `Classica Pro`, che non corrisponde a nessuna famiglia
 *    caricata: il kit Adobe Typekit hlw5qhf serve `classica-pro` (minuscolo, trattino).
 *    Scritto com'era, il widget cadeva sul font di sistema. La regola copre anche
 *    #divinea-wrapper, su cui il foglio remoto imposta Poppins come baseline.
 *
 * 2. FONDO SCURO — la pagina visite è su #1A1A1A e con cardlist="list" le esperienze
 *    non hanno sfondo proprio: stanno sul fondo della pagina. Il testo diventa bianco
 *    elemento per elemento (lista data da Divinea), non con un `*` globale: il `*`
 *    colpiva anche i campi del form, trasparenti, rendendo il testo digitato invisibile.
 *    Le superfici che il widget disegna comunque chiare — calendario, select, campi
 *    .form-control, pagamento, modali, alert — hanno la loro eccezione a testo scuro,
 *    che deve restare DOPO la regola del bianco perché a parità di specificità vince.
 *
 * 3. `.ng-fa-icon svg` — nel file del wizard è l'unica regola senza prefisso, quindi
 *    colorerebbe qualsiasi icona fuori dal widget. Qui è prefissata come le altre.
 *
 * 4. OVERLAY FUORI DAL WIDGET — i pannelli di Angular Material (prefisso telefonico,
 *    paese di residenza) e i toast di ngx-toastr vengono appesi a <body>, fuori da
 *    <app-divinea>: il prefisso non li raggiunge e hanno un blocco dedicato in fondo.
 *
 * La larghezza del contenitore (punto 2 della verifica Divinea) non sta qui: è
 * risolta nel markup delle pagine, dove il contenitore è ora a tutta larghezza.
 */

:root {
    --divinea-accent: #c49e5c;  /* primary-300 — accento su fondo scuro */
    --divinea-bg: #1a1a1a;      /* fondo del sito */
    --divinea-card: #242424;    /* card delle esperienze, se si torna a cardlist="card" */
    --divinea-ink: #1a1a1a;     /* testo sulle superfici chiare del widget */
}

/*
 * Fondo trasparente: il foglio remoto lo fa bianco, e un fondo pieno coprirebbe il
 * pattern ad alveare (/images/sfondi/bg-big.jpg) che la pagina mette dietro il
 * contenuto, come sotto le vecchie card delle esperienze. È l'unico contenitore del
 * widget con un fondo proprio: lista, dettaglio e checkout non ne hanno.
 *
 * Il colore del wrapper è EREDITATO, non forzato: fa da base per il testo che non
 * cade nella lista qui sotto. Il foglio remoto qui mette #162931, blu scuro, che
 * sul fondo della pagina sparirebbe.
 */
app-divinea > #divinea-wrapper {
    background-color: transparent !important;
    color: #fff !important;
}

/*
 * Il tondo, non il corsivo. Classica Pro ha un corsivo che il widget eredita su
 * descrizioni, etichette e pulsanti: illeggibile a corpo piccolo.
 */
app-divinea > #divinea-wrapper,
app-divinea > #divinea-wrapper app-homepage#divinea,
app-divinea > #divinea-wrapper app-homepage#divinea * {
    font-family: "classica-pro", ui-sans-serif, system-ui, sans-serif !important;
    font-style: normal !important;
}

/*
 * Testo bianco — regola del team tecnico Divinea, al posto del vecchio `*`.
 * `.material` sono i campi del form di prenotazione, compreso il messaggio
 * (`.special-textarea`): sono trasparenti sul fondo scuro, quindi testo bianco.
 * Le due pseudo dello switcher sono la metà NON selezionata di Prenota/Regala.
 *
 * Solo a schermo: questi selettori sono più specifici del reset di stampa in fondo
 * al file, e su carta lascerebbero il testo bianco su bianco.
 */
@media screen {
    app-divinea > #divinea-wrapper app-homepage#divinea h1,
    app-divinea > #divinea-wrapper app-homepage#divinea h2,
    app-divinea > #divinea-wrapper app-homepage#divinea h3,
    app-divinea > #divinea-wrapper app-homepage#divinea h4,
    app-divinea > #divinea-wrapper app-homepage#divinea h5,
    app-divinea > #divinea-wrapper app-homepage#divinea h6,
    app-divinea > #divinea-wrapper app-homepage#divinea p,
    app-divinea > #divinea-wrapper app-homepage#divinea ul,
    app-divinea > #divinea-wrapper app-homepage#divinea ol,
    app-divinea > #divinea-wrapper app-homepage#divinea li,
    app-divinea > #divinea-wrapper app-homepage#divinea span,
    app-divinea > #divinea-wrapper app-homepage#divinea label,
    app-divinea > #divinea-wrapper app-homepage#divinea small,
    app-divinea > #divinea-wrapper app-homepage#divinea mat-form-field mat-label,
    app-divinea > #divinea-wrapper app-homepage#divinea .row .material::placeholder,
    app-divinea > #divinea-wrapper app-homepage#divinea form .row .material.special-textarea,
    app-divinea > #divinea-wrapper app-homepage#divinea mat-form-field .mat-input-element,
    app-divinea > #divinea-wrapper app-homepage#divinea form .row .material,
    app-divinea > #divinea-wrapper app-homepage#divinea .switcher input:not(:checked)::before,
    app-divinea > #divinea-wrapper app-homepage#divinea .switcher input:checked::after {
        color: #fff !important;
    }
}

app-divinea > #divinea-wrapper app-homepage#divinea .divinea-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* --- Card delle esperienze ------------------------------------------------
 * Serve solo con cardlist="card": lì il bundle disegna le card bianche
 * (.experience-box.card{background-color:#fff}) e le si porta sul tema scuro.
 * Con cardlist="list", quello in uso, .experience-box.list non ha sfondo e
 * questa regola non scatta. Resta per non rompere se si torna alle card.
 */

app-divinea > #divinea-wrapper app-homepage#divinea .experience-box.card {
    background-color: var(--divinea-card) !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, .6) !important;
}

/* Lista: il bundle mette `border-right: 1px solid #f3f3f3` sul contenuto di ogni
   esperienza. Da 768px in su separa il testo dalla colonna di prezzo e pulsanti
   e resta. Sotto, dove la lista va in colonna, diventa una riga bianca netta e
   spessa a fianco del testo: lì si toglie. */
@media (max-width: 767px) {
    app-divinea > #divinea-wrapper app-homepage#divinea .experience-box.list > div.content {
        border-right: none !important;
    }
}

/* --- Accenti ------------------------------------------------------------- */

app-divinea > #divinea-wrapper app-homepage#divinea .primary,
app-divinea > #divinea-wrapper app-homepage#divinea a,
app-divinea > #divinea-wrapper app-homepage#divinea .experience-box > div.content > .title,
app-divinea > #divinea-wrapper app-homepage#divinea .experience-box > div.content > .information-group-top > .title {
    color: var(--divinea-accent) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .btn.btn-primary,
app-divinea > #divinea-wrapper app-homepage#divinea .btn.btn-secondary.btn-gift {
    background: var(--divinea-accent) !important;
    border-color: var(--divinea-accent) !important;
    color: var(--divinea-ink) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .btn.btn-primary *,
app-divinea > #divinea-wrapper app-homepage#divinea .btn.btn-secondary.btn-gift * {
    color: var(--divinea-ink) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .ng-fa-icon svg {
    color: var(--divinea-accent) !important;
}

/* --- Toggle Prenota / Regala ---------------------------------------------
 * Nel widget è una pillola bianca con un evidenziatore che scorre: la metà
 * selezionata ha testo bianco sull'evidenziatore, l'altra testo grigio sulla
 * pillola. Qui la pillola è trasparente sul fondo scuro, quindi ENTRAMBE le metà
 * hanno testo bianco: la non selezionata dalla regola del bianco più sopra, la
 * selezionata da quella qui sotto. Il bordo va tolto (verifica Divinea, punto 3).
 * I `content` di :before/:after li riscrive il bundle a runtime: mai toccarli.
 */
app-divinea > #divinea-wrapper app-homepage#divinea .switcher input {
    background: transparent !important;
    border: none !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .switcher input + label {
    background: var(--divinea-accent) !important;
    border: none !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .switcher input:before,
app-divinea > #divinea-wrapper app-homepage#divinea .switcher input:after {
    font-size: 14px !important;
}

@media screen {
    app-divinea > #divinea-wrapper app-homepage#divinea .switcher input:not(:checked):after,
    app-divinea > #divinea-wrapper app-homepage#divinea .switcher input:checked:before {
        color: #fff !important;
    }
}

/* --- Checkbox, radio e toggle (verifica Divinea, punto 6) ----------------- */

app-divinea > #divinea-wrapper app-homepage#divinea input[type="checkbox"],
app-divinea > #divinea-wrapper app-homepage#divinea input[type="radio"] {
    accent-color: var(--divinea-accent) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .custom-toggle input:checked + .custom-toggle-slider {
    background: var(--divinea-accent) !important;
}

/* --- Superfici chiare: il testo torna scuro -------------------------------
 * Tutte DOPO la regola del bianco. NON ci vanno `textarea` né `select` nudi:
 * nel form di prenotazione sono .material trasparenti sul fondo scuro, e il testo
 * scuro li rendeva illeggibili (era la causa del campo messaggio invisibile).
 */

/* Calendario. Il popup resta dentro il widget, ma month/time sono elencati a parte
   perché in vista mesi non sono discendenti di dp-day-calendar. */
app-divinea > #divinea-wrapper app-homepage#divinea .dp-popup *,
app-divinea > #divinea-wrapper app-homepage#divinea dp-calendar-nav *,
app-divinea > #divinea-wrapper app-homepage#divinea dp-day-calendar *,
app-divinea > #divinea-wrapper app-homepage#divinea dp-month-calendar *,
app-divinea > #divinea-wrapper app-homepage#divinea dp-time-select * {
    color: var(--divinea-ink) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea dp-day-calendar.dp-material .dp-selected,
app-divinea > #divinea-wrapper app-homepage#divinea dp-day-calendar.dp-material .dp-selected:hover {
    background: var(--divinea-accent) !important;
    color: var(--divinea-ink) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea dp-day-calendar.dp-material .dp-current-day {
    border: 1px solid var(--divinea-accent) !important;
}

/* Select e menu a tendina (ng-select, su fondo bianco). */
app-divinea > #divinea-wrapper app-homepage#divinea .ng-select-container,
app-divinea > #divinea-wrapper app-homepage#divinea .ng-select-container *,
app-divinea > #divinea-wrapper app-homepage#divinea .ng-select-container input,
app-divinea > #divinea-wrapper app-homepage#divinea .ng-dropdown-panel,
app-divinea > #divinea-wrapper app-homepage#divinea .ng-dropdown-panel * {
    color: var(--divinea-ink) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
app-divinea > #divinea-wrapper app-homepage#divinea .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked,
app-divinea > #divinea-wrapper app-homepage#divinea ng-select.inline .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label {
    background-color: var(--divinea-accent) !important;
    color: var(--divinea-ink) !important;
}

/*
 * Campi .form-control (scelta data e simili, fuori dal form di prenotazione).
 * Bootstrap li lascia bianchi tranne quelli dentro `form .row`, che ereditano il
 * fondo: fissare fondo e testo li rende uniformi. Nel bundle .form-control e
 * .material non stanno mai sullo stesso elemento, quindi non si pestano.
 */
app-divinea > #divinea-wrapper app-homepage#divinea .form-control {
    background-color: #fff !important;
    color: var(--divinea-ink) !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .form-control::placeholder {
    color: #767676 !important;
}

/* Blocco di pagamento (Stripe / Nexi): fondo #f5f5f5. Il campo carta è un iframe e
   si colora da sé, ma etichetta e messaggio d'errore sono nostri e sparirebbero. */
app-divinea > #divinea-wrapper app-homepage#divinea .stripe-component,
app-divinea > #divinea-wrapper app-homepage#divinea .stripe-component *,
app-divinea > #divinea-wrapper app-homepage#divinea #xpay-card,
app-divinea > #divinea-wrapper app-homepage#divinea #xpay-card * {
    color: var(--divinea-ink) !important;
}

/* Modali (ngx-smart-modal): fondo bianco. */
app-divinea > #divinea-wrapper app-homepage#divinea .nsm-content,
app-divinea > #divinea-wrapper app-homepage#divinea .nsm-content * {
    color: var(--divinea-ink) !important;
}

/* Alert: ognuno tiene il proprio colore Bootstrap, altrimenti l'utente non legge
   il motivo per cui la prenotazione non è andata a buon fine. */
app-divinea > #divinea-wrapper app-homepage#divinea .alert-danger,
app-divinea > #divinea-wrapper app-homepage#divinea .alert-danger * {
    color: #a94442 !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .alert-warning,
app-divinea > #divinea-wrapper app-homepage#divinea .alert-warning * {
    color: #8a6d3b !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .alert-success,
app-divinea > #divinea-wrapper app-homepage#divinea .alert-success * {
    color: #3c763d !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .checkout-wrapper .right > .content > .coupon button.special-button {
    background-color: transparent !important;
    border: none !important;
    color: var(--divinea-accent) !important;
}

/* --- Calendario tagliato (verifica Divinea, punto 4) ----------------------
 * Il calendario si apre sotto il campo data ed esce dal fondo del dettaglio
 * esperienza: lo spazio sotto gli fa posto. Più spazio finché la data non è
 * scelta (placeholder visibile), perché è lì che il popup è aperto.
 */
app-divinea > #divinea-wrapper app-homepage#divinea .experience-detail-wrapper:has(.dp-picker-input:placeholder-shown) {
    margin-bottom: 200px !important;
}

app-divinea > #divinea-wrapper app-homepage#divinea .experience-detail-wrapper:has(.dp-picker-input) {
    margin-bottom: 100px !important;
}

/* --- Overlay renderizzati fuori da <app-divinea> --------------------------
 * Angular Material appende i suoi pannelli a .cdk-overlay-container e ngx-toastr a
 * .toast-container, entrambi figli di <body>: il prefisso non li raggiunge. Qui solo
 * font e accento — NON il colore del testo, perché sono su fondo chiaro e si leggono
 * già. Le regole restano ancorate ai container per non toccare il resto del sito.
 */

.cdk-overlay-container .mat-menu-panel,
.cdk-overlay-container .mat-menu-panel *,
.cdk-overlay-container .mat-select-panel,
.cdk-overlay-container .mat-select-panel *,
.cdk-overlay-container .mat-autocomplete-panel,
.cdk-overlay-container .mat-autocomplete-panel *,
.cdk-overlay-container .mat-datepicker-content,
.cdk-overlay-container .mat-datepicker-content *,
.cdk-overlay-container .mat-dialog-container,
.cdk-overlay-container .mat-dialog-container *,
.cdk-overlay-container .mat-tooltip,
.toast-container .ngx-toastr,
.toast-container .ngx-toastr * {
    font-family: "classica-pro", ui-sans-serif, system-ui, sans-serif !important;
    font-style: normal !important;
}

.cdk-overlay-container .mat-calendar-body-selected {
    background-color: var(--divinea-accent) !important;
    color: var(--divinea-ink) !important;
}

.cdk-overlay-container .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: var(--divinea-accent) !important;
}

/* Prefisso telefonico e paese di residenza tagliati nelle opzioni
   (verifica Divinea, punto 5). Senza prefisso come da loro indicazione: la classe
   esiste solo nei pannelli di Angular Material, il resto del sito non la usa. */
.mat-option-text {
    display: flex !important;
    align-items: center !important;
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
    app-divinea > #divinea-wrapper app-homepage#divinea .experience-detail-wrapper .left .left-responsive,
    app-divinea > #divinea-wrapper app-homepage#divinea .experience-detail-wrapper .left-responsive {
        max-width: 100% !important;
    }

    app-divinea > #divinea-wrapper app-homepage#divinea .experience-detail-wrapper .right-responsive {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* --- Stampa ---------------------------------------------------------------
 * Il foglio remoto ha un reset di stampa (color:#000, background:none) con la stessa
 * specificità delle nostre regole: caricato prima, perderebbe. Senza questo blocco la
 * conferma di prenotazione stampata esce bianca su bianco.
 */

@media print {
    app-divinea > #divinea-wrapper,
    app-divinea > #divinea-wrapper app-homepage#divinea *,
    app-divinea > #divinea-wrapper app-homepage#divinea *:before,
    app-divinea > #divinea-wrapper app-homepage#divinea *:after {
        color: #000 !important;
        background: none !important;
    }

    app-divinea > #divinea-wrapper app-homepage#divinea .experience-box.card {
        background-color: #fff !important;
        box-shadow: none !important;
    }
}