/**
 * Consent banner styling.
 *
 * Colours come from custom properties, each with a fallback inside the var():
 * an untouched palette follows the visitor's light/dark preference, while
 * anything set in the admin is printed inline on the root and wins everywhere.
 */

.gdprc {
    position: fixed;
    z-index: 99999;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gdprc-text, #1f2937);
}

.gdprc[hidden] { display: none; }

.gdprc--bottom-left  { bottom: 20px; left: 20px; }
.gdprc--bottom-right { bottom: 20px; right: 20px; }
.gdprc--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gdprc--bar {
    max-width: none;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
}

.gdprc--bar .gdprc-dialog {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 0;
}

/* ------------------------------------------------------------------- modal */

/* Blocking layout: the banner owns the viewport until a choice is made. The
   dialog is centred over a backdrop and the page behind it cannot be reached,
   the way news sites and Google do it. Position modifiers do not apply. */
.gdprc--modal {
    inset: 0;
    max-width: none;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gdprc-overlay {
    position: fixed;
    inset: 0;
    background: var(--gdprc-overlay, #0f172a);
    opacity: var(--gdprc-overlay-alpha, .6);
}

.gdprc--modal .gdprc-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
}

/* Set on <html> while a blocking banner is open. */
.gdprc-scroll-locked { overflow: hidden !important; }

/* ------------------------------------------------------------------ dialog */

.gdprc-dialog {
    background: var(--gdprc-surface, #fff);
    border: 1px solid var(--gdprc-border, rgba(0, 0, 0, .09));
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 20px 22px;
    max-height: 85vh;
    overflow-y: auto;
}

.gdprc-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: inherit;
}

.gdprc-body { margin: 0 0 10px; }

.gdprc-links { margin: 0 0 14px; font-size: 13px; }
.gdprc-links a { color: inherit; }

.gdprc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gdprc-actions--prefs { margin-top: 14px; }

.gdprc-btn {
    /* basis 0 so the two decision buttons come out the same width whatever
       their labels say: the only difference between them should be the fill. */
    flex: 1 1 0;
    min-width: 120px;
    padding: 10px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

/* Filled. With emphasis "equal" both accept and reject carry this class, which
   is the symmetry the EDPB banner task force expects. */
.gdprc-btn--primary {
    background: var(--gdprc-accent, #1f2937);
    color: var(--gdprc-accent-text, #fff);
}

.gdprc-btn--primary:hover { filter: brightness(1.12); }

/* Outlined: same size and position, lighter weight. Worn by whichever of the
   two the "emphasis" setting steps back. */
.gdprc-btn--quiet {
    background: transparent;
    color: inherit;
    border-color: var(--gdprc-accent, #1f2937);
}

.gdprc-btn--quiet:hover { background: color-mix(in srgb, var(--gdprc-accent, #1f2937) 10%, transparent); }

.gdprc-btn--ghost {
    background: transparent;
    color: var(--gdprc-muted, #64748b);
    border-color: var(--gdprc-border, rgba(0, 0, 0, .25));
    flex: 0 1 auto;
}

.gdprc-btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.gdprc-btn:focus-visible,
.gdprc-reopen:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ------------------------------------------------------------- preferences */

.gdprc-prefs {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gdprc-border, rgba(0, 0, 0, .1));
}

.gdprc-prefs[hidden] { display: none; }

.gdprc-prefs-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}

.gdprc-cat { margin-bottom: 14px; }

.gdprc-cat-head { display: flex; align-items: center; }

.gdprc-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.gdprc-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gdprc-switch-ui {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .15s ease;
}

.gdprc-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.gdprc-switch input:checked + .gdprc-switch-ui { background: var(--gdprc-toggle-on, #16a34a); }
.gdprc-switch input:checked + .gdprc-switch-ui::after { transform: translateX(16px); }
.gdprc-switch input:disabled + .gdprc-switch-ui { background: #94a3b8; cursor: not-allowed; }

.gdprc-switch input:focus-visible + .gdprc-switch-ui {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gdprc-cat-name { font-weight: 600; }

.gdprc-cat-summary {
    margin: 6px 0 0 48px;
    font-size: 13px;
    color: var(--gdprc-muted, #64748b);
}

.gdprc-cat-details {
    margin: 6px 0 0 48px;
    font-size: 13px;
}

.gdprc-cat-details ul { margin: 6px 0 0; padding-left: 18px; }

/* ------------------------------------------------------- reopen + embeds */

.gdprc-reopen {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 99998;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--gdprc-border, rgba(0, 0, 0, .15));
    background: var(--gdprc-surface, #fff);
    color: var(--gdprc-text, #1f2937);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.gdprc-reopen[hidden] { display: none; }

.gdprc-inline-settings {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.gdprc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    padding: 24px;
    text-align: center;
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    border-radius: 12px;
    color: #334155;
    font-size: 14px;
}

.gdprc-placeholder p { margin: 0; max-width: 40em; }
.gdprc-placeholder .gdprc-btn { flex: 0 0 auto; min-width: 0; }

/* ------------------------------------------------------------ declaration */

.gdprc-declaration-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 24px;
    font-size: 14px;
}

.gdprc-declaration-table th,
.gdprc-declaration-table td {
    border: 1px solid rgba(0, 0, 0, .12);
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
}

.gdprc-declaration-table th { background: rgba(0, 0, 0, .04); }

.gdprc-declaration-meta { font-size: 13px; opacity: .75; }

@media (max-width: 600px) {
    .gdprc {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
        transform: none;
    }

    .gdprc--center { top: auto; }

    .gdprc--modal {
        inset: 0;
        padding: 12px;
    }

    .gdprc-btn { flex: 1 1 100%; }
    .gdprc-cat-summary,
    .gdprc-cat-details { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gdprc-switch-ui,
    .gdprc-switch-ui::after { transition: none; }
}

/* Dark defaults. These only apply where the admin has left a colour alone:
   a customised value is printed inline on the root and takes precedence. */
@media (prefers-color-scheme: dark) {
    .gdprc { color: var(--gdprc-text, #e5e7eb); }

    .gdprc-dialog,
    .gdprc-reopen {
        background: var(--gdprc-surface, #1f2937);
        color: var(--gdprc-text, #e5e7eb);
        border-color: var(--gdprc-border, rgba(255, 255, 255, .14));
    }

    .gdprc-btn--primary {
        background: var(--gdprc-accent, #e5e7eb);
        color: var(--gdprc-accent-text, #111827);
    }

    .gdprc-btn--quiet { border-color: var(--gdprc-accent, #e5e7eb); }

    .gdprc-btn--ghost {
        color: var(--gdprc-muted, #94a3b8);
        border-color: var(--gdprc-border, rgba(255, 255, 255, .3));
    }

    .gdprc-prefs { border-top-color: var(--gdprc-border, rgba(255, 255, 255, .15)); }
    .gdprc-cat-summary { color: var(--gdprc-muted, #94a3b8); }
    .gdprc-placeholder { background: #111827; border-color: #475569; color: #cbd5e1; }
}