/* Mobile-first responsive design - starting from smallest viewport */
/* Base reset and typography with breathing line heights */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color system: purposeful neutrals with color for state/intent */
    --color-primary: #f49f21;
    --color-primary-hover: #d88400;
    --color-success: #10b981;
    --color-text: #1f2937;
    --color-text-light: #6b7280;
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-strong: rgba(0, 0, 0, 0.15);
    
    /* Typography: calmer weights, larger line heights - Inter font for modern feel */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.75; /* Breathing line height - typography breathes */
    --line-height-tight: 1.5;
    
    /* Spacing system */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Border radius: rounded but sharper */
    --radius-sm: 1px;
    --radius-md: 1px;
    --radius-lg: 1px;
    
    /* Shadows: soft layered surfaces for depth */
    --shadow-sm: 0 1px 2px 0 var(--color-shadow);
    --shadow-md: 0 4px 6px -1px var(--color-shadow);
    --shadow-lg: 0 10px 15px -3px var(--color-shadow);
    
    /* Blur: controlled blur for glass effects */
    --blur-sm: 4px;
    --blur-md: 8px;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Touch feels quieter: less bounce, more resistance - system personality is calm */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* System personality is calm: composed, almost architectural */
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Header with centered logo */
.header {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.logo {
    font-size: 2.5rem;
    font-weight: 600; /* Calmer weight - typography breathes */
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.02em;
    /* Dynamic scaling that adapts naturally to content and posture */
    font-variation-settings: 'wght' 600;
}

.logo-image {
    padding: 53px; /* Ensures the logo has breathing space as requested; should not crop the GIF */
    position: relative; /* Allows shifting the logo visually without affecting layout flow elsewhere */
    top: -11px; /* Moves the logo up slightly as requested; should not overlap other content */
    object-fit: cover; /* Ensures the image covers its box; should not distort aspect ratio */
    object-position: center center; /* Keeps the focal point centered; should not shift unexpectedly */
    width: 236px; /* Fixed display width as requested; should not exceed container on mobile */
    height: 240px; /* Fixed display height as requested; should not collapse */
    display: block; /* Keeps logo centered via margin; should not become inline */
    margin: 0 auto var(--spacing-xs); /* Centers logo and keeps spacing below; should not break header rhythm */
    background: transparent; /* Ensures the GIF transparency shows; should not paint a background */
}

.tagline-main {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: var(--line-height-base);
}

/* Container: content over chrome, editorial feel */
.container {
    /* Frame the page like a modern company landing (still minimal) */
    max-width: 1120px;
    margin: 0 auto;
    /* New design sections already manage horizontal padding */
    padding: 0 0 4.5rem;
    position: relative;
    z-index: 1;
}

/* Tab system: big buttons, playful yet professional */
.tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    justify-content: center;
}

.tab-btn {
    flex: 1;
    max-width: 200px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.125rem;
    font-weight: 500;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    /* Rounded but sharper: corners remain soft, yet slightly tighter */
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
    /* Touch feels quieter: less bounce, more resistance, making interactions feel deliberate and mature */
    touch-action: manipulation;
    /* Soft layered surfaces for depth */
    box-shadow: var(--shadow-sm);
}

.tab-btn:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    /* Motion as feedback: micro-animations replace labels */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    /* Touch feels quieter: deliberate and mature */
}

.tab-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Negotiate tagline - content over chrome, editorial feel */
.negotiate-tagline {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    /* Typography breathes: larger line heights, calmer weights */
    line-height: var(--line-height-base);
    letter-spacing: -0.01em;
}

/* Forms: glass evolution with frosted translucency - depth without skeuomorphism */
.form {
    display: none;
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    /* Soft layered surfaces, subtle shadows for hierarchy */
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-xl);
    /* Frosted translucency: more restrained, context-aware, signals focus rather than decoration */
    backdrop-filter: blur(var(--blur-sm));
    /* Content over chrome: content blocks feel editorial and almost print-like */
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.form.active {
    display: block;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
    font-size: 0.9375rem;
}

