/* ============================================
   NV CASINO - MAIN STYLESHEET
   Dark Theme with Responsive Design
   ============================================
   
   TABLE OF CONTENTS:
   1. CSS Custom Properties (Variables)
   2. Reset & Base Styles
   3. Typography
   4. Layout & Container
   5. Skip Link (Accessibility)
   6. Header & Navigation
   7. Language Switcher
   8. Buttons
   9. Breadcrumbs
   10. Hero Banner
   11. Popular Slots Section
   12. Features Section
   13. About Section
   14. Bonus Table Section
   15. Footer
   16. Payment Methods
   17. Utility Classes
   18. Animations
   19. Media Queries (Responsive)
   
   ============================================ */


/* ============================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================
   Using CSS variables for consistent theming
   and easy maintenance of the dark color scheme.
   ============================================ */
:root {
    /* Primary Brand Colors - Deep purple/violet accent */
    --color-primary: #9333ea;
    --color-primary-light: #a855f7;
    --color-primary-dark: #7c22ce;
    --color-primary-glow: rgba(147, 51, 234, 0.4);
    
    /* Secondary Accent - Electric cyan */
    --color-secondary: #06b6d4;
    --color-secondary-light: #22d3ee;
    
    /* Tertiary Accent - Golden highlight */
    --color-accent: #f59e0b;
    --color-accent-light: #fbbf24;
    
    /* Dark Theme Background Colors */
    --color-bg-dark: #0a0a0f;
    --color-bg-base: #0f0f18;
    --color-bg-elevated: #161622;
    --color-bg-surface: #1e1e2e;
    --color-bg-card: #252538;
    --color-bg-hover: #2a2a42;
    
    /* Text Colors */
    --color-text-primary: #f8fafc;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #71717a;
    --color-text-inverse: #0a0a0f;
    
    /* Border Colors */
    --color-border: #2e2e45;
    --color-border-light: #3f3f5c;
    
    /* Semantic Colors */
    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-error: #ef4444;
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-hero: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    --gradient-card: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-elevated) 100%);
    --gradient-glow: radial-gradient(ellipse at center, var(--color-primary-glow) 0%, transparent 70%);
    
    /* Typography */
    --font-primary: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-display: 'Syne', var(--font-primary);
    
    /* Font Sizes (Fluid Typography) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.6rem + 3.25vw, 3.5rem);
    
    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows - Layered for depth */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 40px var(--color-primary-glow);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    
    /* Header Height - Thinner header with top padding */
    --header-height: 56px;
    --header-height-mobile: 50px;
}


/* ============================================
   2. RESET & BASE STYLES
   ============================================
   Modern CSS reset for consistent rendering
   across all browsers.
   ============================================ */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
    list-style: none;
}

/* Set core root defaults */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    
    /* Subtle texture/pattern for depth */
    background-image: 
        radial-gradient(ellipse at top, rgba(147, 51, 234, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.05) 0%, transparent 40%);
    background-attachment: fixed;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Remove all animations and transitions for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================
   3. TYPOGRAPHY
   ============================================
   Heading styles and text utilities using
   the distinctive Syne font for display text.
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

p {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary-light);
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ============================================
   4. LAYOUT & CONTAINER
   ============================================
   Responsive container with max-width and
   consistent horizontal padding.
   ============================================ */

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

/* Full-width sections */
.section-full {
    width: 100%;
}


/* ============================================
   5. SKIP LINK (ACCESSIBILITY)
   ============================================
   Hidden link that appears on focus for
   keyboard navigation to skip to main content.
   ============================================ */

.skip-link {
    position: fixed;
    top: -100px;
    left: var(--space-md);
    z-index: var(--z-tooltip);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-md);
}


/* ============================================
   6. HEADER & NAVIGATION
   ============================================
   Fixed header with logo, navigation menu,
   and action buttons. Includes mobile toggle.
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    height: var(--header-height);
    padding-top: var(--space-xs);
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-xl);
}

/* Logo Styles */
.logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo img {
    height: 32px;
    width: auto;
}

/* Main Navigation */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-list a {
    position: relative;
    color: var(--color-text-secondary);
    font-weight: 500;
    padding: var(--space-sm) 0;
    transition: color var(--transition-fast);
}

.nav-list a:hover {
    color: var(--color-text-primary);
}

/* Navigation underline animation */
.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

.nav-list a:hover::after {
    width: 100%;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

/* Header Actions (Language + Buttons) */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}


/* ============================================
   7. LANGUAGE SWITCHER
   ============================================
   Dropdown component for FR/NL language
   selection with flag icons.
   ============================================ */

