:root {
    /* Fallback palette (sovrascritta da inline PHP / anteprima admin) — nessun viola brand */
    --fp-privacy-surface_bg: #f9fafb;
    --fp-privacy-surface_text: #1f2937;
    --fp-privacy-button_primary_bg: #2563eb;
    --fp-privacy-button_primary_tx: #ffffff;
    --fp-privacy-button_secondary_bg: #ffffff;
    --fp-privacy-button_secondary_tx: #1f2937;
    --fp-privacy-link: #1d4ed8;
    --fp-privacy-border: #d1d5db;
    --fp-privacy-focus: #2563eb;
    /* Struttura design system FP — geometria, ombra, transizioni (tutti i colori da palette impostazioni) */
    --fp-privacy-radius-sm: 8px;
    --fp-privacy-radius-md: 12px;
    --fp-privacy-radius-lg: 16px;
    --fp-privacy-radius-xl: 18px;
    --fp-privacy-radius-pill: 999px;
    --fp-privacy-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    --fp-privacy-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --fp-privacy-shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.14);
    --fp-privacy-shadow-elevated: 0 24px 48px rgba(15, 23, 42, 0.15);
    --fp-privacy-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#fp-privacy-banner-root,
.fp-privacy-banner-shortcode {
    font-family: inherit;
}

/* Banner principale — design system FP, colori dalla palette impostazioni */
.fp-privacy-banner {
    position: fixed;
    left: 50%;
    /* Offset orizzontale come variabile: i keyframes lo riusano, così il
     * breakpoint mobile (left:16px) può azzerarlo SENZA che l'animazione
     * d'ingresso trascini il banner mezzo fuori schermo a sinistra. */
    --fp-privacy-shift-x: -50%;
    transform: translateX(var(--fp-privacy-shift-x));
    /*
     * Z-index molto elevato per vincere sticky CTA di terze parti (es. FP Experiences
     * sticky bar usa 2147483640). Il banner consenso, per requisiti normativi, deve
     * restare visibile finché l'utente non decide. Resta comunque sotto overlay/modal
     * interne (2147483646 / 2147483647) e pulsante reopen (2147483645).
     */
    z-index: 2147483644;
    box-sizing: border-box;
    width: 640px;
    min-width: 640px;
    max-width: 640px;
    background: var(--fp-privacy-surface_bg);
    color: var(--fp-privacy-surface_text);
    border-radius: var(--fp-privacy-radius-xl);
    padding: 0;
    box-shadow: var(--fp-privacy-shadow);
    border: 1px solid var(--fp-privacy-border);
    line-height: 1.6;
    backdrop-filter: blur(12px);
    animation: fpPrivacySlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    overflow: hidden;
}

/* Mini-header banner — fascia con gradiente (palette cliente) + icona + etichetta
   Sostituisce l'accent bar 3px. Segue le direttive estetiche FP (gradient, radius-xl, icona+titolo)
   ma resta ancorato alla palette configurabile dal cliente, non al viola FP fisso. */
