/* =====================================================
   PROGRAM BOS - Main Stylesheet
   Color Scheme: Black / White / Red (#E30613)
   ===================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap');

:root {
    --bos-red: #E30613;
    --bos-red-hover: #c20510;
    --bos-black: #1a1a1a;
    --bos-dark: #222222;
    --bos-white: #ffffff;
    --bos-gray: #f5f5f5;
    --bos-gray-dark: #888;
    /* Tekst pomocniczy. `--bos-gray-dark` (#888) daje na bieli 3,5:1, czyli
       poniżej progu WCAG AA (4,5:1) dla tej wielkości pisma; #5a5a5a daje 6,9:1
       przy tym samym charakterze. Nowa zmienna, a nie podmiana starej: #888
       siedzi w kilkunastu miejscach i każde chce osobnego sprawdzenia. */
    --bos-gray-text: #5a5a5a;
    /* Granat paska bocznego panelu managera. W serwisie klienta oznacza
       wszystko, co widzi tylko manager — żeby było jasne, skąd się wzięło. */
    --bos-manager: #1e293b;
    --bos-manager-soft: #f1f5f9;
    --bos-border: #e0e0e0;
    --font-heading: 'Bebas Neue', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--bos-black);
    background: var(--bos-black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.site-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    background: var(--bos-white);
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* --- Top Bar --- */
.top-bar {
    background: var(--bos-red);
    color: var(--bos-white);
    text-align: center;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-style: italic;
}

/* --- Header --- */
.main-header {
    background: var(--bos-white);
    border-bottom: 2px solid var(--bos-black);
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Hamburger — ukryty na desktopie, pokazywany w wersji mobilnej. */
.nav-toggle {
    display: none;
    background: none;
    border: 2px solid var(--bos-black);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--bos-black);
}

.nav-toggle .nav-icon-close {
    display: none;
}

.nav-toggle.is-open .nav-icon-open {
    display: none;
}

.nav-toggle.is-open .nav-icon-close {
    display: inline;
}

.header-logo img {
    height: 50px;
    width: auto;
}

.header-logo {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--bos-black);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-nav a {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bos-black);
    transition: color 0.2s;
}

.header-nav a:hover {
    color: var(--bos-red);
}

.btn-login {
    border: 2px solid var(--bos-black);
    padding: 8px 20px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

/* Wypełnienie tylko tam, gdzie kursor naprawdę istnieje. Na ekranie dotykowym
   `:hover` zostaje po dotknięciu i pozycja menu zostawała czarna. */
@media (hover: hover) {
    .btn-login:hover {
        background: var(--bos-black);
        color: var(--bos-white);
    }
}

/* Points display in header */
.points-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
}

.points-display .points-history {
    background: var(--bos-black);
    color: var(--bos-white);
    padding: 3px 10px;
    font-size: 10px;
}

.points-display .points-rank {
    display: block;
    background: var(--bos-red);
    color: var(--bos-white);
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
}

.points-display .points-rank:hover {
    filter: brightness(0.92);
}

.points-display .points-current {
    display: flex;
    align-items: center;
    border: 1px solid var(--bos-border);
    padding: 4px 12px;
    gap: 8px;
}

.points-display .points-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    border-right: 1px solid var(--bos-border);
    padding-right: 8px;
}

.points-display .points-value {
    font-size: 20px;
    font-weight: 900;
}

.points-display .points-unit {
    font-size: 11px;
    font-weight: 500;
}

/* --- Kompaktowy pasek statusu (ranga + punkty) w nagłówku --- */
.user-status {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--bos-black);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    line-height: 1;
    order: 5;              /* zawsze jako ostatni element = prawa strona nagłówka */
}

.user-status-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bos-red);
    color: var(--bos-white);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.user-status-points {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--bos-white);
    color: var(--bos-black);
    padding: 8px 14px;
    font-size: 20px;
    font-weight: 900;
}

