/* ======================================================
   AFF Casino - Modern Design System (Refactored)
   Combines functionality of first CSS with design of second
   ====================================================== */

/* ========== DESIGN TOKENS ========== */
:root {
    /* === Auto-generated color variables === */
    --color-custom-1: #00a3cc;
    --color-custom-2: #00cc88;
    --color-custom-3: #00d1ff;
    --color-custom-4: #00a9a0;
    --color-custom-5: #00d1c1;
    --color-custom-6: #00e0ff;
    --color-custom-7: #0b0c11;
    --color-custom-9: #161622;
    --color-custom-10: #1b1b2a;
    --color-custom-11: #2a2a3a;
    --color-custom-12: #37ffe6;
    --color-custom-13: #38bdf8;
    --color-custom-14: #41e0ff;
    --color-custom-15: #5f2eea;
    --color-custom-16: #7f49f3;
    --color-custom-17: #818cf8;
    --color-custom-18: #8715ff;
    --color-custom-19: #8a2be2;
    --color-custom-20: #94a3b8;
    --color-custom-21: #9aa2b3;
    --color-custom-22: #9b4dff;
    --color-custom-23: #e9eef6;
    --color-custom-24: #ff4757;
    --color-custom-25: #ffaa00;
    --color-custom-26: #c9ff31;
    --color-custom-27: #ccc;
    --color-custom-28: #ff2373;
    --color-custom-29: #ff4ecd;
    --color-custom-30: #ff5caa;
    --color-custom-31: #ff7fcf;
    --color-custom-33: rgb(201, 255, 49);
    --color-custom-34: rgb(204, 204, 204,.42);
    --color-custom-35: rgba(0, 0, 0, 0.3);
    --color-custom-36: rgba(0, 0, 0, 0.35);
    --color-custom-37: rgba(0, 0, 0, 0.45);
    --color-custom-38: rgba(0, 0, 0, 0.5);
    --color-custom-39: rgba(0, 0, 0, 0.6);
    --color-custom-40: rgba(0, 0, 0, 0.8);
    --color-custom-41: rgba(0, 209, 255, 0.1);
    --color-custom-42: rgba(0, 209, 255, 0.3);
    --color-custom-43: rgba(0, 209, 255, 0.4);
    --color-custom-44: rgba(0,0,0,0.35);
    --color-custom-45: rgba(0,0,0,0.7);
    --color-custom-46: rgba(0,209,193,0.5);
    --color-custom-47: rgba(0,209,193,0.8);
    --color-custom-48: rgba(0,234,255,0.5);
    --color-custom-49: rgba(0,234,255,0.7);
    --color-custom-50: rgba(0,255,255,0.25);
    --color-custom-51: rgba(10, 200, 180, 0.4);
    --color-custom-52: rgba(11, 12, 17, 0.9);
    --color-custom-53: rgba(11, 12, 17, 0.95);
    --color-custom-54: rgba(135, 21, 255, 0.35);
    --color-custom-55: rgba(138, 43, 226, 0.3);
    --color-custom-56: rgba(15, 15, 27, 0.85);
    --color-custom-57: rgba(15,15,27,0.6);
    --color-custom-58: rgba(2, 6, 23, 0.2);
    --color-custom-59: rgba(2, 6, 23, 0.3);
    --color-custom-60: rgba(2, 6, 23, 0.45);
    --color-custom-61: rgba(20, 100, 200, 0.4);
    --color-custom-62: rgba(200, 40, 180, 0.4);
    --color-custom-63: rgba(201, 255, 49, 0.35);
    --color-custom-64: rgba(201, 255, 49, 0.4);
    --color-custom-65: rgba(201, 255, 49, 0.8);
    --color-custom-66: rgba(201,255,49,0.5);
    --color-custom-67: rgba(255, 120, 80, 0.4);
    --color-custom-68: rgba(255, 255, 255, 0.05);
    --color-custom-69: rgba(255, 255, 255, 0.08);
    --color-custom-70: rgba(255, 255, 255, 0.15);
    --color-custom-71: rgba(255, 255, 255, 0.2);
    --color-custom-72: rgba(255, 35, 115, 0.35);
    --color-custom-73: rgba(255, 35, 115, 0.4);
    --color-custom-74: rgba(255, 35, 115, 0.6);
    --color-custom-75: rgba(255, 35, 115, 0.9);
    --color-custom-76: rgba(255, 76, 205, 0.5);
    --color-custom-77: rgba(255, 92, 170, 0.7);
    --color-custom-78: rgba(255,255,255,0.05);
    --color-custom-79: rgba(255,255,255,0.95);
    --color-custom-80: rgba(255,92,170,0.7);
    --color-custom-81: rgba(255,92,170,0.8);
    --color-custom-82: rgba(255,92,170,1);
    --color-custom-83: rgba(26, 26, 46, 0.85);
    --color-custom-84: rgba(26,26,46,0.6);
    --color-custom-85: rgba(55, 255, 230, 0.5);
    --color-custom-86: rgba(55,255,230,0.6);
    --color-custom-87: rgba(55,255,230,0.9);
    --color-custom-88: rgba(56, 189, 248, 0.3);
    --color-custom-89: rgba(56, 189, 248, 0.4);
    --color-custom-90: rgba(56, 189, 248, 0.5);
    --color-custom-91: rgba(95, 46, 234, 0.5);
    --color-custom-92: rgba(95, 46, 234, 0.6);
    --color-custom-93: rgba(95,46,234,0);
    --color-custom-94: rgba(95,46,234,0.5);
    --color-custom-95: rgba(95,46,234,0.7);
    --color-custom-96: rgba(95,46,234,0.8);
    --color-button11: rgb(0,119,219);
    --color-button12: rgb(31,153,255);
    --color-button13: #fff;
    --color-button14: #1497b4;
    --color-bbback1: #252a36;
    --color-bbback2: rgba(37, 42, 54, .666);
    --color-bbback3: rgba(10, 15, 45, 1);
    --color-bbback4: rgba(10, 15, 30, 1);
/*some few new colors for koko*/
    --hero-primary: #fdbd14;   /* Gold */
    --hero-primary-light: #ffd873; /* Light gold */
    --hero-secondary: #7b2ff7; /* Purple accent */
    --hero-overlay-top: rgba(0,0,0,0.6);
    --hero-overlay-bottom: rgba(11,12,17,0.95);
    --hero-text: #ffffff;
    --hero-text-muted: #d6d6e0;
    --hero-shadow-primary: 0 0 24px rgba(253,189,20,0.45);
    --hero-shadow-secondary: 0 0 24px rgba(123,47,247,0.35);

.site-header__logo img,
.site-footer__logo img {
    max-width: 200px;
    height: auto;
    max-height: unset;
}

#page {
    /*overflow-x: hidden !important;*/
}

    /* Color System */
    --color-primary: var(--color-custom-3);        /* Vibrant cyan (main brand color) */
    --color-primary-dark: var(--color-custom-1);   /* Darker cyan for hover states */
    --color-secondary: var(--color-custom-19);      /* Purple accent (secondary brand color) */
    --color-secondary-light: var(--color-custom-22);/* Lighter purple for highlights */

    /* Neutral Colors */
    --color-bg: var(--color-bbback3);             /* Page background (very dark) */
    --color-surface: var(--color-custom-9);        /* Card/panel backgrounds */
    --color-surface-alt: var(--color-custom-10);    /* Alternative surface */
    --color-text: var(--color-custom-23);           /* Primary text */
    --color-text-muted: var(--color-custom-21);     /* Secondary text */
    --color-border: var(--color-custom-11);         /* Border/divider color */

    /* Semantic Colors */
    --color-success: var(--color-custom-2);        /* Success states */
    --color-warning: var(--color-custom-25);        /* Warning states */
    --color-error: var(--color-custom-24);          /* Error states */

    /* Spacing Scale */
    --space-xxs: 0.25rem;    /* 4px */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 0.75rem;     /* 12px */
    --space-md: 1.25rem;     /* 20px */
    --space-lg: 2.5rem;      /* 40px */
    --space-xl: 5rem;        /* 80px */

    /* Typography */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --font-heading: "Sora", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    --font-size-base: 1rem;          /* 16px */
    --font-size-sm: 0.875rem;        /* 14px */
    --font-size-lg: 1.125rem;        /* 18px */
    --font-size-xl: 1.25rem;         /* 20px */

    /* Heading Scale */
    --h1: 2.8rem;                    /* ~45px */
    --h2: 2rem;                      /* 32px */
    --h3: 1.5rem;                    /* 24px */
    --h4: 1.25rem;                   /* 20px */

    /* Layout */
    --site-max-width: 82.5rem;       /* 1320px */
    --main-content-width: 65rem;     /* 1040px */
    --sidebar-width: 16.25rem;       /* 260px */

    /* Effects */
    --shadow-sm: 0 2px 8px var(--color-custom-58);
    --shadow-md: 0 4px 16px var(--color-custom-59);
    --shadow-lg: 0 8px 24px var(--color-custom-60);
    --shadow-glow: 0 0 20px var(--color-custom-42);

    /* Border Radius */
    --radius-sm: 0.375rem;           /* 6px */
    --radius-md: 0.5rem;             /* 8px */
    --radius-lg: 0.75rem;            /* 12px */
    --radius-xl: 1rem;               /* 16px */
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
}