.fp-privacy-banner-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: var(--fp-privacy-button_primary_bg);
    background: linear-gradient(135deg,
        var(--fp-privacy-button_primary_bg) 0%,
        color-mix(in srgb, var(--fp-privacy-button_primary_bg) 82%, #000) 100%);
    color: var(--fp-privacy-button_primary_tx);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid color-mix(in srgb, var(--fp-privacy-button_primary_bg) 80%, #000);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-banner-header {
        background: var(--fp-privacy-button_primary_bg);
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
}

.fp-privacy-banner-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.95;
}

.fp-privacy-banner-header-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fp-privacy-banner-header-label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fp-privacy-banner-content {
    padding: 18px 24px 14px;
}

/* Titolo primario comune alle tab Consenso / Dettagli / Info del banner */
.fp-privacy-banner-panel-title,
.fp-privacy-banner-title {
    margin-top: 0;
    margin-bottom: 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: inherit;
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.fp-privacy-banner-message {
    margin-bottom: 0.65rem;
    font-size: 0.9375rem;
    color: inherit;
    opacity: 0.92;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Animazioni banner */
@keyframes fpPrivacySlideIn {
    from {
        opacity: 0;
        transform: translateX(var(--fp-privacy-shift-x, -50%)) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(var(--fp-privacy-shift-x, -50%)) translateY(0);
    }
}

@keyframes fpPrivacyFadeOut {
    from {
        opacity: 1;
        transform: translateX(var(--fp-privacy-shift-x, -50%)) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(var(--fp-privacy-shift-x, -50%)) translateY(20px);
    }
}

.fp-privacy-banner.fp-hiding {
    animation: fpPrivacyFadeOut 0.3s ease-out forwards;
}

/* Retrocompatibilità se manca wrapper content */
.fp-privacy-banner > h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.fp-privacy-banner > p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

/* Notice revisione policy — evidenza maggiore con icona alert + pulse soft */
.fp-privacy-revision-notice {
    position: relative;
    margin-bottom: 0.75rem;
    padding: 12px 16px 12px 42px;
    border-radius: var(--fp-privacy-radius-md);
    background: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 10%, var(--fp-privacy-surface_bg));
    border: 1px solid color-mix(in srgb, var(--fp-privacy-button_primary_bg) 30%, var(--fp-privacy-border));
    border-left: 4px solid var(--fp-privacy-button_primary_bg);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4;
    color: inherit;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 15%, transparent);
    animation: fpPrivacyRevisionPulse 2.5s ease-in-out 0.6s 2;
}

.fp-privacy-revision-notice::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--fp-privacy-button_primary_bg);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@keyframes fpPrivacyRevisionPulse {
    0%, 100% {
        box-shadow: 0 1px 3px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 15%, transparent);
    }
    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 15%, transparent),
                    0 2px 8px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 25%, transparent);
    }
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-revision-notice {
        background: var(--fp-privacy-surface_bg);
        box-shadow: var(--fp-privacy-shadow-sm);
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-privacy-revision-notice {
        animation: none;
    }
}

/* Tab bar banner — Consent / Details / About */
.fp-privacy-banner-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--fp-privacy-border);
    background: color-mix(in srgb, var(--fp-privacy-border) 5%, var(--fp-privacy-surface_bg));
    padding: 0 14px;
}

.fp-privacy-banner-tab {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
    transition: border-color var(--fp-privacy-transition), color var(--fp-privacy-transition), background var(--fp-privacy-transition);
    margin-bottom: -1px;
    /* Nessuna opacity sulle inattive: stessa "grandezza" percettiva della tab attiva */
    color: #475569; /* AA su sfondo chiaro (~6.4:1); fallback senza color-mix */
    border-radius: var(--fp-privacy-radius-sm) var(--fp-privacy-radius-sm) 0 0;
}

.fp-privacy-banner-tab:hover {
    color: #475569;
    background: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 6%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-banner-tab:hover {
        background: rgba(0, 0, 0, 0.03);
    }
}

.fp-privacy-banner-tab.is-active {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    border-bottom-color: var(--fp-privacy-button_primary_bg);
    color: var(--fp-privacy-button_primary_bg);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-banner-tab:not(.is-active) {
        color: color-mix(in srgb, var(--fp-privacy-surface_text) 72%, var(--fp-privacy-surface_bg));
    }

    .fp-privacy-banner-tab:not(.is-active):hover {
        color: color-mix(in srgb, var(--fp-privacy-surface_text) 78%, var(--fp-privacy-surface_bg));
    }
}

.fp-privacy-banner-panels {
    padding: 14px 22px;
    height: 180px;
    overflow: hidden;
    box-sizing: border-box;
}

.fp-privacy-banner-tab-panel {
    display: block;
    height: 152px;
    overflow-y: auto;
}

.fp-privacy-banner-tab-panel[style*="display: none"] {
    display: none !important;
}

/* Tab Details banner — titolo: .fp-privacy-banner-panel-title (+ .fp-privacy-banner-details-title in JS per hook CSS legacy) */

/* Tab Details banner */
.fp-privacy-banner-details-category {
    margin-bottom: 12px;
}

