/* ==========================================================================
   COOKIE CONSENT — MAGI NAVY THEME OVERRIDE v2
   Strategy: Override the library's own CSS variables at the root level
   PLUS targeted !important rules for anything that slips through.
   ========================================================================== */

/* ------------------------------------------------------------------
   STEP 1: Override CookieConsent's own CSS variables.
   This is the cleanest and most reliable method — the library reads
   these variables for most of its colors, so overriding them here
   cascades to all components automatically.
   ------------------------------------------------------------------ */
:root {
    /* Consent modal background */
    --cc-bg: #0a1929;
    --cc-primary-color: #ffffff;
    --cc-secondary-color: rgba(255, 255, 255, 0.6);

    /* Button colors */
    --cc-btn-primary-bg: #1e7fcf;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: #1e7fcf;
    --cc-btn-primary-hover-bg: #2d8fdf;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: #2d8fdf;

    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: rgba(255, 255, 255, 0.65);
    --cc-btn-secondary-border-color: rgba(30, 127, 207, 0.45);
    --cc-btn-secondary-hover-bg: rgba(30, 127, 207, 0.12);
    --cc-btn-secondary-hover-color: #ffffff;
    --cc-btn-secondary-hover-border-color: rgba(30, 127, 207, 0.7);

    /* Toggle */
    --cc-toggle-on-bg: #1e7fcf;
    --cc-toggle-off-bg: rgba(255, 255, 255, 0.15);
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: rgba(255, 255, 255, 0.8);
    --cc-toggle-enabled-icon-color: #ffffff;

    /* Separator / border */
    --cc-separator-border-color: rgba(255, 255, 255, 0.07);

    /* Cookie category block */
    --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.04);
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
    --cc-cookie-category-block-hover-bg: rgba(30, 127, 207, 0.07);
    --cc-cookie-category-block-hover-border: rgba(30, 127, 207, 0.2);

    /* Badge */
    --cc-badge-text-color: #34d399;
    --cc-badge-bg-color: rgba(16, 185, 129, 0.12);

    /* Overlay */
    --cc-overlay-bg: rgba(0, 0, 0, 0.6);

    /* Border radius */
    --cc-modal-border-radius: 16px;
    --cc-btn-border-radius: 20px;
    --cc-cookie-category-border-radius: 10px;

    /* Font */
    --cc-font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------
   STEP 2: !important overrides for anything the variables don't reach.
   ------------------------------------------------------------------ */

/* === CONSENT MODAL WRAPPER === */
#cc-main .cm {
    background: linear-gradient(145deg, #0d1f35 0%, #0a1929 100%) !important;
    border: 1px solid rgba(30, 127, 207, 0.22) !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    color: rgba(255, 255, 255, 0.88) !important;
    max-width: 380px;
}

/* === TITLE === */
#cc-main .cm__title,
#cc-main .pm__title {
    color: #ffffff !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* === BODY TEXT === */
#cc-main .cm__desc {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
}

/* === "LET ME CHOOSE" LINK IN DESCRIPTION === */
#cc-main .cm__desc .cc-link,
#cc-main .cc-link {
    color: #5ba3d0 !important;
    background: none !important;
    border: none !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

#cc-main .cm__desc .cc-link:hover,
#cc-main .cc-link:hover {
    color: #8bc4e6 !important;
}

/* === BUTTON ROW === */
#cc-main .cm__btns {
    gap: 8px !important;
}

/* === ACCEPT ALL === */
#cc-main .cm__btn--primary,
#cc-main button.cm__btn--primary {
    background: linear-gradient(135deg, #1e7fcf 0%, #0d5fa3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(30, 127, 207, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#cc-main .cm__btn--primary:hover,
#cc-main button.cm__btn--primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(30, 127, 207, 0.55) !important;
    background: linear-gradient(135deg, #2d8fdf 0%, #1e7fcf 100%) !important;
}

/* === REJECT ALL / MANAGE PREFERENCES === */
#cc-main .cm__btn--secondary,
#cc-main button.cm__btn--secondary {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border: 1.5px solid rgba(30, 127, 207, 0.4) !important;
    border-radius: 20px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#cc-main .cm__btn--secondary:hover,
#cc-main button.cm__btn--secondary:hover {
    background: rgba(30, 127, 207, 0.12) !important;
    border-color: rgba(30, 127, 207, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* === BANNER FOOTER (links row at very bottom) === */
#cc-main .cm__footer,
#cc-main .cm .cm__footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
}

#cc-main .cm__footer a,
#cc-main .cm__footer-links a {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 0.72rem !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: color 0.15s ease !important;
}

#cc-main .cm__footer a:hover,
#cc-main .cm__footer-links a:hover {
    color: #5ba3d0 !important;
    text-decoration: underline !important;
}

/* === PREFERENCES MODAL (the slide-in panel) === */
#cc-main .pm,
#cc-main .pm__body,
#cc-main .pm__content {
    background: linear-gradient(160deg, #0d1f35 0%, #0a1929 100%) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

#cc-main .pm__header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* === PREFERENCE SECTION BLOCKS (the white wrappers) === */
#cc-main .pm__section,
#cc-main .pm__section--toggle {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
    margin: 0.5rem 1rem !important;
}

#cc-main .pm__section-title-wrapper {
    padding: 1rem 1.25rem !important;
}

#cc-main .pm__section-desc-wrapper {
    padding: 0 1.25rem 1rem !important;
}

