/*

Theme Name: Traffic-Splash 2025

Theme URI: http://thetrafficexchangescript.com/

Description: A visually impressive ocean-themed design for Traffic-Splash.

Version: 3.0

Author: LFMTE Theme Generator

*/


@charset "utf-8";

/* ========================================
   CSS VARIABLES - Ocean Color Palette
   ======================================== */
:root {
	--ocean-deep: #0a2d4d;
	--ocean-mid: #1a4a7a;
	--ocean-light: #2d6aa3;
	--ocean-surface: #4a90c9;
	--wave-highlight: #6bb3e8;
	--foam-white: #e8f4fc;
	--sand-light: #f5e6d3;
	--coral-accent: #f4a626;
	--dolphin-green: #8dc73f;
	--palm-green: #2d8a3e;
	--sunset-orange: #f26522;
	--text-dark: #0a2d4d;
	--text-light: #ffffff;
}


/* ========================================
   BODY & MAIN BACKGROUND
   ======================================== */

body {
	font-size: 16px;
	font-weight: 400;
	color: var(--text-dark);
	background: linear-gradient(180deg,
		var(--ocean-deep) 0%,
		var(--ocean-mid) 30%,
		var(--ocean-light) 60%,
		var(--ocean-surface) 100%);
	background-attachment: fixed;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

/* Animated wave overlay */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M0,160L48,170.7C96,181,192,203,288,192C384,181,480,139,576,128C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") repeat-x;
	background-size: 100% 200px;
	background-position: bottom;
	pointer-events: none;
	z-index: -1;
	animation: waveFloat 8s ease-in-out infinite;
}

@keyframes waveFloat {
	0%, 100% { background-position-y: bottom; }
	50% { background-position-y: calc(100% + 10px); }
}

/* Floating bubbles animation */
body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 10% 80%, rgba(255,255,255,0.1) 2px, transparent 2px),
		radial-gradient(circle at 30% 60%, rgba(255,255,255,0.08) 3px, transparent 3px),
		radial-gradient(circle at 50% 70%, rgba(255,255,255,0.1) 2px, transparent 2px),
		radial-gradient(circle at 70% 85%, rgba(255,255,255,0.06) 4px, transparent 4px),
		radial-gradient(circle at 90% 65%, rgba(255,255,255,0.08) 2px, transparent 2px),
		radial-gradient(circle at 20% 40%, rgba(255,255,255,0.05) 3px, transparent 3px),
		radial-gradient(circle at 80% 45%, rgba(255,255,255,0.07) 2px, transparent 2px);
	pointer-events: none;
	z-index: -1;
	animation: bubbleRise 15s linear infinite;
}

@keyframes bubbleRise {
	0% { transform: translateY(0); opacity: 0.6; }
	50% { opacity: 1; }
	100% { transform: translateY(-100vh); opacity: 0; }
}


/* ========================================
   ELABORATE OCEAN HEADER SCENE
   ======================================== */

.ocean-header {
	background: linear-gradient(180deg,
		#ff9966 0%,
		#ff7744 8%,
		#ff6633 15%,
		#4da6cc 35%,
		#2d8ab8 50%,
		var(--ocean-mid) 70%,
		var(--ocean-deep) 100%);
	padding: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	min-height: 320px;
}

/* Tropical sunset sun with glow */
.ocean-header::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 120px;
	background: radial-gradient(circle,
		#ffee88 0%,
		#ffcc44 30%,
		#ff9933 60%,
		transparent 70%);
	border-radius: 50%;
	filter: blur(2px);
	animation: sunPulse 4s ease-in-out infinite;
	z-index: 1;
}

@keyframes sunPulse {
	0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
	50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

/* Sun rays */
.ocean-header::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 150px;
	background:
		linear-gradient(180deg, rgba(255,238,136,0.3) 0%, transparent 100%),
		repeating-conic-gradient(from 0deg at 50% -20%,
			transparent 0deg 8deg,
			rgba(255,238,136,0.1) 8deg 12deg,
			transparent 12deg 20deg);
	pointer-events: none;
	z-index: 0;
}

/* Cloud layer container */
.header-clouds {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 120px;
	overflow: hidden;
	z-index: 2;
}

/* Animated fluffy clouds */
.cloud {
	position: absolute;
	background: radial-gradient(ellipse at center,
		rgba(255,255,255,0.95) 0%,
		rgba(255,255,255,0.8) 40%,
		rgba(255,255,255,0.4) 70%,
		transparent 100%);
	border-radius: 50%;
	filter: blur(1px);
}

.cloud-1 {
	width: 200px;
	height: 60px;
	top: 15px;
	left: -200px;
	animation: cloudDrift 35s linear infinite;
}

.cloud-2 {
	width: 150px;
	height: 45px;
	top: 40px;
	left: -150px;
	animation: cloudDrift 45s linear infinite;
	animation-delay: -15s;
}

.cloud-3 {
	width: 180px;
	height: 55px;
	top: 25px;
	left: -180px;
	animation: cloudDrift 40s linear infinite;
	animation-delay: -25s;
}

.cloud-4 {
	width: 120px;
	height: 40px;
	top: 50px;
	left: -120px;
	animation: cloudDrift 50s linear infinite;
	animation-delay: -5s;
}

@keyframes cloudDrift {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(100vw + 300px)); }
}

/* Flying seagulls - Graceful soaring birds */
.seagulls {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	height: 100px;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
}

.seagull {
	position: absolute;
	width: 24px;
	height: 24px;
	opacity: 0.8;
}

