/**
 * DB Cookie Manager — Banner frontend CSS
 *
 * Filosofia:
 *  - Prefix .dbcm- per evitare conflitti con tema e altri plugin.
 *  - Self-contained: niente Tailwind, niente Bootstrap, niente CDN.
 *  - Variabili --dbcm-* dentro #dbcm-banner-root → temizzabili dall'admin.
 *  - Accessibile: focus-visible 3px, target 44×44, contrast WCAG AA, reduced-motion.
 */

/* =========================================================================
 * Variabili (default light theme — sovrascrivibili da [data-theme="dark"])
 * ========================================================================= */
#dbcm-banner-root {
    --dbcm-bg:        #ffffff;
    --dbcm-text:      #1d2327;
    --dbcm-muted:     #646970;
    --dbcm-border:    #dcdcde;
    --dbcm-primary:   #2271b1;
    --dbcm-primary-h: #135e96;
    --dbcm-on-primary: #ffffff;
    --dbcm-radius:    10px;
    --dbcm-shadow:    0 8px 30px rgba(0, 0, 0, .15);
    --dbcm-z:         99999;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--dbcm-text);
    line-height: 1.5;
}

#dbcm-banner-root[data-theme="dark"] {
    --dbcm-bg:     #1d2327;
    --dbcm-text:   #f0f0f1;
    --dbcm-muted:  #a7aaad;
    --dbcm-border: #3c434a;
}

/* =========================================================================
 * Banner principale
 * ========================================================================= */
.dbcm-banner {
    position: fixed;
    z-index: var(--dbcm-z);
    background: var(--dbcm-bg);
    color: var(--dbcm-text);
    border: 1px solid var(--dbcm-border);
    border-radius: var(--dbcm-radius);
    box-shadow: var(--dbcm-shadow);
    padding: 20px 22px;
    max-width: 460px;
    width: calc(100% - 32px);
    box-sizing: border-box;
    animation: dbcm-slide-in .3s ease-out;
}

/* Posizioni (layout=box) */
.dbcm-banner--bottom-right  { bottom: 20px; right: 20px; }
.dbcm-banner--bottom-left   { bottom: 20px; left: 20px; }
.dbcm-banner--bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); }

/* Layout=bar — banner full-width attaccato in basso */
.dbcm-banner--bar {
    max-width: none;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.dbcm-banner__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.dbcm-banner__msg {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--dbcm-muted);
}

.dbcm-banner__policy {
    margin: 0 0 14px;
    font-size: 13px;
}
.dbcm-banner__policy a {
    color: var(--dbcm-primary);
    text-decoration: underline;
}
.dbcm-banner__policy a:hover { color: var(--dbcm-primary-h); }

.dbcm-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* =========================================================================
 * Bottoni
 * ========================================================================= */
.dbcm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;          /* WCAG touch target */
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--dbcm-border);
    background: var(--dbcm-bg);
    color: var(--dbcm-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    font-family: inherit;
}
.dbcm-btn:hover {
    background: var(--dbcm-border);
}
.dbcm-btn:active {
    transform: translateY(1px);
}
.dbcm-btn:focus-visible {
    outline: 3px solid var(--dbcm-primary);
    outline-offset: 2px;
}

.dbcm-btn--primary {
    background: var(--dbcm-primary);
    border-color: var(--dbcm-primary);
    color: var(--dbcm-on-primary);
}
.dbcm-btn--primary:hover {
    background: var(--dbcm-primary-h);
    border-color: var(--dbcm-primary-h);
}

.dbcm-btn--secondary {
    background: transparent;
    border-color: var(--dbcm-border);
    color: var(--dbcm-text);
}

.dbcm-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--dbcm-primary);
    text-decoration: underline;
}
.dbcm-btn--ghost:hover {
    background: transparent;
    color: var(--dbcm-primary-h);
}

/* =========================================================================
 * Overlay
 * ========================================================================= */
.dbcm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: calc(var(--dbcm-z) - 1);
    animation: dbcm-fade-in .2s ease-out;
}

/* =========================================================================
 * Modal preferenze (vista espansa)
 * ========================================================================= */
.dbcm-banner--preferences {
    bottom: auto;
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
}

.dbcm-pref__list {
    margin: 16px 0;
    border-top: 1px solid var(--dbcm-border);
}

.dbcm-pref__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dbcm-border);
}
.dbcm-pref__row--locked .dbcm-pref__info {
    opacity: .85;
}

.dbcm-pref__info {
    flex: 1 1 auto;
    min-width: 0;
}

.dbcm-pref__label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.dbcm-pref__desc {
    font-size: 13px;
    color: var(--dbcm-muted);
    line-height: 1.5;
}

/* =========================================================================
 * Toggle switch
 * ========================================================================= */
