@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
    --ink: #f6efe4;
    --ink-2: #fff8ee;
    --ink2: #fff8ee;
    --panel: #ffffff;
    --line: color-mix(in srgb, #2c1c14 16%, transparent);
    --gold: #1f6b5a;
    --gold-2: #3d8f78;
    --sky: #b8431f;
    --text: #2c1c14;
    --muted: #5a4538;
    --white: #2c1c14;
    --on-gold: #f4fff8;
    --accent-text: #1f6b5a;
    --radius-sm: 12px;
    --radius: 12px;
    --radius-xl: 12px;
    --font-display: "Merriweather", Outfit, sans-serif;
    --font-body: "Source Sans 3", "Source Sans 3", sans-serif;
    --primary-color: #f6efe4;
    --secondary-color: #fff8ee;
    --accent-color: #ffffff;
    --gold-color: #1f6b5a;
    --green-color: #b8431f;
    --gradient-primary: linear-gradient(135deg, #1f6b5a, #3d8f78);
    --gradient-dark: linear-gradient(180deg, #fff8ee, #f6efe4);
    --brand-primary: #f6efe4;
    --brand-secondary: #fff8ee;
    --brand-accent: #1f6b5a;
    --brand-gold: #1f6b5a;
    --brand-light: #f6efe4;
    --brand-white: #2c1c14;
    --brand-gradient: linear-gradient(135deg, #f6efe4, #fff8ee);
    --font-family: var(--font-body);
}
.theme-review {
    --ink: #f6efe4;
    --ink-2: #fff8ee;
    --panel: #ffffff;
    --gold: #1f6b5a;
    --gold-2: #3d8f78;
    --sky: #b8431f;
    --text: #2c1c14;
    --muted: #5a4538;
    --on-gold: #f4fff8;
}

.theme-review .header, .theme-review .navbar, .theme-review .footer {
    background: color-mix(in srgb, #fff8ee 92%, transparent) !important;
}
.theme-review .btn-outline, .theme-review .btn-secondary, .theme-review .float-cta-login {
    color: #2c1c14 !important;
}
.theme-review .nav-link { color: #5a4538 !important; }
.theme-review .hero, .theme-review .page-hero { color: #2c1c14 !important; }


/* Visual overlay for 0908 templates. Does not change HTML copy. */

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body) !important;
    color: var(--text) !important;
    background:
        radial-gradient(1100px 560px at 8% -8%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 52%),
        radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 48%),
        var(--ink) !important;
    line-height: 1.65 !important;
    overflow-x: hidden;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

h1, h2, h3, h4, h5, .hero-title, .section-title, .category-title, .promo-title, .footer-title, .game-title {
    font-family: var(--font-display) !important;
    color: var(--text) !important;
}

body p,
body li,
.hero-description,
.section-description,
.footer-description,
.promo-description,
.comment-text,
.search-hint {
    color: var(--muted) !important;
}

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

.header,
.navbar {
    position: sticky !important;
    top: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--ink-2) 92%, transparent) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line) !important;
}

.header-top,
.header-bottom {
    background: transparent !important;
}

.header-top::before,
.hero::before { opacity: 0.18 !important; }

.header-logo .logo-img,
.logo-image,
.footer-logo-img {
    height: 42px !important;
    width: auto !important;
}

.nav-link,
.navbar .nav-link {
    color: var(--muted) !important;
    background: color-mix(in srgb, var(--text) 6%, transparent) !important;
    border-radius: var(--radius-sm) !important;
    text-shadow: none !important;
}

.nav-link:hover,
.nav-link.active,
.navbar .nav-link:hover {
    color: var(--on-gold) !important;
    background: var(--gold) !important;
}

.btn,
.btn-primary,
.btn-outline,
.btn-secondary,
.promo-btn,
.nav-buttons .btn {
    border-radius: var(--radius) !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.btn-primary,
.promo-btn,
.btn-large.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
    color: var(--on-gold) !important;
    border: 0 !important;
}

.btn-outline,
.btn-secondary {
    background: color-mix(in srgb, var(--gold) 12%, transparent) !important;
    color: var(--accent-text) !important;
    border: 1px solid var(--gold) !important;
}

.hero,
.page-hero,
.page-hero-sports {
    background: transparent !important;
    color: var(--text) !important;
    padding-top: 48px !important;
}

.hero-title,
.page-hero .hero-title {
    color: var(--text) !important;
}

.gradient-text {
    background: linear-gradient(135deg, var(--gold), var(--sky)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.hero-card,
.promo-card,
.game-item,
.comment,
.comment-card,
.search-box,
.faq-item,
.category-tab,
.feature-card,
.support-card,
.legal-card,
.tutorial-card {
    background: color-mix(in srgb, var(--panel) 92%, var(--text) 8%) !important;
    color: var(--text) !important;
    border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)) !important;
    border-radius: var(--radius) !important;
}

.game-badge,
.category-tab.active {
    background: var(--gold) !important;
    color: var(--on-gold) !important;
}

.casino,
.sports,
.promotions,
.comments-section,
.faq-search-section,
.faq-categories-section,
.features,
.why-section {
    background: transparent !important;
}

.floating-card {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
}

.scroll-btn {
    background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
    color: var(--accent-text) !important;
}

footer,
.footer {
    background: color-mix(in srgb, var(--ink) 96%, #000) !important;
    color: var(--muted) !important;
    border-top: 1px solid var(--line);
}

.footer-links a,
.footer-title,
.social-link {
    color: var(--accent-text) !important;
}

input, select, textarea {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
}

.float-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ink-2) 94%, transparent);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
}
.float-cta-btn {
    flex: 1;
    min-height: 48px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none !important;
}
.float-cta-login {
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    color: var(--accent-text);
    border: 1px solid var(--gold);
}
.float-cta-register {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: var(--on-gold);
}

.layout-split .hero-container { grid-template-columns: 1.1fr 0.9fr; }
.layout-magazine .promotions-grid,
.layout-magazine .reviews-list { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 768px) {
    .layout-split .hero-container,
    .layout-magazine .promotions-grid,
    .layout-magazine .reviews-list { grid-template-columns: 1fr; }
    .hero { padding-top: 28px !important; }
    .hero-title { font-size: clamp(26px, 8vw, 36px) !important; }
}

.reviews-list .comment,
.comments-container .comment {
    padding: 16px 18px;
}