/* Bird body using SVG for more realistic shape */
.seagull::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath fill='%23333' d='M20,10 Q12,10 8,6 Q4,2 0,4 Q4,6 8,8 Q12,10 20,10 Q28,10 32,8 Q36,6 40,4 Q36,2 32,6 Q28,10 20,10 Z'%3E%3Canimate attributeName='d' dur='0.6s' repeatCount='indefinite' calcMode='spline' keySplines='0.4 0 0.6 1; 0.4 0 0.6 1' values='M20,10 Q12,10 8,6 Q4,2 0,4 Q4,6 8,8 Q12,10 20,10 Q28,10 32,8 Q36,6 40,4 Q36,2 32,6 Q28,10 20,10 Z;M20,10 Q12,10 8,12 Q4,14 0,12 Q4,10 8,10 Q12,10 20,10 Q28,10 32,10 Q36,10 40,12 Q36,14 32,12 Q28,10 20,10 Z;M20,10 Q12,10 8,6 Q4,2 0,4 Q4,6 8,8 Q12,10 20,10 Q28,10 32,8 Q36,6 40,4 Q36,2 32,6 Q28,10 20,10 Z'/%3E%3C/path%3E%3Ccircle fill='%23333' cx='20' cy='10' r='2'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

/* Seagull 1 - Closer, larger, slower */
.seagull-1 {
	top: 15px;
	transform: scale(1.2);
	animation: seagullGlide1 28s linear infinite;
}

/* Seagull 2 - Middle distance */
.seagull-2 {
	top: 35px;
	transform: scale(0.9);
	opacity: 0.7;
	animation: seagullGlide2 35s linear infinite;
	animation-delay: -12s;
}

/* Seagull 3 - Far away, smaller */
.seagull-3 {
	top: 8px;
	transform: scale(0.7);
	opacity: 0.5;
	animation: seagullGlide3 42s linear infinite;
	animation-delay: -25s;
}

/* Graceful gliding animations with gentle vertical movement */
@keyframes seagullGlide1 {
	0% {
		left: -40px;
		top: 15px;
	}
	25% {
		top: 20px;
	}
	50% {
		top: 12px;
	}
	75% {
		top: 18px;
	}
	100% {
		left: calc(100% + 40px);
		top: 15px;
	}
}

@keyframes seagullGlide2 {
	0% {
		left: -40px;
		top: 35px;
	}
	20% {
		top: 30px;
	}
	40% {
		top: 38px;
	}
	60% {
		top: 32px;
	}
	80% {
		top: 36px;
	}
	100% {
		left: calc(100% + 40px);
		top: 35px;
	}
}

@keyframes seagullGlide3 {
	0% {
		left: -40px;
		top: 8px;
	}
	33% {
		top: 12px;
	}
	66% {
		top: 6px;
	}
	100% {
		left: calc(100% + 40px);
		top: 10px;
	}
}

/* Palm tree silhouettes - Left */
.palm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 180px;
	height: 280px;
	z-index: 4;
	pointer-events: none;
}

.palm-left::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20px;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cdefs%3E%3ClinearGradient id='trunk' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234a3728'/%3E%3Cstop offset='50%25' stop-color='%236b4423'/%3E%3Cstop offset='100%25' stop-color='%234a3728'/%3E%3C/linearGradient%3E%3ClinearGradient id='leaf1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%231a5a2e'/%3E%3Cstop offset='50%25' stop-color='%232d8a3e'/%3E%3Cstop offset='100%25' stop-color='%231a5a2e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23trunk)' d='M55,200 Q52,150 54,100 Q56,80 58,60 L62,60 Q64,80 66,100 Q68,150 65,200 Z'/%3E%3Cpath fill='%231a5a2e' d='M60,65 Q30,50 5,60 Q35,45 60,55 Z'/%3E%3Cpath fill='%232d8a3e' d='M60,60 Q25,35 0,40 Q30,25 60,45 Z'/%3E%3Cpath fill='%2323753a' d='M60,55 Q20,25 5,15 Q30,15 60,40 Z'/%3E%3Cpath fill='%231a5a2e' d='M60,65 Q90,50 115,60 Q85,45 60,55 Z'/%3E%3Cpath fill='%232d8a3e' d='M60,60 Q95,35 120,40 Q90,25 60,45 Z'/%3E%3Cpath fill='%2323753a' d='M60,55 Q100,25 115,15 Q90,15 60,40 Z'/%3E%3Cpath fill='%233da54e' d='M60,50 Q40,20 25,5 Q45,10 60,35 Q75,10 95,5 Q80,20 60,50 Z'/%3E%3Cellipse fill='%23654321' cx='60' cy='62' rx='8' ry='5'/%3E%3C/svg%3E") no-repeat center bottom;
	background-size: contain;
	transform: scaleX(-1);
	animation: palmSway 6s ease-in-out infinite;
	transform-origin: bottom center;
}

/* Palm tree silhouettes - Right */
.palm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 300px;
	z-index: 4;
	pointer-events: none;
}

