/**
 * Psyche - STYLE CENNIKA REKLAM
 * Ladowane wylacznie na reklama/cennik.php
 */

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

/* Info-box "reklama na wlasnym artykule" */
.blok-info-artykul {
    padding: var(--o-6);
    background: rgba(255,196,77,0.08);
    border: 1px solid rgba(255,196,77,0.25);
    border-radius: 14px;
    margin-bottom: var(--o-8);
}
.blok-info-artykul h3 { font-family: var(--f-tytulowa); font-size: var(--r-lg); color: var(--c-tekst); margin-bottom: var(--o-3); }
.blok-info-artykul p { color: var(--c-szarofiolet); line-height: 1.7; margin-bottom: var(--o-2); }
.blok-info-artykul a { color: var(--c-fiolet); font-weight: 600; }

.opis-zakladki { color: var(--c-szarofiolet); margin-bottom: var(--o-6); font-size: var(--r-sm); line-height: 1.7; max-width: 760px; }

/* Zakladki */
.zakladki { display: flex; flex-wrap: wrap; gap: var(--o-2); margin-bottom: var(--o-8); border-bottom: 1px solid var(--c-ramka); padding-bottom: var(--o-2); }
.przycisk-zakladki {
    padding: var(--o-2) var(--o-4);
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--c-tekst-2);
    font-size: var(--r-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--czas-baza), background var(--czas-baza);
}
.przycisk-zakladki:hover { color: var(--c-szarofiolet); background: var(--c-tlo2); }
.przycisk-zakladki.aktywna { color: #fff; background: var(--gradient-fiolet); }

.tresc-zakladki { display: none; }
.tresc-zakladki.aktywna { display: block; }

/* Siatka pakietow */
.siatka-pakietow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--o-6); }

.karta-pakietu {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--o-6);
    background: var(--c-tlo2);
    border: 1px solid var(--c-ramka);
    border-radius: 16px;
    transition: border-color var(--czas-baza), transform var(--czas-baza);
}
.karta-pakietu:hover { border-color: rgba(155,109,255,0.4); transform: translateY(-2px); }
.karta-pakietu.wyrozniona { border-color: var(--c-fiolet); box-shadow: 0 0 0 1px var(--c-fiolet); }

.etykieta-wyroznienia {
    position: absolute; top: -12px; left: var(--o-6);
    background: var(--gradient-fiolet);
    color: #fff;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
}

.nazwa-pakietu { font-family: var(--f-tytulowa); font-size: var(--r-xl); font-weight: 600; color: var(--c-tekst); margin-bottom: var(--o-4); display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap; }

.odznaka-link { font-family: var(--f-mono); font-size: 10px; padding: 2px 8px; border-radius: 100px; letter-spacing: 0.05em; }
.odznaka-link.follow { background: rgba(255,196,77,0.15); color: #ffc44d; }
.odznaka-link.sponsored { background: rgba(78,205,196,0.15); color: var(--c-cyjan); }

.ceny-pakietu { margin-bottom: var(--o-4); }
.cena-glowna-pakietu { font-family: var(--f-tytulowa); font-size: var(--r-3xl); font-weight: 700; color: var(--c-tekst); }
.cena-glowna-pakietu span { font-size: var(--r-base); color: var(--c-tekst-2); font-weight: 400; }
.cena-wybrane-pakietu { font-size: var(--r-sm); color: var(--c-tekst-2); margin-top: var(--o-1); }
.info-znizki-pakietu { display: inline-block; margin-top: var(--o-2); font-size: var(--r-xs); color: var(--c-cyjan); font-family: var(--f-mono); }

.czas-pakietu { font-size: var(--r-sm); color: var(--c-szarofiolet); margin-bottom: var(--o-4); display: flex; align-items: center; gap: var(--o-2); }
.odznaka-typu {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--c-powierzchnia);
    color: var(--c-szarofiolet);
}
.odznaka-typu.klikniecia { background: rgba(78,205,196,0.15); color: var(--c-cyjan); }

.cechy-pakietu { list-style: none; display: flex; flex-direction: column; gap: var(--o-2); margin-bottom: var(--o-4); flex: 1; }
.cechy-pakietu li { font-size: var(--r-sm); color: var(--c-szarofiolet); padding-left: var(--o-4); position: relative; line-height: 1.5; }
.cechy-pakietu li::before { content: '✓'; position: absolute; left: 0; color: var(--c-cyjan); }
.cechy-pakietu li.minus { color: var(--c-tekst-2); }
.cechy-pakietu li.minus::before { content: '✕'; color: var(--c-tekst-2); }

/* Gdzie reklama widoczna - akordeon */
.gdzie-wyswietlana { margin-bottom: var(--o-4); border-top: 1px solid var(--c-ramka); padding-top: var(--o-3); }
.naglowek-gdzie-wyswietlana {
    display: flex; align-items: center; gap: var(--o-2);
    font-size: var(--r-sm); color: var(--c-fiolet); cursor: pointer; font-weight: 600;
}
.strzalka-gdzie { transition: transform var(--czas-baza); font-style: normal; }
.naglowek-gdzie-wyswietlana.rozwiniety .strzalka-gdzie { transform: rotate(90deg); }
.lista-gdzie { display: none; margin-top: var(--o-3); max-height: 220px; overflow-y: auto; }
.lista-gdzie.widoczna { display: block; }
.lista-gdzie ul { list-style: none; font-size: var(--r-xs); color: var(--c-tekst-2); display: flex; flex-direction: column; gap: 4px; }
.lista-gdzie .podkategorie { padding-left: var(--o-4); margin-top: 4px; }

