.klaro {
    --font-family: var(--font-body, inherit);
    --font-size: 14px;
    --border-radius: 12px;
    --dark1: #3F3729;   /* notice + modal background */
    --dark2: #463C2A;
    --light1: #F3E3C9;  /* body text */
    --light2: #E8D1A9;
    --light3: #F3E0BFA8;
    --green1: #7BBF47;  /* switch "on" state only; buttons are overridden below */
    --green2: #7BBF47;
    --notice-max-width: 420px;
}

/* ------------------------------------------------------------------ *
 * 1. Equal prominence
 * ------------------------------------------------------------------ */

.klaro .cookie-notice .cm-btn,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-info {
    background-color: var(--color-bm-solitaire, #F3E3C9);
    color: var(--color-bm-dark, #3F3729);
    border: 1px solid var(--color-bm-solitaire, #F3E3C9);
    border-radius: 10px;
    padding: 0.55em 1.1em;
    margin-right: 0.5em;
    min-width: 8.5em;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.klaro .cookie-notice .cm-btn:last-child,
.klaro .cookie-modal .cm-btn:last-child {
    margin-right: 0;
}

.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-modal .cm-btn:hover {
    background-color: var(--color-bm-rotunda-gold, #F3E0BF);
    border-color: var(--color-bm-rotunda-gold, #F3E0BF);
}

/* Visible keyboard focus — the buttons must be equally reachable, not just equally sized. */
.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .cookie-modal .cm-btn:focus-visible {
    outline: 3px solid var(--color-bm-deep-coral, #E2502B);
    outline-offset: 2px;
}

/* Keep the three notice buttons on one row, evenly, and let them wrap together on
   narrow screens instead of leaving "Configurar" stranded on its own line. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em;
    justify-content: stretch;
    align-items: center;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    flex: 1 1 auto;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em;
    margin-top: 0;
}

@media (max-width: 560px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok,
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* "Configurar" spans both columns above the accept/reject pair, which stay side by
       side and identical. */
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
        grid-column: 1 / -1;
    }

    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
        grid-column: 1 / -1;
    }

    .klaro .cookie-notice .cm-btn {
        min-width: 0;
        width: 100%;
        margin-right: 0;
    }
}

/* Klaro hard-codes width: calc(50% - 0.5em) on notice buttons below 384px, which fights
   the grid above. */
@media (max-width: 384px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ *
 * 2. Compact, non-aggressive notice
 * ------------------------------------------------------------------ */

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 0.9em 1em 1em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    margin-bottom: 0.4em;
    line-height: 1.35;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h1 {
    font-size: 1.15em;
    margin: 0 0 0.2em;
}

/* ------------------------------------------------------------------ *
 * 3. Stay clear of the mobile dock
 * ------------------------------------------------------------------ */

/* :has() scopes the offset to the frames that actually render the dock — only
   NewUI.Master includes MobileDock.ascx, so the other four must not gain a dead 50px gap. */
@media (max-width: 1000px) {
    body:has(.mobile-dock) .klaro .cookie-notice:not(.cookie-modal-notice) {
        bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }
}

/* The dock sits at z-index 9000; the notice (999) and modal (1000/1001) must clear it. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    z-index: 9001;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.klaro .cookie-modal {
    z-index: 9010;
}

.klaro .cookie-modal .cm-bg {
    z-index: 9010;
}

.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal-notice {
    z-index: 9011;
}