/* Form inputs: rounded but sharper corners */
input[type="text"],
input[type="email"] {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 1rem;
    line-height: var(--line-height-tight);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

input[type="text"]:focus,
input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(244, 159, 33, 0.16);
    /* Motion as feedback: micro-animations replace labels, confirming actions through gentle movement */
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder {
    color: var(--color-text-light);
    opacity: 0.7;
}

/* Checkbox group with tooltip */
.checkbox-group {
    margin: var(--spacing-lg) 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    cursor: pointer;
    position: relative;
}

.terms-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-text {
    flex: 1;
    line-height: var(--line-height-base);
}

/* Tooltip: appears on hover, glass effect */
.tooltip {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-text);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: var(--line-height-tight);
    width: 100%;
    max-width: 400px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
    box-shadow: var(--shadow-lg);
}

.checkbox-label:hover .tooltip {
    opacity: 1;
}

/* Submit button: big button, playful yet professional */
.submit-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.25rem;
    font-weight: 600;
    background: var(--color-primary);
    color: white;
    border: none;
    /* Rounded but sharper: corners remain soft, yet slightly tighter */
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    /* Big button: large touch target - playful yet professional */
    min-height: 56px;
    touch-action: manipulation;
    /* Soft layered surfaces for depth */
    box-shadow: var(--shadow-md);
    /* Touch feels quieter: less bounce, more resistance */
    will-change: transform;
}

.submit-btn:hover {
    background: var(--color-primary-hover);
    /* Motion as feedback: micro-animations replace labels */
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    /* Touch feels quieter: making interactions feel deliberate and mature */
}

.submit-btn:active {
    transform: translateY(0);
    /* Less bounce, more resistance */
    transition: transform 0.1s ease;
}

.submit-btn:disabled {
    background: var(--color-text-light);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

/* Success message: motion as feedback */
.success-message {
    display: none;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--color-success);
    color: white;
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    /* Micro-animation: gentle appearance */
    animation: slideIn 0.3s ease;
}

.success-message.show {
    display: block;
}

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

/* Why Us section: content over chrome, editorial feel - almost print-like */
.why-us {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    /* Rounded but sharper: corners remain soft, yet slightly tighter */
    border-radius: var(--radius-lg);
    /* Depth without skeuomorphism: soft layered surfaces, subtle shadows */
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    /* Content blocks feel editorial */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.why-us h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    /* Typography breathes: larger line heights, calmer weights */
    line-height: var(--line-height-base);
    letter-spacing: -0.01em;
}

.why-us p {
    line-height: var(--line-height-base);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Player section */
.player-section {
    margin-bottom: var(--spacing-xl);
}

.player-section h2 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    /* Typography breathes: larger line heights, calmer weights */
    line-height: var(--line-height-base);
    letter-spacing: -0.01em;
}

.charity-note {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
}

/* Casinos grid: mobile-first, responsive */
.casinos-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

.casino-card {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    /* Rounded but sharper: corners remain soft, yet slightly tighter */
    border-radius: var(--radius-lg);
    /* Depth without skeuomorphism: soft layered surfaces, subtle shadows */
    box-shadow: var(--shadow-md);
    /* Content over chrome: content blocks feel editorial */
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.casino-card:hover {
    /* Motion as feedback: gentle movement */
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Casino logo styling */
.casino-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-md);
    height: 60px;
}

.casino-logo img {
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
    /* Frosted translucency: context-aware */
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.casino-card:hover .casino-logo img {
    opacity: 1;
}

.casino-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    text-align: center;
    /* Typography breathes: larger line heights, calmer weights */
    line-height: var(--line-height-base);
    letter-spacing: -0.01em;
}

.pros-cons {
    margin-bottom: var(--spacing-md);
}

.pros-cons strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
    font-weight: 600;
}

.pros-cons ul {
    list-style: none;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-sm);
}

.pros-cons li {
    position: relative;
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

.pros-cons li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.pros {
    margin-bottom: var(--spacing-md);
}

.casino-btn {
    display: flex;
    width: 100%;
    padding: var(--spacing-md);
    text-align: center;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    /* Rounded but sharper: corners remain soft, yet slightly tighter */
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.2s ease;
    /* Soft layered surfaces for depth */
    box-shadow: var(--shadow-md);
    /* Big button: large touch target - playful yet professional */
    min-height: 48px;
    align-items: center;
    justify-content: center;
    /* Touch feels quieter: less bounce, more resistance */
    will-change: transform;
}

.casino-btn:hover {
    background: var(--color-primary-hover);
    /* Motion as feedback: micro-animations replace labels */
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    /* Touch feels quieter: deliberate and mature */
}

/* Footer: content over chrome - navigation fades back */
.footer {
    background: var(--color-surface);
    padding: var(--spacing-xl) var(--spacing-sm);
    margin-top: var(--spacing-xl);
    /* Soft layered surfaces for depth */
    border-top: 1px solid var(--color-border);
    /* Content over chrome: content blocks feel editorial */
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.charity-statement {
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: var(--spacing-md);
}

.rg-links {
    margin: var(--spacing-lg) 0;
}

.rg-links h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    /* Typography breathes: larger line heights, calmer weights */
    line-height: var(--line-height-base);
    letter-spacing: -0.01em;
}

.rg-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    align-items: center;
}

