/** -------------------------------------------------------------- //

    CMS Consent Manager (GDPR v2)

    The UI renders inside an open shadow root on #cms-consent-root;
    this stylesheet is cloned into the shadow, so page CSS cannot
    reach the consent elements. The same file also serves the
    light-DOM fallback (no attachShadow): :host rules apply in
    shadow mode, the #cms-consent-root rules in fallback mode -
    keep the two variable blocks in sync. :host and #cms-consent-root
    selectors stay in separate rules on purpose: old fallback-only
    browsers drop any group containing the :host selector.

    Themes can override any --cms-consent-* custom property (custom
    properties and font-family deliberately inherit through the
    shadow boundary).

    z-index layering (all relative to --cms-consent-z):
        badge        z
        bar / card   z + 1
        overlay      z + 2   (force-selection / modal backdrop)
        modal        z + 3
        any forced   z + 3   (must clear its own overlay)

*/

#cms-consent-root {
    --cms-consent-bg: #ffffff;
    --cms-consent-text: #1c1c1c;
    --cms-consent-muted: #4f4f4f;
    --cms-consent-accent: #185a92;
    --cms-consent-accent-text: #ffffff;
    --cms-consent-neutral: #4f4f4f;
    --cms-consent-neutral-text: #ffffff;
    --cms-consent-neutral-soft: rgba(79, 79, 79, 0.08);
    --cms-consent-border: #cccccc;
    --cms-consent-radius: 6px;
    --cms-consent-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    --cms-consent-overlay-bg: rgba(0, 0, 0, 0.55);
    --cms-consent-font: inherit;
    --cms-consent-font-size: 15px;
    --cms-consent-z: 999990;
    --cms-consent-switch-off: #767676;
    --cms-consent-switch-on: var(--cms-consent-accent);
    --cms-consent-focus: #185a92;
    --cms-consent-badge-bg: var(--cms-consent-bg);
    --cms-consent-badge-text: var(--cms-consent-text);
    --cms-consent-modal-max-width: 560px;
    --cms-consent-card-max-width: 420px;
    --cms-consent-card-inset: 20px;
    font-family: var(--cms-consent-font);
}

/* Shadow-mode twin of the block above (an id selector cannot match
   the host from inside its own shadow tree) */
:host {
    --cms-consent-bg: #ffffff;
    --cms-consent-text: #1c1c1c;
    --cms-consent-muted: #4f4f4f;
    --cms-consent-accent: #185a92;
    --cms-consent-accent-text: #ffffff;
    --cms-consent-neutral: #4f4f4f;
    --cms-consent-neutral-text: #ffffff;
    --cms-consent-neutral-soft: rgba(79, 79, 79, 0.08);
    --cms-consent-border: #cccccc;
    --cms-consent-radius: 6px;
    --cms-consent-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    --cms-consent-overlay-bg: rgba(0, 0, 0, 0.55);
    --cms-consent-font: inherit;
    --cms-consent-font-size: 15px;
    --cms-consent-z: 999990;
    --cms-consent-switch-off: #767676;
    --cms-consent-switch-on: var(--cms-consent-accent);
    --cms-consent-focus: #185a92;
    --cms-consent-badge-bg: var(--cms-consent-bg);
    --cms-consent-badge-text: var(--cms-consent-text);
    --cms-consent-modal-max-width: 560px;
    --cms-consent-card-max-width: 420px;
    --cms-consent-card-inset: 20px;
    font-family: var(--cms-consent-font);
}

#cms-consent-root,
#cms-consent-root * ,
#cms-consent-root *::before,
#cms-consent-root *::after {
    box-sizing: border-box;
}

:host,
:host *,
:host *::before,
:host *::after {
    box-sizing: border-box;
}

/** -------------------------------------------------------------- //

    Utility

*/

#cms-consent-root .cms-consent-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

:host .cms-consent-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/** -------------------------------------------------------------- //

    Overlay (force-selection / modal backdrop)

*/

#cms-consent-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--cms-consent-overlay-bg);
    z-index: calc(var(--cms-consent-z) + 2);
}

/** -------------------------------------------------------------- //

    Panel - shared

*/

.cms-consent-panel {
    position: fixed;
    margin: 0;
    background: var(--cms-consent-bg);
    color: var(--cms-consent-text);
    font-size: var(--cms-consent-font-size);
    line-height: 1.5;
    /* font-family/-size aside, inherited text properties from the
       page should not restyle the panel (they inherit through the
       shadow boundary) */
    letter-spacing: normal;
    text-transform: none;
    -webkit-text-size-adjust: 100%;
}

