/* ═══════════════════════════════════════════════════════════════════════════
   POWIADOMIENIE O NEWSLETTERZE (ksp-nlp)
   ═══════════════════════════════════════════════════════════════════════════

   Trzecia karta pływająca na stronie, obok meczowej i urodzinowej. Tamte dwie
   mieszkają w css/ui-enhancements.css i dzielą kontener #notification-system.
   Ta ma własny kontener, bo jeden z wariantów jest paskiem na całą szerokość
   ekranu, a tamten kontener jest pudełkiem 360 px w lewym dolnym rogu.

   Bryła jest jednak celowo TA SAMA (szkło, kreska akcentu u góry, poświata
   w rogu, smuga światła przy wjeździe, ten sam wjazd) - kibic ma widzieć
   rodzeństwo, nie przybłędę z innego systemu.

   TRZY WARIANTY, wybierane w panelu (Aktualności -> Newsletter):
     .ksp-nlp--pasek   - pas przy dolnej krawędzi ekranu
     .ksp-nlp--zaczep  - pigułka, która rozwija się w kartę po kliknięciu
     .ksp-nlp--karta   - karta z kolorowym nagłówkiem w prawym dolnym rogu

   TRZY AKCENTY, też z panelu: [data-akcent="zloto"|"granat"|"murawa"].
   Warianty NIE znają kolorów, a akcenty NIE znają układu - każda para działa.

   Dark mode siedzi tutaj (prefiks [data-theme="dark"]), z tego samego powodu
   co przy tamtych kartach: css/dark-theme.css nie jest wpięty na każdej
   podstronie, a powiadomienie ma wyglądać poprawnie wszędzie.

   Stan kartą sterują klasy: brak = niewidoczna, .is-visible = wjazd,
   .is-leaving = wyjazd, .is-open = rozwinięty zaczep, .is-done = po zapisie.
   ═══════════════════════════════════════════════════════════════════════════ */

#ksp-nlp {
    position: fixed;
    z-index: 1090;
    pointer-events: none;

    /* Kontener rozpięty na całym ekranie, żeby jeden zestaw reguł obsłużył
       pas przy dolnej krawędzi i kartę w rogu. Klikalne są tylko same karty
       (pointer-events wraca niżej) - inaczej przezroczysta warstwa zjadałaby
       kliknięcia całej strony. Ta pułapka już nas kosztowała czas przy
       nakładkach pełnoekranowych. */
    inset: 0;

    /* Paleta szkła - tryb jasny. Zgodna z #notification-system. */
    --nlp-surface: rgba(255, 255, 255, 0.66);
    --nlp-surface-2: rgba(255, 255, 255, 0.30);
    --nlp-border: rgba(255, 255, 255, 0.78);
    --nlp-text: #16233a;
    --nlp-text-soft: #5d6a80;
    --nlp-field: rgba(255, 255, 255, 0.85);
    --nlp-field-line: rgba(18, 30, 52, 0.16);
    --nlp-shadow:
        0 26px 60px -22px rgba(11, 21, 40, 0.50),
        0 8px 22px -12px rgba(11, 21, 40, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --nlp-shine: rgba(255, 255, 255, 0.55);
    --nlp-ok: #1d7a55;
    --nlp-err: #c0392b;
}

[data-theme="dark"] #ksp-nlp {
    --nlp-surface: rgba(23, 32, 50, 0.70);
    --nlp-surface-2: rgba(46, 60, 86, 0.32);
    --nlp-border: rgba(255, 255, 255, 0.14);
    --nlp-text: #e9eff9;
    --nlp-text-soft: #9aa8bf;
    --nlp-field: rgba(255, 255, 255, 0.07);
    --nlp-field-line: rgba(255, 255, 255, 0.16);
    --nlp-shadow:
        0 26px 60px -20px rgba(0, 0, 0, 0.75),
        0 8px 22px -12px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --nlp-shine: rgba(255, 255, 255, 0.16);
    --nlp-ok: #6fe0b4;
    --nlp-err: #ff9b8f;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AKCENTY
   ═══════════════════════════════════════════════════════════════════════════

   Ten sam podział ról co w kartach meczowej i urodzinowej: --nlp-a / -a2
   malują kreskę, poświatę i plakietkę (mają być żywe, w ciemnym motywie
   jaśnieją), a przycisk główny ma własną parę --nlp-btn-*, bo tam liczy się
   kontrast napisu, nie żywość koloru. */

