/* ==========================================================================
	Peeks - Premium CSS Design System (FINAL FIXED VERSION)
   ========================================================================== */

:root {
	--sr-primary: #FF385C;
	--sr-primary-hover: #e00b41;
	--sr-glass-bg: rgba(0, 0, 0, 0.45);
	--sr-glass-border: rgba(255, 255, 255, 0.15);
	--sr-text-light: #FFFFFF;
	--sr-text-muted: rgba(255, 255, 255, 0.75);
	--sr-font-heading: 'Outfit', 'Inter', -apple-system, sans-serif;
	--sr-font-body: 'Inter', -apple-system, sans-serif;
	--peeks-shell-padding-x: 12px;
	--peeks-shell-padding-y: 8px;
	--peeks-card-width: 390px;
	--peeks-card-height: 650px;
	--peeks-title-size: 18px;
	--peeks-action-gap: 16px;
	--peeks-icon-size: 44px;
	--peeks-info-bottom: 24px;
	--peeks-info-side: 20px;
	--peeks-actions-right: 16px;
	--peeks-actions-bottom: 24px;
}

/* --- Global Body & Theme Integration Resets --- */
body.peeks-template-body {
	margin: 0 !important;
	padding: 0 !important;
}

/* Ensure no page wrapper constraints or scrollbars interfere */
body.peeks-template-body.peeks-fullscreen-body {
	overflow: hidden !important;
}

/* Force container hierarchy to be full width/height when viewing peeks */
body.peeks-template-body #page,
body.peeks-template-body #content,
body.peeks-template-body .site-content,
body.peeks-template-body .content-area,
body.peeks-template-body main,
body.peeks-template-body .container,
body.peeks-template-body .row,
body.peeks-template-body .entry-content,
body.peeks-template-body .post-content {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

/* Hide theme chrome elements that disrupt the immersive feed view */
body.peeks-template-body .breadcrumb,
body.peeks-template-body .entry-title,
body.peeks-template-body .page-title,
body.peeks-template-body .title_share,
body.peeks-template-body .sidebar,
body.peeks-template-body #sidebar {
	display: none !important;
}

/* Cleanly hide headers and footers on mobile screens when fullscreen peeks are active */
@media (max-width: 1024px) {

	body.peeks-template-body header,
	body.peeks-template-body footer,
	body.peeks-template-body .site-header,
	body.peeks-template-body .site-footer,
	body.peeks-template-body #masthead,
	body.peeks-template-body #colophon,
	body.peeks-template-body .mobile-navigation,
	body.peeks-template-body .wp-block-template-part,
	body.peeks-template-body .mobile_header,
	body.peeks-template-body .mobile_header_wrapper,
	body.peeks-template-body .master_header {
		display: none !important;
	}

	body.peeks-template-body .mobile-logo,
	body.peeks-template-body .logo {
		display: none !important;
	}
}

/* --- Base Wrapper --- */
.peeks-feed-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	font-family: var(--sr-font-body);
	color: var(--sr-text-light);
	user-select: none;
	-webkit-user-select: none;
}

/* Embed mode: peek constrained to a 9:16 card, centered inside the page flow.
   Width drives the size, height is derived from aspect-ratio. */