.rg-links ul.rg-logos {
    gap: var(--spacing-lg);
}

.rg-links a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    /* Motion as feedback: gentle movement */
}

.rg-links a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    /* Touch feels quieter: deliberate and mature */
    transform: translateY(-1px);
}

.rg-links img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.rg-links a:hover img {
    opacity: 1;
}

.copyright {
    margin-top: var(--spacing-lg);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* Tablet and up: responsive scaling */
@media (min-width: 768px) {
    .container {
        padding: 0 0 5rem;
    }
    
    .logo {
        font-size: 3rem;
    }
    
    .tagline-main {
        font-size: 1.25rem;
    }
    
    .casinos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .form {
        padding: var(--spacing-xl);
    }
    
    .tab-btn {
        max-width: 250px;
    }
}

/* Desktop: larger spacing, refined typography */
@media (min-width: 1024px) {
    .container {
        max-width: 1120px;
    }
    
    .logo {
        font-size: 3.5rem;
    }
    
    .form {
        padding: var(--spacing-xl) var(--spacing-xl);
    }
}

/* Print styles: content over chrome */
@media print {
    .tabs,
    .submit-btn,
    .casino-btn {
        display: none;
    }
    
    .form {
        box-shadow: none;
        border: 1px solid var(--color-border);
    }
}

/* ============================================
   NEW DESIGN STYLES - Matching Mockup
   ============================================ */

/* Updated color variables to match mockup */
:root {
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
}

body {
    /* Animated gradient background (subtle + brand-complementary) */
    background: linear-gradient(-45deg, #F49F2130, #D8840026, #94A3B824, #FFFFFF);
    background-size: 400% 400%;
    animation: subtleGradient 15s ease infinite;
    min-height: max(884px, 100dvh);
    height: 100vh;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    isolation: isolate; /* ensures the background layers sit behind content cleanly */
}

/* Previous blur background layers disabled so the animated gradient is visible */
body::before,
body::after {
    content: none;
}

@keyframes subtleGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.menu-open {
    overflow: hidden; /* Prevents background scroll when menu is open; should not affect normal scroll */
}

/* Updated header styling */
.header {
    padding: 3rem 1.5rem 2rem;
    text-align: center;
    position: relative; /* Allows top-right hamburger positioning; should not change layout flow */
}

.logo {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--slate-900);
    margin-bottom: 0.75rem;
}

.logo-image {
    padding: 53px; /* Ensures the logo has breathing space as requested; should not crop the GIF */
    position: relative; /* Allows shifting the logo visually without affecting layout flow elsewhere */
    top: -11px; /* Moves the logo up slightly as requested; should not overlap other content */
    object-fit: cover; /* Ensures the image covers its box; should not distort aspect ratio */
    object-position: center center; /* Keeps the focal point centered; should not shift unexpectedly */
    width: 236px; /* Fixed display width as requested; should not exceed container on mobile */
    height: 240px; /* Fixed display height as requested; should not collapse */
    display: block; /* Keeps logo centered via margin; should not become inline */
    margin: 0 auto 0.75rem; /* Centers logo and keeps spacing below; should not break header rhythm */
    background: transparent; /* Ensures the GIF transparency shows; should not paint a background */
}

/* Duplicate .logo-image removed to avoid conflicting overrides; should not change rendering unexpectedly */

.tagline-main {
    font-size: 1.125rem;
    color: var(--slate-600);
    line-height: 1.75;
    max-width: 18rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .tagline-main {
        max-width: 32rem;
    }
}

/* Visually hidden helper for accessible headings */
.sr-only {
    position: absolute; /* Removes from visual flow; should not take space */
    width: 1px; /* Minimizes size; should not affect layout */
    height: 1px; /* Minimizes size; should not affect layout */
    padding: 0; /* No padding; should not affect layout */
    margin: -1px; /* Off-screen; should not affect layout */
    overflow: hidden; /* Hides content; should not show visually */
    clip: rect(0, 0, 0, 0); /* Clips for accessibility; should not render */
    white-space: nowrap; /* Prevents wrapping; should not render */
    border: 0; /* No border; should not render */
}

/* Hamburger menu (top-right) */
.hamburger {
    position: absolute; /* Places in top-right of header; should not shift content */
    top: 1.25rem; /* Matches header padding rhythm; should not overlap logo */
    right: 1.25rem; /* Matches header padding rhythm; should not overlap logo */
    width: 44px; /* Touch target; should not be too small */
    height: 44px; /* Touch target; should not be too small */
    border: 1px solid rgba(15, 23, 42, 0.08); /* Subtle border; should not look heavy */
    background: rgba(255, 255, 255, 0.7); /* Glass evolution: restrained frosted surface; should not be opaque */
    backdrop-filter: blur(10px); /* Controlled blur; should not overdo glass */
    border-radius: 1px; /* Nearly square corners for a sharper, more corporate feel */
    display: inline-flex; /* Centers lines; should not stretch */
    align-items: center; /* Centers lines; should not misalign */
    justify-content: center; /* Centers lines; should not misalign */
    cursor: pointer; /* Shows affordance; should not be text cursor */
    z-index: 50; /* Above menu/backdrop; should not hide behind */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; /* Motion as feedback; should not bounce */
}

.hamburger:hover {
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.10); /* Depth without skeuomorphism; should not be harsh */
    transform: translateY(-1px); /* Quiet motion; should not jump */
}