/* Złoto to złoto całej strony: gradient #AE802F -> #FFEFA7 i granatowy napis,
   dokładnie jak .cookie-btn-accept czy przycisk karty urodzinowej. */
#ksp-nlp[data-akcent="zloto"] {
    --nlp-a: #AE802F;
    --nlp-a2: #FFEFA7;
    --nlp-a-text: #8a6218;
    --nlp-a-soft: rgba(174, 128, 47, 0.15);
    --nlp-a-line: rgba(174, 128, 47, 0.30);
    --nlp-a-glow: rgba(174, 128, 47, 0.45);
    --nlp-btn-from: #AE802F;
    --nlp-btn-to: #FFEFA7;
    --nlp-on-a: #1a2332;
}

[data-theme="dark"] #ksp-nlp[data-akcent="zloto"] {
    --nlp-a: #C79A3E;
    --nlp-a-text: #FFE79A;
    --nlp-a-soft: rgba(255, 231, 154, 0.14);
    --nlp-a-line: rgba(255, 231, 154, 0.28);
    --nlp-a-glow: rgba(199, 154, 62, 0.50);
}

#ksp-nlp[data-akcent="granat"] {
    --nlp-a: #16233a;
    --nlp-a2: #3d8bd8;
    --nlp-a-text: #14406f;
    --nlp-a-soft: rgba(26, 76, 139, 0.13);
    --nlp-a-line: rgba(26, 76, 139, 0.26);
    --nlp-a-glow: rgba(22, 35, 58, 0.45);
    --nlp-btn-from: #16233a;
    --nlp-btn-to: #1a4c8b;
    --nlp-on-a: #ffffff;
}

[data-theme="dark"] #ksp-nlp[data-akcent="granat"] {
    --nlp-a: #2f6fb8;
    --nlp-a2: #63a9ec;
    --nlp-a-text: #9fcaf5;
    --nlp-a-soft: rgba(99, 169, 236, 0.16);
    --nlp-a-line: rgba(99, 169, 236, 0.32);
    --nlp-a-glow: rgba(47, 111, 184, 0.55);
    --nlp-btn-from: #1d4e86;
    --nlp-btn-to: #2a6cb5;
}

#ksp-nlp[data-akcent="murawa"] {
    --nlp-a: #1d7a55;
    --nlp-a2: #4fc79a;
    --nlp-a-text: #14603f;
    --nlp-a-soft: rgba(29, 122, 85, 0.14);
    --nlp-a-line: rgba(29, 122, 85, 0.28);
    --nlp-a-glow: rgba(29, 122, 85, 0.45);
    --nlp-btn-from: #1d7a55;
    --nlp-btn-to: #2fa477;
    --nlp-on-a: #ffffff;
}

[data-theme="dark"] #ksp-nlp[data-akcent="murawa"] {
    --nlp-a: #34a377;
    --nlp-a2: #6fe0b4;
    --nlp-a-text: #8ee9c2;
    --nlp-a-soft: rgba(111, 224, 180, 0.15);
    --nlp-a-line: rgba(111, 224, 180, 0.30);
    --nlp-a-glow: rgba(52, 163, 119, 0.52);
    --nlp-btn-from: #1a6e4c;
    --nlp-btn-to: #26946b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SZKLANA BRYŁA (wspólna dla wszystkich wariantów)
   ═══════════════════════════════════════════════════════════════════════════ */

.ksp-nlp {
    position: absolute;
    pointer-events: auto;
    display: none;
    color: var(--nlp-text);
    font-family: inherit;
}