.language-switcher {
    position: relative;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lang-current:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-light);
}

.lang-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.lang-code {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.lang-arrow {
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.lang-current[aria-expanded="true"] .lang-arrow {
    transform: rotate(180deg);
}

/* Language Dropdown Menu */
.lang-dropdown {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    min-width: 100%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}

.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lang-dropdown li:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.lang-dropdown li:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.lang-dropdown li:hover {
    background: var(--color-bg-hover);
}

.lang-dropdown li.active {
    background: var(--color-bg-hover);
    color: var(--color-primary-light);
}

.lang-dropdown li span {
    font-weight: 500;
    font-size: var(--text-sm);
}


/* ============================================
   8. BUTTONS
   ============================================
   Button component with primary, outline,
   and size variants.
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

/* Primary Button - Filled with gradient */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-text-primary);
    border-color: transparent;
    box-shadow: 0 4px 15px var(--color-primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--color-primary-glow);
    color: var(--color-text-primary);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Outline Button - Transparent with border */
.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-light);
}

.btn-outline:hover {
    background: var(--color-bg-surface);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-base);
}


/* ============================================
   9. BREADCRUMBS
   ============================================
   Navigation breadcrumb trail with schema.org
   markup for SEO.
   ============================================ */

.breadcrumbs {
    padding-top: calc(var(--header-height) + var(--space-sm));
    padding-bottom: var(--space-xs);
    background: var(--color-bg-base);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--text-sm);
}

.breadcrumb-list a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb-list a:hover {
    color: var(--color-primary-light);
}

.breadcrumb-list .separator {
    color: var(--color-text-muted);
}

.breadcrumb-list li[aria-current="page"] span {
    color: var(--color-text-secondary);
}


/* ============================================
   10. HERO BANNER
   ============================================
   Full-width banner with responsive images
   and semi-transparent CTA overlay.
   Desktop: CTA on right side
   Mobile: CTA centered
   ============================================ */

.hero-banner {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* CTA Wrapper - Positions content on right for desktop */
.hero-cta-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-2xl);
}

/* CTA Block - Semi-transparent overlay */
.hero-cta {
    max-width: 500px;
    padding: var(--space-2xl);
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: var(--radius-xl);
    text-align: left;
    box-shadow: var(--shadow-glow);
}

.hero-cta h1 {
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--color-accent-light);
    font-weight: 500;
    margin-bottom: var(--space-xl);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}


/* ============================================
   11. POPULAR SLOTS SECTION
   ============================================
   Grid of 12 slot images displayed in 2 rows
   of 6 on desktop, responsive on mobile.
   ============================================ */

.popular-slots {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-base);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.section-header h2 {
    color: var(--color-text-primary);
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary-light);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.view-all-link:hover {
    color: var(--color-secondary-light);
}

/* Slots Grid - 6 columns on desktop */
.slots-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-lg);
}

/* Individual Slot Card */
.slot-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.slot-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.slot-link {
    display: block;
}

.slot-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.slot-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.slot-card:hover .slot-image-wrapper img {
    transform: scale(1.1);
}

/* Play overlay on hover */
.slot-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.7);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.slot-card:hover .slot-overlay {
    opacity: 1;
}

.play-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--gradient-primary);
    color: var(--color-text-primary);
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glow);
}


/* ============================================
   12. FEATURES SECTION
   ============================================
   Four-column grid showcasing key casino
   features with icons.
   ============================================ */

.features {
    padding: var(--space-4xl) 0;
    background: var(--gradient-hero);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.feature-card {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.feature-card h3 {
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.feature-card p {
    margin-bottom: 0;
    font-size: var(--text-sm);
}


/* ============================================
   13. ABOUT SECTION
   ============================================
   Long-form content section about NV Casino
   with proper typography.
   ============================================ */

.about-section {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-base);
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-content h2 {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.about-content h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--color-primary-light);
}

.about-content p {
    line-height: 1.8;
}


/* ============================================
   14. BONUS TABLE SECTION
   ============================================
   Responsive table with mobile card layout
   for bonus information.
   ============================================ */

.bonus-section {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-elevated);
}

.bonus-section h2 {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

/* Table wrapper for horizontal scroll on mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.bonus-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-surface);
}

.bonus-table th,
.bonus-table td {
    padding: var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.bonus-table thead th {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bonus-table tbody tr:last-child td {
    border-bottom: none;
}

.bonus-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.bonus-table td strong {
    color: var(--color-text-primary);
}


/* ============================================
   15. FOOTER
   ============================================
   Site footer with multi-column layout,
   links, and legal information.
   ============================================ */

.site-footer {
    background: var(--color-bg-dark);
    padding-top: var(--space-4xl);
    border-top: 1px solid var(--color-border);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-col h4 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    font-size: var(--text-base);
}

.footer-logo img {
    height: 35px;
    width: auto;
    margin-bottom: var(--space-md);
}

.footer-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-primary-light);
}