.palm-right::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 20px;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cdefs%3E%3ClinearGradient id='trunk2' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234a3728'/%3E%3Cstop offset='50%25' stop-color='%236b4423'/%3E%3Cstop offset='100%25' stop-color='%234a3728'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23trunk2)' d='M55,200 Q52,150 54,100 Q56,80 58,60 L62,60 Q64,80 66,100 Q68,150 65,200 Z'/%3E%3Cpath fill='%231a5a2e' d='M60,65 Q30,50 5,60 Q35,45 60,55 Z'/%3E%3Cpath fill='%232d8a3e' d='M60,60 Q25,35 0,40 Q30,25 60,45 Z'/%3E%3Cpath fill='%2323753a' d='M60,55 Q20,25 5,15 Q30,15 60,40 Z'/%3E%3Cpath fill='%231a5a2e' d='M60,65 Q90,50 115,60 Q85,45 60,55 Z'/%3E%3Cpath fill='%232d8a3e' d='M60,60 Q95,35 120,40 Q90,25 60,45 Z'/%3E%3Cpath fill='%2323753a' d='M60,55 Q100,25 115,15 Q90,15 60,40 Z'/%3E%3Cpath fill='%233da54e' d='M60,50 Q40,20 25,5 Q45,10 60,35 Q75,10 95,5 Q80,20 60,50 Z'/%3E%3Cellipse fill='%23654321' cx='60' cy='62' rx='8' ry='5'/%3E%3C/svg%3E") no-repeat center bottom;
	background-size: contain;
	animation: palmSway 7s ease-in-out infinite;
	animation-delay: -2s;
	transform-origin: bottom center;
}

@keyframes palmSway {
	0%, 100% { transform: rotate(-2deg); }
	50% { transform: rotate(2deg); }
}

/* Animated ocean waves - Background layer */
.ocean-waves {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	z-index: 5;
	overflow: hidden;
}

.wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat-x;
	transform-origin: center bottom;
}

.wave-back {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%231a4a7a' d='M0,50 C180,80 360,20 540,50 C720,80 900,20 1080,50 C1260,80 1440,20 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
	background-size: 720px 100px;
	opacity: 0.6;
	animation: waveMove 18s linear infinite;
}

.wave-mid {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%232d6aa3' d='M0,60 C120,30 240,70 360,50 C480,30 600,70 720,50 C840,30 960,70 1080,50 C1200,30 1320,70 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
	background-size: 720px 100px;
	opacity: 0.8;
	animation: waveMove 14s linear infinite reverse;
	bottom: -5px;
}

.wave-front {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%230a2d4d' d='M0,70 C90,50 180,80 270,60 C360,40 450,80 540,60 C630,40 720,80 810,60 C900,40 990,80 1080,60 C1170,40 1260,80 1350,60 C1440,40 1440,70 1440,70 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
	background-size: 540px 100px;
	animation: waveMove 10s linear infinite;
	bottom: -10px;
}

@keyframes waveMove {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Foam/sparkle on waves */
.wave-foam {
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Ccircle fill='%23ffffff' fill-opacity='0.4' cx='10' cy='10' r='2'/%3E%3Ccircle fill='%23ffffff' fill-opacity='0.3' cx='30' cy='8' r='1.5'/%3E%3Ccircle fill='%23ffffff' fill-opacity='0.5' cx='50' cy='12' r='2'/%3E%3Ccircle fill='%23ffffff' fill-opacity='0.3' cx='70' cy='7' r='1.5'/%3E%3Ccircle fill='%23ffffff' fill-opacity='0.4' cx='90' cy='10' r='2'/%3E%3C/svg%3E");
	background-size: 100px 20px;
	animation: foamSparkle 2s ease-in-out infinite;
	z-index: 6;
}

@keyframes foamSparkle {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

/* Logo container - elevated above the ocean */
.header-logo-container {
	position: relative;
	z-index: 10;
	display: inline-block;
	margin-top: 30px;
	animation: logoFloat 4s ease-in-out infinite;
}

.header-logo {
	max-width: 400px;
	width: 90%;
	height: auto;
	filter: drop-shadow(0 8px 25px rgba(0,0,0,0.4))
			drop-shadow(0 0 30px rgba(255,255,255,0.3));
}

@keyframes logoFloat {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	25% { transform: translateY(-10px) rotate(0deg); }
	50% { transform: translateY(-5px) rotate(1deg); }
	75% { transform: translateY(-12px) rotate(0deg); }
}

/* Water splash effect under logo */
.splash-decoration {
	position: relative;
	z-index: 9;
	margin-top: -20px;
	height: 50px;
}

.splash-decoration::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 50px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 50'%3E%3Cdefs%3E%3ClinearGradient id='splash' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2399ddff' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%234da6cc' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23splash)' d='M150,5 Q130,0 120,10 Q110,5 100,15 Q90,10 80,20 L80,50 L220,50 L220,20 Q210,10 200,15 Q190,5 180,10 Q170,0 150,5 Z'%3E%3Canimate attributeName='d' dur='2s' repeatCount='indefinite' values='M150,5 Q130,0 120,10 Q110,5 100,15 Q90,10 80,20 L80,50 L220,50 L220,20 Q210,10 200,15 Q190,5 180,10 Q170,0 150,5 Z;M150,8 Q130,3 120,13 Q110,8 100,18 Q90,13 80,23 L80,50 L220,50 L220,23 Q210,13 200,18 Q190,8 180,13 Q170,3 150,8 Z;M150,5 Q130,0 120,10 Q110,5 100,15 Q90,10 80,20 L80,50 L220,50 L220,20 Q210,10 200,15 Q190,5 180,10 Q170,0 150,5 Z'/%3E%3C/path%3E%3Ccircle fill='%23ffffff' fill-opacity='0.6' cx='100' cy='25' r='3'%3E%3Canimate attributeName='cy' dur='1s' repeatCount='indefinite' values='25;20;25'/%3E%3C/circle%3E%3Ccircle fill='%23ffffff' fill-opacity='0.5' cx='200' cy='22' r='2'%3E%3Canimate attributeName='cy' dur='1.2s' repeatCount='indefinite' values='22;17;22'/%3E%3C/circle%3E%3Ccircle fill='%23ffffff' fill-opacity='0.7' cx='150' cy='15' r='2.5'%3E%3Canimate attributeName='cy' dur='0.8s' repeatCount='indefinite' values='15;10;15'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

/* Sparkle/shimmer effect on water */
.water-sparkles {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	height: 80px;
	z-index: 7;
	pointer-events: none;
}

.sparkle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: radial-gradient(circle, #fff 0%, transparent 70%);
	border-radius: 50%;
	animation: sparkleGlow 2s ease-in-out infinite;
}

.sparkle:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; }
.sparkle:nth-child(2) { left: 35%; top: 40%; animation-delay: 0.5s; }
.sparkle:nth-child(3) { left: 55%; top: 25%; animation-delay: 1s; }
.sparkle:nth-child(4) { left: 75%; top: 50%; animation-delay: 1.5s; }
.sparkle:nth-child(5) { left: 85%; top: 30%; animation-delay: 0.3s; }
.sparkle:nth-child(6) { left: 25%; top: 55%; animation-delay: 0.8s; }
.sparkle:nth-child(7) { left: 65%; top: 45%; animation-delay: 1.2s; }

@keyframes sparkleGlow {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.5); }
}

