/* "Short videos" strip + Reels viewer. Brand: red #D92228 / white / black. Self-contained: no Owl dependency, works on any page. */

/* the site gives every <i> a 7px side margin (ar.css/en.css) - icons inside round buttons must sit dead-centre */
.sv-section i, .sv-viewer i { margin: 0; }

/* ---------- section head (mirrors the owl top-nav arrows of the sibling sections) ---------- */
.sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sv-head .section-title { flex: 1 1 auto; min-width: 0; }
.sv-nav { display: flex; gap: 8px; flex-shrink: 0; padding-top: 6px; }
.sv-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #a4a4a4; border-radius: 2px; background: transparent; color: #a4a4a4; font-size: 20px; line-height: 1; padding: 0; cursor: pointer; transition: all .2s; }
.sv-nav-btn:hover { color: #424247; border-color: #424247; }
.sv-nav-btn:disabled { opacity: .35; cursor: default; }
/* ar.css already mirrors the fa-angle-left/right glyphs in Arabic, so the start/end icons need no extra flip per direction */

/* ---------- strip ---------- */
.sv-strip { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 12px; padding: 20px 12px 34px; margin: 0 -12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.sv-strip::-webkit-scrollbar { display: none; }
.sv-strip.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.sv-card { position: relative; flex: 0 0 232px; height: 412px; scroll-snap-align: start; border-radius: 18px; overflow: hidden; background: #111112; color: #fff; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, .08); transition: transform .25s ease, box-shadow .25s ease; outline: none; isolation: isolate; }
.sv-card:hover, .sv-card:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.sv-card:focus-visible { box-shadow: 0 0 0 3px rgba(217, 34, 40, .45); }
.sv-media { position: absolute; inset: 0; background: #000; }
.sv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0) 100%); }
.sv-duration { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px); pointer-events: none; unicode-bidi: isolate; }
.sv-duration i { font-size: 9px; margin-inline-end: 4px; }
.sv-fav { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 4; }
.sv-fav input { position: absolute; opacity: 0; width: 0; height: 0; }
.sv-fav label { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; line-height: 1; border-radius: 50%; background: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); color: #fff; font-size: 16px; cursor: pointer; transition: background .2s; }
.sv-fav label:hover { background: rgba(255, 255, 255, .38); }
.sv-fav input:checked + label { background: #D92228; }
.sv-fav input:checked + label i { font-weight: 900; }
.sv-info { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; padding: 14px; }
.sv-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.4; backdrop-filter: blur(6px); }
.sv-pill-cat { background: #D92228; color: #fff; }
.sv-pill-ago { background: rgba(255, 255, 255, .22); color: #fff; }
.sv-price { font-size: 20px; font-weight: 800; margin-top: 8px; line-height: 1.2; }
.sv-price small { font-size: 12px; font-weight: 700; opacity: .9; }
.sv-price-na { font-size: 14px; font-weight: 700; }
.sv-title { font-size: 13px; line-height: 1.45; margin-top: 4px; opacity: .95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-area { font-size: 12px; opacity: .85; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-area i { color: #D92228; margin-inline-end: 3px; }
.sv-details-btn { display: block; margin-top: 10px; background: #fff; color: #111112 !important; text-align: center; border-radius: 10px; padding: 9px 10px; font-size: 13px; font-weight: 700; transition: all .2s; }
.sv-details-btn:hover { background: #D92228; color: #fff !important; text-decoration: none; }

/* ---------- viewer (Reels: one video per screen, swipe / scroll up-down) ---------- */
.sv-lock, .sv-lock body { overflow: hidden !important; }
.sv-lock #toast-container, .sv-lock .swal2-container { z-index: 2147483647 !important; }
.sv-viewer { position: fixed; inset: 0; z-index: 2147483647; display: none; align-items: center; justify-content: center; background: rgba(8, 8, 10, .96); opacity: 0; transition: opacity .2s ease; }
.sv-viewer.is-visible { display: flex; }
.sv-viewer.is-open { opacity: 1; }
.sv-close { position: fixed; top: 16px; left: 16px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; cursor: pointer; transition: background .2s; }
.sv-close:hover { background: #D92228; }
.sv-stage-wrap { position: relative; height: min(92vh, 900px); width: calc(min(92vh, 900px) * 9 / 16); aspect-ratio: 9 / 16; max-width: 100vw; }
.sv-stage { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.sv-track { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.sv-track::-webkit-scrollbar { display: none; }
.sv-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; }
.sv-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; cursor: pointer; }
/* the card's image over the video until the first real frames play, then a soft cross-fade */
.sv-poster { position: absolute; inset: 0; z-index: 1; background: #000 center / contain no-repeat; opacity: 1; transition: opacity .35s ease; pointer-events: none; }
.sv-slide.is-playing .sv-poster { opacity: 0; }
.sv-slide-shade { position: absolute; inset-inline: 0; bottom: 0; height: 55%; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%); }
.sv-slide-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 66px calc(22px + env(safe-area-inset-bottom)) 12px; color: #fff; }
.sv-slide-info .sv-price { font-size: 24px; }
.sv-slide-info .sv-title { font-size: 14px; }
.sv-slide-info .sv-details-btn { display: inline-block; min-width: 150px; margin-top: 12px; padding: 10px 18px; }
.sv-rail { position: absolute; right: 2px; width: 60px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 4; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sv-rail-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 0; }
.sv-rail-btn i { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: background .2s, transform .2s; }
.sv-rail-btn:hover i { background: rgba(255, 255, 255, .3); transform: scale(1.06); }
.sv-rail-btn span { font-size: 10px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-rail-btn.is-on i { background: #D92228; font-weight: 900; }
.sv-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; z-index: 5; background: rgba(255, 255, 255, .22); }
.sv-progress i { display: block; height: 100%; width: 0; background: #D92228; }
.sv-spinner { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #D92228; border-radius: 50%; z-index: 3; display: none; animation: sv-spin .8s linear infinite; pointer-events: none; }
.sv-slide.is-loading .sv-spinner { display: block; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
.sv-paused { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; line-height: 1; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 28px; display: none; align-items: center; justify-content: center; z-index: 3; pointer-events: none; }
.sv-slide.is-paused .sv-paused { display: flex; }
.sv-slide.is-error .sv-paused, .sv-slide.is-error .sv-spinner { display: none; }
.sv-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 7; background: #fff; color: #111112; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sv-sound-hint { position: absolute; top: 18px; right: 18px; z-index: 4; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; display: none; backdrop-filter: blur(6px); }
.sv-sound-hint i { margin-inline-end: 6px; }
.sv-slide.show-sound-hint .sv-sound-hint { display: block; }
.sv-arrow { position: absolute; right: -64px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s; }
.sv-arrow:hover { background: #D92228; }
.sv-arrow:disabled { opacity: .3; cursor: default; background: rgba(255, 255, 255, .14); }
.sv-arrow-up { top: calc(50% - 56px); }
.sv-arrow-down { top: calc(50% + 8px); }

/* the 1260px container fits 5 cards exactly - stretch them so no sliver of the 6th peeks in */
@media (min-width: 1300px) {
    .sv-card { flex-basis: calc((100% - 64px) / 5); }
}

@media (max-width: 767px) {
    .sv-nav { display: none; }
    .sv-card { flex-basis: 176px; height: 312px; border-radius: 16px; }
    .sv-price { font-size: 17px; }
    .sv-details-btn { padding: 8px; font-size: 12px; }
    .sv-stage-wrap { height: 100%; width: 100%; aspect-ratio: auto; }
    .sv-stage { border-radius: 0; box-shadow: none; }
    .sv-arrow { display: none; }
    .sv-close { top: calc(12px + env(safe-area-inset-top)); }
    .sv-sound-hint { top: calc(16px + env(safe-area-inset-top)); }
}