/* ============================================================================
   Izbor perioda naplate na cenovniku  (Task 3, 09/2026)
   Prefiks: per-   ·   Samo postojece vrednosti iz DESIGN.md, bez novih.
   Segmentirana kontrola: maglicasto siva podloga, aktivan segment bela pastila.
   ========================================================================== */

.per-izbor {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 0 0.75rem;
    background-color: #edf0f2;
    border-radius: 0.5rem;
}

.per-dugme {
    border: 0;
    background: transparent;
    color: #323e48;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    height: 2rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.per-dugme:hover {
    opacity: 0.8;
}

.per-dugme.aktivan {
    background-color: #ffffff;
    font-weight: 600;
    opacity: 1;
}

/* Outline je globalno ugasen na sajtu; da izbor ipak bude vidljiv tastaturom,
   fokus se oznacava podlogom, ne prstenom. */
.per-dugme:focus-visible {
    background-color: #ffffff;
    opacity: 1;
}

/* Preporucen paket je siri i izlazi iz reda — kontrola ostaje centrirana. */
.plan-holder .per-izbor {
    align-self: center;
}

@media (max-width: 991px) {
    .per-dugme {
        padding: 0 0.625rem;
    }
}

/* ============================================================================
   Akcija na cenovniku (Task 5; izgled 4, Milos 2026-09-29)
   Na sta je akcija, koliko jos traje i uslove kaze RECENICA u opisnom bloku iznad
   cenovnika (inc/inc-popust.php, aktonAkcijaRecenica); odbrojavanje u njoj je zuta
   pilula. Akcija na svim paketima tipa: i mala znacka u tabu (aktonAkcijaZnacka).
   Kartica na akciji (inc/inc-plan-kartica.php): precrtana cena; kad akcija nije na
   svim paketima reda, jos i pilula na gornjoj ivici, ISTA kao "Preporucujemo" (ista
   klasa .recommended-label).
   Okvira nema ni u jednom slucaju (Milos, 2026-09-30).
   Pre pocetka: ista zuta, drugi tekst ("počinje za"). Boje (DESIGN.md): zuta #FFD200
   = popust, na njoj uvek grafitni tekst #323e48.
   ========================================================================== */

.akc-stara {
    font-size: 0.55em;
    font-weight: 500;
    color: #8a949c;
    margin-right: 0.25rem;
    vertical-align: 0.35em;
}

/* Na kartici: precrtana cena u svom redu iznad, pa "iznos RSD" ostaje zajedno u redu kao i bez
   akcije. Kad izabrani period nema popust, precrtana je skrivena i red nema visinu. */
.plan-holder .akc-red-stara {
    display: block;
    font-size: 1.375rem;   /* precrtana ostaje iste velicine kao ranije (0.55 × 2.5rem) */
    line-height: 1.3;
}
.plan-holder .akc-red-stara .akc-stara {
    font-size: 1em;
    vertical-align: baseline;
}
/* nova cena u plavoj boji sajta (kao naslov paketa) dok se vidi precrtana stara (Milos 2026-09-30) */
.plan-holder .akc-red-stara:has(> .akc-stara:not([hidden])) + [data-per-broj] {
    color: #0095da;
}

/* Recenica u opisnom bloku: krupnija i podebljana od teksta iz admina ispod nje (Milos 2026-09-30);
   odbrojavanje je zuta pilula u recenici (oblik kao "Preporucujemo"), raste sa recenicom. Uslovi
   posle pilule ostaju obican tekst. Posle kraja akcije (prelaz bez osvezavanja) recenica nestaje. */
.akc-recenica {
    font-size: 1.125rem;
    font-weight: 600;
}
.akc-recenica-uslovi {
    font-size: 0.875rem;
    font-weight: 400;
}
.akc-pilula {
    display: inline-block;
    padding: 0.07em 0.57em;
    border-radius: 0.375rem;
    background-color: #FFD200;
    color: #323e48;
    font-weight: 600;
    white-space: nowrap;
}
.akc-recenica[data-akc-stanje="posle"] {
    display: none;
}
/* ...a blok bez teksta iz admina (samo recenica) nestaje ceo, da ne ostane prazan razmak */
.hosting-opis:has(> .akc-recenica[data-akc-stanje="posle"]:only-child) {
    display: none;
}

/* Kartica na akciji: samo mesto za pilulu na ivici (preporucena je vec pozicionirana).
   Bez okvira i senke — kartica inace izgleda kao ostale; akcija se na preporucenoj dopisuje
   u njenu pilulu. */
