/* VireonWP – Cookie Banner + Preferenze */

/* ── Banner principale ── */
#vireon-cookie-banner {
    font-family: var(--vcb-font) !important;
    font-size: var(--vcb-fsize) !important;
    background: var(--vcb-bg) !important;
    color: var(--vcb-fg) !important;
    position: fixed !important;
    z-index: 2147483646 !important;
    box-sizing: border-box !important;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s !important;
}

/* Posizioni */
#vireon-cookie-banner.vcb-pos-bottom { bottom:0;left:0;right:0;transform:translateY(110%) }
#vireon-cookie-banner.vcb-pos-top    { top:0;left:0;right:0;transform:translateY(-110%) }
#vireon-cookie-banner.vcb-pos-center { top:50%;left:50%;transform:translate(-50%,-60%);opacity:0;max-width:560px;width:90%;border-radius:20px }
#vireon-cookie-banner.vcb-visible.vcb-pos-bottom,
#vireon-cookie-banner.vcb-visible.vcb-pos-top    { transform:translateY(0) !important }
#vireon-cookie-banner.vcb-visible.vcb-pos-center { transform:translate(-50%,-50%) !important;opacity:1 !important }

/* Layout Barra */
#vireon-cookie-banner.vcb-layout-bar {
    display:flex;align-items:center;gap:20px;padding:16px 28px;
    flex-wrap:wrap;border-top:3px solid var(--vcb-accent);
}
#vireon-cookie-banner.vcb-pos-top.vcb-layout-bar { border-top:none;border-bottom:3px solid var(--vcb-accent) }
#vireon-cookie-banner.vcb-layout-bar .vcb-text { flex:1;min-width:200px }
#vireon-cookie-banner.vcb-layout-bar .vcb-actions { display:flex;gap:8px;flex-shrink:0 }
#vireon-cookie-banner.vcb-layout-bar .vcb-actions-row { display:contents }
#vireon-cookie-banner.vcb-layout-bar .vcb-actions .vcb-btn { flex-shrink:0 }

/* Layout Box */
#vireon-cookie-banner.vcb-layout-box {
    display:flex;flex-direction:column;align-items:flex-start;
    padding:28px 32px;border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);gap:14px;
}
#vireon-cookie-banner.vcb-layout-box .vcb-actions { display:flex;gap:8px;width:100% }
#vireon-cookie-banner.vcb-layout-box .vcb-actions-row { display:contents }
#vireon-cookie-banner.vcb-layout-box .vcb-actions .vcb-btn { flex:1;justify-content:center }
#vireon-cookie-banner.vcb-layout-box .vcb-icon { font-size:32px }
#vireon-cookie-banner.vcb-layout-box .vcb-title { font-size:18px;font-weight:700;color:var(--vcb-fg);margin:0 }

/* Layout Floating */
#vireon-cookie-banner.vcb-layout-floating {
    display:flex;flex-direction:column;padding:24px 28px;border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);gap:16px;
    max-width:400px;width:calc(100% - 40px);
    bottom:24px !important;top:auto !important;right:24px !important;left:auto !important;
    transform:translateY(20px);opacity:0;
}
#vireon-cookie-banner.vcb-layout-floating.vcb-visible { transform:translateY(0) !important;opacity:1 !important }
#vireon-cookie-banner.vcb-layout-floating .vcb-actions { display:flex;gap:8px;flex-direction:column }
#vireon-cookie-banner.vcb-layout-floating .vcb-actions-row { display:flex;gap:8px;width:100% }
#vireon-cookie-banner.vcb-layout-floating .vcb-actions-row .vcb-btn { flex:1 }
#vireon-cookie-banner.vcb-layout-floating .vcb-btn-settings { width:100% }
#vireon-cookie-banner.vcb-layout-floating .vcb-icon { font-size:28px }
#vireon-cookie-banner.vcb-layout-floating .vcb-title { font-size:16px;font-weight:700;color:var(--vcb-fg);margin:0 }

