/**
 * Copyright © Lesari. All rights reserved.
 */

/**
 * Cookie consent banner + settings modal (task 004).
 *
 * Anti-FOUC (review I5): these two rules MUST stay the first two rules in
 * this file. The widget root and the modal are both revealed by JS via
 * `element.hidden = false`/`removeAttribute('hidden')`
 * (`Lesari_CookieConsent/js/consent-ui.js`) — any later `display:
 * flex/grid/block` rule targeting the same selector beats the `hidden`
 * attribute's UA style (`[hidden]{display:none}` has 0-specificity and
 * loses to a plain class selector), and on FPC-cached pages the banner
 * would then flash for every visitor — including people who already
 * rejected — until RequireJS boots and `consent-ui.js` re-hides it.
 */
#lesari-cookie-consent[hidden] {
    display: none !important;
}

.lesari-cookie-consent__modal[hidden] {
    display: none !important;
}

/*
 * The banner itself also toggles independently of the root (consent-ui.js
 * hides it while the settings modal is open, even though the root stays
 * visible) - without this rule `.lesari-cookie-consent__banner{display:
 * flex}` below has the exact same specificity as the UA `[hidden]{display:
 * none}` default, and author styles win ties over the UA stylesheet, so the
 * banner would stay visible behind the modal/backdrop.
 */
.lesari-cookie-consent__banner[hidden] {
    display: none !important;
}

/**
 * z-index (review I6). Measured stack in
 * `app/design/frontend/Lesari/default/web/css/`: `.page-header` 900, promo
 * banner 901 (`_promo-banner.scss:60`), `_notify.scss` 1100,
 * `_preview-studio.scss` 99999/100000. `#totop` (Porto's fixed
 * back-to-top button, `Smartwave_Porto::html/footer.phtml`) is 9999.
 * Everything below sits at >= 100010 so the consent UI is never hidden
 * behind any of those, and the modal backdrop sits one below the modal
 * itself so it can dim the page without out-z-indexing the dialog.
 */
.lesari-cookie-consent__banner,
.lesari-cookie-consent__modal {
    z-index: 100011;
}

.lesari-cookie-consent__backdrop {
    z-index: 100010;
}

.lesari-cookie-consent {
    font-family: var(--font);
    color: var(--primary_color);
}

.lesari-cookie-consent__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(7, 38, 74, 0.55); /* var(--primary_color) at 55% */
}

/**
 * Banner: mobile = an inset "floating" bottom sheet (NOT flush to the
 * screen edge), desktop (>= 1024px) = a bottom-right card. Both breakpoints
 * share the same `bottom: 64px` offset on purpose: Porto's `#totop` button
 * is `bottom: 0; right: 15px; height: 40px` at every viewport width (no
 * breakpoint override in the theme's own CSS) — 64px clears its full
 * height plus a visible gap regardless of the banner's own height (which
 * varies with locale/copy length), so the two never overlap top-to-bottom
 * no matter how tall the banner's text wraps.
 */
.lesari-cookie-consent__banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 64px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(7, 38, 74, 0.18);
}

@media (min-width: 1024px) {
    .lesari-cookie-consent__banner {
        left: auto;
        /* 420px leaves ~101px of label room per button (see __btn below):
           enough for the longest single-word label, "Налаштування" (~99px). */
        width: 420px;
        max-width: calc(100vw - 48px);
        border-radius: 20px;
    }
}

.lesari-cookie-consent__text {
    margin: 0;
    font-size: var(--font_size_p0);
    line-height: 1.5;
}

.lesari-cookie-consent__link {
    color: var(--primary_color);
    text-decoration: underline;
    white-space: nowrap;
}

/**
 * Three equally weighted actions (Accept all / Reject all / Settings):
 * `flex: 1` on every button makes them share the row equally regardless of
 * label length, so "identical size" holds even across locales (task 006)
 * without hand-tuning a fixed width per button.
 */
