/* StudioFlicks — cinema.css | Dark context for movie/video/person pages */

/* ── Page layout ────────────────────────────────────────────────────────────── */
.sf-context-cinema .sf-page { background: var(--sf-cinema-bg); }

/* ── Movie hero ─────────────────────────────────────────────────────────────── */
.sf-movie-hero {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--sf-cinema-surface);
}

.sf-movie-hero__backdrop {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.25;
}

.sf-movie-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(13,13,13,0.6) 50%,
		var(--sf-cinema-bg) 100%
	);
}

.sf-movie-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 28px;
	align-items: flex-end;
	padding: 32px 20px;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.sf-movie-hero__poster {
	flex-shrink: 0;
	width: 160px;
}
.sf-movie-hero__poster img {
	width: 160px;
	height: 240px;
	object-fit: cover;
	border-radius: var(--sf-radius-lg);
	box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

.sf-movie-hero__info { flex: 1; min-width: 0; }
.sf-movie-hero__genres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sf-movie-hero__genre-tag {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.65);
	font-family: var(--sf-font-ui);
}
.sf-movie-hero__title {
	font-size: clamp(22px, 4vw, 36px);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 8px;
}
.sf-movie-hero__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	color: rgba(255,255,255,0.55);
	flex-wrap: wrap;
	margin-bottom: 14px;
	font-family: var(--sf-font-ui);
}
.sf-movie-hero__meta-sep { opacity: 0.3; }

/* ── Star rating display ─────────────────────────────────────────────────────── */
.sf-rating-display { display: flex; align-items: center; gap: 6px; }
.sf-stars {
	display: flex;
	gap: 2px;
}
.sf-star {
	width: 14px;
	height: 14px;
	fill: rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.2);
}
.sf-star--filled { fill: #f59e0b; color: #f59e0b; }
.sf-star--half { fill: url(#sf-half-gradient); color: #f59e0b; }
.sf-rating-value { font-size: 13px; font-weight: 700; color: #f59e0b; }
.sf-rating-count { font-size: 11px; color: rgba(255,255,255,0.4); }

/* Interactive star rating */
.sf-rating-interactive { display: flex; gap: 4px; cursor: pointer; }
.sf-rating-interactive .sf-star { width: 20px; height: 20px; transition: fill var(--sf-transition); cursor: pointer; }
.sf-rating-interactive .sf-star:hover,
.sf-rating-interactive .sf-star.hovered { fill: #f59e0b; color: #f59e0b; }

/* ── Hero action buttons ──────────────────────────────────────────────────────── */
.sf-movie-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.sf-watchlist-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--sf-radius);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--sf-font-ui);
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.07);
	color: rgba(255,255,255,0.8);
	cursor: pointer;
	transition: all var(--sf-transition);
}
.sf-watchlist-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.sf-watchlist-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sf-watchlist-btn.is-added { background: rgba(230,57,70,0.15); border-color: var(--sf-accent); color: var(--sf-accent); }
.sf-watchlist-btn.is-watched { background: rgba(16,185,129,0.12); border-color: #10b981; color: #10b981; }

/* ── Content body (below hero) ──────────────────────────────────────────────── */
.sf-movie-body {
	background: var(--sf-cinema-bg);
	padding: 32px 20px;
	max-width: 1200px;
	margin: 0 auto;
}

/* ── Tabs (Overview / Cast / Videos / Similar) ───────────────────────────────── */
.sf-tabs {
	display: flex;
	border-bottom: 1px solid var(--sf-cinema-border);
	margin-bottom: 28px;
	gap: 0;
}
.sf-tab-btn {
	background: none;
	border: none;
	color: rgba(255,255,255,0.45);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--sf-font-ui);
	padding: 10px 16px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--sf-transition), border-color var(--sf-transition);
}
.sf-tab-btn:hover { color: rgba(255,255,255,0.75); }
.sf-tab-btn.active { color: #fff; border-bottom-color: var(--sf-accent); }
.sf-tab-panel { display: none; }
.sf-tab-panel.active { display: block; }

/* ── Where to Watch ──────────────────────────────────────────────────────────── */
.sf-where-to-watch { margin: 24px 0; }
.sf-wtw-title {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
	font-family: var(--sf-font-ui);
}
.sf-wtw-platforms { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-wtw-platform {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--sf-cinema-card);
	border: 1px solid var(--sf-cinema-border);
	border-radius: var(--sf-radius);
	color: rgba(255,255,255,0.8);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--sf-font-ui);
	transition: all var(--sf-transition);
}
.sf-wtw-platform:hover { border-color: var(--sf-accent); color: #fff; }
.sf-wtw-platform--new { border-color: rgba(16,185,129,0.4); }
.sf-wtw-platform-new-badge {
	font-size: 8px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 3px;
	background: rgba(16,185,129,0.15);
	color: #10b981;
}

/* ── Cast grid ───────────────────────────────────────────────────────────────── */
.sf-cast-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 14px;
}
.sf-cast-card {
	text-align: center;
	text-decoration: none;
}
.sf-cast-card img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--sf-cinema-border);
	margin: 0 auto 8px;
}
.sf-cast-card:hover img { border-color: var(--sf-accent); }
.sf-cast-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); display: block; }
.sf-cast-character { font-size: 10px; color: rgba(255,255,255,0.4); display: block; margin-top: 2px; }