.peeks-feed-wrapper--embed {
	width: 100% !important;
	max-width: 440px !important;
	height: auto !important;
	max-height: min(760px, 80vh) !important;
	aspect-ratio: 9 / 16 !important;
	margin: 20px auto !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Fullscreen mode: peek takes over the viewport, letterboxed in black.
   No top margin here — the shell's padding controls top spacing, so we
   don't get the double-gap (margin + padding stacking) that pushed the
   card down and left dead space at the top. */
.peeks-feed-wrapper--fullscreen {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	/* Height drives the size here (fills the available viewport height), width
	   is derived from it via aspect-ratio and only capped so the card doesn't
	   become unreasonably wide on very tall/narrow viewports. */
	height: calc(93dvh - var(--peeks-top-offset, 0px) - var(--peeks-bottom-offset, 0px) - 32px) !important;
	width: auto !important;
	max-width: min(var(--peeks-card-width), calc(100vw - 32px)) !important;
	aspect-ratio: 9 / 16 !important;
	margin: 0 auto !important;
	z-index: 10 !important;
}

/* Strip theme spacing from the shell that hosts either mode */
.peeks-template-shell {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* align-items: flex-start pins the card to the top of the shell.
   Combined with margin:0 on the card above, this puts ALL leftover
   space at the bottom instead of splitting it top and bottom. */
.peeks-template-shell--fullscreen {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: var(--peeks-shell-padding-y) var(--peeks-shell-padding-x) calc(16px + var(--peeks-bottom-offset, 0px) + env(safe-area-inset-bottom));
	min-height: calc(100dvh - var(--peeks-top-offset, 0px));
	box-sizing: border-box;
	overflow-x: hidden;
}


@media (min-width: 1400px) {
	:root {
		/* Fullscreen mode is height-driven (fills 93dvh) with width derived
		   from the 9:16 aspect-ratio - this cap only exists so the card
		   doesn't get absurdly wide on ultrawide monitors, so it needs to be
		   loose enough to not clip a tall viewport's natural 9:16 width
		   (~470px at a typical ~835px tall viewport) back down to a
		   narrower-than-intended card. */
		--peeks-card-width: 500px;
		--peeks-card-height: 700px;
		--peeks-title-size: 21px;
	}
}

/* Bigger action buttons only on an actual external desktop monitor - laptop
   screens (MacBook Pro 16" tops out around 1728px logical width) stay at the
   base 44px size, only a >=1920px viewport (a full-size external monitor)
   gets the larger touch targets. */
@media (min-width: 1920px) {
	:root {
		--peeks-action-gap: 20px;
		--peeks-icon-size: 56px;
	}

	.peeks-count,
	.peeks-label {
		font-size: 14px;
	}
}

@media (min-width: 1200px) and (max-width: 1399px) {
	:root {
		--peeks-card-width: 470px;
		--peeks-card-height: 670px;
		--peeks-title-size: 19px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	:root {
		--peeks-card-width: 440px;
		--peeks-card-height: 650px;
		--peeks-title-size: 18px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	:root {
		--peeks-card-width: 360px;
		--peeks-card-height: 600px;
		--peeks-title-size: 16px;
		--peeks-action-gap: 14px;
		--peeks-icon-size: 40px;
		--peeks-info-bottom: 22px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	:root {
		--peeks-card-width: 340px;
		--peeks-card-height: 570px;
		--peeks-title-size: 15px;
		--peeks-action-gap: 13px;
		--peeks-icon-size: 38px;
		--peeks-info-bottom: 20px;
		--peeks-info-side: 18px;
	}

	.peeks-template-shell--fullscreen {
		padding: 6px 10px calc(16px + var(--peeks-bottom-offset, 0px) + env(safe-area-inset-bottom));
	}
}

@media (max-width: 1024px) {
	:root {
		--peeks-card-width: 390px;
		--peeks-card-height: 650px;
		--peeks-title-size: 13px;
		--peeks-action-gap: 10px;
		--peeks-icon-size: 36px;
		--peeks-info-bottom: 16px;
		--peeks-info-side: 14px;
		--peeks-actions-right: 12px;
		--peeks-actions-bottom: 16px;
		--peeks-bottom-offset: 68px !important;
	}

	.peeks-template-shell--fullscreen {
		padding: 0 !important;
		min-height: calc(100dvh - var(--peeks-top-offset, 0px));
	}

	/* Stay aspect-ratio-driven on mobile too (height:100% here has no
	   ancestor with an established height to fill on a plain embedded/section
	   page, which collapsed the card and let the YouTube/Vimeo iframe inside
	   letterbox with black bars top and bottom). Edge-to-edge width, height
	   derived from it via the 9:16 ratio, capped so short viewports don't
	   overflow. */
	.peeks-feed-wrapper--embed {
		border-radius: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 100dvh !important;
		aspect-ratio: 9 / 16 !important;
	}

	.peeks-feed-wrapper--fullscreen {
		width: 100% !important;
		max-width: 100% !important;
		height: calc(100dvh - var(--peeks-top-offset, 0px) - var(--peeks-bottom-offset, 0px)) !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		border-radius: 0 !important;
		margin: 0 !important;
	}

	.peeks-info-container {
		right: 58px !important;
		gap: 6px !important;
	}

	.peeks-price-row {
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin-top: 4px !important;
	}

	.peeks-price-tag {
		padding: 4px 10px !important;
		font-size: 13px !important;
	}

	.peeks-book-btn {
		padding: 4px 12px !important;
		font-size: 13px !important;
	}

	.peeks-count,
	.peeks-label {
		font-size: 12px !important;
	}

	.peeks-audio-toggle {
		top: calc(56px + env(safe-area-inset-top)) !important; /* row 2, below the shrunk top bar */
		right: 12px !important;
		width: 32px !important;
		height: 32px !important;
	}

	.peeks-search-container {
		top: calc(12px + env(safe-area-inset-top)) !important;
		right: 12px !important;
	}

	.peeks-search-button {
		width: 32px !important;
		height: 32px !important;
	}

	.peeks-search-container.search-active {
		right: 12px !important;
		left: 12px !important;
	}

	.peeks-filters-container {
		top: calc(12px + env(safe-area-inset-top)) !important;
		right: 52px !important; /* clears the 32px search button + gap */
	}
}

/* Removed the old margin-top:12px override for 576–600px range —
   it was re-introducing the same top gap this fix removes. */
@media (max-width: 600px) and (min-width: 576px) {
	.peeks-feed-wrapper--fullscreen {
		margin: 0 auto !important;
	}
}

/* --- Viewport & Items --- */
.peeks-viewport {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.peeks-viewport::-webkit-scrollbar {
	display: none;
}

.peeks-item {
	position: relative;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
	background: #000;
}

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

/* YouTube/Vimeo embed peeks: the SDK swaps .peeks-embed-target for an
   iframe in place, while the tap-catcher stays on top to keep tap-to-pause
   and double-tap-to-like working the same as native video peeks. */
.peeks-embed {
	background-color: #000;
	background-size: cover;
	background-position: center;
}

/* Persistent wrapper that survives the SDK swapping .peeks-embed-target for
   an iframe (YouTube replaces the element outright, Vimeo appends into it) -
   masking has to live here, one level up, so it still applies no matter
   which of those two the SDK does. */
.peeks-embed-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	/* Hidden until playback actually starts (player.js adds 'has-played' to
	   the item, and leaves it on across later pauses) - YouTube/Vimeo briefly
	   show their own branded UI (title, channel, "Watch on YouTube",
	   prev/next playlist arrows) on the cued/paused frame, so our own poster
	   thumbnail stays visible underneath instead of flashing that. Once
	   playback has actually started, staying visible through a pause shows
	   the frame the video paused on instead of reverting to the thumbnail. */
	opacity: 0;
	transition: opacity 0.15s ease;
}

.peeks-item.has-played .peeks-embed-frame {
	opacity: 1;
}

.peeks-embed-target {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.peeks-embed-frame iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	pointer-events: none;
}

.peeks-embed-tap-catcher {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: transparent;
}

/* --- Gradients & Overlays --- */
.peeks-overlay-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
	pointer-events: none;
	z-index: 3;
}

/* --- Info (Bottom Left) --- */
.peeks-info-container {
	position: absolute;
	bottom: var(--peeks-info-bottom);
	left: var(--peeks-info-side);
	right: 72px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.peeks-creator-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Title + location live in the same column so the location lines up under
   the title automatically (whatever the avatar's size is) instead of
   guessing its width in a hardcoded margin every time the avatar changes. */
.peeks-creator-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.peeks-prop-title {
	font-family: var(--sr-font-heading);
	font-size: var(--peeks-title-size);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.peeks-prop-title-link,
.peeks-prop-title-link:link,
.peeks-prop-title-link:visited,
.peeks-prop-title-link:hover,
.peeks-prop-title-link:active {
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Plain text under the title (like TikTok's sound-attribution line under the
   username) instead of a pill - a single line that truncates with an
   ellipsis instead of wrapping and pushing the caption/hashtags down. */
.peeks-prop-location {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.peeks-prop-location svg {
	flex-shrink: 0;
}

/* The full location is still available via the div's title attribute on hover. */
.peeks-prop-location-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

/* While the video plays only the avatar and title stay on screen; location,
   caption, hashtags, price and Book Now fade back in on pause. The grid-rows
   transition collapses the space so the title settles at the bottom. */
.peeks-details {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.peeks-details-inner {
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.peeks-prop-location {
	max-height: 24px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

.peeks-item.is-playing .peeks-details {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
}

.peeks-item.is-playing .peeks-prop-location {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}

.peeks-caption-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.4;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.peeks-caption-wrap.is-expanded .peeks-caption-text {
	display: block;
	line-clamp: unset;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.peeks-caption-toggle {
	display: block;
	margin-top: 2px;
	padding: 0;
	border: none;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
}

.peeks-caption-toggle:hover {
	color: #fff;
}

.peeks-hashtags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 4px;
}

.peeks-hashtag {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.peeks-price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.peeks-price-tag {
	font-family: var(--sr-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--sr-glass-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 6px 14px;
	border-radius: 99px;
	border: 1px solid var(--sr-glass-border);
	white-space: nowrap;
	flex-shrink: 0;
}

.peeks-book-btn,
.peeks-book-btn:link,
.peeks-book-btn:visited {
	font-family: var(--sr-font-heading);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--sr-primary);
	padding: 6px 18px;
	border-radius: 99px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.peeks-book-btn:hover,
.peeks-book-btn:active {
	color: #fff;
	background: var(--sr-primary-hover);
	text-decoration: none;
}

/* --- Actions (Bottom Right) --- */
.peeks-actions-container {
	position: absolute;
	bottom: var(--peeks-actions-bottom);
	right: var(--peeks-actions-right);
	z-index: 5;
}

.peeks-actions-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--peeks-action-gap);
}

/* Property "profile" avatar, built from the featured image, next to the title. */
.peeks-profile-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	display: block;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.peeks-profile-avatar:hover {
	transform: scale(1.08);
}

.peeks-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.peeks-action-btn {
	background: transparent;
	border: none;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.peeks-action-btn:hover {
	transform: scale(1.15);
}

.peeks-action-btn:active {
	transform: scale(0.9);
}

/* Static buttons for guests (e.g., save count) */
.peeks-action-btn.is-static {
	cursor: default;
	pointer-events: none;
}

.peeks-icon-circle {
	width: var(--peeks-icon-size);
	height: var(--peeks-icon-size);
	border-radius: 50%;
	background: var(--sr-glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--sr-glass-border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* The like/save/views/share SVGs are drawn at a fixed 22px in the markup —
   scale them down to match the smaller icon circle instead of overflowing it. */
.peeks-icon-circle svg {
	width: 46%;
	height: 46%;
}

.peeks-action-btn.is-active .peeks-icon-circle {
	background: rgba(255, 56, 92, 0.25);
	border-color: #ff385c;
	color: #ff385c;
}

/* Brief flash so a failed like/save request (bad nonce, logged out, etc.)
   is visible instead of silently doing nothing - see likes.js flashActionError(). */
.peeks-action-btn.peeks-action-error .peeks-icon-circle {
	background: rgba(220, 38, 38, 0.25);
	border-color: #dc2626;
	color: #dc2626;
}

.peeks-count {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.peeks-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* --- Top Bar --- */
.peeks-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.25);
	z-index: 10;
}

.peeks-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--sr-primary);
	transition: width 0.1s linear;
}

/* Mute sits in its own row below the top bar (category chips + search). */
.peeks-audio-toggle {
	position: absolute;
	top: 64px;
	right: 16px;
	z-index: 12;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sr-glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--sr-glass-border);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.peeks-audio-toggle svg {
	width: 18px;
	height: 18px;
}

.peeks-audio-toggle:hover {
	transform: scale(1.08);
}

/* --- Animations --- */
.peeks-heart-burst {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	z-index: 20;
	pointer-events: none;
	color: var(--sr-primary);
	opacity: 0;
}

.peeks-heart-burst.animate {
	animation: heartPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Center play/pause tap feedback icon */
.peeks-tap-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.85);
	z-index: 20;
	pointer-events: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.peeks-tap-icon.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@keyframes heartPop {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}

	50% {
		transform: translate(-50%, -50%) scale(1.3);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

/* --- Loading Spinner --- */
.peeks-loader {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: #6b7280;
}

.peeks-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--sr-primary);
	border-radius: 50%;
	animation: srSpin 0.8s linear infinite;
}

@keyframes srSpin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Share Modal --- */
.peeks-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.peeks-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(8px);
}

.peeks-modal-content {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	padding: 24px;
	border-radius: 16px;
	width: 90%;
	max-width: 400px;
	z-index: 2;
	color: #111827;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.peeks-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: transparent;
	border: none;
	color: #6b7280;
	font-size: 24px;
	cursor: pointer;
}

.peeks-modal-close:hover {
	color: #111827;
}

.peeks-copy-box {
	display: flex;
	gap: 8px;
	margin: 16px 0;
}

.peeks-copy-box input {
	flex: 1;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	color: #111827;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
}

.peeks-copy-box button {
	background: var(--sr-primary);
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}

.peeks-social-buttons {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.peeks-social-btn {
	flex: 1;
	text-align: center;
	padding: 8px;
	border-radius: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
}

.peeks-social-btn.wa {
	background: #25d366;
}

.peeks-social-btn.fb {
	background: #1877f2;
}

.peeks-social-btn.tw {
	background: #000000;
	border: 1px solid #333;
}

/* --- Login Required Modal --- */
.peeks-login-modal-content h3 {
	margin: 0 0 8px;
}

.peeks-modal-desc {
	color: rgba(17, 24, 39, 0.65);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}

.peeks-login-modal-actions {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.peeks-login-modal-btn {
	flex: 1;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	font-family: var(--sr-font-heading);
}

.peeks-login-modal-btn--primary {
	background: var(--sr-primary);
	color: #fff;
}

.peeks-login-modal-btn--primary:hover {
	background: var(--sr-primary-hover);
}

.peeks-login-modal-btn--secondary {
	background: transparent;
	color: #111827;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.peeks-login-modal-btn--secondary:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Filters & Search UI
   ========================================================================== */

/* --- Top Bar Search & Filters --- */

/* Container for the search icon and the search bar itself.
   This wrapper helps manage the transition between the two states. */
.peeks-search-container {
	position: absolute;
	top: 16px;
	right: 16px; /* Top row, right side (category chips take the left side) */
	z-index: 12;
	transition: all 0.3s ease-in-out;
}

/* The search icon button, styled to match other top-bar icons. */
.peeks-search-button {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sr-glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--sr-glass-border);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, opacity 0.3s ease;
}

.peeks-search-button svg {
	width: 16px;
	height: 16px;
}

.peeks-search-button:hover {
	transform: scale(1.08);
}

/* The actual search bar that appears when the search icon is clicked.
   It's hidden by default and expands to fill the top area. */
.peeks-search-bar {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	opacity: 0;
	visibility: hidden;
	display: flex;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

/* The text input field for the search bar. */
.peeks-search-input {
	width: 100%;
	height: 36px;
	padding: 0 16px;
	background: var(--sr-glass-bg);
	backdrop-filter: blur(12px);
	border: 1px solid var(--sr-glass-border);
	border-radius: 18px;
	color: #fff;
	font-size: 15px;
	outline: none;
}

.peeks-search-input::placeholder {
	color: var(--sr-text-muted);
}

/* --- Active Search State --- */
/* When the parent container has the .search-active class,
   the search bar becomes visible and the icon is hidden. */
.peeks-search-container.search-active {
	right: 16px;
	left: 16px;
}

.peeks-search-container.search-active .peeks-search-button {
	opacity: 0;
	pointer-events: none;
}

.peeks-search-container.search-active .peeks-search-bar {
	width: 100%;
	opacity: 1;
	visibility: visible;
}

/* The search bar expands to fill the whole top row, so hide the category
   chips (same row, to its left) while it's open to avoid overlap. */
.peeks-search-container.search-active ~ .peeks-filters-container {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* --- Filter Chips --- */

/* Horizontally scrollable container for the category filter chips.
   Positioned below the top bar icons. */
.peeks-filters-container {
	position: absolute;
	top: 16px; /* Top row, left side (search sits on the right) */
	left: 0;
	right: 60px; /* Clears the 36px search button + gap */
	z-index: 11;
	display: flex;
	align-items: center;
	height: 36px;
	gap: 6px;
	padding: 0 var(--peeks-info-side);
	overflow-x: auto;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* Hides the scrollbar for a cleaner look on Webkit browsers. */
.peeks-filters-container::-webkit-scrollbar {
	display: none;
}

/* Individual filter chip/button. */
.peeks-filter-chip {
	flex-shrink: 0; /* Prevents chips from shrinking */
	padding: 5px 12px;
	background: var(--sr-glass-bg);
	border: 1px solid var(--sr-glass-border);
	border-radius: 99px;
	color: var(--sr-text-light);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Hover state for filter chips. */
.peeks-filter-chip:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Active state for the currently selected filter chip. */
.peeks-filter-chip.active {
	background: var(--sr-primary);
	color: #fff;
	border-color: var(--sr-primary);
}