/* ========== BASE STYLES ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-white);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

.lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

/* ========== LINKS ========== */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-normal), transform var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
    transform: translateY(-1px);
}

/* ========== LAYOUT UTILITIES ========== */
.container {
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.section--sm {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.section--lg {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* ========== CARD COMPONENT ========== */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.card--alt {
    background: var(--color-surface-alt);
}

/* ========== BUTTON COMPONENT ========== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--transition-normal);
    gap: var(--space-xs);
    position: relative;
    overflow: hidden;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-custom-71), transparent);
    transition: left var(--transition-slow);
}

.button:hover::before {
    left: 100%;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Button Variants */
.button--primary {
    background: var(--color-primary);
    color: var(--color-bg);
}

.button--primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-glow);
}

.button--secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-custom-42);
}

.button--secondary:hover {
    background: var(--color-custom-41);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.button--accent {
    background: var(--color-secondary);
    color: white;
}

.button--accent:hover {
    background: var(--color-secondary-light);
    box-shadow: 0 4px 20px var(--color-custom-55);
}

.button--cta {
    background: var(--color-primary);
    color: var(--color-bg);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    box-shadow: var(--shadow-glow);
}

.button--cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px var(--color-custom-43);
}

/* Button Sizes */
.button--sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.button--lg {
    padding: 0.875rem 1.5rem;
    font-size: var(--font-size-lg);
}

/* ========== HEADER STYLES ========== */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-bbback2);
    backdrop-filter: blur(8px);
    transition: all var(--transition-normal);
    padding: var(--space-sm) 0;
}

.site-header.sticky {
    position: fixed;
    background: var(--color-custom-53);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    padding: var(--space-xs) 0;
}

.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.site-header__logo img {
    max-height: 3rem;
    transition: transform var(--transition-normal);
}

.site-header__logo a:hover img {
    transform: scale(1.05);
}

/* Navigation */
.main-navigation {
    flex-grow: 1;
    position: relative;
}

.main-navigation ul.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-md);
}

.main-navigation ul.nav-menu li a {
    color: var(--color-text);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    transition: all var(--transition-normal);
}

.main-navigation ul.nav-menu li a:hover,
.main-navigation ul.nav-menu li.focus > a {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
}

/* Dropdown */
.main-navigation ul.nav-menu li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-sm) 0;
    min-width: 12.5rem;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.main-navigation ul.nav-menu li.focus > ul.sub-menu,
.main-navigation ul.nav-menu li:hover > ul.sub-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.main-navigation ul.nav-menu li ul.sub-menu li a {
    display: block;
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text);
    text-transform: none;
}

.main-navigation ul.nav-menu li ul.sub-menu li a:hover {
    color: var(--color-primary);
    background: var(--color-custom-41);
}

/* Header Actions */
.site-header__actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.site-header__actions--desktop { display: flex; }
.site-header__actions--mobile  { display: none; }

/* Menu Toggle (burger) */
.menu-toggle {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 36px;
    height: 28px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1100;
}

.menu-icon {
    display: block;
    position: relative;
    width: 33px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.35s ease, top 0.35s ease, opacity 0.35s ease;
}

.menu-toggle .menu-icon::before { top: -9px; }
.menu-toggle .menu-icon::after  { top: 9px; }

.site-header.toggled .menu-icon { background: transparent; }
.site-header.toggled .menu-icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.site-header.toggled .menu-icon::after  { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ========== HERO SECTION ========== */
/*.aff-hero {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 43.75rem; !* 700px *!*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    text-align: center;*/
/*    overflow: hidden;*/
/*}*/

/*.aff-hero__bg img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    display: block;*/
/*}*/

/*.aff-hero__overlay {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: linear-gradient(180deg, var(--color-custom-39) 0%, var(--color-custom-40) 100%);*/
/*}*/

/*.aff-hero__content {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*    color: var(--color-white);*/
/*    max-width: 50rem; !* 800px *!*/
/*    padding: var(--space-md);*/
/*}*/

/*.aff-hero__content h1 {*/
/*    font-size: clamp(1.75rem, 4vw, 3rem);*/
/*    margin-bottom: var(--space-sm);*/
/*    color: var(--color-white);*/
/*}*/

/*.aff-hero__content p {*/
/*    color: var(--color-text-muted);*/
/*    font-size: var(--font-size-lg);*/
/*    margin-bottom: var(--space-md);*/
/*}*/
/* ======================================================
   HERO SECTION
   ====================================================== */
.aff-hero {
    position: relative;
    width: 100%;
    height: 43.75rem; /* 700px */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--aff-surface);
}

.aff-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85);
}

.aff-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            var(--hero-overlay-top) 0%,
            var(--hero-overlay-bottom) 100%
    );
}

/* Content */
.aff-hero__content {
    position: relative;
    z-index: 2;
    max-width: 50rem; /* 800px */
    padding: var(--aff-spacing-md);
    color: var(--hero-text);
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.aff-hero__content h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: var(--aff-spacing-sm);
    color: var(--hero-text);
    text-shadow: var(--hero-shadow-primary), var(--hero-shadow-secondary);
}

.aff-hero__content p {
    color: var(--hero-text-muted);
    font-size: var(--lead);
    margin-bottom: var(--aff-spacing-md);
}

/* Hero buttons */
.aff-hero__content .button {
    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 8px;
    transition: var(--trans-base);
    box-shadow: var(--hero-shadow-primary);
}

.aff-hero__content .button--primary {
    background: linear-gradient(135deg, var(--hero-primary) 0%, var(--hero-primary-light) 100%);
    color: #000;
}
.aff-hero__content .button--primary:hover {
    background: linear-gradient(135deg, var(--hero-primary-light) 0%, var(--hero-primary) 100%);
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--hero-shadow-primary), 0 6px 18px rgba(0,0,0,0.4);
}

.aff-hero__content .button--secondary {
    background: var(--hero-secondary);
    color: #fff;
    box-shadow: var(--hero-shadow-secondary);
}
.aff-hero__content .button--secondary:hover {
    background: #6820d6;
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--hero-shadow-secondary), 0 6px 18px rgba(0,0,0,0.4);
}

/* ========== MAIN LAYOUT ========== */
.aff-main-wrapper {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-lg) auto;
    max-width: var(--site-max-width);
    padding: 0 var(--space-md);
}

.aff-main-content {
    /*flex: 0 0 var(--main-content-width);*/
    flex 0 0 1;
    width: var(--main-content-width);
    box-sizing: border-box;
    background: transparent;
}

.aff-sidebar {
    flex: 1 0 var(--sidebar-width);
    width: var(--sidebar-width);
    box-sizing: border-box;
    position: sticky;
    /*top: var(--space-lg);*/
    top: 0;
    align-self: flex-start;
    height: fit-content;
    background: transparent;
}
/* No sidebar case */
/*modern approach with :has selector*/
.aff-main-wrapper:has(.aff-main-content):not(:has(.aff-sidebar)) .aff-main-content {
    flex: 1 1 100%;
    width: 100%;
}
/*fallback for older browsers*/
.aff-main-wrapper.no-sidebar .aff-main-content {
    flex: 1 1 auto;
    width: 100%;
}


/* Sections inside main content: uniform card surface */
.section-card {
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-border);
}

/* ========== COMPONENT STYLES ========== */
/* Top Games Grid */
/*.aff-top-games {*/
/*    padding: var(--space-lg) 0;*/
/*    padding-top: 0 !important;*/
/*}*/

/*.aff-top-games__grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));*/
/*    gap: var(--space-md);*/
/*}*/

/*.aff-top-game-card {*/
/*    background: var(--color-surface);*/
/*    padding: var(--space-md);*/
/*    border-radius: var(--radius-lg);*/
/*    text-align: center;*/
/*    transition: transform var(--transition-normal);*/
/*}*/

/*.aff-top-game-card:hover {*/
/*    transform: translateY(-4px);*/
/*}*/

/*.aff-top-game-card img {*/
/*    width: 100%;*/
/*    height: 9rem;*/
/*    object-fit: cover;*/
/*    border-radius: var(--radius-md);*/
/*    margin-bottom: var(--space-sm);*/
/*}*/

