/* ============================================================================ * scallo-cookieconsent.css * ───────────────────────────────────────────────────────────────────────────── * SCALLO override for vanilla-cookieconsent v3 — maps CC v3 CSS custom * properties to Bootstrap 5 / Vuexy tokens so the banner inherits: * • Active StylePreset primary color (via --bs-primary) * • Light / Dark / System theme (via data-bs-theme on ) * • Vuexy radii, shadows, spacing, font stack * • Bootstrap form-switch look for category toggles * * Load AFTER cookieconsent.css (the upstream lib CSS). * No Sass — pure CSS with custom properties, safe to edit live. * ========================================================================== */ /* ── Force opaque backgrounds everywhere (no transparency over sidebar) ──── */ /* Uses maximum specificity (html body #cc-main) to beat any inline / CC v3 default. */ html body #cc-main, html body #cc-main .cm, html body #cc-main .pm, html body #cc-main .cm__body, html body #cc-main .pm__header, html body #cc-main .pm__body, html body #cc-main .pm__footer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body #cc-main .cm, html body #cc-main .pm { background-color: var(--bs-card-bg, #fff) !important; opacity: 1 !important; } /* Dark mode — explicit dark card background */ html[data-bs-theme="dark"] body #cc-main .cm, html[data-bs-theme="dark"] body #cc-main .pm { background-color: var(--bs-card-bg, #2f3349) !important; } /* Kill any ::before / ::after pseudo-blur overlays that CC v3 may use */ html body #cc-main .cm::before, html body #cc-main .cm::after, html body #cc-main .pm::before, html body #cc-main .pm::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; } /* Ukryj overlay #2 — pierwszy (z banera #1 / .disable--interaction) już jest widoczny */ html body #cc-main .pm-overlay { display: none !important; } /* ── Core token mapping (light mode default) ──────────────────────────────── */ #cc-main { /* Layout & typography */ --cc-font-family: var(--bs-body-font-family, "Public Sans", system-ui, sans-serif); --cc-font-size: 0.9375rem; /* 15px — Vuexy base */ --cc-line-height: 1.53; --cc-z-index: 1080; /* above navbar, below Bootstrap modals (1055+) */ /* Background & surface */ --cc-bg: var(--bs-card-bg, #fff); --cc-primary-color: var(--bs-heading-color, var(--bs-body-color)); --cc-secondary-color: var(--bs-body-color); --cc-text: var(--bs-body-color); /* Borders & radii (Vuexy uses soft, larger radii) */ --cc-border-radius: var(--bs-border-radius-lg, 0.5rem); --cc-btn-border-radius: var(--bs-border-radius, 0.375rem); --cc-modal-border-radius: var(--bs-border-radius-xl, 0.625rem); --cc-modal-box-shadow: var(--bs-box-shadow-lg, 0 .5rem 1.5rem .125rem rgba(0,0,0,.1)); /* Primary button — follows --bs-primary from the active StylePreset */ --cc-btn-primary-bg: var(--bs-primary); --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: var(--bs-primary); --cc-btn-primary-hover-bg: var(--bs-primary); --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: var(--bs-primary); /* Secondary button — Vuexy "label" style (subtle tinted bg) */ --cc-btn-secondary-bg: rgba(var(--bs-secondary-rgb, 108,117,125), 0.16); --cc-btn-secondary-color: var(--bs-secondary); --cc-btn-secondary-border-color: transparent; --cc-btn-secondary-hover-bg: rgba(var(--bs-secondary-rgb, 108,117,125), 0.26); --cc-btn-secondary-hover-color: var(--bs-secondary); --cc-btn-secondary-hover-border-color:transparent; /* Toggles — use --bs-primary for the "on" state */ --cc-toggle-bg-on: var(--bs-primary); --cc-toggle-bg-off: var(--bs-tertiary-bg, rgba(0,0,0,0.08)); --cc-toggle-bg-readonly: var(--bs-secondary-bg, rgba(0,0,0,0.12)); --cc-toggle-knob-bg: #fff; --cc-toggle-knob-icon-color: var(--bs-primary); /* Separators, hover, overlay */ --cc-separator-border-color: var(--bs-border-color, #e7e7ff); --cc-section-bg: var(--bs-body-bg); --cc-section-bg-alt: var(--bs-tertiary-bg, rgba(0,0,0,0.03)); --cc-section-category-bg: transparent; --cc-cookie-category-block-bg: var(--bs-tertiary-bg, rgba(0,0,0,0.03)); --cc-cookie-category-block-bg-hover: var(--bs-secondary-bg, rgba(0,0,0,0.05)); --cc-cookie-category-expanded-block-bg: var(--bs-body-bg); --cc-cookie-category-expanded-block-hover-bg: var(--bs-tertiary-bg, rgba(0,0,0,0.03)); --cc-overlay-bg: rgba(0, 0, 0, 0.45); /* Footer */ --cc-footer-bg: var(--bs-tertiary-bg, rgba(0,0,0,0.02)); --cc-footer-color: var(--bs-body-color-secondary, var(--bs-body-color)); --cc-footer-border-color: var(--bs-border-color, #e7e7ff); } /* ── Dark mode — Bootstrap 5.3 auto-switch via data-bs-theme ─────────────── */ [data-bs-theme="dark"] #cc-main { --cc-bg: var(--bs-card-bg); --cc-primary-color: var(--bs-body-color); --cc-secondary-color: var(--bs-body-color-secondary, var(--bs-body-color)); --cc-text: var(--bs-body-color); --cc-btn-secondary-bg: rgba(var(--bs-secondary-rgb), 0.22); --cc-btn-secondary-hover-bg: rgba(var(--bs-secondary-rgb), 0.32); --cc-toggle-bg-off: var(--bs-tertiary-bg); --cc-toggle-bg-readonly: var(--bs-secondary-bg); --cc-separator-border-color: var(--bs-border-color); --cc-section-bg: var(--bs-card-bg); --cc-section-bg-alt: var(--bs-tertiary-bg); --cc-cookie-category-block-bg: var(--bs-tertiary-bg); --cc-cookie-category-block-bg-hover: var(--bs-secondary-bg); --cc-cookie-category-expanded-block-bg: var(--bs-card-bg); --cc-overlay-bg: rgba(15, 20, 34, 0.55); --cc-footer-bg: var(--bs-tertiary-bg); } /* ── Consent modal (bottom-left popup) — Vuexy card look ─────────────────── */ #cc-main .cm { background: var(--bs-card-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: var(--bs-box-shadow-lg); border: 1px solid var(--bs-border-color); max-width: 52rem; /* wider for 2-column layout */ padding: 1.75rem 2rem !important; opacity: 1 !important; } /* Layout — 3 wiersze (title full-width / 2 kolumny tekstu / footer z 3 buttonami * full-width w jednej linii: Accept / Reject / Manage). * * DOM po spłaszczeniu wrapperów przez display:contents: * .cm__body * .cm__title ← row 1, full-width * .cm__desc-right (long) ← row 2 col 1 * .cm__desc-left (short + links) ← row 2 col 2 * .cm__btn-group[has all/necessary] ← row 3 (część footera — Accept/Reject) * .cm__btn-group[has show] ← row 3 (część footera — Manage) */ html body #cc-main .cm__body { display: grid !important; grid-template-columns: 1.35fr 1fr; column-gap: 2rem; row-gap: 0.75rem; } html body #cc-main .cm__texts, html body #cc-main .cm__desc, html body #cc-main .cm__desc-cols, html body #cc-main .cm__btns { display: contents !important; } html body #cc-main .cm__title { grid-column: 1 / -1; grid-row: 1; } html body #cc-main .cm__desc-right { /* long desc → LEFT */ grid-column: 1; grid-row: 2; align-self: start; } html body #cc-main .cm__desc-left { /* short + links → RIGHT */ grid-column: 2; grid-row: 2; align-self: start; } /* Footer — wspólny separator nad obiema btn-groupami (row 3, pełna szerokość) */ html body #cc-main .cm__btns { display: contents !important; } html body #cc-main .cm__btn-group:not(:has(.cm__btn[data-role="show"])) { grid-column: 1; grid-row: 3; display: flex !important; gap: 0.75rem; margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); flex-wrap: nowrap; } html body #cc-main .cm__btn-group:has(.cm__btn[data-role="show"]) { grid-column: 2; grid-row: 3; display: flex !important; margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); justify-self: stretch; } html body #cc-main .cm__btn-group .cm__btn { flex: 1; min-width: 0; } html body #cc-main .cm__desc-left, html body #cc-main .cm__desc-right { font-size: 0.875rem; line-height: 1.55; color: var(--bs-body-color); margin: 0 !important; } /* Override CC v3 `all: unset` na

