/*
 * KommunalConsent - consent bar + settings offcanvas in the KommunalTheme look.
 * Plain CSS (copied by assets:install, linked in meta.html.twig), uses the theme's --kb-* tokens
 * with fallbacks. UX reference: k-dev skill drupal-klaro-gtm-consent (templates/css/klaro.css):
 * "reject all" and "accept all" equally prominent, bottom sheet on phones, toggles, visible focus.
 */

.kb-consent-bar {
    --kbc-primary: var(--kb-color-primary, #8d2d2e);
    --kbc-primary-dark: var(--kb-color-primary-dark, #6b2223);
    --kbc-on-primary: var(--kb-color-primary-text, #fff);
    --kbc-ink: var(--kb-text-primary, #171512);
    --kbc-body: var(--kb-text-secondary, #423e39);
    --kbc-line: var(--kb-border-hairline, #e5e0d8);
    --kbc-radius: var(--kb-radius-control, 6px);
    --kbc-focus: var(--kb-focus-ring, rgba(141, 45, 46, .32));

    border-top: 4px solid var(--kbc-primary);
    background: #fff;
    box-shadow: 0 -12px 40px -16px rgba(23, 21, 18, .35);
    padding: 1.25rem 0;
    text-align: left;
    font-size: .9375rem;
    color: var(--kbc-body);
    max-height: 85vh;
    overflow-y: auto;
}

.kb-consent-bar:focus {
    outline: none;
}

.kb-consent-bar__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem 2.5rem;
}

.kb-consent-bar__text {
    flex: 1 1 auto;
    margin: 0;
    max-width: 52rem;
}

.kb-consent-bar__title {
    margin: 0 0 .35rem;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--kbc-ink);
}

.kb-consent-bar__description {
    margin: 0;
    line-height: 1.55;
}

.kb-consent-bar__description a,
.kb-consent-offcanvas .offcanvas-cookie-description a {
    font-weight: 700;
    color: var(--kb-color-primary, #8d2d2e);
}

/* Buttons: same size for all three; reject and accept share the same (primary) style */
.kb-consent-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.kb-consent-actions .kb-consent-btn,
.kb-consent-actions__settings .kb-consent-btn {
    min-width: 11rem;
    min-height: 44px;
    white-space: nowrap;
}

.kb-consent-actions .kb-consent-btn:focus-visible {
    box-shadow: 0 0 0 .25rem var(--kb-focus-ring, rgba(141, 45, 46, .32));
}

/* "Einstellungen" sits between the two equal choices on desktop */
.kb-consent-actions__settings {
    display: inline-flex;
}

.kb-consent-actions__settings .kb-consent-btn {
    width: 100%;
}

.kb-consent-actions--stacked {
    flex-direction: column;
    align-items: stretch;
}

.kb-consent-actions--stacked .kb-consent-btn {
    width: 100%;
}

/* ---- Settings offcanvas: toggles on the right, hairlines between groups ---- */
.kb-consent-offcanvas .offcanvas-cookie-description p {
    line-height: 1.55;
}

.kb-consent-offcanvas .offcanvas-cookie-list {
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.kb-consent-offcanvas .offcanvas-cookie-group {
    margin: 0;
    padding: .9rem 2.25rem .9rem 0;
    border-top: 1px solid var(--kb-border-hairline, #e5e0d8);
}

.kb-consent-offcanvas .offcanvas-cookie-group:first-child {
    border-top: 0;
}

.kb-consent-offcanvas .offcanvas-cookie-group > .form-check > label {
    font-weight: 700;
    color: var(--kb-text-primary, #171512);
}

.kb-consent-offcanvas .offcanvas-cookie-entries-toggle {
    top: .7rem;
}

.kb-consent-offcanvas .offcanvas-cookie-entries > p,
.kb-consent-offcanvas .offcanvas-cookie-entry > p {
    font-size: .875rem;
    color: var(--kb-text-tertiary, #5f5a52);
}

/* wider switch than Bootstrap's -> widen the gutter too, else label and switch touch */
.kb-consent-offcanvas .form-switch {
    padding-left: 3.25em;
}

.kb-consent-offcanvas .form-switch .form-check-input {
    width: 2.5em;
    height: 1.35em;
    margin-top: .1em;
    margin-left: -3.25em;
    cursor: pointer;
}

.kb-consent-offcanvas .form-switch .form-check-input:checked {
    background-color: var(--kb-color-primary, #8d2d2e);
    border-color: var(--kb-color-primary, #8d2d2e);
}

.kb-consent-offcanvas .form-switch .form-check-input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.kb-consent-offcanvas .form-switch .form-check-input:focus-visible {
    box-shadow: 0 0 0 .25rem var(--kb-focus-ring, rgba(141, 45, 46, .32));
}

/* ---- Phones: bottom sheet, stacked full-width buttons ---- */
@media (max-width: 767.98px) {
    .kb-consent-bar {
        padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
        border-radius: 12px 12px 0 0;
        font-size: .875rem;
    }

    .kb-consent-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
    }

    .kb-consent-bar__title {
        font-size: 1rem;
    }

    .kb-consent-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .kb-consent-actions .kb-consent-btn {
        min-width: 0;
        width: 100%;
        white-space: normal;
    }

    /* reject | accept side by side (equal), settings full width below */
    .kb-consent-bar .kb-consent-actions__settings {
        grid-column: 1 / -1;
        order: 3;
    }

    .kb-consent-actions--stacked {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb-consent-offcanvas .offcanvas-cookie-entries-toggle svg {
        transition: none;
    }
}