/**
 * Google Slides Slideshow Frontend Styles
 * -------------------------------------------------------------------------
 * 1. CORE LAYOUT & CONTAINERS
 * -------------------------------------------------------------------------
 */

/* Nuclear Breakout: Float over the theme completely */
.gs-slideshow-container {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background-color: #000 !important;
	z-index: 9990 !important;
	/* Under the WP Admin Bar */
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/* Base Slide: Hidden by default, locked to screen edges */
.gs-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: 1 !important;
	transition: opacity 0.7s ease, visibility 0.7s ease !important;
}

/* Active Slide: Forces the current slide to appear on top */
.gs-slide.gs-slide-active {
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 2 !important;
}

/* Immersive Background: Force image to cover all dead space */
.gs-slide-image {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	border-radius: 0 !important;
	z-index: 1 !important;
}

/* Cinematic Overlay */
.gs-slide-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

/**
 * -------------------------------------------------------------------------
 * 2. TYPOGRAPHY & TEXT-ONLY SLIDES
 * -------------------------------------------------------------------------
 */

.gs-slide-title {
	font-size: 48px;
	font-weight: bold;
	margin: 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	animation: slideInUp 0.8s ease-out;
}

.gs-slide-text-only {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 40px 10% 120px 10% !important;
	box-sizing: border-box !important;
	background-color: #141414 !important;
	text-align: center !important;
	z-index: 5 !important;
}

.gs-slide-text-only-title {
	font-size: 32px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	margin-bottom: 24px !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
}

.gs-slide-text-only-body {
	font-size: 20px !important;
	line-height: 1.6 !important;
	max-width: 800px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-weight: 400 !important;
}

/**
 * -------------------------------------------------------------------------
 * 3. PREMIUM INFO PANEL (GLASSMORPHISM)
 * -------------------------------------------------------------------------
 */

.gs-slide-text-panel {
	position: absolute !important;
	bottom: 100px !important;
	
/* THE RESTORED OCD FIX: Tracks the flawless 300px dock perfectly */
	left: auto !important; 
	right: calc(50% + 162px) !important;

	width: 320px !important;
	max-width: 85vw !important;
	background: rgba(15, 15, 15, 0.75) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	padding: 24px 24px 60px 24px !important;
	box-sizing: border-box !important;
	color: #fff !important;
	text-align: left !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(15px) !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 20 !important;
	pointer-events: none !important;
}

.gs-slide-text-panel.open {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
}

/* --- PREMIUM INFO PANEL TYPOGRAPHY --- */

/* 1. The Safety Net Wrapper */
.gs-slide-text-body {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 400 !important;
}

/* 2. Top Section: The Extracted Title */
.gs-slide-panel-title {
	display: block !important; 
	font-size: 18px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: rgba(255, 255, 255, 0.5) !important;
	margin-bottom: 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	padding-bottom: 12px !important;
	font-weight: 600 !important;
}

/* 3. Middle Section: The Comma-Separated List */
.gs-slide-panel-description {
	display: block !important; 
	font-size: 12px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 400 !important;
}

.gs-photo-credit {
	position: absolute !important;
	bottom: 24px !important;
	left: 24px !important;
	right: 24px !important;
	margin: 0 !important;
	display: block !important;
	font-size: 10px !important;
	color: rgba(255, 255, 255, 0.4) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
	padding-top: 12px !important;
}

/**
 * -------------------------------------------------------------------------
 * 4. THE MASTER DOCK (NAVIGATION & CONTROLS)
 * -------------------------------------------------------------------------
 */

.gs-slide-footer-nav {
	position: absolute !important;
	bottom: 30px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 30 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important; /* SYNCED: Now matches the thumbnail spacing perfectly! */
}

/* --- ARROWS ONLY (< and >) --- */
.gs-slide-nav {
	width: 44px !important;
	height: 44px !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	color: #fff !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.25s ease !important;
	pointer-events: auto !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	z-index: 15 !important;
}

.gs-slide-nav:hover {
	background: rgba(0, 0, 0, 0.8) !important;
}

/* --- SIDECARS ONLY (Info & Play/Pause) --- */
.gs-slide-text-toggle,
.gs-slide-play-toggle {
	height: 44px !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	color: #fff !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.25s ease !important;
	pointer-events: auto !important;

	/* Reel them in: Let them join the Flexbox natively! */
	position: relative !important;
	padding: 0 20px !important;
	min-width: 80px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	z-index: 15 !important;
}

.gs-slide-text-toggle:hover,
.gs-slide-play-toggle:hover {
	background: rgba(0, 0, 0, 0.8) !important;
}

/**
 * -------------------------------------------------------------------------
 * 5. THUMBNAIL PAGINATION
 * -------------------------------------------------------------------------
 */

.gs-slide-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: auto !important;

	/* THE LOCK: Prevents the arrows from being pushed when thumbnails change size */
	width: 324px !important;
	flex-shrink: 0 !important;
}