.user-status-points small {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.user-status:hover {
    filter: brightness(0.95);
}

/* --- Hero Section --- */
.hero {
    /* Kolor tła taki sam jak tło grafiki — dzięki temu kolumna z hasłem
       i kolumna z grafiką czytają się jak jeden baner, bez widocznego szwu. */
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    /* Bez `min-height`. Stało tu 460 px, a grafika ma wysokość z szerokości
       kolumny, więc przy oknie 868 px 252 px grafiki wisiało w 460 px banera
       z szarym pasem nad i pod postaciami (zgłoszenie z 2026-09-25). Dolną
       granicę trzyma teraz sama `.hero-art` i wypełnia ją grafiką. */
}

.hero-content {
    /* 30% mieści hasło z zapasem, a grafika nie odsuwa się od niego na tyle,
       żeby baner rozpadł się na dwa osobne kadry. */
    flex: 0 0 30%;
    padding: 0 24px 0 60px;
}

/* Kolumna z grafiką. Wysokość wynika z szerokości (`aspect-ratio`), a na
   węższym oknie rośnie do `min-height`, żeby grafika nie malała szybciej niż
   baner. Nadwyżkę `cover` ucina wyłącznie z boków, nigdy od góry — nad głowami
   jest tylko 18 px zapasu. Boki kadru to jednolita szarość na 14,6% szerokości
   z każdej strony, a najmocniejsze cięcie (skaner zalogowanego przy 1101 px,
   z paskiem przewijania) to ok. 13%. Większy współczynnik niż 37vw zjadłby
   napis BOS; pilnuje tego HeroImageTest.
   `min-width: 0` jest konieczne: automatyczna minimalna szerokość elementu
   z `aspect-ratio` to `min-height` przeliczone przez proporcję (przy oknie
   868 px ok. 690 px), więc bez tego kolumna wypychałaby się poza baner. */
.hero-art {
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 1440 / 674;
    min-height: min(460px, 37vw);
    background-image: var(--hero-desktop);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Hasło w banerze to jeden `h1` z dwiema liniami (dawniej `h2` + `h3`).
   `font: inherit` zdejmuje z niego domyślny rozmiar i pogrubienie `h1`
   z przeglądarki — mają je tylko linie w środku, jak dawne nagłówki.
   Grubość linii głównej wpisana wprost, bo wcześniej dawał ją `h2`. */
.hero-title {
    font: inherit;
}

.hero-title-main {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--bos-black);
    display: inline-block;
}

.hero-title-sub {
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin: 4px 0 16px;
    opacity: 0.8;
}

/* Poniżej ~1100 px kolumna z hasłem nie mieści już 48-piksletowego
   nagłówka — zanim zdąży nachodzić na grafikę, zmniejszamy krój. */
@media (max-width: 1100px) {
    .hero-content {
        flex-basis: 38%;
        padding: 0 20px 0 28px;
    }

    .hero-title-main {
        font-size: 34px;
    }
}

.hero-image {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60%;
    object-fit: cover;
    object-position: top;
}

/* --- Promo Banner --- */
.promo-banner {
    background: var(--bos-red);
    color: var(--bos-white);
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.promo-banner h3 {
    font-family: var(--font-heading);
    font-size: 32px;
    letter-spacing: 1px;
}

.promo-banner .btn-how {
    background: var(--bos-white);
    color: var(--bos-black);
    padding: 10px 24px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.promo-banner .btn-how:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* --- Rewards Section --- */
/* Tło zgodne z projektem: czerwień u góry przechodząca w czerń u dołu, ze
   zdjęciem zespołu w środku. Cały ten przebieg jest już w `nagrody-bg.png`
   (zmierzone: 243,70,70 na górze → 0,0,0 na dole, co pokrywa się z makietą),
   więc nie nakładamy na niego żadnej dodatkowej warstwy — zasłona tylko
   spłaszczyłaby czerwień.
   `background-color` to czerń, bo przy niskiej sekcji `cover` nie zawsze
   dosięga dolnej krawędzi. */
.rewards-section {
    background-color: var(--bos-black);
    background-image: var(--nagrody-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 40px;
}

/* Nagłówek na czerwonym pasie u góry — biały, jak w projekcie. Czarny tonie
   w sylwetkach postaci, które są w tym miejscu najciemniejsze. */
.rewards-section h2 {
    font-family: var(--font-heading);
    font-size: 48px;
    color: var(--bos-white);
    text-transform: uppercase;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 3px solid var(--bos-white);
    display: inline-block;
}

.rewards-section .subtitle {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 30px;
    color: var(--bos-white);
    letter-spacing: 1px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.category-card {
    background: var(--bos-white);
    /* Wzorzec obramowania w całym serwisie: 1px solid var(--bos-border).
       Ten kafel miał 2px w czerni — jedyny taki na stronie. */
    border: 1px solid var(--bos-border);
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding-bottom: 6px;
}

/* Po najechaniu cały kafel zapala się na czerwono. Zdjęcia produktów mają
   przezroczyste tło, więc kładą się wprost na czerwieni — wiadro gładzi
   wymagało wycięcia białego prostokąta, który miało z własnej fotografii. */
.category-card:hover {
    background: var(--bos-red);
    border-color: var(--bos-red);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.category-card-image {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-card-image img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
    transition: transform 0.3s;
    padding: 14px;
}

.category-card:hover .category-card-image img {
    transform: scale(1.05);
}

/* Nazwa kategorii pod grafiką, nie na niej: położona na zdjęciu ginęła na
   etykiecie wiadra i na wzorze moro, a ratowanie jej białą poświatą wyglądało
   źle. Pod grafiką kontrast jest pewny bez żadnych sztuczek. */
.category-card h4 {
    font-family: var(--font-heading);
    font-size: 22px;
    text-transform: uppercase;
    color: var(--bos-black);
    padding: 10px;
    transition: color 0.3s;
}

/* Na czerwonym kaflu nazwa musi zbieleć — czerwony napis na czerwonym tle
   po prostu by zniknął. */
.category-card:hover h4 {
    color: var(--bos-white);
}

/* --- Registration Section --- */
.register-section {
    display: flex;
    background: var(--bos-white);
}

.register-image {
    width: 45%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: var(--bos-black);
}

.register-image img {
    width: 100%;
    /* `height: 100%` wróciło po dostarczeniu pionowych grafik (decyzja
       2026-09-16). Wcześniej źródła były poziome i małe — 718x633 px przy
       kolumnie wysokiej na ~1000 px — więc `cover` powiększał je 1,58 raza
       i ucinał ~40% szerokości razem z napisem „BOS"; doraźne `height: auto`
       zostawiało pod zdjęciem pas czerni na ~395 px. Teraz pliki mają
       1200x1800 (rejestracja) i 1200x1200 (logowanie), a kompozycja trzyma
       się strefy bezpiecznej, więc `cover` wypełnia kolumnę bez skalowania
       w górę i bez cięcia znaku. Podmiana grafiki o innych proporcjach
       wymaga przeliczenia tej strefy od nowa — patrz decyzja. */
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Strona główna bierze to samo pionowe zdjęcie co /rejestracja, ale wysokość
   kolumny ustala inaczej. Jej „formularz" to jeden przycisk „Dołącz", więc
   zdjęcie 2:3 w przepływie wypchnęłoby sekcję do 1,5 szerokości kolumny
   (~970 px przy 1440). Zdjęcie jest więc wyjęte z przepływu, a kolumnę trzyma
   proporcja dawnej grafiki 718x633: na szerokim oknie sekcja ma wysokość jak
   dotąd, a gdy formularz jest wyższy (węższe okno, drugi dostawca logowania),
   flex rozciąga kolumnę i `cover` odsłania więcej nóg.
   Wcześniej stał tu osobny poziomy plik z `height: auto` i warunkiem „grafika
   wyższa niż formularz". Przy oknie 868 px nie był spełniony i pod zdjęciem
   stał pas czerni na ~100 px (zgłoszenie z 2026-09-25). Kolumna nie bywa
   bardziej płaska niż 718:633, więc widać zawsze co najmniej górne 59% kadru —
   strefa bezpieczna to 56%, pilnuje tego AuthPhotoTest. */
.register-image-full {
    position: relative;
    aspect-ratio: 718 / 633;
}

.register-image-full img {
    position: absolute;
    inset: 0;
}

.register-form-section {
    width: 55%;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.register-form-section h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    font-style: italic;
}

.register-form-section h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 12px 32px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: var(--bos-red);
    color: var(--bos-white);
    border-color: var(--bos-red);
}

.btn-primary:hover {
    background: var(--bos-red-hover);
    border-color: var(--bos-red-hover);
}

.btn-outline {
    background: transparent;
    color: var(--bos-black);
    border-color: var(--bos-black);
}

.btn-outline:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

.btn-white {
    background: var(--bos-white);
    color: var(--bos-black);
    border-color: var(--bos-white);
}

.btn-white:hover {
    background: var(--bos-black);
    color: var(--bos-white);
    border-color: var(--bos-black);
}

/* Przyciski logowania społecznościowego. Wspólny wygląd (biały z czarną
   ramką, jak reszta przycisków drugorzędnych); dopiero po najechaniu
   wypełnia się barwą dostawcy, żeby klient wiedział, gdzie trafi. */
.btn-social {
    background: var(--bos-white);
    color: var(--bos-black);
    border-color: var(--bos-black);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Najechanie NIE zalewa przycisku barwą dostawcy.
   Logotypy są teraz oryginalne i wielobarwne (znak „G" Google ma cztery
   barwy, których wytyczne nie pozwalają zmieniać), a na kolorowym tle
   przestawały być czytelne. Zamiast tego delikatne przyciemnienie tła
   i mocniejsza ramka — tak samo dla obu dostawców, bo to ten sam gest. */
.btn-social:hover {
    background: var(--bos-gray);
    color: var(--bos-black);
    border-color: var(--bos-black);
}

.btn-block {
    width: 100%;
    display: block;
}

/* --- Forms --- */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bos-black);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.form-control:focus {
    border-color: var(--bos-red);
}

.form-control::placeholder {
    color: var(--bos-gray-dark);
}

.form-inline {
    display: flex;
    gap: 8px;
}

.form-inline .prefix {
    padding: 12px 16px;
    border: 2px solid var(--bos-black);
    font-weight: 700;
    background: var(--bos-gray);
    white-space: nowrap;
}

/* --- Footer --- */
.main-footer {
    background: var(--bos-black);
    color: var(--bos-white);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-left {}

.footer-left::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--bos-white);
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-links a {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.footer-links a:hover {
    opacity: 1;
}

.footer-center {
    display: flex;
    align-items: center;
}

.footer-center a {
    background: var(--bos-red);
    color: var(--bos-white);
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.2s;
}

.footer-center a:hover {
    background: var(--bos-red-hover);
}

.footer-right {
    text-align: right;
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.social-links {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.social-links a {
    width: 36px;
    height: 36px;
    border: 2px solid var(--bos-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}

.social-links a:hover {
    background: var(--bos-white);
    color: var(--bos-black);
}

.footer-follow {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    padding: 12px 40px;
    font-size: 13px;
    color: var(--bos-gray-dark);
}

.breadcrumb a {
    color: var(--bos-gray-dark);
}

.breadcrumb a:hover {
    color: var(--bos-black);
}

/* --- Page Title --- */
.page-title {
    font-family: var(--font-heading);
    font-size: 36px;
    text-transform: uppercase;
    padding: 0 40px 20px;
    letter-spacing: 1px;
}

/* --- Reward Grid --- */
.reward-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 40px 60px;
}

.reward-card {
    display: flex;
    flex-direction: column;
    background: var(--bos-white);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    border: 1px solid var(--bos-border);
}

.reward-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.reward-card-image {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px;
    background: var(--bos-white);
}

.reward-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Czerwień jako akcent, nie jako tło tekstu.

   Na pasie #E30613 biel dawała 4,9:1, „za 417 punktów" z opacity .9 — 4,1:1,
   a „Brakuje 408 punktów" szarością #888 — 1,4:1, czyli napis praktycznie
   niewidoczny. Zielone „Możesz odebrać" na czerwieni to te same 1,4:1. Kolor
   zostaje więc na kresce i na plakietce zasięgu, a tekst wraca na biel, gdzie
   czerń ma 17:1. Ten sam wniosek zapisano już kiedyś przy `.cash-card`
   (wybielanie znaczników na hoverze) — tam czerwień jest chwilowa, tutaj była
   stała. */
.reward-card-info {
    background: var(--bos-white);
    color: var(--bos-black);
    border-top: 3px solid var(--bos-red);
    padding: 16px;
    /* Bez `flex: 1` blok kończy się tam, gdzie kończy się tekst, a kafle
       w siatce rozciągają się do najwyższego w rzędzie — pod spodem zostawał
       biały pas innej wysokości w każdym kaflu i cała kolumna wyglądała na
       rozjechaną. */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Bez wersalików i bez Bebas Neue: krój wąski i wersalikowy jest świetny do
   krótkiej liczby w dużym stopniu, a męczy przy dziesięciosłowej nazwie
   narzędzia. Przycięcie do dwóch linii o stałej wysokości ustawia cenę
   w całym rzędzie na jednym poziomie — pełna nazwa jest na karcie nagrody. */
.reward-card-info h4 {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Świadomie BEZ zbiorczej reguły `.reward-card-info p`: selektor klasa+typ ma
   wyższą specyficzność niż same klasy plakietek, więc narzucałby im swój stopień
   pisma i deklaracje w `.reward-card-claimable` czy `.reward-card-out` byłyby
   martwe. Każdy akapit w kaflu ma własną klasę i własny rozmiar. */

/* Cena: to jest ta jedna krótka liczba, do której krój wąski jest stworzony. */
.reward-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.reward-card-price-value {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
}

.reward-card-price-unit {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bos-gray-text);
}

/* Znacznik zasięgu dosunięty do dna kafla — inaczej przy nagrodzie
   z rozmiarówką wypadał w każdym kaflu na innej wysokości. */
.reward-card-status {
    margin-top: auto;
}

/* --- Category Tabs --- */
.category-tabs {
    display: flex;
    gap: 12px;
    padding: 16px 40px;
    flex-wrap: wrap;
}

.category-tab {
    padding: 8px 20px;
    border: 2px solid var(--bos-black);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bos-white);
    color: var(--bos-black);
}

.category-tab.active,
.category-tab:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* --- Druga oś filtrowania: zasięg punktowy --- */
/* Pigułki kategorii odpowiadają na „czego szukam", przełącznik na „czy mnie na
   to stać". To dwa różne pytania, więc nie mogą wyglądać na jeden rząd
   równorzędnych wyborów — stąd kreska i kwadrat zaznaczenia.

   Wcześniej tę rolę pełnił odnośnik wpleciony w zdanie pod tytułem. Przy
   globalnym `a { color: inherit; text-decoration: none }` i braku reguły
   `.catalog-lead a` był typograficznie nie do odróżnienia od prozy obok. */
.filter-divider {
    width: 1px;
    align-self: stretch;
    min-height: 26px;
    background: var(--bos-border);
    margin: 0 4px;
}

.claimable-filter {
    display: flex;
}

.claimable-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* 44 px: przełącznik jest celem dla kciuka, nie tylko dla kursora. */
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--bos-black);
    background: var(--bos-white);
    color: var(--bos-black);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.claimable-toggle:hover {
    background: var(--bos-gray);
}

/* Kwadrat zaznaczenia mówi „to się da włączyć" bez czytania etykiety —
   i odróżnia przełącznik od pigułki kategorii, która kwadratu nie ma. */
.claimable-toggle-box {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.claimable-toggle-count {
    font-weight: 600;
    color: var(--bos-gray-text);
}

.claimable-toggle-count::before {
    content: '· ';
}

.claimable-toggle.is-on,
.claimable-toggle.is-on:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

.claimable-toggle.is-on .claimable-toggle-box {
    background: var(--bos-white);
    color: var(--bos-black);
    border-color: var(--bos-white);
}

.claimable-toggle.is-on .claimable-toggle-count {
    color: var(--bos-white);
}

/* Zero w zasięgu: wygaszone, nie ukryte. Ukryta kontrolka nie uczy, że
   w ogóle istnieje — a to jest funkcja, o której klient ma wiedzieć. */
.claimable-toggle.is-empty,
.claimable-toggle.is-empty:hover {
    border-color: var(--bos-border);
    background: var(--bos-white);
    color: #9a9a9a;
    cursor: default;
}

/* Pasek stanu nad listą. Bez niego jedynym śladem włączonego filtra była
   zmiana treści odnośnika: lista cichła do wycinka, nagłówek dalej brzmiał
   „Nagrody", a zapalona pigułka „Wszystkie" po prostu kłamała. */
.catalog-filter-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 40px 16px;
    padding: 13px 18px;
    background: var(--bos-gray);
    border-left: 4px solid var(--bos-red);
}

.catalog-filter-state p {
    font-size: 14px;
    line-height: 1.5;
}

.catalog-filter-clear {
    flex-shrink: 0;
    min-height: 44px;
    padding: 8px 16px;
    border: 2px solid var(--bos-black);
    background: var(--bos-white);
    color: var(--bos-black);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.catalog-filter-clear:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* --- Reward Detail --- */
.reward-detail {
    display: flex;
    padding: 40px;
    gap: 60px;
    background: var(--bos-gray);
}

.reward-detail-image {
    width: 45%;
    height: 440px;
    background: var(--bos-white);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-detail-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.reward-detail-info {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.size-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.size-option {
    width: 40px;
    height: 40px;
    border: 2px solid var(--bos-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bos-white);
}

.size-option {
    position: relative;
    flex-direction: column;
    line-height: 1;
    /* Etykiety dłuższe niż „XL" (np. pojemności) nie mogą wychodzić z kafelka. */
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    white-space: nowrap;
}

.size-option.active,
.size-option:hover {
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

/* Radio musi zostać w układzie (nie display:none), żeby przeglądarka mogła
   pokazać komunikat walidacji „wybierz rozmiar" i sfokusować pole. */
.size-radio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Rozmiar wyprzedany — widoczny, ale nieklikalny. */
.size-option-out,
.size-option-out:hover {
    background: var(--bos-gray);
    border-color: var(--bos-border);
    color: var(--bos-gray-dark);
    cursor: not-allowed;
    text-decoration: line-through;
}

.size-option-out small {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.stock-warning {
    border: 2px solid var(--bos-red);
    background: rgba(227, 6, 19, 0.06);
    color: var(--bos-black);
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.quantity-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.quantity-input label {
    font-weight: 600;
}

.quantity-input input {
    width: 50px;
    height: 40px;
    border: 2px solid var(--bos-black);
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}

.btn-claim {
    font-family: var(--font-heading);
    font-size: 22px;
    padding: 14px 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.points-needed {
    font-family: var(--font-heading);
    font-size: 18px;
    padding: 10px 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

.free-shipping {
    text-align: center;
    padding: 20px 40px;
    font-size: 14px;
    border-top: 1px solid var(--bos-border);
    margin-top: 20px;
}

.free-shipping strong {
    text-transform: uppercase;
}

/* --- Value Variants (Cash Rewards) --- */
.reward-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.reward-meta-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--bos-gray-dark);
    min-width: 70px;
}

.reward-meta-value {
    font-weight: 600;
    font-size: 14px;
}

.value-selector {
    display: flex;
    gap: 8px;
}

.value-option {
    min-width: 48px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--bos-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bos-white);
    color: var(--bos-black);
    text-decoration: none;
}

.value-option:hover {
    background: var(--bos-black);
    border-color: var(--bos-black);
    color: var(--bos-white);
}

.value-option.active {
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

/* --- Claim Button (Outlined) --- */
.btn-claim-outline {
    display: block;
    width: 100%;
    font-family: var(--font-heading);
    font-size: 24px;
    padding: 16px 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    background: transparent;
    color: var(--bos-black);
    border: 3px solid var(--bos-black);
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 24px;
}

.btn-claim-outline:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* Wariant wypełniony tego samego przycisku — dla kroku, który trzeba zrobić,
   zanim odbiór w ogóle będzie możliwy („Uzupełnij numer telefonu"). Obrys
   przegrywałby tu z wygaszonym „Odbierz" pod spodem: obie kontrolki miałyby
   tę samą wagę, a tylko jedna działa. `flex`, bo strzałka stoi w linii z napisem. */
.btn-claim-solid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bos-black);
    color: var(--bos-white);
    text-decoration: none;
}

.btn-claim-solid:hover {
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

/* --- Points Missing Banner --- */
.points-missing-banner {
    display: block;
    width: 100%;
    background: var(--bos-black);
    color: var(--bos-white);
    font-family: var(--font-heading);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 30px;
    margin-top: 12px;
}

/* --- Reward Description --- */
.reward-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bos-black);
    margin-top: 24px;
    text-align: justify;
}

/* --- Account Page --- */
.account-section {
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.account-section .notice {
    font-size: 14px;
    color: var(--bos-gray-dark);
    margin-bottom: 30px;
}

.account-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-menu-item {
    display: block;
    padding: 16px 32px;
    background: var(--bos-gray);
    /* Bez zaokrągleń — jeden styl obramowania w całym serwisie. Wcześniej
       przyciski były kapsułkami (30px), a karty rang, czeków, katalogu
       i tabele mają ostre krawędzie. */
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.account-menu-item:hover {
    background: var(--bos-black);
    color: var(--bos-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Wejście do katalogu nagród — jedyna akcja w tym menu, reszta to przeglądanie.
   Różni się wyłącznie kolorem: te same odstępy i rozmiar co pozostałe pozycje,
   żeby lista nie rozjechała się na pierwszym elemencie. */
.account-menu-item-primary {
    background: var(--bos-red);
    color: var(--bos-white);
}

/* --- Steps Section --- */
.steps-section {
    padding: 20px 40px 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.steps-page-title {
    font-family: var(--font-heading);
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    color: var(--bos-black);
}

.steps-box {
    border: 1px solid var(--bos-border);
    /* Bez zaokrągleń — jak w projekcie, gdzie czerwone pasma nagłówków biegną
       pełną szerokością, i jak w reszcie serwisu po ujednoliceniu obramowań. */
    margin-bottom: 30px;
    overflow: hidden;
    background: var(--bos-white);
}

.steps-box-header {
    background: var(--bos-red);
    color: var(--bos-white);
    padding: 20px 24px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.steps-box-content {
    padding: 30px 20px 30px;
    background: var(--bos-white);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.step {
    padding: 10px 16px;
}

.step-badge {
    display: inline-block;
    background: var(--bos-black);
    color: var(--bos-white);
    border: none;
    border-radius: 20px;
    padding: 6px 22px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.step h4 {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--bos-black);
    min-height: 40px;
}

.step-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
}

.step-image img {
    /* Piktogramy są kwadratowe (500x500), więc jeden limit daje wszystkim
       jednakową wielkość. `contain` niżej pilnuje proporcji, gdyby kiedyś
       trafił się kadr o innym stosunku stron. */
    max-width: 170px;
    max-height: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --- Level Cards --- */
/* Siatka, a nie `flex` z `min-width`: przy flexie każda karta dopasowywała
   szerokość do własnej treści, więc „SAPER FACHOWIEC" i „MARSZAŁEK FACHU"
   wychodziły różnej wielkości. `1fr` wyrównuje kolumny, a `auto-fit` sam
   dobiera ich liczbę do szerokości okna — liczba rang jest konfigurowalna. */
.levels-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 40px;
}

.level-card {
    /* Wzorzec obramowania w całym serwisie: 1px solid var(--bos-border).
       Ta karta miała 2px, kafle kategorii 2px w czerni, a karty rang
       w panelu klienta 2px w kolorze wpisanym na sztywno. */
    border: 1px solid var(--bos-border);
    /* Bez zaokrągleń — jeden styl obramowania w całym serwisie: karty
       katalogu, karty czeków, tabele i karty rang mają ostre krawędzie. */
    padding: 30px 24px;
    text-align: center;
    transition: all 0.2s;
    /* Kolumna, żeby blok nagrody dało się dosunąć do dołu; karty w jednym
       wierszu siatki i tak mają równą wysokość. */
    display: flex;
    flex-direction: column;
}

.level-card .level-reward-block {
    margin-top: auto;
}

.level-card.active {
    border-color: var(--bos-red);
}

.level-card h4 {
    font-family: var(--font-heading);
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.level-card .level-rank {
    font-size: 12px;
    color: var(--bos-gray-dark);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.level-card .level-points {
    font-size: 24px;
    font-weight: 900;
    color: var(--bos-red);
    margin-bottom: 4px;
}

.level-card .level-label {
    font-size: 11px;
    color: var(--bos-gray-dark);
    text-transform: uppercase;
}

.level-card .level-reward {
    font-size: 13px;
    font-weight: 700;
    color: var(--bos-black);
}

/* --- Cash Rewards (BLIK) --- */
.cash-reward-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 40px 60px;
}

.cash-card {
    background: var(--bos-white);
    border: 1px solid var(--bos-border);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.cash-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

/* `p:not(.reward-card-claimable)`, a nie samo `p`: plakietka zasięgu też jest
   akapitem w nagłówku, a selektor klasa+typ bije jej własne deklaracje z samych
   klas. Bez wyłączenia napis „Możesz odebrać" dostawał biel na białym tle
   plakietki i znikał razem z ikoną, która rysuje się `currentColor`. Ten sam
   wniosek stoi już wyżej przy `.reward-card-info p`. */
.cash-card:hover .cash-card-header h3,
.cash-card:hover .cash-card-header p:not(.reward-card-claimable) {
    color: var(--bos-white);
}

/* Featured (selected) cash card */
.cash-card.featured {
    background: var(--bos-red);
    color: var(--bos-white);
    border-color: var(--bos-red);
}

.cash-card-header {
    padding: 20px 20px 0;
}

.cash-card-header h3 {
    font-family: var(--font-heading);
    font-size: 36px;
    text-transform: uppercase;
    line-height: 1;
}

.cash-card.featured .cash-card-header h3 {
    color: var(--bos-white);
}

.cash-card-header p {
    font-size: 13px;
    margin-top: 2px;
}

.cash-card-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.cash-card-image img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Bez różowej maski na banknotach — banknot na czystym tle karty. */
.cash-card:not(.featured) .cash-card-image::after {
    content: none;
}

/* ODBIERZ button for featured card */
.cash-card-action {
    padding: 12px 20px 20px;
}

.cash-card-action .btn-claim-cash {
    display: block;
    border: 2px solid var(--bos-white);
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.2s;
    color: var(--bos-white);
}

.cash-card.featured:hover .btn-claim-cash {
    background: var(--bos-white);
    color: var(--bos-red);
}

/* --- Pas gotówki w panelu ambasadora (karty jak u klienta + czerwone podświetlenie na hover) --- */
.amb-cash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 0 0;
}

.amb-cash .cash-card:hover {
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

.amb-cash .cash-card:hover .cash-card-header h3 {
    color: var(--bos-white);
}

/* Bez czerwonej maski na banknotach — banknot na czystym tle karty. */
.amb-cash .cash-card .cash-card-image::after {
    display: none;
}

@media (max-width: 720px) {
    .amb-cash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Alert Messages --- */
.alert {
    padding: 12px 20px;
    margin: 16px 40px;
    font-weight: 600;
    font-size: 14px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

/* --- Tables --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--bos-border);
    font-size: 14px;
}

.data-table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    background: var(--bos-gray);
}

.data-table tr:hover {
    background: #fafafa;
}

/* --- Pagination ---
   Markup pochodzi z resources/views/vendor/pagination/bos.blade.php.
   Poprzednia wersja stylu celowała w `.active span`, czyli w strukturę
   Bootstrapa, której ten projekt nigdy nie renderował — reguła była martwa,
   a strona pokazywała nieostylowany widok domyślny Laravela. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pagination a,
.pagination .pagination-current,
.pagination .pagination-step,
.pagination .pagination-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--bos-border);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--bos-black);
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--bos-black);
    color: var(--bos-white);
    border-color: var(--bos-black);
}

.pagination .pagination-current {
    background: var(--bos-red);
    color: var(--bos-white);
    border-color: var(--bos-red);
}

/* Strzałka bez celu zostaje widoczna, ale wygaszona — zniknięcie przycisku
   przesuwałoby cały pasek przy każdej zmianie strony. */
.pagination .is-disabled {
    opacity: 0.35;
    cursor: default;
}

/* Rozmiar ikony wymuszony i tutaj, nie tylko atrybutami SVG: to ten brak
   rozdymał strzałki w widoku domyślnym do kilkuset pikseli. */
.pagination svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.pagination .pagination-gap {
    padding: 0 4px;
    color: var(--bos-gray-dark);
}

/* Licznik nie jest kwadratem nawigacyjnym — własna reguła, inaczej wpadłby
   w ramkę 36x36 razem z numerami stron. */
.pagination .pagination-summary {
    margin-left: 10px;
    font-size: 12px;
    color: var(--bos-gray-dark);
    white-space: nowrap;
}

/* --- Status Badge --- */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
}

.badge-pending {
    background: #fff3cd;
    color: #856404;
}

.badge-processing {
    background: #cce5ff;
    color: #004085;
}

.badge-shipped {
    background: #d4edda;
    color: #155724;
}

.badge-delivered {
    background: #28a745;
    color: white;
}

.badge-cancelled {
    background: #f8d7da;
    color: #721c24;
}

/* --- Responsive --- */
@media (max-width: 1200px) {

    .promo-banner {
        padding: 20px 24px;
    }

    .promo-banner h3 {
        font-size: 24px;
    }

    .rewards-section {
        padding: 40px 24px;
    }

    .register-form-section {
        padding: 40px;
    }
}

/* Menu w belce zwija się w hamburger już na tablecie, nie dopiero na telefonie.
   Zalogowany klient ma w belce jeszcze dzwonek, koszyk i rangę z punktami, a od
   dodania „Punktowanych produktów" (28.09.2026) pięć pozycji menu mieści się obok
   nich w jednej linii dopiero od ~1190 px (klient na podstronie, ze strzałką
   powrotu — najciaśniejszy przypadek). Niżej flex ściskał resztę: saldo ucinało
   się `overflow: hidden` (na 769 px o ~120 px — tak było już przy czterech
   pozycjach), a logo kurczyło się o połowę. 1180 px obejmuje iPada w poziomie. */
@media (max-width: 1180px) {
    .main-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
    }

    /* Pasek statusu wysuwa się na prawo obok hamburgera. */
    .user-status {
        margin-left: auto;
    }

    /* Nawigacja jako rozwijane menu pod nagłówkiem (hamburger). */
    .header-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        font-size: 16px;
    }

    .header-nav.open {
        display: flex;
    }

    .header-nav > a {
        padding: 14px 4px;
        border-top: 1px solid var(--bos-border);
    }

    /* W rozwiniętym menu wszystkie pozycje wyglądają tak samo. Obramowanie
       przycisku miało sens w poziomej belce; w pionowej liście robiło z jednej
       pozycji odrębny element i rozbijało rytm. */
    .header-nav > a.btn-login {
        border-left: none;
        border-right: none;
        border-bottom: none;
        background: none;
        color: var(--bos-black);
        font-weight: 700;
    }

    .header-nav .points-display {
        margin-top: 12px;
    }
}

/* Tuż nad progiem hamburgera menu jest nieco gęstsze, żeby pięć pozycji
   zmieściło się w jednej linii obok salda. Saldo i logo się nie kurczą:
   gdyby treść jednak się nie zmieściła (dłuższa ranga, pięciocyfrowe saldo),
   niech łamią się podpisy menu, a nie znikają punkty. */
@media (min-width: 1181px) {
    .header-left,
    .user-status {
        flex-shrink: 0;
    }
}

@media (min-width: 1181px) and (max-width: 1360px) {
    .main-header {
        padding-left: 24px;
        padding-right: 24px;
    }

    .header-nav {
        gap: 16px;
    }

    .header-nav a {
        font-size: 13px;
        letter-spacing: 0;
    }

    .header-nav a.btn-login {
        padding: 8px 14px;
    }
}

@media (max-width: 768px) {
    .main-header {
        padding: 12px 16px;
    }

    /* Pasek statusu — mniejszy na mobile. */
    .user-status {
        border-radius: 8px;
    }

    .user-status-rank {
        padding: 6px 9px;
        font-size: 11px;
    }

    .user-status-points {
        padding: 6px 10px;
        font-size: 17px;
    }


    /* Hero na telefonie: dwie kolumny nie mają się gdzie zmieścić, więc
       grafika ląduje NAD hasłem. `column-reverse` zamiast zmiany kolejności
       w HTML — w kodzie hasło ma zostać pierwsze, bo to ono jest treścią. */
    .hero {
        display: flex;
        flex-direction: column-reverse;
        /* Wersja desktopowa centruje kolumny w poziomie (`align-items: center`).
           Po obróceniu osi na pionową ta sama reguła przestaje wyśrodkowywać,
           a zaczyna zwężać dzieci do szerokości ich treści — pusty `.hero-art`
           dostawał wtedy szerokość zero i grafiki w ogóle nie było widać. */
        align-items: stretch;
        min-height: 0;
        background-color: var(--bos-white);
    }

    .hero-art {
        flex: none;
        /* Kadr mobilny jest ciaśniejszy (1200×600), żeby na wąskim ekranie
           postacie nie zrobiły się mikroskopijne. */
        aspect-ratio: 2 / 1;
        background-image: var(--hero-mobile);
        background-position: center top;
    }

    .hero-content {
        flex: none;
        padding: 22px 20px 28px;
        background: var(--bos-white);
        /* Na telefonie hasło stoi pod grafiką na pełnej szerokości ekranu,
           więc wyrównanie do lewej zostawiało po prawej pustą połowę.
           Nagłówek i przycisk są inline-block, kreska pod nagłówkiem ma
           szerokość tekstu — samo `text-align` wyśrodkowuje wszystkie trzy. */
        text-align: center;
    }

    .hero-title-main {
        font-size: 28px;
    }

    .hero-title-sub {
        font-size: 14px;
    }

    .hero-image {
        width: 50%;
    }

    .promo-banner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 16px;
    }

    .promo-banner h3 {
        font-size: 20px;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .category-card-image {
        min-height: 150px;
    }

    .reward-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 16px 40px;
    }

    .cash-reward-grid,
    .steps-grid {
        /* minmax(0, 1fr) zamiast 1fr: bez tego dolną granicą kolumny jest
           min-content, czyli szerokość obrazka — kolumna nie może się zwężyć
           i druga z nich wychodzi poza ekran (site-wrapper ma overflow:hidden,
           więc zamiast scrolla treść jest po prostu ucięta). */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Grafiki kroków muszą się skalować do komórki, inaczej stałe 150px
       rozpychają siatkę szerzej niż ekran. */
    .step-image {
        min-height: 0;
    }

    .step-image img {
        max-width: 100%;
    }

    /* Tabele danych: poziomy scroll zamiast rozjeżdżania na wąskim ekranie. */
    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .register-section {
        flex-direction: column;
    }

    .register-image {
        width: 100%;
    }

    .register-form-section {
        width: 100%;
        padding: 30px 20px;
    }

    .reward-detail {
        flex-direction: column;
        padding: 20px;
    }

    .reward-detail-image,
    .reward-detail-info {
        width: 100%;
    }

    .reward-detail-image {
        height: 280px;
    }

    .main-footer {
        flex-direction: column;
        gap: 24px;
        padding: 30px 20px;
    }

    .footer-right {
        text-align: left;
    }

    .footer-logo img {
        height: 40px !important;
    }

    .social-links {
        justify-content: flex-start;
    }

    .levels-section {
        /* Jedna karta w wierszu, na pełną szerokość — bez tego siatka
           zostawiała karty w szerokości ich treści, każdą inną. */
        grid-template-columns: 1fr;
        padding: 24px 16px;
    }

    .rewards-section {
        padding: 30px 16px;
    }

    .page-title {
        padding: 0 16px 16px;
        font-size: 28px;
    }

    .category-tabs {
        padding: 12px 16px;
    }

    /* Na telefonie osie rozdziela pełna szerokość, nie pionowa kreska: pigułki
       i tak się zawijają, więc kreska wypadałaby w przypadkowym miejscu. */
    .filter-divider {
        display: none;
    }

    .claimable-filter {
        width: 100%;
    }

    .claimable-toggle {
        width: 100%;
        min-height: 48px;
    }

    /* Licznik po prawej — tam wzrok i tak szuka liczby. */
    .claimable-toggle-count {
        margin-left: auto;
    }

    .claimable-toggle-count::before {
        content: none;
    }

    .catalog-filter-state {
        margin: 0 16px 14px;
    }

    .breadcrumb {
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .category-card-image {
        min-height: 120px;
    }

    .reward-grid {
        grid-template-columns: 1fr;
    }


    .hero-title-main {
        font-size: 22px;
    }

    .hero-content {
        padding: 20px 16px;
    }

    .promo-banner h3 {
        font-size: 16px;
    }

    /* Krok po kroku: na telefonie 40px paddingu sekcji zjada ~1/4 ekranu —
       zwężamy odstępy, żeby dwie kolumny kroków miały sensowną szerokość.
       Tablety zostają przy szerszych marginesach. */
    .steps-section {
        padding: 16px 16px 30px;
    }

    .steps-box-content {
        padding: 20px 10px;
    }

    .steps-grid {
        gap: 12px;
    }

    .step {
        padding: 10px 4px;
    }

    .steps-page-title {
        font-size: 26px;
    }

    .steps-box-header {
        font-size: 22px;
        padding: 16px 14px;
    }
}

/* --- QR Scanner --- */
.scan-section {
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.scan-section h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 16px;
}

.scan-form {
    display: flex;
    gap: 8px;
}

.scan-form .form-control {
    flex: 1;
}

/* --- Skaner kodów QR (panel klienta) --- */

.btn-scan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
    background: var(--bos-black);
    color: var(--bos-white);
    border-color: var(--bos-black);
}

.btn-scan:hover {
    background: var(--bos-red);
    border-color: var(--bos-red);
}

.btn-scan i {
    font-size: 18px;
}

.qr-hint {
    margin-top: 14px;
    font-size: 13px;
    color: var(--bos-gray-dark);
}

.qr-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.92);
}

.qr-overlay[hidden] {
    display: none;
}

body.qr-scan-open {
    overflow: hidden;
}

.qr-overlay-box {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.qr-overlay-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    color: var(--bos-white);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.qr-video-wrap {
    position: relative;
    width: 100%;
    /* Kwadratowy kadr bez aspect-ratio — działa też w starszych Safari. */
    padding-bottom: 100%;
    overflow: hidden;
    background: #000;
    border: 3px solid var(--bos-red);
}

.qr-video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qr-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 62%;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    pointer-events: none;
}

.qr-status {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--bos-white);
}

.qr-status.is-error {
    color: #ff8a8a;
    /* Instrukcja odblokowania aparatu to kilka zdań — przy wyśrodkowaniu
       i wąskiej kolumnie robi się z tego ściana tekstu. */
    text-align: left;
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
}

.qr-retry {
    display: block;
    margin: 14px auto 0;
    padding: 11px 22px;
    background: var(--bos-white);
    color: var(--bos-black);
    border: none;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.qr-retry:hover {
    background: #e8e8e8;
}

/* Wyprzedana nagroda schodzi do szarości. Na czerwono krzyczała mocniej niż
   nagrody, które klient faktycznie może kupić — a to one mają przyciągać wzrok. */
.reward-card-out {
    margin-top: auto;
    align-self: flex-start;
    border: 1px solid #c9c9c9;
    color: var(--bos-gray-text);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 8px;
}

.reward-card.is-out .reward-card-image {
    opacity: 0.45;
}

.reward-card.is-out .reward-card-info {
    border-top-color: #d6d6d6;
}

.reward-card.is-out .reward-card-info h4,
.reward-card.is-out .reward-card-price-value {
    color: var(--bos-gray-text);
}

.reward-card-sizes {
    font-size: 12px;
    color: var(--bos-gray-text);
}

/* Zasięg punktowy prosto na kaflu. Bez tego cenę w punktach trzeba było
   porównywać z saldem z paska nagłówka, a odpowiedź „stać mnie czy nie"
   padała dopiero na karcie nagrody.

   Plakietka zamiast samego napisu: to jedyny stan, w którym klient może kliknąć
   i coś dostać, więc ma być widać go pierwszego. Ciemniejszy odcień czerwieni
   (ten sam, który jest w palecie jako `--bos-red-hover`) daje z bielą 6,3:1
   zamiast 4,9:1. */
.reward-card-claimable {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bos-red-hover);
    color: var(--bos-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 9px;
}

.reward-card-claimable svg {
    flex-shrink: 0;
}

.reward-card-missing {
    font-size: 12px;
    font-weight: 500;
    color: var(--bos-gray-text);
}

/* Pasek robi z martwej linijki „Brakuje" informację, jak blisko jest klient. */
.reward-card-progress {
    height: 4px;
    margin-top: 6px;
    background: #ececec;
}

.reward-card-progress-fill {
    height: 4px;
    background: var(--bos-red);
}

/* Ten sam znacznik na kaflach nagród pieniężnych. Kafel po najechaniu robi się
   czerwony, więc czerwona plakietka zniknęłaby na nim bez śladu — na hoverze
   przechodzi w czerń marki, a pasek postępu bieleje razem z resztą tekstu.

   Czerń, a nie odwrócenie na biel: biel dawała 6,3:1, czerń daje 17,4:1, a przy
   tym nie zależy od tła kafla — ten sam znacznik zniesie kolejny czerwony stan
   (`.featured`) bez osobnej reguły. */
.cash-card .reward-card-status {
    margin-top: 4px;
}

.cash-card:hover .reward-card-claimable {
    background: var(--bos-black);
    color: var(--bos-white);
}

.cash-card:hover .reward-card-missing {
    color: var(--bos-white);
}

.cash-card:hover .reward-card-progress {
    background: rgba(255, 255, 255, 0.35);
}

.cash-card:hover .reward-card-progress-fill {
    background: var(--bos-white);
}

/* --- Dzwonek powiadomień (panel klienta i ambasadora) --- */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #111;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex: 0 0 auto;
}
.notif-bell:hover { background: #f2f2f2; }
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bos-red, #e11d2a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    /* Obwódka w kolorze tła nagłówka odcina plakietkę od ikony,
       gdy licznik nachodzi na dzwonek. */
    box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 720px) {
    .notif-bell { width: 36px; height: 36px; font-size: 16px; }
}

/* --- Strzałka powrotu w górnej belce --- */
.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.header-back {
    /* 44x44 to minimalny cel dotykowy wg wytycznych Apple i Material —
       sama ikona ma 18px, resztę stanowi obszar kliknięcia wokół niej. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 2px solid var(--bos-black);
    border-radius: 50%;
    background: var(--bos-white);
    color: var(--bos-black);
    font-size: 18px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}

.header-back:hover,
.header-back:focus-visible {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* Wyraźna reakcja na dotyk — na telefonie nie ma stanu :hover, więc bez tego
   użytkownik nie wie, czy trafił w przycisk. */
.header-back:active {
    transform: scale(0.92);
}

.header-back:focus-visible {
    outline: 3px solid var(--bos-red);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .header-left { gap: 10px; }
    /* Logo ustępuje miejsca, ale przycisk powrotu nigdy się nie kurczy —
       to on jest tu najczęściej używanym elementem nawigacji. */
    .header-logo img { height: 38px; }
    .header-back { width: 44px; height: 44px; font-size: 17px; }
}

/* --- Zgłoszenia (reklamacje i pytania klientów) --- */
.tickets-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.tickets-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.tickets-head h1 {
    font-family: var(--font-heading);
    font-size: 32px;
    text-transform: uppercase;
    margin: 0;
}

.tickets-lead,
.tickets-empty {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bos-gray-dark);
    margin-bottom: 24px;
}

.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 2px solid var(--bos-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.ticket-row:hover {
    border-color: var(--bos-red);
}

.ticket-row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ticket-ref {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--bos-red);
}

.ticket-meta {
    font-size: 12px;
    color: var(--bos-gray-dark);
}

/* Status jako plakietka. Kolor niesie znaczenie, więc obok niego zawsze stoi
   etykieta słowna — sam kolor nie wystarcza osobom nierozróżniającym barw. */
.ticket-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.ticket-status-new { background: var(--bos-red); color: #fff; }
.ticket-status-open { background: #1f6feb; color: #fff; }
.ticket-status-waiting_client { background: #f0ad4e; color: #1a1a1a; }
.ticket-status-closed { background: #e4e4e4; color: #555; }

/* --- Wątek --- */
.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0;
}

.ticket-bubble {
    border: 2px solid var(--bos-border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bos-white);
}

/* Wypowiedź obsługi wyróżniona lewą krawędzią: w długim wątku reklamacyjnym
   samo wcięcie nie wystarcza, żeby na pierwszy rzut oka odróżnić strony. */
.ticket-bubble.is-staff {
    border-left: 4px solid var(--bos-red);
    background: #fafafa;
}

.ticket-bubble.is-internal {
    border-left-color: #f0ad4e;
    background: #fff9ec;
}

.ticket-bubble-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--bos-gray-dark);
    margin-bottom: 8px;
}

.ticket-bubble-head strong {
    color: var(--bos-black);
    font-size: 13px;
}

.tag-internal {
    background: #f0ad4e;
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
}

.ticket-bubble-body {
    font-size: 14px;
    line-height: 1.7;
    /* Klient wkleja numery zamówień i kody — nie mogą rozpychać strony. */
    overflow-wrap: anywhere;
}

.ticket-file {
    display: inline-block;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bos-red);
    text-decoration: none;
}

/* --- Formularz --- */
/* Samodzielne zamknięcie sprawy przez klienta. Blok oddzielony ramką, żeby
   nie wyglądał na część formularza odpowiedzi — to osobna decyzja. */
.ticket-close {
    margin-top: 20px;
    padding: 14px 16px;
    border: 2px solid var(--bos-border);
    border-radius: 6px;
    background: #fafafa;
}

.ticket-close-text {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bos-muted, #555);
}

.ticket-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}

.ticket-form label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.ticket-form input[type="text"],
.ticket-form select,
.ticket-form textarea,
.ticket-form input[type="date"] {
    width: 100%;
    padding: 11px 12px;
    border: 2px solid var(--bos-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}

.ticket-form textarea {
    resize: vertical;
}

.ticket-form button {
    align-self: flex-start;
    margin-top: 14px;
}

.ticket-form-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.ticket-form-options label {
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
}

.ticket-hint {
    font-size: 12px;
    color: var(--bos-gray-dark);
    line-height: 1.6;
}

.ticket-back {
    display: inline-block;
    margin-top: 24px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bos-red);
    text-decoration: none;
}

/* --- Skrzynka w panelu managera --- */
.ticket-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ticket-tabs a {
    padding: 9px 16px;
    border: 2px solid var(--bos-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

.ticket-tabs a.active {
    border-color: var(--bos-red);
    color: var(--bos-red);
}

.ticket-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ticket-filters input,
.ticket-filters select {
    padding: 10px 12px;
    border: 2px solid var(--bos-border);
    border-radius: 6px;
    font-size: 13px;
}

.ticket-filters input {
    flex: 1 1 280px;
}

.row-overdue { background: #fff5f5; }
.txt-danger { color: var(--bos-red); font-weight: 800; }

/* Kropka „czeka na nas" — obok numeru, który sam jest odnośnikiem. */
.dot-new {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--bos-red);
}

.mgr-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.mgr-ticket-side {
    border: 2px solid var(--bos-border);
    border-radius: 8px;
    padding: 18px;
}

.mgr-ticket-side h4 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 10px;
}

.mgr-ticket-side form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
}

.mgr-ticket-side label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 8px;
}

.mgr-ticket-side select,
.mgr-ticket-side input[type="date"] {
    width: 100%;
    padding: 9px 10px;
    border: 2px solid var(--bos-border);
    border-radius: 6px;
    font-size: 13px;
}

.mgr-ticket-side small {
    font-size: 11px;
    color: var(--bos-gray-dark);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .mgr-ticket {
        grid-template-columns: 1fr;
    }
}

/* Pole na kod z wiadomości — cyfry rozstrzelone i wyśrodkowane, żeby dało się
   je porównać z mailem znak po znaku. */
.code-input {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 10px;
    /* Odstęp między znakami przesuwa tekst w prawo — kompensujemy wcięciem,
       inaczej ciąg nie stoi na środku pola. */
    text-indent: 10px;
}

/* --- Powrót do nagrody z danych kontaktowych ---

   Klient wchodzi na dane kontaktowe także ze strony nagrody pieniężnej, gdy
   na koncie brakuje numeru telefonu. Pasek mówi, po co tu jest i dokąd wróci; bez
   tego zapis zostawiał go na formularzu, a nagrodę trzeba było znaleźć od nowa. */
.profile-return {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 500px;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: var(--bos-black);
    color: var(--bos-white);
}

.profile-return-text {
    flex: 1 1 260px;
    font-size: 14px;
    line-height: 1.4;
}

.profile-return-back {
    flex-shrink: 0;
    color: var(--bos-white);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}

/* Pole, po które klient tu przyszedł. Ramka zamiast samego `autofocus`:
   ognisko znika po pierwszym kliknięciu gdziekolwiek, a pole ma zostać
   widoczne także wtedy, gdy formularz ma sześć identycznych prostokątów. */
.form-group-wanted {
    padding: 14px 16px;
    border: 2px solid var(--bos-red);
    background: #fdf2f3;
}

.form-group-hint {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bos-black);
}

/* --- Zmiana hasła w profilu --- */
.password-box {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 2px solid var(--bos-border);
    max-width: 520px;
}

.password-box h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.password-error {
    color: var(--bos-red);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.password-hint {
    font-size: 12px;
    color: var(--bos-gray-dark);
    line-height: 1.7;
    margin-top: 14px;
}

.password-hint a {
    color: var(--bos-red);
    font-weight: 700;
    text-decoration: underline;
}

/* Podpowiedź o folderze spam na ekranie z kodem. */
.spam-hint {
    max-width: 400px;
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #fff8e6;
    border-left: 3px solid #f0ad4e;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.7;
    color: #5a4a1f;
}

/* --- Skaner w banerze (widok zalogowanego uczestnika) --- */
/* Kolumna z narzędziem potrzebuje więcej miejsca niż kolumna z hasłem:
   mieści przycisk, pole na kod i podpowiedź. */
.hero-content-scan {
    flex-basis: 38%;
}

/* Na szerokim ekranie 38% to więcej, niż ramka skanera potrzebuje: zostawało
   ok. 120 px pustego pasa, a grafika — której wysokość wynika z szerokości
   kolumny — po zalogowaniu wyraźnie malała względem widoku gościa. Kolumna
   bierze więc tyle co u gościa (30%), ale nie mniej niż ramka z marginesami
   (360 + 60 + 24 px, `border-box`). Poniżej 1100 px zostaje 38%, bo tam
   30% nie zmieściłoby już przycisku aparatu. */
@media (min-width: 1101px) {
    .hero-content-scan {
        flex-basis: max(30%, 444px);
    }
}

/* Skaner jako jeden blok o wspólnej szerokości. Wcześniej przycisk, rozwijacz
   i podpowiedź miały własne marginesy i czytały się jak trzy niezależne
   elementy rozrzucone po kolumnie. */
.hero-scan-box {
    max-width: 360px;
    background: var(--bos-white);
    border: 2px solid var(--bos-black);
    border-radius: 12px;
    padding: 20px;
}

.hero-scan-title {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    /* Nagłówek na środku, w jednej osi z przyciskiem i rozwijaczem pod nim. */
    text-align: center;
}

.hero-content-scan .btn-scan {
    width: 100%;
    max-width: none;
    /* Wyższy przycisk: to główna akcja na tym ekranie i musi być łatwa
       do trafienia także kciukiem. */
    padding: 15px 20px;
    margin-top: 0;
    border-radius: 8px;
    justify-content: center;
}

/* Rozwijacz z ręcznym wpisaniem kodu. */
.hero-manual {
    max-width: none;
    margin-top: 16px;
    padding-top: 14px;
    /* Kreska oddziela drogę podstawową od awaryjnej — bez niej oba warianty
       wyglądały na równorzędne. */
    border-top: 1px solid var(--bos-border);
    /* Przełącznik na środku ramki, pod wyśrodkowanym przyciskiem aparatu.
       `summary` jest inline-flex, więc słucha wyrównania rodzica. */
    text-align: center;
}

.hero-manual > summary {
    /* Domyślny trójkącik podmieniamy na własny, żeby wskaźnik stał po lewej
       stronie tekstu niezależnie od przeglądarki. */
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 6px 0;
    border-bottom: 2px solid var(--bos-black);
}

.hero-manual > summary::-webkit-details-marker {
    display: none;
}

.hero-manual > summary::before {
    content: '+';
    font-size: 16px;
    line-height: 1;
    color: var(--bos-red);
}

.hero-manual[open] > summary::before {
    content: '–';
}

.hero-manual > summary:hover {
    color: var(--bos-red);
}

/* Pole i przycisk jedno pod drugim, nie obok siebie: w kolumnie banera
   układ poziomy ściskał pole na kod do kilkunastu znaków. */
.hero-scan-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;
    margin-top: 14px;
    /* Wyrównanie do lewej wraca po wyśrodkowanym rozwijaczu: `text-align`
       dziedziczy się do pola i wpisywany kod uciekałby na środek. */
    text-align: left;
}

.hero-scan-form .form-control {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--bos-black);
    border-radius: 6px;
    font-size: 14px;
    text-transform: uppercase;
}

.hero-scan-form .btn-primary {
    width: 100%;
}

/* Podpowiedź pod ramką — ta sama szerokość i wyśrodkowanie, żeby czytała się
   jako podpis do skanera, a nie osobny fragment tekstu w kolumnie. */
.hero-scan-hint {
    max-width: 360px;
    margin-top: 12px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-scan-box,
    .hero-scan-hint {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Polecanie znajomych --- */
.referral-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.referral-page h1 {
    font-family: var(--font-heading);
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.referral-lead {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 26px;
}

.referral-box {
    border: 2px solid var(--bos-border);
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
}

.referral-box h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.referral-locked {
    background: var(--bos-gray);
}

.referral-locked p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.referral-link {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.referral-link input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 14px;
    border: 2px solid var(--bos-black);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bos-white);
}

.referral-code {
    margin-top: 12px;
    font-size: 13px;
    color: var(--bos-gray-dark);
}

.referral-summary {
    font-size: 14px;
    margin-bottom: 12px;
}

.referral-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.referral-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bos-gray);
    border-radius: 6px;
    font-size: 14px;
}

/* Status liczbowy zamiast samego koloru — postęp zaproszonego musi dać się
   odczytać także wtedy, gdy ktoś nie rozróżnia barw. */
.referral-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--bos-gray-dark);
    white-space: nowrap;
}

.referral-status.is-done {
    color: #1f9d55;
}

.referral-note {
    font-size: 12px;
    color: var(--bos-gray-dark);
    line-height: 1.7;
}

/* --- Podgląd wpisywanego hasła --- */
/* Opakowanie dokłada skrypt, więc bez JavaScriptu pola zostają bez zmian. */
.pw-field {
    position: relative;
    display: block;
}

.pw-field input {
    /* Miejsce na przycisk, żeby oko nie nachodziło na wpisywany tekst. */
    padding-right: 46px;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--bos-gray-dark);
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.pw-toggle:hover {
    color: var(--bos-black);
    background: rgba(0, 0, 0, 0.05);
}

/* Obrys widoczny przy obsłudze klawiaturą — przycisk jest pełnoprawnym
   elementem formularza i musi dać się osiągnąć tabulatorem. */
.pw-toggle:focus-visible {
    outline: 2px solid var(--bos-red);
    outline-offset: 2px;
}

/* Kod QR z zaproszeniem klienta. */
.referral-qr {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 2px solid var(--bos-border);
    text-align: center;
}

.referral-qr img {
    width: 260px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 12px;
}

.referral-qr p {
    font-size: 13px;
    color: var(--bos-gray-dark);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* --- FAQ: akordeon --- */
.faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--bos-border);
    background: var(--bos-white);
}

.faq-item > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    /* Domyślny trójkącik znika — po prawej stronie mamy własną strzałkę. */
    list-style: none;
}

.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item > summary:hover {
    color: var(--bos-red);
}

.faq-item > summary:focus-visible {
    outline: 2px solid var(--bos-red);
    outline-offset: -2px;
}

.faq-item > summary i {
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* Strzałka obraca się po rozwinięciu — bez tego wskaźnik kłamie o stanie. */
.faq-item[open] > summary i {
    transform: rotate(180deg);
}

.faq-item[open] > summary {
    color: var(--bos-red);
}

.faq-answer {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

/* --- Kontakt: przyciski akcji --- */
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    /* Na telefonie przyciski idą jeden pod drugim i mają jednakową szerokość
       — obok siebie zawijały się nierówno i sprawiały wrażenie rozjechanych. */
    .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* --- Panel ambasadora: zaproszeni klienci --- */
.amb-referrals {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0 40px;
}

.amb-referrals-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.amb-referrals-head h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    text-transform: uppercase;
}

.amb-referrals-stats {
    display: flex;
    gap: 22px;
}

.amb-referrals-stats div {
    text-align: center;
}

.amb-referrals-stats strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.1;
}

.amb-referrals-stats span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bos-gray-dark);
}

.amb-referrals-lead,
.amb-referrals-empty {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.amb-referrals-empty a {
    color: var(--bos-red);
    font-weight: 700;
    text-decoration: underline;
}

.amb-referral-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amb-referral {
    background: var(--bos-white);
    border: 2px solid var(--bos-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.amb-referral-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.amb-referral-meta {
    font-size: 12px;
    color: var(--bos-gray-dark);
    margin-bottom: 10px;
}

/* Status aktywności — te same nazwy co w panelu managera, żeby rozmowa
   ambasadora z obsługą dotyczyła tego samego słowa. */
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-pill-nowy { background: rgba(59, 130, 246, 0.15); color: #1f6feb; }
.status-pill-aktywny { background: rgba(34, 197, 94, 0.15); color: #1f9d55; }
.status-pill-uspiony { background: rgba(234, 179, 8, 0.18); color: #8a6d1f; }
.status-pill-nieaktywny { background: rgba(249, 115, 22, 0.15); color: #b4530f; }
.status-pill-utracony { background: rgba(239, 68, 68, 0.15); color: #c62828; }

.amb-referral-done {
    font-size: 13px;
    font-weight: 700;
    color: #1f9d55;
}

.amb-referral-bar {
    height: 8px;
    background: var(--bos-border);
    border-radius: 6px;
    overflow: hidden;
}

.amb-referral-bar span {
    display: block;
    height: 100%;
    background: var(--bos-red);
}

.amb-referral-left {
    margin-top: 6px;
    font-size: 12px;
    color: var(--bos-gray-dark);
}

/* Przycisk akcji w skrzynce powiadomień. */
.notif-action {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 18px;
    background: var(--bos-red);
    color: var(--bos-white);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.notif-action:hover {
    background: var(--bos-red-hover);
    color: var(--bos-white);
}

/* --- Adres dostawy przy zamówieniu nagrody --- */
.order-address {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 2px solid var(--bos-border);
}

.order-address h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.order-address .form-group {
    margin-bottom: 12px;
}

.order-address label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    color: var(--bos-gray-dark);
}

.order-address .form-control {
    width: 100%;
    padding: 11px 12px;
    border: 2px solid var(--bos-border);
    border-radius: 6px;
    font-size: 14px;
}

.order-address .form-control:focus {
    outline: none;
    border-color: var(--bos-black);
}

/* Kod pocztowy i miasto w jednym wierszu — razem tworzą jedną informację. */
.order-address-row {
    display: flex;
    gap: 12px;
}

.order-address-row .form-group:first-child {
    flex: 0 0 40%;
}

.order-address-row .form-group:last-child {
    flex: 1;
}

.order-address-error {
    color: var(--bos-red);
    font-size: 12px;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .order-address-row {
        flex-direction: column;
        gap: 0;
    }

    .order-address-row .form-group:first-child {
        flex: none;
    }
}

/* --- Marki jako kafle w katalogu nagród --- */
/* Kafel marki wygląda i mierzy tyle samo co kafel nagrody: ta sama siatka,
   ta sama wysokość obrazka, ten sam czerwony pasek z opisem. Dla klienta to
   ten sam gest — przejrzeć i kliknąć — więc nie ma powodu, żeby wyglądał
   inaczej. Stąd współdzielone `.reward-grid` i `.reward-card` w szablonie;
   tutaj zostają tylko różnice. */
.brand-tiles-title {
    padding: 0 40px 14px;
    font-family: var(--font-heading);
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Nazwa marki jest krótka, więc zostaje w kroju nagłówkowym — inaczej niż
   nazwa narzędzia, która potrafi mieć dziesięć słów i w wersalikach przestaje
   się czytać. Jedna linia: „QBRICK" nie potrzebuje dwóch. */
.brand-tile .reward-card-info h4 {
    font-family: var(--font-heading);
    font-size: 20px;
    text-transform: uppercase;
    min-height: 0;
    -webkit-line-clamp: 1;
}

/* Wybrana marka na czarno — ten sam język co aktywna zakładka kategorii. */
.reward-card.brand-tile.active .reward-card-info {
    background: var(--bos-black);
    border-top-color: var(--bos-black);
    color: var(--bos-white);
}

.reward-card.brand-tile.active .brand-tile-count {
    color: var(--bos-white);
}

.brand-tile-count {
    font-size: 12px;
    color: var(--bos-gray-text);
}

.brand-tiles-clear {
    display: inline-block;
    /* Ten sam margines boczny co siatka nagród (0 40px), żeby odnośnik stał
       w jednej linii z lewą krawędzią kafli. */
    margin: 0 40px 24px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bos-red);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .brand-tiles-title {
        padding: 0 16px 12px;
    }

    .brand-tiles-clear {
        margin: 0 16px 20px;
    }
}

/* --- Baner zgody na ciasteczka --- */
/* Kolorystyka programu: czerń, czerwień, biel. Baner jest elementem serwisu,
   a nie doklejonym widgetem, więc ma wyglądać jak reszta. */
.cookie-banner {
    position: fixed;
    z-index: 2000;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    animation: cookie-in 0.25s ease-out;
}

.cookie-banner.is-closing {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

@keyframes cookie-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cookie-banner-box {
    pointer-events: auto;
    width: 100%;
    max-width: 460px;
    background: var(--bos-white);
    border: 3px solid var(--bos-black);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.cookie-banner-title {
    font-family: var(--font-heading);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.cookie-banner-text {
    font-size: 13px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 16px;
}

.cookie-banner-text a {
    color: var(--bos-red);
    font-weight: 700;
    text-decoration: underline;
}

/* --- Kategorie --- */
.cookie-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.cookie-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--bos-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.cookie-option:hover {
    border-color: var(--bos-black);
}

.cookie-option input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--bos-red);
}

.cookie-option strong {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cookie-option small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.5;
    color: #666;
}

/* Niezbędne są wyszarzone i nieklikalne — nie udajemy wyboru, którego nie ma. */
.cookie-option.is-locked {
    background: var(--bos-gray);
    cursor: default;
    opacity: 0.85;
}

.cookie-option.is-locked:hover {
    border-color: var(--bos-border);
}

/* --- Przyciski --- */
.cookie-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cookie-btn {
    padding: 13px 18px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cookie-btn-primary {
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

.cookie-btn-primary:hover {
    background: var(--bos-red-hover);
    border-color: var(--bos-red-hover);
}

.cookie-btn-outline {
    background: var(--bos-white);
    border-color: var(--bos-black);
    color: var(--bos-black);
}

.cookie-btn-outline:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* Odmowa jako pełnoprawny przycisk, nie ukryty odnośnik: zgoda musi być tak
   samo łatwa do odrzucenia jak do udzielenia. */
.cookie-btn-plain {
    background: none;
    color: #555;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    padding: 6px;
}

.cookie-btn-plain:hover {
    color: var(--bos-black);
}

@media (max-width: 600px) {
    .cookie-banner {
        right: 0;
        bottom: 0;
        left: 0;
    }

    .cookie-banner-box {
        max-width: none;
        border-width: 3px 0 0;
        border-radius: 16px 16px 0 0;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    }
}

/* --- Strona ustawień ciasteczek --- */
.cookie-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.cookie-page-lead,
.cookie-note {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.cookie-page-lead a {
    color: var(--bos-red);
    font-weight: 700;
    text-decoration: underline;
}

.cookie-current {
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--bos-gray);
    border-left: 4px solid var(--bos-red);
    border-radius: 4px;
    font-size: 14px;
}

.cookie-page-form {
    margin-bottom: 36px;
}

.cookie-page-form .cookie-options {
    max-width: 560px;
}

.cookie-page-subtitle {
    font-family: var(--font-heading);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.cookie-group {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
}

/* Tabela przewija się we własnym kontenerze — na telefonie trzy kolumny
   nie mieszczą się w szerokości ekranu. */
.cookie-table-wrap {
    overflow-x: auto;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cookie-table th,
.cookie-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--bos-border);
    vertical-align: top;
}

.cookie-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bos-gray-dark);
    background: var(--bos-gray);
}

.cookie-table code {
    font-size: 12px;
    white-space: nowrap;
}

/* ===== Katalog nagród: zakładki ===== */

/* Trzy zakładki zastąpiły kafle dawnej strony „Korzyści". Wspólna ramka i
   równe szerokości, żeby czytało się je jako jeden przełącznik, a nie trzy
   osobne przyciski prowadzące gdzie indziej. */
.catalog-head {
    padding: 0 40px;
}

.catalog-head .page-title {
    padding-bottom: 0;
}

.catalog-lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--bos-gray-dark);
    margin-top: 10px;
}

.catalog-lead strong {
    color: var(--bos-black);
}

.catalog-tabs {
    display: flex;
    margin: 20px 40px 0;
    border: 2px solid var(--bos-black);
}

.catalog-tab {
    flex: 1 1 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--bos-white);
    color: var(--bos-black);
    transition: all 0.2s;
}

.catalog-tab + .catalog-tab {
    border-left: 2px solid var(--bos-black);
}

.catalog-tab.active,
.catalog-tab:hover {
    background: var(--bos-black);
    color: var(--bos-white);
}

/* Wprowadzenie do zakładki wypłat i poziomów — tam, gdzie sama siatka nie
   tłumaczy, o co chodzi (bankomat bez karty, punkty liczone od początku). */
.catalog-section-lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bos-black);
    max-width: 680px;
    margin: 28px auto 24px;
    padding: 0 40px;
    text-align: center;
}

@media (max-width: 768px) {
    .catalog-head {
        padding: 0 20px;
    }

    .catalog-tabs {
        margin: 16px 20px 0;
    }

    /* Na telefonie „Wypłaty BLIK" nie mieści się w jednym wierszu przy
       rozstrzelonych literach — odstęp znika, zanim zakładka zacznie się
       łamać na dwie linie. */
    .catalog-tab {
        font-size: 11px;
        letter-spacing: 0;
        padding: 8px 6px;
    }

    .catalog-section-lead {
        padding: 0 20px;
        font-size: 15px;
    }
}

/* Lista w odpowiedzi FAQ (np. progi punktowe kategorii nagród). */
.faq-list {
    margin: 12px 0 0;
    padding-left: 20px;
}

/* Odpowiedź z panelu może mieć kilka akapitów i listę na początku —
   reset `* { margin: 0 }` sklejałby akapity w jeden blok. */
.faq-answer p + p,
.faq-answer .faq-list + p {
    margin-top: 10px;
}

.faq-answer > .faq-list:first-child {
    margin-top: 0;
}

.faq-list li {
    margin-bottom: 6px;
    line-height: 1.7;
}

/* Załączniki pod treścią dokumentu prawnego (regulamin, polityka). */
.legal-attachments {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 2px solid var(--bos-border);
}

.legal-attachments h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.legal-attachments ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.legal-attachments li {
    border-bottom: 1px solid var(--bos-border);
}

.legal-attachments li:last-child { border-bottom: none; }

.legal-attachments a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bos-black);
    text-decoration: none;
}

.legal-attachments a:hover { color: var(--bos-red); }

.legal-attachments a i { color: var(--bos-red); font-size: 18px; flex: 0 0 auto; }

/* Rozmiar dosunięty do prawej: przy różnej długości podpisów inaczej
   „skakał" w pionie i trudno było porównać pozycje. */
.legal-attachment-size {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--bos-gray-dark);
    white-space: nowrap;
}

/* Treść strony edytowanej w panelu (usuwanie danych). Wygląd w klasie, a nie
   w atrybutach style: manager dostaje w edytorze czysty HTML zamiast ściany
   `style="…"`, a akapit dopisany w panelu wygląda jak reszta bez przepisywania
   stylów. Reset `* { margin: 0; padding: 0 }` zabiera odstępy i wcięcia list,
   więc wracają tutaj. */
.page-content {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}

.page-content h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--bos-black);
    margin: 28px 0 10px;
}

.page-content h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--bos-black);
    margin: 18px 0 6px;
}

.page-content p + p { margin-top: 12px; }

.page-content ul,
.page-content ol {
    margin: 10px 0;
    padding-left: 22px;
}

.page-content a {
    color: var(--bos-red);
    font-weight: 700;
}

.page-content .highlight {
    font-size: 18px;
    font-weight: 800;
    margin: 12px 0;
}

/* ===== Zamówienie: potwierdzenie i szczegóły ===== */

/* Osobny ekran zamiast zielonego paska nad listą zamówień: klient dowiadywał
   się tylko, że „zamówienie zostało złożone pomyślnie", a nie kiedy przyjdzie
   kurier ani gdzie szukać hasła do bankomatu. Od 2026-10-14 to także
   szczegóły zamówienia otwierane z listy — stąd szerzej niż formularz. */
.order-done {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 20px 48px;
}

.order-done-title {
    font-family: var(--font-heading);
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
}

.order-done-sub {
    font-size: 15px;
    line-height: 1.7;
    color: var(--bos-gray-text);
    margin-top: 10px;
}

.order-done-sub strong {
    color: var(--bos-black);
}

.order-done-card {
    border: 1px solid var(--bos-border);
}

.order-done-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bos-border);
}

.order-done-row:last-child {
    border-bottom: 0;
}

/* Adres i nazwa nagrody bywają dłuższe niż pół wiersza — wtedy etykieta idzie
   nad treść, zamiast ściskać ją do wąskiej kolumny po prawej. */
.order-done-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.order-done-label {
    font-size: 13px;
    color: var(--bos-gray-dark);
    flex-shrink: 0;
}

.order-done-value {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.order-done-block .order-done-value {
    text-align: left;
    font-weight: 400;
    line-height: 1.55;
}

.order-done-reward {
    align-items: flex-start;
    justify-content: flex-start;
}

.order-done-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: var(--bos-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.order-done-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-done-thumb-mark {
    font-family: var(--font-heading);
    font-size: 20px;
    color: rgba(0, 0, 0, 0.12);
}

.order-done-reward-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-done-reward-text strong {
    font-size: 15px;
    line-height: 1.35;
}

.order-done-reward-text small {
    font-size: 13px;
    color: var(--bos-gray-dark);
}

.order-done-cost {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
}

.order-done-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bos-gray);
    padding: 14px 16px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--bos-gray-dark);
}