.przycisk-zamow {
    display: block; text-align: center;
    padding: var(--o-3) var(--o-4);
    background: var(--gradient-fiolet);
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    margin-top: auto;
    transition: opacity var(--czas-baza);
}
.przycisk-zamow:hover { opacity: 0.88; color: #fff; }

.brak-pakietow { color: var(--c-tekst-2); text-align: center; padding: var(--o-12) 0; }

/* Kody rabatowe */
.siatka-kodow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--o-4); margin-top: var(--o-6); }
.karta-kodu { padding: var(--o-4); background: var(--c-tlo2); border: 1px solid var(--c-ramka); border-radius: 14px; }
.naglowek-kodu { display: flex; align-items: center; justify-content: space-between; gap: var(--o-2); margin-bottom: var(--o-3); flex-wrap: wrap; }
.nazwa-kodu { font-weight: 600; color: var(--c-tekst); }
.odznaki-kodu { display: flex; gap: var(--o-2); }
.odznaka-znizki-kodu { font-family: var(--f-mono); font-size: 10px; background: rgba(78,205,196,0.15); color: var(--c-cyjan); padding: 3px 8px; border-radius: 100px; }
.odznaka-typu-kodu { font-family: var(--f-mono); font-size: 10px; background: var(--c-powierzchnia); color: var(--c-tekst-2); padding: 3px 8px; border-radius: 100px; text-transform: uppercase; }

.panel-podgladu-kodu { display: none; margin-bottom: var(--o-3); }
.panel-podgladu-kodu.widoczny { display: block; }
.naglowek-panelu-podgladu { font-family: var(--f-mono); font-size: var(--r-xs); color: var(--c-tekst-2); margin-bottom: var(--o-2); }
.ramka-podgladu-kodu { background: #fff; border-radius: 8px; overflow: hidden; }

.podglad-kodu {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-tekst-2);
    background: var(--c-tlo);
    border: 1px solid var(--c-ramka);
    border-radius: 8px;
    padding: var(--o-3);
    max-height: 90px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: var(--o-3);
}

.stopka-kodu { display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap; }
.przycisk-kopiuj, .przycisk-podglad-kod {
    padding: 6px var(--o-3);
    background: var(--c-powierzchnia);
    border: 1px solid var(--c-ramka);
    border-radius: 8px;
    color: var(--c-szarofiolet);
    font-size: var(--r-xs);
    cursor: pointer;
    transition: border-color var(--czas-baza), color var(--czas-baza);
}
.przycisk-kopiuj:hover, .przycisk-podglad-kod:hover { border-color: var(--c-fiolet); color: var(--c-mgielka); }
.przycisk-kopiuj.skopiowano { border-color: var(--c-cyjan); color: var(--c-cyjan); }
.przycisk-podglad-kod.aktywny { border-color: var(--c-fiolet); color: var(--c-fiolet); }
.tekst-znizki-stopka-kodu { font-size: var(--r-xs); color: var(--c-cyjan); font-family: var(--f-mono); }

.blok-jak-dziala-rabat {
    background: rgba(255,196,77,0.08);
    border: 1px solid rgba(255,196,77,0.25);
    border-radius: 12px;
    padding: var(--o-5, var(--o-4)) var(--o-6);
    margin-top: var(--o-6);
}
.blok-jak-dziala-rabat strong { color: var(--c-tekst); }
.blok-jak-dziala-rabat ol { margin: var(--o-2) 0 0; padding-left: var(--o-5, var(--o-4)); color: var(--c-szarofiolet); font-size: var(--r-sm); line-height: 1.8; }

/* Sekcje informacyjne (platnosci, regulamin) */
.sekcja-info { margin-top: var(--o-8); }
.sekcja-info h2 { font-family: var(--f-tytulowa); font-size: var(--r-xl); color: var(--c-tekst); margin-bottom: var(--o-4); }
.siatka-platnosci { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--o-4); }
.pozycja-platnosci { padding: var(--o-4); background: var(--c-tlo2); border: 1px solid var(--c-ramka); border-radius: 12px; }
.pozycja-platnosci h3 { font-size: var(--r-base); color: var(--c-tekst); margin-bottom: var(--o-2); }
.pozycja-platnosci p { font-size: var(--r-sm); color: var(--c-szarofiolet); line-height: 1.6; }

.link-wiecej-info { display: block; text-align: center; padding: var(--o-4) 0; margin-bottom: var(--o-2); color: var(--c-fiolet); font-weight: 600; font-size: var(--r-sm); }
.link-wiecej-info:hover { color: var(--c-mgielka); }

.tresc-regulaminu { color: var(--c-szarofiolet); line-height: 1.7; font-size: var(--r-sm); }

@media (max-width: 600px) {
    .siatka-pakietow { grid-template-columns: 1fr; }
}