.fp-privacy-banner-details-category h4 {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.fp-privacy-banner-details-category p {
    margin: 0 0 6px;
    font-size: 0.75rem;
    opacity: 0.88;
}

.fp-privacy-banner-details-services {
    margin: 0 0 0 16px;
    padding: 0;
    font-size: 0.75rem;
}

.fp-privacy-banner-details-services li {
    margin-bottom: 2px;
}

.fp-privacy-banner-details-hint {
    margin: 0 0 10px;
    font-size: 0.75rem;
    line-height: 1.45;
    opacity: 0.88;
}

.fp-privacy-banner-details-empty {
    margin: 0;
    font-size: 0.8125rem;
    opacity: 0.9;
}

.fp-privacy-banner-detected-list {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.fp-privacy-banner-detected-item {
    margin-bottom: 6px;
}

.fp-privacy-banner-detected-name {
    font-weight: 600;
}

.fp-privacy-banner-detected-cat {
    font-weight: 400;
    opacity: 0.88;
}

/* Tab About banner — corpo allineato al messaggio tab Consenso */
.fp-privacy-banner-about-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.92;
    color: inherit;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-banner-tabs {
        background: var(--fp-privacy-surface_bg);
    }
}

/* Area bottoni — separatore sottile */
.fp-privacy-banner-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 14px 22px 16px;
    border-top: 1px solid var(--fp-privacy-border);
}

/* Bottoni — design system FP, colori da palette */
.fp-privacy-button {
    cursor: pointer;
    border-radius: var(--fp-privacy-radius-pill);
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    border: 1px solid transparent;
    transition: box-shadow var(--fp-privacy-transition), transform var(--fp-privacy-transition), background var(--fp-privacy-transition), border-color var(--fp-privacy-transition);
    box-shadow: var(--fp-privacy-shadow-sm);
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
}

/* Stato di caricamento per pulsanti */
.fp-privacy-button.fp-loading {
    pointer-events: none;
    opacity: 0.7;
}

.fp-privacy-button.fp-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fpPrivacySpin 0.6s linear infinite;
}

@keyframes fpPrivacySpin {
    to { transform: rotate(360deg); }
}

.fp-privacy-button-primary {
    background: var(--fp-privacy-button_primary_bg);
    color: var(--fp-privacy-button_primary_tx);
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 30%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-button-primary {
        box-shadow: var(--fp-privacy-shadow-sm);
    }
}

.fp-privacy-button-primary:hover:not(.fp-loading) {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 40%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-button-primary:hover:not(.fp-loading) {
        box-shadow: var(--fp-privacy-shadow-hover);
    }
}

/* Accetta tutto: CTA principale, più visibile */
.fp-privacy-banner-buttons .fp-privacy-button-primary {
    font-weight: 700;
    min-height: 2.45rem;
    padding: 0.45rem 1.25rem;
}

/* Rifiuta: stile secondario, meno enfasi */
.fp-privacy-banner-buttons .fp-privacy-button-reject {
    font-weight: 500;
}

.fp-privacy-button-primary:focus-visible,
.fp-privacy-button-secondary:focus-visible,
.fp-privacy-button-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-privacy-focus) 35%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-button-primary:focus-visible,
    .fp-privacy-button-secondary:focus-visible,
    .fp-privacy-button-danger:focus-visible {
        outline: 3px solid var(--fp-privacy-focus);
        outline-offset: 2px;
        box-shadow: none;
    }
}

.fp-privacy-button-secondary {
    background: var(--fp-privacy-button_secondary_bg);
    color: var(--fp-privacy-button_secondary_tx);
    border-color: var(--fp-privacy-border);
}

.fp-privacy-button:hover:not(.fp-loading) {
    transform: translateY(-1px);
    box-shadow: var(--fp-privacy-shadow-hover);
}

.fp-privacy-button:active:not(.fp-loading) {
    transform: translateY(0);
}

.fp-privacy-button-secondary:hover:not(.fp-loading) {
    background: color-mix(in srgb, var(--fp-privacy-button_secondary_bg) 92%, var(--fp-privacy-border));
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-button-secondary:hover:not(.fp-loading) {
        background: #f3f4f6;
    }
}