.order-done-balance strong {
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1;
    color: var(--bos-black);
}

.order-done-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

/* ===== Adres dostawy zwinięty do jednej karty ===== */

/* `details`, nie skrypt: pola zostają w formularzu także zamknięte, więc
   wysyłają się bez JavaScriptu, a klient w typowym zamówieniu tylko
   potwierdza to, co już ma w profilu. */
.order-address-fold {
    border: 1px solid var(--bos-border);
    background: #faf9f7;
}

.order-address-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.order-address-summary::-webkit-details-marker {
    display: none;
}

.order-address-lines {
    font-size: 14px;
    line-height: 1.55;
}

.order-address-lines small {
    font-size: 12px;
    color: var(--bos-gray-dark);
}

.order-address-toggle {
    flex-shrink: 0;
    /* Wysokość celu dotykowego, nie tylko tekst: „Zmień" to jedyny sposób
       dojścia do pól adresu. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--bos-black);
    background: var(--bos-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.order-address-fold[open] .order-address-summary {
    border-bottom: 1px solid var(--bos-border);
}

.order-address-fold[open] .order-address-lines {
    color: var(--bos-gray-dark);
}

.order-address-fold > .form-group,
.order-address-fold > .order-address-row {
    padding: 0 14px;
    margin-top: 12px;
}

.order-address-fold > .form-group:last-child {
    padding-bottom: 14px;
}

/* Cena na przycisku mówi, ile to kosztuje; ta linijka — co zostanie. */
.order-after-balance {
    font-size: 13px;
    color: var(--bos-gray-dark);
    text-align: center;
    margin-top: 10px;
}

.order-after-balance strong {
    color: var(--bos-black);
}

/* Nazwa oglądanego wycinka katalogu (np. „Nagrody marki QBRICK") — pierwszy
   nagłówek nazywa stronę, ten mówi, na co się patrzy. */
.catalog-slice-title {
    font-family: var(--font-heading);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 20px 40px 0;
}

@media (max-width: 768px) {
    .catalog-slice-title {
        padding: 16px 20px 0;
        font-size: 20px;
    }
}

/* =====================================================
   Konto managera w serwisie klienta
   ===================================================== */

/* Oznaczenie w nagłówku w miejscu rangi i salda. Span, nie odnośnik —
   stąd wyłączone przyciemnienie po najechaniu z `.user-status:hover`. */
.user-status-manager {
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bos-manager);
    color: var(--bos-white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.user-status-manager:hover {
    filter: none;
}

.manager-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bos-manager);
    color: var(--bos-white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.manager-account {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 40px 56px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.manager-account h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.manager-account-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manager-account-intro h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.manager-account-intro p {
    max-width: 720px;
    font-size: 17px;
    color: #333;
}

.manager-panel-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 36px 40px;
    background: var(--bos-manager);
    color: var(--bos-white);
}

.manager-panel-cta h2 {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 8px;
}

.manager-panel-cta p {
    max-width: 520px;
    font-size: 15px;
    color: #cbd5e1;
}

.manager-panel-cta-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: var(--bos-red);
    color: var(--bos-white);
    font-family: var(--font-heading);
    font-size: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.2s;
}

.manager-panel-cta-button:hover {
    background: var(--bos-red-hover);
    color: var(--bos-white);
}

.manager-code-check {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manager-code-check p,
.manager-differences p {
    font-size: 14px;
    color: #444;
}

.manager-code-check .scan-form {
    margin-top: 4px;
}

/* Czarny, nie czerwony: czerwień na tej stronie ma jedno miejsce — przejście
   do panelu. */
.btn-scan-check {
    background: var(--bos-black);
    color: var(--bos-white);
    border-color: var(--bos-black);
    white-space: nowrap;
}

.btn-scan-check:hover {
    background: var(--bos-red);
    border-color: var(--bos-red);
}

.manager-differences {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.manager-differences-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    border-top: 3px solid var(--bos-black);
    padding-top: 20px;
}

.manager-differences h3 {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Karta nagrody oglądana przez managera — w miejscu formularza zamówienia. */
.manager-preview {
    margin-bottom: 20px;
    padding: 20px 24px;
    border: 2px solid var(--bos-manager);
    background: var(--bos-manager-soft);
    color: var(--bos-manager);
    font-size: 15px;
    line-height: 1.6;
}

.manager-preview-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Wynik sprawdzenia kodu przez managera. */
.code-check {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 40px 56px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.code-check h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.code-check-lead {
    font-size: 15px;
    color: #333;
}

.code-check-card {
    border: 2px solid var(--bos-black);
}

.code-check-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
}

.code-check-row + .code-check-pair,
.code-check-pair + .code-check-row {
    border-top: 1px solid var(--bos-border);
}

.code-check-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.code-check-pair > .code-check-row + .code-check-row {
    border-left: 1px solid var(--bos-border);
}

.code-check-row-inline {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.code-check-row dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--bos-gray-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-check-row dd {
    font-weight: 700;
}

.code-check-code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 17px;
    letter-spacing: 1px;
    word-break: break-all;
}

.code-check-points {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

.code-check-row dd small {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bos-gray-text);
}

.code-check-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.code-check-state::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.code-check-state.is-free {
    background: #e6f4ea;
    color: #14532d;
}

.code-check-state.is-used {
    background: var(--bos-gray);
    color: var(--bos-gray-text);
}

.code-check-used-at {
    display: block;
    margin-top: 6px;
}

.code-check-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .user-status-manager {
        padding: 6px 9px;
        font-size: 11px;
    }

    .manager-account {
        padding: 16px 16px 40px;
        gap: 32px;
    }

    .manager-account-intro h1 {
        font-size: 44px;
    }

    .manager-panel-cta {
        flex-direction: column;
        align-items: stretch;
        padding: 28px 20px;
        gap: 20px;
    }

    .manager-panel-cta-button {
        justify-content: space-between;
    }

    .manager-differences-grid {
        grid-template-columns: 1fr;
    }

    .code-check {
        padding: 8px 16px 40px;
    }
}

/* ===== Koszyk nagród ===== */

/* Ikona koszyka stoi obok dzwonka i dzieli z nim wymiary i znaczek licznika —
   dwa przyciski w belce mają wyglądać jak para, a nie jak dwa pomysły. */
.cart-link .notif-badge {
    background: var(--bos-red);
}

/* Potwierdzenie dodania do koszyka na karcie nagrody. Obrys, nie zielone tło:
   to informacja z drogą dalej, a nie komunikat systemowy. */
.cart-added {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 2px solid var(--bos-black);
    background: var(--bos-white);
}

.cart-added-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cart-added-mark {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f5ee;
    color: #0f5132;
}

.cart-added-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--bos-gray-text);
}