.hamburger:active {
    transform: translateY(0); /* Less bounce, more resistance; should feel deliberate */
}

.hamburger-line {
    position: absolute; /* Allows independent animation; should not affect layout */
    width: 18px; /* Compact icon; should not dominate */
    height: 2px; /* Thin line; should not be thick */
    background: var(--slate-900); /* Neutral ink; should not be bright */
    border-radius: 999px; /* Smooth ends; should not look sharp */
    transition: transform 0.22s ease, opacity 0.18s ease; /* Subtle animation; should not be flashy */
}

.hamburger-line-1 { transform: translateY(-6px); }
.hamburger-line-2 { transform: translateY(0); }
.hamburger-line-3 { transform: translateY(6px); }

/* Hamburger to X animation */
body.menu-open .hamburger-line-1 { transform: rotate(45deg); }
body.menu-open .hamburger-line-2 { opacity: 0; }
body.menu-open .hamburger-line-3 { transform: rotate(-45deg); }

/* Slide-down menu */
.site-menu {
    position: absolute; /* Anchored to header; should not reflow page */
    top: 1.25rem; /* Aligns with hamburger */
    right: 1.25rem; /* Aligns with hamburger */
    width: min(260px, calc(100vw - 3rem)); /* Mobile-safe width; should not overflow */
    padding: 0.75rem; /* Comfortable spacing; should not feel cramped */
    border-radius: 1px; /* Nearly square corners for a sharper, more corporate feel */
    background: rgba(255, 255, 255, 0.82); /* Restrained glass; should not be opaque */
    backdrop-filter: blur(14px); /* Controlled blur; should not be too strong */
    border: 1px solid rgba(15, 23, 42, 0.08); /* Subtle border; should not be heavy */
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.14); /* Depth; should not be too dark */
    transform: translateY(-8px) scale(0.98); /* Starting state for motion; should not jump */
    opacity: 0; /* Hidden by default; should not be visible */
    pointer-events: none; /* Prevent clicks when hidden; should not block page */
    transition: opacity 0.18s ease, transform 0.22s ease; /* Motion as feedback; should not bounce */
    z-index: 49; /* Under hamburger; should stay above content */
}

body.menu-open .site-menu {
    opacity: 1; /* Shows menu; should be readable */
    transform: translateY(44px) scale(1); /* Slides below hamburger; should not overlap button */
    pointer-events: auto; /* Enables clicks; should not capture when closed */
}