.cms-consent-panel:focus {
    outline: none;
}

.cms-consent-inner {
    position: relative;
    padding: 20px 24px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cms-consent-heading {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 28px 8px 0;
}

.cms-consent-message {
    margin: 0 0 16px;
    color: var(--cms-consent-muted);
}

.cms-consent-policy {
    margin: 0 0 16px;
}

.cms-consent-policy-link {
    color: var(--cms-consent-accent);
    text-decoration: underline;
}

.cms-consent-policy-link:hover,
.cms-consent-policy-link:focus {
    text-decoration: none;
}

    .cms-consent-panel--bar .cms-consent-policy {
        margin-bottom: 0;
    }

/** -------------------------------------------------------------- //

    Layers

    Both layers are built once and live in the DOM together; the
    panel's --layer-* modifier decides which one shows. display:none
    (not visibility/opacity) is deliberate — getFocusable() filters on
    rendered geometry, so the hidden layer drops out of the focus trap
    and the tab order for free.

*/

.cms-consent-layer {
    display: none;
}

.cms-consent-panel--layer-intro .cms-consent-layer--intro,
.cms-consent-panel--layer-detail .cms-consent-layer--detail {
    display: block;
}

/* Back affordance on the detail layer */

/* Programmatic focus target — setLayer() focuses the layer itself to
   announce the view change, so it must not paint a focus ring. */
.cms-consent-layer:focus {
    outline: none;
}

.cms-consent-back-row {
    margin: 0 0 12px;
}

/* A small outline button rather than a link: the underline fought the
   chevron (each got its own underline segment, with a gap between),
   and a control that changes the view is a button, not a link. */

.cms-consent-back {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid var(--cms-consent-border);
    border-radius: var(--cms-consent-radius);
    background: transparent;
    color: var(--cms-consent-muted);
    font-family: inherit;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

/* Drawn, not typed. A "\2039" glyph nudged onto the baseline with a
   margin cannot be made reliable here: the panel inherits the SITE's
   font-family, so the glyph's position inside its own line box differs
   per site, not merely per browser, and any margin would be tuned for
   exactly one font. A rotated border box has
   geometry we define, so align-items:center on the button places it
   identically everywhere. Sizes are in em so it tracks the label. */

.cms-consent-back::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    margin-right: 8px;
    border-left: 0.12em solid currentColor;
    border-bottom: 0.12em solid currentColor;
    transform: rotate(45deg);
}

.cms-consent-back:hover {
    background: var(--cms-consent-neutral-soft);
    color: var(--cms-consent-text);
}

.cms-consent-back:focus {
    outline: 2px solid var(--cms-consent-focus);
    outline-offset: 2px;
}

/* Visible category-list title (the legend earns its keep on its own
   layer, where it is no longer redundant with the heading) */

.cms-consent-categories-legend {
    padding: 0;
    margin: 0 0 8px;
    font-weight: 700;
}

/** -------------------------------------------------------------- //

    Panel - bar family (full-width, top or bottom edge)

*/

.cms-consent-panel--bar {
    left: 0;
    right: 0;
    box-shadow: var(--cms-consent-shadow);
    z-index: calc(var(--cms-consent-z) + 1);
}

.cms-consent-panel--banner {
    bottom: 0;
    border-top: 1px solid var(--cms-consent-border);
    animation: cms-consent-slide-up 0.25s ease-out;
}

.cms-consent-panel--banner-top {
    top: 0;
    border-bottom: 1px solid var(--cms-consent-border);
    animation: cms-consent-slide-down 0.25s ease-out;
}

/* Any panel must clear its own force-selection overlay.

   Deliberately a COMPOUND selector: every per-style block also sets
   z-index, so a single-class rule here would win or lose on source
   order alone — which it did, leaving a forced card stranded behind
   its own backdrop while a forced bar worked. Two classes outrank all
   of them regardless of where a future style block is added. */
.cms-consent-panel.cms-consent-panel--forced {
    z-index: calc(var(--cms-consent-z) + 3);
}

@keyframes cms-consent-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes cms-consent-slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/** -------------------------------------------------------------- //

    Panel - card family (contained, floating in a bottom corner)

    Laid out like the modal (single column, its own width) but
    anchored to a corner instead of centred, and it never gets a
    backdrop unless force-selection asks for one.

*/

.cms-consent-panel--card {
    bottom: var(--cms-consent-card-inset, 20px);
    width: calc(100% - 32px);
    max-width: var(--cms-consent-card-max-width);
    border: 1px solid var(--cms-consent-border);
    border-radius: var(--cms-consent-radius);
    box-shadow: var(--cms-consent-shadow);
    z-index: calc(var(--cms-consent-z) + 1);
    animation: cms-consent-slide-up 0.25s ease-out;
}

.cms-consent-panel--card-left {
    left: var(--cms-consent-card-inset, 20px);
}

.cms-consent-panel--card-right {
    right: var(--cms-consent-card-inset, 20px);
}

    .cms-consent-panel--card .cms-consent-message {
        padding-right: 2em;
    }

/** -------------------------------------------------------------- //

    Panel - modal style

*/

.cms-consent-panel--modal {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: var(--cms-consent-modal-max-width);
    border: 1px solid var(--cms-consent-border);
    border-radius: var(--cms-consent-radius);
    box-shadow: var(--cms-consent-shadow);
    z-index: calc(var(--cms-consent-z) + 3);
    animation: cms-consent-fade-in 0.2s ease-out;
}

    .cms-consent-panel--modal .cms-consent-message {
        padding-right: 2em;
    }

@keyframes cms-consent-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/** -------------------------------------------------------------- //

    Close button

*/

.cms-consent-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    border-radius: 50%;
    background: transparent;
    color: var(--cms-consent-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cms-consent-close:hover {
    color: var(--cms-consent-text);
    background: rgba(0, 0, 0, 0.06);
}

.cms-consent-close:focus {
    outline: 2px solid var(--cms-consent-focus);
    outline-offset: 2px;
}

/** -------------------------------------------------------------- //

    Category toggles

*/

.cms-consent-categories {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.cms-consent-category {
    padding: 8px 0;
    border-bottom: 1px solid var(--cms-consent-border);
}

.cms-consent-category:last-child {
    border-bottom: 0;
}

.cms-consent-toggle {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    margin: 0;
}

.cms-consent-check {
    position: absolute;
    opacity: 0;
    width: 40px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.cms-consent-check:disabled {
    cursor: not-allowed;
}

.cms-consent-switch {
    flex: 0 0 auto;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--cms-consent-switch-off);
    position: relative;
    transition: background 0.15s ease-out;
}

.cms-consent-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: left 0.15s ease-out;
}

.cms-consent-check:checked ~ .cms-consent-switch {
    background: var(--cms-consent-switch-on);
}

.cms-consent-check:checked ~ .cms-consent-switch::after {
    left: 20px;
}

.cms-consent-check:focus ~ .cms-consent-switch {
    outline: 2px solid var(--cms-consent-focus);
    outline-offset: 2px;
}

.cms-consent-check:disabled ~ .cms-consent-switch {
    opacity: 0.55;
}

.cms-consent-category-label {
    color: var(--cms-consent-text);
}

.cms-consent-category-desc {
    margin: 4px 0 0 50px;
    font-size: 0.87em;
    font-weight: 400;
    color: var(--cms-consent-muted);
}

/* High contrast / forced colors: show the native checkbox instead
   of the painted switch so state stays visible */
@media (forced-colors: active) {

    .cms-consent-check {
        position: static;
        opacity: 1;
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .cms-consent-switch {
        display: none;
    }

    .cms-consent-category-desc {
        margin-left: 28px;
    }

}

/** -------------------------------------------------------------- //

    Buttons

*/

.cms-consent-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.cms-consent-button-wrapper {
    flex: 1 1 140px;
    min-width: 120px;
}

.cms-consent-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--cms-consent-radius);
    background: transparent;
    color: var(--cms-consent-accent);
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease-out, color 0.15s ease-out, opacity 0.15s ease-out;
}

/* Accept and Decline are styled IDENTICALLY — same size, weight,
   shape AND color. Only the label differs.

   Matching size and weight is not sufficient on its own: EDPB
   deceptive-design guidance and the 2023 cookie-banner taskforce
   report both treat colour contrast that makes accepting more
   attractive than refusing as a steer, and CNIL's position is that
   the options be offered in the same format with the same ease. So
   colour matches too. Same-colour is the defensible end of that
   range and costs nothing; the visitor still has a clear affirmative
   label.

   Save Choices and Customize remain the neutral-outline tertiary —
   they are not the accept/refuse pair and equal-prominence does not
   apply to them. */

.cms-consent-button--accept,
.cms-consent-button--decline {
    border-color: var(--cms-consent-accent);
    background: var(--cms-consent-accent);
    color: var(--cms-consent-accent-text);
}

.cms-consent-button--accept:hover,
.cms-consent-button--decline:hover {
    opacity: 0.92;
}

/* Customize is the intro layer's third option and takes the same
   neutral-outline treatment as Save Choices — it must read as a real,
   equally-available route (regulators treat a buried "manage" as a
   dark pattern) without competing with the accept/decline pair. */

.cms-consent-button--save,
.cms-consent-button--customize {
    border-color: var(--cms-consent-neutral);
    color: var(--cms-consent-neutral);
}

.cms-consent-button--save:hover,
.cms-consent-button--customize:hover {
    background: var(--cms-consent-neutral-soft);
}

.cms-consent-button:focus {
    outline: 2px solid var(--cms-consent-focus);
    outline-offset: 2px;
}

.cms-consent-helper {
    margin: 6px 0 0;
    font-size: 0.8em;
    color: var(--cms-consent-muted);
}

/** -------------------------------------------------------------- //

    Banner-style layout: content left, controls right on wide
    screens; stacked on small screens

*/

@media (min-width: 900px) {

    .cms-consent-panel--bar .cms-consent-inner {
        max-width: 1280px;
        margin: 0 auto;
    }

    /* The heading sits above both layers, so a wide banner reads
       as a title line followed by one content/controls row. The row is
       the LAYER (each layer owns its own content and buttons). */

    .cms-consent-panel--bar.cms-consent-panel--layer-intro .cms-consent-layer--intro,
    .cms-consent-panel--bar.cms-consent-panel--layer-detail .cms-consent-layer--detail {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        align-items: flex-start;
    }

    /* The WRAPPER spans the row; the button keeps its own width so
       its focus ring hugs the text (see buildDetailLayer) */
    .cms-consent-panel--bar .cms-consent-back-row {
        flex: 0 0 100%;
        margin-bottom: 0;
    }

    .cms-consent-panel--bar .cms-consent-content {
        flex: 1 1 55%;
    }

    .cms-consent-panel--bar .cms-consent-message {
        margin-bottom: 0;
    }

    .cms-consent-panel--bar .cms-consent-categories {
        flex: 1 1 55%;
        margin: 0;
    }

    .cms-consent-panel--bar .cms-consent-buttons {
        flex: 0 1 26%;
        flex-direction: column;
    }

    .cms-consent-panel--bar .cms-consent-button-wrapper {
        flex: 0 0 auto;
        width: 100%;
    }

}

/** -------------------------------------------------------------- //

    Re-open badge

*/

.cms-consent-badge {
    position: fixed;
    left: 17px;
    bottom: 17px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cms-consent-border);
    border-radius: 50%;
    background: var(--cms-consent-badge-bg);
    color: var(--cms-consent-badge-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: var(--cms-consent-z);
    transition: transform 0.25s ease-out, opacity 0.25s ease-out, bottom 0.25s ease-out;
}

/* Match the UserWay button's geometry (44px at left 17) so the two
   form one aligned column: 17 + 44 + 12px gap */
.cms-consent-badge--stacked {
    bottom: var(--cms-consent-badge-stacked-bottom, 73px);
}

.cms-consent-badge:hover {
    transform: scale(1.08);
}


.cms-consent-badge:focus {
    outline: 2px solid var(--cms-consent-focus);
    outline-offset: 2px;
}

.cms-consent-badge svg {
    display: block;
    max-width: 100%;
}

.cms-consent-badge--hidden {
    display: none;
}

/** -------------------------------------------------------------- //

    Small screens

*/

@media (max-width: 599px) {

    .cms-consent-inner {
        padding: 16px;
    }

    .cms-consent-panel--modal {
        width: calc(100% - 16px);
    }

    /* A corner card has no room to be a card on a phone — it becomes
       a bottom sheet. Both corner variants land in the same place, so
       card-left and card-right are indistinguishable here by design. */
    .cms-consent-panel--card {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-width: none;
    }

    .cms-consent-buttons {
        flex-direction: column;
    }

    .cms-consent-button-wrapper {
        flex: 0 0 auto;
        width: 100%;
    }

}

/** -------------------------------------------------------------- //

    Reduced motion

*/

@media (prefers-reduced-motion: reduce) {

    #cms-consent-root *,
    #cms-consent-root *::before,
    #cms-consent-root *::after,
    .cms-consent-panel {
        animation: none !important;
        transition: none !important;
    }

    :host *,
    :host *::before,
    :host *::after {
        animation: none !important;
        transition: none !important;
    }

}