/* 
 * iOS Refined Glass Style - Subtle Apple Touch
 * Include this CSS file AFTER your existing stylesheets
 * This adds subtle glassmorphism without losing element boundaries
 */

/* ========================================
   Refined Variables - Less Invasive
   ======================================== */
:root {
	/* Subtle glass effects */
	--glass-overlay: rgba(255, 255, 255, 0.02);
	--glass-border: rgba(255, 255, 255, 0.25);
	--glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	
	/* Keep existing borders visible */
	--refined-border: 1px solid rgba(0, 0, 0, 0.06);
	--refined-border-hover: 1px solid rgba(49, 50, 144, 0.3);
	
	/* Softer shadows */
	--shadow-refined: 0 2px 12px rgba(0, 0, 0, 0.04);
	--shadow-refined-hover: 0 4px 20px rgba(0, 0, 0, 0.08);
	
	/* Smooth but fast animations */
	--transition-refined: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] {
	--glass-overlay: rgba(255, 255, 255, 0.01);
	--glass-border: rgba(255, 255, 255, 0.1);
	--refined-border: 1px solid rgba(255, 255, 255, 0.08);
	--refined-border-hover: 1px solid rgba(83, 85, 179, 0.4);
}

/* ========================================
   Navbar - Dynamic Glass Effect on Scroll
   ======================================== */
.navbar-modern,
.navbar {
	/* Start more transparent */
	background: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: saturate(120%) blur(10px);
	-webkit-backdrop-filter: saturate(120%) blur(10px);
	transition: var(--transition-refined);
}

[data-bs-theme="dark"] .navbar-modern,
[data-bs-theme="dark"] .navbar {
	background: rgba(10, 10, 31, 0.8) !important;
}

/* When scrolled, become more opaque */
.navbar-modern.navbar-scrolled,
.navbar.navbar-scrolled {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .navbar-modern.navbar-scrolled,
[data-bs-theme="dark"] .navbar.navbar-scrolled {
	background: rgba(10, 10, 31, 0.95) !important;
}

/* Keep search input boundaries clear */
.search-input,
.hero-search .form-control {
	/* Keep original background, just enhance */
	position: relative;
	border-width: 1.5px !important;
	transition: var(--transition-refined);
}

/* Ensure search icon stays visible */
.search-icon,
.hero-search .search-icon {
	z-index: 10 !important;
	opacity: 1 !important;
	color: color-mix(in oklab, var(--brand-fg) 60%, transparent) !important;
}

.search-input:focus,
.hero-search .form-control:focus {
	/* Subtle scale, no position jump */
	transform: scale(1.01);
	border-width: 2px !important;
}

/* ========================================
   Cards - Add Glass Layer Without Losing Structure
   ======================================== */
.section-wrapper,
.bonus-card,
.news-card,
.brand-card,
.casino-card {
	position: relative;
	/* Keep original backgrounds */
	box-shadow: var(--shadow-refined);
	transition: var(--transition-refined);
}

/* Add subtle glow layer on hover without blur */
.section-wrapper:not(.gradient-background-lite)::after,
.bonus-card::after,
.news-card::after,
.brand-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.03) 0%, 
		transparent 100%);
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.section-wrapper:not(.gradient-background-lite):hover::after,
.bonus-card:hover::after,
.news-card:hover::after,
.brand-card:hover::after {
	opacity: 1;
}

/* Hover - only visual changes, no movement */
.section-wrapper:not(.gradient-background-lite):hover,
.bonus-card:hover,
.news-card:hover,
.brand-card:hover,
.casino-card:hover {
	/* NO transform - elements stay in place */
	box-shadow: var(--shadow-refined-hover);
	/* Keep original border, just enhance color */
	border-color: var(--refined-border-hover) !important;
}

/* Keep gradient-background-lite section unchanged on hover */
.section-wrapper.gradient-background-lite:hover {
	/* No changes on hover for this specific section */
}

/* ========================================
   Top Picks - Fix Navigation Issues
   ======================================== */
.top-pick-card {
	/* Keep original styling, just enhance shadow */
	box-shadow: var(--shadow-refined);
	transition: var(--transition-refined);
	/* Ensure images stay visible */
	z-index: 1;
}

