/* =========================================================
   Transfer24 — Nowy layout
   Świeża warstwa stylów (design tokens + komponenty).
   Ładowana PO main.css. Docelowo zastępuje stary main.css
   sekcja po sekcji (podejście "strangler").
   Pisana ręcznie — bez build-stepu, zgodnie z hostingiem PHP/Apache.
   ========================================================= */

/* ---------------------------------------------------------
   0. Fonty — Lufga (self-hosted, /fonts). Waga sterowana przez
      font-weight, nie przez osobne nazwy rodzin.
   --------------------------------------------------------- */
@font-face {
    font-family: 'Lufga';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/subset-Lufga-Regular.woff2) format('woff2'),
         url(../fonts/subset-Lufga-Regular.woff) format('woff');
}
@font-face {
    font-family: 'Lufga';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/subset-Lufga-Medium.woff2) format('woff2'),
         url(../fonts/subset-Lufga-Medium.woff) format('woff');
}
@font-face {
    font-family: 'Lufga';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/subset-Lufga-SemiBold.woff2) format('woff2'),
         url(../fonts/subset-Lufga-SemiBold.woff) format('woff');
}
@font-face {
    font-family: 'Lufga';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/subset-Lufga-Bold.woff2) format('woff2'),
         url(../fonts/subset-Lufga-Bold.woff) format('woff');
}

/* (Most przejściowy dla starych aliasów fontów USUNIĘTY — main.css używa
   już bezpośrednio 'Lufga' + font-weight, więc aliasy nie są potrzebne.) */

/* ---------------------------------------------------------
   1. Tokeny — jedno źródło prawdy dla kolorów/odstępów/typografii.
      Zamiast magicznych wartości rozsianych po kodzie.
   --------------------------------------------------------- */
:root {
    /* Kolory marki */
    --t24-navy:        #041f74; /* granat — tło przycisków, nagłówki */
    --t24-navy-dark:   #03185b; /* granat hover */
    --t24-blue:        #0085ff; /* niebieski akcent / linki */
    --t24-blue-dark:   #0078e6; /* niebieski hover */
    --t24-text:        #545F82; /* tekst podstawowy / szary */
    --t24-white:       #ffffff;

    /* Typografia — jedna rodzina (Lufga), waga przez --t24-weight-* */
    --t24-font: 'Lufga', Helvetica, Arial, sans-serif;
    --t24-weight-regular:  400;
    --t24-weight-medium:   500;
    --t24-weight-semibold: 600;
    --t24-weight-bold:     700;

    /* Odstępy (skala 4px) */
    --t24-space-1: 4px;
    --t24-space-2: 8px;
    --t24-space-3: 12px;
    --t24-space-4: 16px;
    --t24-space-5: 24px;
    --t24-space-6: 32px;

    /* Promienie */
    --t24-radius:      12px;
    --t24-radius-pill: 40px;

    /* Cienie */
    --t24-shadow-pill: 0px 15px 30px -27px #041F74;
    --t24-shadow-btn:  0 14px 15px -12px rgba(0, 36, 148, 0.30);

    /* Przejścia */
    --t24-transition: all 0.3s ease-out;
}

/* ---------------------------------------------------------
   1b. Layout — szerszy główny kontener (1300px).
       Nadpisuje domyślne 1140px Bootstrapa 4 dla całego nowego layoutu.
   --------------------------------------------------------- */
@media print, screen and (min-width: 1200px) {
    .container {
        max-width: 1300px;
    }
}

/* ---------------------------------------------------------
   2. Header — nawigacja "pill".
      Layout (logo | nav | auth) realizuje natywny navbar Bootstrapa 4
      (.navbar-expand-xl + grid). Poniższe reguły to wyłącznie
      "skórka": kolory, tło pill-ów, promienie, cienie — bez hacków
      layoutowych i bez własnego flexboxa.
   --------------------------------------------------------- */

/* Baza dokumentu — cała strona na Lufdze, bazowa typografia 16px
   (nadpisuje 18px z main.css: body + p to "domyślny" rozmiar tekstu). */
body {
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-regular);
    font-size: 16px;
}
p {
    font-size: 16px;
    color: var(--t24-text);
    line-height: 1.5;
}

/* Przyciski — granatowe tło -> na hover niebieskie */
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--t24-blue);
    border-color: var(--t24-blue);
    color: #fff;
}


/* Logo — wymiary dopasowane w projekcie (nadpisują responsywne
   reguły z main.css dzięki wyższej specyficzności .header ...). */
.header .logo {
    display: inline-block;
    width: 175px;
    max-width: 100%;
    height: auto;
}
.header .logo-inner {
    display: inline-block;
    width: 60px;
    margin-left: 15px;
    margin-top: 0;
}

/* Wygląd linków — wszystkie rozdzielczości (na mobile bez tła pill) */
.header .nav-link {
    color: var(--t24-navy);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-medium);
}
.header .nav-pill .nav-link:hover,
.header .nav-pill .nav-link.active {
    color: var(--t24-blue);
}

.header .auth-pill .register-link {
    color: var(--t24-blue);
}
.header .auth-pill .register-link:hover {
    color: var(--t24-blue-dark);
}
.header .btn-login {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    min-width: 0;
    padding: 10px var(--t24-space-5);
    box-shadow: none;
}
.header .btn-login .btn-login-icon {
    flex: 0 0 auto;
}

/* Pełny układ "pill" tylko od ≥1200px (navbar-expand-xl). Poniżej treść
   nawigacji jest za szeroka na kontener, więc wchodzi hamburger. */
@media print, screen and (min-width: 1200px) {
    /* BS4 nie nadaje collapse'owi flex-grow — bez tego rząd z gridem
       liczy szerokość względem całego navbara i nachodzi na logo.
       Każemy collapse wypełnić przestrzeń po logo. */
    .header .navbar-collapse {
        flex-grow: 1;
    }
    /* Kolumna nawigacji może się kurczyć — nie wypycha rzędu poza kontener */
    .header .navbar .col-xl {
        min-width: 0;
    }

    /* Środkowy pill z nawigacją (wyśrodkowanie robi kolumna: justify-content-center) */
    .header .nav-pill {
        padding: var(--t24-space-3) var(--t24-space-3);
        background-color: var(--t24-white);
        border-radius: var(--t24-radius-pill);
        box-shadow: var(--t24-shadow-pill);
    }
    .header .nav-pill .nav-link {
        padding: var(--t24-space-2) var(--t24-space-3);
        font-size: 16px;
    }

    /* Prawy pill z akcjami logowania */
    .header .auth-pill {
        padding: var(--t24-space-2) var(--t24-space-2) var(--t24-space-2) var(--t24-space-5);
        background-color: var(--t24-white);
        border-radius: var(--t24-radius-pill);
        box-shadow: var(--t24-shadow-pill);
    }
    .header .auth-pill .register-link {
        margin-right: var(--t24-space-4);
        font-size: 16px;
    }
}

/* ---------------------------------------------------------
   2b. Mobilne menu wysuwane (off-canvas z lewej).
       Aktywne poniżej 1200px (tam gdzie navbar-expand-xl pokazuje
       hamburger). Na desktopie ukryte — nawigacja jest inline w headerze.
   --------------------------------------------------------- */
.t24-drawer,
.t24-drawer-backdrop { display: none; }

