/* ════════════════════════════════════════════════════════════════════
   CONSENT BANNER — styles for /includes/components/consent-banner.php

   Hard requirements baked into this CSS:
   - Equal visual weight on Accept / Manage / Reject. Same size, same
     padding, same surface treatment. No "primary" styling that would
     make Reject look secondary. Regulators scrutinize this directly.
   - Server-rendered so the banner is present on first paint.
   - Brand tokens only: orange #D87629, dark teal #042433, steel #26406B,
     mist #EEF4F9. Source Sans 3 body, Barlow Condensed headings.
   ════════════════════════════════════════════════════════════════════ */

.mi-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #ffffff;
    border-top: 4px solid #D87629;
    box-shadow: 0 -12px 32px rgba(4, 36, 51, 0.18);
    font-family: 'Source Sans 3', sans-serif;
    color: #042433;
}
.mi-consent-banner[hidden] { display: none !important; }

.mi-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mi-consent-view[hidden] { display: none; }

.mi-consent-text { max-width: 880px; }
.mi-consent-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #042433;
    margin: 0 0 8px;
}
.mi-consent-intro {
    font-size: 15px;
    line-height: 1.55;
    color: #26406B;
    margin: 0 0 10px;
}
.mi-consent-categories {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #26406B;
}
.mi-consent-categories li { margin-bottom: 4px; }
.mi-consent-categories strong { color: #042433; }
.mi-consent-finepoint {
    font-size: 13px;
    line-height: 1.55;
    color: #5a6b7d;
    margin: 8px 0 0;
}
.mi-consent-finepoint a {
    color: #26406B;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mi-consent-finepoint a:hover { color: #D87629; }

/* ──── ACTIONS — equal visual weight is the whole point ──── */
.mi-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: stretch;
}
/* Single shared button rule. No variant classes. No "primary" override.
   Every choice gets the same affordance so Reject is as easy to pick
   as Accept. Border + color + size + padding all identical across the
   three buttons (visually verifiable with DevTools). */
.mi-consent-btn {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    color: #042433;
    border: 1.5px solid #26406B;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 24px;
    min-width: 168px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mi-consent-btn:hover,
.mi-consent-btn:focus-visible {
    background: #042433;
    color: #ffffff;
    border-color: #042433;
    outline: none;
}
.mi-consent-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(216, 118, 41, 0.35);
}

/* ──── MANAGE VIEW — per-category toggles ──── */
.mi-consent-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #EEF4F9;
    border: 1px solid rgba(38, 64, 107, 0.12);
    border-radius: 4px;
    padding: 14px 16px;
    margin: 4px 0 8px;
}
.mi-consent-toggle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    padding: 6px 0;
}
.mi-consent-toggle.is-locked { cursor: default; opacity: 0.85; }
.mi-consent-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mi-consent-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #D87629;
    cursor: pointer;
    flex-shrink: 0;
}
.mi-consent-toggle.is-locked input { cursor: not-allowed; }
.mi-consent-toggle-label {
    font-size: 14px;
    color: #042433;
}
.mi-consent-toggle-desc {
    font-size: 13px;
    color: #5a6b7d;
    line-height: 1.5;
    padding-left: 28px;
}
.mi-consent-gpc-notice {
    font-size: 13px;
    color: #042433;
    background: #fff3e6;
    border-left: 3px solid #D87629;
    padding: 8px 12px;
    margin: 0 0 4px;
    border-radius: 0 4px 4px 0;
}

/* ──── Tablet / mobile ──── */
@media (max-width: 720px) {
    .mi-consent-inner { padding: 18px 18px; gap: 14px; }
    .mi-consent-actions { justify-content: stretch; }
    .mi-consent-btn { flex: 1 1 auto; min-width: 0; }
    .mi-consent-heading { font-size: 20px; }
    .mi-consent-toggle-desc { padding-left: 0; }
}