.fp-privacy-button-danger {
    background: #dc3232;
    color: #ffffff;
    border: 1px solid #dc3232;
}

.fp-privacy-button-danger:hover:not(.fp-loading) {
    background: #b52727;
    border-color: #b52727;
}

.fp-privacy-button-danger:active:not(.fp-loading) {
    background: #9a1f1f;
    border-color: #9a1f1f;
}

.fp-privacy-banner-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

/* Link policy — underline soft che cresce da sinistra all'hover (stile FP) */
.fp-privacy-link {
    color: var(--fp-privacy-link);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding-bottom: 1px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color var(--fp-privacy-transition), background-size var(--fp-privacy-transition);
}

.fp-privacy-link:hover,
.fp-privacy-link:focus-visible {
    background-size: 100% 1px;
    text-decoration: none;
}

.fp-privacy-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-privacy-focus) 30%, transparent);
    border-radius: 3px;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-link:focus-visible {
        outline: 2px solid var(--fp-privacy-focus);
        outline-offset: 2px;
        box-shadow: none;
    }
}

.fp-privacy-reopen {
    position: fixed;
    bottom: 18px;
    left: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(17, 24, 39, 0.75);
    color: #f9fafb;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    z-index: 2147483645;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
    backdrop-filter: blur(8px);
}

.fp-privacy-reopen:hover,
.fp-privacy-reopen:focus {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    outline: 3px solid var(--fp-privacy-focus);
    outline-offset: 2px;
    opacity: 1;
    background: rgba(17, 24, 39, 0.9);
}

.fp-privacy-reopen:active {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.fp-privacy-reopen-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.fp-privacy-reopen-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.2s ease;
}

.fp-privacy-reopen:hover .fp-privacy-reopen-icon svg,
.fp-privacy-reopen:focus .fp-privacy-reopen-icon svg {
    transform: rotate(15deg);
}

@media (prefers-reduced-motion: reduce) {
    .fp-privacy-reopen {
        transition: none;
    }

    .fp-privacy-reopen:hover,
    .fp-privacy-reopen:focus {
        transform: none;
    }
}

/* Overlay modal */
.fp-privacy-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 100% risolve contro il layout viewport, che su mobile include l'area
       coperta dalla barra indirizzi del browser: la sovrapposizione centrava
       la modale su uno spazio piu' alto di quello davvero visibile, e "Gestisci
       preferenze" restava sotto il bordo dello schermo (segnalato da Francesco
       l'1/09/2026 su Cronaca di Viterbo, ma la CSS e' condivisa da tutta la
       flotta). dvh segue il viewport visibile; il fallback 100% resta per i
       browser che non la supportano. */
    height: 100%;
    height: 100dvh;
    background: rgba(17, 24, 39, 0.6);
    z-index: 2147483646;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    animation: fpPrivacyFadeInOverlay 0.3s ease-out;
    backdrop-filter: blur(8px);
}

@keyframes fpPrivacyFadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal container — max-width pi\u00f9 ampio e radius-lg per respirare meglio */
.fp-privacy-modal {
    background: var(--fp-privacy-surface_bg);
    color: var(--fp-privacy-surface_text);
    max-width: 500px;
    width: 100%;
    border-radius: var(--fp-privacy-radius-lg);
    padding: 0;
    box-shadow: var(--fp-privacy-shadow-elevated);
    border: 1px solid var(--fp-privacy-border);
    position: relative;
    z-index: 2147483647;
    animation: fpPrivacyScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    /* Stesso bug qui: 100vh su mobile conta la barra indirizzi come se fosse
       schermo visibile. calc() con un'unita' non supportata invalida l'intera
       dichiarazione, quindi la riga sopra resta come fallback sui browser
       senza dvh. */
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@keyframes fpPrivacyScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header modal — accent bar + titolo + link (arioso, gerarchia tipografica FP) */
.fp-privacy-modal-header {
    position: relative;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--fp-privacy-border);
    background: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 4%, var(--fp-privacy-surface_bg));
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-header {
        background: var(--fp-privacy-surface_bg);
    }
}