/*.aff-top-game__label {*/
/*    display: inline-block;*/
/*    margin: var(--space-xs) 0;*/
/*    padding: var(--space-xs) var(--space-sm);*/
/*    font-size: var(--font-size-sm);*/
/*    background: var(--color-secondary);*/
/*    color: var(--color-white);*/
/*    border-radius: var(--radius-sm);*/
/*    font-weight: 600;*/
/*}*/

/* Bonuses Section */
.aff-bonuses {
    margin: var(--space-xl) 0;
}

.aff-bonuses h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.aff-bonuses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
    gap: var(--space-md);
}

.aff-bonus-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    text-align: center;
    transition: all var(--transition-normal);
}

/*.aff-bonus-card:hover {*/
/*    transform: translateY(-4px);*/
/*    box-shadow: var(--shadow-lg);*/
/*    border-color: var(--color-primary);*/
/*}*/

.aff-bonus-card img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    transform: rotateY(180deg) !important;
}

.aff-bonus-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
    color: var(--color-white);
}

.bonus-value {
    font-weight: 700;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
}

.bonus-expiry {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

/* Special layout for 3 items */
.aff-bonuses__grid > .aff-bonus-card:first-child:nth-last-child(3) {
    grid-row: span 2;
}

/* Providers Section */
.aff-providers {
    background: var(--color-surface-alt);
    padding: var(--space-lg) 0;
    margin: var(--space-xl) 0;
}

.aff-providers__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
    gap: var(--space-md);
    align-items: center;
    justify-items: center;
}

.aff-provider {
    text-align: center;
}

.aff-provider img {
    max-height: 3.125rem;
    max-width: 7.5rem;
    filter: grayscale(100%) brightness(0.8);
    opacity: 0.7;
    transition: all var(--transition-normal);
}

.aff-provider img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.05);
}

.aff-provider span {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--color-custom-27);
}

/*!* More Games Section *!*/
/*.aff-moregames {*/
/*    margin: var(--space-xl) 0;*/
/*    margin-top: 0 !important;*/
/*}*/

/*.aff-moregames .aff-section-title {*/
/*    text-align: center;*/
/*    margin-bottom: var(--space-lg);*/
/*    font-size: 1.8rem;*/
/*}*/

/*.aff-moregames__grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));*/
/*    gap: var(--space-md);*/
/*}*/

/*.aff-moregame-card {*/
/*    display: block;*/
/*    background: var(--color-surface);*/
/*    border-radius: var(--radius-lg);*/
/*    overflow: hidden;*/
/*    text-align: center;*/
/*    transition: all var(--transition-normal);*/
/*    border: 1px solid var(--color-border);*/
/*}*/

/*.aff-moregame-card:hover {*/
/*    transform: translateY(-5px);*/
/*    box-shadow: var(--shadow-lg);*/
/*}*/

/*.aff-moregame-card img {*/
/*    width: 100%;*/
/*    height: 8.75rem;*/
/*    object-fit: cover;*/
/*}*/

/*.aff-moregame-card h3 {*/
/*    margin: var(--space-sm);*/
/*    font-size: var(--font-size-base);*/
/*    color: var(--color-white);*/
/*}*/
/* More Games Section */
.aff-moregames {
    margin: var(--space-xl) 0;
    margin-top: 0 !important;
}

.aff-moregames .aff-section-title {
    text-align: center;
    margin-bottom: var(--space-lg);
    font-size: 1.8rem;
}

/* Grid: 4 desktop, 3 tablet, 2 mobile */
.aff-moregames__grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .aff-moregames__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .aff-moregames__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card */
.aff-moregame-card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.aff-moregame-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Image wrapper (for overlay) */
.aff-moregame-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Square aspect ratio */
    overflow: hidden;
    /*  new custom height  */
    height: 294px;
}
/* Image wrapper overlay */
.aff-moregame-card__image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0); /* start transparent */
    transition: background 0.3s ease;
    border-radius: var(--radius-lg);
    z-index: 1;
}

.aff-moregame-card:hover .aff-moregame-card__image-wrapper::after {
    background: rgba(0, 0, 0, 0.4); /* semi-transparent dark overlay on hover */
}

.aff-moregame-card__image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay button: always positioned, fade in */
.aff-moregame-card__button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    background: var(--color-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2; /* above overlay */
}

.aff-moregame-card:hover .aff-moregame-card__button {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.05); /* subtle pop effect */
}


/* Title below image */
.aff-moregame-card__title {
    margin: var(--space-sm);
    font-size: var(--font-size-base);
    color: var(--color-white);
}


/* FAQ Section */
.aff-faq {
    margin: var(--space-xl) auto;
    max-width: 56.25rem;
}

.aff-faq h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.aff-faq-item {
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.aff-faq-question {
    width: 100%;
    text-align: left;
    font-size: var(--font-size-lg);
    padding: var(--space-sm);
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-normal);
}

.aff-faq-question:hover {
    background: var(--color-custom-68);
}

.aff-faq-question[aria-expanded="true"] {
    background: var(--color-custom-41);
    color: var(--color-primary);
}

.aff-faq-answer {
    padding: var(--space-sm);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    color: var(--color-text-muted);
    display: none;
}

.aff-faq-question[aria-expanded="true"] + .aff-faq-answer {
    display: block;
}

/* Deposits Table */
.aff-deposits {
    margin: var(--space-lg) 0;
}

.aff-deposits h2 {
    margin-bottom: var(--space-md);
    font-size: var(--h3);
    color: var(--color-primary);
}

.aff-deposits-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-custom-78);
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

.aff-deposits-table th {
    background: var(--color-custom-45);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
}

/* Pros & Cons */
.aff-pros-cons {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.aff-pros-cons__grid {
    display: flex;
    gap: var(--space-md);
}

.aff-pros, .aff-cons {
    flex: 1;
}

.aff-pros h3 { color: var(--color-success); }
.aff-cons h3 { color: var(--color-error); }

.aff-rating {
    margin-top: var(--space-md);
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

/* CTA Section */
.aff-cta {
    background: var(--color-primary);
    color: var(--color-bg);
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    margin: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.aff-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--color-button11), var(--color-button12));
    opacity: 0.9;
    z-index: 1;
}

.aff-cta > * {
    position: relative;
    z-index: 2;
}

.aff-cta__title {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    font-weight: 700;
}

.aff-cta__text {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-lg);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.aff-cta .button--cta {
    background: var(--color-bg);
    color: var(--color-primary);
    padding: 1.225rem 1.525rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.15rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--shadow-glow);
}

.aff-cta .button--cta:hover {
    background: var(--color-bg-dark-alt);
    transform: translateY(-2px) scale(1.05);
}

/* ========== FOOTER STYLES ========== */
.site-footer {
    background: var(--color-bbback4);
    color: var(--color-text);
    padding: var(--space-xl) var(--space-md);
}

.site-footer a {
    color: var(--color-primary);
    transition: color var(--transition-normal);
}

.site-footer a:hover {
    color: var(--color-secondary);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
}

.site-footer__col h4 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-lg);
}

.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__col ul li {
    margin-bottom: var(--space-xs);
}

.site-footer__col ul li a {
    font-weight: 500;
}

.site-footer__logo img {
    max-height: 3.125rem;
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-normal);
}

.site-footer__logo a:hover img {
    transform: scale(1.05);
}

.site-footer__description {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 82.5rem) { /* 1320px */
    .aff-main-wrapper {
        flex-direction: column;
    }

    .aff-sidebar {
        position: relative;
        top: auto;
        flex: 1;
        width: 100%;
    }

    .aff-main-content {
        width: 100%;
        flex: 1;
    }

    .aff-hero {
        height: 33.75rem; /* 540px */
    }
}

@media (max-width: 62rem) { /* 992px */
    .menu-toggle {
        display: block;
    }

    .main-navigation ul.nav-menu {
        position: fixed;
        top: 0;
        /*right: -16.25rem;*/
        right: 0;
        width: 16.25rem;
        height: 100vh;
        background: var(--color-surface);
        flex-direction: column;
        padding: 5rem var(--space-md) var(--space-md);
        gap: var(--space-sm);
        transition: right var(--transition-normal);
        box-shadow: var(--shadow-lg);
        z-index: 999;
        visibility: hidden;
        opacity: 0;
    }

    .main-navigation ul.nav-menu::before {
        content: "MENU";
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--color-primary);
        margin-top: -52px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid var(--color-primary);
        opacity: 0.5;
    }

    .site-header.toggled ul.nav-menu {
        right: 0;
        visibility: visible;
        opacity: 1;
    }

    .site-header__actions--desktop {
        display: none;
    }

    .site-header__actions--mobile {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-md);
        width: 100%;
    }

    .aff-bonuses__grid {
        grid-template-columns: 1fr;
    }

    /* Reset the special layout for 3 items on mobile */
    .aff-bonuses__grid > .aff-bonus-card:first-child:nth-last-child(3) {
        grid-row: auto;
    }
}