@media (max-width: 1199.98px) {
    .t24-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background-color: rgba(4, 31, 116, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
    .t24-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

    .t24-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9999;
        width: 86%;
        max-width: 360px;
        padding: 22px 24px 28px;
        background-color: var(--t24-white);
        transform: translateX(-100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .t24-drawer.is-open { transform: translateX(0); }
    body.t24-drawer-lock { overflow: hidden; }

    /* nagłówek karty menu — logo (lewo) + X (prawo) */
    .t24-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .t24-drawer-logo img { width: 150px; height: auto; display: block; }

    /* przycisk zamknięcia (X z dwóch kresek) */
    .t24-drawer-close {
        position: relative;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: 0 -8px 0 0;
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .t24-drawer-close:hover { background-color: rgba(4, 31, 116, 0.06); }
    .t24-drawer-close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 2px;
        background-color: var(--t24-navy);
        border-radius: 2px;
    }
    .t24-drawer-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
    .t24-drawer-close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

    /* linki nawigacji */
    .t24-drawer-nav {
        display: flex;
        flex-direction: column;
        margin-top: 4px;
    }
    .t24-drawer-link {
        padding: 15px 2px;
        color: var(--t24-navy);
        font-size: 19px;
        font-weight: var(--t24-weight-medium);
        border-bottom: 1px solid #eef1f7;
        transition: color 0.2s ease;
    }
    .t24-drawer-link:hover,
    .t24-drawer-link.is-active { color: var(--t24-blue); text-decoration: none; }

    /* akcje logowania */
    .t24-drawer-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }
    .t24-drawer-register,
    .t24-drawer-login {
        display: block;
        padding: 14px 20px;
        text-align: center;
        font-size: 16px;
        font-weight: var(--t24-weight-semibold);
        border-radius: var(--t24-radius-pill);
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .t24-drawer-register {
        border: 1.5px solid var(--t24-navy);
        color: var(--t24-navy);
    }
    .t24-drawer-register:hover { background-color: var(--t24-navy); color: var(--t24-white); text-decoration: none; }
    .t24-drawer-login {
        background-color: var(--t24-navy);
        color: var(--t24-white);
        box-shadow: var(--t24-shadow-btn);
    }
    .t24-drawer-login:hover { background-color: var(--t24-blue); color: var(--t24-white); text-decoration: none; }

    /* stopka karty menu — dane kontaktowe + przyciski (na samym dole) */
    .t24-drawer-foot {
        margin-top: auto;
        padding-top: 24px;
        border-top: 1px solid #eef1f7;
    }
    .t24-drawer-contact {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .t24-drawer-phone {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--t24-navy);
        font-weight: var(--t24-weight-semibold);
        font-size: 16px;
    }
    .t24-drawer-phone img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
    .t24-drawer-phone:hover { color: var(--t24-blue); text-decoration: none; }
    .t24-drawer-mail {
        color: var(--t24-text);
        font-size: 15px;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .t24-drawer-mail:hover { color: var(--t24-blue); }
    .t24-drawer-hours {
        margin: 6px 0 0;
        color: var(--t24-text);
        font-size: 13px;
        line-height: 1.5;
    }
}

/* ---------------------------------------------------------
   3. Tło — mesh-gradient w obszarze hero (góra strony).
      Nakładka na tło .page-wrap: mesh na samej górze bez
      powtarzania (za headerem + hero), pod spodem zostaje
      dotychczasowa tekstura strony (main-bg.png). Kolor bazowy
      (#f0f6fc) dziedziczony z main.css.
   --------------------------------------------------------- */
.page-wrap {
    background-size: cover;
    /* Globus w hero (i inne dekoracje) celowo wychodzą poza prawą krawędź.
       Przycinamy poziomy bleed, by nie powodował scrolla. `clip` (nie `hidden`)
       nie tworzy kontenera przewijania → nie psuje position: sticky w FAQ. */
    overflow-x: clip;
}

/* ---------------------------------------------------------
   4. Hero — strona główna (nowy layout wg Figmy).
      Treść w 7 kolumnach, kula ziemska w tle po prawej.
   --------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: 12px;
    /* Hero wypełnia viewport, więc kolejna sekcja (z badge'em „Pierwszy przelew
       gratis!") nie podgląda od dołu. Odejmujemy wysokość headera (w przepływie
       nad hero), żeby hero kończył się dokładnie na krawędzi ekranu.
       Cap 880px: na wielkich ekranach (4K/30") viewport bywa >2000px i powstawał
       ogromny pusty odstęp pod kalkulatorem — ograniczamy, by treść nie „pływała". */
    min-height: min(calc(100vh - var(--t24-header-h, 96px)), 800px);
}

.hero-globe {
    position: absolute;
    top: -60px;
    left: 50%;
    margin-left: -60px;
    width: 940px;
    max-width: none;
    height: auto;
    z-index: 0;
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 1;
}

/* Statystyki pod kalkulatorem — dwa kafle (ikona + tekst) obok siebie */
.hero-stats {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--t24-space-3);
}
.hero-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background-color: var(--t24-white);
    border-radius: 18px;
    box-shadow: var(--t24-shadow-pill);
}
.hero-stat-ico { flex: 0 0 auto; display: inline-flex; }
.hero-stat-ico svg { display: block; }
.hero-stat-txt {
    margin: 0;
    color: var(--t24-navy);
    font-size: 16px;
    line-height: 1.3;
    font-weight: var(--t24-weight-regular);
}
.hero-stat-txt strong { color: var(--t24-navy); font-weight: var(--t24-weight-medium); }



/* Badge "Posiadamy licencję KNF" */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    padding: 10px 20px;
    margin-bottom: var(--t24-space-5);
    background-color: var(--t24-white);
    border-radius: var(--t24-radius-pill);
    box-shadow: var(--t24-shadow-pill);
    color: var(--t24-navy);
    font-size: 15px;
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-medium);
}
.hero-badge .t24-icon { width: 22px; height: 22px; color: var(--t24-blue); }

/* Nagłówek */
.hero-title {
    margin: 0 0 var(--t24-space-4);
    color: var(--t24-navy);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-bold);
    font-size: 50px;
    line-height: 1.05;
    text-align: left; /* nadpisuje h1{text-align:center} z main.css na mobile */
}
.hero-title-accent { color: var(--t24-blue); }

.hero-lead {
    max-width: 560px;
    margin: 0 0 var(--t24-space-5);
    color: var(--t24-text);
    font-size: 16px;
    line-height: 1.5;
}

/* Pill-e cech (4 kafelki) */
/* Grid: 4 kolumny (desktop), 2 kolumny 2×2 na mobile — nigdy nierówne 3+1 */
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--t24-space-2);
    margin-bottom: var(--t24-space-4);
}
.hero-feature {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--t24-space-2);
    padding: 14px 12px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    border-radius: 16px;
    box-shadow: var(--t24-shadow-pill);}
.hero-feature-ico { color: var(--t24-blue); flex: 0 0 auto; }
.hero-feature-ico .t24-icon { width: 26px; height: 26px; }
.hero-feature-txt {
    color: var(--t24-navy);
    font-size: 12px;
    line-height: 1.25;
}
.hero-feature-txt strong { font-weight: var(--t24-weight-semibold); }

/* --- Kalkulator (card) --- */
.calc-card {
    padding: var(--t24-space-4) var(--t24-space-5);
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
    margin-bottom: var(--t24-space-4);
    backdrop-filter: blur(3px);
}
.calc-fields {
    display: flex;
    align-items: flex-end;
    gap: var(--t24-space-3);
    margin-bottom: var(--t24-space-4);
}
.calc-field { flex: 1 1 0; min-width: 0; }
.calc-label {
    display: block;
    margin-bottom: var(--t24-space-2);
    color: var(--t24-text);
    font-size: 16px;
}
.calc-input {
    display: flex;
    align-items: center;
    height: 68px;
    padding: 0 8px 0 20px;
    background-color: var(--t24-white);
    border: 1.5px solid #e3eaf5;
    border-radius: 99px;
}
.calc-amount {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--t24-navy);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-semibold);
    font-size: 24px;
}
.calc-flag {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    margin-right: var(--t24-space-2);
    border-radius: 50%;
}
.calc-amount + .calc-flag { margin-left: var(--t24-space-2); }
/* Custom dropdown waluty — pill (przycisk) + stylowane menu.
   Natywny <select> ukryty; steruje nim js/t24.js. */