.cart-added-text strong {
    font-size: 15px;
    color: var(--bos-black);
}

.cart-added .btn-claim-outline {
    margin-top: 0;
}

.cart-added-more {
    align-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

.cart-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px 56px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cart-title {
    padding: 0;
    margin: 0;
}

.cart-lead {
    margin-top: -18px;
    font-size: 14px;
    color: var(--bos-gray-text);
}

.cart-section {
    display: flex;
    flex-direction: column;
}

.cart-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cart-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid var(--bos-black);
    padding-bottom: 4px;
}

.cart-section-head .cart-section-title {
    margin-bottom: 0;
}

.cart-section-head span {
    font-size: 12px;
    color: var(--bos-gray-text);
}

.cart-line {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bos-border);
}

/* Nagroda za rangę wyróżniona obrysem: jest gratis i klient ma ją zauważyć,
   zanim pomyśli, że płaci za wszystko. */
.cart-line-rank {
    padding: 14px;
    border: 2px solid var(--bos-red);
}

.cart-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bos-gray);
}

.cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-thumb-mark {
    font-family: var(--font-heading);
    font-size: 20px;
    color: rgba(0, 0, 0, 0.12);
}

.cart-thumb-cash {
    background: var(--bos-black);
    color: var(--bos-white);
    font-family: var(--font-heading);
    font-size: 22px;
}