@media (max-width: 48rem) { /* 768px */
    :root {
        --h1: 1.8rem;
        --h2: 1.5rem;
        --h3: 1.25rem;
    }

    .aff-hero {
        height: 26.25rem; /* 420px */
    }

    .aff-hero__content h1 {
        font-size: clamp(1.375rem, 6vw, 2.125rem);
    }

    .container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .site-footer__columns {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .aff-pros-cons__grid {
        flex-direction: column;
    }
}

@media (max-width: 30rem) { /* 480px */
    .aff-top-games__grid,
    .aff-moregames__grid {
        grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    }

    .aff-providers__container {
        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    }
}

/* ========== UTILITY CLASSES ========== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }

.hidden { display: none; }
.visible { display: block; }

.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

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

.animate-fadeIn { animation: fadeIn 0.6s ease-out; }
.animate-slideIn { animation: slideIn 0.4s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }


/*--------------------------------------------------------------
# Homepage Hero Section (Refactored + Pulse + Parallax)
--------------------------------------------------------------*/
.aff-hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--color-white);
    padding: 0 5%;
}

/* Container with site max width */
.aff-hero__content-container {
    position: relative;
    width: 100%;
    max-width: 1320px; /* corrected */
    margin: 0 auto;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* align left */
    justify-content: center;
}

/* Secondary background (static) */
.aff-hero__underlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}
.aff-hero__underlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1);
}

/* Primary background (pulsating + parallax) */
.aff-hero__bg {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*z-index: 2;*/
    /*overflow: hidden;*/
    /*transform-origin: center center;*/
    /*animation: pulseZoom 10s ease-in-out infinite alternate;*/
    position: absolute;
    bottom: 0;
    right: 0;
    /* width: 100%; */
    height: 75%;
    object-fit: cover;
    filter: brightness(0.75);
    animation: pulseZoom 5s ease-in-out infinite alternate;
    transform-origin: center center;
    z-index: 3;
}
.aff-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform;
}

/* Overlay */
.aff-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-custom-57), var(--color-custom-84));
    z-index: 1;
}

/* Content */
.aff-hero__content {
    z-index: 4;
    text-align: left;
    width: 100%;
    display: block;
    max-width: 1320px;
}

/* Title - Neon Cyan */
.aff-hero__title {
    font-size: 4.2rem !important;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: linear-gradient(90deg, var(--color-custom-12), var(--color-custom-5), var(--color-custom-4));
    background-clip: text;
    -webkit-background-clip: text;
    color: var(--color-custom-79);
    text-shadow: 0 0 10px var(--color-custom-86), 0 0 20px var(--color-custom-46);
    animation: neonPulse 2.5s ease-in-out infinite alternate;
}

/* Subtitle - Green Glow (your style) */
.aff-hero__subtitle {
    font-size: 3.2rem !important;
    margin-bottom: 30px;
    color: var(--color-custom-33) !important;
    line-height: 1.4;
    text-align: left;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--color-custom-77), 0 0 16px var(--color-custom-91);
    animation: glowSubtitle 3s ease-in-out infinite alternate;
}

/* Button */
.aff-hero__actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.aff-hero__actions a {
    padding: 16px 36px;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 12px var(--color-custom-94), 0 6px 18px var(--color-custom-44);
}
.button--primary {
    background: linear-gradient(135deg, var(--color-custom-30), var(--color-custom-15));
    color: var(--color-white);
}
.button--primary:hover {
    background: linear-gradient(135deg, var(--color-custom-31), var(--color-custom-16));
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 0 20px var(--color-custom-81), 0 0 30px var(--color-custom-95);
}

/* Animations */
@keyframes pulseZoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes neonPulse {
    0% { text-shadow: 0 0 10px var(--color-custom-86), 0 0 20px var(--color-custom-46); }
    100% { text-shadow: 0 0 20px var(--color-custom-87), 0 0 40px var(--color-custom-47); }
}
@keyframes glowSubtitle {
    0% { text-shadow: 0 0 8px var(--color-custom-80), 0 0 16px var(--color-custom-94); }
    100% { text-shadow: 0 0 16px var(--color-custom-82), 0 0 32px var(--color-custom-96); }
}

/* Responsive */
@media (max-width: 1024px) {
    .aff-hero__title { font-size: 3rem; }
    .aff-hero__subtitle { font-size: 2.6rem; }
}
@media (max-width: 768px) {
    .aff-hero__title { font-size: 2.5rem; }
    .aff-hero__subtitle { font-size: 2rem; }
}

/*CTA restyle*/
.aff-cta {
    position: relative;
    padding: 80px 20px;
    color: var(--color-white);
    text-align: center;
    background-blend-mode: overlay; /* blends gradient with image */
}
.aff-cta__container {
    max-width: 1320px;
    margin: 0 auto;
}
.aff-cta::before {
    opacity: 0.12;
}

/*some heading section title style*/
/*v1*/
/*.aff-moregames > h2,*/
/*.aff-top-games > h2 {*/
/*    font-size: 2.8rem;*/
/*    font-weight: 800;*/
/*    text-transform: uppercase;*/
/*    text-align: center;*/
/*    background: linear-gradient(90deg, var(--color-custom-26), var(--color-custom-15), var(--color-custom-29));*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*    text-shadow: 0 0 8px var(--color-custom-92), 0 0 16px var(--color-custom-76);*/
/*    letter-spacing: 2px;*/
/*    animation: titleGlow 1s ease-in-out infinite alternate;*/
/*}*/

/*@keyframes titleGlow {*/
/*    0%   { text-shadow: 0 0 8px var(--color-custom-92), 0 0 16px var(--color-custom-76); }*/
/*    100% { text-shadow: 0 0 16px var(--color-custom-65), 0 0 32px var(--color-custom-92); }*/
/*}*/

/*v2*/
.aff-winners-widget > h2,
.aff-faq > h2 {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-white);
    text-align: left;
    letter-spacing: 2px;
    position: relative;
    margin-bottom: 44px;
    display: inline-block;
    padding-bottom: 12px;
}

/*.aff-sidebar.aff-sidebar--secondary .aff-winners-widget > h2 {*/
/*    margin-bottom: 54px;*/
/*}*/

.aff-winners-widget > h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 180px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-custom-28), var(--color-custom-18));
    animation: underlinePulse 2.5s ease-in-out infinite alternate;
}

@keyframes underlinePulse {
    0%   { width: 50px; opacity: 0.6; }
    100% { width: 120px; opacity: 1; }
}

/*v3*/
.aff-moregames h2,
.aff-top-games h2,
.aff-faq > h2 {
    font-size: 2rem !important;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-white);
    text-align: center !important;
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.aff-moregames > h2::before,
.aff-top-games > h2::before,
.aff-faq > h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 5px;
    /*background: linear-gradient(120deg, transparent, var(--color-custom-50), transparent);*/
    background: linear-gradient(
            120deg,
            transparent 0%,
            var(--color-custom-12) 15%,   /* pink glow */
            var(--color-custom-13) 20%,   /* purple glow */
            var(--color-custom-14) 25%,   /* neon green accent */
            transparent 100%
    );
    animation: scanline 4s linear infinite;
}

.aff-moregames > h2::before {
    background: linear-gradient(
            120deg,
            transparent 0%,
            var(--color-custom-63) 45%,   /* neon green accent */
            var(--color-custom-54) 55%,   /* purple glow */
            var(--color-custom-72) 65%,   /* pink glow */
            transparent 100%
    );
    animation: scanline-reverse 4s linear infinite;
}

@keyframes scanline {
    0%   { left: -100%; }
    100% { left: 100%; }
}

@keyframes scanline-reverse {
    0%   { left: 100%; }
    100% { left: -100%; }
}


/*/v4*/
/*!*.aff-structured-block > h2 {*!*/
/*!*    font-size: 2rem;*!*/
/*!*    font-weight: 700;*!*/
/*!*    color: var(--color-white);*!*/
/*!*    text-align: left;*!*/
/*!*    position: relative;*!*/
/*!*    margin-bottom: 30px;*!*/
/*!*    padding-bottom: 8px;*!*/
/*!*}*!*/

