/* ==========================================================================
   Program Lojalnościowy - style wspólne
   Styl: profesjonalny, uniwersalny. Indygo = zaufanie i nawigacja.
   Złoto = zarezerwowane wyłącznie dla momentów nagrody (patrz customer.css).
   ========================================================================== */

:root {
    /* --- Kolor marki --- */
    --color-primary: #33538F;
    --color-primary-dark: #22375E;
    --color-primary-light: #E3E9F4;
    /* Poświata przy fokusie pola formularza - osobna zmienna (nie sztywny
       rgba() w regule :focus), żeby automatycznie dopasować się do
       jaśniejszego --color-primary trybu ciemnego zamiast zostać "przypiętą"
       do koloru jasnego motywu. */
    --color-focus-ring: rgba(51, 83, 143, 0.14);

    /* Gradient karty lojalnościowej klienta - CELOWO NIEZALEŻNY od trybu
       ciemnego. --color-primary/-dark są w trybie ciemnym rozjaśniane dla
       czytelności TEKSTU na ciemnym tle reszty UI - użycie ich wprost do
       gradientu karty dawałoby wyblakły, pastelowy efekt zamiast głębokiej,
       premium granatowej karty. Karta ma wyglądać identycznie w obu
       motywach, tak jak fizyczna karta lojalnościowa nie zmienia koloru
       zależnie od oświetlenia w sklepie. */
    --color-card-gradient-start: #22375E;
    --color-card-gradient-end: #33538F;

    /* --- Złoto: WYŁĄCZNIE dla odznak/pasków postępu nagród, nigdzie indziej --- */
    --color-gold: #B8862E;
    --color-gold-text: #8A5F1A;
    --color-gold-light: #FAF1E0;

    /* --- Neutralna skala --- */
    --color-bg: #F6F7F9;
    --color-bg-card: #FFFFFF;
    --color-bg-stripe: #FAFBFC;
    --color-text: #1B2333;
    --color-text-muted: #566578;
    --color-border: #E2E6EC;

    /* --- Semantyczne --- */
    --color-success: #0F6B3A;
    --color-success-bg: #E5F4EC;
    --color-danger: #C7362A;
    --color-danger-bg: #FBEAE8;
    --color-warning: #A6690A;
    --color-warning-light: #FBF0DF;

    /* --- Skala zaokrągleń (3 poziomy, spójnie) --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-card: var(--radius-lg);
    --radius-input: var(--radius-sm);

    /* --- Skala cieni (3 poziomy elevacji: wpis na liście → karta sekcji
       → element unoszący się nad kartą, np. toast) --- */
    --shadow-soft: 0 2px 10px rgba(20, 26, 41, 0.06);
    --shadow-card: 0 6px 20px rgba(20, 26, 41, 0.10);
    --shadow-elevated: 0 8px 24px rgba(20, 26, 41, 0.16), 0 2px 6px rgba(20, 26, 41, 0.08);

    /* --- Skala odstępów (siatka 8px) - stosowana punktowo do głównych,
       strukturalnych marginesów/paddingów, nie do każdej pojedynczej
       wartości w arkuszu - drobne, kontekstowe odstępy (np. gap między
       ikoną a tekstem) zostają dobierane swobodnie. --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

/* Tryb ciemny - WYŁĄCZNIE na życzenie klienta, przez przełącznik w
   "Twoje konto" (patrz customer/account.php + theme-toggle.js). Domyślnie
   ZAWSZE jasny, bez żadnego automatycznego przełączania po preferencji
   systemowej - klient ma pełną, świadomą kontrolę, nie zgadujemy za niego.
   Aktywowane przez atrybut na <html>, nie media query. Wszystkie tokeny
   zweryfikowane pod WCAG AA (min. 4.5:1 dla tekstu, jak w reszcie systemu
   kolorów). */
html[data-theme="dark"] {
    --color-primary: #6B8CC7;
    --color-primary-dark: #4A6BA6;
    --color-primary-light: #23304A;
    --color-focus-ring: rgba(107, 140, 199, 0.22);

    --color-gold: #D9A952;
    --color-gold-text: #F0C878;
    --color-gold-light: #3A2E15;

    --color-bg: #14171C;
    --color-bg-card: #1E222A;
    --color-bg-stripe: #242832;
    --color-text: #E7E9ED;
    --color-text-muted: #9AA3B2;
    --color-border: #2C313B;

    --color-success: #34D399;
    --color-success-bg: #113224;
    --color-danger: #F87171;
    --color-danger-bg: #3B1518;
    --color-warning: #F0B429;
    --color-warning-light: #3A2A0A;

    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-elevated: 0 10px 28px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* Kilka miejsc w projekcie ma osadzone na sztywno kolory zamiast
   zmiennych (np. kropki toastów) - tutaj dostają jawne nadpisania
   pod tryb ciemny. Tło poza wąskim kontenerem klienta (html{background})
   nadpisane osobno w customer.css, bo tylko tam istnieje ten wzorzec. */
html[data-theme="dark"] .skeleton-block {
    background: linear-gradient(90deg, #2C313B 25%, #363C48 37%, #2C313B 63%);
    background-size: 400% 100%;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* Kolor linków - w panelu klienta automatycznie dostosowuje się do
   wybranej palety karty przez --color-accent-text (ustawiona na <body>,
   patrz layouts/customer.php); w panelu właściciela ta zmienna nie
   istnieje, więc bez zmian spada na --color-primary. */
a { color: var(--color-accent-text, var(--color-primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Skala typograficzna: dwie wagi, nie cztery --- */
h1 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5em; }
h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5em; }

/* --- Widoczny fokus wszędzie: klawiatura, dostępność --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Karta pierwszoplanowa: cień, dla głównych bloków treści. */
.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1rem;
}

/* Karta/sekcja drugoplanowa: płaska, tylko obramowanie - dla elementów
   pomocniczych (filtry, dzielniki, panele ustawień drugorzędnych), żeby
   nie każdy blok na stronie "unosił się" tym samym cieniem. */
.card-flat {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-input);
    border: none;
    background: var(--color-btn-bg, var(--color-primary));
    color: var(--color-btn-text, #fff);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
/* filter zamiast zmiany background - działa poprawnie niezależnie od
   tego, czy tło przycisku to stały --color-primary (właściciel) czy
   nadpisany kolor palety (klient, patrz customer.php layout) - nie
   wymaga osobnej zmiennej "hover" per paleta. */
.btn:hover { filter: brightness(0.88); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn-secondary:disabled, .btn-danger:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
}
.btn-secondary { background: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border); font-weight: 500; }
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger { background: #fff; color: var(--color-danger); border: 1px solid var(--color-danger); font-weight: 500; }
.btn-danger:hover { background: var(--color-danger-bg); }
.btn-block { width: 100%; }
.btn-lg { padding: 1rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--color-text); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 0.95rem;
    background: #fff;
    color: var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}
.field .hint { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.3rem; }
.checkbox-field { display: flex; align-items: flex-start; gap: 0.6rem; }
.checkbox-field input { width: auto; margin-top: 0.2rem; }

/* Miernik siły hasła - reużywany na wszystkich formularzach ustawiania hasła. */
.strength-track {
    height: 5px;
    background: var(--color-border);
    border-radius: 999px;
    margin-top: 0.5rem;
    overflow: hidden;
    display: flex;
    gap: 3px;
}
.strength-track div { flex: 1; height: 100%; border-radius: 999px; background: var(--color-border); }
.strength-track.weak div:nth-child(1) { background: var(--color-danger); }
.strength-track.medium div:nth-child(1),
.strength-track.medium div:nth-child(2) { background: var(--color-warning); }
.strength-track.strong div { background: var(--color-success); }
.strength-label { font-size: 0.75rem; margin-top: 0.35rem; font-weight: 600; min-height: 1em; }
.strength-label.weak { color: var(--color-danger); }
.strength-label.medium { color: var(--color-warning); }
.strength-label.strong { color: var(--color-success); }

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-input);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.1rem; }
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-info { background: var(--color-primary-light); color: var(--color-primary-dark); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.badge svg { width: 11px; height: 11px; }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-muted { background: var(--color-border); color: var(--color-text-muted); }
.badge-gold { background: var(--color-gold-light); color: var(--color-gold-text); }

/* Odznaka ikony nagrody - stary format (emoji, wygaszany stopniowo -
   patrz .reward-icon-duo poniżej dla nowego formatu SVG). Zostaje w
   arkuszu na wypadek gdyby jakiś widok jeszcze go używał. */
.icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Ikona nagrody w stylu "duotone" (kółko koloru + SVG w środku) -
   App\Support\RewardIcon::render(), reużywane w panelu właściciela i
   klienta. Wymiary/kolor ustawiane inline per wywołanie (patrz metoda
   render()), tu tylko wspólne właściwości layoutu. */
.reward-icon-duo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Ikony typów transakcji w historii - reużywane w panelu właściciela i klienta. */
.tx-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tx-icon svg { width: 14px; height: 14px; }
.tx-icon-add { background: var(--color-success-bg); color: var(--color-success); }
.tx-icon-redeem { background: var(--color-gold-light); color: var(--color-gold-text); }
.tx-icon-correction { background: var(--color-primary-light); color: var(--color-primary); }
.tx-icon-expire { background: var(--color-danger-bg); color: var(--color-danger); }
.tx-icon-referral { background: #EDE5F7; color: #4C2F82; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.5rem; font-size: 0.88rem; }
th { color: var(--color-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--color-border); }
td { border-bottom: 1px solid var(--color-border); }
tbody tr:nth-child(odd) td { background: var(--color-bg-stripe); }
tbody tr[data-clickable]:hover td { background: var(--color-primary-light); cursor: pointer; }

/* Pusty stan: ikona + tytuł + podtytuł + opcjonalne CTA, zamiast gołego zdania. */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.empty-state svg { width: 32px; height: 32px; stroke: var(--color-text-muted); margin-bottom: 0.6rem; }
.empty-state .empty-icon-text { font-size: 1.8rem; margin-bottom: 0.5rem; opacity: 0.55; }
.empty-state .empty-title { font-weight: 600; font-size: 0.92rem; color: var(--color-text); margin-bottom: 0.2rem; }
.empty-state .empty-sub { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.8rem; }

/* Mały spinner ładowania do stanów AJAX (wyszukiwanie itp.) */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner wewnątrz przycisku submit podczas wysyłki formularza (patrz
   form-loading.js) - dziedziczy kolor tekstu przycisku, więc działa
   zarówno na przyciskach .btn (białe tło) jak i .btn-secondary (ciemny
   tekst) bez osobnego stylowania każdego wariantu. */
.btn-spinner-inline {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    opacity: 0.85;
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* Skeleton loading - animowane, wygaszone placeholdery w kształcie
   przyszłych wyników. Reużywane wszędzie, gdzie czekamy na AJAX. */
.skeleton-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; text-align: left; }
.skeleton-block {
    background: linear-gradient(90deg, var(--color-border) 25%, #F0F1F4 37%, var(--color-border) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: 6px;
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.skeleton-lines { flex: 1; }
.skeleton-line-1 { width: 65%; height: 11px; margin-bottom: 6px; }
.skeleton-line-2 { width: 40%; height: 9px; }

/* Toast - powiadomienia zamiast pełnowidokowego banera przy rutynowych
   akcjach (zapisano, dodano punkty itp.). Domyślnie liczone tak, żeby nie
   nachodzić na dolną nawigację mobile - owner.css nadpisuje na desktopie,
   gdzie nie ma dolnego paska. */
.toast-container {
    position: fixed;
    bottom: 84px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    pointer-events: none;
}
.toast {
    background: var(--color-text);
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: var(--shadow-elevated);
    max-width: 280px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.toast-dot-success { background: #4ADE80; }
.toast-dot-danger { background: #F87171; }

.container { max-width: 720px; margin: 0 auto; padding: 1rem; }

/* Mały monogram marki - używany na ekranach logowania/rejestracji. */
.brand-badge {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 auto 0.9rem;
}

/* Styl wydruku - .print-only pokazuje się WYŁĄCZNIE tutaj (ukryte
   domyślnie w app.css głównym), .no-print znika WYŁĄCZNIE tutaj.
   Usuwa nawigację/przyciski/toasty, zostawia czyste dane do wydrukowania
   na papierze (część właścicieli woli papierowy backup list klientów). */
@media print {
    .no-print,
    .owner-sidebar,
    .owner-header,
    .owner-bottom-bar,
    .customer-topbar,
    .customer-bottom-nav,
    .toast-container,
    .icon-picker-toggle,
    .icon-picker {
        display: none !important;
    }
    .print-only { display: block !important; }
    .owner-main { margin-left: 0 !important; padding: 0 !important; max-width: 100% !important; }
    body { background: #fff !important; }
    .card, .card-flat { box-shadow: none !important; border: none !important; padding: 0 !important; }
    table { font-size: 11px; }
    a { color: #000 !important; text-decoration: none !important; }
}

/* Trwałe, spokojne potwierdzenie inline - zamiast (albo obok) przelotnego
   toastu. Współdzielone między oboma panelami - patrz customer/account.php
   (odczyt flash w widoku, "przechwytuje" komunikat zanim layout zdążyłby
   pokazać toast) i owner/customer_detail.php (komunikat o bonusie za
   program poleceń, obok karty-paragonu po dodaniu punktów). */
.account-inline-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: var(--radius-md);
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.account-inline-notice.success { background: var(--color-success-bg); color: var(--color-success); }
.account-inline-notice.error { background: var(--color-danger-bg); color: var(--color-danger); }
.account-inline-notice .notice-icon { flex-shrink: 0; display: flex; }
.account-inline-notice .notice-icon svg { width: 20px; height: 20px; }

/* Akordeon - reużywany w Ustawieniach właściciela i koncie klienta (runda
   mobilnego audytu - konto klienta przeszło na ten sam wzorzec, żeby
   skrócić długą listę kart). Każda sekcja domyślnie zwinięta, pokazuje
   tylko nagłówek + krótkie podsumowanie stanu. Kliknięcie rozwija
   WYŁĄCZNIE tę jedną sekcję (patrz accordion.js), reszta się zwija -
   zapobiega temu, żeby strona znów zrobiła się długa jak wcześniej. */
.accordion-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.accordion-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    user-select: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: var(--color-text);
    font-family: inherit;
}
.accordion-header .summary-text {
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-left: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.accordion-header .chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--color-text-muted);
    display: flex;
}
.accordion-header .chevron svg { width: 16px; height: 16px; }
.accordion-item.open .chevron { transform: rotate(180deg); }
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.accordion-item.open .accordion-body { max-height: 900px; }
.accordion-body-inner {
    padding: 0 1rem 1.1rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
/* Wariant "niebezpieczny" (Strefa zagrożenia) - czerwony akcent widoczny
   NAWET gdy sekcja jest zwinięta, żeby nie zgubić ważnego sygnału
   ostrzegawczego pod jednolitym wyglądem reszty akordeonu. */
.accordion-item.danger { border-color: var(--color-danger); }
.accordion-item.danger .accordion-header { color: var(--color-danger); }

/* ============================================================
   Ekrany logowania/rejestracji "v2" - wspólny komponent dla OBU
   paneli (właściciel i klient). Pierwotnie zaprojektowany wyłącznie
   dla panelu klienta (runda 35: czarna plakietka z nazwą sklepu, ikony
   w polach, przełącznik pokazywania hasła, duży nagłówek + podpis,
   dekoracyjne tło), PRZENIESIONY tutaj z customer.css po audycie
   spójności wizualnej, który wykrył że panel WŁAŚCICIELA wciąż miał
   stary, dużo prostszy styl logowania - mimo że reszta panelu
   właściciela (pulpit, karty statystyk itd.) była już wielokrotnie
   odświeżana w kolejnych rundach. Wszystkie zmienne CSS użyte poniżej
   (--color-btn-bg, --color-accent-text) mają bezpieczne fallbacki na
   --color-primary (zawsze dostępna globalnie) - działają więc
   identycznie w obu panelach, mimo że tylko klient ma faktycznie
   ustawioną paletę karty. WYJĄTEK: box korzyści (.auth-v2-benefits)
   NIE jest tu przeniesiony - zależy od koloru palety karty klienta
   (--color-card-gradient-start, bez fallbacku), więc zostaje w
   customer.css; panel właściciela ma WŁASNY, analogiczny wariant w
   owner.css ze stałym kolorem marki zamiast zmiennej palety. */
.auth-screen.auth-screen-v2 {
    display: block;
    justify-content: normal;
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.auth-decor-dots {
    position: absolute;
    top: 1.2rem;
    right: 1rem;
    width: 70px;
    height: 70px;
    opacity: 0.12;
    pointer-events: none;
}
.auth-decor-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    opacity: 0.5;
    pointer-events: none;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1.2rem 1.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.auth-back-link svg { width: 16px; height: 16px; }

.auth-v2-inner { max-width: 440px; margin: 0 auto; padding: 1.6rem 1.5rem 3rem; position: relative; z-index: 1; }

.auth-v2-badge-wrap { text-align: center; margin-bottom: 1.2rem; }
.auth-v2-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #1B2333;
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.25;
    text-align: center;
    padding: 0.5rem;
    box-shadow: var(--shadow-elevated);
}

.auth-v2-heading { text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.auth-v2-sub { text-align: center; color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.5; margin: 0 0 2rem; }

.field-icon .input-icon-wrap { position: relative; }
.field-icon .input-icon-wrap input {
    padding-left: 2.6rem;
    border-radius: 14px;
}
.field-icon .input-icon-svg {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-accent-text, var(--color-primary));
    pointer-events: none;
}
.field-icon .password-toggle {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.2rem;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
}
.field-icon .password-toggle svg { width: 18px; height: 18px; }
.field-icon .input-icon-wrap input[type="password"],
.field-icon .input-icon-wrap input[data-has-toggle] { padding-right: 2.6rem; }

.auth-v2-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-v2-label-row a { font-size: 0.8rem; font-weight: 600; }

.auth-v2-btn {
    width: 100%;
    border-radius: 14px;
    background: var(--color-btn-bg, var(--color-primary));
    color: var(--color-btn-text, #fff);
    border: none;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.3rem;
}
.auth-v2-btn:hover { filter: brightness(0.95); }

.auth-v2-footer-link { text-align: center; margin-top: 1.3rem; font-size: 0.88rem; }

/* Box zgody marketingowej na ekranie rejestracji - świadomie NIE żółty
   (jak przypomnienie na pulpicie w customer.css .marketing-prompt-banner,
   inny kontekst) tylko w kolorze marki, spójny z resztą formularza
   "auth-v2". Checkbox POZOSTAJE domyślnie odznaczony - samo opakowanie
   w ładniejszy box z konkretnym opisem korzyści nie zmienia tego, że
   zgoda musi być jawnym, dobrowolnym wyborem klienta. */
.consent-prompt-box {
    display: flex;
    gap: 0.7rem;
    background: var(--color-primary-light);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    margin-top: 1.2rem;
}
.consent-prompt-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}
.consent-prompt-text label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.2rem; cursor: pointer; }
.consent-prompt-text p { margin: 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }
.consent-example-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    cursor: pointer;
    font-family: inherit;
}
.consent-example-sms {
    background: #fff;
    border: 1px dashed var(--color-primary);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    margin-top: 0.5rem;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.5;
}