/* ==========================================================================
   Portal layer — dark streaming look. Loaded after style.css and overrides
   its light tokens, so inner pages (single, archive, search) follow along.
   ========================================================================== */
:root {
	--page: #08090d;
	--bg: #0c0e13;
	--bg-2: #11131a;
	--card: #11131a;
	--card-2: #181b24;
	--line: rgba(255,255,255,.07);
	--line-2: rgba(255,255,255,.14);
	--text: #f3f4f7;
	--text-2: #c2c6d0;
	--muted: #858b9b;
	--accent: #2f7bff;
	--accent-2: #6ea2ff;
	--link: #6ea2ff;
	--shadow: 0 1px 2px rgba(0,0,0,.4);
	--shadow-h: 0 8px 24px rgba(0,0,0,.5);

	--sf-amber: #f59e0b;
	--sf-sky: #4f8cff;
	--sf-rose: #f0605d;
	--sf-cyan: #38bdf8;
	--sf-surface: #101218;
	--sf-surface-2: #151822;
	--sf-wrap: 1180px;
}
html {color-scheme: dark;}
html, body {background: var(--page); color: var(--text);}
body.sf {padding-bottom: 104px; min-height: 100vh;}
.sf-wrap {width: 100%; max-width: var(--sf-wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.sf-sr {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.sf-ico {display: block; flex: none;}
a:focus-visible, button:focus-visible, input:focus-visible {outline: 2px solid var(--sf-sky); outline-offset: 2px;}

/* ---- Make the legacy inner pages sit well on dark ---- */
input, textarea, button, select {background-color: var(--card-2); color: var(--text); border-color: var(--line-2);}
select option {background: #181b24; color: var(--text);}
article.abasi_org {max-width: var(--sf-wrap); background: transparent; border: 0; padding: 28px 20px 8px;}
.post, .block {background: var(--sf-surface); border-color: var(--line);}
.post > .top .fl .item.top_imdb {background: rgba(245,197,24,.08); border-color: rgba(245,197,24,.25);}
.post > .top .fl .item.top_imdb a {color: #f5c518;}
.block .tab span.sel {background: var(--card-2); color: var(--text);}

/* ---- Top bar: search + advanced search ---- */
.sf-top {padding: 40px 0 0;}
body:not(.home) .sf-top {padding-top: 24px;}
.sf-top-row {display: flex; gap: 14px; align-items: stretch;}
.sf-search {flex: 1; position: relative; min-width: 0;}
.sf-search .sf-ico {position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;}
.sf-search input {width: 100%; height: 56px; padding: 0 50px 0 18px; border-radius: 16px; background: var(--sf-surface); border: 1px solid var(--line); font-size: 14px; color: var(--text); -webkit-appearance: none; appearance: none;}
.sf-search input::placeholder {color: var(--muted);}
.sf-search input:focus {border-color: rgba(79,140,255,.6); box-shadow: 0 0 0 4px rgba(79,140,255,.12); background: #12141c;}
.sf-adv-btn {display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-radius: 16px; background: var(--sf-surface); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; white-space: nowrap; transition: border-color .2s, color .2s, background-color .2s;}
.sf-adv-btn:hover {color: #fff; border-color: var(--line-2); background: var(--sf-surface-2);}

/* ---- Section header ---- */
.sf-sec {margin-top: 52px;}
.sf-head {display: flex; align-items: center; gap: 12px; margin-bottom: 18px;}
.sf-chip {display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none; background: rgba(255,255,255,.06); color: var(--text-2);}
.sf-head-t {display: flex; flex-direction: column; gap: 1px; min-width: 0;}
.sf-head h2 {font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--text);}
.sf-hint {font-size: 11px; color: var(--muted);}
.sf-more {margin-right: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: 12px; color: var(--text-2); border: 1px solid var(--line-2); transition: color .2s, border-color .2s, background-color .2s;}
.sf-more:hover {color: #fff; background: rgba(255,255,255,.06);}
.tone-amber .sf-chip {background: rgba(245,158,11,.14); color: var(--sf-amber);}
.tone-amber h2 {color: #fb9f1c;}
.tone-amber .sf-more {color: #fbb43b; border-color: rgba(245,158,11,.35);}
.tone-amber .sf-more:hover {background: rgba(245,158,11,.1);}
.tone-sky .sf-chip {background: rgba(79,140,255,.15); color: var(--sf-sky);}
.tone-sky .sf-more {color: #8db3ff; border-color: rgba(79,140,255,.35);}
.tone-sky .sf-more:hover {background: rgba(79,140,255,.1);}
.tone-rose .sf-chip {background: rgba(240,96,93,.14); color: var(--sf-rose);}
.tone-rose .sf-more {color: #f58b88; border-color: rgba(240,96,93,.35);}
.tone-rose .sf-more:hover {background: rgba(240,96,93,.1);}

/* ---- Shared text on cards ---- */
.sf-t {display: block; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sf-fa {display: block; font-size: 11px; line-height: 1.6; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
a.sf-wide:hover .sf-t, a.sf-pop:hover .sf-t, a.sf-poster:hover .sf-t, a.sf-person:hover .sf-t, a.sf-trailer:hover .sf-t {color: #fff;}
img {-webkit-user-drag: none;}

/* ---- Rails: horizontal, snap-scrolling, start at the right edge ---- */
.sf-rail {display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;}
.sf-rail::-webkit-scrollbar {display: none;}
.sf-rail.is-drag {cursor: grabbing; scroll-snap-type: none;}
.sf-rail.is-drag a {pointer-events: none;}
.sf-rail > a {flex: none; scroll-snap-align: start; display: block; min-width: 0;}

/* ---- 1. Latest: three wide cards ---- */
.sf-latest {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.sf-wide {display: block; background: var(--sf-surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .25s;}
.sf-wide:hover {border-color: var(--line-2); transform: translateY(-2px);}
.sf-wide-img {position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0c10; overflow: hidden;}
.sf-wide-img img, .sf-pop-img img, .sf-trailer-img img {width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1);}
.sf-wide:hover img {transform: scale(1.04);}
.sf-wide-body {display: block; padding: 14px 16px 15px;}
.sf-wide-body .sf-t {font-size: 14px;}
.sf-meta {display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 11px; direction: rtl;}
.sf-kind {font-style: normal; font-weight: 700;}
.sf-kind.is-series {color: #f0605d;}
.sf-kind.is-movie {color: #5b97ff;}
.sf-rate {display: inline-flex; align-items: center; gap: 4px; color: var(--sf-cyan); font-weight: 700; direction: ltr;}
.sf-rate .sf-ico {fill: currentColor; stroke: none;}
.sf-dub {color: var(--muted);}
.sf-rank-badge {position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(8,9,13,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); font-size: 14px; font-weight: 700; color: #fbb43b;}

/* ---- 2. Popular: landscape rail with big ranks ---- */
.sf-rail-popular > a {width: 352px;}
.sf-pop-img {position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0c10; margin-bottom: 11px; box-shadow: inset 0 0 0 1px var(--line);}
.sf-pop-img::before {content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,9,13,0) 45%, rgba(8,9,13,.85) 100%);}
.sf-pop-img::after {content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(270deg, var(--sf-amber), rgba(245,158,11,0));}
.sf-rank-big {position: absolute; z-index: 2; left: 14px; bottom: 6px; font-size: 54px; font-weight: 700; line-height: 1.1; color: rgba(255,255,255,.92); text-shadow: 0 2px 14px rgba(0,0,0,.6);}
a.sf-pop:hover img {transform: scale(1.04);}

/* ---- 3. Superstars ---- */
.sf-rail-people > a {width: 180px;}
.sf-person-img {position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--sf-surface-2); margin-bottom: 11px; box-shadow: inset 0 0 0 1px var(--line);}
.sf-person-img img {width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1);}
.sf-person-img::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,13,0) 55%, rgba(8,9,13,.8) 100%);}
.sf-person-img.no-photo {background: radial-gradient(120% 90% at 70% 10%, #3a2a0c 0%, #14110c 60%, #0d0e13 100%);}
.sf-person-img.no-photo b {position: absolute; right: 18px; top: 18px; font-size: 70px; line-height: 1; font-weight: 700; color: rgba(245,158,11,.5);}
.sf-person-img .sf-rank-big {z-index: 2;}
a.sf-person:hover img {transform: scale(1.04);}

/* ---- 4. Trailers ---- */
.sf-rail-trailers > a {width: 300px;}
.sf-trailer-img {position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0c10; margin-bottom: 11px; box-shadow: inset 0 0 0 1px var(--line);}
.sf-trailer-img::before {content: ""; position: absolute; inset: 0; background: rgba(8,9,13,.28);}
.sf-play {position: absolute; z-index: 2; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(47,123,255,.45); transition: transform .2s;}
.sf-play .sf-ico {fill: currentColor; stroke: none; margin-left: -2px;}
a.sf-trailer:hover .sf-play {transform: scale(1.1);}
.sf-tag {position: absolute; z-index: 2; top: 10px; padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; background: rgba(47,123,255,.9); color: #fff;}
.sf-tag-r {right: 10px;}
.sf-tag-l {left: 10px; background: rgba(8,9,13,.7); color: var(--text-2);}

/* ---- 5. Promo ---- */
.sf-promo {position: relative; display: flex; align-items: center; gap: 40px; padding: 44px 40px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(60% 120% at 0% 0%, rgba(245,158,11,.1), rgba(245,158,11,0) 60%), var(--sf-surface);}
.sf-promo-copy {flex: 1; min-width: 0;}
.sf-kicker {display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #fbb43b; margin-bottom: 14px;}
.sf-promo h2 {font-size: 30px; line-height: 1.5; font-weight: 700; color: #fff;}
.sf-promo p {max-width: 560px; margin-top: 10px; font-size: 13px; line-height: 2; color: var(--text-2);}
.sf-cta {display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 22px; border-radius: 12px; background: #1e6bf0; color: #fff; font-size: 13px; font-weight: 700; transition: background-color .2s, transform .2s;}
.sf-cta:hover {background: #3a7ff5; color: #fff; transform: translateY(-1px);}
.sf-promo-art {flex: none; width: 360px; order: 2;}
.sf-mock {padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,.45); transform: rotate(-2deg);}
.sf-mock-bar {display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--muted); margin-bottom: 10px;}
.sf-mock-bar i {flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1);}
.sf-mock-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.sf-mock-grid span {display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text-2); font-size: 12px; flex-direction: row-reverse;}
.sf-mock-grid span.on {background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fbb43b;}

/* ---- 6/7. Poster rails ---- */
.sf-rail-posters > a {width: 180px;}
.sf-poster-img {position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--sf-surface-2); margin-bottom: 10px; box-shadow: inset 0 0 0 1px var(--line);}
.sf-poster-img img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1);}
a.sf-poster:hover img {transform: scale(1.04);}
.sf-score {position: absolute; z-index: 2; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 7px; border-radius: 8px; background: rgba(8,9,13,.78); font-size: 11px; font-weight: 700; color: var(--sf-cyan); direction: ltr;}
.sf-score .sf-ico {fill: currentColor; stroke: none;}
.sf-dubflag {position: absolute; z-index: 2; right: 8px; top: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(245,158,11,.92); color: #2a1a00; font-size: 10px; font-weight: 700;}

/* ---- Floating dock ---- */
.sf-dock {position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; padding: 0 20px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none;}
.sf-dock-in {pointer-events: auto; display: flex; align-items: center; gap: 24px; max-width: var(--sf-wrap); margin: 0 auto; height: 64px; padding: 0 16px; border-radius: 20px; background: rgba(26,28,38,.78); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 14px 40px rgba(0,0,0,.55);}
.sf-brand {display: inline-flex; align-items: center; gap: 10px; flex: none; color: #fff; font-weight: 700; font-size: 15px;}
.sf-brand img {width: 34px; height: 34px; object-fit: contain; border-radius: 8px;}
.sf-tabs {display: flex; align-items: center; gap: 6px; min-width: 0;}
.sf-tab, .sf-menu a {display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; font-size: 13px; color: var(--text-2); white-space: nowrap; transition: color .2s, background-color .2s;}
.sf-tab:hover, .sf-menu a:hover {color: #fff; background: rgba(255,255,255,.06);}
.sf-tab.on, .sf-menu .current-menu-item > a {color: #6ea2ff; background: rgba(47,123,255,.16);}
.sf-menu {display: flex; gap: 6px;}
.sf-menu li {display: block;}

/* ---- Footer ---- */
footer.sf-footer {background: transparent; border-top: 1px solid var(--line); margin-top: 56px; padding: 0;}
footer.sf-footer .copy_right {text-align: center; padding: 28px 0 8px; color: var(--muted); font-size: 11px; line-height: 2;}
footer.sf-footer .copy_right a {color: var(--text-2);}
footer.sf-footer .copy_right .links {display: inline-block; padding: 0 10px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line);}
footer.sf-footer .copy_right .links a {display: inline-block; padding: 0 14px; border-left: 1px solid var(--line-2);}
footer.sf-footer .copy_right .links li:last-child a {border-left: 0;}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
	.sf-rail {margin: 0 -20px; padding-inline: 20px; scroll-padding-inline: 20px;}
	.sf-latest {display: flex; gap: 16px; overflow-x: auto; margin: 0 -20px; padding: 4px 20px 8px; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none;}
	.sf-latest::-webkit-scrollbar {display: none;}
	.sf-latest > a {flex: none; width: 300px; scroll-snap-align: start;}
	.sf-promo {flex-direction: column; align-items: stretch; padding: 30px 24px; gap: 28px;}
	.sf-promo-art {order: 0; width: 100%; max-width: 380px;}
}
@media (max-width: 640px) {
	.sf-wrap {padding-left: 16px; padding-right: 16px;}
	.sf-top {padding-top: 22px;}
	.sf-adv-btn span {display: none;}
	.sf-adv-btn {padding: 0 16px;}
	.sf-search input {height: 52px;}
	.sf-sec {margin-top: 38px;}
	.sf-rail, .sf-latest {scroll-padding-inline: 16px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; gap: 14px;}
	.sf-rail-popular > a {width: 270px;}
	.sf-rail-people > a, .sf-rail-posters > a {width: 140px;}
	.sf-rail-trailers > a {width: 250px;}
	.sf-rank-big {font-size: 40px;}
	.sf-promo h2 {font-size: 22px;}
	.sf-dock {padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));}
	.sf-dock-in {gap: 8px; height: 58px; padding: 0 8px;}
	.sf-brand span {display: none;}
	.sf-tabs {flex: 1; justify-content: space-between; gap: 2px;}
	.sf-tab {flex-direction: column; justify-content: center; gap: 3px; height: 46px; padding: 0 8px; font-size: 10px; flex: 1;}
	.sf-tab .sf-ico {width: 18px; height: 18px;}
	article.abasi_org {padding: 20px 16px 8px;}
}
@media (prefers-reduced-motion: reduce) {
	* {transition-duration: .01ms !important;}
}