/* --- Base Styles --- */
:root {
	--light-bg: #f8fafc; --dark-bg: #1e293b;
	--story-bg-light: #ffffff; --story-bg-dark: #111c2b;
	--card-bg-light: rgba(255, 255, 255, 0.5); --card-bg-dark: rgba(30, 41, 59, 0.5);
	--text-light: #0f172a; --text-dark: #e2e8f0;
	--text-muted-light: #64748b; --text-muted-dark: #94a3b8;
	--border-light: rgba(0, 0, 0, 0.1); --border-dark: rgba(255, 255, 255, 0.1);
	--shadow-light: rgba(0, 0, 0, 0.1); --shadow-dark: rgba(0, 0, 0, 0.5);
	--primary-color: #007bff;
	--font-heading: 'Poppins', sans-serif; --font-body: 'Lato', sans-serif;
}
body {
	background-color: var(--light-bg);
	color: var(--text-light);
	font-family: var(--font-body);
	overflow-x: hidden;
	transition: background-color 0.5s ease, color 0.5s ease;
}
body.dark-mode {
	background-color: var(--dark-bg);
	color: var(--text-dark);
}
#particle-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.glass-effect {
	background: var(--card-bg-light);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid var(--border-light);
	box-shadow: 0 8px 32px 0 var(--shadow-light);
	transition: all 0.3s ease;
}
body.dark-mode .glass-effect {
	background: var(--card-bg-dark);
	border: 1px solid var(--border-dark);
	box-shadow: 0 8px 32px 0 var(--shadow-dark);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
}
.navbar {
	background: rgba(26, 26, 26, 0.8) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-dark);
}
.form-control {
	background-color: var(--card-bg-light);
	border: 1px solid var(--border-light);
	color: var(--text-light);
}
body.dark-mode .form-control {
	background-color: var(--card-bg-dark);
	border: 1px solid var(--border-dark);
	color: var(--text-dark);
}
.form-control::placeholder {
	color: var(--text-muted-light);
}
body.dark-mode .form-control::placeholder {
	color: var(--text-muted-dark);
}
.footer {
	background-color: #343a40;
	color: white;
	padding: 20px 0;
	text-align: center;
}
.filter-btn {
	border-radius: 50px;
	font-weight: 600;
	transition: all 0.3s ease;
	padding: 0.6rem 1.5rem;
	border: 1px solid var(--border-light);
	background-color: var(--card-bg-light);
	color: var(--text-light);
}
body.dark-mode .filter-btn {
	border: 1px solid var(--border-dark);
	background-color: var(--card-bg-dark);
	color: var(--text-dark);
}
.filter-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 15px var(--shadow-light);
}
body.dark-mode .filter-btn:hover {
	box-shadow: 0 4px 15px var(--shadow-dark);
}
.filter-btn.active {
	background-color: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}
#category-dropdown-menu {
	border-radius: 0.75rem;
	padding: 0.5rem;
	margin-top: 0.5rem !important;
	animation: fadeInDropdown 0.3s ease forwards;
	--bs-dropdown-border-width: 0;
}
@keyframes fadeInDropdown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}
#category-dropdown-menu .dropdown-item {
	border-radius: 0.5rem;
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
	color: var(--text-light);
}
body.dark-mode #category-dropdown-menu .dropdown-item {
	color: var(--text-dark);
}
#category-dropdown-menu .dropdown-item:hover,
#category-dropdown-menu .dropdown-item:focus {
	background-color: var(--primary-color);
	color: white !important;
}
body.dark-mode #category-dropdown-menu .dropdown-item:hover,
body.dark-mode #category-dropdown-menu .dropdown-item:focus {
	color: white !important;
}
@keyframes ad-anim-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-anim-slideInLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes ad-anim-slideInRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes ad-anim-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ad-anim-glow { 0%, 100% { box-shadow: 0 0 5px rgba(0,123,255,0.2); } 50% { box-shadow: 0 0 20px rgba(0,123,255,0.7); } }
@keyframes ad-anim-tada { 0% {transform: scale(1)} 10%, 20% {transform: scale(.9) rotate(-3deg)} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg)} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg)} 100% {transform: scale(1) rotate(0)} }
@keyframes ad-anim-marqueeLeft { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }

