/*
 * OVERLAY DESKTOP — i plotë i vetëmjaftueshëm
 * Aktiv: (min-width: 1025px)
 */

/* ── KUTI KLIKUESHME — SHIGJETA CEPASH ── */
.kuti-klikueshme { cursor: pointer; }
.kuti-cepat { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; }
.cep { position: absolute; width: 22px; height: 15px; pointer-events: none; display: block; }
.cep svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cep svg polygon { fill: #39ff14; stroke: #1a8a00; stroke-width: 0.5; stroke-linejoin: round; filter: drop-shadow(0 0 2px #39ff14) drop-shadow(0 0 4px rgba(57,255,20,0.4)); }
.cep-tl { top: 18px;    left: 18px; }
.cep-tr { top: 18px;    right: 18px; }
.cep-bl { bottom: 18px; left: 18px; }
.cep-br { bottom: 18px; right: 18px; }
.kuti-cepat.luaj { opacity: 1; }
.kuti-cepat.luaj .cep-tl { animation: cep-tl-anim 3s ease-in-out forwards; }
.kuti-cepat.luaj .cep-tr { animation: cep-tr-anim 3s ease-in-out forwards; }
.kuti-cepat.luaj .cep-bl { animation: cep-bl-anim 3s ease-in-out forwards; }
.kuti-cepat.luaj .cep-br { animation: cep-br-anim 3s ease-in-out forwards; }
.kuti-cepat.fshih { display: none; }

/* ── OVERLAY BACKDROP — desktop: transparent, modal 70vw×70vh ── */
#kuti-fs-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999999;
    display: flex;
    opacity: 0;
    pointer-events: none !important;
    background: rgba(0,0,0,0) !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    overflow: visible !important;
    transition: opacity 0.3s ease;
}
#kuti-fs-overlay.aktiv {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ── MODAL — desktop: 70vw × 70vh, flex-direction: row ── */
#kuti-fs-inner {
    width: 432px !important;
    height: 80vh !important;
    border-radius: 0 0 0 8px !important;
    margin: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative;
    background: #0a0a0a;
    display: flex;
}
.kuti-fs-media,
.kuti-fs-thumb {
    flex: 1 1 100% !important;
    position: relative !important;
    align-self: stretch !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
}
.kuti-fs-video {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
.kuti-fs-media ~ .kuti-fs-body,
.kuti-fs-thumb ~ .kuti-fs-body { display: none !important; }

/* ── TEKSTI MODAL ── */
.kuti-fs-body { flex: 1; padding: 20px 40px 20px 24px; overflow-y: auto; align-self: stretch; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.kuti-fs-title { color:#fff; font-size:clamp(1rem,2vw,1.5rem); text-transform:uppercase; margin:0 0 6px; line-height:1.2; }
.kuti-fs-date  { color:rgba(255,255,255,0.35); font-size:0.78rem; margin:0 0 14px; }
.kuti-fs-content { color:#ccc; font-size:clamp(0.85rem,1.3vw,1rem); line-height:1.7; }
.kuti-fs-content p { margin:0 0 0.9em; }
.kuti-fs-body--vetem-tekst .kuti-fs-content { font-size:clamp(0.95rem,2.5vw,1.15rem); white-space:pre-wrap; word-break:break-word; line-height:1.75; }
.kuti-fs-info { margin-top:16px; border-top:1px solid #222; padding-top:12px; }
.kuti-fs-info h4 { color:#ec0808; margin:0 0 4px; font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; }
.kuti-fs-info p  { color:#999; line-height:1.5; font-size:0.85rem; }

/* ── COUNTDOWN DESKTOP ── */
.kuti-fs-duration {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
    background: transparent;
    border: none;
    color: #b8ffcc;
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    padding: 4px 10px;
    z-index: 9999999 !important;
    pointer-events: none;
    letter-spacing: 3px;
    opacity: 0;
    cursor: pointer;
    text-shadow: 0 0 6px #83bd79, 0 0 14px rgba(161, 193, 155, 0.5);
}
.box .kuti-fs-duration {
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
}
.kuti-fs-duration.shfaq-x {
    animation: shfaq-controls-ls 0.6s ease forwards;
    pointer-events: auto;
}

/* ── OVERLAY STACK PANELS ── */
.kuti-overlay-stack-panel {
    position: absolute;
    right: 0;
    width: 432px;
    height: 60vh;
    z-index: 9999998;
    border-radius: 0 0 0 8px;
    overflow: hidden;
    background: #0a0a0a;
}
.kuti-overlay-stack-panel .kuti-fs-duration { display: none; }

/* ── LOADING DOTS ── */
.kuti-loading { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; }
.kuti-loading span { width:9px; height:9px; border-radius:50%; background:#fff; animation:kuti-bounce 1.1s ease-in-out infinite; }
.kuti-loading span:nth-child(2) { animation-delay:.18s; }
.kuti-loading span:nth-child(3) { animation-delay:.36s; }