/* ==========================================================
   Video Manager Pro v1.6.0 — Frontend CSS
   Autor: Miroslav Vasiljević | megatronik.ba
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --ink:         #0a0a0a;
    --paper:       #f5f2ec;
    --gold:        #c8a96e;
    --gold-dim:    #8a7048;
    --ash:         #141414;
    --smoke:       #1e1e1e;
    --line:        rgba(200,169,110,.18);
    --ef:          cubic-bezier(.25,.46,.45,.94);
    --es:          cubic-bezier(.34,1.56,.64,1);
}

.vm-cinema-page *, .vm-cinema-page *::before, .vm-cinema-page *::after {
    box-sizing:border-box; margin:0; padding:0;
}
.vm-cinema-page {
    font-family:'Inter',system-ui,sans-serif;
    background:var(--ink); color:var(--paper); min-height:100vh;
}

/* ── HERO ───────────────────────────────────────────────── */
.vm-hero {
    position:relative; padding:52px 48px 44px;
    border-bottom:1px solid var(--line); overflow:hidden;
}
.vm-hero::before {
    content:''; position:absolute; inset:0;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(200,169,110,.025) 48px,rgba(200,169,110,.025) 49px),
        repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(200,169,110,.025) 48px,rgba(200,169,110,.025) 49px);
    pointer-events:none;
}
.vm-hero-inner {
    position:relative; max-width:1400px; margin:0 auto;
    display:flex; align-items:flex-end;
    justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.vm-eyebrow {
    font-size:9px; font-weight:600; letter-spacing:4px;
    text-transform:uppercase; color:var(--gold);
    margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.vm-eyebrow::before { content:''; width:28px; height:1px; background:var(--gold); }
.vm-hero-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(38px,7vw,80px); font-weight:300;
    line-height:.92; letter-spacing:-2px; color:var(--paper);
}
.vm-hero-title em { font-style:italic; color:var(--gold); }
.vm-hero-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; padding-bottom:4px; }
.vm-hero-count { font-family:'Cormorant Garamond',serif; font-size:52px; font-weight:300; line-height:1; letter-spacing:-2px; color:var(--paper); }
.vm-hero-count-label { font-size:9px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dim); }