/* Responsive header */
@media (max-width: 992px) {
	.ocean-header {
		min-height: 280px;
	}
	.header-logo {
		max-width: 350px;
	}
	.palm-left, .palm-right {
		width: 140px;
		height: 220px;
	}
}

@media (max-width: 768px) {
	.ocean-header {
		min-height: 240px;
	}
	.header-logo {
		max-width: 300px;
		margin-top: 20px;
	}
	.header-logo-container {
		margin-top: 20px;
	}
	.palm-left, .palm-right {
		width: 100px;
		height: 180px;
		opacity: 0.7;
	}
	.seagulls {
		display: none;
	}
	.ocean-header::before {
		width: 80px;
		height: 80px;
		top: -20px;
	}
}

@media (max-width: 480px) {
	.ocean-header {
		min-height: 200px;
	}
	.header-logo {
		max-width: 250px;
	}
	.palm-left, .palm-right {
		width: 70px;
		height: 140px;
	}
	.cloud {
		display: none;
	}
}


/* ========================================
   TOP LEVEL MENU BAR
   ======================================== */

.lfm_menu_bar {
	background: linear-gradient(180deg,
		var(--ocean-deep) 0%,
		#0d3558 100%);
	padding: 0 0 45px;
	margin-bottom: 0;
	position: relative;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Subtle wave pattern on menu bar */
.lfm_menu_bar::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath fill='%234a90c9' d='M0,4 Q12.5,0 25,4 Q37.5,8 50,4 Q62.5,0 75,4 Q87.5,8 100,4 L100,8 L0,8 Z'/%3E%3C/svg%3E");
	background-size: 100px 8px;
	animation: menuWave 4s linear infinite;
}

@keyframes menuWave {
	0% { background-position-x: 0; }
	100% { background-position-x: 100px; }
}

@media (max-width: 991.98px) {
	.lfm_menu_bar {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.lfm_menu_bar::after {
		display: none;
	}
}


/* ========================================
   SITE LOGO IN MENU
   ======================================== */

.lfm_menu_logo {
	max-height: 35px;
	filter: brightness(1.1);
}

@media (min-width: 992px) {
	.lfm_menu_logo {
		margin-right: 20px;
	}
}


/* ========================================
   TOP LEVEL NAVIGATION TABS
   ======================================== */

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-light);
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	transition: all 0.3s ease;
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
	color: var(--ocean-deep);
	background: linear-gradient(180deg, #ffffff 0%, var(--foam-white) 100%);
	text-shadow: none;
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
	background: linear-gradient(180deg,
		rgba(107, 179, 232, 0.4) 0%,
		rgba(74, 144, 201, 0.3) 100%);
	transform: translateY(-2px);
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:hover {
	background: linear-gradient(180deg, #ffffff 0%, var(--foam-white) 100%);
	transform: none;
}

@media (min-width: 992px) {
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
		margin: 0px 3px;
		padding: 6px 15px;
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 8px 8px 0 0;
		position: relative;
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link,
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
		border: 1px solid rgba(255,255,255,0.3);
		border-bottom-color: transparent;
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
		content: "";
		background: linear-gradient(180deg, #ffffff 0%, var(--foam-white) 100%);
		width: calc(100% + 2px);
		height: 14px;
		position: absolute;
		bottom: -10px;
		left: -1px;
		border: 1px solid rgba(0,0,0,0.1);
		border-top: none;
	}
}

@media (max-width: 991.98px) {
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
		padding: 8px 15px;
		text-align: left;
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link {
		color: var(--text-light);
		background: transparent;
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover {
		color: var(--text-light);
		background: rgba(107, 179, 232, 0.3);
	}

	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after {
		content: "";
		border-top: 0.3em solid;
		border-right: 0.3em solid transparent;
		border-bottom: 0;
		border-left: 0.3em solid transparent;
		color: var(--text-light);
		transform: rotate(-90deg);
		position: absolute;
		right: 1.25rem;
		transition: all 0.2s ease-out;
	}
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
		color: var(--ocean-deep);
		transform: rotate(0deg);
	}
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:after {
		color: var(--text-light);
		transform: rotate(-90deg);
	}
}


/* ========================================
   SECOND LEVEL MENU TAB
   ======================================== */

.lfm_menu_tab {
	background: linear-gradient(180deg, #ffffff 0%, var(--foam-white) 100%);
	border: 1px solid rgba(0,0,0,0.1);
	border-top: 3px solid var(--ocean-surface);
	position: absolute;
	display: none;
	left: 0;
	top: 100%;
	z-index: 999;
	width: 100%;
	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

li.lfm_tab_opened .lfm_menu_tab {
	display: flex;
}

@media (max-width: 991.98px) {
	.lfm_menu_tab {
		background: linear-gradient(180deg, var(--foam-white) 0%, #d4e8f5 100%);
		position: relative;
		flex-direction: column;
		top: 0;
		padding: 5px 0;
		border-top: none;
	}
	li.lfm_tab_closed .lfm_menu_tab {
		display: none;
	}
}


/* ========================================
   SECOND LEVEL MENU LINKS
   ======================================== */

.lfm_menu_tab > li > a {
	font-size: 15px;
	padding: 0 20px;
	line-height: 45px;
	color: var(--ocean-mid);
	text-decoration: none;
	display: block;
	transition: all 0.2s ease;
	position: relative;
}

.lfm_menu_tab > li > a:hover {
	color: var(--coral-accent);
	background: rgba(74, 144, 201, 0.1);
}

/* Animated underline on hover */
.lfm_menu_tab > li > a::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var(--coral-accent);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.lfm_menu_tab > li > a:hover::after {
	transform: scaleX(1);
}


/* ========================================
   THIRD LEVEL DROPDOWN MENUS
   ======================================== */

.lfm_menu_tab .dropdown-menu {
	background: linear-gradient(180deg, #ffffff 0%, var(--foam-white) 100%);
	border: 1px solid rgba(74, 144, 201, 0.2);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	margin-top: 5px;
}

.lfm_menu_tab .dropdown-menu a {
	font-size: 15px;
	padding: 0 20px;
	line-height: 36px;
	color: var(--ocean-mid);
	text-decoration: none;
	white-space: nowrap;
	display: block;
	transition: all 0.2s ease;
}

.lfm_menu_tab .dropdown-menu li:hover {
	background: linear-gradient(90deg,
		rgba(107, 179, 232, 0.2) 0%,
		transparent 100%);
}

.lfm_menu_tab .dropdown-menu li:hover a {
	color: var(--coral-accent);
}

@media (max-width: 991.98px) {
	.lfm_menu_tab > li > a {
		padding-left: 40px;
		line-height: 36px;
		width: 100%;
	}
	.lfm_menu_tab > li > a::after {
		display: none;
	}
	.lfm_menu_tab .dropdown-menu a {
		padding-left: 50px;
	}
}


/* ========================================
   CONTENT CONTAINER
   ======================================== */

.container {
	position: relative;
	z-index: 1;
}

.container.pt-4.pb-5 {
	background: linear-gradient(180deg,
		rgba(255,255,255,0.95) 0%,
		rgba(232,244,252,0.95) 100%);
	border-radius: 15px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
	margin-top: 20px;
	margin-bottom: 40px;
	padding: 30px !important;
	backdrop-filter: blur(5px);
}


/* ========================================
   FOOTER STYLES
   ======================================== */

.lfm_footer {
	background: linear-gradient(180deg,
		var(--ocean-deep) 0%,
		#061a2e 100%);
	position: relative;
	overflow: hidden;
}

.lfm_footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath fill='%234a90c9' d='M0,5 Q12.5,0 25,5 Q37.5,10 50,5 Q62.5,0 75,5 Q87.5,10 100,5 L100,0 L0,0 Z'/%3E%3C/svg%3E");
	background-size: 100px 10px;
}

.lfm_footer h4,
.lfm_footer h5 {
	color: var(--wave-highlight) !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* ========================================
   BUTTONS & FORM ELEMENTS
   ======================================== */

.buttonlink {
	cursor: pointer;
	background: linear-gradient(180deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	border-radius: 8px;
	border: 1px solid var(--ocean-deep);
	display: inline-block;
	color: var(--text-light);
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	padding: 8px 16px;
	margin: 2px 1px;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	transition: all 0.3s ease;
}

.buttonlink:hover {
	color: var(--text-light);
	background: linear-gradient(180deg,
		var(--wave-highlight) 0%,
		var(--ocean-light) 100%);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Bootstrap button overrides */
.btn-primary {
	background: linear-gradient(180deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	border-color: var(--ocean-deep);
	transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
	background: linear-gradient(180deg,
		var(--wave-highlight) 0%,
		var(--ocean-light) 100%);
	border-color: var(--ocean-mid);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(74, 144, 201, 0.4);
}

.btn-success {
	background: linear-gradient(180deg,
		#5cb85c 0%,
		var(--palm-green) 100%);
	border-color: #1e6a2c;
}

.btn-warning {
	background: linear-gradient(180deg,
		#f0ad4e 0%,
		var(--coral-accent) 100%);
	border-color: #d9840d;
	color: var(--text-light);
}

.btn-danger {
	background: linear-gradient(180deg,
		#e74c3c 0%,
		#c0392b 100%);
	border-color: #962d22;
}


/* ========================================
   INFO BARS & SECTIONS
   ======================================== */

.infobar {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	color: var(--text-light);
	background: linear-gradient(135deg,
		var(--ocean-mid) 0%,
		var(--ocean-deep) 100%);
	position: relative;
	overflow: hidden;
}

.infobar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='%23ffffff' fill-opacity='0.05' cx='20' cy='20' r='15'/%3E%3Ccircle fill='%23ffffff' fill-opacity='0.03' cx='80' cy='60' r='25'/%3E%3Ccircle fill='%23ffffff' fill-opacity='0.04' cx='50' cy='90' r='20'/%3E%3C/svg%3E");
	pointer-events: none;
}

.infobar h2 {
	color: var(--text-light);
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* ========================================
   ICONS
   ======================================== */

.far, .fas {
	margin-right: 3px;
}

.feedicon {
	color: var(--wave-highlight);
	font-size: 20px;
	margin-right: 5px;
}


/* ========================================
   PROFILE PICTURES
   ======================================== */

.profilepic_small {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--ocean-surface);
}

.profilepic_med {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 3px solid var(--ocean-surface);
}

.profilepic_large {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 4px solid var(--ocean-surface);
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}


/* ========================================
   TEXT STYLES
   ======================================== */

.lfm_title {
	font-family: Arial, sans-serif;
	color: var(--ocean-deep);
	font-size: 32px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.lfm_descr {
	font-family: Arial, sans-serif;
	color: var(--text-dark);
	font-size: 16px;
}

.lfm_descr_bold {
	font-family: Arial, sans-serif;
	color: var(--ocean-deep);
	font-size: 16px;
	font-weight: 700;
}


/* ========================================
   UTILITY CLASSES
   ======================================== */

.vcenter {
	display: flex;
	align-items: center;
}


/* ========================================
   CARDS & PANELS
   ======================================== */

.card {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-header {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	color: var(--text-light);
	border-bottom: none;
}


/* ========================================
   TABLES
   ======================================== */

.table {
	background: rgba(255,255,255,0.9);
	border-radius: 8px;
	overflow: hidden;
}

.table thead th {
	background: linear-gradient(180deg,
		var(--ocean-mid) 0%,
		var(--ocean-deep) 100%);
	color: var(--text-light);
	border: none;
	font-weight: 500;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(107, 179, 232, 0.1);
}

.table-hover tbody tr:hover {
	background-color: rgba(107, 179, 232, 0.2);
}


/* ========================================
   FORMS
   ======================================== */

.form-control {
	border: 2px solid rgba(74, 144, 201, 0.3);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.form-control:focus {
	border-color: var(--ocean-surface);
	box-shadow: 0 0 0 3px rgba(74, 144, 201, 0.2);
}


/* ========================================
   ALERTS
   ======================================== */

.alert {
	border-radius: 10px;
	border: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.alert-info {
	background: linear-gradient(135deg,
		rgba(107, 179, 232, 0.2) 0%,
		rgba(74, 144, 201, 0.2) 100%);
	color: var(--ocean-deep);
	border-left: 4px solid var(--ocean-surface);
}

.alert-success {
	background: linear-gradient(135deg,
		rgba(141, 199, 63, 0.2) 0%,
		rgba(45, 138, 62, 0.2) 100%);
	color: #1e6a2c;
	border-left: 4px solid var(--palm-green);
}

.alert-warning {
	background: linear-gradient(135deg,
		rgba(244, 166, 38, 0.2) 0%,
		rgba(242, 101, 34, 0.2) 100%);
	color: #8a5a1b;
	border-left: 4px solid var(--coral-accent);
}

.alert-danger {
	background: linear-gradient(135deg,
		rgba(231, 76, 60, 0.2) 0%,
		rgba(192, 57, 43, 0.2) 100%);
	color: #962d22;
	border-left: 4px solid #e74c3c;
}


/* ========================================
   LINKS
   ======================================== */

a {
	color: var(--ocean-mid);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--coral-accent);
}


/* ========================================
   ANIMATED DECORATIONS (optional fish)
   ======================================== */

@keyframes swimRight {
	0% { transform: translateX(-100px); }
	100% { transform: translateX(calc(100vw + 100px)); }
}

.swimming-fish {
	position: fixed;
	bottom: 20%;
	left: 0;
	width: 40px;
	height: 20px;
	/* Fish facing right - body on left, tail on right, eye on front */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 20'%3E%3Cellipse fill='%23f4a626' cx='25' cy='10' rx='15' ry='8'/%3E%3Cpolygon fill='%23f4a626' points='10,10 0,2 0,18'/%3E%3Ccircle fill='%23ffffff' cx='32' cy='8' r='3'/%3E%3Ccircle fill='%23000' cx='33' cy='8' r='1.5'/%3E%3Cpath fill='%23e8941f' d='M20,10 Q25,6 30,10 Q25,14 20,10' opacity='0.5'/%3E%3C/svg%3E") no-repeat;
	background-size: contain;
	animation: swimRight 25s linear infinite;
	pointer-events: none;
	z-index: 0;
	opacity: 0.6;
}


/* ========================================
   SCROLLBAR STYLING (Webkit)
   ======================================== */

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--ocean-deep);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg,
		var(--ocean-surface) 0%,
		var(--ocean-mid) 100%);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg,
		var(--wave-highlight) 0%,
		var(--ocean-surface) 100%);
}


/* ========================================
   SELECTION STYLING
   ======================================== */

::selection {
	background: var(--ocean-surface);
	color: var(--text-light);
}


/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 576px) {
	.container.pt-4.pb-5 {
		margin: 10px;
		padding: 20px !important;
		border-radius: 10px;
	}

	.lfm_title {
		font-size: 24px;
	}
}

@media (max-width: 768px) {
	body::after {
		animation-duration: 20s;
	}
}


/* ========================================
   PERFORMANCE: Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ========================================
   ADDITIONAL HOMEPAGE SECTION STYLES
   ======================================== */

/* Style alternating sections on homepage */
.row.no-gutters,
.row.vcenter {
	position: relative;
	z-index: 1;
}

/* Style sections with background colors */
section,
.section,
div[style*="background-color: #555555"],
div[style*="background:#555555"],
div[style*="background-color:#555555"] {
	background: linear-gradient(135deg,
		var(--ocean-mid) 0%,
		var(--ocean-deep) 100%) !important;
}

/* Gray background sections to ocean theme */
div[style*="background-color: gray"],
div[style*="background-color:#808080"],
div[style*="background:gray"],
div[style*="background: #6"],
div[style*="background:#6"],
div[style*="background-color: #6"] {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%) !important;
}

/* Override any inline gray backgrounds */
.bg-secondary {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%) !important;
}

/* Ensure white text on dark backgrounds */
div[style*="color: #FFFFFF"],
div[style*="color:#FFFFFF"],
div[style*="color: white"],
div[style*="color:white"] {
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Style headings in colored sections */
.infobar h1,
.infobar h2,
.infobar h3,
.infobar h4,
.infobar h5,
.infobar h6 {
	color: var(--text-light) !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Enhanced navbar brand text */
.navbar-brand,
.lfm_menu_bar .navbar-brand {
	color: var(--text-light) !important;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	font-size: 1.25rem;
}

/* Additional wave decoration for menu bar visibility */
.lfm_menu_bar::before {
	content: "";
	position: absolute;
	bottom: 45px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--wave-highlight) 25%,
		var(--ocean-surface) 50%,
		var(--wave-highlight) 75%,
		transparent 100%);
	opacity: 0.6;
}

/* Jumbotron and hero section styling */
.jumbotron {
	background: linear-gradient(135deg,
		rgba(10, 45, 77, 0.9) 0%,
		rgba(26, 74, 122, 0.9) 100%);
	color: var(--text-light);
	border-radius: 15px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.jumbotron h1,
.jumbotron h2,
.jumbotron .display-4 {
	color: var(--text-light) !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Well and panel styling */
.well,
.panel {
	background: linear-gradient(180deg,
		rgba(255,255,255,0.95) 0%,
		rgba(232,244,252,0.95) 100%);
	border: 1px solid rgba(74, 144, 201, 0.2);
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.panel-heading {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	color: var(--text-light);
	border-radius: 12px 12px 0 0;
}

/* Badge styling */
.badge {
	border-radius: 20px;
	padding: 5px 12px;
	font-weight: 500;
}

.badge-primary {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
}

.badge-success {
	background: linear-gradient(135deg,
		var(--dolphin-green) 0%,
		var(--palm-green) 100%);
}

.badge-warning {
	background: linear-gradient(135deg,
		#f0ad4e 0%,
		var(--coral-accent) 100%);
	color: var(--text-light);
}

/* Progress bars ocean themed */
.progress {
	background-color: rgba(74, 144, 201, 0.2);
	border-radius: 10px;
	overflow: hidden;
}

.progress-bar {
	background: linear-gradient(90deg,
		var(--ocean-light) 0%,
		var(--wave-highlight) 100%);
}

/* List group items */
.list-group-item {
	border-color: rgba(74, 144, 201, 0.2);
	transition: all 0.2s ease;
}

.list-group-item:hover {
	background: rgba(107, 179, 232, 0.1);
	border-color: rgba(74, 144, 201, 0.3);
}

.list-group-item.active {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	border-color: var(--ocean-mid);
}

/* Nav tabs and pills */
.nav-tabs .nav-link.active {
	background: linear-gradient(180deg, #ffffff 0%, var(--foam-white) 100%);
	border-color: rgba(74, 144, 201, 0.3);
	color: var(--ocean-deep);
}

.nav-pills .nav-link.active {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
}

/* Modal styling */
/* Ensure modals appear above all other elements including body pseudo-elements */
.modal {
	z-index: 1050 !important;
}

.modal-backdrop {
	z-index: 1040 !important;
}

.modal-dialog {
	z-index: 1055 !important;
	pointer-events: auto;
}

.modal-content {
	border: none;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

.modal-header {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	color: var(--text-light);
	border-bottom: none;
}

.modal-body {
	background: #fff;
	color: var(--text-dark);
}

.modal-footer {
	background: #f8f9fa;
	border-top: 1px solid rgba(0,0,0,0.1);
}

/* Ensure modal title is readable */
.modal-title {
	color: var(--text-light);
}

/* Fix for modal backdrop not blocking clicks */
.modal.show {
	pointer-events: auto;
}

.modal-open {
	overflow: hidden;
}

/* Ensure body pseudo-elements don't interfere with modals */
.modal-open body::before,
.modal-open body::after,
body.modal-open::before,
body.modal-open::after {
	z-index: -1 !important;
}

/* Pagination styling */
.page-link {
	color: var(--ocean-mid);
	border-color: rgba(74, 144, 201, 0.3);
	transition: all 0.2s ease;
}

.page-link:hover {
	background: rgba(107, 179, 232, 0.2);
	color: var(--ocean-deep);
	border-color: var(--ocean-surface);
}

.page-item.active .page-link {
	background: linear-gradient(135deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%);
	border-color: var(--ocean-mid);
}

/* Breadcrumb styling */
.breadcrumb {
	background: rgba(232, 244, 252, 0.8);
	border-radius: 8px;
}

.breadcrumb-item a {
	color: var(--ocean-mid);
}

.breadcrumb-item.active {
	color: var(--coral-accent);
}

/* Text muted override for readability */
.text-muted {
	color: #5a7a94 !important;
}

/* Improve second level menu appearance */
.lfm_menu_tab > li > a span {
	font-weight: 500;
}

/* Dropdown arrow indicators for menu items with submenus */
/* Style the existing .caret element in dropdown toggles */
.lfm_menu_tab .dropdown > a.dropdown-toggle .caret,
.lfm_menu_tab .dropdown > a.dropdown-toggle b.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-top: 5px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-bottom: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.lfm_menu_tab .dropdown.show > a.dropdown-toggle .caret,
.lfm_menu_tab .dropdown:hover > a.dropdown-toggle .caret,
.lfm_menu_tab .dropdown.show > a.dropdown-toggle b.caret,
.lfm_menu_tab .dropdown:hover > a.dropdown-toggle b.caret {
	opacity: 1;
}

/* Also add ::after pseudo-element as fallback if no .caret exists */
.lfm_menu_tab .dropdown > a.dropdown-toggle::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	border-top: 5px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-bottom: 0;
	opacity: 0.7;
	transition: transform 0.2s ease;
}

/* Hide ::after if .caret exists to avoid double arrows */
.lfm_menu_tab .dropdown > a.dropdown-toggle:has(.caret)::after,
.lfm_menu_tab .dropdown > a.dropdown-toggle:has(b.caret)::after {
	display: none;
}

.lfm_menu_tab .dropdown.show > a.dropdown-toggle::after,
.lfm_menu_tab .dropdown:hover > a.dropdown-toggle::after {
	opacity: 1;
}

/* Mobile adjustments for dropdown arrows */
@media (max-width: 991.98px) {
	.lfm_menu_tab .dropdown > a.dropdown-toggle .caret,
	.lfm_menu_tab .dropdown > a.dropdown-toggle b.caret {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0;
	}

	.lfm_menu_tab .dropdown > a.dropdown-toggle::after {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* Swimming fish additional styling */
.swimming-fish {
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Add second fish at different position */
body > .swimming-fish:first-of-type ~ .swimming-fish {
	bottom: 40%;
	animation-delay: -12s;
	opacity: 0.4;
	transform: scale(0.8);
}


/* ========================================
   DEFAULT WHITE TEXT FOR BODY CONTENT
   (For text outside containers on dark background)
   ======================================== */

/* Default text color for body - white for visibility on ocean background */
body {
	color: var(--text-light);
}

/* Reset text color inside containers to dark for readability */
.container,
.container-fluid,
.card,
.card-body,
.modal-body,
.modal-content,
.dropdown-menu,
.lfm_menu_tab,
.well,
.panel,
.panel-body,
.alert,
.jumbotron,
.table,
div[class*="bg-white"],
div[class*="bg-light"],
.content-wrapper,
.main-content,
.page-content {
	color: var(--text-dark);
}

/* Ensure container backgrounds have dark text */
.container.pt-4.pb-5,
.container.pt-4.pb-5 * {
	color: var(--text-dark);
}

/* But allow specific elements to override back to white if needed */
.container.pt-4.pb-5 .text-white,
.container.pt-4.pb-5 .text-light,
.container.pt-4.pb-5 [class*="btn-"],
.container.pt-4.pb-5 .card-header,
.container.pt-4.pb-5 .table thead th {
	color: var(--text-light);
}

/* Links inside containers */
.container a,
.container-fluid a,
.card-body a {
	color: var(--ocean-mid);
}

.container a:hover,
.container-fluid a:hover,
.card-body a:hover {
	color: var(--coral-accent);
}

/* Text directly in body (outside containers) should be white with shadow */
body > p,
body > h1,
body > h2,
body > h3,
body > h4,
body > h5,
body > h6,
body > span,
body > div:not(.container):not(.container-fluid):not(.lfm_menu_bar):not(.ocean-header):not(.lfm_footer):not(.swimming-fish) {
	color: var(--text-light);
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/* ========================================
   DATATABLE STYLING
   ======================================== */

/* DataTable sortable column headers - ensure dark blue background */
.table thead th,
.table.dataTable thead th,
.table.dataTable thead td,
table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper .table thead th,
.card-table .table thead th {
	background: linear-gradient(180deg,
		var(--ocean-mid) 0%,
		var(--ocean-deep) 100%) !important;
	color: var(--text-light) !important;
	border-color: var(--ocean-deep) !important;
	font-weight: 500;
}

/* Sortable columns specifically */
.table.dataTable thead .sorting,
.table.dataTable thead .sorting_asc,
.table.dataTable thead .sorting_desc,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
.sorting,
.sorting_asc,
.sorting_desc,
th.sorting,
th.sorting_asc,
th.sorting_desc {
	background: linear-gradient(180deg,
		var(--ocean-mid) 0%,
		var(--ocean-deep) 100%) !important;
	color: var(--text-light) !important;
}

/* Sorting icons - ensure visibility */
.table.dataTable thead .sorting::before,
.table.dataTable thead .sorting::after,
.table.dataTable thead .sorting_asc::before,
.table.dataTable thead .sorting_asc::after,
.table.dataTable thead .sorting_desc::before,
.table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
	color: var(--text-light) !important;
	opacity: 0.7;
}

/* Active sort column */
.table.dataTable thead .sorting_asc,
.table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	background: linear-gradient(180deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%) !important;
}

/* Hover state for sortable headers */
.table.dataTable thead th:hover,
table.dataTable thead th:hover,
.sorting:hover,
.sorting_asc:hover,
.sorting_desc:hover {
	background: linear-gradient(180deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%) !important;
}

/* DataTable wrapper and controls */
.dataTables_wrapper {
	color: var(--text-dark);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	color: var(--text-dark);
}

/* DataTable pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--ocean-mid) !important;
	border-color: rgba(74, 144, 201, 0.3);
	background: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: var(--text-light) !important;
	background: linear-gradient(180deg,
		var(--ocean-light) 0%,
		var(--ocean-mid) 100%) !important;
	border-color: var(--ocean-mid);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	color: var(--text-light) !important;
	background: linear-gradient(180deg,
		var(--ocean-mid) 0%,
		var(--ocean-deep) 100%) !important;
	border-color: var(--ocean-deep);
}

/* Card table specific styles */
.card-table .card-body {
	padding: 0;
}

.card-table .table {
	margin-bottom: 0;
}

.card-border-color-primary {
	border-top: 3px solid var(--ocean-surface);
}