/* ── Movie card (archive / similar) ──────────────────────────────────────────── */
.sf-movie-card {
	background: var(--sf-cinema-card);
	border: 1px solid var(--sf-cinema-border);
	border-radius: var(--sf-radius-lg);
	overflow: hidden;
	transition: transform var(--sf-transition), border-color var(--sf-transition);
	position: relative;
}
.sf-movie-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.2); }
.sf-movie-card__thumb { aspect-ratio: 2/3; overflow: hidden; }
.sf-movie-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.sf-movie-card:hover .sf-movie-card__thumb img { transform: scale(1.04); }

.sf-movie-card__body { padding: 10px 12px; }
.sf-movie-card__title {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255,255,255,0.9);
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sf-movie-card__meta { font-size: 11px; color: rgba(255,255,255,0.4); font-family: var(--sf-font-ui); }

/* OTT badge */
.sf-ott-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 8px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Upcoming / countdown badge */
.sf-upcoming-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 8px;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 4px;
	background: var(--sf-accent);
	color: #fff;
}

/* ── Movies grid (archive) ───────────────────────────────────────────────────── */
.sf-movies-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

/* ── Archive filters ─────────────────────────────────────────────────────────── */
.sf-archive-filters {
	background: var(--sf-cinema-surface);
	border-bottom: 1px solid var(--sf-cinema-border);
	padding: 14px 0;
	position: sticky;
	top: var(--sf-nav-height);
	z-index: 10;
}
.sf-archive-filters__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.sf-filter-select {
	background: var(--sf-cinema-card);
	border: 1px solid var(--sf-cinema-border);
	border-radius: var(--sf-radius);
	color: rgba(255,255,255,0.7);
	font-size: 12px;
	font-family: var(--sf-font-ui);
	padding: 6px 10px;
	cursor: pointer;
}
.sf-filter-select:focus { border-color: var(--sf-accent); outline: none; }

/* ── Person page ──────────────────────────────────────────────────────────────── */
.sf-person-hero {
	display: flex;
	gap: 28px;
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
}
.sf-person-hero__avatar {
	flex-shrink: 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--sf-cinema-border);
}
.sf-person-hero__info { flex: 1; }
.sf-person-hero__name { font-size: clamp(20px,3vw,32px); font-weight: 800; color: #fff; margin-bottom: 8px; }
.sf-person-hero__bio { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; }

/* ── Bottom bar (cinema pages) ────────────────────────────────────────────────── */
.sf-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0; right: 0;
	background: rgba(13,13,13,0.92);
	border-top: 1px solid var(--sf-cinema-border);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 8px 20px;
	z-index: 90;
	display: none; /* Shown only on mobile via JS */
}
@media (max-width: 768px) {
	.sf-context-cinema .sf-bottom-bar { display: flex; }
	.sf-context-cinema main { padding-bottom: 68px; }
}

.sf-bottom-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: rgba(255,255,255,0.45);
	font-size: 9px;
	font-weight: 600;
	font-family: var(--sf-font-ui);
	cursor: pointer;
	border: none;
	background: none;
	text-decoration: none;
	transition: color var(--sf-transition);
}
.sf-bottom-bar__item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.sf-bottom-bar__item.active, .sf-bottom-bar__item:hover { color: var(--sf-accent); }
.sf-bottom-bar__item.is-added { color: var(--sf-accent); }

/* ── Streaming popup ─────────────────────────────────────────────────────────── */
.sf-streaming-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0,0,0,0.7);
	padding: 0 0 var(--sf-bottom-bar-h, 60px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.sf-streaming-popup.is-open { opacity: 1; pointer-events: auto; }
.sf-streaming-popup__sheet {
	background: var(--sf-cinema-surface);
	border: 1px solid var(--sf-cinema-border);
	border-radius: var(--sf-radius-xl) var(--sf-radius-xl) 0 0;
	width: 100%;
	max-width: 480px;
	padding: 20px;
	transform: translateY(20px);
	transition: transform 0.2s;
}
.sf-streaming-popup.is-open .sf-streaming-popup__sheet { transform: translateY(0); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.sf-movie-hero__inner { flex-direction: column; align-items: flex-start; }
	.sf-movie-hero__poster { width: 120px; }
	.sf-movie-hero__poster img { width: 120px; height: 180px; }
	.sf-movies-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
	.sf-cast-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}