/**
 * Sunnah Shopping — Reels Feed (Frontend)
 * Mobile-first vertical reel feed in the "Shop Our Reels" experience.
 * Relies on the theme's existing design tokens (--forest, --gold, etc.)
 * declared globally in style.css — this file does not redefine them.
 */

/* ----------------------------------------------------------------------
 * Page shell
 * ------------------------------------------------------------------- */
.ss-reels-page {
	background: var(--ink);
	min-height: 100vh;
	padding: 0 !important;
}

.ss-reels-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	gap: 16px;
	padding: 24px;
	text-align: center;
	color: var(--cream);
	font-family: 'DM Sans', sans-serif;
}

/* ----------------------------------------------------------------------
 * Feed container — snap-scroll vertical feed
 * ------------------------------------------------------------------- */
.ss-reels-feed {
	scroll-snap-type: y mandatory;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	height: 100vh;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	scrollbar-width: none;
}

.ss-reels-feed::-webkit-scrollbar {
	display: none;
}

/* ----------------------------------------------------------------------
 * Reel card
 * ------------------------------------------------------------------- */
.ss-reel-card {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	height: 100vh;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #000;
}

.ss-reel-media {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: #000;
}

.ss-reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gradient overlay so caption text stays legible over any footage */
.ss-reel-overlay {
	position: absolute;
	left: 0;
	right: 84px;
	bottom: 0;
	padding: 28px 16px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
	pointer-events: none;
}