/* ── SEARCH + FILTER BAR ────────────────────────────────── */
.vm-search-bar {
    background:rgba(10,10,10,.95);
    border-bottom:1px solid var(--line);
    padding:14px 48px;
    position:sticky; top:0; z-index:100;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.vm-search-inner {
    max-width:1400px; margin:0 auto;
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.vm-search-form { flex:1; min-width:220px; }
.vm-search-wrap {
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:6px; padding:0 14px;
    transition:border-color .2s;
}
.vm-search-wrap.vm-search-focused { border-color:var(--gold); }
.vm-search-icon { width:16px; height:16px; stroke:rgba(245,242,236,.3); flex-shrink:0; }
.vm-search-input {
    background:none; border:none; outline:none;
    font-family:'Inter',sans-serif; font-size:13px;
    color:var(--paper); padding:10px 0; flex:1;
    caret-color:var(--gold);
}
.vm-search-input::placeholder { color:rgba(245,242,236,.3); }
.vm-search-clear {
    color:rgba(245,242,236,.4); font-size:12px; text-decoration:none;
    padding:4px; border-radius:3px; transition:color .15s; flex-shrink:0;
}
.vm-search-clear:hover { color:var(--gold); }
.vm-cat-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.vm-cat-btn {
    font-family:'Inter',sans-serif; font-size:10px; font-weight:500;
    letter-spacing:1.5px; text-transform:uppercase;
    padding:5px 14px; border-radius:3px;
    border:1px solid rgba(255,255,255,.08);
    color:rgba(245,242,236,.35); text-decoration:none;
    transition:all .2s var(--ef);
}
.vm-cat-btn:hover { border-color:var(--gold); color:var(--gold); }
.vm-cat-btn.active { background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* ── CONTENT ────────────────────────────────────────────── */
.vm-content { max-width:1400px; margin:0 auto; padding:44px 48px 80px; }

/* ── DANAS OBJAVLJENO ───────────────────────────────────── */
.vm-today-section {
    margin-bottom:44px;
    padding:24px 28px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--line);
    border-radius:10px;
}
.vm-today-header {
    display:flex; align-items:center; gap:12px;
    margin-bottom:20px;
}
.vm-live-dot {
    width:8px; height:8px; border-radius:50%;
    background:#e53e3e;
    box-shadow:0 0 0 0 rgba(229,62,62,.4);
    animation:vm-pulse 1.8s infinite;
    flex-shrink:0;
}
@keyframes vm-pulse {
    0%   { box-shadow:0 0 0 0 rgba(229,62,62,.5); }
    70%  { box-shadow:0 0 0 10px rgba(229,62,62,0); }
    100% { box-shadow:0 0 0 0 rgba(229,62,62,0); }
}
.vm-today-label {
    font-size:11px; font-weight:600; letter-spacing:3px;
    text-transform:uppercase; color:#e53e3e;
}
.vm-today-date { font-size:11px; color:var(--gold-dim); letter-spacing:1px; margin-left:auto; }
.vm-today-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:14px;
}
.vm-today-time-badge {
    position:absolute; bottom:8px; right:8px; z-index:3;
    background:rgba(229,62,62,.85);
    color:#fff; font-size:10px; font-weight:600;
    padding:2px 7px; border-radius:3px; letter-spacing:.5px;
}

/* ── FEATURED ───────────────────────────────────────────── */
.vm-featured-card {
    position:relative; aspect-ratio:21/9; border-radius:8px;
    overflow:hidden; cursor:pointer; margin-bottom:44px;
    background:var(--ash); border:1px solid rgba(255,255,255,.04);
}
.vm-featured-card::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to right,rgba(0,0,0,.88) 0%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.04) 100%);
    z-index:1; transition:opacity .4s;
}
.vm-featured-card:hover::after { opacity:.75; }
.vm-featured-bg {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform 1.2s var(--ef); filter:saturate(.7) brightness(.8);
}
.vm-featured-card:hover .vm-featured-bg { transform:scale(1.04); }
.vm-featured-bg-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,#0d0d1a,#111827,#0a1628); }
.vm-featured-info { position:absolute; bottom:0; left:0; right:0; padding:36px 40px 32px; z-index:2; }
.vm-featured-label {
    font-size:9px; font-weight:600; letter-spacing:4px; text-transform:uppercase;
    color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.vm-featured-label::before { content:''; width:5px; height:5px; background:var(--gold); border-radius:50%; }
.vm-feat-cat {
    background:rgba(200,169,110,.2); border:1px solid rgba(200,169,110,.3);
    padding:1px 8px; border-radius:3px; font-size:9px;
}
.vm-featured-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(22px,4vw,46px); font-weight:300;
    line-height:1.1; color:var(--paper); margin-bottom:18px; max-width:560px;
}
.vm-featured-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.vm-featured-date { font-size:10px; color:rgba(245,242,236,.4); letter-spacing:1.5px; }
.vm-featured-views { font-size:10px; color:rgba(245,242,236,.35); letter-spacing:1px; }
.vm-featured-play {
    display:flex; align-items:center; gap:8px;
    padding:10px 22px; background:var(--gold); color:var(--ink);
    border:none; border-radius:2px; font-size:9px; font-weight:600;
    letter-spacing:2.5px; text-transform:uppercase; cursor:pointer;
    transition:background .2s var(--ef);
}
.vm-featured-play:hover { background:#d4b67a; }
.vm-play-icon-svg { width:8px; height:8px; fill:var(--ink); }

/* ── SECTION HEADER ─────────────────────────────────────── */
.vm-section-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:22px;
}
.vm-section-title {
    font-family:'Cormorant Garamond',serif;
    font-size:22px; font-weight:300; color:var(--paper); white-space:nowrap;
}
.vm-section-line { flex:1; height:1px; background:var(--line); margin:0 20px; }
.vm-section-num { font-size:10px; color:var(--gold-dim); letter-spacing:2px; }