/*!*.aff-structured-block > h2::after {*!*/
/*!*    content: "";*!*/
/*!*    position: absolute;*!*/
/*!*    bottom: 0;*!*/
/*!*    left: 0;*!*/
/*!*    width: 60px;*!*/
/*!*    height: 3px;*!*/
/*!*    border-radius: 2px;*!*/
/*!*    background: linear-gradient(90deg, var(--color-custom-28), var(--color-custom-18));*!*/
/*!*    opacity: 0.8;*!*/
/*!*}*!*/

/*!*v5*!*/
/*.aff-structured-block > h2 {*/
/*    font-size: 1.8rem;*/
/*    font-weight: 600;*/
/*    color: var(--color-custom-26); !* neon green accent *!*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 1px;*/
/*    text-align: center;*/
/*    text-shadow: 0 0 6px var(--color-custom-64);*/
/*    margin-bottom: 25px;*/
/*}*/


/*v6*/
.aff-structured-block > h2,
.aff-bonuses > h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 30px;
}

/*v6*/
/*.aff-structured-block > h2 {*/
/*    font-size: 2rem;*/
/*    font-weight: 800;*/
/*    color: var(--color-white);*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    display: inline-block;*/
/*    margin-bottom: 30px;*/
/*}*/

/*.aff-structured-block > h2::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: -75%;*/
/*    width: 50%;*/
/*    height: 100%;*/
/*    background: linear-gradient(120deg, var(--color-custom-66), var(--color-custom-93));*/
/*    transform: skewX(-20deg);*/
/*    animation: shine 3s infinite;*/
/*    filter: blur(2px);*/
/*}*/

/*@keyframes shine {*/
/*    0% { left: -75%; }*/
/*    100% { left: 125%; }*/
/*}*/


/*@keyframes shine {*/
/*    0% { left: -75%; }*/
/*    100% { left: 125%; }*/
/*}*/

/*v7*/
/*.aff-structured-block > h2 {*/
/*    font-size: 1.9rem;*/
/*    font-weight: 700;*/
/*    color: var(--color-white);*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    padding: 4px 10px;*/
/*    margin-bottom: 30px;*/
/*}*/

/*.aff-structured-block > h2::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: -5%;*/
/*    right: -5%;*/
/*    height: 50%;*/
/*    background: linear-gradient(90deg, var(--color-custom-15), var(--color-custom-28));*/
/*    opacity: 0.15;*/
/*    border-radius: 6px;*/
/*    transform: translateY(-50%);*/
/*    z-index: -1;*/
/*}*/

/* v8 – Cyan Glow Sweep */
.aff-structured-block > h2,
.aff-bonuses > h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-white); /* cyan text */
    text-shadow: 0 0 10px var(--color-custom-49), 0 0 20px var(--color-custom-48);
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    padding-bottom: 8px;
    letter-spacing: 1px;
}

.aff-structured-block > h2::after,
.aff-bonuses > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-custom-34), transparent);
    animation: cyanPulse 2.5s linear infinite;
}

@keyframes cyanPulse {
    0% { transform: translateX(-100%); opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/*cstomize the latest winners sidebar v1*/
/* ===========================
   Latest Winners Widget
   =========================== */
.aff-winners-widget {
    background: linear-gradient(135deg, var(--color-custom-56), var(--color-custom-83));
    border-radius: 16px;
    /*padding: 20px;*/
    padding: 20px 10px;
    box-shadow: 0 6px 16px var(--color-custom-38);
    overflow: hidden;
}

/* Title */
/*.aff-winners-widget > h2 {*/
/*    font-size: 1.6rem;*/
/*    font-weight: 800;*/
/*    margin-bottom: 15px;*/
/*    color: var(--color-white);*/
/*    border-bottom: 2px solid var(--color-custom-91);*/
/*    padding-bottom: 6px;*/
/*}*/

/* List */
.aff-winners-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* List items */
.aff-winners-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-custom-69);
    position: relative;
    transition: background 0.3s ease, border-radius 0.3s ease;
}

.aff-winners-list li:last-child {
    border-bottom: none;
}

.aff-winners-list li:hover {
    background: var(--color-custom-68);
    border-radius: 12px;
}

/* Thumbnail */
.winner-thumb {
    width: 90px;
    height: 90px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 16px var(--color-custom-37);
    transition: transform 0.4s ease;
}

.aff-winners-list li:hover .winner-thumb {
    transform: scale(1.08);
}

/* Info wrapper */
.winner-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px; /* reserve height to avoid layout shift */
    position: relative;
}

/* Front/Back containers */
.winner-info .front,
.winner-info .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Front container */
.winner-info .front {
    display: flex;
    flex-direction: column; /* stack winner name and amount vertically */
    gap: 2px; /* small spacing between name & amount */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Front: winner name + amount */
.winner-info .front {
    opacity: 1;
    transform: translateY(0);
}

/* Back: game + CTA */
.winner-info .back {
    opacity: 0;
    transform: translateY(6px);
}

/* Winner Name */
.winner-name {
    font-weight: 700;
    color: var(--color-custom-28);
    font-size: 1rem;
    margin-bottom: 4px;
}

/* Winner Amount */
.winner-amount {
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-custom-26);
    text-shadow: 0 0 6px var(--color-custom-74);
    animation: pulseAmount 3s ease-in-out infinite alternate;
}

/* Game title */
.winner-game {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-custom-14);
    line-height: 1.3;
    word-break: break-word;
    margin-bottom: 4px;
}

/* CTA */
.winner-cta {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-custom-6);
    text-decoration: underline;
    cursor: pointer;
}

/* Pulse animation for amount */
@keyframes pulseAmount {
    0% { text-shadow: 0 0 6px var(--color-custom-73); }
    100% { text-shadow: 0 0 14px var(--color-custom-75); }
}

.aff-winners-list li a.winner-link {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    cursor: pointer; /* makes whole li clickable */
    text-decoration: none; /* optional */
    color: inherit;
}

.aff-winners-list li a.winner-link .winner-info {
    flex: 1;
}

/* ===========================
   Reshaped Bonuses Section
   =========================== */
.aff-bonuses {
    margin: 60px 0;
    padding: 0 20px;
}

/* Grid container */
.aff-bonuses__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    grid-auto-rows: minmax(250px, auto); /* flexible row height */
}

/* Bonus Cards General Styling */
.aff-bonus-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 25px var(--color-custom-35);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

/* Default: First card spans 2 rows (layout-1) */
.aff-bonuses__grid:not(.layout-2):not(.layout-4) .aff-bonus-card:nth-child(1) {
    grid-row: span 2;
}

/* Card image styling */
.aff-bonus-card img {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 100%;*/
    width: 40%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    z-index: 2;
    transform: translateX(-25%);
}

/* Card content overlay (commented backgrounds remain) */
.aff-bonus-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            linear-gradient(45deg, rgba(43, 141, 255, 0.6), rgba(255, 36, 206, 0.6)),
            linear-gradient(90deg, rgba(22, 24, 51, 0.7), rgba(50, 52, 90, 0.7));
    z-index: 1;
    border-radius: 16px;
    pointer-events: none;
}

/* Card content container */
.aff-bonus-card > *:not(img) {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Text styling */
.aff-bonus-card h3 {
    font-size: 1.5rem;
    color: var(--color-white);
    margin: 0;
    /*    */
}

.bonus-value {
    font-weight: 800;
    font-size: 2rem;
    color: var(--color-custom-13);
    text-shadow: 0 0 15px var(--color-custom-90);
    margin: 0;
    /*    */
    margin-bottom: 30px;
    color: var(--color-custom-33) !important;
    line-height: 1.4;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--color-custom-77), 0 0 16px var(--color-custom-91);
    animation: glowSubtitle 3s ease-in-out infinite alternate;
}

.bonus-expiry {
    font-size: 1rem;
    color: var(--color-custom-20);
    margin: 0;
}

/* Button styling */
.button--signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*background: linear-gradient(90deg, var(--color-custom-13), var(--color-custom-17));*/
    /*background: linear-gradient(90deg, var(--color-button11), var(--color-button12));*/
    background: var(--color-button11);
    /*color: var(--color-button13);*/
    color: #fff !important;
    text-decoration: none;
    padding: 12px 24px;
    /*border-radius: 50px;*/
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-custom-88);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    max-width: 250px;
    margin: 0 auto;
}

.button--signup:hover {
    background: var(--color-button12);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--color-custom-89);
    color: var(--color-button13);
}

.button--login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white !important;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-custom-88);
    border: 1px solid var(--color-button12) !important;
    cursor: pointer;
    font-size: 1rem;
}

.button--login:hover {
    border-color: var(--color-button14);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--color-custom-89);
}

/* Hover image scaling */
.aff-bonus-card:hover img {
    transform: scale(1.15);
}

/* Ensure content appears above overlay */
.aff-bonus-card > * {
    z-index: 3;
}