.calc-currency {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.calc-currency-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.calc-currency-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    cursor: pointer;
    padding: 12px 16px;
    border: 0;
    background-color: #eaf3ff;
    border-radius: var(--t24-radius-pill);
    color: var(--t24-navy);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-semibold);
    font-size: 20px;
    line-height: 1.2;
    transition: background-color 0.2s ease-out;
}
.calc-currency-btn:hover { background-color: #dcebff; }
.calc-currency-btn:focus-visible { outline: 2px solid var(--t24-blue); outline-offset: 2px; }
.calc-currency-cur { min-width: 1ch; text-align: center; }
.calc-currency-chev {
    width: 16px;
    height: 16px;
    color: var(--t24-navy);
    transition: transform 0.2s ease-out;
}
.calc-currency.is-open .calc-currency-chev { transform: rotate(180deg); }

/* Menu opcji */
.calc-currency-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 140px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: var(--t24-white);
    border-radius: 14px;
    box-shadow: 0 16px 36px 0 rgba(4, 31, 116, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s;
}
.calc-currency.is-open .calc-currency-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.calc-currency-opt {
    display: flex;
    align-items: center;
    gap: var(--t24-space-3);
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 17px;
    white-space: nowrap;
    transition: background-color 0.15s ease-out;
}
.calc-currency-opt:hover,
.calc-currency-opt.is-selected { background-color: #eaf3ff; }
.calc-currency-opt-sym {
    width: 22px;
    text-align: center;
    font-size: 19px;
}
.calc-pln {
    flex: 0 0 auto;
    color: var(--t24-blue);
    font-weight: var(--t24-weight-semibold);
    font-size: 20px;
    padding-right: 12px;
}
.calc-arrow {
    flex: 0 0 auto;
    align-self: flex-end;
    height: 68px;
    display: flex;
    align-items: center;
    color: var(--t24-navy);
}
.calc-arrow .t24-icon { width: 22px; height: 22px; }

.calc-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--t24-space-3) var(--t24-space-5);
    margin-bottom: var(--t24-space-4);
    color: var(--t24-text);
    font-size: 15px;
}
.calc-meta-item { display: inline-flex; align-items: center; gap: var(--t24-space-2); }
.calc-meta-item .t24-icon { width: 20px; height: 20px; color: var(--t24-text); flex: 0 0 auto; }
.calc-meta-item strong { color: var(--t24-navy); font-weight: var(--t24-weight-semibold); }
.calc-fee { color: #17a34a !important; font-weight: var(--t24-weight-bold) !important; }
/* Stara (przekreślona) opłata — poprzedza nową kwotę przy promocji GBP. */
.calc-fee-old {
    margin-right: var(--t24-space-2);
    color: var(--t24-text);
    font-weight: var(--t24-weight-medium);
    text-decoration-thickness: 1px;
}
.calc-fee-old[hidden] { display: none; }

/* Plakietka „pierwszy przelew za darmo" — pod wierszem meta, przy opłacie. */
.calc-promo {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-1 * var(--t24-space-2));
    margin-bottom: var(--t24-space-3);
}
@media print, screen and (max-width: 677px) {
    .calc-promo {
        justify-content: flex-start;
    }
}
.calc-promo[hidden] { display: none; }
.calc-promo-badge {
    padding: 3px var(--t24-space-3);
    border-radius: var(--t24-radius-pill);
    background-color: #fff2cc;
    color: #8a5a00;
    font-size: 13px;
    font-weight: var(--t24-weight-semibold);
    line-height: 1.4;
}

.calc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--t24-space-2);
    width: 100%;
    padding: 14px 18px;
    margin-bottom: var(--t24-space-4);
    background-color: var(--t24-navy);
    border-radius: 99px;
    color: var(--t24-white);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-semibold);
    font-size: 20px;
    transition: var(--t24-transition);
}
.calc-submit:hover { background-color: var(--t24-blue); color: var(--t24-white); text-decoration: none; }
.calc-submit .t24-icon { width: 24px; height: 24px; }

/* Metody płatności — statyczny rząd rozłożony na szerokość karty.
   (Wcześniej marquee; klient poprosił o stałą, nieruchomą listę.) */
.calc-payments {
display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--t24-space-5);
}
.calc-payments img {
    flex: 0 0 auto;
    height: 26px;
    width: auto;
    object-fit: contain;
}
/* Korekty optyczne: visa.svg ma ciasny bounding box (PNG-i mają wewnętrzny
   margines), a lockup Mastercard jest najwęższy i wizualnie „ginie". */
.calc-payments img[src$="visa.svg"]       { height: 20px; }
.calc-payments img[src$="mastercard.png"] { height: 31px; }
.calc-payments-text {
    flex: 0 0 auto;
    color: var(--t24-navy);
    font-size: 15px;
    font-weight: var(--t24-weight-semibold);
    white-space: nowrap;
}
/* Na wąskich ekranach rząd zawija się do dwóch linii — wtedy „space-between"
   zostawiłby dziurę, więc wyśrodkowujemy i zwężamy odstępy. */
@media print, screen and (max-width: 575px) {
    .calc-payments { justify-content: center; gap: var(--t24-space-3) var(--t24-space-4); }
}

/* Podtytuł pod nagłówkiem licznika w sekcji „registered-users" */
.reg-subtitle {
    margin: 10px 0 0;
    color: var(--t24-text);
    font-size: 20px;
    line-height: 1.4;
}

/* Kula tylko od ≥1200px; niżej treść pełna szerokość */
@media print, screen and (max-width: 1199px) {
    .hero { min-height: auto; padding-bottom: 24px; } 
    .hero-globe { display: none; }
    .hero-title { font-size: 46px; }

}
/* Mobile: pill-e cech w układzie 2×2 */
@media print, screen and (max-width: 767px) {
    .hero-features { grid-template-columns: repeat(2, 1fr); }
    .hero-content { margin-top: 0; }
}
@media print, screen and (max-width: 575px) {
    .hero-title { font-size: 34px; }
    .hero-stats { grid-template-columns: 1fr; }
    .calc-fields { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: var(--t24-space-5); }
    .calc-arrow { align-self: center; height: auto; transform: rotate(90deg); }
    .calc-label { text-align: center; }
    .calc-card { padding: var(--t24-space-4); }
    /* Ostatnie pole („Odbiorca otrzyma") — input nad labelką (inputy bliżej strzałki) */
    .calc-fields > .calc-field:last-of-type { display: flex; flex-direction: column-reverse; }
    .calc-fields > .calc-field:last-of-type .calc-label { margin-bottom: 0; margin-top: var(--t24-space-2); }
    .calc-meta { flex-direction: column; }
}
@media print, screen and (max-width: 417px) {
    .calc-fields > .calc-field:last-of-type { flex-direction: column; }
    .calc-fields > .calc-field:last-of-type .calc-label { margin-top: 0; margin-bottom: var(--t24-space-2); }
}

/* ---------------------------------------------------------
   5. Sekcja "Jak to działa" na homepage — nagłówek + 4 karty + CTA.
      Karty linkują do sekcji /pl/jak_to_dziala/#id (deep-link w t24.js).
   --------------------------------------------------------- */
/* =========================================================
   Animowany gradient mesh w tle (sekcja kart + FAQ).
   Renderowany przez js/gradient.js do #gradient-canvas.
   Kolory czytane są z CSS-zmiennych --gradient-color-1..4.
   ========================================================= */