/* ── GRID ───────────────────────────────────────────────── */
.vm-frontend-grid {
    display:grid;
    grid-template-columns:repeat(var(--vm-cols,4),minmax(0,1fr));
    gap:20px;
}
@media(max-width:1100px){ .vm-frontend-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:720px) { .vm-frontend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} }
@media(max-width:480px) { .vm-frontend-grid{grid-template-columns:1fr;} }

/* ── VIDEO CARD ─────────────────────────────────────────── */
.vm-video-card {
    background:var(--ash); border-radius:6px; overflow:hidden;
    cursor:pointer; border:1px solid rgba(255,255,255,.04);
    transition:border-color .3s var(--ef),transform .35s var(--ef),box-shadow .35s;
    position:relative; display:flex; flex-direction:column;
    will-change:transform;
}
.vm-video-card:hover {
    border-color:rgba(200,169,110,.22);
    transform:translateY(-5px);
    box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.vm-video-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.vm-video-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:0; z-index:2; transition:opacity .3s var(--ef);
}
.vm-video-card:hover::before { opacity:1; }
.vm-card-featured { border-color:rgba(200,169,110,.3)!important; }

/* Thumb */
.vm-thumb-wrap {
    position:relative; aspect-ratio:16/9;
    overflow:hidden; background:var(--smoke);
}
.vm-thumb-img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .8s var(--ef),filter .4s;
    filter:brightness(.88) saturate(.8);
}
.vm-video-card:hover .vm-thumb-img {
    transform:scale(1.06);
    filter:brightness(.5) saturate(.5);
}
.vm-thumb-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:var(--smoke);
}
.vm-thumb-placeholder-icon {
    width:32px; height:32px; border:1px solid rgba(200,169,110,.18); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.vm-thumb-placeholder-icon svg { width:10px; height:10px; fill:rgba(200,169,110,.3); }

/* ── HOVER VIDEO PREVIEW ────────────────────────────────── */
.vm-hover-preview {
    position:absolute; inset:0; z-index:1;
    opacity:0; transition:opacity .3s var(--ef);
    background:#000;
}
.vm-hover-preview.vm-hover-active { opacity:1; }
.vm-hover-video {
    width:100%; height:100%; object-fit:cover; display:block;
}

/* Play overlay */
.vm-play-overlay {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center; z-index:4;
}
.vm-play-btn {
    width:48px; height:48px;
    border:1.5px solid rgba(245,242,236,.5); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.5) rotate(-15deg);
    transition:opacity .28s var(--ef),transform .3s var(--es),border-color .2s;
}
.vm-video-card:hover .vm-play-btn { opacity:1; transform:scale(1) rotate(0); }
.vm-play-btn:hover { border-color:var(--gold); }
.vm-play-triangle {
    width:0; height:0; border-style:solid;
    border-width:5.5px 0 5.5px 10px;
    border-color:transparent transparent transparent var(--paper);
    margin-left:3px;
}

/* Badges */
.vm-card-feat-badge {
    position:absolute; top:8px; left:8px; z-index:5;
    background:rgba(200,169,110,.9); color:var(--ink);
    font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    padding:3px 8px; border-radius:2px;
}
.vm-card-new-ribbon {
    position:absolute; top:8px; right:8px; z-index:5;
    background:rgba(229,62,62,.85); color:#fff;
    font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    padding:3px 8px; border-radius:2px;
}

/* Card info */
.vm-card-info {
    padding:12px 14px 14px; flex:1;
    display:flex; flex-direction:column; gap:6px;
    border-top:1px solid rgba(255,255,255,.04);
}
.vm-card-meta-top {
    display:flex; align-items:center; justify-content:space-between;
}
.vm-card-date {
    font-size:10px; font-weight:500; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--gold-dim);
}
.vm-view-count {
    font-size:10px; color:rgba(245,242,236,.25);
    letter-spacing:.5px;
}
.vm-card-title {
    font-family:'Cormorant Garamond',serif;
    font-size:15px; font-weight:400; line-height:1.3;
    color:rgba(245,242,236,.82);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .2s;
}
.vm-video-card:hover .vm-card-title { color:#fff; }
.vm-card-cat {
    font-size:9px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--gold-dim); margin-top:2px;
}