.site-menu-link {
    display: flex; /* Full-row hit target; should not be tiny */
    align-items: center; /* Vertical alignment; should not misalign */
    justify-content: space-between; /* Allows future icon; should not change layout now */
    padding: 0.75rem 0.75rem; /* Big touch target; should not feel cramped */
    border-radius: 1px; /* Nearly square corners for a sharper, more corporate feel */
    color: var(--slate-900); /* Neutral text; should not be low contrast */
    text-decoration: none; /* Clean; should not underline in menu */
    font-weight: 600; /* Calm emphasis; should not be too bold */
    transition: background 0.18s ease, transform 0.18s ease; /* Micro motion; should not bounce */
}

.site-menu-link:hover {
    background: rgba(244, 159, 33, 0.12); /* CTA tint; should be subtle */
    transform: translateX(2px); /* Quiet feedback; should not be distracting */
}

/* Backdrop behind menu */
.menu-backdrop {
    position: fixed; /* Covers viewport; should not scroll */
    inset: 0; /* Full screen; should not leave gaps */
    background: rgba(2, 6, 23, 0.18); /* Soft dim; should not be too dark */
    opacity: 0; /* Hidden by default; should not show */
    pointer-events: none; /* Non-interactive when hidden; should not block */
    transition: opacity 0.18s ease; /* Gentle fade; should not pop */
    z-index: 40; /* Below menu; above page */
}

body.menu-open .menu-backdrop {
    opacity: 1; /* Shows dim; should be subtle */
    pointer-events: auto; /* Enables click-to-close; should not pass through */
}

/* New tabs container - pill style */
.tabs-container {
    padding: 0 1.5rem;
    margin-bottom: 2.5rem;
}

.tabs-wrapper {
    background: var(--slate-200);
    padding: 0.25rem;
    border-radius: 1px;
    display: flex;
    gap: 0.25rem;
}

.tab-btn {
    flex: 1;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 1px;
    border: none;
    background: transparent;
    color: var(--slate-600);
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.tab-btn.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Tagline section */
.tagline-section {
    padding: 0 1.5rem;
    margin-bottom: 3rem;
}

.tagline-heading {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--slate-900);
}

/* Embed headings + short supporting text (not part of the menu) */
.embed-section {
    text-align: center;
    padding: 0 1.5rem;
    margin: 1.75rem 0 0.75rem;
}

.embed-h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--slate-900);
    margin: 0;
}

.embed-subtitle {
    margin: 0.5rem 0 0;
    color: var(--slate-600);
    font-size: 1rem;
    line-height: 1.6;
}

/* Form section with card */
.form-section {
    padding: 0px;
    margin-bottom: 3rem;
}

/* Operator form padding set to 0 */
#operator-form {
    padding: 0px;
}

.form-card {
    background: rgba(255, 255, 255, 0.86);
    border-radius: 1px;
    padding: 1.5rem;
    /* iOS shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--slate-100);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--slate-700);
    margin-bottom: 0.375rem;
}

.label-multiline {
    line-height: 1.4;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 1px;
    border: 1px solid var(--slate-200);
    background: var(--slate-50);
    color: var(--slate-900);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: all 0.2s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(244, 159, 33, 0.16);
    background: white;
}

/* New checkbox styling */
.checkbox-label-new {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin-bottom: 1.5rem;
    position: relative;
}

.terms-checkbox-new {
    margin-top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 1px;
    border: 1px solid var(--slate-300);
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-text-new {
    font-size: 0.875rem;
    color: var(--slate-600);
    line-height: 1.5;
}

.checkbox-label-new:hover .tooltip {
    opacity: 1;
}

/* New submit button */
.submit-btn-new {
    width: 100%;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    padding: 1rem;
    border-radius: 1px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgba(244, 159, 33, 0.35);
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.submit-btn-new:hover {
    background: var(--color-primary-hover);
}

.submit-btn-new:active {
    transform: scale(0.98);
}

.submit-btn-new:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Why Us new section */
.why-us-new {
    background: rgba(241, 245, 249, 0.80);
    padding: 4rem 2rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.why-us-content {
    max-width: 28rem;
    margin: 0 auto;
    text-align: center;
}

.why-us-new h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--slate-900);
}

.why-us-new p {
    color: var(--slate-600);
    line-height: 1.75;
}

/* Player section new */
.player-section-new {
    padding: 0 1.5rem;
    margin-bottom: 3rem;
    text-align: center;
}

.player-section-new h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--slate-900);
}

.charity-note-new {
    color: var(--slate-600);
    font-weight: 500;
}