/* ===========================
   Layout Variants
   =========================== */

/* ---- Layout-2: first two stacked left, third full height right ---- */
.aff-bonuses__grid.layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
}

.aff-bonuses__grid.layout-2 .aff-bonus-card:nth-child(1) {
    grid-row: 1 / 2; /* first row */
}

.aff-bonuses__grid.layout-2 .aff-bonus-card:nth-child(2) {
    grid-row: 2 / 3; /* second row */
}

.aff-bonuses__grid.layout-2 .aff-bonus-card:nth-child(3) {
    grid-row: 1 / 3; /* spans both rows on right */
}

/* ---- Layout-3: first full width, next two half width ---- */
.aff-bonuses__grid.layout-3 {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(250px, auto);
}

.aff-bonuses__grid.layout-3 .aff-bonus-card:nth-child(1) {
    grid-column: 1 / 3; /* full width */
}
.aff-bonuses__grid.layout-3 .aff-bonus-card:nth-child(1) {
    grid-row: auto !important;
}
.aff-bonuses__grid.layout-3 .aff-bonus-card:nth-child(1) img {
    width: 20%;
}

.aff-bonuses__grid.layout-3 .aff-bonus-card:nth-child(2),
.aff-bonuses__grid.layout-3 .aff-bonus-card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
}

/* ---- Layout-4: first two half width, third full width below ---- */
.aff-bonuses__grid.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(250px, auto);
}

.aff-bonuses__grid.layout-4 .aff-bonus-card:nth-child(1),
.aff-bonuses__grid.layout-4 .aff-bonus-card:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
}

.aff-bonuses__grid.layout-4 .aff-bonus-card:nth-child(3) {
    grid-column: 1 / 3; /* full width below */
    grid-row: span 2;
}

/* Responsive design */
@media (max-width: 900px) {
    .aff-bonuses__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 15px;
    }

    .aff-bonus-card:nth-child(1),
    .aff-bonus-card:nth-child(2),
    .aff-bonus-card:nth-child(3) {
        grid-column: 1 / 3 !important;
        grid-row: span 1;
        height: auto; /* flexible height on mobile */
    }
}


.aff-main-content table {
    display: block !important;           /* Makes table respect overflow */
    width: 100% !important;              /* Optional: take full container width */
    max-width: 100% !important;          /* Prevent table from overflowing */
    overflow-x: auto !important;         /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch !important; /* Smooth scroll on iOS */
}

/*design updates - we will emrghe alter if neded*/
/* ===== Grid ===== */
.aff-top-games__grid {
    display: grid;
    gap: var(--space-md);
    justify-content: center;
}

/* 4 desktop / 3 tablet / 2 mobile */
@media (min-width: 1024px) {
    .aff-top-games__grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .aff-top-games__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .aff-top-games__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Card Base ===== */
.aff-top-game-card {
    position: relative;
    max-width: 220px;
    /*margin: 0 auto;*/
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.aff-top-game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ===== Image Wrapper ===== */
.aff-top-game__image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* square aspect ratio */
    overflow: hidden;
    border-radius: var(--radius-lg);
    /*  new custom height  */
    height: 294px;
}

.aff-top-game__image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Labels ===== */
.aff-top-game__label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    /*border-radius: var(--radius-sm);*/
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    overflow: hidden;
    border: 1px solid var(--color-button12);
}

.aff-top-game__label.originals { background: var(--color-button11); }
.aff-top-game__label.recommended { background: limegreen; }
.aff-top-game__label.newreleases { background: purple; }

/* ===== Content Overlay ===== */
.aff-top-game__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px);
}

/* Show on hover */
.aff-top-game-card:hover .aff-top-game__content {
    opacity: 1;
    transform: translateY(0);
}

/* Button inside overlay */
.aff-top-game__content h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.aff-top-game__content .button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

/* ===== Style 1 ===== Minimal hover ===== */
.aff-top-games.style-1 .aff-top-game__content {
    background: rgba(0,0,0,0.6);
}

/* ===== Style 2 ===== Full overlay square ===== */
.aff-top-games.style-2 .aff-top-game-card {
    max-width: 220px;
}

.aff-top-games.style-2 .aff-top-game__content {
    background: rgba(0,0,0,0.6);
}

/* ===== Style 3 ===== Slide-up content with contrast fix ===== */
.aff-top-games.style-3 .aff-top-game__content {
    background: rgba(255,255,255,0.95);
    color: #000;
    padding: 0.5rem;
    bottom: -100%;
    top: auto;
    transform: none;
    opacity: 1; /* always visible */
    position: absolute;
    width: 100%;
    text-align: center;
}

.aff-top-games.style-3 .aff-top-game-card:hover .aff-top-game__content {
    bottom: 0;
}

/**/
.aff-cta {
    position: relative;
}
/*.aff-cta {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);*/
/*    animation: gentlePulse 4s ease-in-out infinite,*/
/*    floatGlow 3s ease-in-out infinite alternate;*/
/*    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);*/
/*}*/

/*.aff-cta::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: -100%;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: linear-gradient(90deg,*/
/*    transparent,*/
/*    rgba(255, 0, 128, 0.04),*/
/*    transparent);*/
/*    animation: shimmer 8s infinite;*/
/*}*/

/**/
/*main {*/
/*    overflow-x: hidden !important;*/
/*}*/
/*.aff-cta {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);*/
/*    animation: gentlePulse 4s ease-in-out infinite,*/
/*    floatGlow 3s ease-in-out infinite alternate;*/
/*    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);*/
/*    margin: 6rem 0 9rem !important;*/

/*    !* Fix for layout shift - animate transform without affecting layout *!*/
/*    transform-origin: center;*/
/*    overflow-x: hidden !important;*/
/*}*/

/*.aff-cta::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: -100%;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: linear-gradient(90deg,*/
/*    transparent,*/
/*    rgba(255, 0, 128, 0.25),*/
/*    transparent);*/
/*    animation: shimmer 5s infinite;*/
/*    z-index: 1;*/
/*}*/

/*.aff-cta::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: radial-gradient(*/
/*            ellipse 80% 80% at center,*/
/*            transparent 0%,*/
/*            rgba(10, 15, 45, 0.3) 40%,*/
/*            rgba(10, 15, 45, 0.5) 100%*/
/*    );*/
/*    pointer-events: none;*/
/*    z-index: 2;*/
/*}*/

/* KEYFRAMES - Only keep the ones you're actually using */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(.975); /* Much more subtle - barely noticeable */
    }
}

@keyframes floatGlow {
    0% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 80px 20px rgba(255, 0, 128, 0.4),
        0 0 100px 40px rgba(100, 0, 255, 0.2);
    }
    100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 80px 30px rgba(255, 0, 128, 0.4),
        0 0 100px 50px rgba(0, 200, 255, 0.3);
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.aff-page-title-bar {
    background-color: #161833;
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
}

.aff-page-title-bar h1 {
    margin: 0;
    font-size: 2rem;
}

.aff-page-title-bar .breadcrumb {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #ccc;
}
.aff-page-title-bar .breadcrumb a {
    color: #ccc;
    text-decoration: none;
}
.aff-page-title-bar .breadcrumb a:hover {
    text-decoration: underline;
}

/* Flex layout for upper footer */
.site-footer__flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.site-footer__logo {
    /*flex: 1;*/
    text-align: left;
}

.site-footer__warning-text {
    flex: 2;
    text-align: center;
}

.site-footer__warning-img {
    flex: 1;
    text-align: right;
}

/* Horizontal divider */
.site-footer__divider {
    border: 0;
    height: 1px;
    background: var(--color-button12);
    opacity: 0.666;
    margin: 1rem auto 2rem;
    width:50vw;
}

/* Mandatory pages links */
.site-footer__pages {
    text-align: center;
    margin-bottom: 1rem;
}

.site-footer__pages a {
    margin: 0 1rem;
    text-decoration: none;
    color: inherit;
}

.site-footer__pages a:hover {
    text-decoration: underline;
}

/* Responsive: stack logo, text, image on smaller screens */
@media (max-width: 768px) {
    .site-footer__flex {
        flex-direction: column;
        text-align: center;
    }

    .site-footer__logo,
    .site-footer__warning-text,
    .site-footer__warning-img {
        flex: unset;
        text-align: center;
    }

    .site-footer__pages a {
        display: block;
        margin: 0.5rem 0;
    }
}

/* Hide secondary sidebar on mobile */
@media (max-width: 768px) {
    .aff-sidebar.aff-sidebar--secondary {
        display: none;
    }
}

.aff-hero__content h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: var(--aff-spacing-sm);
    color: var(--hero-text);
    text-shadow:
            0 0 18px rgba(253,189,20,0.65),  /* stronger gold glow */
            0 0 28px rgba(123,47,247,0.55);  /* stronger purple glow */
}

