/**
 * Psyche - STYLE FORMULARZA ZAMOWIENIA REKLAMY
 * Ladowane wylacznie na reklama/zamow.php
 *
 * Niektore klasy (baner-blok, targeting-opcje, zt-*, podglad-baneru) sa
 * tworzone/odpytywane dynamicznie przez JS w tym samym pliku - zostaja
 * z oryginalnymi nazwami (nie tlumaczyc), tylko nowy wyglad.
 */

.tresc-zamowienia { max-width: 1100px; margin: 0 auto; padding: var(--o-12) 0 var(--o-24); }

.uklad-zamowienia { display: grid; grid-template-columns: 1fr 320px; gap: var(--o-8); align-items: start; }
.kolumna-glowna-zamowienia { min-width: 0; }
.kolumna-boczna-zamowienia { position: sticky; top: calc(var(--wys-nav) + var(--o-4)); }
@media (max-width: 900px) {
    .uklad-zamowienia { grid-template-columns: 1fr; }
    .kolumna-boczna-zamowienia { position: static; }
}

.powiadomienie { border-radius: 10px; padding: var(--o-4) var(--o-5, var(--o-4)); margin-bottom: var(--o-6); font-size: var(--r-sm); }
.powiadomienie--error  { background: rgba(255,109,109,0.08); border: 1px solid rgba(255,109,109,0.25); color: #ff9c9c; }
.powiadomienie--sukces { background: rgba(120,200,140,0.08); border: 1px solid rgba(120,200,140,0.25); color: #8fe0a8; padding: var(--o-6); }
.powiadomienie ul { margin: var(--o-2) 0 0 var(--o-4); padding: 0; }
.powiadomienie--sukces h2 { margin: 0 0 var(--o-3); color: #8fe0a8; }

/* Sekcje formularza */
.sekcja-formularza { border: 1px solid var(--c-ramka); border-radius: 14px; padding: var(--o-6); margin-bottom: var(--o-6); background: var(--c-tlo2); }
.sekcja-formularza h2 { font-family: var(--f-tytulowa); font-size: var(--r-xl); margin: 0 0 var(--o-4); color: var(--c-tekst); border-bottom: 1px solid var(--c-ramka); padding-bottom: var(--o-3); }

/* Pola formularza */
.grupa-pola { margin-bottom: var(--o-4); }
.grupa-pola label { display: block; font-weight: 600; font-size: var(--r-sm); margin-bottom: var(--o-2); color: var(--c-szarofiolet); }
.grupa-pola input, .grupa-pola select, .grupa-pola textarea {
    width: 100%; padding: 10px var(--o-4);
    background: var(--c-powierzchnia);
    border: 1px solid var(--c-ramka); border-radius: 8px;
    color: var(--c-tekst);
    font-family: var(--f-tekstowa);
    font-size: var(--r-base);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--czas-baza);
}
.grupa-pola input:focus, .grupa-pola select:focus, .grupa-pola textarea:focus { border-color: var(--c-fiolet); }
.grupa-pola textarea { min-height: 180px; resize: vertical; }
.grupa-pola .podpowiedz { font-size: var(--r-xs); color: var(--c-tekst-2); margin-top: 4px; }
.siatka-pol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--o-4); }
@media (max-width: 600px) { .siatka-pol { grid-template-columns: 1fr; } }