.top-pick-card:hover {
	/* No movement, just shadow change */
	box-shadow: var(--shadow-refined-hover);
}

.top-pick {
	/* Ensure background images remain visible */
	opacity: 1 !important;
	/* Add subtle inner shadow for depth */
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Fix navigation arrows - no movement on hover */
.top-picks-nav {
	transition: var(--transition-refined);
	/* Remove any transform on base state */
	transform: translateY(-50%);
}

.top-picks-nav:hover {
	/* Only change appearance, not position */
	transform: translateY(-50%) scale(1.05);
	box-shadow: var(--shadow-refined-hover);
	/* Subtle background change */
	background: color-mix(in oklab, var(--brand-accent) 8%, var(--brand-bg));
}

/* ========================================
   Hero Icons - Keep Visible
   ======================================== */
.lottie-icon {
	/* Remove any filters that might hide content */
	filter: none !important;
	opacity: 1 !important;
	transition: transform 0.3s ease;
}

.lottie-icon:hover {
	/* Simple scale, no floating */
	transform: scale(1.05);
	/* Remove any animation that causes shaking */
	animation: none !important;
}

.hero-icon-link {
	transition: transform 0.2s ease;
}

.hero-icon-link:hover {
	/* No movement for icon links */
}

/* ========================================
   Buttons - Refined Style
   ======================================== */
.btn-primary,
.btn-play {
	position: relative;
	/* Keep original gradient, just enhance shadow */
	box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
	transition: var(--transition-refined);
}

/* Remove the sliding shine effect that can be distracting */
.btn-primary::before,
.btn-play::before {
	display: none;
}

.btn-primary:hover,
.btn-play:hover {
	/* Buttons still lift up and glow */
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-review {
	/* Keep clear borders */
	border-width: 1.5px !important;
	transition: var(--transition-refined);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-review:hover {
	/* Buttons lift up on hover */
	transform: translateY(-2px);
	border-width: 2px !important;
}

/* ========================================
   Badges - Keep Visible
   ======================================== */
.icon-badge,
.badge-icon,
.feature-badge {
	/* Remove backdrop filter that might hide content */
	backdrop-filter: none !important;
	transition: var(--transition-refined);
	/* Ensure icons inside remain visible */
	z-index: 1;
}

.badge-icon:hover,
.feature-badge:hover,
.feature-badge.active {
	/* Subtle scale only */
	transform: scale(1.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Forms - Clear Boundaries
   ======================================== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
	/* Ensure borders are always visible */
	border-width: 1.5px !important;
	transition: var(--transition-refined);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
	/* Clear focus state */
	border-width: 2px !important;
	transform: none; /* No transform to prevent jumping */
}

/* ========================================
   Dropdown Enhancement
   ======================================== */
.dropdown-menu {
	/* Subtle glass without losing readability */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--shadow-refined-hover);
	border: var(--refined-border) !important;
}

.dropdown-item:hover {
	/* No padding change to prevent layout shift */
	background: rgba(49, 50, 144, 0.08) !important;
}

/* ========================================
   Scrollbar - Subtle Style
   ======================================== */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   Focus States - Subtle
   ======================================== */
*:focus-visible {
	outline: 2px solid rgba(49, 50, 144, 0.3);
	outline-offset: 2px;
}

/* ========================================
   Page Load Animation - Subtle
   ======================================== */
@keyframes subtleFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section-wrapper {
	animation: subtleFadeIn 0.4s ease-out;
}

/* ========================================
   Typography Enhancement
   ======================================== */
body {
	/* Add SF Pro as preferred font but keep fallbacks */
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Open Sans", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Micro-interactions
   ======================================== */
a {
	transition: color 0.2s ease;
}

img {
	/* Ensure all images stay visible */
	opacity: 1 !important;
	z-index: 1;
}

/* ========================================
   Performance Optimizations
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ========================================
   Mobile Optimizations
   ======================================== */
@media (max-width: 768px) {
	/* Reduce effects on mobile for performance */
	.section-wrapper::after,
	.bonus-card::after,
	.news-card::after,
	.brand-card::after {
		display: none;
	}
	
	/* Simpler hover states on mobile */
	.section-wrapper:hover,
	.bonus-card:hover,
	.news-card:hover,
	.brand-card:hover {
		transform: none;
	}
}