/**
 * 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 !important;
    line-height: 1.5 !important;
}

.redim-cc .redim-cc-categories {
    margin: 12px 0 !important;
    text-align: left !important;
    max-height: 38vh !important;
    overflow-y: auto !important;
    /* 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 !important;
}

/* --- 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 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font: inherit !important;
}

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

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

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

/* 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) !important;
    padding: 8px 2px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 !important;
}

/* --- 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 !important;
    outline-offset: 2px !important;
}

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

@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 !important;
    }
}