/* ================================================
   Elementor Video Showcase v6.0
   Glassmorphism | Inline video | No popup
   ================================================ */

.evs-grid {
    display: grid;
    gap: 12px;
    width: 100%;
    isolation: isolate;
}
.evs-cols-1 { grid-template-columns: 1fr; }
.evs-cols-2 { grid-template-columns: repeat(2,1fr); }
.evs-cols-3 { grid-template-columns: repeat(3,1fr); }
.evs-cols-4 { grid-template-columns: repeat(4,1fr); }
@media(max-width:900px){ .evs-cols-3,.evs-cols-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:540px){ .evs-cols-2,.evs-cols-3,.evs-cols-4{grid-template-columns:1fr;} }

/* Card */
.evs-card {
    position: relative;
    height: 420px;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,.22),0 1px 4px rgba(0,0,0,.12);
    transition: transform .28s ease,box-shadow .28s ease;
}
.evs-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.32); }
.evs-card.is-playing { cursor:default; }
.evs-card.is-playing:hover { transform:none; box-shadow:0 4px 24px rgba(0,0,0,.22); }

/* Background */
.evs-card-bg {
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    background-color:#4a4a5a;
    transition:transform .45s ease;
}
.evs-card:hover:not(.is-playing) .evs-card-bg { transform:scale(1.05); }

/* Overlay */
.evs-overlay {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 45%,transparent 100%);
    pointer-events:none; transition:opacity .3s;
}

/* Platform badge */
.evs-platform-badge {
    position:absolute; top:14px; right:14px; z-index:3;
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    border:1px solid rgba(255,255,255,.32);
    box-shadow:0 2px 12px rgba(0,0,0,.18);
    pointer-events:none; transition:opacity .3s;
}
.evs-platform-badge svg { width:17px; height:17px; }

/* Play hint */
.evs-play-top {
    position:absolute; top:14px; left:14px; z-index:3;
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,140,0,.78);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.3);
    opacity:0; transform:scale(.8);
    transition:opacity .25s,transform .25s;
    pointer-events:none;
}
.evs-play-top svg { width:16px; height:16px; margin-left:2px; }
.evs-card:hover:not(.is-playing) .evs-play-top { opacity:1; transform:scale(1); }

/* Video container */
.evs-video-container {
    position:absolute; inset:0; z-index:10;
    border-radius:inherit; background:#000;
    display:none;
}
.evs-card.is-playing .evs-video-container { display:block; }

.evs-iframe {
    position:absolute; inset:0; width:100%; height:100%;
    border:none; display:none;
}
.evs-iframe.active { display:block; }

.evs-html5 {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; background:#000;
    display:none;
}
.evs-html5.active { display:block; }

.evs-embed-html {
    position:absolute; inset:0;
    overflow-y:auto; overflow-x:hidden;
    display:none; align-items:flex-start;
    justify-content:center; background:#fff;
}
.evs-embed-html.active { display:flex; }
.evs-embed-html blockquote,
.evs-embed-html iframe { max-width:100%!important; min-width:0!important; width:100%!important; margin:0!important; border:none!important; }

/* ── زر الإيقاف – بدون دائرة ── */
.evs-stop-btn {
    position:absolute;
    top:10px; right:10px;
    z-index:20;
    /* إلغاء كل شكل الزر */
    background:none;
    border:none;
    padding:0;
    margin:0;
    /* النص فقط */
    color:rgba(255,255,255,.85);
    font-size:20px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    /* ظل خفيف للقراءة على أي خلفية */
    text-shadow:0 1px 6px rgba(0,0,0,.8);
    transition:color .2s,transform .15s;
}
.evs-stop-btn:hover {
    color:#ff4d4d;
    transform:scale(1.2);
}

/* Hide elements when playing */
.evs-card.is-playing .evs-card-bg,
.evs-card.is-playing .evs-overlay,
.evs-card.is-playing .evs-platform-badge,
.evs-card.is-playing .evs-play-top,
.evs-card.is-playing .evs-info-bar {
    opacity:0; pointer-events:none; transition:opacity .3s;
}

/* Info bar – Glassmorphism */
.evs-info-bar {
    position:absolute; bottom:0; left:0; right:0; z-index:4;
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:10px 12px; margin:10px;
    border-radius:14px;
    background:rgba(12,10,6,.52);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1);
    transition:opacity .3s;
}
.evs-info-left {
    display:flex; align-items:center; gap:9px;
    overflow:hidden; flex:1; min-width:0;
}
.evs-prod-thumb {
    width:36px; height:36px; border-radius:50%;
    overflow:hidden; flex-shrink:0;
    border:2px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.15);
}
.evs-prod-thumb img { width:100%; height:100%; object-fit:cover; }
.evs-title-wrap { overflow:hidden; flex:1; min-width:0; }
.evs-title {
    display:block; font-size:13px; font-weight:700; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-shadow:0 1px 6px rgba(0,0,0,.5); margin-bottom:4px;
}
.evs-stats { display:flex; align-items:center; gap:8px; }
.evs-stat-item { display:flex; align-items:center; gap:3px; }
.evs-stat-icon { width:11px; height:11px; opacity:.75; color:#fff; flex-shrink:0; }
.evs-stat-val { font-size:10.5px; font-weight:600; color:rgba(255,255,255,.88); white-space:nowrap; }

/* Loading spinner */
.evs-loading {
    position:absolute; inset:0; z-index:15;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.55); border-radius:inherit;
}
.evs-spinner {
    width:36px; height:36px;
    border:3px solid rgba(255,255,255,.2);
    border-top-color:#fff; border-radius:50%;
    animation:evsSpin .8s linear infinite;
}
@keyframes evsSpin { to{transform:rotate(360deg);} }