/**
 * Worklife Notice – modal komunikatu ostrzegawczego.
 * Kolory dopasowane do palety serwisu worklife.pl
 *
 * @colorPrimary   #F9D500  – żółty akcent
 * @colorSecondary #306068  – ciemny teal
 * @colorThird     #76A8B4  – jasny niebieskozielony
 * @colorBgDark    #053941  – ciemne tło
 * @colorBgLight   #ddecec  – jasny tekst
 */

.wln-notice {
    --wln-bg:      #3a5f66;
    --wln-text:    #ddecec;
    --wln-muted:   rgba(221, 236, 236, .75);
    --wln-line:    rgba(221, 236, 236, .35);
    --wln-accent:  #F9D500;
    --wln-dark:    #053941;
    --wln-gutter:  clamp(1.25rem, 3.5vw, 3rem);

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem, 2vw, 1.5rem);
    font-family: inherit;
    color: var(--wln-text);
}

.wln-notice[hidden] {
    display: none;
}

.wln-notice__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 25, 30, .75);
    animation: wln-fade .25s ease-out;
}

.wln-notice__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 54rem;
    max-height: 100%;
    background: var(--wln-bg);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
    overflow: hidden;
    outline: none;
    animation: wln-in .3s ease-out;
}

/* Pasek: przełącznik języka + zamknięcie */

.wln-notice__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--wln-gutter) 0;
    padding-right: clamp(.75rem, 2vw, 1.5rem);
}

.wln-notice__langs {
    display: inline-flex;
    padding: .1875rem;
    border: 1px solid var(--wln-line);
    border-radius: 2rem;
}

.wln-notice__lang {
    min-width: 2.75rem;
    padding: .3125rem .75rem;
    border: 0;
    border-radius: 2rem;
    background: transparent;
    color: var(--wln-text);
    font: inherit;
    font-size: .8125rem;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.wln-notice__lang:hover {
    color: var(--wln-accent);
}

.wln-notice__lang[aria-selected="true"] {
    background: var(--wln-accent);
    color: var(--wln-dark);
}

.wln-notice__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: color .2s, transform .2s;
}

.wln-notice__close svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
}

.wln-notice__close:hover {
    color: var(--wln-accent);
    transform: rotate(90deg);
}

.wln-notice__lang:focus-visible,
.wln-notice__close:focus-visible,
.wln-notice__ok:focus-visible,
.wln-notice a:focus-visible {
    outline: 2px solid var(--wln-accent);
    outline-offset: 2px;
}

/* Treść */

.wln-notice__body {
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: .375rem;
    padding: .75rem calc(var(--wln-gutter) - .375rem) 1.75rem var(--wln-gutter);
}

/* Złoty scroll – Firefox (w Chrome standardowe właściwości wyłączyłyby ::-webkit-scrollbar) */

@supports not selector(::-webkit-scrollbar) {
    .wln-notice__body {
        scrollbar-width: thin;
        scrollbar-color: var(--wln-accent) rgba(5, 57, 65, .5);
    }
}

/* Złoty scroll – Chrome / Safari / Edge, widoczny stale */

.wln-notice__body::-webkit-scrollbar {
    width: 6px;
}

.wln-notice__body::-webkit-scrollbar-track {
    margin: .5rem 0 1rem;
    border-radius: 3px;
    background: rgba(5, 57, 65, .5);
}

.wln-notice__body::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--wln-accent);
}

/* Gradient sygnalizujący dalszą treść – znika na końcu (klasa z JS) */

.wln-notice__dialog::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    bottom: 0;
    left: 0;
    height: 3.5rem;
    border-radius: 0 0 0 1rem;
    background: linear-gradient(to bottom, rgba(58, 95, 102, 0), var(--wln-bg));
    pointer-events: none;
    transition: opacity .2s;
}

.wln-notice__dialog.is-end::after {
    opacity: 0;
}

.wln-notice__panel {
    container-type: inline-size;
    font-size: .9375rem;
    line-height: 1.5;
}

.wln-notice__panel p,
.wln-notice__panel li {
    text-wrap: pretty;
}

.wln-notice__panel p {
    margin: 0 0 .55em;
}

.wln-notice__eyebrow {
    color: var(--wln-accent);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wln-notice__panel .wln-notice__eyebrow {
    margin-bottom: .375rem;
}

.wln-notice__title {
    margin: 0 0 .875rem;
    color: var(--wln-text);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.15;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Od ~640px szerokości treści nagłówek w jednej linii – rozmiar dopasowany do szerokości (PL ≈ 33.6em) */

@container (min-width: 40rem) {
    .wln-notice__title {
        font-size: min(1.5rem, 100cqi / 34);
        white-space: nowrap;
    }
}

.wln-notice__panel strong {
    font-weight: 500;
    color: #fff;
}

.wln-notice__panel a {
    color: var(--wln-accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .2em;
    word-break: break-word;
}

.wln-notice__panel a:hover {
    text-decoration: none;
}

.wln-notice__panel .wln-notice__lead {
    color: #fff;
    font-weight: 500;
}

.wln-notice__panel .wln-notice__highlight {
    margin: 1rem 0;
    padding: .875rem 1.125rem;
    border-left: 3px solid var(--wln-accent);
    border-radius: 0 .5rem .5rem 0;
    background: rgba(5, 57, 65, .45);
    color: #fff;
    font-weight: 500;
}

.wln-notice__panel .wln-notice__sign {
    margin: 1rem 0 0;
    font-weight: 500;
}

/* Lista numerowana – kółka z numerem i kreską jak w sekcjach serwisu */

.wln-notice__list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: wln;
}

.wln-notice__list li {
    position: relative;
    min-height: 2rem;
    margin-bottom: .375rem;
    padding: .25rem 0 0 4.25rem;
    counter-increment: wln;
}

.wln-notice__list li::before {
    content: counter(wln);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--wln-line);
    border-radius: 50%;
    color: var(--wln-accent);
    font-size: .875rem;
}

.wln-notice__list li::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: 2.625rem;
    width: 1.125rem;
    border-top: 1px solid var(--wln-line);
}

/* Przycisk "Rozumiem" */

.wln-notice__actions {
    margin-top: 1.25rem;
}

.wln-notice__ok {
    padding: .6875rem 1.75rem;
    border: 0;
    border-radius: 2rem;
    background: var(--wln-accent);
    color: var(--wln-dark);
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s;
}

.wln-notice__ok:hover {
    background: #e6c400;
}

html.wln-locked,
html.wln-locked body {
    overflow: hidden;
}

@keyframes wln-fade {
    from { opacity: 0; }
}

@keyframes wln-in {
    from { opacity: 0; transform: translateY(1rem); }
}

@media (max-width: 575px) {
    .wln-notice {
        padding: 0;
    }

    .wln-notice__dialog {
        height: 100%;
        border-radius: 0;
    }

    .wln-notice__bar {
        padding-top: .75rem;
    }

    .wln-notice__dialog::after {
        border-radius: 0;
    }

    .wln-notice__panel {
        font-size: .875rem;
    }

    .wln-notice__list li {
        padding-left: 2.75rem;
    }

    .wln-notice__list li::after {
        display: none;
    }

    .wln-notice__ok {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wln-notice__overlay,
    .wln-notice__dialog {
        animation: none;
    }
}