.fp-privacy-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--fp-privacy-button_primary_bg) 0%,
        color-mix(in srgb, var(--fp-privacy-button_primary_bg) 82%, #000) 100%);
    border-radius: var(--fp-privacy-radius-lg) var(--fp-privacy-radius-lg) 0 0;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-header::before {
        background: var(--fp-privacy-button_primary_bg);
    }
}

.fp-privacy-modal-title,
.fp-privacy-modal .fp-privacy-modal-header h2 {
    margin: 0 30px 0.25rem 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: inherit;
}

.fp-privacy-modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.fp-privacy-modal-links .fp-privacy-link {
    font-weight: 600;
}

/* Bottone chiudi — pi\u00f9 tangibile, hover con rotazione sottile */
.fp-privacy-modal-close,
.fp-privacy-modal button.close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--fp-privacy-border);
    border-radius: var(--fp-privacy-radius-sm);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.75;
    transition: background var(--fp-privacy-transition), border-color var(--fp-privacy-transition), opacity var(--fp-privacy-transition), transform var(--fp-privacy-transition), color var(--fp-privacy-transition);
}

.fp-privacy-modal-close:hover,
.fp-privacy-modal-close:focus,
.fp-privacy-modal button.close:hover,
.fp-privacy-modal button.close:focus {
    opacity: 1;
    background: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 10%, transparent);
    border-color: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 40%, var(--fp-privacy-border));
    color: var(--fp-privacy-button_primary_bg);
    transform: rotate(90deg);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-close:hover,
    .fp-privacy-modal-close:focus,
    .fp-privacy-modal button.close:hover,
    .fp-privacy-modal button.close:focus {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--fp-privacy-border);
    }
}

.fp-privacy-modal-close:focus-visible,
.fp-privacy-modal button.close:focus-visible {
    outline: 3px solid var(--fp-privacy-focus);
    outline-offset: 2px;
}

/* Tab bar modal — padding pi\u00f9 confortevole, hover con soft background */
.fp-privacy-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--fp-privacy-border);
    background: color-mix(in srgb, var(--fp-privacy-border) 5%, var(--fp-privacy-surface_bg));
    padding: 0 16px;
}

.fp-privacy-modal-tab {
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
    transition: border-color var(--fp-privacy-transition), color var(--fp-privacy-transition), background var(--fp-privacy-transition);
    margin-bottom: -1px;
    color: #475569; /* AA su sfondo chiaro (~6.4:1); fallback senza color-mix */
    border-radius: var(--fp-privacy-radius-sm) var(--fp-privacy-radius-sm) 0 0;
}

.fp-privacy-modal-tab:hover {
    color: #475569;
    background: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 6%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-tab:hover {
        background: rgba(0, 0, 0, 0.03);
    }
}

.fp-privacy-modal-tab.is-active {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    border-bottom-color: var(--fp-privacy-button_primary_bg);
    color: var(--fp-privacy-button_primary_bg);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-tab:not(.is-active) {
        color: color-mix(in srgb, var(--fp-privacy-surface_text) 72%, var(--fp-privacy-surface_bg));
    }

    .fp-privacy-modal-tab:not(.is-active):hover {
        color: color-mix(in srgb, var(--fp-privacy-surface_text) 78%, var(--fp-privacy-surface_bg));
    }
}

.fp-privacy-modal-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fp-privacy-modal-tab-panel {
    flex: 1;
    overflow-y: auto;
}

