/*
 * The stylesheet of the cookie banner on the site, loaded by CookieAsset. Built on the tokens of the site (see
 * apps/frontend/public/css/src/_tokens.scss): the values of its own are tokens too, so a theme can change them.
 *
 * The banner is a modal dialog behind a light backdrop: a bar along the bottom of the screen (kupisa-consent-bar) or
 * a box in its bottom left corner (kupisa-consent-box). Once the visitor answered, a round button in the bottom left
 * corner (kupisa-consent-toggle) opens it again.
 *
 * The classes are named `kupisa-consent`, not `cookie-banner` or `consent`: the lists of the ad blockers hide
 * elements by such generic names, and a blocker of a visitor must not take the banner away from them.
 */

:root {
    --consent-width: 26rem;
    --consent-groups-height: 22rem;
    --consent-toggle-size: 3rem;
}

.kupisa-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-background);
    color: var(--color-text);
    box-shadow: var(--shadow);
}

.kupisa-consent::backdrop {
    background: color-mix(in srgb, var(--color-text) 15%, transparent);
}

.kupisa-consent-box {
    inset: auto auto var(--space-3) var(--space-3);
    width: min(calc(100vw - 2 * var(--space-3)), var(--consent-width));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.kupisa-consent-body {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-4) var(--container-padding);
}

.kupisa-consent-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}

.kupisa-consent-text {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.kupisa-consent-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* A button of the banner is shown or hidden by the script; the display of .btn must not undo `hidden`. */
.kupisa-consent [hidden],
.kupisa-consent-toggle[hidden] {
    display: none;
}

.kupisa-consent-toggle {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--consent-toggle-size);
    height: var(--consent-toggle-size);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-text-muted);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.kupisa-consent-toggle:hover {
    color: var(--color-primary);
    transform: scale(1.08);
}

/* The groups, shown once the visitor chooses: each with its switch, its text and its cookies folded away. */
.kupisa-consent-groups {
    max-height: var(--consent-groups-height);
    margin-bottom: var(--space-3);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.kupisa-consent-group {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.kupisa-consent-group:last-child {
    border-bottom: 0;
}

.kupisa-consent-group-label {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-weight: 600;
}

.kupisa-consent-group-text {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.kupisa-consent-group-cookies {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.kupisa-consent-group-cookies summary {
    cursor: pointer;
    color: var(--color-link);
}

.kupisa-consent-table {
    margin: var(--space-2) 0 0;
}

.kupisa-consent-table th,
.kupisa-consent-table td {
    padding: var(--space-1) var(--space-2);
}