/*
 * Souhlas s cookies — výchozí skin.
 *
 * POZOR: CSS skinu je ÚPLNÝ soubor, ne přírůstek k defaultu. Kaskáda vybírá
 * jeden soubor, nesčítá je — co dodaný skin nepřepíše, musí si nést sám.
 *
 * Stavěno JEN na tokenech ze `skeleton/site/assets/site.css` (--color-*,
 * --space-*, --radius*, --font-size-*). Napevno zadaná barva by znamenala,
 * že se projektu web nepřebarví změnou pár proměnných.
 *
 * Lišta je na KAŽDÉ stránce webu, takže tady platí přísněji než jinde:
 * viditelný focus, dost velká klikací plocha a nic, co by se schovalo pod
 * jiný obsah.
 */

.consent {
    position: fixed;
    z-index: 9999;
    background: var(--color-bg);
    color: var(--color-fg);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px var(--color-shadow);
    padding: var(--space-5);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

/* Umístění u spodní hrany — výchozí volba `banner_position = bottom`. */
.consent--bottom {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: var(--container);
    margin-inline: auto;
}

/* Umístění na střed obrazovky — volba `banner_position = center`. */
.consent--center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(var(--container-narrow), calc(100vw - var(--space-6)));
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
}

.consent[hidden] {
    display: none;
}

.consent__title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
}

.consent__text {
    margin: 0 0 var(--space-4);
    color: var(--color-fg-muted);
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.consent__btn {
    font: inherit;
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
    color: var(--color-fg);
}

.consent__btn:hover {
    background: var(--color-bg-sunken);
}

.consent__btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
}

.consent__btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/*
 * Viditelný focus je tady povinnost, ne ozdoba: lišta se otevírá na každé
 * stránce a kdo ji ovládá klávesnicí, musí vidět, kde stojí.
 */
.consent__btn:focus-visible,
.consent__option input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* --- dialog předvoleb ---------------------------------------------------- */

.consent__prefs {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    list-style: none;
}

.consent__option {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding-block: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
}

.consent__option:first-child {
    border-top: 0;
}

.consent__option-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.consent__option-name {
    font-weight: 600;
}

.consent__option-hint {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
}

/*
 * Nutná kategorie je zaškrtnutá a zamčená. Zašedlá musí BÝT vidět jako
 * zaškrtnutá — jinak by to vypadalo, že souhlas nebyl dán.
 */
.consent__option input:disabled {
    cursor: not-allowed;
}

.consent__option input:disabled + .consent__option-body .consent__option-name {
    color: var(--color-fg-muted);
}