/* ==========================================================================
   Qureka Reels — main stylesheet (light theme)
   ========================================================================== */

:root {
	--qr-bg: #ffffff;
	--qr-bg-soft: #f5f5f7;
	--qr-splash-bg: #fbfaf8;
	--qr-purple: #7c6cf0;
	--qr-purple-2: #6d4fd1;
	--qr-pink: #ec4899;
	--qr-gold: #c9922e;
	--qr-text: #0d0d10;
	--qr-text-dim: #5b5b66;
	--qr-border: rgba(0, 0, 0, 0.08);
	--qr-radius: 22px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--qr-bg);
	color: var(--qr-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overscroll-behavior-y: contain;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Splash screen ---------- */
.qr-splash {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--qr-splash-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: qr-splash-hide 0.5s ease forwards;
	animation-delay: 1s;
}
.qr-splash-logo {
	width: 170px;
	max-width: 45vw;
	height: auto;
	display: block;
	animation: qr-splash-pulse 1.6s ease-in-out infinite;
}
@keyframes qr-splash-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.045); }
}
@keyframes qr-splash-hide {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ---------- Top bar ---------- */
.qr-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0));
	padding: 14px 16px;
}
.qr-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 640px;
	margin: 0 auto;
}
.qr-logo-img { max-height: 38px; display: block; }
.qr-logo img { max-height: 38px; display: block; }