.ksp-nlp.is-visible {
    display: block;
    animation: kspNlpIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ksp-nlp.is-leaving {
    animation: kspNlpOut 0.34s cubic-bezier(0.55, 0, 0.85, 0.35) both;
}

@keyframes kspNlpIn {
    from { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(7px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes kspNlpOut {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to   { opacity: 0; transform: translateY(16px) scale(0.95); filter: blur(5px); }
}

.ksp-nlp__glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(155deg, var(--nlp-surface), var(--nlp-surface-2));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--nlp-border);
    box-shadow: var(--nlp-shadow);
}

/* Przeglądarki bez backdrop-filter dostają nieprzezroczyste tło - inaczej
   tekst leżałby wprost na treści strony. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ksp-nlp__glass { background: rgba(255, 255, 255, 0.97); }
    [data-theme="dark"] .ksp-nlp__glass { background: rgba(20, 27, 42, 0.98); }
}

/* Kreska akcentu u góry */
.ksp-nlp__glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--nlp-a) 22%,
        var(--nlp-a2) 55%,
        transparent 100%);
    z-index: 3;
}

/* Poświata w rogu */
.ksp-nlp__glass::after {
    content: "";
    position: absolute;
    top: -110px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--nlp-a-glow) 0%, transparent 68%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.ksp-nlp__shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, transparent, var(--nlp-shine), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.ksp-nlp.is-visible .ksp-nlp__shine {
    animation: kspNlpShine 1.15s cubic-bezier(0.32, 0, 0.24, 1) 0.34s 1;
}

@keyframes kspNlpShine {
    0%   { left: -60%; opacity: 0; }
    18%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CZĘŚCI WSPÓLNE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Krzyżyk.

   !important przy rozmiarach: js/script.js dokleja klasę .touch-friendly do
   KAŻDEGO <button> i <a> na stronie, a css/fixes.css daje jej min 44x44 px
   plus padding 12 px. Bez tego okrągły krzyżyk rozpycha nagłówek karty.
   Dokładnie ta sama poprawka stoi przy .notification-close-x. */
.ksp-nlp__x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--nlp-field-line);
    color: var(--nlp-text-soft);
    font-size: 0.82rem;
    line-height: 1;
    transition: background 0.18s, color 0.18s, transform 0.18s;
}

[data-theme="dark"] .ksp-nlp__x { background: rgba(255, 255, 255, 0.08); }

.ksp-nlp__x:hover,
.ksp-nlp__x:focus-visible {
    background: var(--nlp-a);
    color: #fff;
    transform: rotate(90deg);
}

.ksp-nlp__x:focus-visible {
    outline: 2px solid var(--nlp-a);
    outline-offset: 2px;
}

.ksp-nlp__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--nlp-a-soft);
    border: 1px solid var(--nlp-a-line);
    color: var(--nlp-a-text);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
}

/* Prefiks ID (1,1,0) bije [data-theme="dark"] :where(h1-h6) z dark-theme.css,
   który ładuje się później i przy remisie specyficzności wygrywałby kolejnością. */
#ksp-nlp .ksp-nlp__title {
    font-size: 1.12rem;
    line-height: 1.3;
    margin: 0.6rem 0 0.35rem;
    font-weight: 700;
    color: var(--nlp-text);
}

.ksp-nlp__text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--nlp-text-soft);
    margin: 0;
}

.ksp-nlp__licznik {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--nlp-text-soft);
}

.ksp-nlp__licznik i { color: var(--nlp-a); }
.ksp-nlp__licznik strong { color: var(--nlp-text); }

/* ── Formularz ─────────────────────────────────────────────────────────── */

.ksp-nlp__form {
    margin-top: 0.95rem;
    position: relative;
    z-index: 1;
}

.ksp-nlp__row {
    display: flex;
    gap: 0.45rem;
}

.ksp-nlp__email {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.68rem 0.85rem;
    border-radius: 11px;
    background: var(--nlp-field);
    border: 1px solid var(--nlp-field-line);
    color: var(--nlp-text);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.ksp-nlp__email::placeholder {
    color: var(--nlp-text-soft);
    opacity: 0.8;
}

.ksp-nlp__email:focus {
    outline: none;
    border-color: var(--nlp-a);
    box-shadow: 0 0 0 3px var(--nlp-a-soft);
}

/* Wysokość i padding jawnie, znowu przez .touch-friendly (min-height 44 px
   rozjeżdżałoby pole i przycisk względem siebie). */
.ksp-nlp__submit {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.68rem 1.1rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: none;
    border-radius: 11px;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--nlp-btn-from), var(--nlp-btn-to));
    color: var(--nlp-on-a);
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}