.section-tabs .plan-holder[data-akc-stanje]:not(.recommended) {
    position: relative;
}
/* pilula: izgled daje .recommended-label (style.css); tekst u jednom redu — i spojena na preporucenoj
   (apsolutna pilula sa left: 50% bi se inace lomila na pola sirine kartice) */
.akc-oznaka,
.plan-holder[data-akc-stanje] > .recommended-label {
    white-space: nowrap;
}
.plan-holder:not([data-akc-stanje="pre"]):not([data-akc-stanje="traje"]) > .akc-oznaka,
.plan-holder:not([data-akc-stanje="traje"]) .akc-oznaka-traje,
.plan-holder:not([data-akc-stanje="pre"]) .akc-oznaka-pre {
    display: none;
}

/* Puls u toku akcije: isti talas kao "Preporucujemo" (pulse-yellow iz style.css), ali ciklus 3 s,
   5 puta pa staje, tek kad pilula prvi put udje u ekran (js: akcPulsPosmatraj -> .akc-puls).
   Pilula u recenici i pilula kartice; spojena pilula preporucene ima svoj puls. */
.akc-recenica[data-akc-stanje="traje"] .akc-pilula.akc-puls,
.plan-holder[data-akc-stanje="traje"] > .akc-oznaka.akc-puls {
    animation: pulse-yellow 3s 5;
}

/* Znacka u tabu tipa hostinga (akcija na svim paketima): ista pilula, manja; posle kraja nestaje.
   Tab ima stalnu sirinu (style.css) — sa znackom se naziv ne lomi u dva reda. */
.akc-znacka {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.375rem;
    background-color: #FFD200;
    color: #323e48;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.akc-znacka[data-akc-stanje="posle"] {
    display: none;
}
.section-tabs .tabs .btn:has(> .akc-znacka) {
    white-space: nowrap;
}

/* Redovi ispod cene — samo kad se paketi u redu razlikuju po datumima ili uslovima */
.akc-rok {
    font-size: 0.8125rem;
    color: #323e48;
    margin: -0.25rem 0 0.5rem;
}

/* ============================================================================
   Poravnanje kartica u redu (09/2026)
   U redu u kome NEKA kartica ima akciju (najava, precrtana cena, odbrojavanje...)
   deo iznad dugmeta (.plan-vrh, v. inc/inc-plan-kartica.php) je u svim karticama
   iste visine — koliko najvisi — pa dugmad i spiskovi ispod stoje u istoj liniji.
   Red BEZ akcije se ne dira (izmereno: isti raspored piksel za piksel kao pre).
   Samo kad su kartice jedna pored druge (>= 992px, col-lg-*) i samo gde pregledac
   zna subgrid i :has; inace sve ostaje kao ranije. Kolona bez poznate sirine
   (npr. 5 paketa -> col-lg-2.4, nije Bootstrap klasa) ide preko celog reda.
   ========================================================================== */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
    @media (min-width: 992px) {
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) > .plans-col {
            width: auto;
            max-width: none;
            grid-column: span 12;
            grid-row: span 2;
            display: grid;
            grid-template-rows: subgrid;
            grid-template-columns: minmax(0, 1fr);   /* sirina = kolona, ne najsiri sadrzaj */
        }
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) > .col-lg-2 { grid-column: span 2; }
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) > .col-lg-3 { grid-column: span 3; }
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) > .col-lg-4 { grid-column: span 4; }
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) > .col-lg-6 { grid-column: span 6; }
        .plans-wrapper > .row:has(> .plans-col > .plan-holder[data-akc-stanje]) > .plans-col > .plan-holder {
            grid-row: span 2;
            display: grid;
            grid-template-rows: subgrid;
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

/* period koji promocija ne pokriva (Billing Cycles): precrtana cena i rok se
   skrivaju atributom hidden, koji JS prebacuje pri izboru perioda. Klase iznad
   postavljaju display, pa bez ovoga hidden ne bi imao efekta. */
.plan-holder [hidden] {
    display: none !important;
}

/* smanjeno kretanje: pilule stoje, bez pulsa */
@media (prefers-reduced-motion: reduce) {
    .akc-recenica[data-akc-stanje="traje"] .akc-pilula.akc-puls,
    .plan-holder[data-akc-stanje="traje"] > .akc-oznaka.akc-puls {
        animation: none;
    }
}

/* u korpi: precrtana puna cena uz snizenu */
.cart-section .cart-item-price .akc-stara {
    font-size: 0.75em;
    vertical-align: 0.2em;
}