/* ── PAGINACIJA ─────────────────────────────────────────── */
.vm-frontend-pagination {
    margin-top:56px; display:flex; flex-direction:column;
    align-items:center; gap:16px;
}
.vm-pagination-line {
    width:100%; height:1px; background:var(--line); position:relative; margin-bottom:6px;
}
.vm-pagination-line::after {
    content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; background:var(--gold); border-radius:50%;
}
.vm-page-info { font-size:9px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dim); }
.vm-page-buttons { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; }
.vm-page-num, .vm-page-nav {
    font-family:'Inter',sans-serif;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; padding:0 8px; border-radius:3px;
    font-size:12px; font-weight:500; letter-spacing:1px; text-decoration:none;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.02);
    color:rgba(245,242,236,.32);
    transition:all .2s var(--ef); cursor:pointer;
}
.vm-page-num:hover,.vm-page-nav:hover { border-color:var(--gold); color:var(--gold); background:rgba(200,169,110,.05); }
.vm-page-nav { padding:0 16px; font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.vm-page-num.active { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600; }
.vm-page-ellipsis { color:rgba(245,242,236,.2); padding:0 6px; font-size:14px; align-self:center; }

/* ── EMPTY STATE ────────────────────────────────────────── */
.vm-no-videos { text-align:center; padding:100px 20px; }
.vm-no-videos-icon {
    width:64px; height:64px; border:1px solid var(--line); border-radius:50%;
    margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
}
.vm-no-videos-icon svg { width:24px; height:24px; stroke:var(--gold-dim); }
.vm-no-videos-title { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:300; color:var(--paper); margin-bottom:8px; }
.vm-no-videos-sub { font-size:12px; color:rgba(245,242,236,.3); letter-spacing:1.5px; }

/* ── MODAL ──────────────────────────────────────────────── */
.vm-modal-overlay {
    position:fixed; inset:0; z-index:99999;
    background:rgba(0,0,0,.97);
    display:none; align-items:center; justify-content:center; padding:24px;
}
.vm-modal-overlay.vm-open { display:flex; animation:vm-fade-in .22s var(--ef); }
@keyframes vm-fade-in { from{opacity:0} to{opacity:1} }
.vm-modal-box {
    width:100%; max-width:1100px;
    animation:vm-slide-up .3s var(--es);
}
@keyframes vm-slide-up {
    from{transform:translateY(36px) scale(.97);opacity:0}
    to  {transform:translateY(0) scale(1);opacity:1}
}
.vm-modal-strip {
    height:26px; background:#111;
    display:flex; align-items:center; justify-content:space-around; padding:0 6px;
    border-radius:8px 8px 0 0;
    border:1px solid rgba(255,255,255,.06); border-bottom:none;
}
.vm-modal-strip-hole {
    width:11px; height:15px; background:#0a0a0a;
    border-radius:2px; border:1px solid rgba(255,255,255,.07);
}
.vm-modal-video { display:block; width:100%; max-height:72vh; background:#000; }
.vm-modal-footer {
    background:#111; padding:12px 20px;
    border:1px solid rgba(255,255,255,.06); border-top:none;
    border-radius:0 0 8px 8px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.vm-modal-title {
    font-family:'Cormorant Garamond',serif;
    font-size:18px; font-weight:300; color:var(--paper); flex:1;
}
.vm-modal-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.vm-modal-views { font-size:11px; color:rgba(245,242,236,.35); letter-spacing:1px; }
.vm-modal-share, .vm-modal-close {
    width:32px; height:32px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:50%; color:rgba(245,242,236,.45);
    font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s var(--ef);
}
.vm-modal-share svg { display:block; }
.vm-modal-share:hover, .vm-modal-close:hover {
    border-color:var(--gold); color:var(--gold); background:rgba(200,169,110,.1);
}

/* ── HIDE WP/ELEMENTOR UI ───────────────────────────────── */
.vm-filter-bar { display:none; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:768px){
    .vm-hero         { padding:40px 20px 32px; }
    .vm-search-bar   { padding:12px 20px; }
    .vm-content      { padding:32px 16px 56px; }
    .vm-featured-info{ padding:20px 20px 18px; }
    .vm-featured-play{ display:none; }
    .vm-today-grid   { grid-template-columns:repeat(2,1fr); }
}