/* Testo e link */
#vireon-cookie-banner .vcb-text { line-height:1.6;color:var(--vcb-fg) }
#vireon-cookie-banner .vcb-text a { color:var(--vcb-link);text-decoration:underline }

/* Pulsanti banner */
#vireon-cookie-banner .vcb-btn {
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 22px;border-radius:12px;
    font-size:var(--vcb-fsize);font-family:var(--vcb-font);
    font-weight:600;cursor:pointer;border:none;
    transition:all 0.2s;white-space:nowrap;
}
#vireon-cookie-banner .vcb-btn-accept {
    background:var(--vcb-accent);color:var(--vcb-btnfg);
    box-shadow:0 4px 14px rgba(0,0,0,.2);
}
#vireon-cookie-banner .vcb-btn-accept:hover { filter:brightness(1.1);transform:translateY(-1px) }
#vireon-cookie-banner .vcb-btn-decline {
    background:transparent;color:var(--vcb-fg);
    border:2px solid var(--vcb-fg);
    opacity:.85;
}
#vireon-cookie-banner .vcb-btn-decline:hover { background:rgba(255,255,255,.08) }
#vireon-cookie-banner .vcb-btn-settings {
    background:transparent;color:var(--vcb-fg);
    border:2px solid var(--vcb-fg);
    opacity:.75;font-size:calc(var(--vcb-fsize) - 1px);
}
#vireon-cookie-banner .vcb-btn-settings:hover { opacity:1 }


/* Overlay centro */
#vireon-cookie-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:2147483645 !important;backdrop-filter:blur(3px);display:none;
}
#vireon-cookie-overlay.vcb-visible { display:block }

/* ── Pannello Preferenze – Popup Centrale ── */
.vpref-panel {
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%, -40%);
    opacity:0;
    width:520px;max-width:calc(100vw - 40px);
    max-height:85vh;
    background:var(--vcb-bg);color:var(--vcb-fg);
    font-family:var(--vcb-font);font-size:var(--vcb-fsize);
    z-index:2147483647 !important;
    border-radius:20px;
    box-shadow:0 24px 80px rgba(0,0,0,.55);
    display:flex;flex-direction:column;
    transition:transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s;
    pointer-events:none;
}
.vpref-panel.vpref-open {
    transform:translate(-50%, -50%);
    opacity:1;
    pointer-events:auto;
}

.vpref-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:2147483646 !important;backdrop-filter:blur(4px);
}

.vpref-inner {
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
    overflow:hidden !important;
    border-radius:20px !important;
    background:var(--vcb-bg) !important;
    color:var(--vcb-fg) !important;
    font-family:var(--vcb-font) !important;
    font-size:var(--vcb-fsize) !important;
}
/* Forza colori su tutto il pannello */
#vireon-pref-panel,
#vireon-pref-panel * {
    box-sizing: border-box !important;
}
#vireon-pref-panel .vpref-header h2 {
    color: var(--vcb-fg) !important;
    font-family: var(--vcb-font) !important;
}

.vpref-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);
    flex-shrink:0;
}
.vpref-header h2 {
    font-size:17px;font-weight:700;color:var(--vcb-fg);margin:0;
    font-family:var(--vcb-font);
}
.vpref-close {
    background:rgba(255,255,255,.1);border:none;color:var(--vcb-fg);
    font-size:16px;cursor:pointer;opacity:.8;
    transition:all 0.2s;padding:6px 10px;line-height:1;
    border-radius:8px;
}
.vpref-close:hover { opacity:1;background:rgba(255,255,255,.2) }

.vpref-body { flex:1;overflow-y:auto;padding:16px 24px }