.gradient-section {
    position: relative;
    isolation: isolate; /* własny kontekst stackingu dla z-index */
    /* Tło przezroczyste — obszar dziedziczy jednolite tło strony (.page-wrap),
       dzięki czemu sekcje powyżej i poniżej zachowują to samo tło i nie ma
       widocznego „prostokąta" gradientu. */
    background-color: transparent;
}
#gradient-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 85%;
    top: 15%;
    filter: blur(10px);
    z-index: 0;
    display: block;
    pointer-events: none;
    /* Paleta gradientu (odczytywana przez js/gradient.js): */
    --gradient-color-1: #E6F2FF;  /* baza – krawędzie */
    --gradient-color-2: #B6A5F0;  /* wewnątrz */
    --gradient-color-3: #5AB0FF;  /* wewnątrz */
    --gradient-color-4: #E6F2FF;  /* wewnątrz */
    /* Miękkie wygaszenie WSZYSTKICH krawędzi do zera (przecięcie maski pionowej
       i poziomej) — gradient rozpływa się w tle strony, bez twardego cięcia.
       Górna/dolna krawędź znikają całkowicie, więc nie ma szwu przy sąsiednich
       sekcjach. */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 25%, #000 55%, transparent 100%),
        linear-gradient(to right,  transparent 0%, #000 0%,  #000 100%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to bottom, transparent 0%, #000 25%, #000 55%, transparent 100%),
        linear-gradient(to right,  transparent 0%, #000 0%,  #000 100%, transparent 100%);
            mask-composite: intersect;
}
/* Treść sekcji ponad canvasem */
.gradient-section > .hiw,
.gradient-section > .faq,
.gradient-section > .info-section-wrap,
.gradient-section > .htd-hero,
.gradient-section > .faqpage-hero,
.gradient-section > .faqpage-list-section,
.gradient-section > .contactpage-hero,
.gradient-section > .contactpage-body,
.gradient-section > .registered-users {
    position: relative;
    z-index: 1;
}

/* Podstrona „Jak to działa": gradient rozciągnięty na całą wysokość strony
   (.gradient-section owija cały <main>, więc canvas wypełnia go w 100%). */
.htd-page #gradient-canvas,
.faqpage #gradient-canvas,
.contactpage #gradient-canvas {
    top: 0;
    height: 100%;
}

.hiw {
    padding: 0 0 64px;
}
/* Layout nagłówka na siatce Bootstrapa: tytuł col-lg-6 | offset-lg-2 | note col-lg-4 */
.hiw-head {
    margin-bottom: 40px;
}
.hiw-head-note {
    color: var(--t24-text);
    padding-top: 8px; /* delikatne wyrównanie note do treści tytułu */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.hiw-head-note p { margin: 0 0 16px; line-height: 1.55; }
.hiw-head-note p:last-child { margin-bottom: 0; }
.hiw-head-note [data-hiw-offer] > :last-child { margin-bottom: 0; }

/* Warunki promocji GBP — pełnoszerokościowy biały pasek pod tytułem, nad kartami.
   Warunki płyną poziomo (flex-wrap), zastrzeżenia drobnym drukiem pod hairline'em. */
.hiw-promo-band {
    padding: 0 0 28px;
    margin-top: -28px;
}
.hiw-promo-band-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 20px;
}
.hiw-promo-band-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.45;
    color: var(--t24-navy);
    margin: 8px 0 0px;
    padding: 28px 32px;
    background-color: var(--t24-white);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
}
.hiw-promo-ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--t24-navy);
}
.hiw-promo-band-fine {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 36px;
}
.hiw-promo-band-fine p { font-size: 13px; line-height: 1.5; margin: 0; }

@media print, screen and (max-width: 767px) {
    .hiw-promo-band { padding: 0 0 22px 0px; }
    .hiw-promo-band-list { grid-template-columns: 1fr; gap: 12px; }
    .hiw-promo-band-fine { grid-template-columns: 1fr; }
}

.hiw-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    padding: 8px 18px;
    margin-bottom: var(--t24-space-5);
    background-color: var(--t24-white);
    border-radius: var(--t24-radius-pill);
    box-shadow: var(--t24-shadow-pill);
    color: var(--t24-navy);
    font-weight: var(--t24-weight-regular);
}
.hiw-badge .t24-icon { width: 20px; height: 20px; color: var(--t24-blue); }

.hiw-title {
    margin: 0;
    color: var(--t24-navy);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-regular);
    font-size: 40px;
    line-height: 1.33;
    letter-spacing: -0.01em;
}
.hiw-title strong { font-weight: var(--t24-weight-medium); }

/* Karty (grid 4 → 2 → 1) */
.hiw-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--t24-space-5);
    margin-bottom: var(--t24-space-6);
}
.hiw-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    min-height: 420px;
    background-color: var(--t24-white);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
    color: var(--t24-navy);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out,
                background-color 0.25s ease-out;
}
.hiw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px 0 rgba(4, 31, 116, 0.16);
    text-decoration: none;
}
/* Hover: karta zostaje biała, a cała zawartość na niebiesko (--t24-blue).
   Ikony SVG mają stroke="currentColor", więc zmiana `color` przestawia też stroke. */
.hiw-card:hover .hiw-card-ico,
.hiw-card:hover .hiw-card-title,
.hiw-card:hover .hiw-card-text,
.hiw-card:hover .hiw-card-link {
    color: var(--t24-blue);
}
.hiw-card-ico {
    color: var(--t24-navy);
    margin-bottom: 28px;
    transition: color 0.25s ease-out;
}
.hiw-card-ico .t24-icon { width: 40px; height: 40px; }
.hiw-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: var(--t24-weight-regular);
    line-height: 1.2;
    color: var(--t24-navy);
    transition: color 0.25s ease-out;
}
.hiw-card-text {
    margin: 0 0 20px;
    margin-top: auto; /* dosuwa tekst + link do dołu karty */
    padding-top: 24px;
    color: var(--t24-text);
    font-size: 15px;
    line-height: 1.55;
    transition: color 0.25s ease-out;
}
.hiw-card-link {
    display: inline-flex;
    font-size: 16px;
    align-items: center;
    gap: var(--t24-space-2);
    color: var(--t24-navy);
    font-weight: var(--t24-weight-regular);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: color 0.25s ease-out;
}
.hiw-card-link .t24-icon { width: 18px; height: 18px; transition: transform 0.2s ease-out; }
.hiw-card:hover .hiw-card-link .t24-icon { transform: translateX(4px); }

/* Dolny CTA */
.hiw-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 12px 12px 40px;
    background-color: var(--t24-white);
    border-radius: 99px;
    box-shadow: var(--t24-shadow-pill);
}
.hiw-cta-text { margin: 0; color: var(--t24-navy); font-size: 16px; }
.hiw-cta-text strong { font-weight: var(--t24-weight-medium); }
.hiw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background-color: var(--t24-navy);
    border-radius: var(--t24-radius-pill);
    color: var(--t24-white);
    font-family: var(--t24-font);
    font-size: 16px;
    transition: background-color 0.2s ease-out;
    white-space: nowrap;
}
.hiw-cta-btn:hover { background-color: var(--t24-blue); color: var(--t24-white); text-decoration: none; }
.hiw-cta-btn .t24-icon { width: 22px; height: 22px; }

@media print, screen and (max-width: 991px) {
    .hiw-cta { border-radius: 24px; padding: 12px 12px 12px 20px; }
    .hiw-cards { grid-template-columns: repeat(2, 1fr); }
    .hiw-title { font-size: 32px; text-align: left; }
    .hiw-card { min-height: 0; }
}
@media print, screen and (max-width: 575px) {
    .hiw { padding: 32px 0 0;}
    .hiw-cards { grid-template-columns: 1fr; }
    .hiw-title { font-size: 28px; }
    .hiw-cta { flex-direction: column; align-items: stretch; padding: 24px; text-align: center; }
    .hiw-cta-btn { justify-content: center; }
}

/* =========================================================
   5b. FAQ — dwie kolumny: intro (lewa) + akordeon (prawa).
       Akordeon działa na natywnym collapse Bootstrapa (data-toggle),
       klasa .collapsed na .faq-q steruje ikoną +/-.
   ========================================================= */
.faq {
    padding: 48px 0 72px;
}
.faq-row {
    align-items: start;
}
.faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #E6F2FF;
    background: linear-gradient(270deg, rgba(230, 242, 255, 0) 15%, rgb(230, 242, 255) 0%);
    filter: blur(50px);
}

.faq-intro {
    position: sticky;
    top: 20px;
}

/* --- lewa kolumna: intro --- */
.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    padding: 8px 18px;
    margin-bottom: var(--t24-space-5);
    background-color: var(--t24-white);
    border-radius: var(--t24-radius-pill);
    box-shadow: var(--t24-shadow-pill);
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
}
.faq-badge .t24-icon { width: 20px; height: 20px; color: var(--t24-blue); }