.dbcm-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex: 0 0 auto;
    cursor: pointer;
    margin-top: 2px;
}
.dbcm-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.dbcm-toggle__slider {
    position: absolute;
    inset: 0;
    background: var(--dbcm-border);
    border-radius: 24px;
    transition: background .2s;
}
.dbcm-toggle__slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.dbcm-toggle__input:checked + .dbcm-toggle__slider {
    background: var(--dbcm-primary);
}
.dbcm-toggle__input:checked + .dbcm-toggle__slider::before {
    transform: translateX(20px);
}
.dbcm-toggle__input:focus-visible + .dbcm-toggle__slider {
    outline: 3px solid var(--dbcm-primary);
    outline-offset: 2px;
}

/* Toggle locked (functional) — sempre on, non interattivo */
.dbcm-toggle--locked {
    cursor: not-allowed;
    opacity: .65;
}
.dbcm-toggle__slider--on {
    background: var(--dbcm-primary);
}
.dbcm-toggle--locked .dbcm-toggle__slider::before {
    transform: translateX(20px);
}

/* =========================================================================
 * Pulsante "Riapri preferenze" flottante
 * ========================================================================= */
.dbcm-reopen {
    position: fixed;
    z-index: var(--dbcm-z);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--dbcm-border);
    background: var(--dbcm-bg);
    color: var(--dbcm-text);
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s;
}
.dbcm-reopen:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.dbcm-reopen:focus-visible {
    outline: 3px solid var(--dbcm-primary);
    outline-offset: 2px;
}

.dbcm-reopen--bottom-left   { bottom: 20px; left: 20px; }
.dbcm-reopen--bottom-right  { bottom: 20px; right: 20px; }
.dbcm-reopen--top-left      { top: 20px; left: 20px; }
.dbcm-reopen--top-right     { top: 20px; right: 20px; }

/* =========================================================================
 * Iframe placeholder (sostituisce gli iframe bloccati)
 *
 * Nota: i placeholder vivono inline nel content del sito, FUORI dal
 * #dbcm-banner-root. Quindi non possono usare le --dbcm-* scoped.
 * Stilizzo con valori diretti, leggibili e neutri.
 * ========================================================================= */
.dbcm-iframe-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7f7;
    color: #1d2327;
    border: 1px dashed #c3c4c7;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 16px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
}

.dbcm-iframe-placeholder__inner {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.dbcm-iframe-placeholder__text {
    margin: 0;
    font-size: 14px;
    color: #646970;
}

.dbcm-iframe-placeholder__btn {
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #2271b1;
    background: #2271b1;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.dbcm-iframe-placeholder__btn:hover {
    background: #135e96;
    border-color: #135e96;
}
.dbcm-iframe-placeholder__btn:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dbcm-iframe-placeholder__btn { transition: none; }
}
@media (forced-colors: active) {
    .dbcm-iframe-placeholder { border: 1px dashed CanvasText; }
    .dbcm-iframe-placeholder__btn { border: 1px solid CanvasText; }
}

/* =========================================================================
 * Shortcode [dbcm_preferences] — pulsante "Modifica preferenze"
 *
 * Vive ovunque nel content del sito (footer, pagine, widget) → fuori da
 * #dbcm-banner-root. Stile neutro WP-coerente, override-friendly.
 * ========================================================================= */
.dbcm-prefs-btn {
    display: inline-block;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid #2271b1;
    background: #2271b1;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.dbcm-prefs-btn:hover {
    background: #135e96;
    border-color: #135e96;
    color: #ffffff;
}
.dbcm-prefs-btn:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

.dbcm-prefs-link {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.dbcm-prefs-link:hover {
    text-decoration: none;
}
.dbcm-prefs-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dbcm-prefs-btn { transition: none; }
}
@media (forced-colors: active) {
    .dbcm-prefs-btn { border: 1px solid CanvasText; }
}

/* =========================================================================
 * Animations
 * ========================================================================= */
@keyframes dbcm-slide-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dbcm-banner--bottom-center { animation: none; } /* l'animazione interferisce col translateX */

@keyframes dbcm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================================================
 * Responsive
 * ========================================================================= */
@media (max-width: 600px) {
    .dbcm-banner--bottom-right,
    .dbcm-banner--bottom-left,
    .dbcm-banner--bottom-center {
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        transform: none;
    }
    .dbcm-banner--preferences {
        left: 16px;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        max-width: none;
    }
    .dbcm-banner__actions { gap: 6px; }
    .dbcm-banner__actions .dbcm-btn { flex: 1 1 auto; }
}

/* =========================================================================
 * Reduced motion / forced colors
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .dbcm-banner,
    .dbcm-overlay,
    .dbcm-toggle__slider,
    .dbcm-toggle__slider::before,
    .dbcm-btn,
    .dbcm-reopen {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .dbcm-banner,
    .dbcm-btn,
    .dbcm-pref__row,
    .dbcm-toggle__slider,
    .dbcm-reopen {
        border: 1px solid CanvasText;
    }
    .dbcm-toggle__input:checked + .dbcm-toggle__slider {
        background: Highlight;
    }
}