.cart-line-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cart-line-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cart-line-name {
    font-size: 15px;
    line-height: 1.35;
}

.cart-line-meta {
    font-size: 13px;
    color: var(--bos-gray-text);
}

.cart-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--bos-red-hover);
}

.cart-remove {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    border: 0;
    background: none;
    color: var(--bos-gray-text);
    font-size: 17px;
    cursor: pointer;
}

.cart-remove:hover {
    color: var(--bos-red);
}

.cart-line-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.cart-line-price {
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1;
}

.cart-line-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cart-line-price-wrap small {
    font-size: 12px;
    color: var(--bos-gray-text);
}

.cart-line-problem {
    padding: 10px 12px;
    border: 2px solid var(--bos-red);
    border-radius: 8px;
    background: rgba(227, 6, 19, 0.06);
    font-size: 14px;
    line-height: 1.5;
}

.cart-line-blocked .cart-line-price {
    color: var(--bos-gray-text);
    text-decoration: line-through;
}

.cart-line-note {
    padding: 10px 12px;
    background: var(--bos-gray);
    font-size: 13px;
    line-height: 1.5;
}

.cart-size-fold summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    list-style: none;
}

.cart-size-fold summary::-webkit-details-marker {
    display: none;
}

.cart-size-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cart-size-label {
    font-size: 13px;
    font-weight: 700;
}

