/**
 * Psyche - STYLE "JAK DZIALA REKLAMA"
 * Ladowane wylacznie na reklama/informacje.php
 */

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

/* Spis tresci - siatka linkow pod hero */
.siatka-spisu-informacji {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o-2) var(--o-6);
    margin-bottom: var(--o-16);
    padding: var(--o-6);
    background: var(--c-tlo2);
    border: 1px solid var(--c-ramka);
    border-radius: 14px;
}
@media (max-width: 600px) { .siatka-spisu-informacji { grid-template-columns: 1fr; } }
.siatka-spisu-informacji a {
    font-size: var(--r-sm);
    color: var(--c-szarofiolet);
    transition: color var(--czas-baza);
}
.siatka-spisu-informacji a:hover { color: var(--c-fiolet); }

.sekcja-informacyjna { margin-bottom: var(--o-16); scroll-margin-top: calc(var(--wys-nav) + var(--o-4)); }

/* Ramki informacyjne kolorowane */
.ramka-info {
    padding: var(--o-4) var(--o-5, var(--o-4));
    border-radius: 12px;
    border: 1px solid var(--c-ramka);
    margin: var(--o-6) 0;
    font-size: var(--r-sm);
    line-height: 1.7;
    color: var(--c-szarofiolet);
}
.ramka-info strong { color: var(--c-tekst); }
.ramka-info.niebieska { background: rgba(78,205,196,0.08); border-color: rgba(78,205,196,0.25); }
.ramka-info.zielona   { background: rgba(120,200,140,0.08); border-color: rgba(120,200,140,0.25); }
.ramka-info.zolta     { background: rgba(255,196,77,0.08); border-color: rgba(255,196,77,0.25); }
.ramka-info.szara     { background: var(--c-powierzchnia); border-color: var(--c-ramka); }
.ramka-info.czerwona  { background: rgba(255,109,109,0.08); border-color: rgba(255,109,109,0.25); }

/* Schemat kliknięcia - flow diagram */
.schemat-klikniecia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-2); margin: var(--o-6) 0; }
.schemat-krok {
    padding: var(--o-2) var(--o-4);
    background: var(--c-powierzchnia);
    border: 1px solid var(--c-ramka);
    border-radius: 8px;
    font-size: var(--r-xs);
    font-family: var(--f-mono);
    color: var(--c-szarofiolet);
    white-space: nowrap;
}
.schemat-strzalka { color: var(--c-tekst-2); flex-shrink: 0; }

/* Tabela porownawcza */
.wrapper-tabeli-porownawczej { overflow-x: auto; }
.tabela-porownawcza { width: 100%; border-collapse: collapse; margin: var(--o-6) 0; font-size: var(--r-sm); }
.tabela-porownawcza th { padding: 10px 14px; background: var(--c-powierzchnia); color: var(--c-tekst); font-weight: 600; text-align: left; }
.tabela-porownawcza td { padding: 10px 14px; border-bottom: 1px solid var(--c-ramka); color: var(--c-szarofiolet); }
.tabela-porownawcza tr:nth-child(even) td { background: var(--c-tlo2); }
.tabela-porownawcza .tak { color: var(--c-cyjan); font-weight: 600; }
.tabela-porownawcza .nie { color: var(--c-tekst-2); }

.link-powrot { display: inline-block; margin-top: var(--o-4); color: var(--c-fiolet); font-weight: 600; font-size: var(--r-sm); }
.link-powrot:hover { color: var(--c-mgielka); }