/* ── Page ─────────────────────────────────────────────────────── */
.ls-page { direction:rtl; }
.ls-container { width:100%; max-width:1280px; margin:0 auto; padding:0 12px; }

/* ── Hero ─────────────────────────────────────────────────────── */
.ls-hero { background:linear-gradient(135deg,#117098 0%,#07426a 100%); padding:32px 0 28px; }
.ls-hero-title { font-family:DIN-Bold,sans-serif; font-size:1.8rem; color:#fff; margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.ls-hero-title i { opacity:.85; }

/* Search */
.ls-search { display:flex; direction:rtl; max-width:520px; }
.ls-search input { flex:1; padding:10px 14px; border:none; border-radius:8px 0 0 8px; font-family:DIN-Regular,sans-serif; font-size:14px; color:#1c2433; outline:none; direction:rtl; text-align:right; }
.ls-search button { padding:10px 18px; background:#c8961c; color:#fff; border:none; border-radius:0 8px 8px 0; font-family:DIN-Bold,sans-serif; font-size:14px; cursor:pointer; transition:background .2s; display:flex; align-items:center; gap:6px; }
.ls-search button:hover { background:#a67a14; }

/* ── Grid ─────────────────────────────────────────────────────── */
.ls-section { padding:28px 0 56px; }
.ls-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:900px){ .ls-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .ls-grid{ grid-template-columns:1fr; } }

/* ── Card ─────────────────────────────────────────────────────── */
.ls-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(28,38,54,.07); text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; }
.ls-card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(28,38,54,.13); }

.ls-card-img { position:relative; overflow:hidden; height:210px; background:#0a2d42; }
.ls-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.ls-card:hover .ls-card-img img { transform:scale(1.05); }

/* play overlay */
.ls-card-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.22); opacity:0; transition:opacity .25s; }
.ls-card:hover .ls-card-overlay { opacity:1; }
.ls-card-overlay i { font-size:3rem; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* badges */
.ls-badge-live { position:absolute; top:10px; right:10px; background:#e02020; color:#fff; font-family:DIN-Bold,sans-serif; font-size:12px; border-radius:4px; padding:3px 9px; display:flex; align-items:center; gap:5px; letter-spacing:.3px; }
.ls-badge-live::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:#fff; animation:livepulse 1.2s infinite; }
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.ls-badge-featured { position:absolute; top:10px; left:10px; background:#c8961c; color:#fff; font-family:DIN-Bold,sans-serif; font-size:11px; border-radius:4px; padding:3px 9px; }

.ls-card-body { padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; }
.ls-card-title { font-family:DIN-Bold,sans-serif; font-size:.95rem; color:#1c2433; margin:0 0 8px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ls-card-meta { font-family:DIN-Regular,sans-serif; font-size:12px; color:#8a9aaa; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; }
.ls-card-meta i { color:#117098; }

/* ── Empty ─────────────────────────────────────────────────────── */
.ls-empty { text-align:center; padding:64px 0; color:#aab; }
.ls-empty i { font-size:3.5rem; display:block; margin-bottom:12px; }
.ls-empty p { font-family:DIN-Regular,sans-serif; font-size:15px; }

/* ── Pagination ────────────────────────────────────────────────── */
.ls-pages { margin-top:32px; display:flex; justify-content:center; }
.ls-pages .pagination { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.ls-pages .page-item .page-link { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid #dde3ec; border-radius:8px; font-family:DIN-Regular,sans-serif; font-size:14px; color:#485264; text-decoration:none; transition:all .2s; }
.ls-pages .page-item.active .page-link, .ls-pages .page-item .page-link:hover { background:#117098; border-color:#117098; color:#fff; }