.cart-size-select {
    width: auto;
    min-width: 110px;
    min-height: 44px;
}

.cart-size-save {
    padding: 10px 16px;
}

/* Plus i minus to osobne formularze: ilość zmienia się bez JavaScriptu. */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--bos-black);
}

.qty-stepper form {
    display: flex;
}

.qty-stepper button {
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--bos-white);
    color: var(--bos-black);
    cursor: pointer;
}

.qty-stepper button:disabled {
    color: var(--bos-border);
    cursor: not-allowed;
}

.qty-stepper-value {
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid var(--bos-black);
    border-right: 2px solid var(--bos-black);
    font-weight: 700;
}

.cart-sms-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bos-gray);
    font-size: 13px;
    line-height: 1.5;
}

.cart-phone-missing {
    margin: 12px 0 0;
}

.cart-note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--bos-gray-text);
    margin-top: 8px;
}

.cart-note-center {
    text-align: center;
}

.cart-checkout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-checkout .btn-claim-outline {
    margin-top: 0;
}

.cart-checkout .points-missing-banner {
    margin-top: 0;
}

.cart-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bos-gray);
    font-size: 14px;
}

.cart-summary-row,
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cart-summary-total {
    align-items: baseline;
    padding-top: 10px;
    border-top: 2px solid var(--bos-black);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-summary-total strong {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

.cart-summary-muted {
    color: var(--bos-gray-text);
}

.cart-summary-missing {
    color: var(--bos-red-hover);
    font-weight: 700;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px;
    border: 1px solid var(--bos-border);
    text-align: center;
}

.cart-empty-mark {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bos-gray);
    font-size: 26px;
}

.cart-empty h2 {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cart-empty p {
    font-size: 14px;
    color: var(--bos-gray-text);
}

.cart-suggestion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 2px solid var(--bos-red);
    font-size: 14px;
}

.cart-suggestion-title {
    font-size: 15px;
    font-weight: 700;
}

.cart-btn-small {
    font-size: 20px;
    padding: 10px 20px;
    margin-top: 4px;
}

/* Nagroda za rangę na stronie rang: rozmiar i przycisk w jednym rzędzie. */
.rank-claim-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rank-claim-inline label {
    font-size: 13px;
    font-weight: 700;
}

.rank-claim-inline .form-control {
    width: auto;
    min-width: 120px;
    min-height: 44px;
}

.rank-in-cart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

/* ===== Zamówienie z koszyka: potwierdzenie i historia ===== */

.order-done-card + .order-done-card {
    margin-top: 14px;
}

.order-done-card-head {
    background: var(--bos-gray);
}

.order-done-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.order-done-rank {
    color: var(--bos-red-hover);
    font-weight: 700;
}

@media (max-width: 768px) {
    .cart-page {
        padding: 0 16px 40px;
    }

    .cart-line-foot {
        flex-wrap: wrap;
    }
}

/* Strona „Punktowane produkty": nagłówek i wstęp, pod nimi naklejki — nagłówek,
   lista produktów i obrazki naklejki obok (na telefonie nad listą, żeby dało
   się je porównać z naklejką trzymaną w ręku). */
.scored-products {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px;
}

.scored-products .page-title {
    padding: 0 0 16px;
}

.scored-products-intro {
    max-width: 740px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bos-gray-text);
}