/* --- BASE THUMBNAIL (Defaults to Dead) --- */
.gs-slide-dot {
	display: none !important; /* THE VIP BOUNCER: Kills rogue text dots instantly */
	flex: 0 0 auto;
	border-radius: 8px !important;
	border: none;
	background: rgba(255, 255, 255, 0.16);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	margin: 0 !important; 
	transition: opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

/* --- THUMBNAIL SIZES (The VIP List: Only these survive) --- */
.gs-slide-dot.active {
	display: flex !important; /* Resurrects the dot and centers internal text */
	width: 60px !important;
	height: 60px !important;
	opacity: 1 !important;
}

.gs-slide-dot.near {
	display: flex !important; /* Resurrects the dot and centers internal text */
	width: 52px !important;
	height: 52px !important;
	opacity: 1 !important;
}

.gs-slide-dot.far {
	display: flex !important; /* Resurrects the dot and centers internal text */
	width: 44px !important;
	height: 44px !important;
	opacity: 1 !important;
}

.gs-slide-dot:hover {
	border-color: rgba(255, 255, 255, 0.95);
	transform: scale(1.05);
}

/* Fallback styles for text-only thumbnails */
.gs-slide-dot:not([style*="background-image"]) {
	background-color: #1a1a1a !important;
	/* NECROMANCER DELETED: No display property here, so it stays dead unless VIP! */
	align-items: center !important;
	justify-content: center !important;
	padding: 4px !important;
	box-sizing: border-box !important;
}

.gs-thumb-title {
	color: #ffffff !important;
	font-size: 4px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	line-height: 1.3 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	pointer-events: none !important;
	word-break: break-word !important;
	padding: 0 4px !important;
}

.gs-slide-dot .gs-thumb-title {
	opacity: 0.6 !important;
	transition: opacity 0.3s ease !important;
}

.gs-slide-dot.active .gs-thumb-title {
	font-size: 7px !important;
	opacity: 1 !important;
}

/**
 * -------------------------------------------------------------------------
 * 6. UTILITIES & RESPONSIVE
 * -------------------------------------------------------------------------
 */

/* Grayed-out state for the Info button on slides without panels */
.gs-disabled-sidecar {
	opacity: 0.3 !important;
	color: rgba(255, 255, 255, 0.3) !important;
	pointer-events: none !important; /* This strictly forbids hover and click events! */
	cursor: default !important;
}

.gs-slideshow-error {
	padding: 20px;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	color: #721c24;
	margin: 20px 0;
	z-index: 9999 !important;
	position: relative;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
	/* 1. Shrink Sidecars to squares */
	.gs-slide-text-toggle,
	.gs-slide-play-toggle {
		min-width: 44px !important;
		width: 44px !important;
		padding: 0 !important;
		font-size: 11px !important;
		text-transform: uppercase;
	}
	
	/* 2. Hide the outer thumbnails to save horizontal space */
	.gs-slide-dot.far { 
		display: none !important; 
	}
	
	/* 3. Shrink the Titanium Cage to hold exactly 3 dots (60+52+52+12+12 = 188px) */
	.gs-slide-pagination {
		width: 188px !important; 
		min-width: 188px !important;
		max-width: 188px !important;
	}
	
	/* 4. Center the Info Panel beautifully across the phone screen */
	.gs-slide-text-panel {
		right: 5vw !important;
		left: 5vw !important;
		width: 90vw !important;
		bottom: 100px !important; /* Lifts it safely above the dock */
	}
    
	/* 5. Scale down the Typography */
	.gs-slide-title { font-size: 32px !important; }
	.gs-slide-panel-title { font-size: 14px !important; }
	.gs-slide-panel-description { font-size: 12px !important; }
}

@media (max-width: 480px) {
	.gs-slide-title {
		font-size: 24px;
	}

	.gs-slide-credit {
		padding: 6px 10px;
		font-size: 13px;
	}
}

@media ( max-width: 768px ) {
	.gs-slide-title { font-size: 32px; }
	.gs-slide-credit { padding: 8px 12px; }
	
	/* Keeps the text box on the screen for mobile users */
	.gs-slide-text-panel {
		right: auto !important;
		left: 20px !important;
		width: calc(100% - 40px) !important; 
	}
}

/* --- NUCLEAR DOCK LOCKDOWN --- */

/* 1. Ghost the hidden Info button (Never use display: none) */
.gs-hidden-sidecar {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	display: flex !important;
	/* Forces it to hold its physical space to balance the dock */
}

/* 2. Lock the Sidecars to a rigid width so "Play" vs "Pause" doesn't stretch them */
.gs-slide-text-toggle,
.gs-slide-play-toggle {
	width: 90px !important;
	min-width: 90px !important;
	max-width: 90px !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	/* Prevents Flexbox from squishing them */
}

/* 3. Lock the Arrows to a rigid width */
.gs-slide-nav {
	width: 44px !important;
	min-width: 44px !important;
	flex-shrink: 0 !important;
}

/* 4. The Flawless 300px Cage */
.gs-slide-pagination {
	width: 300px !important; 
	min-width: 300px !important;
	max-width: 300px !important;
	flex-shrink: 0 !important;
	
	/* The modern fix: perfect inner spacing with zero edge margins */
	display: flex !important;
	justify-content: space-between !important; 
	align-items: center !important;
	gap: 12px !important; 
}