/* VirusTema: panel za izbor teme, prefiks .vt-. */
/* ===== SLOJ PANELA ===== */
#vt-efekti-sloj {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 10, 7, .58);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    animation: vt-eo-fade .22s ease both;
}

#vt-efekti-sloj.vt-eo-zatvara {
    animation: vt-eo-fade .18s ease reverse both;
    pointer-events: none;
}

@keyframes vt-eo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== PROZOR EFEKATA ===== */
.eo-prozor {
    width: min(540px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: #040f0a;
    border: 1px solid rgba(0, 255, 156, .55);
    border-radius: 12px;
    box-shadow:
        0 0 34px -6px rgba(0, 255, 156, .35),
        0 24px 60px -18px rgba(0, 0, 0, .8);
    color: #d6ffe9;
    text-align: left;
    animation: vt-eo-skok .26s cubic-bezier(.34, 1.3, .64, 1) both;
}

@keyframes vt-eo-skok {
    from { transform: translateY(10px) scale(.97); }
    to   { transform: none; }
}

.eo-zaglavlje {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 255, 156, .25);
}

.eo-naslov {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    color: #00ff9c;
    text-shadow: 0 0 8px rgba(0, 255, 156, .45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eo-zatvori {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 255, 156, .3);
    border-radius: 8px;
    background: transparent;
    color: #7fd6ab;
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.eo-zatvori:hover {
    color: #00ff9c;
    border-color: rgba(0, 255, 156, .7);
}

.eo-zatvori:focus-visible {
    outline: 2px solid #00ff9c;
    outline-offset: 2px;
}

.eo-telo {
    padding: 13px 14px;
    font-size: 11.5px;
    line-height: 1.55;
}

.eo-intro {
    color: #b8ffd9;
    margin-bottom: 10px;
}

.eo-intro b { color: #00ff9c; }

.eo-lista {
    list-style: none;
    display: grid;
    gap: 7px;
    margin: 0 0 11px;
    padding: 0;
}

.eo-lista li {
    padding: 8px 10px;
    border: 1px solid rgba(0, 255, 156, .18);
    border-radius: 8px;
    background: rgba(0, 255, 156, .05);
}

.eo-lista b {
    display: block;
    color: #00ff9c;
    font-size: 11px;
    margin-bottom: 2px;
}

.eo-lista span {
    color: #8edbb0;
    font-size: 10.5px;
}

.eo-upozorenje {
    color: #ffd166;
    font-size: 11px;
    margin-bottom: 9px;
}

.eo-xray {
    color: #6fc79a;
    font-size: 10.5px;
    border-top: 1px dashed rgba(0, 255, 156, .2);
    padding-top: 9px;
}

.eo-xray b { color: #8edbb0; }

.eo-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-top: 1px solid rgba(0, 255, 156, .25);
}

.eo-dugme {
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: #7fd6ab;
    background: rgba(0, 255, 156, .08);
    border: 1px solid rgba(0, 255, 156, .35);
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    min-height: 34px;
}

.eo-dugme:hover {
    background: rgba(0, 255, 156, .18);
    color: #b8ffd9;
}

.eo-dugme:focus-visible {
    outline: 2px solid #00ff9c;
    outline-offset: 2px;
}

.eo-dugme.eo-glavni {
    color: #04120b;
    background: #00ff9c;
    border-color: #00ff9c;
    box-shadow: 0 0 16px -4px rgba(0, 255, 156, .6);
}

.eo-dugme.eo-glavni:hover {
    background: #4dffc0;
    color: #04120b;
}

@media (max-width: 480px) {
    #vt-efekti-sloj { padding: 12px; }

    .eo-footer { flex-direction: column; }
    .eo-footer .eo-dugme { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #vt-efekti-sloj,
    .eo-prozor {
        animation: none;
    }
}