/* ================================================
		   CSS VARIABLES — Global Design Tokens
		   ================================================ */
		   :root {
		   	--pastel-cream: #F8F4EA;
		   	--pastel-rose: #C69C9F;
		   	--shimmer-gold: #FFD700;
		   	--primary-gold: #7d6e5d;

		   	/* NEW — Refined Palette Extension */
		   	--cream-deep: #EDE8DC;
		   	--rose-light: #E8C8CB;
		   	--rose-deep: #A67B7F;
		   	--gold-soft: #C9A84C;
		   	--gold-deep: #9E7B2E;
		   	--text-warm: #4A4240;
		   	--text-muted: #8A7E78;
		   	--shadow-warm: rgba(74, 66, 64, 0.12);
		   	--shadow-hover: rgba(74, 66, 64, 0.22);
		   	--glass-white: rgba(255, 255, 255, 0.18);
		   	--glass-border: rgba(255, 255, 255, 0.28);

		   	--wa-green: #25d366;
		   	--wa-dark-green: #075e54;
		   	--wa-light-green: #dcf8c6;
		   }

		/* ================================================
		   BASE / RESET
		   ================================================ */
		   html {
		   	font-family: 'DM Sans', sans-serif;
		   	-webkit-font-smoothing: antialiased;
		   	-moz-osx-font-smoothing: grayscale;
		   }

		   body {
		   	background-color: var(--pastel-cream);
		   	color: var(--text-warm);
		   	transition: background-color 0.4s ease;
		   }

		   .dark body {
		   	background-color: #111827;
		   }

		/* ================================================
		   GLASS-CARD — Enhanced Glassmorphism
		   ================================================ */
		   .glass-card {
		   	background: linear-gradient(
		   		135deg,
		   		rgba(255, 255, 255, 0.22) 0%,
		   		rgba(255, 255, 255, 0.10) 100%
		   	);
		   	backdrop-filter: blur(16px) saturate(1.4);
		   	-webkit-backdrop-filter: blur(16px) saturate(1.4);
		   	border: 1px solid var(--glass-border);
		   	border-radius: 20px;
		   	box-shadow:
		   	0 8px 32px var(--shadow-warm),
		   	inset 0 1px 0 rgba(255,255,255,0.30);
		   	position: relative;
		   	z-index: 10;
		   	transition: box-shadow 0.35s ease, transform 0.35s ease;
		   }

		   .glass-card:hover {
		   	box-shadow:
		   	0 14px 40px var(--shadow-hover),
		   	inset 0 1px 0 rgba(255,255,255,0.40);
		   	transform: translateY(-2px);
		   }

		   .modal-body .glass-card {
		   	background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
		   	backdrop-filter: blur(16px) saturate(1.4);
		   	-webkit-backdrop-filter: blur(16px) saturate(1.4);
		   	color: var(--text-warm);
		   }

		   .dark .glass-card {
		   	background: linear-gradient(135deg, rgba(31,41,55,0.30), rgba(31,41,55,0.15));
		   	border: 1px solid rgba(255,255,255,0.07);
		   }

		/* ================================================
		   REPLY-CARD
		   ================================================ */
		   .reply-card {
		   	border-left: 3px solid var(--gold-soft);
		   	background: linear-gradient(90deg, rgba(201,168,76,0.06), transparent);
		   	border-radius: 0 12px 12px 0;
		   	padding-left: 14px;
		   }

		/* ================================================
		   ANIMATIONS — Fade / Slide
		   ================================================ */
		   .fade-in {
		   	animation: fadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
		   }

		   @keyframes fadeIn {
		   	from {
		   		opacity: 0;
		   		transform: translateX(-50%) translateY(-12px);
		   	}
		   	to {
		   		opacity: 1;
		   		transform: translateX(-50%) translateY(0);
		   	}
		   }

		/* ================================================
		   REPLY-FORM CONTAINER (collapse/expand)
		   ================================================ */
		   .reply-form-container {
		   	max-height: 0;
		   	overflow: hidden;
		   	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		   	padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		   	padding: 0;
		   }

		   .reply-form-container.show {
		   	max-height: 500px;
		   	padding-top: 1rem;
		   }

		/* ================================================
		   PAGINATION
		   ================================================ */
		   .pagination-btn {
		   	font-family: 'DM Sans', sans-serif;
		   	border-radius: 10px;
		   	padding: 8px 16px;
		   	font-size: 0.875rem;
		   	font-weight: 500;
		   	border: 1px solid var(--cream-deep);
		   	background: #fff;
		   	color: var(--text-warm);
		   	cursor: pointer;
		   	transition: all 0.25s ease;
		   	box-shadow: 0 2px 6px var(--shadow-warm);
		   }

		   .pagination-btn:hover {
		   	border-color: var(--gold-soft);
		   	box-shadow: 0 4px 12px var(--shadow-hover);
		   	transform: translateY(-1px);
		   }

		   .pagination-btn.active {
		   	background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
		   	color: #fff;
		   	border-color: transparent;
		   	pointer-events: none;
		   	box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35);
		   }

		/* ================================================
		   LOADER (#myload) — Elegant Preloader
		   ================================================ */
		   #myload {
		   	position: fixed;
		   	inset: 0;
		   	background: linear-gradient(160deg, var(--pastel-cream) 0%, var(--cream-deep) 100%);
		   	z-index: 9999;
		   	display: flex;
		   	justify-content: center;
		   	align-items: center;
		   	flex-direction: column;
		   	opacity: 1;
		   	transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
		   }

		   /* Subtle texture grain overlay on loader */
		   #myload::before {
		   	content: '';
		   	position: absolute;
		   	inset: 0;
		   	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
		   	pointer-events: none;
		   	z-index: 0;
		   }

		   /* Decorative ring behind initials */
		   #myload .initials-container::before,
		   #myload .initials-container::after {
		   	/* override the flower pseudo for loader — we keep original but layer a ring */
		   }

		   /* Soft ambient glow behind the initials */
		   .loader-glow {
		   	position: absolute;
		   	width: 260px;
		   	height: 260px;
		   	border-radius: 50%;
		   	background: radial-gradient(circle, rgba(198,156,159,0.25) 0%, transparent 70%);
		   	filter: blur(30px);
		   	z-index: 0;
		   	animation: pulseGlow 3.5s ease-in-out infinite;
		   }

		   @keyframes pulseGlow {
		   	0%, 100% { transform: scale(1); opacity: 0.7; }
		   	50%      { transform: scale(1.12); opacity: 1; }
		   }

		   /* Initials container — z above glow */
		   .initials-container {
		   	position: relative;
		   	z-index: 1;
		   	display: flex;
		   	align-items: center;
		   	line-height: 1;
		   }

		   /* Base initial / ampersand typography */
		   .initial, .ampersand {
		   	font-family: 'Playfair Display', serif;
		   	font-size: 6.5rem;
		   	font-weight: 700;
		   	color: var(--pastel-rose);
		   	opacity: 0;
		   	animation: fadeInScale 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
		   	animation-delay: 0.5s;
		   }

		   .ampersand {
		   	font-size: 4rem;
		   	margin: 0 0.55rem;
		   	font-style: italic;
		   	animation-delay: 0.8s;
		   	color: var(--primary-gold);
		   }

		   /* Shimmer effect on initials */
		   .initial {
		   	background: linear-gradient(
		   		110deg,
		   		var(--pastel-rose) 0%,
		   		#fff 18%,
		   		var(--shimmer-gold) 35%,
		   		var(--pastel-rose) 55%,
		   		var(--rose-light) 75%,
		   		var(--pastel-rose) 100%
		   	);
		   	background-size: 280% 100%;
		   	background-clip: text;
		   	-webkit-background-clip: text;
		   	-webkit-text-fill-color: transparent;
		   	animation:
		   	fadeInScale 1.4s cubic-bezier(0.22,1,0.36,1) forwards 0.5s,
		   	shimmer 3.2s infinite linear;
		   }

		   @keyframes shimmer {
		   	0%   { background-position: 200% 0; }
		   	100% { background-position: -200% 0; }
		   }

		   @keyframes fadeInScale {
		   	from { opacity: 0; transform: scale(0.88); }
		   	to   { opacity: 1; transform: scale(1); }
		   }

		   /* Floral pseudo-elements (original logic kept, refined styling) */
		   .initials-container::before, .initials-container::after {
		   	content: '';
		   	position: absolute;
		   	width: 44px;
		   	height: 44px;
		   	background-color: var(--pastel-rose);
		   	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C69C9F' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-2.43-.87-4.22-2.93-5.07-5.36l6.83-6.83c2.43.87 4.22 2.93 5.07 5.36L13 19.93zM5.36 13c-.87-2.43 1.13-5.3 3.6-6.14l6.14 6.14c-.84 2.47-3.71 4.47-6.14 3.6-2.43-.87-4.22-2.93-5.07-5.36z'/%3E%3C/svg%3E");
		   	mask-repeat: no-repeat;
		   	mask-size: contain;
		   	opacity: 0;
		   	transition: opacity 1s ease-in;
		   	filter: drop-shadow(0 2px 6px rgba(198,156,159,0.4));
		   }

		   .initials-container::before {
		   	top: -18px;
		   	left: -38px;
		   	transform: rotate(-28deg);
		   	animation: fadeInScale 1.5s cubic-bezier(0.22,1,0.36,1) forwards 1s;
		   }

		   .initials-container::after {
		   	bottom: -18px;
		   	right: -38px;
		   	transform: rotate(148deg);
		   	animation: fadeInScale 1.5s cubic-bezier(0.22,1,0.36,1) forwards 1.2s;
		   }

		   /* Loader text */
		   .loader-text {
		   	margin-top: 2.2rem;
		   	font-family: 'Cormorant Garamond', serif;
		   	font-size: 1.15rem;
		   	font-weight: 300;
		   	letter-spacing: 0.18em;
		   	text-transform: uppercase;
		   	color: var(--text-muted);
		   	opacity: 0;
		   	animation: fadeInScale 1.5s cubic-bezier(0.22,1,0.36,1) forwards 1.5s;
		   	position: relative;
		   	z-index: 1;
		   }

		   /* Thin decorative line under loader-text */
		   .loader-text::after {
		   	content: '';
		   	display: block;
		   	width: 36px;
		   	height: 1px;
		   	background: linear-gradient(90deg, transparent, var(--pastel-rose), transparent);
		   	margin: 10px auto 0;
		   	animation: fadeInScale 1.2s ease forwards 2s;
		   	opacity: 0;
		   }

		/* ================================================
		   RESPONSIVE — Loader (Mobile)
		   ================================================ */
		   @media (max-width: 640px) {
		   	.initial, .ampersand {
		   		font-size: 4.2rem;
		   	}
		   	.ampersand {
		   		font-size: 2.6rem;
		   	}
		   	.initials-container::before, .initials-container::after {
		   		width: 28px;
		   		height: 28px;
		   	}
		   	.initials-container::before {
		   		top: -14px;
		   		left: -22px;
		   	}
		   	.initials-container::after {
		   		bottom: -14px;
		   		right: -22px;
		   	}
		   	.loader-text {
		   		font-size: 0.95rem;
		   		letter-spacing: 0.14em;
		   	}
		   	.loader-glow {
		   		width: 180px;
		   		height: 180px;
		   	}
		   }

		/* ================================================
		   TOP BANNER (#head_buat)
		   ================================================ */
		   #head_buat {
		   	display: flex;
		   	justify-content: space-between;
		   	align-items: center;
		   	position: fixed;
		   	top: 0;
		   	left: 50%;
		   	transform: translateX(-50%);
		   	background: linear-gradient(
		   		135deg,
		   		rgba(60, 55, 50, 0.72) 0%,
		   		rgba(40, 38, 36, 0.78) 100%
		   	);
		   	backdrop-filter: blur(14px) saturate(1.3);
		   	-webkit-backdrop-filter: blur(14px) saturate(1.3);
		   	padding: 10px 18px;
		   	z-index: 9999;
		   	max-width: 440px;
		   	width: calc(100% - 24px);
		   	border-radius: 0 0 16px 16px;
		   	box-shadow:
		   	0 4px 18px rgba(0,0,0,0.22),
		   	0 1px 3px rgba(0,0,0,0.12);
		   	border-bottom: 1px solid rgba(255,255,255,0.08);
		   }

		   #head_buat p {
		   	margin: 0;
		   	color: rgba(255,255,255,0.92);
		   	font-size: 13px;
		   	font-family: 'DM Sans', sans-serif;
		   	font-weight: 400;
		   	white-space: nowrap;
		   	overflow: hidden;
		   	text-overflow: ellipsis;
		   	flex-grow: 1;
		   	padding-right: 14px;
		   	letter-spacing: 0.01em;
		   }

		   #head_buat .banner-buttons {
		   	display: flex;
		   	gap: 8px;
		   	flex-shrink: 0;
		   }

		   #head_buat .banner-buttons a {
		   	padding: 6px 14px;
		   	font-size: 12px;
		   	font-family: 'DM Sans', sans-serif;
		   	color: #fff;
		   	text-decoration: none;
		   	font-weight: 600;
		   	border-radius: 8px;
		   	white-space: nowrap;
		   	cursor: pointer;
		   	letter-spacing: 0.02em;
		   	transition: background-color 0.22s ease,
		   	transform 0.12s ease,
		   	box-shadow 0.22s ease;
		   	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
		   }

		   #head_buat .banner-buttons a.bg-blue-600 {
		   	background: linear-gradient(135deg, #3b82f6, #2563eb);
		   }

		   #head_buat .banner-buttons a.bg-green-600 {
		   	background: linear-gradient(135deg, #22c55e, #16a34a);
		   }

		   #head_buat .banner-buttons a.bg-blue-600:hover {
		   	background: linear-gradient(135deg, #60a5fa, #3b82f6);
		   	box-shadow: 0 4px 12px rgba(59,130,246,0.4);
		   	transform: translateY(-1px);
		   }

		   #head_buat .banner-buttons a.bg-green-600:hover {
		   	background: linear-gradient(135deg, #4ade80, #22c55e);
		   	box-shadow: 0 4px 12px rgba(34,197,94,0.4);
		   	transform: translateY(-1px);
		   }

		   #head_buat .banner-buttons a:active {
		   	transform: scale(0.96) translateY(0);
		   }

		   /* Banner responsive */
		   @media (max-width: 480px) {
		   	#head_buat {
		   		padding: 8px 14px;
		   		width: calc(100% - 16px);
		   	}
		   	#head_buat p {
		   		font-size: 12px;
		   		padding-right: 10px;
		   	}
		   	#head_buat .banner-buttons { gap: 6px; }
		   	#head_buat .banner-buttons a {
		   		padding: 5px 10px;
		   		font-size: 11px;
		   	}
		   }

		   @media (max-width: 340px) {
		   	#head_buat {
		   		flex-direction: column;
		   		gap: 10px;
		   		padding: 12px 14px;
		   	}
		   	#head_buat p {
		   		text-align: center;
		   		padding-right: 0;
		   		font-size: 12px;
		   	}
		   	#head_buat .banner-buttons {
		   		width: 100%;
		   		justify-content: center;
		   	}
		   	#head_buat .banner-buttons a {
		   		padding: 6px 12px;
		   		font-size: 12px;
		   	}
		   }

		/* ================================================
		   NAVIGATION MENU (.zeedays_menu)
		   ================================================ */

		   .zeedays_menu_item {
		   	display: flex;
		   	flex-direction: column;
		   	align-items: center;
		   	gap: 4px;
		   	padding: 6px 8px;
		   	border-radius: 14px;
		   	cursor: pointer;
		   	color: var(--text-muted);
		   	transition: color 0.25s ease,
		   	background 0.25s ease,
		   	transform 0.2s cubic-bezier(0.22,1,0.36,1);
		   	position: relative;
		   }

		   .zeedays_menu_item:hover {
		   	color: var(--rose-deep);
		   	background: rgba(198, 156, 159, 0.08);
		   	transform: translateY(-2px);
		   }

		   .zeedays_menu_item:active {
		   	transform: translateY(0px) scale(0.94);
		   }

		   /* Active indicator dot */
		   .zeedays_menu_item.active {
		   	color: var(--rose-deep);
		   }

		   .zeedays_menu_item.active::after {
		   	content: '';
		   	position: absolute;
		   	bottom: 0;
		   	left: 50%;
		   	transform: translateX(-50%);
		   	width: 5px;
		   	height: 5px;
		   	background: var(--rose-deep);
		   	border-radius: 50%;
		   }

		   .zeedays_menu_item .icon,
		   .zeedays_menu_item svg {
		   	width: 22px;
		   	height: 22px;
		   	flex-shrink: 0;
		   	transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
		   }

		   .zeedays_menu_item:hover .icon,
		   .zeedays_menu_item:hover svg {
		   	transform: scale(1.12);
		   }

		   .zeedays_menu_item span {
		   	font-family: 'DM Sans', sans-serif;
		   	font-size: 0.68rem;
		   	font-weight: 500;
		   	letter-spacing: 0.02em;
		   	line-height: 1;
		   }

		/* ================================================
		   FLOATING ACTION BUTTONS
		   ================================================ */
		   .floating-action {
		   	position: fixed;
		   	bottom: 82px;
		   	right: 18px;
		   	z-index: 9997;
		   	gap: 10px;
		   }

		   .btn-float {
		   	width: 48px;
		   	height: 48px;
		   	border-radius: 50%;
		   	border: none;
		   	background: linear-gradient(145deg, #fff, var(--cream-light));
		   	box-shadow:
		   	0 4px 18px var(--shadow-warm),
		   	0 1px 4px rgba(0,0,0,0.08),
		   	inset 0 1px 0 rgba(255,255,255,0.9);
		   	display: flex;
		   	align-items: center;
		   	justify-content: center;
		   	cursor: pointer;
		   	color: var(--text-warm);
		   	transition: box-shadow 0.28s ease,
		   	transform 0.22s cubic-bezier(0.22,1,0.36,1),
		   	background 0.25s ease;
		   }

		   .btn-float:hover {
		   	background: linear-gradient(145deg, #fff, var(--rose-light));
		   	box-shadow:
		   	0 8px 28px var(--shadow-hover),
		   	0 2px 6px rgba(0,0,0,0.10),
		   	inset 0 1px 0 rgba(255,255,255,0.95);
		   	transform: translateY(-3px) scale(1.06);
		   	color: var(--rose-deep);
		   }

		   .btn-float:active {
		   	transform: translateY(-1px) scale(0.96);
		   }

		   .btn-float svg {
		   	transition: transform 0.25s ease;
		   }

		   .btn-float:hover svg {
		   	transform: scale(1.08);
		   }

		   /* Show/hide play & pause icons */
		   .btn-float .pause { display: none; }
		   .btn-float.playing .play  { display: none; }
		   .btn-float.playing .pause { display: block; }

		/* ================================================
		   WHATSAPP MODAL — Refined
		   ================================================ */
		   .modal-content-mobile {
		   	border-radius: 24px;
		   	overflow: hidden;
		   	border: none;
		   	box-shadow:
		   	0 20px 60px rgba(0,0,0,0.18),
		   	0 4px 12px rgba(0,0,0,0.08);
		   }

		   .modal-body {
		   	padding: 0;
		   	position: relative;
		   }

		   .wa-form-body {
		   	padding: 22px;
		   	background: linear-gradient(160deg, #f4f6f8 0%, #eef0f2 100%);
		   }

		   /* Chat bubble */
		   .chat-bubble {
		   	background: #fff;
		   	padding: 16px 18px;
		   	border-radius: 16px 16px 16px 4px;
		   	margin-bottom: 22px;
		   	position: relative;
		   	font-size: 0.88rem;
		   	line-height: 1.6;
		   	color: var(--text-warm);
		   	box-shadow:
		   	0 3px 10px rgba(0,0,0,0.06),
		   	0 1px 2px rgba(0,0,0,0.04);
		   	font-family: 'DM Sans', sans-serif;
		   }

		   .chat-bubble::before {
		   	content: "";
		   	position: absolute;
		   	left: -9px;
		   	top: 14px;
		   	border-style: solid;
		   	border-width: 9px 9px 9px 0;
		   	border-color: transparent #fff transparent transparent;
		   	filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.04));
		   }

		   /* Form Labels */
		   .form-label {
		   	font-weight: 600;
		   	font-size: 0.82rem;
		   	color: var(--text-muted);
		   	margin-bottom: 8px;
		   	text-transform: uppercase;
		   	letter-spacing: 0.06em;
		   	font-family: 'DM Sans', sans-serif;
		   }

		   /* Input styling */
		   .input-group-text {
		   	background-color: #fff;
		   	color: #999;
		   	border-right: none;
		   	border-radius: 14px 0 0 14px;
		   	border: 1px solid #e2e5e8;
		   	border-right: none;
		   	padding: 0 12px;
		   	display: flex;
		   	align-items: center;
		   }

		   .form-control, .form-select {
		   	border-radius: 14px;
		   	padding: 11px 16px;
		   	border: 1px solid #e2e5e8;
		   	font-size: 0.88rem;
		   	font-family: 'DM Sans', sans-serif;
		   	background: #fff;
		   	color: var(--text-warm);
		   	transition: border-color 0.22s ease, box-shadow 0.22s ease;
		   }

		   .input-group .form-control,
		   .input-group .form-select {
		   	border-left: none;
		   	border-radius: 0 14px 14px 0;
		   }

		   .form-control:focus, .form-select:focus {
		   	outline: none;
		   	box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
		   	border-color: var(--wa-green);
		   }

		   /* Send Button */
		   .btn-send-wa {
		   	background: linear-gradient(135deg, #2ecc71, var(--wa-green));
		   	color: #fff;
		   	border: none;
		   	border-radius: 14px;
		   	padding: 15px;
		   	font-weight: 600;
		   	font-family: 'DM Sans', sans-serif;
		   	font-size: 0.92rem;
		   	width: 100%;
		   	display: flex;
		   	align-items: center;
		   	justify-content: center;
		   	gap: 10px;
		   	letter-spacing: 0.03em;
		   	transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
		   	margin-top: 12px;
		   	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.30);
		   }

		   .btn-send-wa:hover {
		   	background: linear-gradient(135deg, #27ae60, #1ebe57);
		   	color: #fff;
		   	transform: translateY(-2px);
		   	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42);
		   }

		   .btn-send-wa:active {
		   	transform: translateY(0);
		   	box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
		   }

		   /* Close Button */
		   .btn-close-custom {
		   	position: absolute;
		   	top: 14px;
		   	right: 14px;
		   	background: rgba(255,255,255,0.18);
		   	border: 1px solid rgba(255,255,255,0.12);
		   	color: #fff;
		   	width: 34px;
		   	height: 34px;
		   	border-radius: 50%;
		   	display: flex;
		   	align-items: center;
		   	justify-content: center;
		   	z-index: 100;
		   	cursor: pointer;
		   	backdrop-filter: blur(6px);
		   	-webkit-backdrop-filter: blur(6px);
		   	transition: background 0.22s ease, transform 0.18s ease;
		   }

		   .btn-close-custom:hover {
		   	background: rgba(255,255,255,0.32);
		   	transform: scale(1.08);
		   }

		   /* Mobile modal margin */
		   @media (max-width: 576px) {
		   	.modal-mobile {
		   		margin: 12px;
		   	}
		   	.zeedays_menu {
		   		width: calc(100% - 16px);
		   	}
		   	.zeedays_menu_item {
		   		padding: 5px 5px;
		   	}
		   	.zeedays_menu_item span {
		   		font-size: 0.60rem;
		   	}
		   	.floating-action {
		   		right: 12px;
		   		bottom: 78px;
		   	}
		   	.btn-float {
		   		width: 44px;
		   		height: 44px;
		   	}
		   }

		   #closeHead {
		   	position: absolute;
		   	top: 4px;
		   	left: 4px;
		   	width: 18px;
		   	height: 18px;
		   	background: rgba(0,0,0,0.45);
		   	color: #fff;
		   	border: none;
		   	border-radius: 50%;
		   	font-size: 12px;
		   	line-height: 1;
		   	cursor: pointer;
		   	display: flex;
		   	align-items: center;
		   	justify-content: center;
		   	z-index: 1000;
		   	padding: 0;
		   }

		   #closeHead:hover {
		   	background: rgba(0,0,0,0.7);
		   }


		   .gal-page         { display: none; width: 100%; height: 100%; }
		   .gal-page-inner   { display: flex; flex-direction: column; width: 100%; height: 100%; gap: 4px; }
		   .gal-row          { display: flex; flex: 1; gap: 4px; margin: 0 !important; min-height: 0; }
		   .gal-col-wrap     { flex: 1; min-width: 0; min-height: 0; }

		   .gal-img-wrap {
		   	width: 100%;
		   	height: 100%;
		   	overflow: hidden;
		   	border-radius: 8px;
		   	box-shadow: 0 2px 10px rgba(0,0,0,.15);
		   	transition: box-shadow .3s;
		   }
		   .gal-img-wrap:hover { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
		   .gal-img-wrap img {
		   	width: 100%; height: 100%;
		   	object-fit: cover; display: block;
		   	transition: transform .5s ease;
		   }
		   .gal-img-wrap:hover img { transform: scale(1.06); }


		   .gal-nav-wrap {
		   	position: absolute;
		   	bottom: 18%;
		   	left: 0; right: 0;
		   	display: flex;
		   	justify-content: center;
		   	gap: 10px;
		   	z-index: 20;
		   }

		   .gal-nav-btn {
		   	display: inline-flex;
		   	align-items: center;
		   	gap: 6px;
		   	padding: 8px 20px;
		   	border: none;
		   	border-radius: 999px;
		   	cursor: pointer;
		   	font-family: inherit;
		   	font-size: .7rem;
		   	letter-spacing: .1em;
		   	text-transform: uppercase;
		   	font-weight: 500;
		   	-webkit-tap-highlight-color: transparent;
		   	transition: transform .2s, box-shadow .2s;
		   	outline: none;
		   }
		   
		   .gal-nav-btn.down:hover { transform: translateY(-2px); }
		   .gal-nav-btn.up {
		   	background: rgba(255,255,255,.85);
		   	color: #9a7a50;
		   	border: 1.5px solid #d4b887;
		   	backdrop-filter: blur(4px);
		   }
		   .gal-nav-btn.up:hover { transform: translateY(-2px); }
		   .gal-nav-btn:active { transform: scale(.95) !important; }
		   .gal-nav-btn svg {
		   	width: 13px; height: 13px;
		   	stroke: currentColor; fill: none; stroke-width: 2.5;
		   	flex-shrink: 0;
		   }
		   .gal-nav-btn.down svg { animation: galBD 1.6s ease-in-out infinite; }
		   .gal-nav-btn.up   svg { animation: galBU 1.6s ease-in-out infinite; }
		   .gal-nav-btn:hover svg, .gal-nav-btn:active svg { animation: none; }
		   @keyframes galBD { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
		   @keyframes galBU { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }


		   .gal-dots {
		   	position: absolute;
		   	bottom: calc(18% - 20px);
		   	left: 0; right: 0;
		   	display: flex;
		   	justify-content: center;
		   	gap: 5px;
		   	z-index: 20;
		   }
		   .gal-dot {
		   	width: 5px; height: 5px;
		   	border-radius: 50%;
		   	background: #d4b887;
		   	opacity: .4;
		   	transition: all .3s;
		   }
		   .gal-dot.active {
		   	opacity: 1; width: 16px;
		   	border-radius: 3px;
		   	background: #c9a96e;
		   }

		   .gal-hidden {
		   	display: none !important; 
		   }

		   .story-dot-nav       { 
		   	display:flex; gap:5px; 
		   	justify-content:center; 
		   }

		   .story-dot-nav .sdot { 
		   	width:5px;height:5px;
		   	border-radius:50%;
		   	background:var(--inv-accent);
		   	opacity:.35;
		   	transition:all .3s; 
		   }

		   .story-dot-nav .sdot.active {
		   	opacity:1; 
		   }

		   #btnAutoplay .pause {
		   	animation: spin 3s linear infinite;
		   }

		   @keyframes spin {
		   	from { transform: rotate(0deg); }
		   	to { transform: rotate(360deg); }
		   }