.vpref-cat {
    background:rgba(128,128,128,.08) !important;
    border:1px solid rgba(128,128,128,.2) !important;
    border-radius:12px !important;
    padding:16px !important;
    margin-bottom:10px !important;
    transition:border-color 0.2s !important;
}
.vpref-cat:hover { border-color:rgba(128,128,128,.4) !important }
.vpref-cat-top { display:flex !important;align-items:center !important;gap:12px !important }
.vpref-cat-info { flex:1 !important }
.vpref-cat-info strong {
    display:block !important;
    font-size:14px !important;
    font-weight:700 !important;
    color:var(--vcb-fg) !important;
    margin-bottom:4px !important;
    font-family:var(--vcb-font) !important;
}
.vpref-cat-info p {
    font-size:12px !important;
    color:var(--vcb-fg) !important;
    opacity:.75 !important;
    margin:0 !important;
    line-height:1.5 !important;
    font-family:var(--vcb-font) !important;
}

.vpref-always-on {
    font-size:11px;font-weight:600;color:var(--vcb-accent);
    background:rgba(65,181,76,.15);border:1px solid rgba(65,181,76,.3);
    padding:4px 10px;border-radius:20px;flex-shrink:0;white-space:nowrap;margin-top:2px;
}

/* Toggle preferenze */
.vpref-toggle { position:relative;display:inline-block;width:46px;height:25px;cursor:pointer;flex-shrink:0;margin-top:2px }
.vpref-toggle input { opacity:0;width:0;height:0;position:absolute }
.vpref-track {
    position:absolute;inset:0;
    background:#8a9bb0;border-radius:25px;
    transition:background 0.3s;border:none;
}
.vpref-thumb {
    position:absolute;top:3px;left:3px;
    width:18px;height:18px;background:#fff;border-radius:50%;
    transition:transform 0.3s;box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.vpref-toggle input:checked + .vpref-track { background:var(--vcb-toggle, #41b54c) }
.vpref-toggle input:checked + .vpref-track .vpref-thumb { transform:translateX(20px) }
/* Classe gestita via JS come fallback */
.vpref-track.is-on { background:var(--vcb-toggle, #41b54c) !important }
.vpref-track.is-on .vpref-thumb { transform:translateX(20px) !important }

.vpref-footer {
    display:flex;gap:10px;padding:16px 24px;
    border-top:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.vpref-footer .vcb-btn { flex:1;justify-content:center;border-radius:12px !important }

/* Pulsante Accetta tutti nel pannello preferenze */
#vpref-accept-all {
    background: var(--vcb-pref-accept-bg, var(--vcb-accent)) !important;
    color: var(--vcb-pref-accept-fg, var(--vcb-btnfg)) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.2) !important;
}
#vpref-accept-all:hover { filter:brightness(1.1) !important;transform:translateY(-1px) !important }

/* Pulsante Salva preferenze nel pannello preferenze */
#vpref-save {
    background: transparent !important;
    color: var(--vcb-pref-save-fg, var(--vcb-fg)) !important;
    border: 1px solid var(--vcb-pref-save-fg, rgba(255,255,255,.3)) !important;
}
#vpref-save:hover { background:rgba(255,255,255,.08) !important }

@media (max-width:600px) {
    .vpref-panel { width:calc(100vw - 24px);max-height:90vh }
    #vireon-cookie-banner.vcb-layout-bar { flex-direction:column;align-items:flex-start;padding:16px }
    #vireon-cookie-banner.vcb-layout-floating { right:12px !important;bottom:12px !important;width:calc(100% - 24px) !important }
}

/* ── Toggle preferenze frontend ── */
.vpref-toggle-btn {
    width:46px;height:25px;
    background:#8a9bb0;
    border-radius:25px;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
    margin-top:2px;
    transition:background 0.25s;
    -webkit-tap-highlight-color:transparent;
}
.vpref-toggle-btn.is-on {
    background:var(--vcb-toggle,#41b54c);
}
.vpref-toggle-thumb {
    position:absolute;
    top:3px;left:3px;
    width:19px;height:19px;
    background:#fff;
    border-radius:50%;
    transition:transform 0.25s;
    box-shadow:0 2px 5px rgba(0,0,0,.3);
    pointer-events:none;
}
.vpref-toggle-btn.is-on .vpref-toggle-thumb {
    transform:translateX(21px);
}