.scored-products-intro p + p {
    margin-top: 12px;
}

.scored-products-intro a {
    color: var(--bos-red);
    font-weight: 600;
    text-decoration: underline;
}

.scored-stickers {
    margin-top: 36px;
    border-top: 2px solid var(--bos-black);
}

.scored-sticker {
    padding: 28px 0;
    border-bottom: 1px solid var(--bos-border);
}

.scored-sticker h2 {
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.scored-sticker-body {
    display: flex;
    align-items: center;
    gap: 40px;
}

.scored-sticker-body ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.5;
}

/* Obrazki naklejki obok siebie na wspólnej wysokości 110 px. Panel zapisuje je
   z wysokością 240 px (TrimmedImage), więc na ekranach o podwójnej gęstości są
   ostre; mniejszych nie powiększamy. */
.scored-sticker-images {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.scored-sticker-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 360px;
    max-height: 110px;
}

.scored-products-download {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scored-products-download small {
    font-weight: 600;
    text-transform: none;
}

@media (max-width: 600px) {
    .scored-products {
        padding: 28px 16px 48px;
    }

    .scored-sticker {
        padding: 24px 0;
    }

    .scored-sticker h2 {
        font-size: 27px;
    }

    .scored-sticker-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .scored-sticker-images {
        order: -1;
        flex-wrap: wrap;
        gap: 10px;
    }

    .scored-sticker-image {
        max-width: 100%;
        max-height: 88px;
    }

    .scored-sticker-body ul {
        font-size: 15px;
    }
}

/* ===== Moje zamówienia i Czeki BLIK (2026-10-14) ===== */

/* Kolory stanów tylko z motywu strony. Czerwień BOS = ruch klienta (odebrać
   czek albo zgłosić sprawę), czerń = trwa, szarość = zamknięte. Zielone,
   niebieskie i żółte `.badge-*` mówiły na czerwono-czarnej stronie obcym
   językiem, a różowy (#f0b) na karcie czeku nie pochodził z niczego.
   Prostokątne, jak karty i przyciski w całym serwisie.
   Patrz docs/decyzje/2026-10-14-moje-zamowienia-i-czeki-blik.md. */
.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.1;
    border: 1px solid transparent;
}

