/**
 * Redim\CookieConsent — granular consent banner styles.
 * Self-contained (no Bootstrap dependency) toggle switches + category layout.
 * Layered on top of the chosen theme css (e.g. redimstyle.css).
 */

/* Normalised base font: without it the block inherits the host theme's body size
   (e.g. 22px in Twenty Twenty-Five vs 16px in Cassiopeia) and renders visibly
   larger on some sites. Explicit px keeps the banner identical everywhere. */
.redim-cc {
    font-size: 14px;
    line-height: 1.5;
}

.redim-cc .redim-cc-categories {
    margin: 12px 0;
    text-align: left;
    max-height: 38vh;
    overflow-y: auto;
    /* Only vertical scrolling. Without this, overflow-y:auto makes the computed
       overflow-x "auto" too, so the detail-toggle caret briefly overflowing during
       its rotation transition would flash a horizontal scrollbar. */
    overflow-x: hidden;
}

/* --- collapsible "cookie settings" box --- */
/* The toggle is a full-size .btn in the main button row (the template styles it);
   here only the caret layout — no colours/borders that would fight the .btn look. */
.redim-cc .redim-cc-toggle-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
}

.redim-cc .redim-cc-toggle-caret {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.redim-cc .redim-cc-toggle-details.is-open .redim-cc-toggle-caret {
    transform: rotate(180deg);
}

.redim-cc .redim-cc-details[hidden] {
    display: none;
}

/* The banner position style sets display:flex on the modal wrapper, which would
   override the UA [hidden] rule on themes without a Bootstrap-style reboot
   ([hidden]{display:none!important}) - e.g. WordPress Twenty Twenty-Five. */
#redim-cookiehint-modal[hidden],
#redim-cookiehint[hidden] {
    display: none !important;
}

.redim-cc .redim-cc-cat {
    /* Neutral grey instead of black-based rgba: stays visible on the dark theme
       CSS files (black.css, blue.css, ...) of the classic template system too. */
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    padding: 8px 2px;
}

.redim-cc .redim-cc-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.redim-cc .redim-cc-cat-label {
    font-weight: 600;
    flex: 1 1 auto;
}

.redim-cc .redim-cc-cat-count {
    font-weight: 400;
    font-size: 0.9em;
    color: #707070;
}

.redim-cc .redim-cc-cat-desc {
    font-size: 12px;
    line-height: 16px;
    color: #707070;
    margin: 4px 0 0 52px;
}

.redim-cc .redim-cc-detail-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #707070;
    padding: 2px 6px;
    transition: transform 0.2s ease;
}

.redim-cc .redim-cc-detail-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* --- toggle switch --- */
.redim-cc .redim-cc-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    margin: 0;
}

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

.redim-cc .redim-cc-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    /* >=3:1 against both light and dark card backgrounds AND against the white
       knob (WCAG 1.4.11 non-text contrast). */
    background-color: #8f8f8f;
    transition: 0.3s;
    border-radius: 24px;
}

.redim-cc .redim-cc-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

.redim-cc .redim-cc-switch input:checked + .redim-cc-slider {
    background-color: var(--redim-cc-accent, #008511);
}

.redim-cc .redim-cc-switch input:checked + .redim-cc-slider::before {
    transform: translateX(18px);
}

.redim-cc .redim-cc-switch input:disabled + .redim-cc-slider {
    background-color: var(--redim-cc-accent, #008511);
    opacity: 0.55;
    cursor: not-allowed;
}

.redim-cc .redim-cc-switch-sm {
    width: 34px;
    height: 20px;
}

.redim-cc .redim-cc-switch-sm .redim-cc-slider::before {
    height: 14px;
    width: 14px;
}

.redim-cc .redim-cc-switch-sm input:checked + .redim-cc-slider::before {
    transform: translateX(14px);
}

/* --- per-cookie rows --- */
.redim-cc .redim-cc-cookies {
    margin: 6px 0 4px 52px;
}

.redim-cc .redim-cc-cookie {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 4px 10px;
    align-items: center;
    padding: 5px 0;
    border-top: 1px dashed rgba(128, 128, 128, 0.25);
}

.redim-cc .redim-cc-cookie-name {
    font-size: 13px;
}

.redim-cc .redim-cc-cookie-name code {
    background: rgba(128, 128, 128, 0.18);
    padding: 1px 5px;
    border-radius: 3px;
    color: inherit;
}

.redim-cc .redim-cc-cookie-desc {
    grid-column: 2;
    font-size: 12px;
    line-height: 16px;
    color: #707070;
}

.redim-cc .redim-cc-cookie-meta {
    grid-column: 2;
    font-size: 11px;
    line-height: 15px;
    color: #707070;
    opacity: 0.9;
}

/* --- noscript fallback --- */
.redim-cc .redim-cc-noscript p {
    margin: 8px 0 4px;
    font-size: 13px;
}

/* --- buttons --- */
.redim-cc .redim-cc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* "Save selection" lives INSIDE the details accordion, below the categories. */
.redim-cc .redim-cc-save-row {
    margin-top: 4px;
}

.redim-cc .redim-cc-buttons .redim-cc-btn {
    flex: 1 1 auto;
}

.redim-cc .redim-cc-save {
    background: #f0f0f0 !important;
    color: #333 !important;
}

/* Accept and reject share ONE colour by design: equal-weight buttons are legally
   required (no visual steering towards consent). The admin-configured colour is
   injected as --redim-cc-btn-bg/-fg (see ConsentManager::colorStyle()). */
.redim-cc .redim-cc-accept-all,
.redim-cc .redim-cc-reject {
    background: var(--redim-cc-btn-bg, #008511) !important;
    color: var(--redim-cc-btn-fg, #fff) !important;
}

#redim-cookiehint-modal .redim-cc .redim-cc-categories {
    max-height: 46vh;
}

/* --- accessibility (WCAG 2.1) --- */
/* Visible focus indicator (2.4.7) as a template-neutral fallback: currentColor
   inherits the surrounding text colour, which contrasts with the card by
   definition. The shipped templates override this with their own outline colour. */
.redim-cc button:focus-visible,
.redim-cc a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

.redim-cc .redim-cc-switch input:focus-visible + .redim-cc-slider {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .redim-cc .redim-cc-toggle-caret,
    .redim-cc .redim-cc-detail-toggle,
    .redim-cc .redim-cc-slider,
    .redim-cc .redim-cc-slider::before {
        transition: none;
    }
}