.faq-title {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 44px;
    line-height: 1.12;
    margin: 0 0 24px;
    text-align: left; 
}
.faq-lead {
    color: var(--t24-text);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 34em;
}
.faq-lead:last-of-type { margin-bottom: 28px; }
.faq-lead a {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.faq-lead a:hover { color: var(--t24-blue); }

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background-color: var(--t24-navy);
    color: var(--t24-white);
    font-weight: var(--t24-weight-semibold);
    border-radius: var(--t24-radius-pill);
    transition: background-color 0.2s ease-out;
}
.faq-contact-btn:hover { background-color: var(--t24-blue); color: var(--t24-white); text-decoration: none; }

/* --- prawa kolumna: akordeon --- */
.faq-item {
    background-color: var(--t24-white);
    border-radius: 16px;
    box-shadow: var(--t24-shadow-pill);
    margin-bottom: 16px;
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
/* Hover: zwinięta karta delikatnie się powiększa (zamiast koloru tekstu
   na niebiesko). Powiększamy tylko karty zwinięte — .faq-q.collapsed.
   Wspólne dla FAQ na homepage i podstrony „Pytania i odpowiedzi". */
.faq-item:has(.faq-q.collapsed):hover {
    transform: scale(1.02);
    box-shadow: 0 12px 30px 0 rgba(4, 31, 116, 0.12);
}
.faq-q-heading { margin: 0; font-weight: inherit; }
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 18px;
    line-height: 1.3;
    cursor: pointer;
}
.faq-q:hover { color: var(--t24-navy); text-decoration: none; }

/* okrągły przełącznik +/- (bez obrazków — czyste CSS) */
.faq-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}
.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 12px; height: 1.6px; }                 /* pozioma kreska — zawsze */
.faq-toggle::after  { width: 1.6px; height: 12px; transition: opacity 0.2s ease-out; } /* pionowa — znika po otwarciu */
/* .faq-q bez .collapsed = pozycja otwarta => „minus" */
.faq-q:not(.collapsed) .faq-toggle::after { opacity: 0; }

/* odpowiedź */
.faq-a {
    padding: 0 28px 26px;
    color: var(--t24-text);
    line-height: 1.6;
}
.faq-a p { margin: 0; }

/* dolny przycisk pełnej szerokości */
.faq-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--t24-space-3);
    width: 100%;
    margin-top: 4px;
    padding: 22px 32px;
    background-color: var(--t24-navy);
    color: var(--t24-white);
    font-weight: var(--t24-weight-semibold);
    border-radius: var(--t24-radius-pill);
    transition: background-color 0.2s ease-out;
}
.faq-more-btn:hover { background-color: var(--t24-blue); color: var(--t24-white); text-decoration: none; }
.faq-more-btn .t24-icon { width: 24px; height: 24px; }

/* responsywnie: kolumny jedna pod drugą */
@media print, screen and (max-width: 991px) {
    .faq-intro { position: static; }
    .faq-main { margin-top: 32px; }
    .faq-title { font-size: 34px; }
}

/* =========================================================
   5b-2. Strona „Pytania i odpowiedzi" — pełna lista FAQ.
       Hero z gradientem + wyszukiwarka + jednokolumnowy akordeon.
       Akordeon korzysta z klas .faq-item/.faq-q/.faq-a z sekcji 5b.
   ========================================================= */
.faqpage-hero {
    padding: 64px 0 44px;
    text-align: center;
}
.faqpage-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.faqpage-hero .faq-badge { margin-bottom: var(--t24-space-4); }
.faqpage-title {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 16px;
}
.faqpage-sub {
    color: var(--t24-text);
    font-size: 18px;
    line-height: 1.6;
    max-width: 42em;
    margin: 0 0 32px;
}

/* wyszukiwarka */
.faqpage-search {
    display: flex;
    gap: var(--t24-space-3);
    width: 100%;
    max-width: 640px;
}
.faqpage-search-field {
    position: relative;
    flex: 1 1 auto;
}
.faqpage-search-field .t24-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: var(--t24-navy);
    pointer-events: none;
}
.faqpage-search-input {
    width: 100%;
    height: 60px;
    padding: 0 22px 0 52px;
    border: 1px solid rgba(4, 31, 116, 0.10);
    border-radius: var(--t24-radius-pill);
    background-color: var(--t24-white);
    box-shadow: var(--t24-shadow-pill);
    color: var(--t24-navy);
    font-family: inherit;
    font-size: 16px;
    transition: border-color 0.2s ease-out;
    -webkit-appearance: none;
    appearance: none;
}
.faqpage-search-input::placeholder { color: var(--t24-text); opacity: 0.75; }
.faqpage-search-input:focus { outline: none; border-color: var(--t24-blue); }
.faqpage-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faqpage-search-btn {
    flex: 0 0 auto;
    height: 60px;
    padding: 0 38px;
    border: none;
    border-radius: var(--t24-radius-pill);
    background-color: var(--t24-navy);
    color: var(--t24-white);
    font-family: inherit;
    font-size: 16px;
    font-weight: var(--t24-weight-semibold);
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}
.faqpage-search-btn:hover { background-color: var(--t24-blue); }

/* lista */
.faqpage-list-section { padding: 8px 0 16px; }
.faqpage-list {
    max-width: 860px;
    margin: 0 auto;
}
.faqpage-list .faq-item { margin-bottom: 14px; }
.faqpage-item.is-hidden { display: none; }

/* Hover „powiększenie zwiniętej karty" jest wspólny — patrz .faq-item w sekcji 5b. */