.aff-hero__content p {
    color: var(--hero-text-muted);
    font-size: var(--lead);
    margin-bottom: var(--aff-spacing-md);
    text-shadow: 0 0 12px rgba(0,0,0,0.8); /* deeper shadow for readability */
}
/* Neon pulse for the Hero Title */
@keyframes neonPulse {
    0% {
        text-shadow:
                0 0 12px rgba(253,189,20,0.7),   /* gold glow */
                0 0 22px rgba(123,47,247,0.55);  /* purple glow */
    }
    100% {
        text-shadow:
                0 0 22px rgba(253,189,20,0.9),   /* stronger gold */
                0 0 42px rgba(123,47,247,0.75);  /* stronger purple */
    }
}

/* Glow for the Hero Subtitle */
@keyframes glowSubtitle {
    0% {
        text-shadow:
                0 0 6px rgba(253,189,20,0.4),    /* soft gold */
                0 0 14px rgba(0,0,0,0.6);        /* subtle dark outline */
    }
    100% {
        text-shadow:
                0 0 14px rgba(253,189,20,0.65),  /* brighter gold */
                0 0 28px rgba(0,0,0,0.75);       /* deeper shadow */
    }
}

.aff-hero__bg > img {
    transform: rotate(-35deg) translateX(-66%) translateY(-32%) !important;
}
@media (max-width: 1024px) {
    .aff-hero__bg > img {
        transform: rotate(-35deg) translateX(-16%) translateY(-16%) !important;
    }
}

@media (max-width: 768px) {
    .aff-hero__bg > img {
        transform: rotate(-35deg) translateX(0) translateY(-8%) !important;
    }
}

.site-header__logo img, .site-footer__logo img {
    max-width: 120px !important;
    height: auto;
    max-height: unset;
}
.site-header {
    position: fixed !important;
}

/*faqs reflow*/
.aff-faq-list {
    /*max-width: 800px;*/
    margin: 0 auto;
}

.aff-faq-item {
    background: linear-gradient(135deg, #1a1f2e 0%, #0d1117 100%);
    border: 1px solid #2d3748;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
}

.aff-faq-item:hover {
    border-color: rgba(0, 119, 219, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 119, 219, 0.15);
}

.aff-faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: rgba(0, 119, 219, 0);
    transition: all 0.3s ease;
}

.aff-faq-item:hover::before {
    background: rgba(0, 119, 219, 0.3);
}

.aff-faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    text-align: left;
    color: #f7fafc;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.aff-faq-question:hover {
    background: rgba(0, 119, 219, 0.05);
}

.aff-faq-question::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    width: 8px;
    height: 8px;
    background: rgb(0, 119, 219);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.aff-faq-question::after {
    content: '';
    position: absolute;
    right: 1.5rem;
    width: 12px;
    height: 12px;
    border-right: 2px solid rgb(0, 119, 219);
    border-bottom: 2px solid rgb(0, 119, 219);
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.aff-faq-question[aria-expanded="true"] {
    background: rgba(0, 119, 219, 0.08);
    border-bottom: 1px solid rgba(0, 119, 219, 0.2);
}

.aff-faq-question[aria-expanded="true"]::before {
    background: #68d391;
    box-shadow: 0 0 8px rgba(104, 211, 145, 0.4);
}

.aff-faq-question[aria-expanded="true"]::after {
    transform: rotate(225deg);
    margin-top: -4px;
    border-color: #68d391;
}

.aff-faq-answer {
    background: rgba(26, 32, 44, 0.8);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.aff-faq-answer[style*="display: block"] {
    padding: 0 1.5rem;
    max-height: 500px;
}

.aff-faq-answer p {
    color: #e2e8f0;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
    padding: 1.5rem 0;
    border-left: 2px solid rgba(0, 119, 219, 0.3);
    padding-left: 1.5rem;
    position: relative;
}

.aff-faq-answer p::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 1.5rem;
    width: 2px;
    height: calc(100% - 3rem);
    background: linear-gradient(to bottom,
    rgba(0, 119, 219, 0.8) 0%,
    rgba(0, 119, 219, 0.4) 50%,
    rgba(0, 119, 219, 0.1) 100%);
}

/* Smooth content animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aff-faq-answer[style*="display: block"] p {
    animation: fadeInUp 0.4s ease;
}

/* Active state for the item when expanded */
.aff-faq-item.active {
    border-color: rgba(0, 119, 219, 0.6);
    box-shadow: 0 6px 20px rgba(0, 119, 219, 0.2);
}

.aff-faq-item.active::before {
    background: rgb(0, 119, 219);
}

/* Responsive design */
@media (max-width: 768px) {
    .aff-faq-question {
        padding: 1.2rem 1.2rem 1.2rem 2.5rem;
        font-size: 1rem;
    }

    .aff-faq-question::before {
        left: 1.2rem;
    }

    .aff-faq-question::after {
        right: 1.2rem;
    }

    .aff-faq-answer[style*="display: block"] {
        padding: 0 1.2rem;
    }

    .aff-faq-answer p {
        padding-left: 1.2rem;
    }
}

/* Focus states for accessibility */
.aff-faq-question:focus {
    outline: 2px solid rgba(0, 119, 219, 0.5);
    outline-offset: 2px;
}

.aff-faq {
    max-width: unset !important;
    margin-top: unset !important;
}

/* Clean CTA Section - Dark Theme */
.aff-cta {
    background: linear-gradient(135deg, #0a0f2b 0%, #1a1f3b 100%);
    color: #ffffff;
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    margin: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    isolation: isolate;
    box-shadow:
            0 25px 80px rgba(100, 150, 255, 0.25),
            0 15px 40px rgba(70, 130, 255, 0.2);
    animation: sectionFloat 6s ease-in-out infinite;
}

/* Animated Background */
.aff-cta::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background: url('https://rainbet.co.nz/wp-content/uploads/2025/09/imgi_73_image.webp') no-repeat 50% / cover;
    z-index: 1;
    animation: smoothBackground 20s ease-in-out infinite;
    filter: brightness(0.4) contrast(1.1);
}

/* Blue Overlay */
.aff-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(10, 25, 47, 0.85) 0%,
    rgba(23, 42, 70, 0.75) 50%,
    rgba(30, 60, 114, 0.65) 100%);
    z-index: 2;
}

.aff-cta > * {
    position: relative;
    z-index: 3;
}

.aff-cta__container {
    position: relative;
    z-index: 3;
    padding: 3rem 2rem;
}

/* Title */
.aff-cta__title {
    font-size: 3.5rem;
    margin-bottom: var(--space-md);
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a8d1ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(0, 119, 219, 0.3);
}

.aff-cta__text {
    font-size: 1.4rem;
    margin-bottom: var(--space-lg);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    opacity: 0.9;
    line-height: 1.6;
    color: #e6f3ff;
}