/* Tab Details — elenco categorie e servizi */
.fp-privacy-details-title {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.fp-privacy-details-category {
    margin-bottom: 12px;
}

.fp-privacy-details-category h4 {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.fp-privacy-details-category p {
    margin: 0 0 6px;
    font-size: 0.75rem;
    opacity: 0.88;
}

.fp-privacy-details-services {
    margin: 0 0 0 16px;
    padding: 0;
    font-size: 0.75rem;
}

.fp-privacy-details-services li {
    margin-bottom: 2px;
}

/* Tab About */
.fp-privacy-about-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    opacity: 0.92;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-tabs {
        background: var(--fp-privacy-surface_bg);
    }
}

/* Body modal — categorie scrollabili, padding arioso */
.fp-privacy-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.fp-privacy-modal-body p {
    font-size: 0.8125rem;
    margin-bottom: 0.35rem;
    line-height: 1.45;
    color: inherit;
    opacity: 0.9;
}

/* Card categoria cookie — stile "card FP" arioso, hover con bordo + shadow */
.fp-privacy-category {
    border: 1px solid var(--fp-privacy-border);
    border-radius: var(--fp-privacy-radius-md);
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: box-shadow var(--fp-privacy-transition), border-color var(--fp-privacy-transition), transform var(--fp-privacy-transition);
    background: var(--fp-privacy-surface_bg);
}

.fp-privacy-category:hover,
.fp-privacy-category:focus-within {
    border-color: color-mix(in srgb, var(--fp-privacy-button_primary_bg) 45%, var(--fp-privacy-border));
    box-shadow: var(--fp-privacy-shadow-hover);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-category:hover,
    .fp-privacy-category:focus-within {
        border-color: var(--fp-privacy-button_primary_bg);
    }
}

/* Intestazione categoria: titolo + toggle sulla stessa riga */
.fp-privacy-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.fp-privacy-category-head h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
    letter-spacing: -0.01em;
}

/* Larghezza fissa + griglia: lo switch resta nella stessa colonna (36px) anche se il testo
   (Obbligatorio vs Abilitato) cambia — evita che space-between sposti il toggle. */
.fp-privacy-category-head .fp-privacy-switch {
    flex-shrink: 0;
    margin-top: 0;
    align-self: center;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 0.35rem;
    align-items: center;
    width: 8.75rem;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: unset;
}

.fp-privacy-category p {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    opacity: 0.85;
    color: inherit;
}

.fp-privacy-category:last-child {
    margin-bottom: 0;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-category:hover {
        border-color: var(--fp-privacy-border);
    }
}

/* Sub-servizi (categorie con toggle individuali) */
.fp-privacy-sub-services {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--fp-privacy-border);
}

.fp-privacy-sub-services h4 {
    margin: 0 0 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.9;
}

.fp-privacy-service-toggle {
    margin-bottom: 3px;
    font-size: 0.6875rem;
}

.fp-privacy-service-toggle:last-child {
    margin-bottom: 0;
}

.fp-privacy-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-top: 1px;
}

/* Solo riga stato categoria (Obbligatorio / Abilitato), non etichette servizi nei sub-toggle */
.fp-privacy-modal .fp-privacy-category-head > .fp-privacy-switch > span {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

/* Toggle switch — allineato al design system FP (shadow soft sulla pallina,
   transizione cubic-bezier coerente, focus ring morbido). Palette invariata: cliente. */
.fp-privacy-switch input[type="checkbox"] {
    width: 36px;
    height: 20px;
    appearance: none;
    background: var(--fp-privacy-border);
    border-radius: var(--fp-privacy-radius-pill);
    position: relative;
    cursor: pointer;
    transition: background var(--fp-privacy-transition), box-shadow var(--fp-privacy-transition);
    flex-shrink: 0;
}

.fp-privacy-switch input[type="checkbox"]:checked {
    background: var(--fp-privacy-button_primary_bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 30%, transparent),
                0 2px 6px color-mix(in srgb, var(--fp-privacy-button_primary_bg) 25%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-switch input[type="checkbox"]:checked {
        box-shadow: var(--fp-privacy-shadow-sm);
    }
}

.fp-privacy-switch input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform var(--fp-privacy-transition), box-shadow var(--fp-privacy-transition);
}

.fp-privacy-switch input[type="checkbox"]:checked::after {
    transform: translateX(16px);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}

.fp-privacy-switch input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fp-privacy-switch input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-privacy-focus) 35%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-switch input[type="checkbox"]:focus-visible {
        outline: 3px solid var(--fp-privacy-focus);
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Footer modal — azioni in riga, padding pi\u00f9 arioso */
.fp-privacy-modal-footer {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--fp-privacy-border);
    background: color-mix(in srgb, var(--fp-privacy-border) 8%, var(--fp-privacy-surface_bg));
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .fp-privacy-modal-footer {
        background: var(--fp-privacy-surface_bg);
    }
}