.ss-reel-caption {
	color: #fff;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.95rem;
	line-height: 1.45;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----------------------------------------------------------------------
 * Right-rail actions (mute, share, instagram) — Instagram/TikTok-style
 * ------------------------------------------------------------------- */
.ss-reel-actions {
	position: absolute;
	right: 10px;
	bottom: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	z-index: 3;
}

.ss-reel-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	padding: 6px;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.ss-reel-action-btn svg {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.ss-reel-action-label {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.65rem;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ss-reel-mute-toggle {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

/* Share menu fallback (non-native-share browsers) */
.ss-reel-share-menu {
	position: absolute;
	right: 56px;
	bottom: 90px;
	background: var(--cream);
	border-radius: var(--r-lg);
	box-shadow: var(--sh);
	overflow: hidden;
	z-index: 10;
	display: flex;
	flex-direction: column;
	min-width: 150px;
}

.ss-reel-share-option {
	padding: 12px 16px;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
	background: none;
	border: none;
	border-bottom: 1px solid rgba(28, 28, 30, 0.08);
	text-align: left;
	cursor: pointer;
	text-decoration: none;
}

.ss-reel-share-option:last-child {
	border-bottom: none;
}

.ss-reel-share-wa {
	color: var(--leaf);
}

/* ----------------------------------------------------------------------
 * Linked products tray
 * ------------------------------------------------------------------- */
.ss-reel-products {
	background: var(--cream);
	padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
	max-height: 42vh;
	overflow-y: auto;
	border-top: 1px solid var(--gold-lt);
}

.ss-reel-product-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(28, 28, 30, 0.06);
}

.ss-reel-product-card:last-child {
	border-bottom: none;
}

.ss-reel-product-link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.ss-reel-product-image {
	width: 52px;
	height: 52px;
	border-radius: var(--r-lg);
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: var(--sh);
}

.ss-reel-product-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.ss-reel-product-name {
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 38vw;
}

.ss-reel-product-price {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.8rem;
	color: var(--leaf);
	font-weight: 700;
}

.ss-reel-product-price del {
	color: var(--dust);
	font-weight: 400;
	margin-right: 4px;
}

.ss-reel-product-stock {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ss-reel-product-stock--in {
	color: var(--leaf);
}

.ss-reel-product-stock--out {
	color: #b3261e;
}

.ss-reel-product-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.ss-reel-add-to-cart,
.ss-reel-view-product-btn {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
	border-radius: var(--r-lg);
	padding: 7px 14px;
	text-decoration: none;
	white-space: nowrap;
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-reel-add-to-cart {
	background: linear-gradient(135deg, var(--forest, #0B3D2E) 0%, var(--leaf, #1A6645) 100%);
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(11, 61, 46, 0.45);
	letter-spacing: 0.01em;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ss-reel-add-to-cart:active {
	transform: scale(0.96);
	box-shadow: 0 1px 6px rgba(11, 61, 46, 0.3);
}

/* WC adds a checkmark + "added" class after successful cart add —
   keep label text but replace checkmark with a subtle tick prefix */
.ss-reel-add-to-cart.added {
	background: linear-gradient(135deg, #1A6645 0%, #2d8a5e 100%);
}
.ss-reel-add-to-cart.added::before {
	content: '✓ ';
}
.ss-reel-add-to-cart.added::after {
	content: none;
}

.ss-reel-add-to-cart--disabled {
	background: var(--dust, #8A8A8E);
	color: #fff;
	pointer-events: none;
	opacity: 0.6;
	box-shadow: none;
}

.ss-reel-view-product-btn {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background 0.12s ease;
}

.ss-reel-view-product-btn:active {
	background: rgba(255, 255, 255, 0.22);
}

/* ----------------------------------------------------------------------
 * Tap-to-play/pause flash overlay (Instagram-style)
 * ------------------------------------------------------------------- */
.ss-reel-pp-flash {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 10;
	animation: ss-pp-flash 0.65s ease-out forwards;
}

@keyframes ss-pp-flash {
	0%   { opacity: 1;   transform: translate(-50%, -50%) scale(0.7); }
	40%  { opacity: 1;   transform: translate(-50%, -50%) scale(1);   }
	100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.2); }
}

/* ----------------------------------------------------------------------
 * Phase 3 — Shop-the-video product pins
 * ------------------------------------------------------------------- */
.ss-reel-pins {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none; /* re-enabled per-pin below so video taps still work elsewhere */
}

.ss-reel-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
}

.ss-reel-pin-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: 2px solid var(--gold);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	position: relative;
}

.ss-reel-pin-dot::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1.5px solid rgba(201, 168, 76, 0.55);
	animation: ss-reel-pin-pulse 1.8s ease-out infinite;
}

@keyframes ss-reel-pin-pulse {
	0% { transform: scale(0.8); opacity: 0.9; }
	70% { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

.ss-reel-pin-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--cream);
	color: var(--ink);
	border-radius: var(--r-lg);
	padding: 8px 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--sh);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease;
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: auto;
}

.ss-reel-pin.is-open .ss-reel-pin-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ss-reel-pin-tooltip-price {
	color: var(--leaf);
	font-weight: 700;
	font-size: 0.74rem;
}

/* Flash highlight when a pin scrolls the matching product card into view */
.ss-reel-product-card--highlight {
	animation: ss-reel-product-highlight 1.6s ease-out;
	border-radius: var(--r-lg);
}

@keyframes ss-reel-product-highlight {
	0% { background: var(--gold-lt); }
	100% { background: transparent; }
}

/* ----------------------------------------------------------------------
 * Phase 2 — Category filter chips (feed + fullscreen viewer)
 * ------------------------------------------------------------------- */
.ss-reel-category-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 12px 14px;
	background: var(--ink);
	scrollbar-width: none;
	position: relative;
	z-index: 4;
}

.ss-reel-category-chips::-webkit-scrollbar {
	display: none;
}

.ss-reel-chip {
	flex-shrink: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 6px 14px;
	text-decoration: none;
	white-space: nowrap;
}

.ss-reel-chip.is-active {
	background: var(--gold);
	color: var(--ink);
	border-color: var(--gold);
}

/* ----------------------------------------------------------------------
 * Phase 2 — Fullscreen single-reel viewer
 * ------------------------------------------------------------------- */
.ss-reels-single {
	position: relative;
	padding-bottom: 24px;
}

.ss-reels-feed--single {
	height: 100vh;
	scroll-snap-type: none;
	overflow: visible;
}

.ss-reels-feed--single .ss-reel-card {
	scroll-snap-align: none;
}

.ss-reel-back-btn {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 20;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
}

/* ----------------------------------------------------------------------
 * Phase 2 — Related reels rail
 * ------------------------------------------------------------------- */
.ss-related-reels {
	max-width: 480px;
	margin: 0 auto;
	padding: 18px 14px 8px;
	background: var(--ink);
}

.ss-related-reels-heading {
	font-family: 'DM Sans', sans-serif;
	color: var(--cream);
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.ss-related-reels-row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.ss-related-reels-row::-webkit-scrollbar {
	display: none;
}

.ss-related-reel-card {
	flex-shrink: 0;
	width: 110px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ss-related-reel-thumb {
	width: 110px;
	height: 160px;
	border-radius: var(--r-lg);
	background-color: #111;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.ss-related-reel-play {
	color: rgba(255, 255, 255, 0.9);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.ss-related-reel-caption {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.72rem;
	color: var(--cream);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----------------------------------------------------------------------
 * Desktop (≥1024px) — center the feed like a tall modal column
 * No topbar-h or sidebar-w offsets here because the reels page uses
 * a minimal header (no theme header/sidebar rendered).
 * ------------------------------------------------------------------- */
@media (min-width: 1024px) {

	.ss-reels-page {
		padding-top: 0 !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background: #111;
	}

	.ss-reels-feed {
		max-width: 420px;
		height: 100vh;
		border-radius: var(--r-xl, 1.125rem);
		box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
	}

	.ss-reel-card {
		height: 100vh;
		border-radius: var(--r-xl, 1.125rem);
	}

	.ss-reel-products {
		max-height: 38vh;
	}

	.ss-related-reels,
	.ss-reel-category-chips {
		max-width: 420px;
		width: 100%;
	}

	.ss-reel-back-btn {
		left: 16px;
	}
}

/* Respect reduced motion preferences: skip autoplay-feel animations */
@media (prefers-reduced-motion: reduce) {
	.ss-reel-card,
	.ss-reel-action-btn,
	.ss-reel-pin-dot::before {
		transition: none !important;
		animation: none !important;
	}
}