/* Button */
.aff-cta .button--cta {
    background: linear-gradient(135deg, #0077db 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1.5rem 3.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.3rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 8px 30px rgba(0, 119, 219, 0.4);
    animation: floatButton 4s ease-in-out infinite;
}

.aff-cta .button--cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.aff-cta .button--cta:hover {
    background: linear-gradient(135deg, #0088ff 0%, #0066cc 100%);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 119, 219, 0.6);
}

.aff-cta .button--cta:hover::before {
    left: 100%;
}

/* Animations */
@keyframes smoothBackground {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes floatButton {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes sectionFloat {
    0%, 100% {
        box-shadow:
                0 25px 80px rgba(100, 150, 255, 0.25),
                0 15px 40px rgba(70, 130, 255, 0.2);
    }
    50% {
        box-shadow:
                0 35px 100px rgba(100, 180, 255, 0.35),
                0 20px 60px rgba(70, 150, 255, 0.25);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .aff-cta__title { font-size: 2.5rem; }
    .aff-cta__text { font-size: 1.2rem; }
    .aff-cta .button--cta {
        padding: 1.25rem 2.5rem;
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .aff-cta__title { font-size: 2rem; }
    .aff-cta__text { font-size: 1.1rem; }
    .aff-cta .button--cta {
        padding: 1rem 2rem;
        font-size: 1rem !important;
    }
}

/*3 boxes under hero*/
/* Feature Boxes Section */
.feature-boxes-section {
    padding: 0;
    margin-top: -180px;
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
}

.feature-boxes-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1320px;
    margin: 0 auto;
}

/* Individual Feature Box */
.feature-box {
    background: linear-gradient(135deg, #0a1f3d 0%, #1a2f5b 100%);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow:
            0 20px 40px rgba(0, 119, 219, 0.15),
            0 8px 25px rgba(0, 119, 219, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 119, 219, 0.2);
    transition: all 0.3s ease;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow:
            0 25px 50px rgba(0, 119, 219, 0.25),
            0 12px 30px rgba(0, 119, 219, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Background Image Icon */
.feature-bg-icon {
    position: absolute;
    bottom: -20px;
    right: -20px;
    /*opacity: 0.3;*/
    z-index: 1;
    /*filter: brightness(0) invert(1) opacity(0.3);*/
}

.feature-bg-icon img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

/* Content Styling */
.feature-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.3;
    background: linear-gradient(135deg, #ffffff 0%, #a8d1ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-text {
    color: #e6f3ff;
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    opacity: 0.9;
    flex: 1;
}

/* Button Styling */
.feature-button {
    background: linear-gradient(135deg, #0077db 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 119, 219, 0.3);
    position: relative;
    overflow: hidden;
    overflow: hidden;
    z-index: 2;
    max-width: 66.6%
}

.feature-button:hover {
    background: linear-gradient(135deg, #0088ff 0%, #0066cc 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 119, 219, 0.4);
    color: #ffffff;
}

.feature-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.feature-button:hover::before {
    left: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .feature-boxes-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .feature-boxes-section {
        margin-top: -120px;
        padding: 0 1rem;
    }

    .feature-boxes-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-box {
        padding: 2rem 1.5rem;
        min-height: 250px;
    }

    .feature-title {
        font-size: 1.3rem;
    }

    .feature-text {
        font-size: 1rem;
    }

    .feature-bg-icon {
        bottom: -15px;
        right: -15px;
    }

    .feature-bg-icon img {
        width: 100px;
        height: 100px;
    }
}

/* Test Wrapper Classes */
.feature-boxes-container.variant-1 .feature-box {
    background: rgba(10, 25, 47, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 119, 219, 0.3);
}

.feature-boxes-container.variant-1 .feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(0, 119, 219, 0.2) 0%,
    rgba(30, 60, 114, 0.1) 100%);
    z-index: 1;
    border-radius: 20px;
}

.feature-boxes-container.variant-2 .feature-box {
    background: linear-gradient(-45deg, #0a1f3d, #1a2f5b, #0f2b50, #16315f);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

.feature-boxes-container.variant-3 .feature-box {
    background:
            radial-gradient(circle at 20% 80%, rgba(0, 119, 219, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(30, 60, 114, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(10, 25, 47, 0.1) 0%, transparent 50%),
            linear-gradient(135deg, #0a1f3d 0%, #1a2f5b 100%);
}

.feature-boxes-container.variant-3 .feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    z-index: 1;
    border-radius: 20px;
}

.feature-boxes-container.variant-4 .feature-box {
    background: linear-gradient(135deg, #0a1f3d 0%, #1a2f5b 100%);
    padding: 3px;
}

.feature-boxes-container.variant-4 .feature-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg,
    #0077db,
    #00a8ff,
    #0077db);
    border-radius: 22px;
    z-index: -1;
    opacity: 0.7;
    filter: blur(10px);
}

.feature-boxes-container.variant-4 .feature-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a1f3d 0%, #1a2f5b 100%);
    border-radius: 20px;
    z-index: 1;
}

/* Required Animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Base styles for all variants (keep these!) */
.feature-boxes-container .feature-box {
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    transition: all 0.3s ease;
}

.feature-boxes-container .feature-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feature-boxes-container.variant-1 .feature-content,
.feature-boxes-container.variant-3 .feature-content,
.feature-boxes-container.variant-4 .feature-content {
    z-index: 3; /* Higher z-index for variants with pseudo-elements */
}

/*scroll to top*/
/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-accent) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 10px;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary) 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
}

/* Pulse animation */
.scroll-to-top.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
    70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.scroll-to-top:hover.pulse {
    animation: pulse 2s infinite;
}

/* Fixed CTA Button */
.fixed-cta {
    position: fixed;
    bottom: 30px;
    /*left: 30px;*/
    left: 0;
    right: 0; /* Stretch to both edges */
    margin: 0 auto; /* Center horizontally */
    /**/
    width: 220px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-accent) 100%);
    color: #ffffff !important;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    animation: floatButton 4s ease-in-out infinite;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: fixed;
}

/* Shine effect */
.fixed-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.fixed-cta:hover {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary) 100%);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    color: #ffffff;
}

.fixed-cta:hover::before {
    left: 100%;
}

/* Floating animation */
@keyframes floatButton {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Responsive */
@media (max-width: 768px) {
    .fixed-cta { width: 200px; bottom: 20px;   left: 0;
        right: 0; /* Stretch to both edges */
        margin: 0 auto; /* Center horizontally */ font-size: 1rem !important; }
    .scroll-to-top { bottom: 20px; right: 20px; }
}

@media (max-width: 480px) {
    .fixed-cta { width: 180px; bottom: 15px;  left: 0;
        right: 0; /* Stretch to both edges */
        margin: 0 auto; /* Center horizontally */ font-size: 0.75rem !important; padding: 0.8rem 1.2rem; }
    .scroll-to-top { bottom: 15px; right: 15px; width: 45px; height: 45px; font-size: 18px; }
}

/* Menu and navigation */
#site-navigation { display: flex; justify-content: center; }
#primary-menu a.button { width: 100%; }


a.button,
a.feature-button {
    color: #fefefe !important;
}
a.button:visited,
a.feature-button:visited {
    color: #fff !important;
}

p.aff-hero__subtitle {
    margin-block-start: 0 !important;
    margin: 1rem 0;
}

/* Best balance of aesthetics & accessibility */
.aff-review a,
footer a {
    color: #00d1ff;
    text-decoration: none;
    font-weight: 500;
}

.aff-review a:hover,
.aff-review a:focus,
.aff-review a:active,
footer a:hover,
footer a:focus,
footer a:active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.cta-button-bonus {
    color: #fff !important;
}


:root {
    --color-primary: #0077db;
    --color-secondary: #1f99ff;
    --color-primary-rgb: 0,119,219;
}

/* Footer Widget Columns - DARK THEME */
.site-footer__widgets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
    /*align-items: start;*/
    align-items: stretch; /* Just change this one line */
}

.site-footer__widget-column {
    display: flex;
    flex-direction: column;
    /**/
    height: 100%;
}

.site-footer__logo {
    margin-bottom: 20px !important;
}

.site-footer__logo img {
    max-width: 180px;
    height: auto;
    filter: brightness(0) invert(1); /* Makes logo white for dark background */
}

/* Widget Title Styling - DARK */
.widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff; /* Use your primary color */
    margin-bottom: 1.2rem;
    /*padding-bottom: 0.5rem;*/
    padding: 20px 0;
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Menu Styling - DARK */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin-bottom: 0.6rem;
    position: relative;
}

.menu li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.4rem 0;
    display: block;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    padding-left: 0.8rem;
}

.menu li a:hover {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.05);
    padding-left: 1rem;
}

/* Current page highlight - DARK */
.menu li.current-menu-item a {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

/* Footer Warning Text - DARK */
.site-footer__warning-text {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.site-footer__warning-text p {
    font-size: 0.9rem !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.site-footer__warning-text a {
    color: var(--color-primary); /* Softer red for dark theme */
    font-weight: 600;
    text-decoration: none;
}

.site-footer__warning-text a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Footer Bottom - DARK */
.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1rem;
}

.site-footer__copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__payment-methods {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__payment-methods span {
    margin: 0 0.3rem;
}

/* Horizontal Divider - DARK */
.site-footer__divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    margin: 2rem 0;
}

/* Modern card-like columns - DARK THEME */
.site-footer__widget-column {
    background: linear-gradient(135deg, rgba(22, 24, 51, 0.6) 0%, rgba(10, 10, 20, 0.8) 100%);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.site-footer__widget-column:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Subtle hover effects */
.site-footer__widget-column {
    transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .site-footer__widgets {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .site-footer__widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .site-footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .site-footer__widgets {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .site-footer__logo img {
        max-width: 150px;
    }

    .menu li a {
        font-size: 1rem;
    }

    .site-footer__widget-column {
        padding: 1rem;
    }
}

/* Optional: Add glow effect on hover for extra dark theme flair */
.site-footer__widget-column:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--color-primary-rgb), 0.25);
}

.site-footer__warning-text,
.site-footer__divider {
    max-width: 1320px;
    margin: 0 auto;
}

.aff-main-wrapper.aff-main-wrapper--section2 {
    margin-bottom: 0 !important;
    padding-bottom: 3.15rem !important;
}

footer {
    border-top: 2px solid rgba(var(--color-primary-rgb), 0.75);
    padding: 3.15rem 1.25rem !important;
}