/* podświetlenie trafień w wyszukiwaniu */
.faqpage-item mark {
    background-color: rgba(0, 133, 255, 0.16);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* brak wyników */
.faqpage-noresults {
    display: none;
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 0 4px;
    text-align: center;
    color: var(--t24-text);
}
.faqpage-noresults.is-visible { display: block; }

/* dolny CTA */
.faqpage-cta {
    max-width: 860px;
    margin: 40px auto 0;
    padding: 36px 32px;
    text-align: center;
    background-color: var(--t24-white);
    border-radius: 20px;
    box-shadow: var(--t24-shadow-pill);
}
.faqpage-cta p {
    margin: 0 0 20px;
    color: var(--t24-navy);
    font-size: 20px;
    font-weight: var(--t24-weight-semibold);
}

@media print, screen and (max-width: 767px) {
    .faq { padding: 48px 0 0; }
    .faqpage-hero { padding: 40px 0 32px; }
    .faqpage-title { font-size: 34px; }
    .faqpage-sub { font-size: 16px; }
    .faqpage-search { flex-direction: column; }
    .faqpage-search-btn { height: 54px; }
}

/* =========================================================
   5b-3. Strona „Kontakt" — hero z gradientem + formularz i dane.
       Formularz zachowuje klasę .contact-form (walidacja + stany
       error/success z main.css); tu nakładamy nowy wygląd pól.
   ========================================================= */
.contactpage-hero {
    padding: 64px 0 36px;
    text-align: center;
}
.contactpage-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contactpage-hero .faq-badge { margin-bottom: var(--t24-space-4); }
.contactpage-title {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 16px;
}
.contactpage-sub {
    color: var(--t24-text);
    font-size: 18px;
    line-height: 1.6;
    max-width: 44em;
    margin: 0;
}

.contactpage-body { padding: 32px 0 0; }
.contactpage-col { margin-bottom: 24px; }

/* biała karta */
.contact-card {
    background-color: var(--t24-white);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
    padding: 40px;
}
.contact-card + .contact-card { margin-top: 24px; }
.contact-card-title {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 16px;
}
.contact-note {
    color: var(--t24-text);
    line-height: 1.6;
    margin: 0 0 24px;
}
.contact-note a {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.contact-note a:hover { color: var(--t24-blue); }

/* pola formularza — nowy wygląd (walidacja z main.css nadal działa) */
.contactpage .contact-form .form-control {
    display: block;
    width: 100%;
    min-height: 56px;
    margin: 0 0 14px;
    padding: 14px 20px;
    background-color: var(--t24-white);
    border: 1px solid rgba(4, 31, 116, 0.12);
    border-radius: 14px;
    color: var(--t24-navy);
    font-family: inherit;
    font-weight: var(--t24-weight-medium);
    font-size: 16px;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.contactpage .contact-form .form-control::placeholder { color: var(--t24-text); opacity: 0.7; }
.contactpage .contact-form .form-control:focus {
    outline: none;
    border-color: var(--t24-blue);
    box-shadow: 0 0 0 3px rgba(0, 133, 255, 0.12);
}
.contactpage .contact-form textarea.form-control { min-height: 130px; resize: vertical; }

/* stany walidacji — wyższa specyficzność niż bazowa reguła .form-control (z main.css),
   bo ta była nadpisywana i czerwona/zielona ramka nie była widoczna */
.contactpage .contact-form .form-control.error-input {
    border-color: #e11900;
}
.contactpage .contact-form .form-control.error-input:focus {
    border-color: #e11900;
    box-shadow: 0 0 0 3px rgba(225, 25, 0, 0.14);
}
.contactpage .contact-form .form-control.success-input {
    border-color: #00a355;
}
.contactpage .contact-form .form-control.success-input:focus {
    border-color: #00a355;
    box-shadow: 0 0 0 3px rgba(0, 163, 85, 0.14);
}
.contact-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.contactpage .check-group { margin: 6px 0 4px; }
.contactpage .check-group label {
    color: var(--t24-text);
    font-family: var(--t24-font);
    font-weight: var(--t24-weight-regular);
    line-height: 1.5;
}
.contactpage .check-group .article-link {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.contactpage .check-group.error-input label { color: #e11900; }
.contactpage .check-group.error-input label:before { border-color: #e11900; }
.contact-required { color: var(--t24-text); font-size: 14px; margin: 6px 0 22px; }
.contact-submit-row { text-align: right; }

/* przycisk „Wyślij" / powrót — granatowy pill */
.contactpage-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;
    border: none;
    background-color: var(--t24-navy);
    color: var(--t24-white);
    font-family: inherit;
    font-size: 16px;
    font-weight: var(--t24-weight-semibold);
    border-radius: var(--t24-radius-pill);
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}
.contactpage-submit:hover { background-color: var(--t24-blue); color: var(--t24-white); text-decoration: none; }

/* prawa kolumna — dane kontaktowe */
.contact-info-ico,
.contactpage-success-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 133, 255, 0.10);
    color: var(--t24-navy);
}
.contact-info-ico {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 14px;
}
/* ikona po lewej od nagłówka, w jednej osi */
.contact-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.contact-card-head .contact-info-ico { flex: none; margin-bottom: 0; }
.contact-card-head .contact-card-title { margin: 0; text-align: left; }
.contact-info-ico .t24-icon { width: 24px; height: 24px; }
.contact-hours { color: var(--t24-text); line-height: 1.6; margin: 0 0 20px; }
.contact-hours strong { color: var(--t24-navy); font-weight: var(--t24-weight-semibold); }
.contact-phones { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.contact-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 22px 9px 10px;
    background-color: var(--t24-white);
    border: 1px solid rgba(4, 31, 116, 0.10);
    border-radius: var(--t24-radius-pill);
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 18px;
    transition: color 0.2s ease-out, transform 0.2s ease-out;
}
.contact-phone:hover { color: var(--t24-blue); text-decoration: none; transform: scale(1.02); }
.contact-phone-flag { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.contact-note-sm { color: var(--t24-text); font-size: 14px; margin: 0 0 20px; }
.contact-info-text { color: var(--t24-text); line-height: 1.6; margin: 0; }
.contact-address { font-style: normal; color: var(--t24-text); }
.contact-address p { margin: 0 0 16px; line-height: 1.6; }
.contact-address p:last-child { margin: 0; }

/* stan „wysłano" */
.contactpage-success {
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 40px;
    text-align: center;
    background-color: var(--t24-white);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
}
.contactpage-success-ico {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: var(--t24-blue);
}
.contactpage-success-ico .t24-icon { width: 40px; height: 40px; }
.contactpage-success .contact-card-title { font-size: 28px; margin-bottom: 12px; }
.contactpage-success .contactpage-sub { margin: 0 auto 28px; }

@media print, screen and (max-width: 767px) {
    .contactpage-hero { padding: 40px 0 28px; }
    .contactpage-title { font-size: 34px; }
    .contactpage-sub { font-size: 16px; }
    .contact-card { padding: 28px 22px; }
    .contact-field-row { grid-template-columns: 1fr; }
    .contact-submit-row { text-align: center; }
    .contactpage-submit { width: 100%; }
}

/* =========================================================
   5b-3b. Stan przed animacją (FOUC guard).
   Klasę .t24-anim-pending dodaje inline script w <head> (header.php),
   zdejmuje js/t24-anim.js zanim GSAP utworzy tweeny — dzięki temu treść
   nie mignie przed ukryciem. Lista musi odpowiadać selektorom z t24-anim.js.
   Bez JS klasa nigdy nie powstaje; przy prefers-reduced-motion też nie.
   ========================================================= */
.t24-anim-pending .hero-badge,
.t24-anim-pending .hero-title,
.t24-anim-pending .hero-lead,
.t24-anim-pending .hero-feature,
.t24-anim-pending .calc-card,
.t24-anim-pending .hero-stat,
.t24-anim-pending .hero-globe,
.t24-anim-pending .hiw .hiw-head > *,
.t24-anim-pending .hiw-card,
.t24-anim-pending .hiw-cta,
.t24-anim-pending .faq .faq-intro > *,
.t24-anim-pending .faq .faq-item,
.t24-anim-pending .faq .faq-more-btn,
.t24-anim-pending .seo-knowledge .hiw-head > *,
.t24-anim-pending .seo-block-media,
.t24-anim-pending .seo-block-text > *,
.t24-anim-pending .registered-users .mb30 > *,
.t24-anim-pending .registered-users .card-wrap,
.t24-anim-pending .htd-hero .container > *,
.t24-anim-pending .faqpage-hero .container > *,
.t24-anim-pending .contactpage-hero .container > *,
.t24-anim-pending .legal-hero .container > *,
.t24-anim-pending .info-section-wrap,
.t24-anim-pending .faqpage-item,
.t24-anim-pending .contactpage-col .contact-card,
.t24-anim-pending .contactpage-success > *,
.t24-anim-pending .legal-page .aditional-box {
    opacity: 0;
}

/* =========================================================
   5b-4. Podstrony prawne — regulamin, polityka prywatności,
   zagrożenia, zasady ładu korporacyjnego. Wspólna klasa .legal-page
   na <main>; treść (article.post, p.small, .list-inner, .ul-list)
   zostaje z main.css, tu tylko oprawa: hero + biała karta + typografia.
   Klasa NIE jest dodawana w widoku ?app (WebView aplikacji).
   ========================================================= */
.legal-page #gradient-canvas { top: 0; height: 100%; }
.gradient-section > .legal-hero,
.gradient-section > .typo-section-wrap {
    position: relative;
    z-index: 1;
}

.legal-hero {
    padding: 64px 0 36px;
    text-align: center;
}
.legal-title {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 48px;
    line-height: 1.1;
    margin: 0;
}

/* Treść w jednej białej karcie (jak .contact-card) */
.legal-page .typo-section-wrap { padding: 0 0 24px; }
.legal-page .typo-section { padding: 0; }
.legal-page .info-aditional .aditional-box {
    padding: 48px;
    background-color: var(--t24-white);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
}

/* Typografia */
.legal-page .post h2 {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 24px;
    line-height: 1.35;
}
.legal-page .post-chapter {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 20px;
}
.legal-page .post p,
.legal-page .post li {
    color: var(--t24-text);
    line-height: 1.7;
}
.legal-page .post a { color: var(--t24-blue); }
.legal-page .post a:hover { color: var(--t24-navy); }

@media print, screen and (max-width: 767px) {
    .legal-hero { padding: 40px 0 24px; }
    .legal-title { font-size: 34px; }
    .legal-page .info-aditional .aditional-box { padding: 26px 20px; }
}

/* =========================================================
   5c. Sekcja SEO „Baza wiedzy" — nagłówek (jak sekcja kart)
       + 4 naprzemienne bloki obraz/tekst.
   ========================================================= */
.seo-knowledge {
    padding: 64px 0 0;
}
.seo-knowledge .hiw-head {
    margin-bottom: 12px;
}
.seo-knowledge .hiw-title {
    font-size: 48px;
}

/* Badge bloków — spójny z .hiw-badge */
.seo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    padding: 8px 18px;
    margin-bottom: var(--t24-space-4);
    background-color: var(--t24-white);
    border-radius: var(--t24-radius-pill);
    box-shadow: var(--t24-shadow-pill);
    color: var(--t24-navy);
    font-weight: var(--t24-weight-regular);
}
.seo-badge .t24-icon { width: 20px; height: 20px; color: var(--t24-blue); }

.seo-block {
    padding: 36px 0;
}
.seo-block-media { text-align: center; }
.seo-block-img {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
    /* Białe tło obrazka (JPG) wtapia się w tło sekcji — bez kadrowania monet. */
    mix-blend-mode: multiply;
}

.seo-block-title {
    font-size: 36px;
    line-height: 1.35;
    font-weight: var(--t24-weight-regular);
    color: var(--t24-text);        /* część „lżejsza" tytułu */
    margin: 0 0 24px;
    text-align: left;
}
.seo-block-title strong {
    color: var(--t24-navy);        /* wyróżniony początek tytułu */
    font-weight: var(--t24-weight-medium);
}
.seo-block-text p {
    color: var(--t24-text);
    line-height: 1.7;
    margin: 0 0 20px;
}
.seo-block-text p:last-child { margin-bottom: 0; }
.seo-block-text .seo-block-lead {
    font-weight: var(--t24-weight-medium);
}

/* Desktop: naprzemienne ułożenie (obraz po prawej) + odstęp tekstu */
@media print, screen and (min-width: 992px) {
    .seo-block--reverse .seo-block-row { flex-direction: row-reverse; }
    .seo-block-text { padding: 0 16px; }
}

/* Mobile: obraz nad tekstem, mniejsze tytuły */
@media print, screen and (max-width: 991px) {
    .seo-knowledge .hiw-title { font-size: 34px; }
    .seo-block { padding: 28px 0; }
    .seo-block-title { font-size: 26px; }
    .seo-block-media { margin-bottom: 24px; }
    .seo-block-img { max-width: 400px; }
    
}

/* =========================================================
   5d. Podstrona „Jak to działa" — hero + karty sekcji.
       Scope: .htd-page (na <main>). Zachowuje istniejące
       .info-section-wrap / .t24-collapse / .btn-main (JS + deep-linki),
       nadpisuje tylko wygląd (białe karty, pill-e, przyciski).
   ========================================================= */
.htd-hero {
    text-align: center;
    padding: 64px 0 44px;
}
.htd-hero-title {
    color: var(--t24-navy);
    font-weight: var(--t24-weight-semibold);
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 14px;
}
.htd-hero-sub {
    color: var(--t24-text);
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto 28px;
    max-width: 620px;
}
.htd-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--t24-space-3);
}
.htd-feature {
    display: flex;
    align-items: center;
    gap: var(--t24-space-3);
    padding: 12px 22px;
    background-color: var(--t24-white);
    border-radius: var(--t24-radius-pill);
    box-shadow: var(--t24-shadow-pill);
    text-align: left;
}
.htd-feature-ico { color: var(--t24-blue); flex: 0 0 auto; display: inline-flex; }
.htd-feature-ico .t24-icon { width: 24px; height: 24px; }
.htd-feature-txt {
    color: var(--t24-text);
    font-size: 13px;
    line-height: 1.3;
}
.htd-feature-txt strong {
    display: block;
    color: var(--t24-navy);
    font-size: 15px;
    font-weight: var(--t24-weight-semibold);
}

/* --- Karty sekcji (część zwinięta = biała karta) --- */
/* Karta = cały .info-section-wrap (header + rozwijane szczegóły w jednej białej
   karcie, jeden cień). Ograniczony do szerokości containera Bootstrapa. */
.htd-page .info-section-wrap {
    background-color: var(--t24-white);
    border-radius: 24px;
    box-shadow: var(--t24-shadow-pill);
    overflow: hidden;
    margin: 0 15px 24px;                 /* mobilnie lekkie wcięcie od krawędzi */
}
@media (min-width: 576px)  { .htd-page .info-section-wrap { max-width: 540px;  margin: 0 auto 24px; } }
@media (min-width: 768px)  { .htd-page .info-section-wrap { max-width: 720px;  } }
@media (min-width: 992px)  { .htd-page .info-section-wrap { max-width: 960px;  } }
@media (min-width: 1200px) { .htd-page .info-section-wrap { max-width: 1300px; } }

/* Wewnętrzne .container nie dublują szerokości — wypełniają kartę,
   ich padding to wewnętrzny margines karty. */
.htd-page .info-section-wrap > .info-section > .container,
.htd-page .info-section-wrap > .info-aditional > .container {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
}
.htd-page .info-section {
    min-height: 0;
    padding: 16px 0;
}
/* .htd-page .info-section > .container {
    padding-top: 28px;
    padding-bottom: 28px;
} */
/* Odstęp pod rozwiniętą treścią wewnątrz karty (mniej niż domyślne 80px) */
.htd-page .info-aditional.t24-collapse.is-open {
    padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .htd-page .info-aditional.t24-collapse.is-open {
        padding-bottom: 0;
    }
}

/* Nagłówki h3 w rozwiniętych kartach — 32px (jak_to_dziala i bezpieczenstwo) */
.htd-page .info-aditional h3 {
    font-size: 24px;
    line-height: 1.25;
}
@media (min-width: 768px) {
    .htd-page .info-aditional h3 {
        font-size: 32px;
        line-height: 1.25;
    }
}
/* Nagłówki h4 w rozwiniętych kartach — 24px (jak_to_dziala i bezpieczenstwo) */
.htd-page .info-aditional h4 {
    font-size: 24px;
    line-height: 1.25;
}
/* Wyjątek: nagłówki-przełączniki akordeonu krajów (Funt/Euro) zostają małe */
.htd-page .info-aditional .accordion h3 {
    font-size: 22px;
    line-height: 1.2;
}

/* Siatka krajów — 4 kolumny (flaga + nazwa w komórce) */
.htd-page .countries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.htd-page .countries-grid > li {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .htd-page .countries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .htd-page .countries-grid { grid-template-columns: 1fr; }
}
/* obrazek w karcie — dopasowany, wyśrodkowany */
.htd-page .info-img-wrap { margin-bottom: 0; }
.htd-page .info-img-wrap img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    /* Białe tło JPG wtapia się w białą kartę — bez widocznego prostokąta. */
    mix-blend-mode: multiply;
}
/* typografia karty */
.htd-page .info-section h2 {
    color: var(--t24-navy);
    font-size: 42px;
    font-weight: var(--t24-weight-medium);
    line-height: 1.2;
    margin-bottom: 0;
}
.htd-page .info-section .post p {
    color: var(--t24-text);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* --- Przycisk „Rozwiń szczegóły" jako granatowy pill --- */
.htd-page .btn-main {
    display: inline-flex;
    align-items: center;
    gap: var(--t24-space-2);
    min-width: 0;
    padding: 13px 28px;
    border-radius: var(--t24-radius-pill);
    background-color: var(--t24-navy);
    border-color: var(--t24-navy);
}
.htd-page .btn-main span { min-width: 0; margin-right: 0; }
.htd-page .btn-main:hover,
.htd-page .btn-main.btn-open,
.htd-page .btn-main:focus-visible {
    background-color: var(--t24-blue);
    border-color: var(--t24-blue);
}

/* CTA „Wyślij przelew" z ikoną samolotu (biała, przez currentColor) */
.t24-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: 8px;
    padding: 16px 24px;
    font-size: 20px;
    font-weight: var(--t24-weight-medium);
}
.t24-send-btn .t24-icon { width: 24px; height: 24px; }
/* Etykieta obok przycisku — granatowa (jak w designie), nie jasnoniebieska */
.buttons-section .text-info { color: var(--t24-navy) !important; margin-top: 8px; }