.status-chip--action {
    background: var(--bos-red);
    border-color: var(--bos-red);
    color: var(--bos-white);
}

/* Tekst w ciemniejszej czerwieni: #E30613 na bieli to 4,5:1 na granicy,
   a znacznik ma 11 px. */
.status-chip--report {
    background: var(--bos-white);
    border-color: var(--bos-red);
    color: var(--bos-red-hover);
}

.status-chip--wait {
    background: var(--bos-black);
    border-color: var(--bos-black);
    color: var(--bos-white);
}

.status-chip--done {
    background: var(--bos-gray);
    border-color: var(--bos-border);
    color: var(--bos-gray-text);
}

.client-orders {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.client-orders-title {
    padding-left: 0;
    padding-right: 0;
}

.client-orders-heading {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 36px 0 10px;
}

.client-orders-heading .is-red {
    color: var(--bos-red);
}

.client-orders-empty {
    text-align: center;
    color: var(--bos-gray-text);
    padding: 40px 0;
}

.client-orders-note {
    font-size: 13px;
    color: var(--bos-gray-text);
    margin-top: 12px;
}

/* Pasek nad listą zamówień — jedyny ślad czeków do odbioru na tej stronie. */
.cheque-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-height: 44px;
    margin: 4px 0 8px;
    padding: 12px 20px;
    background: var(--bos-red);
    color: var(--bos-white);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.cheque-banner:hover {
    background: var(--bos-red-hover);
    color: var(--bos-white);
}

.cheque-banner-text {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cheque-banner-count {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
}

.cheque-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Wiersz zamówienia: numer, data, co, punkty, stan. Cały wiersz to odnośnik. */
.order-rows {
    border-bottom: 1px solid var(--bos-border);
}

.order-row {
    display: grid;
    /* 250 px: „Czek do ponownego wystawienia" ma ~245 px — przy 210 najeżdżał
       na punkty (test, 2026-10-14). */
    grid-template-columns: 52px 96px minmax(0, 1fr) 80px 250px 14px;
    grid-template-areas: "id date what pts st chev";
    column-gap: 16px;
    align-items: center;
    min-height: 60px;
    padding: 14px 12px;
    border-top: 1px solid var(--bos-border);
    color: var(--bos-black);
    text-decoration: none;
}

.order-row:hover {
    background: var(--bos-gray);
    color: var(--bos-black);
}

.order-row-id {
    grid-area: id;
    font-size: 14px;
    font-weight: 800;
}

.order-row-date {
    grid-area: date;
    font-size: 13px;
    color: var(--bos-gray-text);
}

.order-row-what {
    grid-area: what;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
}

.order-row-what span {
    font-weight: 400;
    color: var(--bos-gray-text);
}

.order-row-points {
    grid-area: pts;
    font-size: 13px;
    color: var(--bos-gray-text);
    text-align: right;
    white-space: nowrap;
}

.order-row-status {
    grid-area: st;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.order-row-status .status-chip {
    /* Gdyby znacznik był dłuższy niż kolumna, łamie się, a nie wychodzi na punkty. */
    white-space: normal;
    text-align: right;
}

.order-row-chevron {
    grid-area: chev;
    font-size: 12px;
    color: var(--bos-gray-text);
}

.order-row.is-closed .order-row-what {
    font-weight: 500;
    color: var(--bos-gray-text);
}

/* Instrukcja bankomatu raz na stronę — dotąd powtarzała się na każdej karcie. */
.cheque-howto {
    padding: 14px 18px;
    background: var(--bos-gray);
    font-size: 14px;
    line-height: 1.55;
    margin-top: 8px;
}

.cheque-howto p + p {
    margin-top: 8px;
}

.cheque-howto-warning {
    display: flex;
    gap: 10px;
}

.cheque-howto-warning i {
    color: var(--bos-red);
    margin-top: 3px;
}

.cheque-grid {
    display: grid;
    /* Najwyżej dwa obok siebie, jak na makiecie. Przy 260 px na szerokim
       ekranie wchodziły trzy i pojedynczy czek zajmował jedną trzecią. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* W zamówieniu: jeden czek na całą szerokość, kilka — obok siebie. */
.cheque-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.cheque-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bos-border);
    background: var(--bos-white);
}

.cheque-tile-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 9px 14px;
    font-size: 12px;
}

.cheque-tile-strip strong {
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cheque-tile-strip a {
    color: inherit;
    font-weight: 600;
}

/* `gap` trzyma odstępy, a `margin-top: auto` przycisku wyrównuje przyciski
   kafelków stojących obok siebie do dołu. */
.cheque-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    padding: 14px 14px 16px;
}

.cheque-tile-amount {
    font-family: var(--font-heading);
    font-size: 48px;
    line-height: 0.9;
}

.cheque-tile-amount small {
    font-size: 24px;
    color: #8a8a8a;
}

/* Ekran „Czeki BLIK": kwota w rozmiarze z makiety. W zamówieniu kafelki
   stoją ciaśniej (`--compact`) i zostają przy 48 px. */
.cheque-grid:not(.cheque-grid--compact) .cheque-tile-amount {
    font-size: 56px;
}

.cheque-tile-name {
    font-size: 16px;
    font-weight: 800;
}

.cheque-tile-validity {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.cheque-tile-validity.is-urgent {
    border: 2px solid var(--bos-red);
    padding: 8px 10px;
    font-weight: 700;
}

.cheque-tile-validity.is-urgent i {
    color: var(--bos-red);
    margin-top: 2px;
}

.cheque-tile-secret {
    display: grid;
    gap: 6px;
}

/* `display` wyżej przykrywa atrybut `hidden` — bez tego zakryty kafelek
   pokazywał puste pola numeru i hasła, a bez JS-a martwy przycisk. */
.cheque-tile [hidden] {
    display: none;
}

.cheque-tile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: #2b2b2b;
}

.cheque-tile-field > span {
    font-size: 10px;
    color: #bdbdbd;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cheque-tile-field strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.cheque-tile-field small {
    font-size: 13px;
    line-height: 1.45;
    color: var(--bos-white);
}

.cheque-tile-field .cheque-tile-password {
    font-size: 30px;
    letter-spacing: 8px;
    line-height: 1.1;
}

.cheque-tile-error {
    padding: 8px 10px;
    border: 2px solid var(--bos-red);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.cheque-tile-reveal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    background: var(--bos-white);
    color: var(--bos-black);
    border: 2px solid var(--bos-white);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}

.cheque-tile-reveal:hover {
    background: var(--bos-gray);
    border-color: var(--bos-gray);
}

.cheque-tile-reveal.is-open {
    background: transparent;
    color: var(--bos-white);
    border-color: #5a5a5a;
}

.cheque-tile-reveal:disabled {
    opacity: 0.6;
    cursor: wait;
}

.cheque-tile-text {
    font-size: 14px;
    line-height: 1.55;
}

/* Czek do odbioru: czarny, z czerwonym paskiem. */
.cheque-tile--action {
    background: var(--bos-black);
    border-color: var(--bos-black);
    color: var(--bos-white);
}

.cheque-tile--action .cheque-tile-strip {
    background: var(--bos-red);
    color: var(--bos-white);
}

.cheque-tile--action .cheque-tile-amount small {
    color: #bdbdbd;
}

.cheque-tile--action .cheque-tile-validity:not(.is-urgent) {
    color: #d6d6d6;
}

.cheque-tile--report {
    border: 2px solid var(--bos-red);
    background: #fdf0f1;
}

.cheque-tile--report .cheque-tile-strip {
    color: var(--bos-red-hover);
    border-bottom: 1px solid var(--bos-red);
}

.cheque-tile--wait .cheque-tile-strip {
    background: var(--bos-black);
    color: var(--bos-white);
}

.cheque-tile--wait .cheque-tile-amount {
    color: var(--bos-gray-text);
}

.cheque-tile--done .cheque-tile-strip {
    background: var(--bos-gray);
    color: var(--bos-gray-text);
}

.cheque-tile--done .cheque-tile-amount,
.cheque-tile--done .cheque-tile-text {
    color: var(--bos-gray-text);
}

/* „Do zgłoszenia" na ekranie Czeki BLIK — ramka jak `.stock-warning`. */
.cheque-report {
    padding: 16px 18px;
    border: 2px solid var(--bos-red);
    background: #fdf0f1;
}

.cheque-report + .cheque-report {
    margin-top: 12px;
}

.cheque-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.cheque-report-head a {
    font-size: 13px;
    color: var(--bos-gray-text);
}

.cheque-report p {
    margin: 10px 0 14px;
    font-size: 14px;
    line-height: 1.55;
}

.cheque-waiting {
    border-bottom: 1px solid var(--bos-border);
}

.cheque-waiting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 16px 12px;
    border-top: 1px solid var(--bos-border);
}

.cheque-waiting-amount {
    min-width: 72px;
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1;
}

.cheque-waiting-text {
    flex: 1;
    min-width: 220px;
    font-size: 13px;
    color: var(--bos-gray-text);
}

.cheque-waiting-text a {
    color: inherit;
}

.cheque-waiting-text > span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bos-black);
}

/* Ekran zamówienia: potwierdzenie tylko zaraz po złożeniu. */
.order-placed {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 2px solid var(--bos-black);
}

.order-placed i {
    font-size: 20px;
    margin-top: 3px;
}

.order-placed strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.order-placed span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bos-gray-text);
}

.order-done--wide {
    max-width: 900px;
}

.order-done-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.order-done-cheques .cheque-howto {
    margin: 0 0 12px;
}

.order-done-sms {
    margin-top: 12px;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--bos-border);
}

.order-done-reward .order-done-cost {
    margin-left: auto;
    white-space: nowrap;
}

/* Etapy paczki: pasek zamiast samego słowa — widać, ile zostało. */
.order-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 14px 16px;
    list-style: none;
    border-bottom: 1px solid var(--bos-border);
    font-size: 12px;
    color: var(--bos-gray-text);
}

.order-steps li {
    padding-top: 8px;
    border-top: 6px solid var(--bos-border);
    line-height: 1.3;
}

.order-steps li.is-done {
    border-top-color: var(--bos-black);
    color: var(--bos-black);
}

.order-steps li.is-now {
    font-weight: 800;
}

@media (max-width: 768px) {
    .client-orders {
        padding: 0 16px 40px;
    }
}

@media (max-width: 640px) {
    /* Znacznik w osobnej linii pod nazwą. Po prawej zabierał na telefonie całą
       szerokość — kolumna punktów spadała do zera, a „130 pkt" wychodziło pod
       „Czek do ponownego wystawienia" (test, 2026-10-14). */
    .order-row {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "what what what"
            "st st st"
            "id date pts";
        row-gap: 6px;
        padding: 12px 4px;
    }

    .order-row-status {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .order-row-status .status-chip {
        text-align: left;
    }

    .order-row-points {
        text-align: left;
    }

    .order-row-chevron {
        display: none;
    }

    .cheque-tile-field strong {
        font-size: 26px;
    }

    .cheque-tile-field .cheque-tile-password {
        font-size: 36px;
        letter-spacing: 12px;
    }
}