.ksp-nlp__submit:hover:not(:disabled),
.ksp-nlp__submit:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px var(--nlp-a-glow);
    filter: brightness(1.05);
}

.ksp-nlp__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ksp-nlp__consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.6rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--nlp-text-soft);
    cursor: pointer;
}

.ksp-nlp__consent input {
    margin-top: 0.15rem;
    accent-color: var(--nlp-a);
    flex-shrink: 0;
    width: auto !important;
    min-height: 0 !important;
}

/* Prefiks ID bije [data-theme="dark"] :where(a) z dark-theme.css.
   Zerowanie paddingu: .touch-friendly dokleja się także do linków w zdaniu
   i robi widoczną przerwę przed kropką - ta sama pułapka co w kontakcie. */
#ksp-nlp .ksp-nlp__consent a,
#ksp-nlp .ksp-nlp__note a {
    color: var(--nlp-a-text);
    text-decoration: underline;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline !important;
}

.ksp-nlp__note {
    margin: 0.7rem 0 0;
    font-size: 0.74rem;
    color: var(--nlp-text-soft);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ksp-nlp__note i { color: var(--nlp-a); }

.ksp-nlp__msg {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    min-height: 0;
}

.ksp-nlp__msg:empty { display: none; }
.ksp-nlp__msg--ok  { color: var(--nlp-ok); }
.ksp-nlp__msg--err { color: var(--nlp-err); }

/* ── Stan po zapisie ───────────────────────────────────────────────────── */

.ksp-nlp__ok { display: none; }

.ksp-nlp.is-done .ksp-nlp__form,
.ksp-nlp.is-done .ksp-nlp__note,
.ksp-nlp.is-done .ksp-nlp__text,
.ksp-nlp.is-done .ksp-nlp__licznik,
.ksp-nlp.is-done .ksp-nlp__wydanie,
.ksp-nlp.is-done .ksp-nlp__ikona {
    display: none;
}

.ksp-nlp.is-done .ksp-nlp__ok {
    display: block;
    text-align: center;
    padding: 0.5rem 0 0.2rem;
    animation: kspNlpRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes kspNlpRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ksp-nlp__ok i {
    font-size: 2rem;
    color: var(--nlp-a);
    display: block;
    margin-bottom: 0.5rem;
}

.ksp-nlp__ok strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--nlp-text);
}

