/* =========================================================
   akciok-site.css
   Az élő árlistán megjelenő akciós jelölések stílusa.
   Kapcsold be a <head>-ben, a style.css UTÁN.
   ========================================================= */

/* ===== Piros jelölés a gombon, becsukott állapotban is látszik ===== */
.collapsible {
    position: relative;
}

.akcio-badge-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    vertical-align: middle;
    animation: akcioPulse 2.4s ease-in-out infinite;
}

.akcio-badge-mini::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px #fff;
}

@keyframes akcioPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* ===== Kinyitott állapotban az ár sorban: eredeti ár áthúzva + akciós ár ===== */
.akcio-ar-blokk {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.akcio-regi-ar {
    text-decoration: line-through;
    text-decoration-color: rgba(156, 163, 175, 0.8);
    color: #9ca3af;
    font-size: 0.82em;
    font-weight: 400;
}

.akcio-uj-ar {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 1em;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    padding: 3px 11px;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
    letter-spacing: 0.2px;
}

@media (prefers-reduced-motion: reduce) {
    .akcio-badge-mini {
        animation: none;
    }
}