/* Product CMS Core Stylesheet - Desktop & Mobile Responsive */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation */
.header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    padding: 8px 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main);
}

.navbar-logo-img {
    height: 38px;
    width: auto;
    border-radius: 4px;
}

.navbar-logo-icon {
    /* CR-017 (F-06 branding): the shield SVG now carries its own navy fill
       and drop shadow via the filter below — no background/border-radius
       needed on the container, unlike the plain-square "P" mark it replaces. */
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-logo-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 24px;
    list-style: none;
}

.nav-link {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--primary);
    background-color: rgba(37, 99, 235, 0.06);
}

.nav-admin-badge {
    background-color: var(--primary);
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
}

.nav-admin-badge:hover {
    background-color: var(--primary-hover);
    opacity: 0.95;
}

/* Hamburger Menu Button for Mobile */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-main);
    cursor: pointer;
    padding: 6px;
}

/* Main Content Area */
.main-content {
    flex: 1;
    padding: 40px 0;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(29, 78, 216, 0.08) 100%);
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
    margin-bottom: 50px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.feature-card {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    /* CR-017 (F-06 branding): font-size is a leftover from the emoji-icon
       era (kept harmlessly in case any emoji ever lands back here) — the
       inline-SVG icon set that replaced them is sized via the rule below,
       since font-size has no effect on an <svg>. */
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.feature-icon svg {
    width: 2.2rem;
    height: 2.2rem;
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Page Prosa / Content Body */
.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-main);
}

.content-body {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    /* CR-013 responsive audit: same grid-item shrink trap as .admin-content
       — .content-body is the direct child of several inline 2-column grids
       (e.g. points.php's "2fr 1fr" award-log/totals layout), and without
       this it refuses to shrink below its widest table's intrinsic width,
       so .table-responsive inside it never gets the chance to scroll. */
    min-width: 0;
}

.content-body p {
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--text-main);
}

.content-body h2, .content-body h3, .content-body h4 {
    margin: 24px 0 12px 0;
}

.content-body ul, .content-body ol {
    margin: 0 0 16px 24px;
}

.content-body li {
    margin-bottom: 6px;
}

/* Release notes — collapsible per-entry (native <details>, no JS/localStorage
   needed: this is a chronological read-only log, not a working nav with a
   "current location" to preserve across page loads). Newest entries render
   with the `open` attribute server-side; older ones collapse to just the
   version/date line and expand on click. */
.release-note {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}

.release-note-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.release-note-summary::-webkit-details-marker {
    display: none;
}

