/* "استكشف" videos page (front/explore/index). Full screen vertical videos like the app. */
:root { --ex-accent: #fe7e00; --ex-danger: #ff3b4f; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body.ex-body {
    margin: 0; background: #000; color: #fff; overflow: hidden;
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
.ex-body a { color: inherit; text-decoration: none; }
.ex-body button { font: inherit; color: inherit; }

.ex { position: relative; height: 100vh; height: 100dvh; width: 100%; margin: 0 auto; background: #000; overflow: hidden; }

/* ---------- top: tabs + close ---------- */
.ex-top {
    position: absolute; top: 0; inset-inline: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    padding: calc(14px + env(safe-area-inset-top)) 64px 14px; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .55), transparent);
}
.ex-tabs { display: flex; gap: 22px; pointer-events: auto; }
.ex-tabs a {
    position: relative; padding: 6px 2px 10px; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, .7);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5); transition: color .2s;
}
.ex-tabs a.is-active { color: #fff; }
.ex-tabs a.is-active::after {
    content: ""; position: absolute; bottom: 0; left: 50%; width: 46px; height: 3px; border-radius: 3px;
    background: var(--ex-accent); transform: translateX(-50%);
}
.ex-close {
    position: absolute; top: calc(10px + env(safe-area-inset-top)); inset-inline-end: 14px; pointer-events: auto;
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(30, 30, 30, .75); backdrop-filter: blur(6px); transition: background .2s;
}
.ex-close:hover { background: rgba(60, 60, 60, .9); }
.ex-close svg { width: 22px; height: 22px; }

/* ---------- feed ---------- */
.ex-feed {
    height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ex-feed::-webkit-scrollbar { display: none; }
.ex-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }

.ex-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ex-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-media iframe, .ex-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: cover; }
.ex-media iframe { opacity: 0; transition: opacity .4s; }
.ex-media.is-ready iframe { opacity: 1; }

.ex-tap { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ex-tap:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: -4px; }
.ex-paused {
    position: absolute; top: 50%; left: 50%; z-index: 3; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); pointer-events: none;
    opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s;
}
.ex-paused svg { width: 34px; height: 34px; margin-inline-start: 4px; }
.ex-slide.is-paused .ex-paused { opacity: 1; transform: none; }

/* bottom shade so the text is readable */
.ex-slide::after {
    content: ""; position: absolute; inset: auto 0 0; height: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}

/* ---------- side buttons ---------- */
.ex-side {
    position: absolute; z-index: 4; inset-inline-end: 12px; bottom: calc(150px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ex-avatar {
    width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #fe7e00 center / cover no-repeat;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35); margin-bottom: 4px;
}
.ex-act {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); -webkit-tap-highlight-color: transparent;
}
.ex-act--static { cursor: default; }
.ex-act svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); transition: transform .15s, color .2s; }
.ex-act:active svg { transform: scale(.88); }
.ex-act--like svg { fill: transparent; }
.ex-act--like.is-active svg { fill: var(--ex-danger); color: var(--ex-danger); animation: ex-pop .35s ease-out; }
.ex-act--sound svg { width: 26px; height: 26px; }
.ex-act--sound { width: 44px; height: 44px; min-width: 0; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.ex-sound-on { display: none; }
.ex.is-unmuted .ex-sound-on { display: block; }
.ex.is-unmuted .ex-sound-off { display: none; }
@keyframes ex-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ---------- title + store button ---------- */
.ex-info {
    position: absolute; z-index: 4; inset-inline: 16px 80px; bottom: calc(26px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.ex-title {
    margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ex-store {
    display: inline-flex; align-items: center; gap: 12px; padding: 6px; padding-inline-end: 24px; border-radius: 40px;
    background: rgba(40, 40, 40, .78); backdrop-filter: blur(6px); font-size: 16px; font-weight: 700; transition: background .2s;
}
.ex-store:hover { background: var(--ex-accent); }
.ex-store__icon { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; }
.ex-store__icon svg { width: 22px; height: 22px; }

/* ---------- swipe hint / empty ---------- */
.ex-hint {
    position: absolute; z-index: 6; bottom: calc(110px + env(safe-area-inset-bottom)); left: 50%; margin: 0; transform: translateX(-50%);
    padding: 8px 16px; border-radius: 20px; background: rgba(0, 0, 0, .6); font-size: 13px; white-space: nowrap; pointer-events: none;
    animation: ex-hint 2.4s ease-in-out 1s 2 both;
}
@keyframes ex-hint { 0%, 100% { opacity: 0; transform: translate(-50%, 10px); } 20%, 80% { opacity: 1; transform: translate(-50%, 0); } }
.ex-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; }
.ex-empty svg { width: 64px; height: 64px; color: var(--ex-accent); margin-bottom: 8px; }
.ex-empty h1 { margin: 0; font-size: 20px; }
.ex-empty p { margin: 0 0 14px; color: #bbb; font-size: 14px; }
.ex-empty a { padding: 10px 26px; border-radius: 24px; background: var(--ex-accent); font-weight: 700; }

.ex-arrows { display: none; }

/* ---------- desktop: phone size column in the middle ---------- */
@media (min-width: 768px) {
    body.ex-body { background: radial-gradient(circle at 50% 20%, #2a2a2a, #0a0a0a 70%); }
    .ex { width: min(440px, calc(100vh * 9 / 16 + 40px)); height: calc(100vh - 40px); margin-top: 20px; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: visible; }
    .ex-feed, .ex-slide { border-radius: 24px; }
    .ex-top { border-radius: 24px 24px 0 0; }
    .ex-arrows { position: absolute; top: 50%; inset-inline-start: calc(100% + 24px); display: flex; flex-direction: column; gap: 12px; transform: translateY(-50%); }
    .ex-arrows button {
        width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .12);
        display: flex; align-items: center; justify-content: center; transition: background .2s;
    }
    .ex-arrows button:hover { background: var(--ex-accent); }
    .ex-arrows svg { width: 24px; height: 24px; }
    .ex-close { position: fixed; top: 20px; inset-inline-end: 24px; }
}

/* hide the youtube title bar and bottom bar outside the screen (taps go to .ex-tap anyway) */
.ex-media iframe { top: -64px; bottom: auto; height: calc(100% + 128px); pointer-events: none; }