.lesari-cookie-consent__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lesari-cookie-consent__btn {
    /* flex-basis: 0 (not `auto`) so all three buttons end up the exact same
       width regardless of label length/locale - `auto` would size each
       button off its own content first, then only grow the *remaining*
       space equally, still leaving "Settings" narrower than "Accept all". */
    flex: 1 1 0;
    min-width: 96px;
    box-sizing: border-box;
    /* Flex-centred so a label that wraps to two lines ("Rechazar todo",
       "Akceptuj wszystkie") stays centred, and the single-line buttons next
       to it - stretched to the same height - keep their label centred too. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    font-family: var(--font);
    font-size: var(--font_size_p0);
    font-weight: 600;
    /* Explicit: the theme's button rule otherwise leaks a 3px line-height,
       which made wrapped labels overlap (ES banner, 2026-10-27). */
    line-height: 1.25;
    text-align: center;
    border-radius: 8px;
    border: 2px solid var(--primary_color);
    cursor: pointer;
    background-color: #fff;
    color: var(--primary_color);
}

/**
 * Below the 1024px breakpoint the banner is only ~366px wide (task 006
 * fix): a three-across equal-width row leaves ~71px of text room per
 * button, which fits every SHORT English label ("Accept all") but not the
 * longer Ukrainian/Polish translations ("Відхилити всі"/"Odrzuć
 * wszystkie"), wrapping them onto a second line inside their own button
 * (caught by `tools/viewport-shot/task006-locales-verify.js` measuring
 * each label's own client-rect count, not just the row's layout). Stacking
 * the three actions into a single column instead keeps every button the
 * full ~326px content width - same size/prominence across all three
 * (still identical width and height, just vertical instead of
 * horizontal) - with comfortable room for any locale's label at the
 * existing font-size/padding.
 */
@media (max-width: 1023.98px) {
    .lesari-cookie-consent__actions {
        flex-direction: column;
    }

    .lesari-cookie-consent__btn {
        width: 100%;
    }
}

.lesari-cookie-consent__btn--primary {
    background-color: var(--primary_color);
    color: #fff;
}

.lesari-cookie-consent__btn:focus-visible {
    outline: 2px solid var(--secondary_color_3);
    outline-offset: 2px;
}

/* Settings modal: centered dialog on every breakpoint. */
.lesari-cookie-consent__modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: calc(100vw - 32px);
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(7, 38, 74, 0.28);
}

.lesari-cookie-consent__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 0;
}

.lesari-cookie-consent__modal-title {
    margin: 0;
    font-family: var(--font_2);
    font-size: var(--font_size_p2);
}

.lesari-cookie-consent__close {
    padding: 4px 8px;
    font-size: var(--font_size_p2);
    line-height: 1;
    background: none;
    border: 0;
    color: var(--primary_color);
    cursor: pointer;
}

.lesari-cookie-consent__close:focus-visible {
    outline: 2px solid var(--secondary_color_3);
    outline-offset: 2px;
}

.lesari-cookie-consent__modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.lesari-cookie-consent__category p {
    margin: 4px 0 0;
    font-size: var(--font_size_p0);
    line-height: 1.5;
    color: var(--primary_color);
}

.lesari-cookie-consent__category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lesari-cookie-consent__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

.lesari-cookie-consent__toggle input[disabled] {
    cursor: not-allowed;
}

.lesari-cookie-consent__always-on {
    font-size: var(--font_size_p0);
    color: var(--secondary_color_3);
}

.lesari-cookie-consent__modal-footer {
    padding: 0 20px 20px;
}

.lesari-cookie-consent__modal-footer .lesari-cookie-consent__btn {
    width: 100%;
}

/**
 * Footer entry point (task 005). Moved into the theme's footer bottom row
 * (next to the copyright; Smartwave_Porto layout `<move>` + `_footer.scss`
 * overrides padding/alignment there), still inside `.page-footer`, so it deliberately mirrors the neighbouring
 * `.footer-menu-col a` link exactly (Nunito Sans w300 16/16,
 * `var(--secondary_color)`, see `_footer.scss`) instead of reusing this
 * module's own banner/modal brand styling above — this link belongs to the
 * footer's own visual language, not the consent widget's. No `:hover` rule
 * is defined here either, matching `.footer-menu-col a`, which has none.
 */
.lesari-cookie-consent-footer-link {
    padding: 12px 0;
    text-align: center;
}

.lesari-cookie-consent-footer-link a {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 16px;
    color: var(--secondary_color);
}