.release-note-summary::before {
    content: '▸';
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.release-note[open] > .release-note-summary::before {
    transform: rotate(90deg);
}

.release-note-summary:hover {
    background-color: rgba(37, 99, 235, 0.04);
}

.release-note-version {
    font-size: 1.05rem;
    font-weight: 600;
}

.release-note-date {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.release-note-body {
    padding: 0 20px 20px 42px;
}

.release-note-body p {
    color: var(--text-main);
}

/* Collapsible "Add [Record]" form (2026-08-25 UX audit, F-01) — the
   browse/search view is the more common task on Residents/Households/KP
   Cases, so the entry form starts collapsed instead of sitting open above
   the list. Same native <details> chevron convention as .release-note. */
.collapsible-form {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

.collapsible-form-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 36px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
    color: var(--primary);
}

.collapsible-form-toggle::-webkit-details-marker {
    display: none;
}

.collapsible-form-toggle::before {
    content: '▸';
    font-size: 0.8rem;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.collapsible-form[open] > .collapsible-form-toggle::before {
    transform: rotate(90deg);
}

.collapsible-form-toggle:hover {
    background-color: rgba(37, 99, 235, 0.04);
}

.collapsible-form-body {
    padding: 0 36px 36px;
}

/* Contact Details Box */
.contact-details-box {
    background-color: rgba(37, 99, 235, 0.04);
    border-left: 4px solid var(--primary);
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    color: #ffffff;
}

.btn-secondary {
    background-color: var(--secondary);
    color: #ffffff;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: rgba(37, 99, 235, 0.04);
}

.btn-danger {
    background-color: #ef4444;
    color: #ffffff;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 1.05rem;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--text-main);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface);
    color: var(--text-main);
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.password-field-wrapper {
    position: relative;
}

.password-field-wrapper .form-control {
    padding-right: 42px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    line-height: 0;
    color: var(--text-muted);
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: var(--text-main);
}

.password-toggle-btn svg {
    width: 18px;
    height: 18px;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Alerts & Messages */
.alert {
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.alert-success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.alert-warning {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* Admin Dashboard Layout */
.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
}

.admin-sidebar {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    align-self: start;
    /* Sidebar has grown to ~9 sections / ~28 items — sticky + internally
       scrollable rather than growing past the content column, matching
       Product ERP's pattern (same threshold that justified it there). */
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.admin-menu {
    list-style: none;
}

.admin-menu-item {
    margin-bottom: 4px;
}

.admin-menu[hidden] {
    display: none;
}

/* ── Collapsible sidebar sections (accordion) ────────────────────────── */
.sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.sidebar-title:hover {
    background-color: rgba(37, 99, 235, 0.06);
}

.sidebar-chevron {
    font-size: 0.65rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.sidebar-title[aria-expanded="false"] .sidebar-chevron {
    transform: rotate(-90deg);
}

.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.admin-menu-link:hover, .admin-menu-link.active {
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    font-weight: 600;
}

/* ── Collapsible sidebar sub-groups (CR-015 nested accordion) ───────── */
.admin-submenu {
    list-style: none;
}

.admin-submenu[hidden] {
    display: none;
}

.sidebar-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px 7px 22px;
    margin: 2px 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.8;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.sidebar-subtitle:hover {
    background-color: rgba(37, 99, 235, 0.05);
    opacity: 1;
}

.sidebar-subtitle .sidebar-chevron {
    font-size: 0.6rem;
}

.sidebar-subtitle[aria-expanded="false"] .sidebar-chevron {
    transform: rotate(-90deg);
}

.admin-submenu .admin-menu-link {
    padding-left: 28px;
}

.admin-content {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    /* CR-013 responsive audit: a CSS grid item defaults to min-width:auto,
       meaning it refuses to shrink below its content's intrinsic width — a
       wide table inside .table-responsive was stretching this whole column
       instead of being contained and scrolling internally, which is the
       entire point of that wrapper. min-width:0 lets the grid track (and
       everything in it) actually shrink to the available space. */
    min-width: 0;
}

/* CR-013 responsive audit: a single unbroken token (a cron command path in
   a <code> block) doesn't wrap at word boundaries and forces the whole row
   to overflow instead — found on the Backup & Restore cron instructions.
   Deliberately scoped to `code` only, NOT the wider .admin-content/
   .content-body containers: applying overflow-wrap:anywhere that broadly
   cascades into every table cell inside them too, and a table has no long
   unbroken tokens to protect against — it just made ordinary short words
   (a department name, a position title) wrap character-by-character
   instead of letting the table stay at its natural width and scroll
   horizontally inside .table-responsive as intended, which read as broken/
   illegible on a phone. Confirmed via a real mobile screenshot before this
   was narrowed. */
code {
    overflow-wrap: anywhere;
}

/* Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    /* CR-013 follow-up (2026-08-22): a table that needs to scroll was
       visually indistinguishable from one that's just cut off — on Windows/
       Mac, the OS hides an overlay scrollbar until you hover/touch it, so a
       wide table simply stopped dead at the card's right edge with no cue
       that more columns existed. Iain caught this on Staff Accounts and
       Award Log (the "Created column is half of the page" / "Award Log
       looks truncated" reports). An always-visible, styled scrollbar is a
       standard fix — it makes "there's more, scroll to see it" obvious
       instead of reading as broken. */
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted, #94a3b8) transparent;
    padding-bottom: 6px;
    /* CR-013 follow-up #2 (2026-08-22): the scrollbar above was correctly
       applied but still invisible in practice — for a 10-row table it sits
       at the bottom of a ~1445px-tall element, which is off-screen below a
       normal ~900px viewport unless the whole page is scrolled down first.
       Confirmed by measuring the element's actual bounding box, not
       assumed. Capping the height and adding vertical scroll keeps the
       horizontal scrollbar within the first viewport a user sees,
       regardless of row count. A short table is unaffected — it never
       reaches this height, so no internal scroll appears. */
    max-height: 60vh;
    overflow-y: auto;
}

.table-responsive thead th {
    /* Keeps column headers visible while scrolling vertically inside the
       now-bounded box above — without this, scrolling down loses track of
       which column is which. */
    position: sticky;
    top: 0;
    z-index: 1;
    /* .table th's own background is a near-transparent rgba(0,0,0,0.02) —
       fine for a static header, but a sticky one floats over scrolling
       body rows, and that background lets their text show through
       underneath the header text instead of covering it. Needs an opaque
       fill so the sticky header actually occludes what scrolls beneath it. */
    background-color: var(--surface);
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.92rem;
}

.table th, .table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background-color: rgba(0,0,0,0.02);
    font-weight: 600;
    color: var(--text-muted);
}

/* Utility (2026-08-25 UX audit, F-07): currency/numeric table columns
   right-align, so a reader can compare a column of amounts by scanning
   straight down instead of hunting for where each number starts. */
.text-right {
    text-align: right;
}

.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;

}

.badge-published { background-color: #dcfce7; color: #166534; }
.badge-draft { background-color: #f1f5f9; color: #475569; }
.badge-critical { background-color: #fee2e2; color: #991b1b; }
.badge-warning { background-color: #fef3c7; color: #92400e; }
.badge-info { background-color: #dbeafe; color: #1e40af; }

/* Media Library Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.media-item {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--surface);
    position: relative;
}

.media-thumb {
    height: 120px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.media-file-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background-color: #f1f5f9;
    color: var(--text-muted);
}

.media-info {
    padding: 8px 10px;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer */
.footer {
    background-color: var(--surface);
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px 0;
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fit, minmax(160px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

.footer-col-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-main);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Responsive Breakpoints - Mobile Optimization */
@media (max-width: 768px) {
    .mobile-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background-color: var(--surface);
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-link {
        padding: 12px 16px;
        font-size: 1rem;
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    /* Single-column mobile layout stacks the sidebar above the content, so
       sticky/internal-scroll would just pin a chunk of nav mid-page above
       the content — disable both and let it flow normally. */
    .admin-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-section {
        padding: 36px 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* CR-013 responsive audit: admin content padding was eating 60px of an
       already-tight 375px viewport (~16% of the screen just for whitespace);
       tightened without removing the breathing room entirely. */
    .admin-content {
        padding: 16px;
    }

    /* CR-013 responsive audit: most admin forms use an inline
       `style="display:grid; grid-template-columns:..."` with a hardcoded
       column count (28 pages, 1fr/1fr/2fr/2fr-1fr/etc.) rather than a
       shared class, so there's no single selector to target per-page. A
       fixed 2-3 column count squeezes each input into an unusable sliver on
       a phone. This attribute-selector override collapses every one of
       them to a single column below this breakpoint in one place, with
       !important since it's overriding an inline style — confirmed safe
       against the handful of pages that already use the responsive
       `repeat(auto-fit, minmax(...))` form (forcing those to 1fr too here
       is harmless, auto-fit would already be single-column at this width).
       No PHP file needed editing for this. */
    [style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }

    /* CR-013 responsive audit: same reasoning as the grid override above,
       applied to inline flex rows (35 pages) — a "space-between" header row
       or an action-button row with no flex-wrap forces its siblings onto
       one line regardless of viewport width. wrap is a safe default: a row
       that already fits on one line is unaffected, it only engages when
       content genuinely doesn't fit. */
    [style*="display:flex"] {
        flex-wrap: wrap !important;
    }
}

/* Strategic Advert Banner Styling */
.advert-zone-container {
    margin: 24px 0;
    text-align: center;
    position: relative;
    clear: both;
}

.advert-zone-container.zone-header_top {
    margin: 0;
    padding: 8px 0;
    background-color: rgba(37, 99, 235, 0.04);
    border-bottom: 1px solid var(--border-color);
}

.advert-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
    opacity: 0.8;
}

.advert-banner {
    display: inline-block;
    max-width: 100%;
}

.advert-link {
    display: inline-block;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.advert-link:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.advert-img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    box-shadow: var(--shadow);
}

/* ── Cookie Consent Banner ────────────────────────────────────────────── */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    padding: 16px 20px;
}
.consent-banner[hidden] { display: none; }
.consent-banner-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.consent-banner-text { margin: 0; flex: 1 1 320px; font-size: 0.9rem; color: var(--text-main); }
.consent-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent-banner-categories {
    max-width: 1100px;
    margin: 12px auto 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.consent-banner-categories[hidden] { display: none; }
.consent-category { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-main); }