#cc-main button.pm__section-title {
    padding: 1rem 1.25rem !important;
    width: 100% !important;
}

#cc-main .pm__section-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

#cc-main .pm__section-desc,
#cc-main .pm__section--toggle .pm__section-desc {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
}

/* === "ALWAYS ENABLED" BADGE === */
#cc-main .pm__badge {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 50px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    flex-shrink: 0 !important;
    margin-left: 0.35em !important;
    /* was 1em — pull it left away from toggle */
    margin-right: 3.5em !important;
    /* breathing room before the toggle switch */
}

/* === TOGGLE SECTION: Colors only — no layout interference === */

/* The toggle button text color — do NOT re-layout, just color */
#cc-main .pm__section--toggle button.pm__section-title,
#cc-main .pm__section--expandable button.pm__section-title {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding-left: 44px !important;     /* push text right of the 20px circle at left:18px */
}

/* Chevron: the library gives it a circle background (#284857) + position:absolute.
   We override background to a subtle navy tint and let color handle the SVG stroke. */
#cc-main .pm__section-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(30, 127, 207, 0.15) !important;  /* subtle navy instead of teal blob */
}

#cc-main .pm__section--expandable .pm__section-arrow {
    background: rgba(30, 127, 207, 0.15) !important;  /* override the library's #284857 */
}

/* White/expanded border — remove it completely */
#cc-main .pm__section--toggle,
#cc-main .pm__section--expandable {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    outline: none !important;
}

/* No white borders on expanded state */
#cc-main .pm__section--expandable.is-open,
#cc-main .pm__section--toggle.is-open {
    border: 1px solid rgba(30, 127, 207, 0.2) !important;
    box-shadow: none !important;
}

/* Description separator */
#cc-main .pm__section-desc-wrapper {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    outline: none !important;
}

/* Toggle wrapper (the label element, position:absolute right:18px) */
#cc-main .section__toggle-wrapper {
    background: transparent !important;
    cursor: pointer !important;
}

/* Toggle track OFF — also override the box-shadow ring the library adds */
#cc-main .toggle__icon {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;  /* replaces library's same-color ring */
}

/* Toggle icon circle (the knob) */
#cc-main .toggle__icon-circle {
    background: rgba(255, 255, 255, 0.85) !important;
}

/* SVG strokes inside the knob (X for off, checkmark for on) */
#cc-main .toggle__icon-off svg path,
#cc-main .toggle__icon-on svg path {
    stroke: rgba(10, 25, 41, 0.7) !important;
}

/* === TOGGLE CHECKBOX (the invisible click-target input) ===
   Library uses all:unset + position:absolute so it overlays the visual icon.
   We keep it invisible and functional — no browser chrome, no outline, no color. */
#cc-main input.section__toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;           /* fully invisible — visual is .toggle__icon */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 1 !important;           /* sits above .toggle__icon for click events */
}

/* Toggle track ON */
#cc-main input.section__toggle:checked~.toggle__icon {
    background: #1e7fcf !important;
    border-color: #1e7fcf !important;
}

/* Toggle knob white */
#cc-main .toggle__icon-circle {
    background: #ffffff !important;
}

/* SVG icons inside toggle knob */
#cc-main .toggle__icon-on svg path,
#cc-main .toggle__icon-off svg path {
    stroke: rgba(0, 0, 0, 0.4) !important;
}

/* === PREFERENCES PANEL SCROLLBAR === */
#cc-main .pm__body {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.04) !important;
}

#cc-main .pm__body::-webkit-scrollbar {
    width: 6px !important;
}

#cc-main .pm__body::-webkit-scrollbar-track {
    background: linear-gradient(to bottom,
            rgba(15, 35, 58, 0.9) 0%,
            rgba(11, 22, 41, 0.9) 100%) !important;
    border-radius: 8px !important;
    margin: 3px 1px !important;
}

#cc-main .pm__body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.1) 100%) !important;
    border-radius: 8px !important;
    border: 1.5px solid transparent !important;
    background-clip: padding-box !important;
}

#cc-main .pm__body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom,
            rgba(30, 127, 207, 0.5) 0%,
            rgba(30, 127, 207, 0.3) 100%) !important;
    background-clip: padding-box !important;
}



/* === PREFERENCES FOOTER BUTTONS === */
#cc-main .pm__footer,
#cc-main .pm .pm__footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#cc-main .pm__btn--primary,
#cc-main button.pm__btn--primary {
    background: linear-gradient(135deg, #1e7fcf 0%, #0d5fa3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(30, 127, 207, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#cc-main .pm__btn--primary:hover,
#cc-main button.pm__btn--primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(30, 127, 207, 0.55) !important;
}

#cc-main .pm__btn--secondary,
#cc-main button.pm__btn--secondary {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border: 1.5px solid rgba(30, 127, 207, 0.4) !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#cc-main .pm__btn--secondary:hover,
#cc-main button.pm__btn--secondary:hover {
    background: rgba(30, 127, 207, 0.12) !important;
    border-color: rgba(30, 127, 207, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* === CLOSE BUTTON IN PREFERENCES === */
#cc-main .pm__close-btn,
#cc-main button.pm__close-btn {
    color: rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

#cc-main .pm__close-btn:hover,
#cc-main button.pm__close-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ------------------------------------------------------------------
   MOBILE RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
    #cc-main .cm {
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        border-bottom: none !important;
    }
}