/* Banery dynamiczne - klasy uzywane przez JS, nie tlumaczyc nazw */
.baner-blok { border: 1px dashed var(--c-ramka); border-radius: 12px; padding: var(--o-4); margin-bottom: var(--o-3); background: var(--c-tlo); position: relative; }
.baner-blok h4 { margin: 0 0 var(--o-3); color: var(--c-tekst); font-size: var(--r-base); }
.btn-usun-baner { position: absolute; top: var(--o-3); right: var(--o-3); background: rgba(255,109,109,0.15); color: #ff9c9c; border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: var(--r-xs); }
.btn-dodaj {
    background: rgba(155,109,255,0.08); color: var(--c-fiolet);
    border: 2px dashed rgba(155,109,255,0.3); border-radius: 10px;
    padding: var(--o-3) var(--o-5, var(--o-4)); cursor: pointer;
    font-size: var(--r-sm); font-weight: 600; margin-top: var(--o-2);
    transition: background var(--czas-baza);
}
.btn-dodaj:hover { background: rgba(155,109,255,0.15); }

/* Drzewo zasiegu (targeting) - klasy uzywane przez JS, nie tlumaczyc nazw */
.targeting-opcje { margin-top: var(--o-2); display: none; }
.targeting-opcje label { font-weight: normal; display: inline-flex; align-items: center; gap: 6px; margin-right: var(--o-3); margin-bottom: 6px; color: var(--c-szarofiolet); font-size: var(--r-sm); }
.zt-item { margin: 1px 0; }
.zt-row { display: flex; align-items: center; gap: 4px; }
.zt-row label { font-weight: normal; margin-bottom: 0; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.zt-toggle { background: none; border: none; cursor: pointer; padding: 0; width: 18px; font-size: var(--r-xs); color: var(--c-tekst-2); line-height: 1; flex-shrink: 0; }
.zt-toggle:hover { color: var(--c-tekst); }
.zt-spacer { display: inline-block; width: 18px; flex-shrink: 0; }
.zt-children { margin-left: 22px; border-left: 1px dashed var(--c-ramka); padding-left: 6px; }

/* Metoda platnosci */
.grupa-radio label { display: flex; align-items: flex-start; gap: var(--o-3); padding: var(--o-3) var(--o-4); border: 1px solid var(--c-ramka); border-radius: 10px; margin-bottom: var(--o-2); cursor: pointer; transition: border-color var(--czas-baza); color: var(--c-szarofiolet); }
.grupa-radio label:hover { border-color: var(--c-fiolet); }
.grupa-radio input[type=radio]:checked + span { color: var(--c-mgielka); font-weight: 600; }
.opis-etykiety-radio { display: block; font-size: var(--r-xs); color: var(--c-tekst-2); font-weight: normal; }
.blok-info-platnosci { background: var(--c-powierzchnia); border: 1px solid var(--c-ramka); border-radius: 10px; padding: var(--o-4); margin-top: var(--o-3); display: none; font-size: var(--r-sm); color: var(--c-szarofiolet); }

/* Podsumowanie (sticky boczny panel) */
.karta-podsumowania { background: var(--c-tlo2); border: 1px solid var(--c-fiolet); border-radius: 14px; padding: var(--o-5, var(--o-4)); margin-bottom: var(--o-6); }
.karta-podsumowania h3 { margin: 0 0 var(--o-3); font-size: var(--r-lg); font-family: var(--f-tytulowa); color: var(--c-tekst); }
.karta-podsumowania table { width: 100%; border-collapse: collapse; }
.karta-podsumowania td { padding: 4px 0; font-size: var(--r-sm); color: var(--c-szarofiolet); }
.karta-podsumowania td:last-child { text-align: right; font-weight: 600; color: var(--c-tekst); }
.karta-podsumowania .total td { border-top: 1px solid var(--c-ramka); padding-top: var(--o-2); font-size: var(--r-md); color: var(--c-fiolet); }

.przycisk-zlozenia {
    display: block; width: 100%; padding: var(--o-4);
    background: var(--gradient-fiolet); color: #fff;
    border: none; border-radius: 10px;
    font-size: var(--r-base); font-weight: 700; cursor: pointer;
    transition: opacity var(--czas-baza); text-align: center;
}
.przycisk-zlozenia:hover { opacity: 0.88; }

/* Zniżka / kod rabatowy */
.blok-znizki { background: rgba(255,196,77,0.08); border: 1px solid rgba(255,196,77,0.25); border-radius: 12px; padding: var(--o-4); margin-bottom: var(--o-4); }
.blok-znizki h3 { margin: 0 0 var(--o-2); color: #ffc44d; font-size: var(--r-base); }
.blok-znizki p { color: var(--c-szarofiolet); font-size: var(--r-sm); margin-bottom: var(--o-3); }
.blok-znizki a { color: var(--c-cyjan); }
.wiersz-weryfikacji-kodu { display: flex; gap: var(--o-2); align-items: flex-start; }
.wiersz-weryfikacji-kodu input { flex: 1; }
.przycisk-sprawdz-kod { padding: 10px var(--o-4); background: var(--c-cyjan); color: #042; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 100px; }
.wynik-weryfikacji-kodu { margin-top: var(--o-3); display: none; }
.wynik-weryfikacji-kodu .ok       { background: rgba(120,200,140,0.1); border: 1px solid rgba(120,200,140,0.3); border-radius: 8px; padding: var(--o-3) var(--o-4); color: #8fe0a8; }
.wynik-weryfikacji-kodu .zmieniony { background: rgba(255,196,77,0.1); border: 1px solid rgba(255,196,77,0.3); border-radius: 8px; padding: var(--o-3) var(--o-4); color: #ffc44d; }
.wynik-weryfikacji-kodu .blad     { background: rgba(255,109,109,0.1); border: 1px solid rgba(255,109,109,0.3); border-radius: 8px; padding: var(--o-3) var(--o-4); color: #ff9c9c; }
.wynik-weryfikacji-kodu code { display: block; background: var(--c-powierzchnia); padding: var(--o-2); margin-top: 6px; font-size: var(--r-xs); white-space: pre-wrap; border-radius: 4px; }

/* Baner na wlasnym artykule */
.blok-banera-na-artykule { background: rgba(255,196,77,0.06); border: 2px solid rgba(255,196,77,0.3); border-radius: 12px; padding: var(--o-5, var(--o-4)) var(--o-6); margin-bottom: var(--o-5, var(--o-4)); }
.blok-banera-na-artykule label.etykieta-checkbox { display: flex; align-items: flex-start; gap: var(--o-3); cursor: pointer; }
.blok-banera-na-artykule strong { font-size: var(--r-base); color: #ffc44d; }
.blok-banera-na-artykule p { margin: 6px 0 0; font-size: var(--r-sm); color: var(--c-szarofiolet); line-height: 1.65; }
.blok-ostrzezenia-artykul { background: rgba(255,196,77,0.1); border: 1px solid rgba(255,196,77,0.3); border-radius: 8px; padding: var(--o-3) var(--o-4); margin-bottom: var(--o-4); }
.blok-ostrzezenia-artykul p, .blok-ostrzezenia-artykul ul { color: var(--c-szarofiolet); font-size: var(--r-sm); line-height: 1.7; }
.blok-ostrzezenia-artykul ul { margin: 0; padding-left: var(--o-5, var(--o-4)); }

/* Wybor pakietu (gdy brak pakietu w URL) */
.siatka-pakietow-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--o-4); margin-bottom: var(--o-6); }
.karta-pakietu-mini {
    border: 1px solid var(--c-ramka); border-radius: 14px; padding: var(--o-5, var(--o-4));
    cursor: pointer; transition: border-color var(--czas-baza), transform var(--czas-baza);
    background: var(--c-tlo2); color: inherit; display: block;
}
.karta-pakietu-mini:hover { border-color: var(--c-fiolet); transform: translateY(-2px); color: inherit; }
.karta-pakietu-mini h3 { margin: 0 0 var(--o-2); font-size: var(--r-md); color: var(--c-tekst); }
.karta-pakietu-mini .cena { font-size: var(--r-xl); font-weight: 800; color: var(--c-fiolet); }
.karta-pakietu-mini .czas { font-size: var(--r-xs); color: var(--c-tekst-2); margin-bottom: var(--o-3); }
.karta-pakietu-mini .opis-krotki { font-size: var(--r-xs); color: var(--c-tekst-2); }
.karta-pakietu-mini .przycisk-wybierz { display: block; text-align: center; background: var(--gradient-fiolet); color: #fff; padding: var(--o-2); border-radius: 8px; font-weight: 600; margin-top: var(--o-3); font-size: var(--r-sm); }

/* Potwierdzenie zamowienia */
.karta-potwierdzenia-platnosci { background: var(--c-tlo2); border: 1px solid var(--c-ramka); border-radius: 14px; padding: var(--o-6); margin-top: var(--o-6); }
.karta-potwierdzenia-platnosci h3 { color: var(--c-tekst); margin: 0 0 var(--o-3); font-family: var(--f-tytulowa); }
.karta-potwierdzenia-platnosci p { margin: 6px 0; color: var(--c-szarofiolet); font-size: var(--r-sm); }
.blok-tokenu-dostepu { background: var(--c-tlo); border: 2px solid var(--c-fiolet); border-radius: 12px; padding: var(--o-5, var(--o-4)) var(--o-6); margin-top: var(--o-5, var(--o-4)); }
.blok-tokenu-dostepu .naglowek-tokenu { font-weight: 700; color: var(--c-tekst); margin: 0 0 var(--o-3); font-size: var(--r-base); }
.blok-tokenu-dostepu .opis-tokenu { font-size: var(--r-sm); color: var(--c-szarofiolet); margin: 0 0 var(--o-3); }
.ramka-tokenu { background: var(--c-powierzchnia); border: 1px solid var(--c-ramka); border-radius: 8px; padding: var(--o-3) var(--o-4); margin-bottom: var(--o-4); word-break: break-all; }
.ramka-tokenu .etykieta-male { font-size: var(--r-xs); color: var(--c-tekst-2); display: block; margin-bottom: 4px; }
.ramka-tokenu code { font-size: var(--r-sm); color: var(--c-cyjan); font-weight: 700; letter-spacing: 0.02em; }

/* Podglad banera */
.podglad-baneru { margin-top: var(--o-3); padding: var(--o-3); background: var(--c-tlo); border-radius: 10px; border: 1px solid var(--c-ramka); }