/* Visitor preferences banner. Class/id names and this file's name are kept
   neutral on purpose: ad/privacy blockers match "cookie-consent" filenames and
   the "cc-" class signature (Osano cookieconsent) and would hide/block the
   banner. All colors/sizes come from CSS custom properties so the per-site
   style settings can override them inline on #vpref-root. Font inherits from
   the site on purpose. */
#vpref-root {
    --cc-bg: #ffffff;
    --cc-text: #1f2430;
    --cc-link: #1f2430;
    --cc-btn-bg: #1f2430;
    --cc-btn-text: #ffffff;
    --cc-btn2-bg: transparent;
    --cc-btn2-text: #1f2430;
    --cc-radius: 10px;
    --cc-font-size: 15px;
    --cc-padding: 22px;
    position: fixed;
    z-index: 2147483000;
    inset: auto 0 0 0;
    font-size: var(--cc-font-size);
    color: var(--cc-text);
}
#vpref-root[hidden] { display: none; }

#vpref-root .vpref-backdrop { display: none; }
#vpref-root.vpref-has-overlay .vpref-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#vpref-root .vpref-dialog {
    position: relative;
    background: var(--cc-bg);
    padding: var(--cc-padding);
    line-height: 1.5;
}
#vpref-root.vpref-has-shadow .vpref-dialog { box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.18); }

/* Positions */
#vpref-root.vpref-bar .vpref-dialog { width: 100%; }
#vpref-root.vpref-card-left, #vpref-root.vpref-card-right {
    inset: auto auto 20px 20px;
    max-width: 420px;
}
#vpref-root.vpref-card-right { inset: auto 20px 20px auto; }
#vpref-root.vpref-card-left .vpref-dialog, #vpref-root.vpref-card-right .vpref-dialog {
    border-radius: var(--cc-radius);
}
#vpref-root.vpref-card-left.vpref-has-shadow .vpref-dialog, #vpref-root.vpref-card-right.vpref-has-shadow .vpref-dialog {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

#vpref-root .vpref-title { margin: 0 0 8px; font-size: 1.15em; color: inherit; }
#vpref-root .vpref-intro { margin: 0 0 14px; }
#vpref-root .vpref-policy-link { color: var(--cc-link); text-decoration: underline; }

#vpref-root .vpref-prefs { margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
#vpref-root .vpref-pref {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
}
#vpref-root .vpref-pref-title { display: block; font-weight: 600; }
#vpref-root .vpref-pref-desc { display: block; font-size: 0.88em; opacity: 0.8; }
#vpref-root .vpref-toggle { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }

#vpref-root .vpref-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Accept and Reject share vpref-btn-primary by design (equal prominence). */
#vpref-root .vpref-btn {
    font: inherit;
    font-size: 1em;
    padding: 10px 18px;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-btn-bg);
    cursor: pointer;
}
#vpref-root .vpref-btn-primary { background: var(--cc-btn-bg); color: var(--cc-btn-text); }
#vpref-root .vpref-btn-secondary {
    background: var(--cc-btn2-bg);
    color: var(--cc-btn2-text);
    border-color: currentColor;
}

/* Blocked form overlay (used by protection.twig when functional consent is missing) */
.vpref-form-guard { position: relative; }
.vpref-form-blocked {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 6px;
}
.vpref-form-blocked button {
    font: inherit;
    padding: 9px 16px;
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
}

@media (max-width: 600px) {
    #vpref-root.vpref-card-left, #vpref-root.vpref-card-right { inset: auto 0 0 0; max-width: none; }
    #vpref-root .vpref-actions .vpref-btn { flex: 1 1 100%; }
}