/* ==========================================================================
   Regionsvalet som toast (plan 062, Claude Design "Regionsval popup" 1a/1d)
   ≥ 768: mörk ruta nere till vänster, blockerar inget.
   < 768: fullbredd längst ned (bottom sheet) med dimma bakom; dimman stänger.
   Dold (hidden) tills region-toast.js har ett förslag – inget visas utan skript.
   ========================================================================== */

.brokk-region-toast[hidden] { display: none; }

.brokk-region-toast {
    position: fixed;
    inset: auto auto var(--space-l) var(--space-l); /* nere till vänster: Complianz-bannern sitter nere till höger (Anders 2026-11-11, prövat till höger och tillbaka) */
    z-index: 1090; /* över sidhuvudet (1001), under marknadsväljarens modal (1100) */
    pointer-events: none;
}

.brokk-region-toast__scrim { display: none; }

.brokk-region-toast__box {
    position: relative;
    box-sizing: border-box;
    width: min(50rem, calc(100vw - 2 * var(--space-l))); /* två knappar i sajtens storlek bredvid varandra */
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: var(--black);
    color: var(--text-light);
    text-align: start; /* sidfotens omgivning centrerar annars */
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-xl);
    pointer-events: auto;
    opacity: 0;
    translate: 0 1.2rem;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}

.brokk-region-toast.is-open .brokk-region-toast__box {
    opacity: 1;
    translate: 0 0;
}

.brokk-region-toast__eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding-right: 4.4rem; /* fri yta för krysset */
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brokk-region-toast__title {
    margin: 0;
    color: var(--text-light);
    font-size: var(--h3);
    line-height: 1.05;
    text-wrap: balance;
}

.brokk-region-toast__text {
    margin: 0;
    color: var(--text-light-muted);
    font-size: var(--text-m);
    line-height: 1.55;
    text-wrap: pretty;
}

.brokk-region-toast__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 0.4rem;
}

.brokk-region-toast__go { text-decoration: none; }

/* Outline-knappen på svart: vit text, halvgenomskinlig ram som i skissen. */
.brokk-region-toast__stay.btn--outline {
    color: var(--white);
    border-color: var(--white-trans-50);
    background: transparent;
}

.brokk-region-toast__note {
    margin: 0;
    color: var(--white-trans-60);
    font-size: var(--text-s);
    line-height: 1.5;
}

.brokk-region-toast__close {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--white-trans-80);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.brokk-region-toast :focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .brokk-region-toast__close:hover { color: var(--white); background: var(--white-trans-10); }
    .brokk-region-toast__stay.btn--outline:hover { border-color: var(--white); background: var(--white-trans-10); }
}

/* ── Mobil: bottom sheet ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .brokk-region-toast {
        inset: 0;
        display: flex;
        align-items: flex-end;
    }

    .brokk-region-toast__scrim {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--black-trans-30);
        pointer-events: auto;
        opacity: 0;
        transition: opacity var(--dur-base) var(--ease-out);
    }

    .brokk-region-toast.is-open .brokk-region-toast__scrim { opacity: 1; }

    .brokk-region-toast__box {
        width: 100%;
        padding: var(--space-s) var(--space-s) var(--space-m);
        border-radius: var(--radius-l) var(--radius-l) 0 0;
        translate: 0 2.4rem;
    }

    .brokk-region-toast__actions { flex-direction: column; }

    .brokk-region-toast__actions > * {
        width: 100%;
        justify-content: center;
    }

    .brokk-region-toast__note { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .brokk-region-toast__box,
    .brokk-region-toast.is-open .brokk-region-toast__box {
        translate: none;
        transition: opacity var(--dur-fast) linear;
    }
}