/* ============================================
   16. PAYMENT METHODS
   ============================================
   Grid of payment provider logos in the footer.
   ============================================ */

.payment-methods {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.payment-methods h4 {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.payment-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}

.payment-logos img {
    height: 30px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    filter: grayscale(30%);
}

.payment-logos img:hover {
    opacity: 1;
    filter: grayscale(0%);
}


/* Footer Bottom - Copyright */
.footer-bottom {
    padding: var(--space-xl) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.age-restriction {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.age-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-error);
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: var(--text-sm);
    border-radius: var(--radius-full);
}

.copyright {
    margin-bottom: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* ============================================
   17. UTILITY CLASSES
   ============================================
   Helper classes for common patterns.
   ============================================ */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text alignment */
.text-center {
    text-align: center;
}


/* ============================================
   18. ANIMATIONS
   ============================================
   Keyframe animations for interactive elements.
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* ============================================
   19. MEDIA QUERIES (RESPONSIVE)
   ============================================
   Breakpoints:
   - Mobile: < 640px
   - Tablet: 640px - 1024px
   - Desktop: > 1024px
   ============================================ */

/* Large Desktop */
@media (max-width: 1280px) {
    .slots-grid {
        gap: var(--space-md);
    }
}

/* Desktop / Tablet Landscape */
@media (max-width: 1024px) {
    /* Header adjustments */
    .header-inner {
        gap: var(--space-md);
    }
    
    .nav-list {
        gap: var(--space-lg);
    }
    
    /* Slots: 4 columns */
    .slots-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Features: 2 columns */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer: 2 columns */
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Portrait */
@media (max-width: 768px) {
    :root {
        --header-height: var(--header-height-mobile);
    }
    
    /* Smaller logo on mobile */
    .logo img {
        height: 26px;
    }
    
    /* Mobile Navigation Toggle */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Hide desktop navigation */
    .main-nav {
        position: fixed;
        top: var(--header-height-mobile);
        left: 0;
        right: 0;
        background: var(--color-bg-dark);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }
    
    .main-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    
    .nav-list a {
        display: block;
        padding: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }
    
    /* Hamburger animation when open */
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    /* Header actions */
    .header-actions .btn-outline {
        display: none;
    }
    
    /* Hero Banner - Mobile: CTA centered */
    .hero-banner {
        min-height: 600px;
    }
    
    .hero-cta-wrapper {
        justify-content: center;
        padding: var(--space-lg);
    }
    
    .hero-cta {
        max-width: 100%;
        text-align: center;
        padding: var(--space-xl);
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    /* Slots: 3 columns on tablet */
    .slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Table becomes card layout on mobile */
    .table-responsive {
        border: none;
    }
    
    .bonus-table,
    .bonus-table thead,
    .bonus-table tbody,
    .bonus-table th,
    .bonus-table td,
    .bonus-table tr {
        display: block;
    }
    
    .bonus-table thead {
        display: none;
    }
    
    .bonus-table tbody tr {
        margin-bottom: var(--space-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    .bonus-table td {
        position: relative;
        padding-left: 50%;
        text-align: right;
        border-bottom: 1px solid var(--color-border);
    }
    
    .bonus-table td:last-child {
        border-bottom: none;
    }
    
    /* Mobile table labels using data attributes */
    .bonus-table td::before {
        content: attr(data-label-fr);
        position: absolute;
        left: var(--space-lg);
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        font-size: var(--text-xs);
    }
    
    /* Dutch labels when NL is active */
    html[lang="nl"] .bonus-table td::before {
        content: attr(data-label-nl);
    }
    
    /* Footer bottom stacks */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile Small */
@media (max-width: 640px) {
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    
    /* Slots: 2 columns on mobile */
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    /* Features: 1 column on mobile */
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer: 1 column on mobile */
    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-links {
        align-items: center;
    }
    
    /* Hero adjustments */
    .hero-cta h1 {
        font-size: var(--text-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
    }
    
    /* Payment logos smaller */
    .payment-logos {
        gap: var(--space-md);
    }
    
    .payment-logos img {
        height: 24px;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    /* Reduce button sizes in header */
    .header-actions .btn-primary {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--text-xs);
    }
    
    .lang-code {
        display: none;
    }
}