.fp-privacy-modal-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.fp-privacy-modal-actions-primary,
.fp-privacy-modal-actions-secondary {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.fp-privacy-modal-footer .fp-privacy-button {
    font-weight: 600;
    padding: 0.42rem 0.9rem;
    font-size: 0.8125rem;
}

.fp-privacy-modal-footer .fp-privacy-button-revoke {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
}

.fp-privacy-cookie-debug {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    background: var(--fp-privacy-surface_bg);
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--fp-privacy-border);
    border-left: 3px solid var(--fp-privacy-link);
}

.fp-privacy-blocked {
    border: 1px solid var(--fp-privacy-border, #d1d5db);
    background-color: rgba(249, 250, 251, 0.92);
    color: var(--fp-privacy-surface_text, #111827);
    padding: 20px;
    text-align: center;
    border-radius: 12px;
    margin: 24px 0;
}

.fp-privacy-blocked p {
    margin: 0 0 12px;
}

.fp-privacy-blocked .button {
    margin: 0 auto;
}

.fp-privacy-style-placeholder {
    display: none;
}

/* Responsive ottimizzato */
@media (max-width: 782px) {
    .fp-privacy-banner {
        /* min-width desktop (640px) altrimenti forza larghezza > viewport su mobile */
        min-width: 0;
        max-width: calc(100% - 32px);
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
        /* Azzera l'offset anche dentro i keyframes (variabile), non solo a riposo:
         * prima l'animazione d'ingresso partiva con translateX(-50%) hardcoded e
         * il banner entrava mezzo fuori schermo a sinistra per 0.4s. */
        --fp-privacy-shift-x: 0px;
        transform: none;
        bottom: 16px;
    }
    
    .fp-privacy-banner-content {
        padding: 14px 18px 12px;
    }
    
    .fp-privacy-banner-panels {
        padding: 12px 18px;
        height: 168px;
    }
    
    .fp-privacy-banner-tab-panel {
        height: 132px;
    }
    
    .fp-privacy-banner-buttons {
        padding: 12px 18px 14px;
    }
    
    .fp-privacy-modal {
        border-radius: var(--fp-privacy-radius-md) var(--fp-privacy-radius-md) 0 0;
        max-height: 90vh;
    }
    
    .fp-privacy-modal-header {
        padding: 3px 8px 2px;
    }
    
    .fp-privacy-modal-body {
        padding: 3px 8px;
    }
    
    .fp-privacy-modal-footer {
        padding: 3px 8px 4px;
    }
    
    .fp-privacy-modal-close,
    .fp-privacy-modal button.close {
        top: 3px;
        right: 3px;
    }
    
    .fp-privacy-modal-tabs {
        padding: 0 8px;
    }
    
    .fp-privacy-modal-tab {
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    .fp-privacy-category-head {
        flex-wrap: wrap;
    }

    .fp-privacy-category-head .fp-privacy-switch {
        margin-left: auto;
    }
    
    .fp-privacy-banner-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .fp-privacy-banner-buttons .fp-privacy-button {
        width: 100%;
        text-align: center;
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Il bottone delle preferenze (terzo bottone) occupa tutta la larghezza */
    .fp-privacy-banner-buttons .fp-privacy-button:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 375px) {
    .fp-privacy-banner {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    
    .fp-privacy-banner h2 {
        font-size: 1rem;
    }
    
    .fp-privacy-banner-buttons {
        gap: 0.5rem;
    }
    
    .fp-privacy-banner-buttons .fp-privacy-button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .fp-privacy-reopen {
        width: 34px;
        height: 34px;
        bottom: 14px;
        left: 14px;
    }
}

/* Animazioni ridotte per utenti con preferenza */
@media (prefers-reduced-motion: reduce) {
    .fp-privacy-banner,
    .fp-privacy-modal,
    .fp-privacy-modal-overlay,
    .fp-privacy-button,
    .fp-privacy-category {
        animation: none !important;
        transition: none !important;
    }
}