— przywracamy block + marginesy */ html body #cc-main .cm__desc-left p, html body #cc-main .cm__desc-right p { display: block !important; margin: 0 0 1rem 0 !important; font-size: inherit; line-height: inherit; color: inherit; } html body #cc-main .cm__desc-left p:last-child, html body #cc-main .cm__desc-right p:last-child { margin-bottom: 0 !important; } /* Links in description — primary color, clean underline on hover */ html body #cc-main .cm__desc-left a, html body #cc-main .cm__desc-right a { color: var(--bs-primary) !important; text-decoration: none !important; border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.45) !important; transition: border-color .15s ease; } html body #cc-main .cm__desc-left a:hover, html body #cc-main .cm__desc-right a:hover { border-bottom-color: var(--bs-primary) !important; border-bottom-style: solid !important; } /* Responsive — stack na wąskim viewporcie: tytuł / left / right / 2× btn-group */ @media (max-width: 720px) { #cc-main .cm { max-width: calc(100vw - 1.5rem); padding: 1.25rem !important; } html body #cc-main .cm__body { grid-template-columns: 1fr; column-gap: 0; row-gap: 0.75rem; } html body #cc-main .cm__title { grid-column: 1; grid-row: 1; } html body #cc-main .cm__desc-right { grid-column: 1; grid-row: 2; } html body #cc-main .cm__desc-left { grid-column: 1; grid-row: 3; } html body #cc-main .cm__btn-group:not(:has(.cm__btn[data-role="show"])) { grid-column: 1; grid-row: 4; } html body #cc-main .cm__btn-group:has(.cm__btn[data-role="show"]) { grid-column: 1; grid-row: 5; padding-top: 0; border-top: 0; margin-top: 0; } } #cc-main .cm__title { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 0.75rem !important; } #cc-main .cm__desc { color: var(--bs-body-color); opacity: 0.88; font-size: 0.875rem; line-height: 1.55; margin-bottom: 1.25rem !important; } /* ── Buttons — Vuexy look (gradient primary, tinted secondary) ───────────── */ #cc-main .cm__btn, #cc-main .pm__btn { font-weight: 500; letter-spacing: 0.02em; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } #cc-main .cm__btn:hover, #cc-main .pm__btn:hover { transform: translateY(-1px); } /* Primary filled: Accept all / Reject all (both modals) */ #cc-main .cm__btn[data-role="all"], #cc-main .cm__btn--accept-all, #cc-main .cm__btn[data-role="necessary"], #cc-main .cm__btn--accept-necessary, #cc-main .pm__btn[data-role="all"], #cc-main .pm__btn--accept-all, #cc-main .pm__btn[data-role="necessary"], #cc-main .pm__btn--accept-necessary { background: var(--bs-primary) !important; color: #fff !important; border-color: var(--bs-primary) !important; box-shadow: 0 2px 6px 0 rgba(var(--bs-primary-rgb), 0.30); } #cc-main .cm__btn[data-role="all"]:hover, #cc-main .cm__btn--accept-all:hover, #cc-main .cm__btn[data-role="necessary"]:hover, #cc-main .cm__btn--accept-necessary:hover, #cc-main .pm__btn[data-role="all"]:hover, #cc-main .pm__btn--accept-all:hover, #cc-main .pm__btn[data-role="necessary"]:hover, #cc-main .pm__btn--accept-necessary:hover { background: var(--bs-primary) !important; box-shadow: 0 4px 12px 0 rgba(var(--bs-primary-rgb), 0.45); filter: brightness(1.06); } /* "Save preferences" — same ghost/outline as "Manage preferences" on cm */ #cc-main .pm__btn[data-role="save"], #cc-main .pm__btn--save { background: transparent !important; color: var(--bs-body-color-secondary, var(--bs-body-color)) !important; border: 1px solid var(--bs-border-color) !important; box-shadow: none !important; } #cc-main .pm__btn[data-role="save"]:hover, #cc-main .pm__btn--save:hover { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; /* border stays neutral */ filter: none !important; } /* Kill default focus ring / outline that changes border color on click/tab */ #cc-main .pm__btn[data-role="save"]:focus, #cc-main .pm__btn--save:focus, #cc-main .pm__btn[data-role="save"]:focus-visible, #cc-main .pm__btn--save:focus-visible, #cc-main .pm__btn[data-role="save"]:active, #cc-main .pm__btn--save:active { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; outline: 0 !important; box-shadow: none !important; } /* Same focus-reset for "Manage preferences" on the consent modal */ #cc-main .cm__btn[data-role="show"]:focus, #cc-main .cm__btn--show-preferences:focus, #cc-main .cm__btn[data-role="show"]:focus-visible, #cc-main .cm__btn--show-preferences:focus-visible, #cc-main .cm__btn[data-role="show"]:active, #cc-main .cm__btn--show-preferences:active { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; outline: 0 !important; box-shadow: none !important; } /* "Manage preferences" — outline / ghost style */ #cc-main .cm__btn[data-role="show"], #cc-main .cm__btn--show-preferences { background: transparent !important; color: var(--bs-body-color-secondary, var(--bs-body-color)) !important; border: 1px solid var(--bs-border-color) !important; box-shadow: none !important; } #cc-main .cm__btn[data-role="show"]:hover, #cc-main .cm__btn--show-preferences:hover { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* ── Preferences modal — bigger, cleaner ─────────────────────────────────── */ #cc-main .pm { border: 1px solid var(--bs-border-color); box-shadow: var(--bs-box-shadow-lg); } #cc-main .pm__header, #cc-main .pm__footer { border-color: var(--bs-border-color); } #cc-main .pm__title { font-weight: 600; letter-spacing: -0.01em; } /* ── Vuexy FAQ accordion look — flat rows with thin separators ──────────── */ #cc-main .pm__section { border: 0 !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--bs-border-color) !important; box-shadow: none !important; transition: background-color .15s ease; } #cc-main .pm__section:last-of-type, #cc-main .pm__section:last-child { border-bottom: 0 !important; } #cc-main .pm__section:hover { background: transparent !important; } /* Reset any inherited toggles wrapper that might render as empty box */ #cc-main .pm__section-toggles { all: unset; display: block; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } #cc-main .pm__section-title { font-weight: 600; color: var(--bs-heading-color, var(--bs-body-color)); } #cc-main .pm__section-desc, #cc-main .pm__section-desc-wrapper { color: var(--bs-body-color); opacity: 0.9; } /* Intro section (no linkedCategory, no toggle) — standalone note above card */ #cc-main .pm__section:not(.pm__section--toggle) { background: transparent !important; border: 0 !important; border-bottom: 0 !important; padding: 0 0 0.25rem 0 !important; margin: 0 0 0.25rem 0 !important; } #cc-main .pm__section:not(.pm__section--toggle):hover { background: transparent !important; } #cc-main .pm__section:not(.pm__section--toggle) .pm__section-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem !important; padding-bottom: 0 !important; } #cc-main .pm__section:not(.pm__section--toggle) .pm__section-desc { font-size: 0.875rem; opacity: 0.82; line-height: 1.55; margin-top: 0 !important; padding-top: 0 !important; } /* ── Accordion arrows — Vuexy-style (clean chevron, no circle) ───────────── */ #cc-main .pm__section-arrow { background: transparent !important; border: 0 !important; border-radius: 0 !important; width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 0.5rem !important; box-shadow: none !important; opacity: 0.6; color: var(--bs-body-color) !important; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .15s ease, color .15s ease; } #cc-main .pm__section-arrow svg { width: 1rem !important; height: 1rem !important; stroke: currentColor !important; stroke-width: 2.5 !important; fill: none !important; } /* Hover on the whole section trigger — highlight arrow */ #cc-main .pm__section-title-wrapper:hover .pm__section-arrow { opacity: 1; color: var(--bs-primary) !important; } /* Expanded state — chevron rotates 180°, primary tint */ #cc-main .pm__section--expanded .pm__section-arrow, #cc-main .pm__section-title-wrapper[aria-expanded="true"] .pm__section-arrow, #cc-main button[aria-expanded="true"] .pm__section-arrow { transform: rotate(180deg); opacity: 1; color: var(--bs-primary) !important; } /* Section title wrapper — Vuexy accordion-button style (flat, no border) */ html body #cc-main .pm__section-title-wrapper, html body #cc-main button.pm__section-title-wrapper, html body #cc-main .pm__section > button { padding: 1rem 1.25rem !important; background: transparent !important; background-color: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: background-color .15s ease, color .15s ease; width: 100%; cursor: pointer; font-weight: 500; } #cc-main .pm__section-title-wrapper:hover, #cc-main button.pm__section-title-wrapper:hover, #cc-main .pm__section-title-wrapper:focus-visible { background: var(--bs-tertiary-bg) !important; } /* Expanded state — soft primary tint (like Vuexy FAQ) */ #cc-main .pm__section--expanded .pm__section-title-wrapper, #cc-main .pm__section-title-wrapper[aria-expanded="true"], #cc-main .pm__section-title-wrapper.pm__section-title-wrapper--expanded { background: rgba(var(--bs-primary-rgb), 0.08) !important; color: var(--bs-primary) !important; } #cc-main .pm__section--expanded .pm__section-title, #cc-main .pm__section-title-wrapper[aria-expanded="true"] .pm__section-title { color: var(--bs-primary) !important; } /* Description body — Vuexy FAQ body padding, no harsh borders */ #cc-main .pm__section-desc-wrapper { padding: 0.25rem 1.25rem 1.25rem 1.25rem !important; border-top: 0 !important; margin-top: 0; background: transparent !important; } #cc-main .pm__section-desc { font-size: 0.875rem; line-height: 1.6; color: var(--bs-body-color); opacity: 0.88; } /* ── Modal sizing — taller to fit 5 categories + footer ──────────────────── */ #cc-main .pm { max-height: min(92vh, 46rem) !important; height: auto !important; } #cc-main .pm__body { max-height: calc(92vh - 11rem) !important; padding: 1.25rem 1.5rem !important; } /* Toggle sections — flat FAQ rows, no individual card look */ html body #cc-main .pm__section.pm__section--toggle, html body #cc-main .pm__section--expandable { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } /* The REAL title element (CC v3 puts bg + border here, not on -wrapper) */ html body #cc-main .pm__section--toggle .pm__section-title, html body #cc-main .pm__section--expandable .pm__section-title { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0.6rem 1.25rem !important; min-height: auto !important; transition: background-color .15s ease, color .15s ease; } html body #cc-main .pm__section--toggle .pm__section-title:hover, html body #cc-main .pm__section--expandable .pm__section-title:hover { background: var(--bs-tertiary-bg) !important; border-color: transparent !important; } /* Expanded state — soft primary tint on ENTIRE section (title + desc) */ html body #cc-main .pm__section--toggle.is-expanded, html body #cc-main .pm__section--expandable.is-expanded { background: rgba(var(--bs-primary-rgb), 0.08) !important; } html body #cc-main .pm__section--toggle.is-expanded .pm__section-title, html body #cc-main .pm__section--expandable.is-expanded .pm__section-title { background: transparent !important; color: var(--bs-primary) !important; border-radius: 0 !important; } html body #cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper, html body #cc-main .pm__section--expandable.is-expanded .pm__section-desc-wrapper { background: transparent !important; } /* Description wrapper — no border card */ html body #cc-main .pm__section--toggle .pm__section-desc-wrapper, html body #cc-main .pm__section--expandable .pm__section-desc-wrapper { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0.75rem 1.25rem 1rem 1.25rem !important; margin: 0 !important; overflow: visible !important; } /* Separator between toggle sections (Vuexy FAQ) */ html body #cc-main .pm__section--toggle:not(:last-of-type), html body #cc-main .pm__section--expandable:not(:last-of-type) { border-bottom: 1px solid var(--bs-border-color) !important; } /* First toggle section — top border (separator from intro) */ html body #cc-main .pm__section--toggle:first-of-type, html body #cc-main .pm__section--expandable:first-of-type { border-top: 1px solid var(--bs-border-color) !important; } /* ── Vuexy-style scrollbar for the preferences modal body ───────────────── */ #cc-main .pm__body { scrollbar-width: thin !important; scrollbar-color: var(--bs-border-color) transparent; } #cc-main .pm__body::-webkit-scrollbar { width: 8px; height: 8px; } #cc-main .pm__body::-webkit-scrollbar-track { background: transparent; margin: 0.5rem 0; } #cc-main .pm__body::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background-color .2s ease; } #cc-main .pm__body::-webkit-scrollbar-thumb:hover { background: rgba(var(--bs-primary-rgb), 0.5); background-clip: padding-box; } #cc-main .pm__body::-webkit-scrollbar-corner { background: transparent; } /* ── Vuexy-style toggle switch — pill with primary on ON ────────────────── */ /* Switch wrapper — subtle bg, rounded pill, smooth transition */ html body #cc-main .toggle__icon { background: var(--bs-secondary-bg) !important; box-shadow: inset 0 0 0 1px var(--bs-border-color) !important; border-radius: 999px !important; transition: background-color .25s ease, box-shadow .25s ease !important; } /* Knob (circle) — white, soft shadow, Vuexy size */ html body #cc-main .toggle__icon-circle { background: #fff !important; border-radius: 999px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1) !important; transition: transform .25s cubic-bezier(.4, 0, .2, 1), background-color .2s ease !important; } /* Icons inside knob (X and check) — scale + color */ html body #cc-main .toggle__icon-off svg, html body #cc-main .toggle__icon-on svg { stroke-width: 2.5 !important; } html body #cc-main .toggle__icon-off svg { stroke: var(--bs-body-color-secondary, var(--bs-body-color)) !important; opacity: 0.6; } /* ON state — primary background, white knob with primary checkmark */ html body #cc-main .section__toggle:checked ~ .toggle__icon { background: var(--bs-primary) !important; box-shadow: inset 0 0 0 1px var(--bs-primary), 0 0 0 2px rgba(var(--bs-primary-rgb), 0.12) !important; } html body #cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-on svg { stroke: var(--bs-primary) !important; } /* Disabled (always-on for "necessary" category) — softer primary */ html body #cc-main .section__toggle:checked:disabled ~ .toggle__icon { background: rgba(var(--bs-primary-rgb), 0.45) !important; box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.25) !important; opacity: 0.75; cursor: not-allowed; } html body #cc-main .section__toggle:disabled { cursor: not-allowed; } /* ── Legacy bootstrap-style toggle (fallback) ────────────────────────────── */ #cc-main .pm__section-toggle { width: 2.5em; height: 1.4em; } #cc-main .pm__section-toggle .slider { border-radius: 999px; transition: background-color .25s ease; } #cc-main .pm__section-toggle .slider::before { height: 1.1em; width: 1.1em; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform .25s cubic-bezier(.4, 0, .2, 1); } #cc-main .pm__section-toggle input:checked ~ .slider { background: var(--bs-primary); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } #cc-main .pm__section-toggle input:checked ~ .slider::before { transform: translateX(1.1em); background: #fff; } #cc-main .pm__section-toggle input:disabled ~ .slider { background: var(--cc-toggle-bg-readonly); opacity: 0.55; cursor: not-allowed; } /* ── Links — use Vuexy primary (respects StylePreset color) ──────────────── */ #cc-main a, #cc-main a:visited { color: var(--bs-primary); text-decoration: none; border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.4); transition: border-color .15s ease; } #cc-main a:hover { border-bottom-color: var(--bs-primary); } /* ── Close "×" icon — match Vuexy btn-close muted style ──────────────────── */ #cc-main .pm__close-btn { color: var(--bs-body-color-secondary, var(--bs-body-color)); transition: background-color .15s ease, color .15s ease; } #cc-main .pm__close-btn:hover { background: var(--bs-secondary-bg); color: var(--bs-heading-color, var(--bs-body-color)); } /* ── RTL support (arabic) — CookieConsent handles dir, we just make sure ── */ /* margins / shadows stay symmetric */ [dir="rtl"] #cc-main .cm { left: auto; } /* ── Responsive: narrow viewport — banner fills bottom edge ──────────────── */ @media (max-width: 640px) { #cc-main .cm { max-width: calc(100vw - 1.5rem); margin: 0.75rem; } #cc-main .pm { border-radius: var(--bs-border-radius-lg); } }