/* mobile */
@media print, screen and (max-width: 1199px) {
    .htd-hero-title { font-size: 34px; }
    .htd-hero-sub { font-size: 16px; }
    .htd-page .info-section-wrap { border-radius: 20px; padding: 0 24px 0 24px; }
    .htd-page .info-section-wrap > .info-section > .container,
    .htd-page .info-section-wrap > .info-aditional > .container {
        padding-left: 22px;
        padding-right: 22px;
    }
    .htd-page .info-section h2 { font-size: 26px; }
    .htd-page .info-section p { font-size: 16px; }
}
@media print, screen and (max-width: 991px) {
    .htd-page .info-section {
        padding: 32px 0;
    }
}
@media print, screen and (max-width: 767px) {
    .htd-page .info-section-wrap { border-radius: 20px; padding: 0 24px 32px 24px; }
    .info-section-scroll .post {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .htd-page .info-section {
        padding: 32px 0 0;
    }
}
/* Podstrona „Bezpieczeństwo": grafiki SVG oprawione w jasny kafel — tak jak
   ilustracje 3D (JPG) w „Jak to działa" mają wypieczone jasne tło. Dzięki temu
   karty obu podstron wyglądają spójnie. */
.bezp-page .info-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
.bezp-page .info-img-wrap a { display: flex; }        /* .knf-link */
.bezp-page .info-img-wrap img {
    height: auto;
    mix-blend-mode: normal;                           /* SVG ma przezroczyste tło */
}
@media print, screen and (max-width: 767px) {
    .bezp-page .info-img-wrap { min-height: 220px; padding: 28px; }
}

.registered-users .users-box .card-wrap {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: none;
    padding: 0;
    /* obraz telefonu może wystawać ponad górną krawędź karty */
    overflow: visible;
}
/* ręka przy dolnej krawędzi, tekst wyśrodkowany w pionie */
.registered-users .users-box .card-wrap > .row {
    align-items: flex-end;
}
.registered-users .users-box .card-wrap > .row > div:last-child {
    align-self: center;
    padding-top: 48px;
    padding-bottom: 48px;
}
/* ujemny margines u góry → telefon „wystaje" ponad kartę,
   dół pozostaje przy krawędzi dzięki align-items: flex-end na .row */
.registered-users .hand-img-wrap {
    max-width: 460px;
    margin: -56px 0 0;
}
.registered-users .hand-img-wrap img {
    display: block;
    max-width: 100%;
    margin: 0;
    /* PNG ma przezroczyste tło — bez mix-blend, ekran telefonu zostaje biały */
}
/* prawa kolumna — nagłówek + badge */
.registered-users .registered-users-info {
    padding-right: 40px;
}
.registered-users .registered-users-info h2 {
    color: var(--t24-navy);
    font-size: 40px;
    font-weight: var(--t24-weight-regular);
    line-height: 1.33;
    margin: 0;
    text-align: left;
}
.registered-users .registered-users-info h2 span {
    font-weight: var(--t24-weight-medium);
}
.registered-users .registered-users-info .btn-group {
    display: flex;
    gap: 16px;
    align-items: center;
}
/* badge bez bazowego cienia/min-width/ramki z .btn */
.registered-users .btn-load {
    height: 48px;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    flex: none;
}
.registered-users .btn-group .btn-load + .btn-load {
    margin-left: 0;
}

@media print, screen and (max-width: 959px) {
    .registered-users .users-box .card-wrap {
        border-radius: 24px;
        padding: 0 24px;
    }
    .registered-users .users-box .card-wrap > .row > div:last-child {
        align-self: center;
        padding-top: 48px;
        padding-bottom: 24px;
    }
    .registered-users .registered-users-info { padding-right: 0; }
    .registered-users .registered-users-info h2 { font-size: 28px; }
    .registered-users .registered-users-info .btn-group { gap: 8px; justify-content: left; flex-wrap: wrap; }
    .registered-users .btn-load { height: 40px; }
    .registered-users .hand-img-wrap { margin: 0; max-width: 360px; }
}
@media print, screen and (max-width: 767px) {
    .registered-users .users-box .card-wrap > .row > div:last-child { padding-top: 32px; padding-bottom: 12px; }
    .registered-users .registered-users-info .btn-group { justify-content: left; }
    .registered-users .btn-load { height: 34px; }
    .registered-users .registered-users-info h2 { font-size: 28px; }
}
@media print, screen and (max-width: 575px) {
    .registered-users .registered-users-info h2 { font-size: 24px; text-align: center; }
    .registered-users .registered-users-info .btn-group { gap: 8px; justify-content: center; }
}


/* ---------------------------------------------------------
   6. Rozwijanie/zwijanie sekcji (.info-aditional) — PŁYNNIE, bez janku.
      Zamiast animować `height` (drogie: relayout+repaint całej wysokiej
      treści co klatkę), animujemy `grid-template-rows: 0fr → 1fr`.
      Przeglądarka interpoluje ścieżkę gridu, a treść (element gridu)
      jest tylko przycinana overflow:hidden — brak przeliczania jej
      layoutu co klatkę → gładko nawet przy tabelach/flagach.
      Mechanizm sterowany klasą .is-open z js/t24.js (nie Bootstrap collapse).
   --------------------------------------------------------- */
.info-aditional.t24-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease, padding-bottom 0.35s ease;
    padding-bottom: 0; /* nadpisuje 80px z main.css — collapsed = realnie 0 */
}
.info-aditional.t24-collapse.is-open {
    grid-template-rows: 1fr;
    padding-bottom: 80px; /* odstęp pod treścią tylko gdy rozwinięte */
}
.info-aditional.t24-collapse > .container {
    overflow: hidden;
    min-height: 0; /* pozwala elementowi gridu zejść do 0 */
    /* UWAGA: żadnego padding-bottom tutaj — padding nie jest przycinany
       przez overflow i blokowałby kolaps ścieżki gridu do 0. */
}
.htd-page .info-aditional .exlir-check-wrap {
    display: flex;
    align-items: center;
    padding: 32px;
    background: #f3faff;
    flex-direction: column;
    border-radius: 16px;
}
#form-banks {
    min-width: 80%;
}
#form-banks .form-control {
    font-size: 16px;
}
.htd-page .info-aditional .elixir-check {
    background-color: rgb(233, 234, 244);
    padding: 24px;
    border-radius: 12px;
    margin-top: 32px;
}
.htd-page .info-aditional .elixir-check p {
    margin-bottom: 0;
    margin-top: 12px;
}
.htd-page .info-aditional .elixir-check h3 {
    font-size: 20px;
    display: flex;
    gap: 4px;
    font-weight: 500;
    flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
    .info-aditional.t24-collapse { transition: none; }
}

/* ---------------------------------------------------------
   Overlay „Proszę obrócić urządzenie".
   Widoczny WYŁĄCZNIE na telefonach w orientacji poziomej:
   - orientation: landscape  → urządzenie leży poziomo
   - max-height: 500px       → krótszy bok ekranu; telefony w poziomie mają
                               wysokość ≤ ~430px, tablety ≥ 744px (wykluczone)
   - hover:none + pointer:coarse → urządzenia dotykowe (nie desktop)
   --------------------------------------------------------- */
.t24-rotate-overlay { display: none; }

@media only screen and (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .t24-rotate-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 100000;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background-color: rgba(4, 30, 116, 0.95);
        text-align: center;
        backdrop-filter: blur(2px);
    }
    .t24-rotate-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .t24-rotate-ico { animation: t24-rotate-hint 2.4s ease-in-out infinite; }
    .t24-rotate-text {
        margin: 0;
        color: #fff;
        font-family: var(--t24-font);
        font-size: 18px;
        font-weight: var(--t24-weight-semibold);
    }
}

@keyframes t24-rotate-hint {
    0%, 55%, 100% { transform: rotate(90deg); }
    30%          { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .t24-rotate-ico { animation: none; }
}