/* --- Guides List Styles --- */
.link-block {
	border-radius: 0.75rem;
	margin-bottom: 1rem;
	transition: all 0.3s ease;
	position: relative;
	animation: scaleIn 0.4s ease-out forwards;
	overflow: hidden;
}
@keyframes scaleIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
.link-block:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px 0 var(--shadow-light);
}
body.dark-mode .link-block:hover {
	box-shadow: 0 8px 25px 0 var(--shadow-dark);
}
.link-block-clickable-area {
	display: flex;
	align-items: center; /* Reverted */
	padding: 1.1rem 1rem; /* Adjusted */
	text-decoration: none;
	color: inherit;
}
.link-block-img {
	width: 100px;
	height: auto; /* Reverted */
	aspect-ratio: 16 / 10; /* Reverted */
	border-radius: 0.5rem;
	object-fit: cover;
	margin-right: 1rem;
	flex-shrink: 0;
	background-color: var(--card-bg-light);
	transition: transform 0.3s ease;
}
body.dark-mode .link-block-img {
	background-color: var(--card-bg-dark);
}
.link-block-clickable-area:hover .link-block-img {
	transform: scale(1.05); /* Zoom effect */
}
@media (min-width: 576px) {
	.link-block-img {
		width: 30%;
	}
}
.link-block-content {
	flex: 1;
	min-width: 0;
}
.link-block-content h5 {
	font-weight: 700;
	color: var(--text-light);
	margin-bottom: 0.25rem;
}
body.dark-mode .link-block-content h5 {
	color: var(--text-dark);
}
.link-block-content p {
	color: var(--text-muted-light);
	margin-bottom: 0;
}
body.dark-mode .link-block-content p {
	color: var(--text-muted-dark);
}
@media (max-width: 575px) {
	.link-block-content p {
		font-size: 0.8rem;
		opacity: 0.85;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.link-block-clickable-area {
		padding: 0.75rem;
	}
	.link-block-img {
		margin-right: 0.75rem;
	}
}

/* --- Admin Styles --- */
.link-block-admin { cursor: move; }
.admin-controls { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; align-items: center; gap: 8px; }
.admin-category-select { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; background-color: rgba(255, 255, 255, 0.9); }
.hidden-admin-view { opacity: 0.6; border: 1px dashed #dc3545; }
.link-stats-container { padding: 10px; margin-top: 10px; border-top: 1px solid var(--border-light); }
body.dark-mode .link-stats-container { border-top: 1px solid var(--border-dark); }
.link-stats-container .stat-item { font-size: 0.8rem; }
.sortable-ghost { opacity: 0.4; background: #c8ebfb; }

#darkModeToggle { cursor: pointer; }

/* --- Story Carousel Styles --- */
.story-carousel-section {
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	background-color: var(--story-bg-light);
	transition: background-color 0.5s ease;
}
body.dark-mode .story-carousel-section {
	background-color: var(--story-bg-dark);
}
.story-carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.story-carousel .swiper-slide {
	height: auto;
	background: transparent;
	color: var(--text-light);
	padding: 0 5px;
	box-sizing: border-box;
}
body.dark-mode .story-carousel .swiper-slide {
	color: var(--text-dark);
}
.story-slide-card {
	display: block;
	position: relative;
	width: 100%;
	text-decoration: none;
	color: white;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 4px 15px var(--shadow-light);
	transition: all 0.3s ease;
}
body.dark-mode .story-slide-card {
	box-shadow: 0 4px 15px var(--shadow-dark);
}
.story-slide-card:hover {
	box-shadow: 0 6px 20px var(--shadow-light);
}
body.dark-mode .story-slide-card:hover {
	box-shadow: 0 6px 20px var(--shadow-dark);
}
.story-slide-card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	z-index: 1;
	background-color: var(--card-bg-light);
	transition: transform 0.3s ease;
}
body.dark-mode .story-slide-card-img {
	background-color: var(--card-bg-dark);
}
.story-slide-card:hover .story-slide-card-img {
	transform: scale(1.05); /* Zoom effect */
}
.story-slide-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80%;
	background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
	z-index: 2;
	transition: all 0.3s ease;
}
.story-slide-card:hover::after {
	background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
}
.story-slide-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0.75rem;
	z-index: 3;
}
.story-slide-card-content h5 {
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	margin-bottom: 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.story-slide-card-content p {
	display: none;
}
.story-slide-box.banner-slide {
	padding: 0;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
}
.story-carousel .swiper-button-prev,
.story-carousel .swiper-button-next {
	color: var(--primary-color);
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	right: auto;
}
.story-carousel .swiper-button-next {
	left: auto;
	right: 15px;
}
.story-carousel .swiper-button-prev::after,
.story-carousel .swiper-button-next::after {
	font-size: 20px;
	font-weight: 900;
}
.story-carousel .swiper-pagination {
	position: relative;
	bottom: 0;
	padding-top: 15px;
}
.story-carousel .swiper-pagination-bullet {
	background-color: #aaa;
	opacity: 1;
}
.story-carousel .swiper-pagination-bullet-active {
	background-color: var(--primary-color);
}
.story-carousel-controls {
	display: none !important;
}
@media (max-width: 767px) {
	.story-carousel .swiper-button-prev,
	.story-carousel .swiper-button-next {
		display: none;
	}
	.story-slide-card-content h5 {
		font-size: 0.9rem;
	}
}