.ksp-nlp__ok span {
    font-size: 0.85rem;
    color: var(--nlp-text-soft);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WARIANT: pas przy dolnej krawędzi
   ═══════════════════════════════════════════════════════════════════════════ */

.ksp-nlp--pasek {
    bottom: 0;
    left: 0;
    right: 0;

    /* Pas przechodzi nad całą szerokością strony, więc pod spodem trafia mu się
       wszystko: tabela ligowa, zdjęcia, nagłówki. Przy szkle rozliczonym pod
       kartę 380 px tekst na takim tle przestaje być czytelny - stąd mocniej
       kryjące tło wyłącznie dla tego wariantu. */
    --nlp-surface: rgba(255, 255, 255, 0.93);
    --nlp-surface-2: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] .ksp-nlp--pasek {
    --nlp-surface: rgba(19, 27, 43, 0.94);
    --nlp-surface-2: rgba(30, 41, 62, 0.86);
}

.ksp-nlp--pasek .ksp-nlp__glass {
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding: 1.1rem 3.2rem 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

/* Sam ruch w pionie, bez skalowania: pas jest szeroki na całe okno, więc
   scale(0.94) odsłaniałby przy wjeździe puste marginesy po obu stronach. */
.ksp-nlp--pasek.is-visible { animation-name: kspNlpInPasek; }
.ksp-nlp--pasek.is-leaving { animation-name: kspNlpOutPasek; }

@keyframes kspNlpInPasek {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kspNlpOutPasek {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
}

.ksp-nlp--pasek .ksp-nlp__ikona {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--nlp-btn-from), var(--nlp-btn-to));
    color: var(--nlp-on-a);
}

.ksp-nlp--pasek .ksp-nlp__tresc {
    flex: 1 1 260px;
    min-width: 0;
}

#ksp-nlp .ksp-nlp--pasek .ksp-nlp__title {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

.ksp-nlp--pasek .ksp-nlp__text { font-size: 0.82rem; }
.ksp-nlp--pasek .ksp-nlp__form { margin: 0; flex: 0 1 430px; }

.ksp-nlp--pasek .ksp-nlp__x {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.ksp-nlp--pasek .ksp-nlp__x:hover,
.ksp-nlp--pasek .ksp-nlp__x:focus-visible {
    transform: translateY(-50%) rotate(90deg);
}

.ksp-nlp--pasek .ksp-nlp__ok { flex: 1 1 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   WARIANT: zaczep (pigułka -> karta)
   ═══════════════════════════════════════════════════════════════════════════ */

.ksp-nlp--zaczep {
    bottom: 24px;
    left: 24px;
    width: 340px;
    max-width: calc(100% - 48px);
}

/* Pigułka to <button>, więc padding i rozmiary muszą wygrać z .touch-friendly. */
.ksp-nlp__pigulka {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    text-align: left;
    padding: 0.7rem 1.1rem 0.7rem 0.8rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 999px;
    background: linear-gradient(155deg, var(--nlp-surface), var(--nlp-surface-2));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--nlp-border);
    box-shadow: var(--nlp-shadow);
    color: var(--nlp-text);
    width: max-content;
    max-width: 100%;
    font: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ksp-nlp__pigulka:hover,
.ksp-nlp__pigulka:focus-visible { transform: translateY(-2px); }

.ksp-nlp__pigulka .ksp-nlp__koperta {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--nlp-btn-from), var(--nlp-btn-to));
    color: var(--nlp-on-a);
    font-size: 0.9rem;
    flex-shrink: 0;
    animation: kspNlpPuls 2.8s ease-in-out infinite;
}

@keyframes kspNlpPuls {
    0%, 100% { box-shadow: 0 0 0 0 var(--nlp-a-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}

.ksp-nlp__pigulka b { font-size: 0.88rem; display: block; }
.ksp-nlp__pigulka small { display: block; font-size: 0.74rem; color: var(--nlp-text-soft); }
.ksp-nlp__pigulka .ksp-nlp__strzalka { color: var(--nlp-text-soft); font-size: 0.8rem; margin-left: 0.2rem; }

.ksp-nlp--zaczep .ksp-nlp__karta { display: none; }
.ksp-nlp--zaczep.is-open .ksp-nlp__pigulka { display: none; }

.ksp-nlp--zaczep.is-open .ksp-nlp__karta {
    display: block;
    animation: kspNlpIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ksp-nlp--zaczep .ksp-nlp__glass { padding: 1.25rem 1.3rem 1.35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   WARIANT: karta z kolorowym nagłówkiem
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lewy dolny róg, a nie prawy - mimo że karta jest wysoka i po prawej byłoby
   luźniej. Przy prawej krawędzi, w połowie wysokości ekranu, stoi przycisk
   panelu bocznego (.sidebar-trigger-btn, 50x80 px). Na niższym oknie (laptop
   ~750 px wysokości) karta sięga właśnie tam i zasłania mu dolną część.
   Lewy róg jest wolny, a przy okazji to miejsce, w którym kibic zna już karty
   meczową i urodzinową. */
.ksp-nlp--karta {
    bottom: 24px;
    left: 24px;
    width: 380px;
    max-width: calc(100% - 48px);
}

.ksp-nlp--karta .ksp-nlp__glass { padding: 0; }

.ksp-nlp__naglowek {
    position: relative;
    padding: 1.15rem 1.3rem 1.05rem;
    background: linear-gradient(135deg, var(--nlp-btn-from), var(--nlp-btn-to));
    color: var(--nlp-on-a);
    overflow: hidden;
}

/* Znak wodny koperty. Font Awesome jest tu w wersji 6.0.0 - fa-envelope (f0e0)
   istnieje w niej od zawsze, w przeciwieństwie do ikon dodanych później. */
.ksp-nlp__naglowek::after {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: -22px;
    bottom: -34px;
    font-size: 5.4rem;
    /* Bardziej w rogu i słabiej niż na początku: przy dwuwierszowym tytule
       koperta wchodziła pod tekst i psuła mu kontrast. Ma być tłem, nie ilustracją. */
    opacity: 0.13;
    pointer-events: none;
}

.ksp-nlp__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    font-weight: 700;
}

#ksp-nlp .ksp-nlp__naglowek h3 {
    font-size: 1.22rem;
    margin: 0.2rem 0 0;
    color: var(--nlp-on-a);
    position: relative;
    z-index: 1;
}

.ksp-nlp--karta .ksp-nlp__cialo { padding: 1.1rem 1.3rem 1.3rem; }

.ksp-nlp--karta .ksp-nlp__x {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--nlp-on-a);
}

.ksp-nlp__wydanie {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: var(--nlp-a-soft);
    border: 1px solid var(--nlp-a-line);
    font-size: 0.78rem;
    line-height: 1.4;
}

.ksp-nlp__wydanie i {
    color: var(--nlp-a);
    font-size: 1rem;
    margin-top: 0.1rem;
}

.ksp-nlp--karta .ksp-nlp__form { margin-top: 0.8rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   OGRANICZENIE RUCHU
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .ksp-nlp.is-visible,
    .ksp-nlp.is-leaving,
    .ksp-nlp--zaczep.is-open .ksp-nlp__karta,
    .ksp-nlp.is-done .ksp-nlp__ok {
        animation: none;
    }

    .ksp-nlp.is-visible .ksp-nlp__shine { animation: none; }
    .ksp-nlp__pigulka .ksp-nlp__koperta { animation: none; }
    .ksp-nlp__x:hover { transform: none; }
    .ksp-nlp--pasek .ksp-nlp__x:hover { transform: translateY(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELEFON
   ═══════════════════════════════════════════════════════════════════════════

   Wszystkie warianty schodzą do jednego układu: pełna szerokość przy dolnej
   krawędzi. Karta 380 px w rogu telefonu i tak zajmowałaby cały ekran, a
   marginesy po bokach zostawiają widoczny pasek treści pod spodem. */

@media (max-width: 640px) {
    /* Na telefonie karta zajmuje ponad połowę ekranu, więc pod nią przewija się
       cała strona naraz - nagłówki, zdjęcia, kafelki. Przy szkle dobranym pod
       kartę na komputerze robi się z tego bałagan i tekst przestaje być czytelny.
       Stąd mocniejsze krycie na wszystkich wariantach, nie tylko na pasku. */
    #ksp-nlp {
        --nlp-surface: rgba(255, 255, 255, 0.97);
        --nlp-surface-2: rgba(255, 255, 255, 0.91);
    }

    [data-theme="dark"] #ksp-nlp {
        --nlp-surface: rgba(19, 27, 43, 0.97);
        --nlp-surface-2: rgba(30, 41, 62, 0.92);
    }

    .ksp-nlp--zaczep,
    .ksp-nlp--karta {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }

    /* Bezpiecznik na niskie ekrany (telefon w poziomie, starszy iPhone SE):
       karta ma się zmieścić w oknie, a nie chować przycisk zapisu pod krawędzią. */
    .ksp-nlp--zaczep .ksp-nlp__glass,
    .ksp-nlp--karta .ksp-nlp__glass {
        max-height: 82vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ksp-nlp__wydanie { font-size: 0.75rem; padding: 0.5rem 0.65rem; }

    .ksp-nlp--pasek .ksp-nlp__glass {
        padding: 1rem 1rem 1.1rem;
        gap: 0.85rem;
    }

    .ksp-nlp--pasek .ksp-nlp__x {
        top: 12px;
        right: 12px;
        transform: none;
    }

    .ksp-nlp--pasek .ksp-nlp__x:hover,
    .ksp-nlp--pasek .ksp-nlp__x:focus-visible { transform: rotate(90deg); }

    .ksp-nlp--pasek .ksp-nlp__form { flex-basis: 100%; }
    .ksp-nlp--pasek .ksp-nlp__tresc { padding-right: 2rem; }

    /* Pole i przycisk jeden pod drugim: w jednej linii na wąskim ekranie
       zostaje na adres e-mail jakieś 90 px. */
    .ksp-nlp__row { flex-direction: column; }
    .ksp-nlp__submit { width: 100%; }

    .ksp-nlp__pigulka { width: 100%; }
}