/* Casinos container */
.casinos-container {
    padding: 0 1.5rem;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* New casino card design */
.casino-card-new {
    background: rgba(255, 255, 255, 0.86);
    border-radius: 1px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--slate-100);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.casino-card-content {
    padding: 1.5rem;
}

.casino-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.casino-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.casino-icon-888 {
    background: var(--slate-100);
}

.casino-icon-text {
    font-size: 1.5rem;
    color: var(--slate-900);
}

.casino-icon-stake {
    background: black;
    border-radius: 1px;
}

.casino-icon-stake .casino-icon-text {
    color: white;
    font-size: 1.875rem;
}

.casino-icon-betsson {
    background: #f97316;
    border-radius: 50%;
}

.casino-icon-material {
    font-size: 1.875rem;
    color: white;
}

.casino-card-new h3 {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--slate-900);
}

/* Pros/Cons new design */
.pros-cons-new {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pros-cons-item h4 {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    color: var(--slate-900);
}

.pros-cons-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pros-cons-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--slate-600);
}

.material-icons {
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.icon-check {
    color: #10b981;
}

.icon-cancel {
    color: #ef4444;
}

/* New casino button */
.casino-btn-new {
    width: 100%;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    padding: 1rem;
    border-radius: 1px;
    border: none;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: opacity 0.2s ease;
    margin-top: 2rem;
}

.casino-btn-new:hover {
    opacity: 0.9;
}

/* New footer */
.footer-new {
    background: rgba(255, 255, 255, 0.86);
    padding: 3rem 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid var(--slate-100);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* LinkedIn widget styles must follow user-provided SnipCSS exactly; no custom styling here */

.charity-statement-new {
    color: var(--slate-600);
    font-size: 0.875rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.rg-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate-900);
    margin-bottom: 1.5rem;
}

.rg-links-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.rg-link {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.rg-link:hover {
    text-decoration: underline;
}

.rg-link-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rg-icon {
    width: 2rem;
    height: 2rem;
    background: #f97316;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.rg-icon .material-icons {
    font-size: 0.875rem;
}

.copyright-new {
    color: var(--slate-400);
    font-size: 0.75rem;
}

/* Footer Navigation */
.footer-nav-new {
    margin-bottom: 2rem;
}

.footer-nav-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-nav-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Success message styling update */
.success-message {
    background: var(--color-success);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 1px;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    margin: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Responsive updates */
@media (min-width: 768px) {
    .casinos-container {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    .form-card {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    .why-us-content {
        max-width: 36rem;
    }

    .rg-links-new {
        flex-direction: row;
        justify-content: center;
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .hamburger {
        display: none;
    }

    .tabs-container {
        display: flex;
        justify-content: center;
    }

    .tabs-wrapper {
        display: inline-flex;
        width: auto; /* hug content */
        margin-left: auto;
        margin-right: auto;
    }

    .tabs-wrapper .tab-btn {
        flex: 0 0 180px; /* equal-width buttons; wrapper becomes exactly 2 buttons wide */
        max-width: none;
        text-align: center;
    }

    .site-menu {
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        display: flex;
        justify-content: center;
        gap: 2rem;
        background: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        margin-top: 0;
        margin-bottom: 1.25rem;
    }

    .site-menu-link {
        padding: 0.5rem 1rem;
        border-radius: 1px;
    }

    .site-menu-link:hover {
        background: rgba(244, 159, 33, 0.1);
        color: var(--color-primary);
        transform: translateY(-2px);
    }

    .menu-backdrop {
        display: none;
    }

    .casinos-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        align-items: stretch;
    }

    .casino-card-new {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .casino-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .casino-btn-new {
        margin-top: auto;
    }

    .footer-new {
        padding: 4rem 2rem 3rem;
    }
}

/* Desktop tightening: slightly reduced vertical spacing */
@media (min-width: 1024px) {
    .header {
        padding: 2.25rem 1.5rem 1.25rem;
    }

    .tabs-container {
        margin-bottom: 1.75rem;
    }

    .tagline-section {
        margin-bottom: 2rem;
    }

    .why-us-new {
        padding: 3rem 2rem;
        margin-bottom: 2.25rem;
    }

    .form-section {
        margin-bottom: 2.25rem;
    }

    .player-section-new {
        margin-bottom: 2.25rem;
    }

    .casinos-container {
        margin-bottom: 3rem;
    }

    .embed-section {
        margin: 1.5rem 0 0.75rem;
    }
}