/* =============================================================================
   pokloni.css - strana /pokloni (vidi app/kontroleri/pokloni.php). Boje i font su iz main.css (promenljive --b-*, --p*).
   ============================================================================= */
.pk-strana {
    width: 100%;
    max-width: 920px;
    margin: 8px auto 40px;
}

.pk-strana h1 {
    font-size: 24px;
    font-weight: 500;
    margin: 8px 0 6px;
}

.pk-strana h2 {
    font-size: 17px;
    font-weight: 500;
    margin: 28px 0 12px;
}

.pk-uvod {
    margin: 0 0 16px;
    color: var(--pmu);
    max-width: 640px;
}

.pk-stanje {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    max-width: 420px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--b-soft);
    color: #14201A;
}

.pk-stanje strong {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
}

.pk-gost {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--pcard);
    border: .5px solid var(--pline);
    border-radius: 12px;
    max-width: 520px;
}

.pk-gost p {
    margin: 0;
    color: var(--pmu);
}

.pk-stanje[hidden],
.pk-gost[hidden],
.pk-moji[hidden],
.pk-uzmi[hidden],
.pk-kartica[hidden] {
    display: none;
}

.pk-poruka {
    margin-top: 12px;
    font-size: 14px;
    min-height: 1.4em;
}

.pk-poruka.greska {
    color: #B42318;
}

.pk-poruka.dobro {
    color: #1F7A3F;
}

.pk-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.pk-kartica {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--pcard);
    border: .5px solid var(--pline);
    border-radius: 14px;
}

.pk-kartica h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.pk-kartica p {
    margin: 0;
}

.pk-firma {
    color: var(--b-ink);
    font-size: 13px;
}

.pk-opis {
    color: var(--pmu);
    font-size: 14px;
}

.pk-vrednost {
    font-size: 14px;
}

.pk-uslovi,
.pk-sitno {
    color: var(--pmu);
    font-size: 12.5px;
}

.pk-podnozje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.pk-cena {
    font-size: 14px;
    color: var(--pmu);
}

.pk-cena b {
    color: var(--ptx);
    font-size: 18px;
    font-weight: 500;
}

.pk-uzmi {
    padding: 9px 16px;
    font: inherit;
    font-weight: 500;
    color: var(--b-on);
    background: var(--b-pa);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.pk-uzmi:hover:not([disabled]) {
    filter: brightness(.94);
}

.pk-uzmi[disabled] {
    color: var(--pmu);
    background: var(--pbg);
    cursor: default;
}

.pk-uzmi.pk-potvrdi {
    background: var(--ptx);
    color: #fff;
}

.pk-prazno {
    color: var(--pmu);
}

.pk-vauceri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.pk-vaucer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: var(--pcard);
    border: .5px solid var(--pline);
    border-radius: 14px;
}

.pk-vaucer small {
    color: var(--pmu);
    font-size: 12.5px;
}

.pk-vaucer-vrh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pk-vaucer-vrh strong {
    font-weight: 500;
}

.pk-znacka {
    flex: none;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 12px;
    background: var(--b-soft);
    color: #14201A;
}

.pk-istekao,
.pk-iskoriscen,
.pk-storniran {
    opacity: .65;
}

.pk-istekao .pk-znacka,
.pk-iskoriscen .pk-znacka,
.pk-storniran .pk-znacka {
    background: var(--pbg);
    color: var(--pmu);
}

.pk-kod-blok {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.pk-qr {
    flex: none;
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    background: #fff;
    border: .5px solid var(--pline);
    border-radius: 8px;
    padding: 6px;
}

.pk-kod-tekst {
    display: grid;
    gap: 2px;
}

.pk-kod-tekst span {
    font-size: 12px;
    color: var(--pmu);
}

.pk-kod {
    white-space: nowrap;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .06em;
}

.pk-pravila ol,
.pk-pravila ul {
    margin: 0;
    padding-left: 20px;
    color: var(--pmu);
    font-size: 14px;
    list-style: revert;
}

.pk-pravila li {
    margin: 6px 0;
}

@media (max-width: 560px) {
    .pk-kod-blok {
        flex-direction: column;
        align-items: flex-start;
    }
}