/*
 * Kadence/122BET-inspired skin imported from /www/wwwroot/zipzip/122bett.net.zip.
 * This keeps the generator-compatible CasinoBase PHP structure while giving
 * selected domains a distinct, warm sportsbook/casino visual language.
 */
:root {
    --bg-deep: #08090b;
    --bg-base: #101410;
    --bg-card: #171b15;
    --accent: #f1c24a;
    --accent-hover: #ffe073;
    --accent-glow: rgba(241, 194, 74, 0.28);
    --border: rgba(241, 194, 74, 0.18);
}

body.casino-theme {
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 176, 95, 0.20), transparent 34rem),
        radial-gradient(circle at 86% 12%, rgba(241, 194, 74, 0.14), transparent 30rem),
        linear-gradient(180deg, #070907 0%, #0f140f 42%, #090b0d 100%);
}

.site-header {
    border-bottom: 1px solid rgba(241, 194, 74, 0.18);
    background: rgba(5, 7, 6, 0.88);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.main-nav a {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 700;
}

.main-nav a::after {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #21c967, #f1c24a);
}

.hero,
.hero-section {
    background:
        linear-gradient(115deg, rgba(8, 13, 9, 0.94), rgba(9, 16, 13, 0.72)),
        url("../images/skin/hero.webp") center / cover no-repeat;
}

.hero-title {
    max-width: 960px;
    text-transform: none;
    text-shadow: 0 5px 24px rgba(0, 0, 0, 0.46);
}

.hero-desc {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.82);
}

.hero-card,
.game-card,
.promo-card,
.faq-item {
    border: 1px solid rgba(241, 194, 74, 0.16);
    background: linear-gradient(180deg, rgba(28, 35, 24, 0.94), rgba(13, 19, 16, 0.96));
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.game-card-img {
    background: #0c120f;
}

.game-card-img img,
.hero-banner img {
    object-fit: cover;
}

.btn-primary,
.game-card-actions .btn:first-child,
.promo-card .btn {
    color: #081008;
    background: linear-gradient(135deg, #24d46a, #f1c24a);
    box-shadow: 0 12px 30px rgba(36, 212, 106, 0.22);
}

.btn-primary:hover,
.game-card-actions .btn:first-child:hover,
.promo-card .btn:hover {
    background: linear-gradient(135deg, #33eb7c, #ffe073);
    box-shadow: 0 16px 40px rgba(241, 194, 74, 0.26);
}

.btn-outline {
    border-color: rgba(241, 194, 74, 0.68);
    color: #f8d66b;
}

.section-title {
    color: #fff7dc;
}

.section-title::after {
    background: linear-gradient(90deg, #24d46a, #f1c24a);
}

.faq-question {
    color: #fff8df;
}

.footer,
.site-footer {
    background: linear-gradient(180deg, #0c100d, #050605);
    border-top: 1px solid rgba(241, 194, 74, 0.16);
}