/* ============================================================================
   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;
    }
}

/* ============================================================================
   Akcijska cena — oznaka "Sale" (Task 5, 09/2026), varijanta 2 "pilula uz cenu"
   Boje iz DESIGN.md: nebo-plava #0095da (obris i tekst), grafitno siva #323e48.
   Jednokratan odsjaj pri ucitavanju; ponovi se kad se promeni period.
   ========================================================================== */

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

.akc-pilula {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid #0095da;
    border-radius: 999px;
    color: #0095da;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    background: #ffffff;
}

/* odsjaj: uzan svetao trag prelazi sleva nadesno, jednom */
.akc-pilula::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, rgba(0,149,218,0) 0%, rgba(0,149,218,0.22) 50%, rgba(0,149,218,0) 100%);
    animation: akc-odsjaj 1.2s ease-out 0.4s 1 both;
    pointer-events: none;
}

.akc-pilula.akc-ponovo::after {
    animation: none;
}
.akc-pilula.akc-ponovo.akc-odsjaj-sad::after {
    animation: akc-odsjaj 1.2s ease-out 0s 1 both;
}

@keyframes akc-odsjaj {
    from { left: -60%; }
    to   { left: 120%; }
}

.akc-rok {
    font-size: 0.8125rem;
    color: #323e48;
    margin: -0.25rem 0 0.5rem;
}

/* smanjeno kretanje: pilula bez odsjaja, sve ostalo isto */
@media (prefers-reduced-motion: reduce) {
    .akc-pilula::after,
    .akc-pilula.akc-ponovo.akc-odsjaj-sad::after {
        animation: none;
        display: none;
    }
}

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