.single .qr-logo-img,
.single .qr-logo img { max-height: 56px; }
.qr-nav-menu { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.qr-nav-menu a { font-size: 14px; color: var(--qr-text-dim); font-weight: 600; }

.qr-menu-toggle {
	display: none;
	background: rgba(0,0,0,0.05);
	border: none;
	border-radius: 10px;
	width: 38px; height: 38px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	order: 2;
}
.qr-menu-toggle span { width: 18px; height: 2px; background: var(--qr-text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.qr-menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.qr-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.qr-menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 640px) {
	.qr-nav {
		display: none;
		position: absolute;
		top: 100%;
		right: 16px;
		background: var(--qr-bg);
		border: 1px solid var(--qr-border);
		border-radius: 14px;
		box-shadow: 0 12px 28px rgba(0,0,0,0.1);
		padding: 10px 4px;
		min-width: 180px;
	}
	.qr-nav.is-open { display: block; }
	.qr-nav-menu { flex-direction: column; gap: 0; }
	.qr-nav-menu a { display: block; padding: 10px 16px; }
	.qr-menu-toggle { display: flex; }
}

.qr-page-wrap {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
}

.qr-archive-title {
	flex: 0 0 auto;
	padding: 90px 20px 16px;
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}
.qr-archive-title h1 { font-size: 24px; margin: 0; color: var(--qr-text); }

/* ---------- Feed (fixed viewport, no native scroll) ---------- */
.qr-feed {
	position: relative;
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	touch-action: none;
}
.qr-page-wrap .qr-feed {
	height: auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* Track holds all cards; JS moves it by exactly one card-height per gesture */
.qr-track {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.qr-track.qr-track--no-anim { transition: none; }

/* ---------- Reel card ---------- */
.qr-reel {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-bottom: 1px solid var(--qr-border);
	background: var(--qr-bg);
}

/* ---- Top: featured image (40% of card height) ---- */
.qr-reel-media {
	position: relative;
	flex: 0 0 40%;
	height: 40%;
	overflow: hidden;
	background: var(--qr-bg-soft);
}
.qr-reel-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.qr-reel-img--fallback {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 30% 20%, #ece9fb, #f5f5f7 70%);
}

.qr-reel-badge {
	position: absolute;
	top: 70px;
	left: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--qr-purple-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.qr-reel-badge-logo img { max-height: 18px; display: block; }

/* ---- Bottom: heading, text, buttons (60% of card height) ---- */
.qr-reel-content {
	position: relative;
	flex: 1 1 60%;
	height: 60%;
	display: flex;
	flex-direction: column;
	padding: 16px 20px 22px;
	overflow-y: auto;
	background: var(--qr-bg);
}

.qr-reel-text {
	flex: 1 1 auto;
	min-height: 0;
}

.qr-reel-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--qr-purple-2);
	margin-bottom: 6px;
}
.qr-reel-dot { color: var(--qr-text-dim); }
.qr-reel-time { color: var(--qr-text-dim); font-weight: 500; }

.qr-reel-title {
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 8px;
	font-weight: 800;
	color: var(--qr-text);
}
.qr-reel-title a { color: var(--qr-text); }

.qr-reel-excerpt {
	color: var(--qr-text-dim);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qr-reel-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	flex: 0 0 auto;
	margin-top: 16px;
	padding-top: 4px;
}

.qr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid var(--qr-border);
	border-radius: 14px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 700;
	background: var(--qr-bg-soft);
	color: var(--qr-text);
	transition: transform 0.15s ease, background 0.15s ease;
}
.qr-btn:active { transform: scale(0.96); }

.qr-btn-read {
	flex: 1 1 auto;
	background: linear-gradient(90deg, var(--qr-purple), var(--qr-pink));
	color: #fff;
	border: none;
	justify-content: center;
}

/* ---------- Loader (overlay, sits outside the sliding track) ---------- */
.qr-loader {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Higher specificity than .qr-loader{display:flex} above, so the [hidden]
   attribute actually hides it (and stops the spin animation) instead of
   being silently overridden — this was the root cause of the stuck spinner. */
.qr-loader[hidden] {
	display: none;
}
.qr-spinner {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 3px solid rgba(0,0,0,0.1);
	border-top-color: var(--qr-purple);
	animation: qr-spin 0.8s linear infinite;
}
@keyframes qr-spin { to { transform: rotate(360deg); } }

/* ---------- Scroll hint ---------- */
.qr-scroll-hint {
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--qr-text-dim);
	background: rgba(0,0,0,0.05);
	padding: 6px 12px;
	border-radius: 999px;
	pointer-events: none;
	animation: qr-hint-fade 3.5s ease forwards;
	animation-delay: 1s;
}
@keyframes qr-hint-fade {
	0% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; }
}

/* ---------- Single article view ---------- */
.qr-article {
	max-width: 680px;
	margin: 0 auto;
	padding: 90px 20px 60px;
	color: var(--qr-text);
}
.qr-back-link {
	display: inline-block;
	color: var(--qr-text-dim);
	font-size: 14px;
	margin-bottom: 18px;
}
.qr-article-cover {
	border-radius: var(--qr-radius);
	overflow: hidden;
	margin-bottom: 22px;
	max-height: 420px;
	background: var(--qr-bg-soft);
}
.qr-article-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-article-title { font-size: 30px; line-height: 1.25; margin: 12px 0 20px; font-weight: 800; color: var(--qr-text); }
.qr-article-content { font-size: 17px; line-height: 1.75; color: var(--qr-text); }
.qr-article-content p { margin: 0 0 1.2em; }
.qr-article-content img { max-width: 100%; border-radius: 14px; }
.qr-article-share { margin: 30px 0 10px; }

.qr-article-nav {
	display: flex;
	gap: 12px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--qr-border);
}
.qr-btn-back {
	background: var(--qr-bg-soft);
	flex: 0 0 auto;
}
.qr-btn-next {
	flex: 1 1 auto;
	justify-content: center;
	background: linear-gradient(90deg, var(--qr-purple), var(--qr-pink));
	color: #fff;
	border: none;
}

/* ---------- Toast (e.g. "End of Stories") ---------- */
.qr-toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	z-index: 90;
	transform: translateX(-50%) translateY(8px);
	background: rgba(13, 13, 16, 0.88);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 10px 18px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	white-space: nowrap;
}
.qr-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---------- Footer widgets ---------- */
.qr-footer-widgets {
	max-width: 640px;
	margin: 0 auto;
	padding: 30px 20px 60px;
	border-top: 1px solid var(--qr-border);
	color: var(--qr-text-dim);
	font-size: 13px;
}
.qr-widget-title { font-size: 14px; color: var(--qr-text); margin-bottom: 10px; }