/*
Theme Name: LuckyAff
Theme URI: https://luckyaff.com
Author: Your Name
Author URI: https://yoursite.com
Description: High-converting casino affiliate theme optimized for SEO and Core Web Vitals. Modern design, fast performance, rich Schema.org markup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luckyaff
Tags: casino, affiliate, gambling, betting, seo-optimized, gutenberg, block-editor

LuckyAff - Premium Casino Affiliate Theme
Built for maximum conversions and SEO performance.
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Colors - Modern Dark Theme with Neon Accents */
    --la-primary: #6366f1;          /* Indigo */
    --la-primary-hover: #4f46e5;
    --la-primary-light: #818cf8;
    --la-secondary: #10b981;        /* Emerald - for CTAs */
    --la-secondary-hover: #059669;
    --la-accent: #f59e0b;           /* Amber - for ratings */
    --la-accent-hover: #d97706;

    /* Backgrounds */
    --la-bg-dark: #0f0f23;          /* Deep dark blue */
    --la-bg-card: #1a1a2e;          /* Card background */
    --la-bg-card-hover: #25253a;
    --la-bg-light: #16213e;         /* Lighter sections */
    --la-bg-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);

    /* Text */
    --la-text-primary: #f8fafc;
    --la-text-secondary: #94a3b8;
    --la-text-muted: #64748b;

    /* Borders */
    --la-border: #2d2d44;
    --la-border-light: #3d3d5c;

    /* Status Colors */
    --la-success: #22c55e;
    --la-warning: #f59e0b;
    --la-error: #ef4444;
    --la-info: #3b82f6;

    /* Shadows */
    --la-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --la-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --la-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --la-shadow-glow: 0 0 20px rgb(99 102 241 / 0.3);

    /* Spacing */
    --la-space-xs: 0.25rem;
    --la-space-sm: 0.5rem;
    --la-space-md: 1rem;
    --la-space-lg: 1.5rem;
    --la-space-xl: 2rem;
    --la-space-2xl: 3rem;
    --la-space-3xl: 4rem;

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

    /* Typography */
    --la-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --la-font-display: 'Plus Jakarta Sans', var(--la-font-sans);

    /* Font Sizes */
    --la-text-xs: 0.75rem;
    --la-text-sm: 0.875rem;
    --la-text-base: 1rem;
    --la-text-lg: 1.125rem;
    --la-text-xl: 1.25rem;
    --la-text-2xl: 1.5rem;
    --la-text-3xl: 1.875rem;
    --la-text-4xl: 2.25rem;
    --la-text-5xl: 3rem;

    /* Line Heights */
    --la-leading-tight: 1.25;
    --la-leading-normal: 1.5;
    --la-leading-relaxed: 1.75;

    /* Transitions */
    --la-transition-fast: 150ms ease;
    --la-transition-base: 250ms ease;
    --la-transition-slow: 350ms ease;

    /* Z-index Scale */
    --la-z-dropdown: 100;
    --la-z-sticky: 200;
    --la-z-modal: 300;
    --la-z-tooltip: 400;

    /* Container */
    --la-container-max: 1280px;
    --la-container-narrow: 960px;
}

/* Light Theme Override */
[data-theme="light"] {
    --la-bg-dark: #f8fafc;
    --la-bg-card: #ffffff;
    --la-bg-card-hover: #f1f5f9;
    --la-bg-light: #e2e8f0;
    --la-text-primary: #0f172a;
    --la-text-secondary: #475569;
    --la-text-muted: #64748b;
    --la-border: #e2e8f0;
    --la-border-light: #cbd5e1;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--la-font-sans);
    font-size: var(--la-text-base);
    line-height: var(--la-leading-normal);
    color: var(--la-text-primary);
    background: var(--la-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--la-font-display);
    font-weight: 700;
    line-height: var(--la-leading-tight);
    margin: 0 0 var(--la-space-md);
    color: var(--la-text-primary);
}

h1 { font-size: var(--la-text-4xl); }
h2 { font-size: var(--la-text-3xl); }
h3 { font-size: var(--la-text-2xl); }
h4 { font-size: var(--la-text-xl); }
h5 { font-size: var(--la-text-lg); }
h6 { font-size: var(--la-text-base); }

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

a {
    color: #f0f0f0ab;
    text-decoration: none;
    transition: color var(--la-transition-fast);
}

a:hover {
    color: var(--la-primary);
}

/* ==========================================================================
   Content Feature/Highlight Paragraphs (Quote-style with left border)
   ========================================================================== */

/* Feature title paragraph (contains only strong) */
.la-content p:has(> strong:first-child:last-child),
.entry-content p:has(> strong:first-child:last-child) {
    margin-top: var(--la-space-lg);
    margin-bottom: 0;
    padding: var(--la-space-sm) var(--la-space-md);
    padding-bottom: 0;
    border-left: 3px solid var(--la-primary);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
    line-height: var(--la-leading-normal);
}

.la-content p:has(> strong:first-child:last-child) strong,
.entry-content p:has(> strong:first-child:last-child) strong {
    color: #fff;
    font-weight: 700;
}

/* Description paragraph following feature title - continues the quote block */
.la-content p:has(> strong:first-child:last-child) + p,
.entry-content p:has(> strong:first-child:last-child) + p {
    margin-top: 0;
    margin-bottom: var(--la-space-lg);
    padding: var(--la-space-sm) var(--la-space-md);
    padding-top: var(--la-space-xs);
    border-left: 3px solid var(--la-primary);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: var(--la-leading-relaxed);
}

/* First feature in content */
.la-content p:has(> strong:first-child:last-child):first-child,
.entry-content p:has(> strong:first-child:last-child):first-child {
    margin-top: 0;
}

/* ==========================================================================
   WordPress Block Lists
   ========================================================================== */

.wp-block-list {
    list-style: none;
    padding: 0;
    margin: var(--la-space-lg) 0;
}

.wp-block-list li {
    position: relative;
    align-items: flex-start;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) 0;
    padding-left: calc(var(--la-space-lg) + 12px);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: var(--la-leading-relaxed);
    border-bottom: 1px solid rgb(255 255 255 / 27%);
}

.wp-block-list li:last-child {
    border-bottom: none;
}

/* Custom bullet with gradient */
.wp-block-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--la-space-sm) + 6px);
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-primary-light) 100%);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* Hover effect */
.wp-block-list li:hover {
    color: var(--la-text-primary);
}

.wp-block-list li:hover::before {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}

/* Ordered lists - numbered style */
ol.wp-block-list {
    counter-reset: list-counter;
}

ol.wp-block-list li {
    padding-left: calc(var(--la-space-lg) + 20px);
}

ol.wp-block-list li::before {
    content: counter(list-counter);
    counter-increment: list-counter;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--la-text-xs);
    font-weight: 700;
    color: #fff;
    top: var(--la-space-sm);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

ol.wp-block-list li:hover::before {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
}

/* Nested lists */
.wp-block-list .wp-block-list {
    margin: var(--la-space-sm) 0;
    margin-left: var(--la-space-md);
}

.wp-block-list .wp-block-list li::before {
    width: 6px;
    height: 6px;
    background: var(--la-primary-light);
    box-shadow: none;
}

/* Alternative style - checkmark lists */
.wp-block-list.is-style-checkmark li::before,
.la-list--check li::before {
    content: '✓';
    width: 20px;
    height: 20px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--la-secondary);
    top: calc(var(--la-space-sm) + 2px);
    box-shadow: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .wp-block-list li {
        padding: var(--la-space-xs) 0;
        padding-left: calc(var(--la-space-md) + 12px);
        font-size: var(--la-text-sm);
    }

    .wp-block-list li::before {
        top: calc(var(--la-space-xs) + 6px);
    }

    ol.wp-block-list li {
        padding-left: calc(var(--la-space-md) + 20px);
    }

    ol.wp-block-list li::before {
        top: var(--la-space-xs);
        width: 22px;
        height: 22px;
    }
}

/* ==========================================================================
   WordPress Block Tables
   ========================================================================== */

.wp-block-table {
    margin: var(--la-space-xl) 0;
}

.wp-block-table table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    table-layout: fixed;
}

/* Reset any inherited borders */
.wp-block-table table,
.wp-block-table tbody,
.wp-block-table tr,
.wp-block-table td,
.wp-block-table th {
    border: none;
}

/* Table header row (first row with strong tags) */
.wp-block-table tbody tr:first-child td {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.08) 100%);
    font-weight: 700;
    font-size: var(--la-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--la-primary);
}

.wp-block-table tbody tr:first-child td,
.wp-block-table tbody tr:first-child td strong {
    color: #fff;
}

/* Regular cells */
.wp-block-table td,
.wp-block-table th {
    padding: var(--la-space-md) var(--la-space-lg);
    text-align: left;
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: 1.6;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wp-block-table th {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.08) 100%);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--la-text-xs);
}

/* Last row - no border */
.wp-block-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover effect */
.wp-block-table tbody tr:not(:first-child):hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* Strong text in cells */
.wp-block-table td strong {
    color: var(--la-text-primary);
    font-weight: 600;
}

/* Links in tables */
.wp-block-table td a {
    color: var(--la-primary);
    text-decoration: none;
    transition: all var(--la-transition-fast);
}

.wp-block-table td a:hover {
    color: var(--la-primary-light);
}

/* Figcaption */
.wp-block-table figcaption {
    margin-top: var(--la-space-sm);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-align: center;
}

/* Mobile responsive - stack vertically */
@media (max-width: 600px) {
    .wp-block-table {
        margin: var(--la-space-lg) 0;
    }

    .wp-block-table table {
        display: block !important;
        border: none;
        background: transparent;
    }

    .wp-block-table tbody {
        display: block;
    }

    .wp-block-table tr {
        display: block;
        background: var(--la-bg-card);
        border: 1px solid var(--la-border);
        border-radius: var(--la-radius-md);
        margin-bottom: var(--la-space-sm);
        overflow: hidden;
    }

    .wp-block-table tbody tr:first-child {
        display: none; /* Hide header row on mobile */
    }

    .wp-block-table td {
        display: block;
        padding: var(--la-space-sm) var(--la-space-md);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: var(--la-text-sm);
    }

    .wp-block-table tr td:last-child {
        border-bottom: none;
    }

    /* Make each cell look like a card item */
    .wp-block-table tbody tr:not(:first-child) td:first-child {
        background: rgba(16, 185, 129, 0.08);
        border-left: 3px solid var(--la-secondary);
    }

    .wp-block-table tbody tr:not(:first-child) td:last-child {
        background: rgba(239, 68, 68, 0.08);
        border-left: 3px solid #ef4444;
    }
}

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

.la-container {
    width: 100%;
    max-width: var(--la-container-max);
    margin: 0 auto;
    padding: 0 var(--la-space-lg);
}

.la-container--narrow {
    max-width: var(--la-container-narrow);
}

.la-section {
    padding: var(--la-space-2xl) 0;
}

.la-grid {
    display: grid;
    gap: var(--la-space-lg);
}

.la-grid--2 { grid-template-columns: repeat(2, 1fr); }
.la-grid--3 { grid-template-columns: repeat(3, 1fr); }
.la-grid--4 { grid-template-columns: repeat(4, 1fr); }

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

/* ==========================================================================
   Components - Cards
   ========================================================================== */

.la-card {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    transition: all var(--la-transition-base);
}
 
.la-card:hover {
    background: var(--la-bg-card-hover);
    border-color: var(--la-border-light);
    box-shadow: var(--la-shadow-lg);
}

.la-card--featured {
    border-color: var(--la-primary);
    box-shadow: var(--la-shadow-glow);
}

/* ==========================================================================
   Components - Buttons
   ========================================================================== */

.la-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-lg);
    font-family: var(--la-font-sans);
    font-size: var(--la-text-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--la-radius-md);
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-btn--primary {
    background: var(--la-secondary);
    color: #fff;
}

.la-btn--primary:hover {
    background: var(--la-secondary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(16 185 129 / 0.4);
}

.la-btn--secondary {
    background: var(--la-primary);
    color: #fff;
}

.la-btn--secondary:hover {
    background: var(--la-primary-hover);
}

.la-btn--outline {
    background: transparent;
    border: 2px solid var(--la-border-light);
    color: var(--la-text-primary);
}

.la-btn--outline:hover {
    border-color: var(--la-primary);
    color: var(--la-primary);
}

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

.la-btn--sm {
    padding: var(--la-space-xs) var(--la-space-md);
    font-size: var(--la-text-xs);
    white-space: nowrap;
}

.la-btn--block {
    width: 100%;
}

/* CTA Button - High Conversion */
.la-cta {
    position: relative;
    background: linear-gradient(135deg, var(--la-secondary) 0%, #34d399 100%);
    color: #fff;
    font-weight: 700;
    padding: var(--la-space-md) var(--la-space-xl);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
}

.la-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.5s;
}

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

.la-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgb(16 185 129 / 0.5);
}

/* Button mode - reset button appearance to match links */
button.la-cta,
button.la-affiliate-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.la-cta:focus,
button.la-affiliate-btn:focus {
    outline: 2px solid var(--la-secondary);
    outline-offset: 2px;
}

/* Loading state for affiliate buttons */
.la-affiliate-btn.is-loading {
    pointer-events: none;
    position: relative;
}

/* For text-based buttons - reduce opacity */
.la-affiliate-btn.is-loading .la-affiliate-loading {
    opacity: 0.7;
}

/* For image-based buttons (logos) - show spinner overlay */
.la-affiliate-btn.is-loading img {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.la-affiliate-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--la-primary, #3b82f6);
    border-radius: 50%;
    animation: la-spin 0.8s linear infinite;
}

@keyframes la-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Div-based affiliate link wrapper (for logos, etc.) */
div.la-affiliate-btn {
    cursor: pointer;
}

/* ==========================================================================
   Components - Rating Stars
   ========================================================================== */

.la-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
}

.la-rating__stars {
    display: flex;
    gap: 2px;
}

.la-rating__star {
    width: 16px;
    height: 16px;
    color: var(--la-accent);
}

.la-rating__star--empty {
    color: var(--la-border);
}

.la-rating__value {
    font-weight: 700;
    color: var(--la-text-primary);
    margin-left: var(--la-space-xs);
}

/* ==========================================================================
   Components - Casino Card
   ========================================================================== */

.la-casino-card {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr 160px;
    gap: var(--la-space-xl);
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(49, 46, 129, 0.9) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--la-radius-xl);
    padding: var(--la-space-lg) var(--la-space-xl);
    transition: all var(--la-transition-base);
    overflow: visible;
}

.la-casino-card:hover {
    border-color: var(--la-primary);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
    transform: translateY(-2px);
}

.la-casino-card--featured {
    border: 2px solid var(--la-primary);
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.98) 0%, rgba(99, 102, 241, 0.15) 100%);
}

/* Left section: Rank + Logo Block */
.la-casino-card__left {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-casino-card__rank {
    position: absolute;
    top: -10px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: linear-gradient(135deg, var(--la-accent), #d97706);
    color: #1e1b4b;
    font-size: var(--la-text-base);
    font-weight: 900;
    border-radius: var(--la-radius-md);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    z-index: 2;
}

.la-casino-card__logo-block {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-casino-card__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--la-radius-lg);
    padding: 8px;
    flex-shrink: 0;
}

.la-casino-card__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--la-radius-md);
}

.la-casino-card__logo-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-casino-card__name {
    margin: 0;
    font-size: var(--la-text-base);
    font-weight: 700;
    line-height: 1.3;
}

.la-casino-card__name a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.la-casino-card__name a:hover {
    color: var(--la-accent);
}

.la-casino-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.la-casino-card__rating .la-rating__star {
    width: 14px;
    height: 14px;
}

.la-casino-card__rating .la-rating__value {
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: #fff;
}

.la-casino-card__content {
    flex: 1;
    text-align: center;
}

/* Center section */
.la-casino-card__center {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-casino-card__bonus-main {
    padding: var(--la-space-sm) var(--la-space-md);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: var(--la-radius-md);
    border-left: 3px solid var(--la-primary);
}

.la-casino-card__bonus-headline {
    font-family: var(--la-font-display);
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}

.la-casino-card__bonus-headline + .la-casino-card__bonus-grid {
    margin-top: var(--la-space-sm);
    padding-top: var(--la-space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.la-casino-card__bonus-grid {
    display: flex;
    gap: var(--la-space-xl);
}

.la-casino-card__bonus-item {
    display: flex;
    flex-direction: column;
}

.la-casino-card__bonus-value {
    font-family: var(--la-font-display);
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: var(--la-accent);
}

.la-casino-card__bonus-label {
    font-size: var(--la-text-xs);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.la-casino-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
}

.la-casino-card__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--la-text-xs);
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--la-radius-sm);
}

.la-casino-card__stat svg {
    color: var(--la-primary-light);
    flex-shrink: 0;
}

.la-casino-card__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--la-primary-light);
    flex-shrink: 0;
}

.la-casino-card__stat--new {
    color: var(--la-success);
    background: rgba(16, 185, 129, 0.1);
}

.la-casino-card__stat--new svg {
    color: var(--la-success);
}

.la-casino-card__stat--highlight {
    color: var(--la-primary-light);
    background: rgba(99, 102, 241, 0.1);
}

.la-casino-card__stat--highlight svg {
    color: var(--la-primary-light);
}

.la-casino-card__payments {
    display: flex;
    align-items: center;
    gap: 6px;
}

.la-casino-card__payment {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--la-radius-sm);
    padding: 3px 5px;
}

.la-casino-card__payment svg,
.la-casino-card__payment img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-casino-card__payment--more {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    width: auto;
    padding: 3px 8px;
}

/* Right section */
.la-casino-card__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-casino-card__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.la-casino-card__code-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-casino-card__code-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px dashed rgba(251, 191, 36, 0.5);
    border-radius: var(--la-radius-sm);
    font-size: var(--la-text-sm);
    font-weight: 700;
    font-family: monospace;
    color: var(--la-accent);
    cursor: pointer;
    transition: all 0.2s ease;
}

.la-casino-card__code-value:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: var(--la-accent);
}

.la-casino-card__code-value svg {
    color: var(--la-accent);
    opacity: 0.7;
}

.la-casino-card__cta {
    width: 100%;
    padding: 12px 20px;
    font-weight: 700;
}

.la-casino-card__review {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.la-casino-card__review:hover {
    color: var(--la-accent);
}

@media (max-width: 992px) {
    .la-casino-card {
        grid-template-columns: 180px 1fr 140px;
        gap: var(--la-space-lg);
        padding: var(--la-space-lg);
    }
}

@media (max-width: 768px) {
    .la-casino-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--la-space-md);
        padding: var(--la-space-xl) var(--la-space-lg) var(--la-space-lg);
    }

    .la-casino-card__rank {
        left: 50%;
        transform: translateX(-50%);
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: var(--la-text-sm);
        top: -8px;
    }

    .la-casino-card__left {
        justify-content: center;
    }

    .la-casino-card__logo-block {
        flex-direction: column;
        text-align: center;
    }

    .la-casino-card__bonus-main,
    .la-casino-card__bonus-grid {
        border-left: none;
        border-top: 3px solid var(--la-primary);
    }

    .la-casino-card__bonus-grid,
    .la-casino-card__stats,
    .la-casino-card__payments {
        justify-content: center;
    }

    .la-casino-card__right {
        width: 100%;
    }
}

/* ==========================================================================
   Components - Casino Table
   ========================================================================== */

.la-casino-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--la-space-sm);
}

.la-casino-table__row {
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    transition: all var(--la-transition-base);
}

.la-casino-table__row:hover {
    background: var(--la-bg-card-hover);
    transform: scale(1.01);
}

.la-casino-table__cell {
    padding: var(--la-space-md) var(--la-space-lg);
    vertical-align: middle;
}

.la-casino-table__cell:first-child {
    border-radius: var(--la-radius-lg) 0 0 var(--la-radius-lg);
}

.la-casino-table__cell:last-child {
    border-radius: 0 var(--la-radius-lg) var(--la-radius-lg) 0;
}

/* ==========================================================================
   Components - Filters
   ========================================================================== */

.la-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
    padding: var(--la-space-lg);
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    margin-bottom: var(--la-space-xl);
}

.la-filter {
    position: relative;
}

.la-filter__label {
    display: block;
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--la-space-xs);
}

.la-filter__select {
    appearance: none;
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    padding: var(--la-space-sm) var(--la-space-xl) var(--la-space-sm) var(--la-space-md);
    font-size: var(--la-text-sm);
    color: var(--la-text-primary);
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-filter__select:hover,
.la-filter__select:focus {
    border-color: var(--la-primary);
    outline: none;
}

/* ==========================================================================
   Components - Modern Filters (Archive Page)
   ========================================================================== */

.la-modern-filters {
    padding: var(--la-space-md) 0;
    background: var(--la-bg-light);
    border-bottom: 1px solid var(--la-border);
    position: sticky;
    top: 70px;
    z-index: 100;
}

.la-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--la-space-md);
}

.la-filter-bar__active {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
    flex: 0 0 auto;
}

.la-filter-bar__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
    flex: 1;
}

.la-filter-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    margin-left: auto;
}

/* Filter Dropdown */
.la-filter-dropdown {
    position: relative;
}

.la-filter-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-text-primary);
    cursor: pointer;
    transition: all var(--la-transition-fast);
    white-space: nowrap;
}

.la-filter-dropdown__trigger:hover {
    border-color: var(--la-primary);
    background: var(--la-bg-light);
}

.la-filter-dropdown.is-open .la-filter-dropdown__trigger {
    border-color: var(--la-primary);
    background: var(--la-primary);
    color: white;
}

.la-filter-dropdown__trigger svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.la-filter-dropdown__chevron {
    transition: transform var(--la-transition-fast);
}

.la-filter-dropdown.is-open .la-filter-dropdown__chevron {
    transform: rotate(180deg);
}

.la-filter-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--la-space-xs));
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--la-transition-fast);
    z-index: 110;
}

.la-filter-dropdown.is-open .la-filter-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.la-filter-dropdown__options {
    padding: var(--la-space-sm);
}

/* Filter Option (Radio) */
.la-filter-option {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-md);
    border-radius: var(--la-radius-md);
    cursor: pointer;
    transition: background var(--la-transition-fast);
    font-size: var(--la-text-sm);
}

.la-filter-option:hover {
    background: var(--la-bg-light);
}

.la-filter-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.la-filter-option__check {
    width: 18px;
    height: 18px;
    border: 2px solid var(--la-border);
    border-radius: var(--la-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--la-transition-fast);
}

.la-filter-option__check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--la-primary);
    border-radius: var(--la-radius-full);
    transform: scale(0);
    transition: transform var(--la-transition-fast);
}

.la-filter-option input[type="radio"]:checked + .la-filter-option__check {
    border-color: var(--la-primary);
}

.la-filter-option input[type="radio"]:checked + .la-filter-option__check::after {
    transform: scale(1);
}

.la-filter-option__count {
    margin-left: auto;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    background: var(--la-bg-light);
    padding: 2px 8px;
    border-radius: var(--la-radius-full);
}

/* Active Filter Pills */
.la-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    background: var(--la-primary);
    color: white;
    border: none;
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-filter-pill:hover {
    background: var(--la-primary-dark);
}

.la-filter-pill svg {
    opacity: 0.8;
}

/* View Switcher */
.la-view-switcher {
    display: flex;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    padding: 2px;
}

.la-view-switcher__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--la-radius-sm);
    color: var(--la-text-muted);
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-view-switcher__btn:hover {
    color: var(--la-text-primary);
}

.la-view-switcher__btn.is-active {
    background: var(--la-primary);
    color: white;
}

/* Reset Button */
.la-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-sm) var(--la-space-md);
    background: transparent;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-filter-reset:hover {
    border-color: var(--la-error);
    color: var(--la-error);
}

/* Loading Overlay */
.la-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgb(15 15 35 / 68%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--la-transition-base);
    z-index: 50;
}

.la-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.la-archive-content .la-container {
    position: relative;
    min-height: 300px;
}

/* Spinner */
.la-spinner {
    width: 48px;
    height: 48px;
    animation: la-spin 1s linear infinite;
}

.la-spinner--sm {
    width: 20px;
    height: 20px;
}

.la-spinner__path {
    stroke: var(--la-primary);
    stroke-linecap: round;
    animation: la-spinner-dash 1.5s ease-in-out infinite;
}

@keyframes la-spin {
    100% { transform: rotate(360deg); }
}

@keyframes la-spinner-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Load More */
.la-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-xl) 0;
}

.la-load-more {
    position: relative;
}

.la-load-more__loading {
    display: none;
}

.la-load-more.is-loading .la-load-more__text {
    opacity: 0;
}

.la-load-more.is-loading .la-load-more__loading {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.la-pagination-info {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

/* Casino Results Container */
.la-casino-results {
    transition: opacity var(--la-transition-base);
}

.la-casino-results.la-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Animation */
.la-fade-in {
    animation: la-fade-in 0.3s ease-out forwards;
}

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

/* No Results */
.la-no-results {
    text-align: center;
    padding: var(--la-space-3xl) var(--la-space-lg);
}

.la-no-results__icon {
    margin-bottom: var(--la-space-lg);
    color: var(--la-text-muted);
    opacity: 0.5;
}

.la-no-results h2 {
    font-size: var(--la-text-xl);
    margin-bottom: var(--la-space-sm);
}

.la-no-results p {
    color: var(--la-text-muted);
    margin-bottom: var(--la-space-lg);
}

/* Error State */
.la-error {
    text-align: center;
    padding: var(--la-space-3xl) var(--la-space-lg);
}

.la-error__icon {
    margin-bottom: var(--la-space-lg);
    color: var(--la-error);
    opacity: 0.7;
}

.la-error h3 {
    font-size: var(--la-text-lg);
    margin-bottom: var(--la-space-sm);
}

.la-error p {
    color: var(--la-text-muted);
    margin-bottom: var(--la-space-lg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .la-modern-filters {
        padding: var(--la-space-sm) 0;
    }

    .la-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .la-filter-bar__toggles {
        order: 1;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--la-space-xs);
    }

    .la-filter-bar__toggles::-webkit-scrollbar {
        display: none;
    }

    .la-filter-bar__active {
        order: 2;
    }

    .la-filter-bar__actions {
        order: 0;
        margin-left: 0;
        justify-content: space-between;
        margin-bottom: var(--la-space-sm);
    }

    .la-filter-dropdown__menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 60vh;
        border-radius: var(--la-radius-lg) var(--la-radius-lg) 0 0;
        transform: translateY(100%);
    }

    .la-filter-dropdown.is-open .la-filter-dropdown__menu {
        transform: translateY(0);
    }
}

/* ==========================================================================
   Components - Grid Card View
   ========================================================================== */

.la-casino-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--la-space-lg);
}

.la-grid-card {
    display: flex;
    flex-direction: column;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform var(--la-transition-base), box-shadow var(--la-transition-base);
    position: relative;
}

.la-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.la-grid-card--featured {
    border: 2px solid var(--la-primary);
}

.la-grid-card--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--la-primary), var(--la-secondary));
}

/* Grid Card Header */
.la-grid-card__header {
    position: relative;
    padding: var(--la-space-lg);
    background: linear-gradient(135deg, #525867 0%, #282866 100%);
    text-align: center;
}

/* Rank styles moved to bottom of file for wide logo support */

.la-grid-card__badge {
    position: absolute;
    top: var(--la-space-sm);
    right: var(--la-space-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-full);
}

.la-grid-card__badge--featured {
    background: linear-gradient(135deg, var(--la-primary), var(--la-secondary));
    color: white;
}

.la-grid-card__badge--new {
    background: var(--la-success);
    color: white;
}

.la-grid-card__logo {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.la-grid-card__logo-img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.la-grid-card__logo-text {
    font-weight: 700;
    font-size: var(--la-text-sm);
    text-align: center;
    padding: var(--la-space-sm);
}

/* Rating Circle */
.la-grid-card__rating-circle {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: var(--la-bg-card);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.la-grid-card__rating-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(-90deg);
}

.la-grid-card__rating-bg {
    fill: none;
    stroke: var(--la-bg-light);
    stroke-width: 3;
}

.la-grid-card__rating-fill {
    fill: none;
    stroke: var(--la-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.la-grid-card__rating-value {
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: var(--la-text-primary);
    z-index: 1;
}

/* Grid Card Body */
.la-grid-card__body {
    padding: var(--la-space-xl) var(--la-space-lg) var(--la-space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-grid-card__title {
    font-size: var(--la-text-lg);
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.la-grid-card__title a {
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-grid-card__title a:hover {
    color: var(--la-primary);
}

/* Bonus Section */
.la-grid-card__bonus {
    text-align: center;
    padding: var(--la-space-md);
    background: linear-gradient(135deg, rgba(var(--la-primary-rgb), 0.1), rgba(var(--la-secondary-rgb), 0.1));
    border-radius: var(--la-radius-lg);
}

.la-grid-card__bonus-amount {
    font-size: var(--la-text-xl);
    font-weight: 800;
    color: var(--la-primary);
    display: block;
}

.la-grid-card__bonus-text {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    margin-top: 4px;
}

.la-grid-card__free-spins {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--la-space-sm);
    padding: 4px 12px;
    background: var(--la-secondary);
    color: white;
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-full);
}

/* Quick Info */
.la-grid-card__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--la-space-sm);
}

.la-grid-card__info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--la-space-sm);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    text-align: center;
}

.la-grid-card__info-label {
    font-size: 10px;
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-grid-card__info-value {
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-text-primary);
}

/* Payments */
.la-grid-card__payments {
    display: flex;
    justify-content: center;
    gap: var(--la-space-xs);
    flex-wrap: wrap;
}

.la-grid-card__payment {
    width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
}

.la-grid-card__payment svg,
.la-grid-card__payment img {
    max-width: 24px;
    max-height: 16px;
}

.la-grid-card__payment--more {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-text-muted);
}

/* Grid Card Footer */
.la-grid-card__footer {
    padding: var(--la-space-lg);
    border-top: 1px solid var(--la-border);
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-grid-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-xs);
}

.la-grid-card__review {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
    text-decoration: none;
    transition: color var(--la-transition-fast);
}

.la-grid-card__review:hover {
    color: var(--la-primary);
}

/* Grid Responsive */
@media (max-width: 1024px) {
    .la-casino-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .la-casino-grid {
        grid-template-columns: 1fr;
    }

    .la-grid-card__header {
        padding: var(--la-space-md);
    }

    .la-grid-card__logo {
        width: 80px;
        height: 80px;
    }

    .la-grid-card__body {
        padding: var(--la-space-lg) var(--la-space-md) var(--la-space-md);
    }
}

/* ==========================================================================
   Components - Table View
   ========================================================================== */

.la-casino-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.la-casino-table {
    width: 100%;
    border-collapse: collapse;
}
.la-casino-table thead {
    height: 50px;
}
/* Table Header */
.la-table-header {
    background: linear-gradient(135deg, var(--la-bg-light) 0%, var(--la-bg-card) 100%);
}

.la-table-header__th {
    padding: var(--la-space-md) var(--la-space-lg);
    text-align: left;
    font-size: var(--la-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--la-text-muted);
    border-bottom: 2px solid var(--la-border);
    white-space: nowrap;
}

.la-table-header__th--rank {
    width: 60px;
    text-align: center;
}

.la-table-header__th--casino {
    min-width: 200px;
}

.la-table-header__th--bonus {
    min-width: 150px;
}

.la-table-header__th--rating {
    width: 120px;
}

.la-table-header__th--info,
.la-table-header__th--payments {
    width: 140px;
}

.la-table-header__th--action {
    width: 140px;
    text-align: right;
}

/* Table Row */
.la-table-row {
    transition: background var(--la-transition-fast);
}

.la-table-row:hover {
    background: rgba(var(--la-primary-rgb), 0.03);
}

.la-table-row--featured {
    background: rgba(var(--la-primary-rgb), 0.05);
}

.la-table-row--featured:hover {
    background: rgba(var(--la-primary-rgb), 0.08);
}

.la-table-row__cell {
    padding: var(--la-space-md) var(--la-space-lg);
    border-bottom: 1px solid var(--la-border);
    vertical-align: middle;
}

/* Rank Cell */
.la-table-row__cell--rank {
    text-align: center;
}

.la-table-row__rank-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.la-table-row__rank {
    font-size: var(--la-text-lg);
    font-weight: 800;
    color: var(--la-text-primary);
}

.la-table-row__rank-star {
    color: var(--la-primary);
}

/* Casino Cell */
.la-table-row__casino {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-table-row__logo {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-lg);
    flex-shrink: 0;
}

.la-table-row__logo-img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.la-table-row__logo-text {
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-align: center;
}

.la-table-row__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-table-row__name {
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-table-row__name:hover {
    color: var(--la-primary);
}

.la-table-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
    align-items: center;
}

.la-table-row__badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--la-radius-full);
}

.la-table-row__badge--featured {
    background: linear-gradient(135deg, var(--la-primary), var(--la-secondary));
    color: white;
}

.la-table-row__badge--new {
    background: var(--la-success);
    color: white;
}

.la-table-row__license {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* Bonus Cell */
.la-table-row__bonus {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-table-row__bonus-amount {
    font-size: var(--la-text-lg);
    font-weight: 800;
    color: var(--la-primary);
}

.la-table-row__bonus-spins {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--la-secondary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--la-radius-full);
    width: fit-content;
}

.la-table-row__bonus-text {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* Rating Cell */
.la-table-row__rating {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-table-row__rating-bar {
    flex: 1;
    height: 8px;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-full);
    overflow: hidden;
}

.la-table-row__rating-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--la-primary), var(--la-secondary));
    border-radius: var(--la-radius-full);
    transition: width 0.5s ease-out;
}

.la-table-row__rating-value {
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: var(--la-text-primary);
    min-width: 28px;
}

/* Quick Info Cell */
.la-table-row__quick-info {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-xs);
}

.la-table-row__info-item {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
}

.la-table-row__info-icon {
    color: var(--la-text-muted);
}

/* Payments Cell */
.la-table-row__payments {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.la-table-row__payment {
    width: 28px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
}

.la-table-row__payment svg,
.la-table-row__payment img {
    max-width: 20px;
    max-height: 14px;
}

.la-table-row__payment--more {
    font-size: 10px;
    font-weight: 600;
    color: var(--la-text-muted);
}

/* Action Cell */
.la-table-row__cell--action {
    text-align: right;
}

.la-table-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--la-space-sm);
}

.la-table-row__review-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--la-radius-full);
    background: var(--la-bg-light);
    color: var(--la-text-muted);
    transition: all var(--la-transition-fast);
}

.la-table-row__review-link:hover {
    background: var(--la-primary);
    color: white;
}

/* Table Responsive */
@media (max-width: 1200px) {
    .la-table-header__th--info,
    .la-table-header__th--payments,
    .la-table-row__cell--info,
    .la-table-row__cell--payments {
        display: none;
    }

    .la-casino-table {
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .la-casino-table {
        min-width: 500px;
    }

    .la-table-header__th,
    .la-table-row__cell {
        padding: var(--la-space-sm) var(--la-space-md);
    }

    .la-table-row__logo {
        width: 48px;
        height: 48px;
    }

    .la-table-row__bonus-amount {
        font-size: var(--la-text-base);
    }
}

/* ==========================================================================
   Components - Pros/Cons
   ========================================================================== */

.la-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--la-space-lg);
}

.la-pros-cons__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-pros-cons__item {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) 0;
    color: var(--la-text-secondary);
}

.la-pros-cons__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--la-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.la-pros-cons__icon--pro {
    background: rgba(34, 197, 94, 0.2);
    color: var(--la-success);
}

.la-pros-cons__icon--con {
    background: rgba(239, 68, 68, 0.2);
    color: var(--la-error);
}

@media (max-width: 640px) {
    .la-pros-cons {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Components - Badge
   ========================================================================== */

.la-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--la-space-xs) var(--la-space-sm);
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-badge--primary {
    background: rgba(99, 102, 241, 0.2);
    color: var(--la-primary-light);
}

.la-badge--success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--la-success);
}

.la-badge--warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--la-warning);
}

.la-badge--featured {
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-secondary) 100%);
    color: #fff;
}

/* ==========================================================================
   Components - Tooltip
   ========================================================================== */

.la-tooltip {
    position: relative;
}

.la-tooltip__content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--la-transition-fast);
    z-index: var(--la-z-tooltip);
}

.la-tooltip:hover .la-tooltip__content {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.la-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.la-text-center { text-align: center; }
.la-text-left { text-align: left; }
.la-text-right { text-align: right; }

.la-mt-0 { margin-top: 0; }
.la-mb-0 { margin-bottom: 0; }
.la-my-lg { margin-top: var(--la-space-lg); margin-bottom: var(--la-space-lg); }

.la-hidden { display: none; }
.la-block { display: block; }
.la-flex { display: flex; }
.la-grid { display: grid; }

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes la-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes la-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes la-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.la-animate-fade-in {
    animation: la-fade-in var(--la-transition-base) ease-out;
}

.la-animate-slide-up {
    animation: la-slide-up var(--la-transition-slow) ease-out;
}

/* ==========================================================================
   Content Blocks - Tabs
   ========================================================================== */

.la-tabs {
    background: linear-gradient(135deg, #3e4b6dbf 0%, #323266 100%);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
}

.la-tabs--horizontal .la-tabs__nav {
    display: flex;
    background: var(--la-bg-light);
    overflow-x: auto;
}

.la-tabs--vertical {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.la-tabs--vertical .la-tabs__nav {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 240px;
    border-right: none;
    background: rgba(0, 0, 0, 0.2);
    padding: var(--la-space-sm);
    gap: var(--la-space-2xs);
}

.la-tabs--vertical .la-tabs__nav-inner {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-2xs);
}

.la-tabs--vertical .la-tabs__nav-item {
    text-align: left;
    justify-content: flex-start;
    border-radius: 0; 
    padding: var(--la-space-md) var(--la-space-lg);
    border-left: 3px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    transition: all var(--la-transition-fast);
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    font-size: var(--la-text-sm);
    font-weight: 500;
    position: relative;
}

.la-tabs--vertical .la-tabs__nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(var(--la-primary-rgb, 99, 102, 241), 0.5);
    color: var(--la-text-primary);
    transform: translateX(2px);
}

.la-tabs--vertical .la-tabs__nav-item.is-active {
    background: linear-gradient(90deg, rgba(var(--la-primary-rgb, 99, 102, 241), 0.2) 0%, rgba(var(--la-primary-rgb, 99, 102, 241), 0.05) 100%);
    border-left-color: var(--la-primary);
    color: var(--la-primary);
    border-right: none;
    margin-right: 0;
    font-weight: 600;
}

.la-tabs--vertical .la-tabs__panels {
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--la-border);
}

/* Vertical tabs mobile - same as horizontal */
@media (max-width: 768px) {
    .la-tabs--vertical {
        flex-direction: column;
    }

    .la-tabs--vertical .la-tabs__nav {
        min-width: 100%;
        max-width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
        gap: 0;
        border-right: none;
        background: var(--la-bg-light);
        -webkit-overflow-scrolling: touch;
    }

    .la-tabs--vertical .la-tabs__nav-inner {
        flex-direction: row;
        gap: 0;
    }

    .la-tabs--vertical .la-tabs__nav-item {
        white-space: nowrap;
        flex-shrink: 0;
        padding: var(--la-space-md) var(--la-space-lg);
        font-size: var(--la-text-sm);
        font-weight: 500;
        border-left: none;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        transform: none;
    }

    .la-tabs--vertical .la-tabs__nav-item:hover {
        background: var(--la-bg-card-hover);
        border-left-color: transparent;
        transform: none;
    }

    .la-tabs--vertical .la-tabs__nav-item.is-active {
        background: var(--la-bg-card);
        border-left-color: transparent;
        border-bottom-color: var(--la-primary);
        color: var(--la-primary);
    }

    .la-tabs--vertical .la-tabs__panels {
        border-left: none;
    }
}

.la-tabs__nav-item {
    padding: var(--la-space-md) var(--la-space-lg);
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-text-secondary);
    transition: all var(--la-transition-fast);
    white-space: nowrap;
}

.la-tabs__nav-item:hover {
    background: var(--la-bg-card-hover);
    color: var(--la-text-primary);
}

.la-tabs__nav-item.is-active {
    color: var(--la-primary);
    background: var(--la-bg-card);
}

.la-tabs--horizontal .la-tabs__nav-item.is-active {
    border-bottom: 2px solid var(--la-primary);
    margin-bottom: -2px;
}

.la-tabs__panels {
    padding: var(--la-space-lg);
}

.la-tabs__panel {
    display: none;
}

.la-tabs__panel.is-active {
    display: block;
    animation: la-fade-in var(--la-transition-base) ease-out;
}

/* Tab content formatting */
.la-tabs__panel-inner {
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: var(--la-leading-relaxed);
}

.la-tabs__panel-inner strong,
.la-tabs__panel-inner b {
    color: var(--la-text-primary);
    font-weight: 600;
}

.la-tabs__panel-inner em,
.la-tabs__panel-inner i {
    font-style: italic;
}

.la-tabs__panel-inner p {
    margin-bottom: var(--la-space-sm);
}

.la-tabs__panel-inner p:last-child {
    margin-bottom: 0;
}

.la-tabs__panel-inner a {
    color: var(--la-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.la-tabs__panel-inner a:hover {
    color: var(--la-primary-light);
}

/* ==========================================================================
   Content Blocks - Table of Contents
   ========================================================================== */

.la-toc {
    background: linear-gradient(135deg, #3e4b6dbf 0%, #323266 100%);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    margin: var(--la-space-xl) 0;
}

.la-toc__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md) var(--la-space-lg);
    background: var(--la-bg-light);
    border-bottom: 1px solid var(--la-border);
}

.la-toc__header[data-toc-toggle] {
    cursor: pointer;
    transition: background var(--la-transition-fast);
}

.la-toc__header[data-toc-toggle]:hover {
    background: var(--la-bg-card-hover);
}

.la-toc__icon {
    font-size: var(--la-text-xl);
}

.la-toc__title {
    flex: 1;
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
}

.la-toc__toggle {
    padding: var(--la-space-xs);
    border: none;
    background: none;
    color: var(--la-text-secondary);
    cursor: pointer;
    transition: transform var(--la-transition-fast);
}

.la-toc__toggle[aria-expanded="false"] {
    transform: rotate(-180deg);
}

.la-toc__list {
    list-style: none;
    padding: var(--la-space-md) var(--la-space-lg);
    margin: 0;
}

.la-toc__item {
    margin: var(--la-space-xs) 0;
}

.la-toc__item--level-3 {
    padding-left: var(--la-space-lg);
}

.la-toc__item--level-4 {
    padding-left: calc(var(--la-space-lg) * 2);
}

.la-toc__link {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-xs) 0;
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    text-decoration: none;
    transition: all var(--la-transition-fast);
}

.la-toc__link:hover {
    color: var(--la-primary);
    padding-left: var(--la-space-sm);
}

/* ==========================================================================
   Content Blocks - Accordion
   ========================================================================== */

.la-accordion {
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #3e4b6dbf 0%, #323266 100%);
    margin: var(--la-space-xl) 0;
}

.la-accordion__item {
    border-bottom: 1px solid var(--la-border);
}

.la-accordion__item:last-child {
    border-bottom: none;
}

.la-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--la-space-md) var(--la-space-lg);
    border: none;
    background: var(--la-bg-card);
    cursor: pointer;
    text-align: left;
    transition: background var(--la-transition-fast);
}

.la-accordion__header:hover {
    background: var(--la-bg-card-hover);
}

.la-accordion__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
}

.la-accordion__icon {
    color: var(--la-text-secondary);
    transition: transform var(--la-transition-fast);
}

.la-accordion__header[aria-expanded="true"] .la-accordion__icon {
    transform: rotate(180deg);
}

.la-accordion__panel {
    background: var(--la-bg-light);
}

.la-accordion__panel[hidden] {
    display: none;
}

.la-accordion__content {
    padding: var(--la-space-md) var(--la-space-lg);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: var(--la-leading-relaxed);
}

/* ==========================================================================
   Content Blocks - Info Box
   ========================================================================== */

.la-info-box {
    display: flex;
    gap: var(--la-space-md);
    padding: var(--la-space-lg);
    border-radius: var(--la-radius-lg);
    border-left: 4px solid;
    margin: var(--la-space-lg) 0;
}

.la-info-box--info {
    background: linear-gradient(135deg, #3e4b6dbf 0%, #323266 100%);
    border-color: var(--la-info);
}

.la-info-box--tip {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--la-warning);
}

.la-info-box--warning {
    background: rgba(249, 115, 22, 0.1);
    border-color: #f97316;
}

.la-info-box--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--la-error);
}

.la-info-box--success {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--la-success);
}

.la-info-box--note {
    background: rgba(168, 85, 247, 0.1);
    border-color: #a855f7;
}

.la-info-box__icon {
    font-size: var(--la-text-2xl);
    flex-shrink: 0;
}

.la-info-box__content {
    flex: 1;
}

.la-info-box__title {
    font-weight: 600;
    font-size: var(--la-text-base);
    margin-bottom: var(--la-space-xs);
    color: var(--la-text-primary);
}

.la-info-box__text {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: var(--la-leading-relaxed);
}

.la-info-box__text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Content Blocks - Icon List
   ========================================================================== */

.la-icon-list {
    list-style: none;
    padding: 0;
    margin: var(--la-space-lg) 0;
}

.la-icon-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) 0;
}

.la-icon-list__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-secondary);
    color: #fff;
    border-radius: 50%;
    font-size: var(--la-text-xs);
    font-weight: bold;
    flex-shrink: 0;
}

.la-icon-list--star .la-icon-list__icon {
    background: var(--la-accent);
}

.la-icon-list--arrow .la-icon-list__icon {
    background: var(--la-primary);
}

.la-icon-list--dot .la-icon-list__icon {
    background: var(--la-text-muted);
    width: 8px;
    height: 8px;
    margin-top: 8px;
}

.la-icon-list--plus .la-icon-list__icon {
    background: var(--la-info);
}

.la-icon-list--heart .la-icon-list__icon {
    background: #ec4899;
}

.la-icon-list__text {
    flex: 1;
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: var(--la-leading-normal);
}

.la-icon-list__item--highlight {
    background: var(--la-bg-card);
    padding: var(--la-space-sm) var(--la-space-md);
    border-radius: var(--la-radius-md);
    margin: var(--la-space-xs) 0;
}

.la-icon-list__item--highlight .la-icon-list__text {
    color: var(--la-text-primary);
    font-weight: 500;
}

/* ==========================================================================
   Content Blocks - Button Group
   ========================================================================== */

.la-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
    margin: var(--la-space-lg) 0;
}

.la-button-group--center {
    justify-content: center;
}

.la-button-group--right {
    justify-content: flex-end;
}

.la-button-group--full .la-btn {
    flex: 1;
    text-align: center;
}

.la-button-group--small .la-btn {
    padding: var(--la-space-sm) var(--la-space-md);
    font-size: var(--la-text-xs);
}

.la-button-group--large .la-btn {
    padding: var(--la-space-md) var(--la-space-xl);
    font-size: var(--la-text-lg);
}

/* ==========================================================================
   Content Blocks - Pros & Cons
   ========================================================================== */

.la-pros-cons {
    display: flex;
    gap: var(--la-space-lg);
    margin: var(--la-space-xl) 0;
}

.la-pros-cons--stacked {
    flex-direction: column;
}

.la-pros-cons__column {
    flex: 1;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    border: 2px solid;
}

.la-pros-cons__pros {
    border-color: var(--la-success);
}

.la-pros-cons__cons {
    border-color: var(--la-error);
}

.la-pros-cons__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-size: var(--la-text-base);
    font-weight: 600;
    margin: 0 0 var(--la-space-md);
    /* padding-bottom: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border); */
}

.la-pros-cons__title--pros {
    color: var(--la-success);
}

.la-pros-cons__title--cons {
    color: var(--la-error);
}

.la-pros-cons__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--la-text-sm);
    font-weight: bold;
}

.la-pros-cons__title--pros .la-pros-cons__icon {
    background: var(--la-success);
    color: #fff;
}

.la-pros-cons__title--cons .la-pros-cons__icon {
    background: var(--la-error);
    color: #fff;
}

.la-pros-cons__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.la-pros-cons__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-sm);
    padding: var(--la-space-xs) 0;
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

/* Icons are rendered via .la-pros-cons__item-icon in HTML */

/* ==========================================================================
   Content Blocks - Gallery
   ========================================================================== */

.la-gallery__item {
    position: relative;
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    margin: 0;
}

.la-gallery__item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform var(--la-transition-base);
}

.la-gallery__item:hover img {
    transform: scale(1.05);
}

.la-gallery__item a {
    display: block;
    position: relative;
}

.la-gallery__item a::after {
    content: "🔍";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--la-text-2xl);
    opacity: 0;
    transition: opacity var(--la-transition-fast);
}

.la-gallery__item:hover a::after {
    opacity: 1;
}

.la-gallery__caption {
    padding: var(--la-space-sm);
    background: var(--la-bg-light);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
    text-align: center;
}

/* Gallery Masonry Style */
.la-gallery--masonry {
    display: block;
    columns: var(--columns, 3);
    column-gap: var(--la-space-md);
}

.la-gallery--masonry .la-gallery__item {
    break-inside: avoid;
    margin-bottom: var(--la-space-md);
}

.la-gallery--masonry .la-gallery__item img {
    height: auto;
}

/* Lightbox Overlay */
.la-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: var(--la-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--la-space-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--la-transition-base);
}

.la-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.la-lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.la-lightbox__close {
    position: absolute;
    top: var(--la-space-lg);
    right: var(--la-space-lg);
    padding: var(--la-space-sm);
    border: none;
    background: none;
    color: #fff;
    font-size: var(--la-text-2xl);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--la-transition-fast);
}

.la-lightbox__close:hover {
    opacity: 1;
}

.la-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--la-space-md);
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: var(--la-text-xl);
    cursor: pointer;
    border-radius: var(--la-radius-md);
    transition: background var(--la-transition-fast);
}

.la-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.la-lightbox__prev {
    left: var(--la-space-lg);
}

.la-lightbox__next {
    right: var(--la-space-lg);
}

/* ==========================================================================
   Content Blocks - Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .la-tabs--vertical {
        flex-direction: column;
    }

    .la-tabs--vertical .la-tabs__nav {
        flex-direction: row;
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--la-border);
        overflow-x: auto;
    }

    .la-tabs--vertical .la-tabs__nav-item.is-active {
        border-right: none;
        border-bottom: 2px solid var(--la-primary);
        margin-right: 0;
        margin-bottom: -2px;
    }

    .la-pros-cons {
        flex-direction: column;
    }

    .la-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .la-gallery--masonry {
        columns: 2;
    }

    .la-button-group--full {
        flex-direction: column;
    }

    .la-button-group--full .la-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .la-gallery {
        grid-template-columns: 1fr;
    }

    .la-gallery--masonry {
        columns: 1;
    }

    .la-info-box {
        flex-direction: column;
        text-align: center;
    }

    .la-lightbox__nav {
        padding: var(--la-space-sm);
        font-size: var(--la-text-base);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .la-btn,
    .la-filters,
    .la-cta {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .la-card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.la-header {
    background: var(--la-bg-card);
    border-bottom: 1px solid var(--la-border);
    position: relative;
    z-index: var(--la-z-sticky);
}

.la-header--sticky {
    position: sticky;
    top: 0;
}

.la-header__top-bar {
    background: var(--la-bg-dark);
    border-bottom: 1px solid var(--la-border);
    padding: var(--la-space-xs) 0;
    font-size: var(--la-text-xs);
}

.la-header__top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.la-header__quick-links {
    display: flex;
    gap: var(--la-space-md);
}

.la-header__quick-link {
    color: var(--la-text-secondary);
    transition: color var(--la-transition-fast);
}

.la-header__quick-link:hover {
    color: var(--la-primary-light);
}

.la-header__top-right {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-header__age-badge {
    background: var(--la-error);
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--la-radius-sm);
    font-weight: 700;
    font-size: 10px;
}

.la-header__main {
    padding: var(--la-space-md) 0;
}

.la-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-lg);
}

.la-header__logo a,
.la-header__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.la-header__logo img {
    max-height: 48px;
    width: auto;
}

.la-header__logo-svg {
    height: 55px;
    width: auto;
    transition: transform var(--la-transition-fast), filter var(--la-transition-fast);
}

.la-header__logo-link:hover .la-header__logo-svg {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.la-header__logo-text {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 800;
    color: var(--la-text-primary);
    text-decoration: none;
}

/* Mobile drawer logo */
.la-mobile-drawer__logo-link {
    display: flex;
    align-items: center;
}

.la-mobile-drawer__logo-svg {
    height: 36px;
    width: auto;
}

.la-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.la-nav {
    display: flex;
    gap: var(--la-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-nav > li {
    position: relative;
}

.la-nav > li > a {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-sm) var(--la-space-md);
    color: var(--la-text-primary);
    font-weight: 500;
    border-radius: var(--la-radius-md);
    transition: all var(--la-transition-fast);
}
.la-homepage-content.la-section {
    background: #15152d;
}
.la-nav > li > a:hover,
.la-nav > li.current-menu-item > a {
    background: var(--la-bg-light);
    color: #6366f1db;
}

/* Dropdown */
.la-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-sm);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--la-transition-fast);
    box-shadow: var(--la-shadow-lg);
}

.la-nav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.la-nav .sub-menu a {
    display: block;
    padding: var(--la-space-sm) var(--la-space-md);
    color: var(--la-text-secondary);
    border-radius: var(--la-radius-sm);
    transition: all var(--la-transition-fast);
}

.la-nav .sub-menu a:hover {
    background: var(--la-bg-light);
    color: var(--la-text-primary);
}

.la-header__actions {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-header__search-toggle {
    background: none;
    border: none;
    color: var(--la-text-secondary);
    cursor: pointer;
    padding: var(--la-space-sm);
    border-radius: var(--la-radius-md);
    transition: all var(--la-transition-fast);
}

.la-header__search-toggle:hover {
    background: var(--la-bg-light);
    color: var(--la-text-primary);
}

.la-header__cta {
    display: none;
}

@media (min-width: 1024px) {
    .la-header__cta {
        display: inline-flex;
    }
}

.la-header__menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--la-space-sm);
    cursor: pointer;
}

@media (max-width: 1024px) {
    .la-header__menu-toggle {
        display: block;
    }

    .la-header__nav {
        display: none;
    }
}

.la-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.la-hamburger span {
    display: block;
    height: 2px;
    background: var(--la-text-primary);
    border-radius: 2px;
    transition: all var(--la-transition-fast);
}

/* Search Overlay */
.la-header__search {
    padding: var(--la-space-md) 0;
    background: var(--la-bg-light);
    border-top: 1px solid var(--la-border);
}

.la-search-form {
    display: flex;
    gap: var(--la-space-sm);
    max-width: 600px;
    margin: 0 auto;
}

.la-search-form__input {
    flex: 1;
    padding: var(--la-space-md);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
}

.la-search-form__input:focus {
    outline: none;
    border-color: var(--la-primary);
}

.la-search-form__submit,
.la-search-form__close {
    background: none;
    border: none;
    color: var(--la-text-secondary);
    cursor: pointer;
    padding: var(--la-space-sm);
}

/* Mobile Menu */
.la-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background: var(--la-bg-card);
    z-index: var(--la-z-modal);
    transform: translateX(100%);
    transition: transform var(--la-transition-base);
}

.la-mobile-menu:not([hidden]) {
    transform: translateX(0);
}

.la-mobile-menu__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--la-space-lg);
    overflow-y: auto;
}

.la-mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--la-space-lg);
}

.la-mobile-menu__close {
    background: none;
    border: none;
    color: var(--la-text-secondary);
    cursor: pointer;
}

.la-mobile-menu__search {
    margin-bottom: var(--la-space-lg);
}

.la-mobile-menu__search input {
    width: 100%;
    padding: var(--la-space-md);
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-primary);
}

.la-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-mobile-nav a {
    display: block;
    padding: var(--la-space-md);
    color: var(--la-text-primary);
    border-bottom: 1px solid var(--la-border);
}

.la-mobile-menu__cta {
    margin-top: auto;
    padding-top: var(--la-space-lg);
}

.la-mobile-menu__footer {
    display: flex;
    justify-content: center;
    gap: var(--la-space-md);
    padding-top: var(--la-space-lg);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* ==========================================================================
   Mobile Drawer (New Header Version)
   ========================================================================== */

.la-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--la-z-modal);
    visibility: hidden;
    pointer-events: none;
}

.la-mobile-drawer.is-active {
    visibility: visible;
    pointer-events: auto;
}

.la-mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--la-transition-base);
}

.la-mobile-drawer.is-active .la-mobile-drawer__backdrop {
    opacity: 1;
}

.la-mobile-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background: var(--la-bg-card);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--la-transition-base);
    overflow-y: auto;
}

.la-mobile-drawer.is-active .la-mobile-drawer__panel {
    transform: translateX(0);
}

.la-mobile-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--la-space-lg);
    border-bottom: 1px solid var(--la-border);
}

.la-mobile-drawer__logo img {
    max-height: 32px;
    width: auto;
}

.la-mobile-drawer__logo-text {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-text-primary);
}

.la-mobile-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--la-text-secondary);
    cursor: pointer;
    border-radius: var(--la-radius-md);
    transition: background var(--la-transition-fast);
}

.la-mobile-drawer__close:hover {
    background: var(--la-bg-light);
}

.la-mobile-drawer__nav {
    flex: 1;
    padding: var(--la-space-md) 0;
}

.la-mobile-drawer__nav .la-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-mobile-drawer__nav .la-mobile-nav li {
    border-bottom: 1px solid var(--la-border);
}

.la-mobile-drawer__nav .la-mobile-nav a {
    display: block;
    padding: var(--la-space-md) var(--la-space-lg);
    color: var(--la-text-primary);
    font-weight: 500;
    transition: background var(--la-transition-fast);
}

.la-mobile-drawer__nav .la-mobile-nav a:hover {
    background: var(--la-bg-light);
}

.la-mobile-drawer__cta {
    padding: var(--la-space-lg);
}

.la-mobile-drawer__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-lg);
    border-top: 1px solid var(--la-border);
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-mobile-drawer__age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--la-error);
    color: #fff;
    font-weight: 700;
    font-size: var(--la-text-xs);
    border-radius: var(--la-radius-full);
}

/* Hide mobile toggle on desktop */
.la-header__mobile-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .la-header__mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
    }
}

/* ==========================================================================
   Search Overlay
   ========================================================================== */

.la-search-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--la-z-modal);
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    visibility: hidden;
    opacity: 0;
    transition: all var(--la-transition-base);
}

.la-search-overlay.is-active {
    visibility: visible;
    opacity: 1;
}

.la-search-overlay__inner {
    width: 100%;
    max-width: 600px;
    padding: 0 var(--la-space-lg);
    transform: translateY(-20px);
    transition: transform var(--la-transition-base);
}

.la-search-overlay.is-active .la-search-overlay__inner {
    transform: translateY(0);
}

.la-search-overlay__form {
    display: flex;
    gap: var(--la-space-sm);
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-sm);
    border: 1px solid var(--la-border);
}

.la-search-overlay__input {
    flex: 1;
    padding: var(--la-space-md) var(--la-space-lg);
    background: transparent;
    border: none;
    color: var(--la-text-primary);
    font-size: var(--la-text-lg);
}

.la-search-overlay__input::placeholder {
    color: var(--la-text-muted);
}

.la-search-overlay__input:focus {
    outline: none;
}

.la-search-overlay__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--la-primary);
    border: none;
    border-radius: var(--la-radius-md);
    color: #fff;
    cursor: pointer;
    transition: background var(--la-transition-fast);
}

.la-search-overlay__submit:hover {
    background: var(--la-primary-hover);
}

.la-search-overlay__close {
    position: absolute;
    top: var(--la-space-xl);
    right: var(--la-space-xl);
    background: none;
    border: none;
    color: var(--la-text-secondary);
    cursor: pointer;
    padding: var(--la-space-sm);
    transition: color var(--la-transition-fast);
}

.la-search-overlay__close:hover {
    color: var(--la-text-primary);
}

/* ==========================================================================
   Footer Styles - Modern SEO Optimized
   ========================================================================== */

/* ==========================================================================
   Author Box (E-E-A-T SEO Component)
   ========================================================================== */

.la-author-box {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-xl);
    margin: var(--la-space-2xl) 0;
}

.la-author-box__inner {
    display: flex;
    gap: var(--la-space-xl);
    align-items: flex-start;
}

.la-author-box__avatar {
    flex-shrink: 0;
}

.la-author-box__img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--la-primary);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
}

.la-author-box__avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--la-primary-light) 0%, var(--la-primary) 100%);
    border: 3px solid var(--la-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.la-author-box__content {
    flex: 1;
    min-width: 0;
}

.la-author-box__header {
    margin-bottom: var(--la-space-md);
}

.la-author-box__label {
    display: block;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--la-space-xs);
}

.la-author-box__name {
    font-size: var(--la-text-xl);
    font-weight: 700;
    margin: 0 0 var(--la-space-xs);
    line-height: 1.3;
}

.la-author-box__name a {
    color: var(--la-text);
    text-decoration: none;
    transition: color var(--la-transition-base);
}

.la-author-box__name a:hover {
    color: var(--la-primary);
}

.la-author-box__title {
    display: inline-block;
    font-size: var(--la-text-sm);
    color: var(--la-primary);
    font-weight: 500;
}

/* Credentials/Badges */
.la-author-box__credentials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
    margin-bottom: var(--la-space-md);
}

.la-author-box__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
}

.la-author-box__badge svg {
    color: var(--la-primary);
    flex-shrink: 0;
}

.la-author-box__badge--expertise {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.la-author-box__badge--expertise svg {
    color: #10b981;
}

.la-author-box__badge--experience {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.la-author-box__badge--experience svg {
    color: #f59e0b;
}

.la-author-box__badge--credentials {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.la-author-box__badge--credentials svg {
    color: #3b82f6;
}

/* Bio */
.la-author-box__bio {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--la-space-md);
}

.la-author-box__bio p {
    margin: 0 0 var(--la-space-sm);
}

.la-author-box__bio p:last-child {
    margin-bottom: 0;
}

/* Footer */
.la-author-box__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--la-space-md);
    padding-top: var(--la-space-md);
    border-top: 1px solid var(--la-border);
}

.la-author-box__posts-link {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    text-decoration: none;
    transition: color var(--la-transition-base);
}

.la-author-box__posts-link:hover {
    color: var(--la-primary);
}

/* Social Links */
.la-author-box__social {
    display: flex;
    gap: var(--la-space-sm);
}

.la-author-box__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--la-surface-alt);
    border-radius: var(--la-radius-md);
    color: var(--la-text-secondary);
    transition: all var(--la-transition-base);
}

.la-author-box__social-link:hover {
    transform: translateY(-2px);
}

.la-author-box__social-link--linkedin:hover {
    background: #0077b5;
    color: #fff;
}

.la-author-box__social-link--twitter:hover {
    background: #000;
    color: #fff;
}

.la-author-box__social-link--facebook:hover {
    background: #1877f2;
    color: #fff;
}

.la-author-box__social-link--instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}

/* View All Link */
.la-author-box__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    margin-left: auto;
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-primary);
    text-decoration: none;
    transition: gap var(--la-transition-base);
}

.la-author-box__view-all:hover {
    gap: var(--la-space-sm);
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .la-author-box {
        padding: var(--la-space-lg);
    }

    .la-author-box__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .la-author-box__credentials {
        justify-content: center;
    }

    .la-author-box__footer {
        justify-content: center;
    }

    .la-author-box__view-all {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        margin-top: var(--la-space-sm);
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.la-footer {
    background: linear-gradient(180deg, #22224c 0%, #080816 100%);
    color: var(--la-text-secondary);
    margin-top: auto;
    position: relative;
}

/* Footer CTA Banner */ 
.la-footer-cta {
    background: linear-gradient(135deg, var(--la-primary) 0%, #4338ca 100%);
    padding: var(--la-space-lg) 0;
    position: relative;
    overflow: hidden;
}

.la-footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.la-footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-lg);
    flex-wrap: wrap;
}

.la-footer-cta__badge {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--la-space-sm) var(--la-space-md);
    border-radius: var(--la-radius-full);
    color: #fff;
    font-size: var(--la-text-sm);
    font-weight: 600;
}

.la-footer-cta__badge svg {
    color: var(--la-accent);
}

.la-footer-cta__casino {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    flex: 1;
}

.la-footer-cta__logo {
    width: 60px;
    height: 60px;
    border-radius: var(--la-radius-lg);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.la-footer-cta__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-footer-cta__name {
    color: #fff;
    font-weight: 700;
    font-size: var(--la-text-lg);
}

.la-footer-cta__bonus {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--la-text-sm);
}

.la-footer-cta__btn {
    background: var(--la-secondary);
    color: #fff;
    padding: var(--la-space-sm) var(--la-space-xl);
    border-radius: var(--la-radius-full);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    transition: all var(--la-transition-fast);
    white-space: nowrap;
}

.la-footer-cta__btn:hover {
    background: var(--la-secondary-hover);
    transform: translateX(4px);
}

/* Main Footer Content */
.la-footer__main {
    padding: var(--la-space-3xl) 0 var(--la-space-xl);
}

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

@media (max-width: 1200px) {
    .la-footer__grid {
        grid-template-columns: 1.5fr repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .la-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .la-footer__column--brand {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .la-footer__grid {
        grid-template-columns: 1fr;
    }

    .la-footer__column--brand {
        grid-column: span 1;
    }
}

/* Brand Column */
.la-footer__column--brand {
    padding-right: var(--la-space-xl);
}

.la-footer__brand {
    margin-bottom: var(--la-space-lg);
}

.la-footer__logo {
    margin-bottom: var(--la-space-md);
}

.la-footer__logo img {
    max-height: 44px;
    width: auto;
}

.la-footer__logo-link {
    display: inline-flex;
    transition: opacity var(--la-transition-fast);
}

.la-footer__logo-link:hover {
    opacity: 0.85;
}

.la-footer__logo-svg {
    height: 40px;
    width: auto;
}

.la-footer__logo-text {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 800;
    color: var(--la-text-primary);
    background: linear-gradient(135deg, var(--la-primary-light) 0%, var(--la-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.la-footer__description {
    font-size: var(--la-text-sm);
    line-height: var(--la-leading-relaxed);
    color: var(--la-text-muted);
    margin: 0;
}

/* Newsletter */
.la-footer__newsletter {
    margin-bottom: var(--la-space-lg);
}

/* ==========================================================================
   Subscribe Form
   ========================================================================== */

.la-subscribe-form {
    padding: var(--la-space-lg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: var(--la-radius-xl);
    border: 1px solid rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

.la-subscribe-form::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.la-subscribe-form__title {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-xs);
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-subscribe-form__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--la-accent) 0%, #f59e0b 100%);
    border-radius: 50%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
}

.la-subscribe-form__desc {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    margin: 0 0 var(--la-space-md);
    line-height: 1.5;
}

.la-subscribe-form__field {
    display: flex;
    gap: var(--la-space-sm);
    position: relative;
    z-index: 1;
}

.la-subscribe-form__input {
    flex: 1;
    padding: var(--la-space-md) var(--la-space-lg);
    background: var(--la-bg-dark);
    border: 2px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
    transition: all 0.3s ease;
    min-width: 0;
}

.la-subscribe-form__input:focus {
    outline: none;
    border-color: var(--la-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.la-subscribe-form__input::placeholder {
    color: var(--la-text-muted);
}

.la-subscribe-form__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md) var(--la-space-xl);
    min-width: 120px;
    font-weight: 600;
    border-radius: var(--la-radius-lg);
    transition: all 0.3s ease;
}

.la-subscribe-form__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.la-subscribe-form__message {
    margin-top: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-md);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-sm);
    text-align: center;
}

.la-subscribe-form__message--success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--la-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.la-subscribe-form__message--error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--la-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.la-subscribe-form__privacy {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    margin-top: var(--la-space-sm);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-subscribe-form__privacy svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Footer variant */
.la-subscribe-form--footer {
    padding: var(--la-space-md);
}

.la-subscribe-form--footer .la-subscribe-form__title {
    font-size: var(--la-text-base);
}

.la-subscribe-form--footer .la-subscribe-form__title::before {
    width: 20px;
    height: 20px;
}

.la-subscribe-form--footer .la-subscribe-form__desc {
    font-size: var(--la-text-xs);
}

.la-subscribe-form--footer .la-subscribe-form__input {
    padding: var(--la-space-sm) var(--la-space-md);
    font-size: var(--la-text-sm);
}

.la-subscribe-form--footer .la-subscribe-form__btn {
    padding: var(--la-space-sm) var(--la-space-md);
    min-width: auto;
    font-size: var(--la-text-sm);
}

/* Spinner animation */
.la-spinner {
    animation: la-spin 1s linear infinite;
}

@keyframes la-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Subscription notices */
.la-notice {
    padding: var(--la-space-md) 0;
    text-align: center;
    font-size: var(--la-text-sm);
}

.la-notice--success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--la-success);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.la-notice--error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--la-error);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.la-notice--info {
    background: rgba(99, 102, 241, 0.1);
    color: var(--la-primary-light);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.la-notice p {
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .la-subscribe-form__field {
        flex-direction: column;
    }

    .la-subscribe-form__btn {
        width: 100%;
    }
}

/* Social Links */
.la-footer__social {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-footer__social-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-footer__social-links {
    display: flex;
    gap: var(--la-space-sm);
}

.la-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    color: var(--la-text-secondary);
    transition: all var(--la-transition-fast);
}

.la-footer__social-link:hover {
    transform: translateY(-3px);
    border-color: var(--la-primary);
}

.la-footer__social-link--facebook:hover {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.la-footer__social-link--twitter:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.la-footer__social-link--instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    border-color: transparent;
}

.la-footer__social-link--youtube:hover {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

.la-footer__social-link--telegram:hover {
    background: #0088cc;
    color: #fff;
    border-color: #0088cc;
}

.la-footer__social-link--tiktok:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Footer Columns */
.la-footer__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-md);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.la-footer__title svg {
    color: var(--la-primary-light);
}

.la-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-footer__menu li {
    margin-bottom: var(--la-space-xs);
}

.la-footer__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    padding: var(--la-space-xs) 0;
    transition: all var(--la-transition-fast);
    border-radius: var(--la-radius-sm);
}

.la-footer__menu a:hover {
    color: var(--la-text-primary);
    padding-left: var(--la-space-sm);
}

.la-footer__menu-rating {
    background: linear-gradient(135deg, var(--la-accent) 0%, #f97316 100%);
    color: #000;
    font-size: var(--la-text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--la-radius-full);
}

.la-footer__menu-count {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-footer__more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    margin-top: var(--la-space-sm);
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: #ffffff;
    transition: all var(--la-transition-fast);
}

.la-footer__more-link:hover {
    color: var(--la-primary);
}

.la-footer__more-link svg {
    transition: transform var(--la-transition-fast);
}

.la-footer__more-link:hover svg {
    transform: translateX(4px);
}

/* Payment Methods */
.la-footer__payments {
    padding: var(--la-space-lg) 0;
    background: rgba(0, 0, 0, 0.2);
}

.la-footer__payments-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-md);
}

.la-footer__payments-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.la-footer__payments-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--la-space-sm);
}

.la-footer__payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 36px;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-muted);
    transition: all var(--la-transition-fast);
}

.la-footer__payment-icon:hover {
    border-color: var(--la-border-light);
    background: var(--la-bg-card-hover);
}

.la-footer__payment-icon svg {
    width: 32px;
    height: 20px;
}

/* Responsible Gambling Section */
.la-footer__responsible {
    padding: var(--la-space-xl) 0;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-top: 1px solid rgba(239, 68, 68, 0.2);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.la-footer__responsible-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-xl);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .la-footer__responsible-grid {
        flex-direction: column;
        text-align: center;
    }
}

.la-footer__responsible-main {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

@media (max-width: 768px) {
    .la-footer__responsible-main {
        flex-direction: column;
    }
}

.la-footer__age-badges {
    display: flex;
    gap: var(--la-space-sm);
}

.la-footer__age-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--la-error) 0%, #dc2626 100%);
    color: #fff;
    font-weight: 800;
    font-size: var(--la-text-sm);
    border-radius: var(--la-radius-lg);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.la-footer__age-badge--21 {
    background: linear-gradient(135deg, var(--la-warning) 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.la-footer__responsible-content {
    max-width: 400px;
}

.la-footer__responsible-title {
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-xs);
}

.la-footer__responsible-content p {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    margin: 0;
    line-height: var(--la-leading-relaxed);
}

/* Help Organizations */
.la-footer__help-orgs {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-footer__help-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-footer__help-links {
    display: flex;
    gap: var(--la-space-sm);
    flex-wrap: wrap;
}

.la-footer__help-link {
    padding: var(--la-space-xs) var(--la-space-sm);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
    transition: all var(--la-transition-fast);
}

.la-footer__help-link:hover {
    border-color: var(--la-primary);
    color: var(--la-primary-light);
}

.la-footer__licenses {
    display: flex;
    gap: var(--la-space-sm);
}

.la-footer__licenses-img {
    max-height: 50px;
    width: auto;
    opacity: 0.8;
    transition: opacity var(--la-transition-fast);
}

.la-footer__licenses-img:hover {
    opacity: 1;
}

/* Disclaimers */
.la-footer__disclaimers {
    padding: var(--la-space-lg) 0;
    background: rgba(0, 0, 0, 0.3);
}

.la-footer__disclaimer-box {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-footer__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-sm);
    padding: var(--la-space-md);
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    /* border-left: 3px solid var(--la-border); */
}

.la-footer__disclaimer--gambling {
    border-left-color: var(--la-warning);
}

.la-footer__disclaimer--gambling svg {
    color: var(--la-warning);
    flex-shrink: 0;
}

.la-footer__disclaimer--affiliate {
    border-left-color: var(--la-info);
}

.la-footer__disclaimer--affiliate svg {
    color: var(--la-info);
    flex-shrink: 0;
}

.la-footer__disclaimer p {
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
    margin: 0;
    line-height: var(--la-leading-relaxed);
}

/* Copyright Bar */
.la-footer__bottom {
    padding: var(--la-space-lg) 0;
    border-top: 1px solid var(--la-border);
}

.la-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--la-space-md);
}

@media (max-width: 768px) {
    .la-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

.la-footer__copyright {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-footer__copyright p {
    margin: 0;
}

.la-footer__copyright strong {
    color: var(--la-text-secondary);
}

.la-legal-nav {
    display: flex;
    gap: var(--la-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-legal-nav li {
    position: relative;
}

.la-legal-nav li:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: calc(var(--la-space-md) / -2);
    color: var(--la-border);
}

.la-legal-nav a {
    color: var(--la-text-muted);
    font-size: var(--la-text-sm);
    transition: color var(--la-transition-fast);
}

.la-legal-nav a:hover {
    color: var(--la-primary-light);
}

/* Back to Top Button */
.la-footer__back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    color: var(--la-text-secondary);
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-footer__back-to-top:hover {
    background: var(--la-primary);
    border-color: var(--la-primary);
    color: #fff;
    transform: translateY(-3px);
}

@media (max-width: 640px) {
    .la-footer-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    .la-footer-cta__casino {
        flex-direction: column;
    }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.la-hero {
    position: relative;
    padding: 10px 0 0;
    background: var(--la-bg-gradient);
    overflow: hidden;
}

.la-hero--gradient {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1a4a 100%);
}

.la-hero--has-bg {
    background-size: cover;
    background-position: center;
}

.la-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.9) 0%, rgba(26, 26, 62, 0.8) 100%);
}

.la-hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--la-space-xl);
    align-items: center;
}

@media (max-width: 1024px) {
    .la-hero__content {
        grid-template-columns: 1fr;
        padding: 25px 0 0;
    }
}

.la-hero__title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800; 
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-md);
    line-height: 1.1;
}

.la-hero__subtitle {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    margin-bottom: var(--la-space-xl);
    max-width: 600px;
}

.la-hero__subtitle h2 {
    font-size: clamp(1.2rem, 3vw, 1.3rem);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-sm);
    line-height: 1.2;
}

.la-hero__subtitle h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-xs);
    line-height: 1.3;
}

.la-hero__subtitle p {
    margin: 0 0 var(--la-space-sm);
}

.la-hero__subtitle p:last-child {
    margin-bottom: 0;
}

.la-hero__search {
    display: flex;
    max-width: 500px;
    margin-bottom: var(--la-space-xl);
}

.la-hero__search-input {
    flex: 1;
    padding: var(--la-space-md) var(--la-space-lg);
    background: var(--la-bg-card);
    border: 2px solid var(--la-border);
    border-right: none;
    border-radius: var(--la-radius-lg) 0 0 var(--la-radius-lg);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
}

.la-hero__search-input:focus {
    outline: none;
    border-color: var(--la-primary);
}

.la-hero__search-btn {
    padding: var(--la-space-md) var(--la-space-lg);
    background: var(--la-primary);
    border: none;
    border-radius: 0 var(--la-radius-lg) var(--la-radius-lg) 0;
    color: #fff;
    cursor: pointer;
    transition: background var(--la-transition-fast);
}

.la-hero__search-btn:hover {
    background: var(--la-primary-hover);
}

.la-hero__stats {
    display: flex;
    gap: var(--la-space-md);
}

.la-hero__stat {
    text-align: center;
    padding: var(--la-space-md) var(--la-space-lg);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--la-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.la-hero__stat-value {
    display: block;
    font-size: var(--la-text-2xl);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.la-hero__stat-label {
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
}

.la-hero__featured {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
    position: relative;
}

/* Decorative skewed background behind slot machine */
.la-hero__featured::before {
    content: '';
    position: absolute;
    top: -25%;
    left: 0%;
    right: 10%;
    width: 130%;
    height: 140%;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(168, 85, 247, 0.12) 50%, rgba(139, 92, 246, 0.06) 100%);
    transform: skewY(-6deg) skewX(3deg);
    border-radius: 0;
    z-index: -1;
    animation: decorBgFloat 8s ease-in-out infinite;
    pointer-events: none;
}

/* Second layer for depth */
.la-hero__featured::after {
    content: '';
    position: absolute;
    top: -10%; 
    left: -24%;
    right: 20%;
    width: 150%;
    height: 120%;
    background: linear-gradient(160deg, rgba(251, 191, 36, 0.05) 0%, rgba(236, 72, 153, 0.08) 40%, rgba(139, 92, 246, 0.04) 100%);
    transform: skewY(21deg) skewX(-2deg);
    border-radius: 6px;
    z-index: -2;
    animation: decorBgFloat2 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes decorBgFloat {
    0%, 100% {
        transform: skewY(-6deg) skewX(3deg) translateY(0) translateX(0);
    }
    50% {
        transform: skewY(-5deg) skewX(2deg) translateY(-10px) translateX(5px);
    }
}

@keyframes decorBgFloat2 {
    0%, 100% {
        transform: skewY(4deg) skewX(-2deg) translateY(0) translateX(0);
    }
    50% {
        transform: skewY(3deg) skewX(-1deg) translateY(8px) translateX(-5px);
    }
}

/* ==========================================================================
   Hero Slot Machine Scene - "Path to Jackpot" Animated SVG
   ========================================================================== */

.la-hero__casino-scene {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    aspect-ratio: 400 / 450;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
}

.la-hero__scene-svg {
    width: 100%;
    height: 100%;
}

/* Win glow pulsing - creates excitement around jackpot */
.la-slot__win-glow {
    animation: slotWinGlow 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes slotWinGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
}

/* Jackpot banner pulse */
.la-slot__jackpot-banner {
    animation: jackpotPulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

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

/* Decorative lights - smooth chase effect */
.la-slot__light {
    animation: lightChase 2.5s ease-in-out infinite;
}

.la-slot__light--1 { animation-delay: 0s; }
.la-slot__light--2 { animation-delay: 0.2s; }
.la-slot__light--3 { animation-delay: 0.4s; }
.la-slot__light--4 { animation-delay: 0.6s; }
.la-slot__light--5 { animation-delay: 0.8s; }
.la-slot__light--6 { animation-delay: 1s; }
.la-slot__light--7 { animation-delay: 1.2s; }
.la-slot__light--8 { animation-delay: 1.4s; }
.la-slot__light--9 { animation-delay: 1.6s; }

@keyframes lightChase {
    0%, 100% {
        opacity: 0.25;
        fill: #b45309;
    }
    50% {
        opacity: 1;
        fill: #fef08a;
    }
}

/* Slot machine subtle float */
.la-slot__machine {
    animation: machineFloat 4s ease-in-out infinite;
}

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

/* Reel spinning animation - each reel stops at different times */
.la-slot__reel--1 {
    animation: reelSpin1 3s ease-out infinite;
}

.la-slot__reel--2 {
    animation: reelSpin2 3s ease-out infinite;
    animation-delay: 0.2s;
}

.la-slot__reel--3 {
    animation: reelSpin3 3s ease-out infinite;
    animation-delay: 0.4s;
}

@keyframes reelSpin1 {
    0% {
        transform: translateY(-200px);
    }
    30% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-8px);
    }
    40%, 100% {
        transform: translateY(0);
    }
}

@keyframes reelSpin2 {
    0% {
        transform: translateY(-200px);
    }
    40% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(-8px);
    }
    50%, 100% {
        transform: translateY(0);
    }
}

@keyframes reelSpin3 {
    0% {
        transform: translateY(-200px);
    }
    50% {
        transform: translateY(0);
    }
    55% {
        transform: translateY(-8px);
    }
    60%, 100% {
        transform: translateY(0);
    }
}

/* Win line with arrows - smooth glow when jackpot hits */
.la-slot__win-line {
    animation: winLineFlash 4s ease-in-out infinite;
}

.la-slot__win-glow-line {
    animation: winGlowPulse 4s ease-in-out infinite;
}

.la-slot__win-arrow {
    animation: winArrowPulse 4s ease-in-out infinite;
}

@keyframes winLineFlash {
    0%, 55% {
        opacity: 0.6;
    }
    60%, 85% {
        opacity: 1;
    }
    90%, 100% {
        opacity: 0.6;
    }
}

@keyframes winGlowPulse {
    0%, 55% {
        opacity: 0.2;
    }
    60%, 85% {
        opacity: 0.6;
    }
    90%, 100% {
        opacity: 0.2;
    }
}

@keyframes winArrowPulse {
    0%, 55% {
        transform: scale(1);
    }
    60%, 85% {
        transform: scale(1.15);
    }
    90%, 100% {
        transform: scale(1);
    }
}

/* Lever pull animation */
.la-slot__lever {
    animation: leverPull 3s ease-in-out infinite;
    transform-origin: 341px 230px;
}

@keyframes leverPull {
    0%, 5% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(25deg);
    }
    15%, 100% {
        transform: rotate(0deg);
    }
}

/* Lever ball bounce */
.la-slot__lever-ball {
    animation: leverBallBounce 3s ease-in-out infinite;
}

@keyframes leverBallBounce {
    0%, 5% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(40px);
    }
    15% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(5px);
    }
    25%, 100% {
        transform: translateY(0);
    }
}

/* Falling coins - slow gentle floating animation */
.la-slot__coin {
    animation: coinFloat 8s ease-in-out infinite;
}

.la-slot__coin--1 { animation-delay: 0s; animation-duration: 9s; }
.la-slot__coin--2 { animation-delay: 1s; animation-duration: 10s; }
.la-slot__coin--3 { animation-delay: 2s; animation-duration: 8s; }
.la-slot__coin--4 { animation-delay: 0.5s; animation-duration: 9.5s; }
.la-slot__coin--5 { animation-delay: 1.5s; animation-duration: 10.5s; }
.la-slot__coin--6 { animation-delay: 0.3s; animation-duration: 8.5s; }
.la-slot__coin--7 { animation-delay: 2.5s; animation-duration: 9s; }
.la-slot__coin--8 { animation-delay: 1.2s; animation-duration: 10s; }

@keyframes coinFloat {
    0% {
        transform: translateY(-60px) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(50px) rotate(180deg);
        opacity: 0;
    }
}

/* Sparkles - gentle subtle twinkle */
.la-slot__sparkle {
    animation: slotSparkleTwinkle 5s ease-in-out infinite;
    transform-origin: center;
}

.la-slot__sparkle--1 { animation-delay: 0s; }
.la-slot__sparkle--2 { animation-delay: 1s; }
.la-slot__sparkle--3 { animation-delay: 2s; }
.la-slot__sparkle--4 { animation-delay: 3s; }
.la-slot__sparkle--5 { animation-delay: 0.5s; }
.la-slot__sparkle--6 { animation-delay: 1.5s; }

@keyframes slotSparkleTwinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.7);
    }
}

/* Desktop: Show scene more prominently */
@media (min-width: 1024px) {
    .la-hero__casino-scene {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        opacity: 1;
        max-width: 350px;
        margin: 0 auto var(--la-space-lg);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .la-slot__win-glow,
    .la-slot__jackpot-banner,
    .la-slot__light,
    .la-slot__machine,
    .la-slot__reel--1,
    .la-slot__reel--2,
    .la-slot__reel--3,
    .la-slot__win-line,
    .la-slot__lever,
    .la-slot__lever-ball,
    .la-slot__coin,
    .la-slot__sparkle,
    .la-hero__featured::before,
    .la-hero__featured::after {
        animation: none;
    }
}

.la-hero__featured-card {
    position: relative;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    transition: all var(--la-transition-base);
}

.la-hero__featured-card:hover {
    border-color: var(--la-primary);
    transform: translateX(-5px);
}

.la-hero__featured-badge {
    position: absolute;
    top: -8px;
    left: var(--la-space-md);
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-secondary) 100%);
    color: #fff;
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-sm);
}

.la-hero__featured-logo {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.la-hero__featured-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-hero__featured-info {
    flex: 1;
}

.la-hero__featured-bonus {
    font-size: var(--la-text-sm);
    color: var(--la-secondary);
    font-weight: 600;
}

.la-hero__mascot {
    position: absolute;
    right: 5%;
    bottom: 0;
    max-width: 300px;
    pointer-events: none;
}

@media (max-width: 1200px) {
    .la-hero__mascot {
        display: none;
    }
}

/* ==========================================================================
   Category Tabs
   ========================================================================== */

.la-category-tabs {
    background: var(--la-bg-card);
    border-bottom: 1px solid var(--la-border);
    position: sticky;
    top: 80px;
    z-index: calc(var(--la-z-sticky) - 1);
}

.la-category-tabs__nav {
    display: flex;
    gap: var(--la-space-xs);
    padding: var(--la-space-md) 0;
    overflow-x: auto;
}

.la-category-tabs__tab {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-lg);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--la-transition-fast);
}

.la-category-tabs__tab:hover {
    color: var(--la-text-primary);
    background: var(--la-bg-light);
}

.la-category-tabs__tab.is-active {
    background: var(--la-primary);
    color: #fff;
    border-color: var(--la-primary);
}

.la-category-tabs__icon {
    display: flex;
}

.la-category-tabs__filter {
    margin-left: auto;
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    padding: var(--la-space-sm);
    color: var(--la-text-secondary);
    cursor: pointer;
}

.la-category-tabs__filters {
    display: flex;
    gap: var(--la-space-md);
    padding: var(--la-space-sm) 0 var(--la-space-md);
    border-top: 1px solid var(--la-border);
}

.la-category-tabs__checkbox {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    cursor: pointer;
}

.la-category-tabs__checkbox input {
    accent-color: var(--la-primary);
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

.la-section--alt {
    background: var(--la-bg-light);
}

.la-section__header {
    text-align: center;
    margin-bottom: var(--la-space-xl);
}

.la-section__title {
    font-size: var(--la-text-3xl);
    font-weight: 700;
    margin-bottom: var(--la-space-sm);
}

.la-section__subtitle {
    color: var(--la-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.la-section__footer {
    text-align: center;
    margin-top: var(--la-space-xl);
}

/* ==========================================================================
   Casino Card - Full Width Style
   ========================================================================== */

.la-casino-list--cards {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-casino-card--full {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: var(--la-space-lg);
    padding: 10px var(--la-space-lg);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-xl);
    transition: all var(--la-transition-base);
}

.la-casino-card--full:hover {
    border-color: var(--la-primary);
    box-shadow: var(--la-shadow-glow);
}

.la-casino-card--full.la-casino-card--featured {
    border: 2px solid var(--la-primary);
    background: linear-gradient(135deg, var(--la-bg-card) 0%, rgba(99, 102, 241, 0.05) 100%);
}

@media (max-width: 1024px) {
    .la-casino-card--full {
        grid-template-columns: 1fr;
    }
}

.la-casino-card__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-casino-card__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    overflow: hidden;
}

.la-casino-card__logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-casino-card__center {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-casino-card__bonus-grid {
    display: flex;
    gap: var(--la-space-xl);
}

.la-casino-card__bonus-item {
    text-align: center;
}

.la-casino-card__bonus-value {
    display: block;
    font-size: var(--la-text-2xl);
    font-weight: 700;
    color: var(--la-text-primary);
}

.la-casino-card__bonus-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
}

.la-casino-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
}

.la-casino-card__stat {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
}

.la-casino-card__stat svg {
    color: var(--la-primary);
}

.la-casino-card__stat-label {
    color: var(--la-text-muted);
}

.la-casino-card__payments {
    display: flex;
    gap: var(--la-space-xs);
    flex-wrap: wrap;
}

.la-casino-card__payment {
    width: 32px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
    font-size: 8px;
    color: var(--la-text-muted);
}

.la-casino-card__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
}

.la-casino-card__code {
    text-align: center;
    margin-bottom: var(--la-space-sm);
}

.la-casino-card__code-label {
    display: block;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-casino-card__code-value {
    display: inline-block;
    padding: var(--la-space-xs) var(--la-space-md);
    background: var(--la-bg-light);
    border: 2px dashed var(--la-primary);
    border-radius: var(--la-radius-md);
    font-family: monospace;
    font-weight: 600;
    color: #6366f1e8;
    cursor: pointer;
}

.la-casino-card__cta {
    width: 100%;
    text-align: center;
}

.la-casino-card__review {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    transition: color var(--la-transition-fast);
}

.la-casino-card__review:hover {
    color: #b5b5cad6;
}

/* ==========================================================================
   Top List Footer (View All Button)
   ========================================================================== */

/* Top List Content Loading State */
.la-top-list__content {
    position: relative;
    min-height: 200px;
    transition: opacity var(--la-transition-base);
}

.la-top-list__content.is-loading {
    pointer-events: none;
}

.la-top-list__content.is-loading > *:not(.la-top-list__loading) {
    opacity: 0.3;
    filter: blur(2px);
}

.la-top-list__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-md);
    z-index: 10;
    background: rgba(15, 15, 35, 0.9);
    padding: var(--la-space-xl);
    border-radius: var(--la-radius-lg);
    box-shadow: var(--la-shadow-lg);
}

.la-top-list__loading .la-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--la-border);
    border-top-color: var(--la-primary);
    border-radius: 50%;
    animation: la-spin 0.8s linear infinite;
}

.la-top-list__loading span {
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
}

.la-top-list__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--la-space-xl);
    padding-top: var(--la-space-lg);
}

.la-top-list__footer .la-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-sm);
}

/* ==========================================================================
   Casino Card - Horizontal Grid Style
   ========================================================================== */

.la-casino-list--horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--la-space-lg);
}

@media (max-width: 1024px) {
    .la-casino-list--horizontal {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .la-casino-list--horizontal {
        grid-template-columns: 1fr;
    }
}

.la-casino-card-h {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-xl);
    padding: var(--la-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
    transition: all var(--la-transition-base);
}

.la-casino-card-h:hover {
    border-color: var(--la-primary);
    transform: translateY(-4px);
    box-shadow: var(--la-shadow-lg);
}

.la-casino-card-h__header {
    position: relative;
}

.la-casino-card-h__tag {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    background: var(--la-secondary);
    color: #fff;
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-sm);
    white-space: nowrap;
}

.la-casino-card-h__logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    overflow: hidden;
}

.la-casino-card-h__logo img {
    max-width: 80%;
    max-height: 60px;
    object-fit: contain;
}

.la-casino-card-h__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-xs);
}

.la-casino-card-h__star {
    color: var(--la-accent);
}

.la-casino-card-h__rating-value {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-text-primary);
}

.la-casino-card-h__rating-max {
    color: var(--la-text-muted);
    font-size: var(--la-text-sm);
}

.la-casino-card-h__payments {
    display: flex;
    justify-content: center;
    gap: var(--la-space-xs);
}

.la-casino-card-h__bonus {
    display: flex;
    justify-content: center;
    gap: var(--la-space-lg);
    padding: var(--la-space-md) 0;
    border-top: 1px solid var(--la-border);
    border-bottom: 1px solid var(--la-border);
}

.la-casino-card-h__bonus-item {
    text-align: center;
}

.la-casino-card-h__bonus-value {
    display: block;
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: var(--la-text-primary);
}

.la-casino-card-h__bonus-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-casino-card-h__wager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-casino-card-h__cta {
    display: block;
    padding: var(--la-space-md);
    background: var(--la-secondary);
    color: #fff;
    font-weight: 600;
    text-align: center;
    border-radius: var(--la-radius-md);
    transition: all var(--la-transition-fast);
}

.la-casino-card-h__cta:hover {
    background: var(--la-secondary-hover);
    transform: translateY(-2px);
}

.la-casino-card-h__footer {
    display: flex;
    justify-content: space-between;
    font-size: var(--la-text-sm);
}

.la-casino-card-h__link {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: var(--la-text-secondary);
    cursor: pointer;
}

.la-casino-card-h__link:hover {
    color: var(--la-primary-light);
}

/* ==========================================================================
   Info Blocks
   ========================================================================== */

.la-info-blocks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--la-space-lg);
}

@media (max-width: 768px) {
    .la-info-blocks__grid {
        grid-template-columns: 1fr;
    }
}

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

.la-info-block:hover {
    border-color: var(--la-primary);
    transform: translateY(-4px);
}

.la-info-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-secondary) 100%);
    border-radius: var(--la-radius-full);
    margin-bottom: var(--la-space-md);
    color: #fff;
}

.la-info-block__title {
    font-size: var(--la-text-lg);
    font-weight: 600;
    margin-bottom: var(--la-space-sm);
}

.la-info-block__text {
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
}

/* ==========================================================================
   Archive Styles
   ========================================================================== */

.la-archive-header {
    padding: var(--la-space-xl) 0;
    background: linear-gradient(135deg, var(--la-bg-dark) 0%, var(--la-bg-light) 100%);
    border-bottom: 1px solid var(--la-border);
}

.la-archive-header__title {
    font-size: var(--la-text-3xl);
    margin-bottom: var(--la-space-sm);
}

.la-archive-header__description {
    color: var(--la-text-secondary);
    max-width: 600px;
}

.la-archive-header__stats {
    margin-top: var(--la-space-md);
    color: var(--la-text-muted);
    font-size: var(--la-text-sm);
}

.la-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    padding: 2px;
}

.la-view-toggle__btn {
    padding: var(--la-space-sm);
    background: none;
    border: none;
    color: var(--la-text-muted);
    cursor: pointer;
    border-radius: var(--la-radius-sm);
    transition: all var(--la-transition-fast);
}

.la-view-toggle__btn:hover {
    color: var(--la-text-primary);
}

.la-view-toggle__btn.is-active {
    background: var(--la-primary);
    color: #fff;
}

.la-no-results {
    text-align: center;
    padding: var(--la-space-3xl);
}

.la-no-results svg {
    color: var(--la-text-muted);
    margin-bottom: var(--la-space-md);
}

.la-no-results h2 {
    font-size: var(--la-text-xl);
    margin-bottom: var(--la-space-sm);
}

.la-no-results p {
    color: var(--la-text-secondary);
    margin-bottom: var(--la-space-lg);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.la-pagination-wrap {
    margin-top: var(--la-space-xl);
}

.la-pagination {
    display: flex;
    justify-content: center;
    gap: var(--la-space-xs);
}

.la-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--la-space-md);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-secondary);
    font-weight: 500;
    transition: all var(--la-transition-fast);
}

.la-pagination .page-numbers:hover {
    border-color: var(--la-primary);
    color: var(--la-primary);
}

.la-pagination .page-numbers.current {
    background: var(--la-primary);
    border-color: var(--la-primary);
    color: #fff;
}
 
/* ==========================================================================
   Single Casino Page
   ========================================================================== */

.la-casino-hero { 
    position: relative;
    padding: var(--la-space-xl) 0 var(--la-space-xl);
    background: linear-gradient(135deg, var(--la-bg-dark) 0%, var(--la-bg-light) 100%);
    overflow: hidden;
}

/* Background pattern */
.la-casino-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.la-casino-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    opacity: 0.8;
}

.la-casino-hero > .la-container {
    position: relative;
    z-index: 1;
}

/* Grid layout - main content and bonus box */
.la-casino-hero__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--la-space-xl);
    align-items: start;
}

/* Legacy class support */
.la-casino-hero__inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--la-space-xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .la-casino-hero__grid,
    .la-casino-hero__inner {
        grid-template-columns: 1fr;
    }
}

/* Main content area */
.la-casino-hero__main {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-lg);
        padding-top: 5px;
}

.la-breadcrumb {
    margin-bottom: var(--la-space-md);
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-breadcrumb a {
    color: var(--la-text-secondary);
}

.la-breadcrumb__sep {
    margin: 0 var(--la-space-xs);
}

.la-casino-hero__header {
    display: flex;
    gap: var(--la-space-lg);
    margin-bottom: var(--la-space-lg);
}

/* Logo wrapper with rating badge */
.la-casino-hero__logo-wrap {
    position: relative;
    flex-shrink: 0;
}

.la-casino-hero__logo {
    width: 170px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    border: 2px solid var(--la-border);
}

.la-casino-hero__logo img,
.la-casino-hero__logo-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

/* Rating badge on logo */
.la-casino-hero__rating-badge {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: var(--la-space-xs) var(--la-space-sm);
    background: linear-gradient(135deg, var(--la-secondary) 0%, var(--la-accent) 100%);
    border-radius: var(--la-radius-full);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.la-casino-hero__rating-value {
    font-size: var(--la-text-lg);
    font-weight: 800;
    color: var(--la-bg-dark);
}

.la-casino-hero__rating-max {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}

/* Title area */
.la-casino-hero__title-wrap {
    flex: 1;
    min-width: 0;
}

.la-casino-hero__title {
    font-size: var(--la-text-3xl);
    font-weight: 800;
    margin-bottom: var(--la-space-sm);
    color: var(--la-text-primary);
}

.la-casino-hero__rating {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    margin-bottom: var(--la-space-md);
}

.la-casino-hero__rating-text {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-casino-hero__rating-label {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

/* Category badges */
.la-casino-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
}

.la-casino-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-sm);
    transition: all var(--la-transition-fast);
}

.la-casino-hero__badge--category {
    background: rgba(139, 92, 246, 0.15);
    color: #818cf8;
}

.la-casino-hero__badge--category:hover {
    background: rgba(139, 92, 246, 0.25);
}

.la-casino-hero__badge--new {
    background: linear-gradient(135deg, var(--la-secondary) 0%, var(--la-accent) 100%);
    color: var(--la-bg-dark);
}

.la-casino-hero__badge--new svg {
    animation: starPulse 2s ease-in-out infinite;
}

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

.la-casino-hero__restricted {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    margin-top: var(--la-space-sm);
    padding: var(--la-space-xs) var(--la-space-sm);
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--la-radius-sm);
    font-size: var(--la-text-xs);
    color: #f87171;
}

.la-casino-hero__restricted svg {
    flex-shrink: 0;
}

.la-casino-hero__restricted-list {
    font-weight: 500;
    opacity: 0.9;
}

.la-casino-hero__cats {
    display: flex;
    gap: var(--la-space-xs);
}

/* Stats grid */
.la-casino-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--la-space-md);
}

.la-casino-hero__stat {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md);
    background: var(--la-bg-card);
    border-radius: var(--la-radius-md);
    border: 1px solid var(--la-border);
}

.la-casino-hero__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: var(--la-radius-md);
    color: var(--la-primary-light);
}

.la-casino-hero__stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.la-casino-hero__stat-value {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-casino-hero__stat-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-casino-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
}

.la-casino-hero__feature {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-md);
    background: var(--la-bg-card);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    border: 1px solid var(--la-border);
}

.la-casino-hero__feature svg {
    flex-shrink: 0;
}

.la-casino-hero__feature--positive {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.la-casino-hero__feature--positive svg {
    color: #22c55e;
}

.la-casino-hero__feature--license {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.la-casino-hero__feature--license svg {
    color: #3b82f6;
}

/* Casino hero bonus wrapper */
.la-casino-hero__bonus {
    position: relative;
    min-width: 320px;
    max-width: 380px;
}

/* ============================================
   Bonus Box - Clean Professional Design
   ============================================ */
.la-bonus-box {
    position: relative;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-xl);
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(139, 92, 246, 0.1);
}

/* Header - gradient background with badge and label */
.la-bonus-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-md);
    padding: var(--la-space-md) var(--la-space-lg);
    background: linear-gradient(135deg, var(--la-primary) 0%, #7c3aed 100%);
}

.la-bonus-box__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--la-radius-sm);
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
}

.la-bonus-box__label {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--la-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Body - main bonus content */
.la-bonus-box__body {
    padding: 22px;
    text-align: center;
    background: radial-gradient(ellipse at center top, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
}

.la-bonus-box__amount {
    margin-bottom: var(--la-space-md);
}

.la-bonus-box__amount-label {
    display: block;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
}

.la-bonus-box__amount-value {
    display: block;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShine 3s linear infinite;
}

@keyframes goldShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.la-bonus-box__spins {
    display: inline-block;
    color: #22c55e;
    font-size: var(--la-text-lg);
    font-weight: 700;
    margin-bottom: var(--la-space-sm);
}

.la-bonus-box__desc {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Info row - wagering and min deposit */
.la-bonus-box__info {
    display: flex;
    border-top: 1px solid var(--la-border);
    border-bottom: 1px solid var(--la-border);
}

.la-bonus-box__info-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md);
}

.la-bonus-box__info-item:first-child {
    border-right: 1px solid var(--la-border);
}

.la-bonus-box__info-item svg {
    flex-shrink: 0;
    color: #818cf8;
    opacity: 1;
}

.la-bonus-box__info-text {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-bonus-box__info-text strong {
    color: var(--la-text-primary);
    font-weight: 700;
}

/* Code section */
.la-bonus-box__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-md);
    padding: var(--la-space-md) var(--la-space-lg);
    background: rgba(139, 92, 246, 0.05);
}

.la-bonus-box__code-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.la-bonus-box__code-value {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-md);
    border: 2px dashed var(--la-primary);
    border-radius: var(--la-radius-md);
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-primary-light);
    background: rgba(139, 92, 246, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.la-bonus-box__code-value:hover {
    border-color: var(--la-primary-light);
    background: rgba(139, 92, 246, 0.15);
}

.la-bonus-box__code-value svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* Action - CTA button */
.la-bonus-box__action {
    padding: var(--la-space-md) var(--la-space-lg);
}

.la-bonus-box__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    width: 100%;
    padding: var(--la-space-md) var(--la-space-lg);
    font-size: var(--la-text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    border: none;
    border-radius: var(--la-radius-md);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.35);
    transition: all 0.2s ease;
}

.la-bonus-box__cta:hover {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.45);
    transform: translateY(-2px);
}

.la-bonus-box__cta svg {
    transition: transform 0.2s ease;
}

.la-bonus-box__cta:hover svg {
    transform: translateX(4px);
}

/* Footer - 18+ and terms */
.la-bonus-box__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-md);
    padding: var(--la-space-sm) var(--la-space-lg);
    background: rgba(0, 0, 0, 0.2);
    font-size: 11px;
    color: var(--la-text-muted);
}

.la-bonus-box__footer span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    font-weight: 800;
    font-size: 10px;
    border-radius: var(--la-radius-sm);
}

.la-bonus-box__terms-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--la-text-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.la-bonus-box__terms-link:hover {
    color: #fff;
}

.la-bonus-box__terms-content {
    padding: var(--la-space-md);
    background: rgba(0, 0, 0, 0.3);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    line-height: 1.5;
    border-radius: 0 0 var(--la-radius-lg) var(--la-radius-lg);
}

.la-bonus-box__terms-content p {
    margin: 0;
}

.la-bonus-box__terms {
    margin-top: var(--la-space-sm);
}

.la-bonus-box__terms-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: var(--la-space-xs) var(--la-space-sm);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--la-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    list-style: none;
}

.la-bonus-box__terms-toggle::-webkit-details-marker {
    display: none;
}

.la-bonus-box__terms-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.la-bonus-box__terms[open] .la-bonus-box__terms-toggle {
    border-radius: var(--la-radius-sm) var(--la-radius-sm) 0 0;
}

.la-bonus-box__terms[open] .la-bonus-box__terms-content {
    margin-top: 0;
    border-radius: 0 0 var(--la-radius-sm) var(--la-radius-sm);
}

/* Responsive */
@media (max-width: 480px) {
    .la-casino-hero__bonus {
        min-width: auto;
        max-width: none;
    }
    .la-casino-hero__logo { 
        width: 120px;
        height: 100px;
    }
    .la-bonus-box__amount-value {
        font-size: 2.25rem;
    }

    .la-bonus-box__info {
        flex-direction: column;
    }

    .la-bonus-box__info-item:first-child {
        border-right: none;
        border-bottom: 1px solid var(--la-border);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .la-bonus-box__amount-value {
        animation: none;
    }
}

/* Casino Navigation */
.la-casino-nav {
    background: var(--la-bg-card);
    border-bottom: 1px solid var(--la-border);
    position: sticky;
    top: 80px;
    z-index: calc(var(--la-z-sticky) - 1);
}

.la-casino-nav__tabs {
    display: flex;
    gap: var(--la-space-xs);
    padding: var(--la-space-md) 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.la-casino-nav__tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.la-casino-nav__tab {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-sm) var(--la-space-lg);
    color: var(--la-text-secondary);
    font-weight: 500;
    border-radius: var(--la-radius-md);
    transition: all var(--la-transition-fast);
    white-space: nowrap;
}

.la-casino-nav__tab svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.la-casino-nav__tab.is-active svg {
    opacity: 1;
}

.la-casino-nav__tab:hover {
    background: var(--la-bg-light);
    color: var(--la-text-primary);
}

.la-casino-nav__tab.is-active {
    background: var(--la-primary);
    color: #fff;
}

.la-casino-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-md);
}

.la-casino-nav__cta {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .la-casino-nav__cta {
        display: none!important;
    }
} 
/* Casino Content */
.la-casino-content {
    padding: var(--la-space-xl) 0;
}

.la-casino-content__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--la-space-xl);
}

@media (max-width: 1024px) {
    .la-casino-content__grid {
        grid-template-columns: 1fr;
    }
}

.la-casino-section {
    margin-bottom: var(--la-space-xl);
}

.la-casino-section__header {
    margin-bottom: var(--la-space-lg);
}

.la-casino-section__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-size: var(--la-text-xl);
    font-weight: 700;
    padding-bottom: var(--la-space-md);
    border-bottom: 2px solid var(--la-border);
    margin-bottom: 0;
}

.la-casino-section__title svg {
    color: var(--la-primary-light);
    flex-shrink: 0;
}

/* Rating Breakdown */
.la-rating-breakdown {
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    margin-top: var(--la-space-lg);
}

.la-rating-breakdown__title {
    font-size: var(--la-text-lg);
    font-weight: 600;
    margin-bottom: var(--la-space-md);
    color: var(--la-text-primary);
}

.la-rating-breakdown__grid {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-rating-breakdown__item {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: var(--la-space-md);
}

.la-rating-breakdown__label {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-rating-breakdown__bar {
    height: 8px;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-full);
    overflow: hidden;
}

.la-rating-breakdown__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--la-primary) 0%, var(--la-secondary) 100%);
    border-radius: var(--la-radius-full);
    transition: width 0.5s ease;
}

.la-rating-breakdown__value {
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-secondary);
    text-align: right;
}

@media (max-width: 480px) {
    .la-rating-breakdown__item {
        grid-template-columns: 80px 1fr 35px;
        gap: var(--la-space-sm);
    }

    .la-rating-breakdown__label {
        font-size: var(--la-text-xs);
    }
}

/* Pros & Cons - Casino Single Page */
.la-pros-cons__column--pros,
.la-pros-cons__column--cons {
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    border: 1px solid var(--la-border);
    transition: box-shadow var(--la-transition-base), border-color var(--la-transition-base);
}

.la-pros-cons__column--pros:hover,
.la-pros-cons__column--cons:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.la-pros-cons__column--pros .la-pros-cons__header,
.la-pros-cons__column--cons .la-pros-cons__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    margin-bottom: var(--la-space-md);
    padding-bottom: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border);
}

.la-pros-cons__column--pros .la-pros-cons__header {
    color: #22c55e;
}

.la-pros-cons__column--cons .la-pros-cons__header {
    color: #ef4444;
}

.la-pros-cons__column--pros .la-pros-cons__header svg,
.la-pros-cons__column--cons .la-pros-cons__header svg {
    flex-shrink: 0;
}

.la-pros-cons__column--pros .la-pros-cons__header h3,
.la-pros-cons__column--cons .la-pros-cons__header h3 {
    margin: 0;
    font-size: var(--la-text-base);
    font-weight: 600;
}

.la-pros-cons__column--pros .la-pros-cons__list,
.la-pros-cons__column--cons .la-pros-cons__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-pros-cons__column--pros .la-pros-cons__list li,
.la-pros-cons__column--cons .la-pros-cons__list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 0;
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: 1.5;
}

.la-pros-cons__column--pros .la-pros-cons__list li:last-child,
.la-pros-cons__column--cons .la-pros-cons__list li:last-child {
    margin-bottom: 0;
}

/* Icons are rendered via .la-pros-cons__item-icon in HTML */

.la-casino-content__main {
    min-width: 0;
}

/* Casino sidebar */
.la-casino-content__sidebar {
    min-width: 0;
}

.la-casino-sidebar-sticky {
    position: sticky;
    top: 90px; /* Header height + spacing */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-bottom: var(--la-space-lg);
}

/* Hide scrollbar but keep functionality */
.la-casino-sidebar-sticky::-webkit-scrollbar {
    width: 4px;
}

.la-casino-sidebar-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.la-casino-sidebar-sticky::-webkit-scrollbar-thumb {
    background: var(--la-border);
    border-radius: 4px;
}

.la-casino-sidebar-sticky::-webkit-scrollbar-thumb:hover {
    background: var(--la-text-muted);
}

/* Disable sticky on mobile */
@media (max-width: 991px) {
    .la-casino-sidebar-sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* ==========================================================================
   Casino Bottom CTA Banner
   ========================================================================== */

.la-casino-bottom-cta {
    margin-top: var(--la-space-3xl);
    margin-bottom: var(--la-space-2xl);
    margin-left: var(--la-space-2xl);
    margin-right: var(--la-space-2xl);
    padding: var(--la-space-xl) 0;
    background: linear-gradient(135deg, var(--la-primary) 0%, #4338ca 50%, #6d28d9 100%);
    border-radius: var(--la-radius-xl);
    position: relative;
    overflow: hidden;
}

.la-casino-bottom-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.la-casino-bottom-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-xl);
    position: relative;
    z-index: 1;
}

.la-casino-bottom-cta__content {
    display: flex;
    align-items: center;
    gap: var(--la-space-lg);
    flex: 1;
    min-width: 0;
}

.la-casino-bottom-cta__logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.la-casino-bottom-cta__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--la-radius-md);
}

.la-casino-bottom-cta__text {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-xs);
    min-width: 0;
}

.la-casino-bottom-cta__title {
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-casino-bottom-cta__subtitle {
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-casino-bottom-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md) var(--la-space-xl);
    background: var(--la-secondary);
    color: #fff;
    font-size: var(--la-text-lg);
    font-weight: 700;
    border-radius: var(--la-radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.la-casino-bottom-cta__btn:hover {
    background: var(--la-secondary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.la-casino-bottom-cta__btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.la-casino-bottom-cta__btn:hover svg {
    transform: translateX(4px);
}

/* Mobile responsive - Fixed sticky CTA at bottom */
@media (max-width: 768px) {
    .la-casino-bottom-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: var(--la-space-md) 0;
        border-radius: var(--la-radius-xl) var(--la-radius-xl) 0 0;
        z-index: 1000;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }

    .la-casino-bottom-cta.is-visible {
        transform: translateY(0);
    }

    .la-casino-bottom-cta::before {
        display: none;
    }

    .la-casino-bottom-cta__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--la-space-md);
        padding: 0 var(--la-space-md);
    }

    .la-casino-bottom-cta__content {
        flex-direction: row;
        align-items: center;
        gap: var(--la-space-sm);
        flex: 1;
        min-width: 0;
    }

    .la-casino-bottom-cta__logo {
        width: 44px;
        height: 44px;
        padding: var(--la-space-xs);
        flex-shrink: 0;
    }

    .la-casino-bottom-cta__text {
        gap: 2px;
        min-width: 0;
    }

    .la-casino-bottom-cta__title {
        font-size: 10px;
        letter-spacing: 0.03em;
    }

    .la-casino-bottom-cta__subtitle {
        font-size: var(--la-text-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .la-casino-bottom-cta__btn {
        flex-shrink: 0;
        padding: var(--la-space-sm) var(--la-space-md);
        font-size: var(--la-text-sm);
        border-radius: var(--la-radius-md);
    }

    .la-casino-bottom-cta__btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Spacer to prevent content from being hidden behind fixed CTA on mobile */
@media (max-width: 768px) {
    .la-casino-bottom-cta + .la-footer,
    .la-casino-bottom-cta ~ .la-footer {
        padding-bottom: 80px;
    }
}

.la-content {
    line-height: var(--la-leading-relaxed);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Homepage content section */
.la-homepage-content {
    overflow: hidden;
}

.la-homepage-content .la-content {
    max-width: 100%;
}

/* Fix for Gutenberg blocks overflow */
.la-content > * {
    max-width: 100%;
}

.la-content img,
.la-content iframe,
.la-content video,
.la-content table {
    max-width: 100%;
    height: auto;
}

.la-content pre,
.la-content code {
    overflow-x: auto;
    max-width: 100%;
}

.la-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Exclude casino table block from content table styles */
.la-content .la-casino-table-wrapper,
.la-content .wp-block-luckyaff-casino-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
}

.la-content .la-casino-table {
    display: table;
    width: 100%;
    overflow-x: visible;
}

.la-content h2 {
    font-size: var(--la-text-2xl);
    margin-top: var(--la-space-xl);
    margin-bottom: var(--la-space-md);
}

.la-content h3 {
    font-size: var(--la-text-xl);
    margin-top: var(--la-space-lg);
    margin-bottom: var(--la-space-sm);
}

.la-content p {
    margin-bottom: var(--la-space-md);
}

.la-content ul, .la-content ol {
    margin-bottom: var(--la-space-md);
    padding-left: 0;
}

/* Payment & Provider Grids */
.la-payment-grid,
.la-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--la-space-sm);
}

.la-payment-item,
.la-provider-item {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

/* Game Types */
.la-games-types {
    margin-bottom: var(--la-space-lg);
}

.la-games-types__title,
.la-game-providers__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    margin-bottom: var(--la-space-md);
    color: var(--la-text-primary);
}

.la-games-types__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
}

.la-games-types__item {
    display: inline-flex;
    align-items: center;
    padding: var(--la-space-xs) var(--la-space-md);
    background: linear-gradient(135deg, var(--la-primary-light), var(--la-primary));
    color: #fff;
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 500;
}

.la-game-providers {
    margin-top: var(--la-space-lg);
}

/* Casino Info Box */
.la-casino-info-box {
    margin-bottom: var(--la-space-lg);
}

.la-casino-info-box__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    padding-bottom: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border);
    margin-bottom: var(--la-space-md);
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-casino-info-box__list {
    margin: 0;
}

.la-casino-info-box__list dt {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--la-space-xs);
}

.la-casino-info-box__list dd {
    margin: 0 0 var(--la-space-md);
    font-weight: 500;
    color: var(--la-text-primary);
}

.la-casino-info-box__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
    margin-top: var(--la-space-md);
    padding-top: var(--la-space-md);
    border-top: 1px solid var(--la-border);
}

.la-casino-info-box__feature {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    background: var(--la-success-soft);
    color: var(--la-success);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    font-weight: 500;
}

.la-casino-info-box__feature svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.la-casino-info-box__feature .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.la-casino-info-box__custom-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
    margin-top: var(--la-space-sm);
}

.la-casino-info-box__feature--custom {
    background: var(--la-primary-light);
    color: var(--la-primary);
}

.la-casino-info-box__payment {
    display: flex;
    gap: var(--la-space-sm);
    margin-top: var(--la-space-md);
    padding-top: var(--la-space-md);
    border-top: 1px solid var(--la-border);
}

.la-casino-info-box__payment-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--la-space-sm);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    text-align: center;
}

.la-casino-info-box__payment-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
    line-height: 1.2;
}

.la-casino-info-box__payment-value {
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-primary);
}

.la-casino-info-box__cta {
    margin-top: var(--la-space-md);
}

/* Similar Casinos */
.la-similar-casinos__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    padding-bottom: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border);
    margin-bottom: var(--la-space-md);
}

.la-similar-casinos__item {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm);
    border-radius: var(--la-radius-md);
    transition: background var(--la-transition-fast);
    margin-bottom: var(--la-space-xs);
}

.la-similar-casinos__item:hover {
    background: var(--la-bg-light);
}

.la-similar-casinos__logo {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
    overflow: hidden;
}

.la-similar-casinos__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-similar-casinos__info {
    flex: 1;
}

.la-similar-casinos__name {
    display: block;
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-text-primary);
}

.la-similar-casinos__bonus {
    font-size: var(--la-text-xs);
    color: var(--la-secondary);
}

.la-similar-casinos__rating {
    font-weight: 700;
    color: var(--la-accent);
}

/* ==========================================================================
   Skip Link
   ========================================================================== */

.la-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--la-space-md);
    z-index: 9999;
    padding: var(--la-space-md);
    background: var(--la-primary);
    color: #fff;
    border-radius: var(--la-radius-md);
}

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

/* ==========================================================================
   Payment Icon Placeholder
   ========================================================================== */

.la-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 18px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.la-404 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--la-space-3xl) var(--la-space-md);
    background: var(--la-bg-gradient);
    overflow: hidden;
}

.la-404__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.la-404__cards {
    position: absolute;
    inset: 0;
}

.la-404__card {
    position: absolute;
    font-size: 4rem;
    opacity: 0.05;
    animation: float404 8s ease-in-out infinite;
}

.la-404__card--1 { top: 10%; left: 10%; animation-delay: 0s; color: #ef4444; }
.la-404__card--2 { top: 20%; right: 15%; animation-delay: 1s; color: #ef4444; }
.la-404__card--3 { bottom: 30%; left: 5%; animation-delay: 2s; color: #ef4444; }
.la-404__card--4 { bottom: 15%; right: 20%; animation-delay: 3s; }
.la-404__card--5 { top: 50%; left: 50%; animation-delay: 4s; color: var(--la-accent); }
.la-404__card--6 { top: 40%; right: 5%; animation-delay: 5s; }

@keyframes float404 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.la-404__dice {
    position: absolute;
}

.la-404__die {
    position: absolute;
    font-size: 3rem;
    opacity: 0.08;
    animation: spin404 12s linear infinite;
}

.la-404__die--1 { top: 60%; left: 20%; animation-direction: reverse; }
.la-404__die--2 { top: 25%; right: 30%; }

@keyframes spin404 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.la-404__content {
    position: relative;
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--la-space-3xl);
}

/* Slot Machine Style 404 */
.la-404__slot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--la-space-xl);
}

.la-404__slot-frame {
    display: flex;
    gap: var(--la-space-sm);
    background: linear-gradient(180deg, #2d2d44 0%, #1a1a2e 100%);
    padding: var(--la-space-md);
    border-radius: var(--la-radius-lg);
    border: 3px solid var(--la-accent);
    box-shadow:
        0 0 30px rgba(245, 158, 11, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.la-404__slot-window {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a2e 50%, #0f0f23 100%);
    border-radius: var(--la-radius-md);
    padding: var(--la-space-md) var(--la-space-lg);
    border: 2px solid var(--la-border);
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
}

.la-404__slot-num {
    font-family: var(--la-font-display);
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(180deg, var(--la-accent) 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    animation: slotBounce 2s ease-in-out infinite;
}

.la-404__slot-window:nth-child(2) .la-404__slot-num {
    animation-delay: 0.2s;
}

.la-404__slot-window:nth-child(3) .la-404__slot-num {
    animation-delay: 0.4s;
}

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

.la-404__slot-lever {
    width: 16px;
    height: 80px;
    background: linear-gradient(90deg, #9ca3af, #d1d5db, #9ca3af);
    border-radius: var(--la-radius-full);
    margin-left: var(--la-space-md);
    position: relative;
}

.la-404__slot-lever::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

.la-404__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-3xl);
    font-weight: 700;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-md);
}

.la-404__subtitle {
    font-size: var(--la-text-lg);
    color: var(--la-text-secondary);
    margin-bottom: var(--la-space-xl);
}

/* 404 Search */
.la-404__search {
    margin-bottom: var(--la-space-xl);
}

.la-404__search-form {
    display: flex;
    gap: var(--la-space-sm);
    max-width: 500px;
    margin: 0 auto;
}

.la-404__search-input-wrap {
    flex: 1;
    position: relative;
}

.la-404__search-icon {
    position: absolute;
    left: var(--la-space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--la-text-muted);
}

.la-404__search-input {
    width: 100%;
    padding: var(--la-space-md) var(--la-space-md) var(--la-space-md) 3rem;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
    transition: var(--la-transition-base);
}

.la-404__search-input:focus {
    outline: none;
    border-color: var(--la-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.la-404__search-btn {
    white-space: nowrap;
}

/* 404 Actions */
.la-404__actions {
    display: flex;
    gap: var(--la-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* 404 Suggestions */
.la-404__suggestions {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.la-404__suggestions-title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-xl);
    font-weight: 600;
    color: var(--la-text-primary);
    text-align: center;
    margin-bottom: var(--la-space-lg);
}

.la-404__suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--la-space-md);
}

.la-404__casino-card {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    transition: var(--la-transition-base);
}

.la-404__casino-card:hover {
    border-color: var(--la-primary);
    transform: translateY(-2px);
    box-shadow: var(--la-shadow-lg);
}

.la-404__casino-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--la-radius-md);
    overflow: hidden;
    background: var(--la-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.la-404__casino-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-404__casino-info {
    flex: 1;
    min-width: 0;
}

.la-404__casino-name {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-404__casino-rating {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    color: var(--la-accent);
    margin-bottom: var(--la-space-xs);
}

.la-404__casino-bonus {
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Search Page
   ========================================================================== */

.la-search-page {
    padding: var(--la-space-3xl) 0;
    min-height: 60vh;
}

.la-search-page__header {
    text-align: center;
    margin-bottom: var(--la-space-2xl);
}

.la-search-page__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-3xl);
    font-weight: 700;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-sm);
}

.la-search-page__count {
    font-size: var(--la-text-base);
    color: var(--la-text-secondary);
    margin-bottom: var(--la-space-lg);
}

.la-search-page__form-wrap {
    max-width: 600px;
    margin: 0 auto;
}

.la-search-page__form {
    display: flex;
    gap: var(--la-space-sm);
}

.la-search-page__input-wrap {
    flex: 1;
    position: relative;
}

.la-search-page__input-wrap svg {
    position: absolute;
    left: var(--la-space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--la-text-muted);
}

.la-search-page__input {
    width: 100%;
    padding: var(--la-space-md) var(--la-space-md) var(--la-space-md) 3rem;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
}

.la-search-page__input:focus {
    outline: none;
    border-color: var(--la-primary);
}

/* Search Results */
.la-search-page__results {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-search-result {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--la-space-md);
    align-items: center;
    padding: var(--la-space-lg);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    transition: var(--la-transition-base);
}

.la-search-result:hover {
    border-color: var(--la-primary);
    box-shadow: var(--la-shadow);
}

.la-search-result__type {
    grid-column: 1 / -1;
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--la-primary-light);
    background: rgba(99, 102, 241, 0.1);
    padding: var(--la-space-xs) var(--la-space-sm);
    border-radius: var(--la-radius-sm);
    width: fit-content;
    margin-bottom: var(--la-space-sm);
}

.la-search-result--casino .la-search-result__type { background: rgba(16, 185, 129, 0.1); color: var(--la-secondary); }
.la-search-result--game .la-search-result__type { background: rgba(99, 102, 241, 0.1); color: var(--la-primary-light); }
.la-search-result--bonus .la-search-result__type { background: rgba(245, 158, 11, 0.1); color: var(--la-accent); }

.la-search-result__logo,
.la-search-result__thumb {
    width: 80px;
    height: 60px;
    border-radius: var(--la-radius-md);
    overflow: hidden;
    background: var(--la-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.la-search-result__logo img,
.la-search-result__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-search-result__thumb-placeholder {
    color: var(--la-text-muted);
}

.la-search-result__content {
    min-width: 0;
}

.la-search-result__title {
    font-size: var(--la-text-lg);
    font-weight: 600;
    margin-bottom: var(--la-space-xs);
}

.la-search-result__title a {
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-search-result__title a:hover {
    color: var(--la-primary);
}

.la-search-result__rating {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    color: var(--la-accent);
    margin-bottom: var(--la-space-xs);
}

.la-search-result__bonus,
.la-search-result__provider,
.la-search-result__value,
.la-search-result__excerpt {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-search-result__date {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    margin-top: var(--la-space-xs);
}

.la-search-result__actions {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

/* No Results */
.la-search-page__no-results {
    text-align: center;
    padding: var(--la-space-3xl) var(--la-space-md);
}

.la-search-page__no-results-icon {
    color: var(--la-text-muted);
    margin-bottom: var(--la-space-lg);
}

.la-search-page__no-results h2 {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 600;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-sm);
}

.la-search-page__no-results p {
    color: var(--la-text-secondary);
    margin-bottom: var(--la-space-xl);
}

.la-search-page__suggestions {
    display: flex;
    gap: var(--la-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.la-search-page__pagination {
    margin-top: var(--la-space-2xl);
}

/* ==========================================================================
   Live Search Overlay Results
   ========================================================================== */

.la-live-search-results {
    max-height: 60vh;
    overflow-y: auto;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    margin-top: var(--la-space-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--la-transition-base);
}

.la-live-search-results.is-visible {
    opacity: 1;
    visibility: visible;
}

.la-live-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-xl);
    color: var(--la-text-secondary);
}

.la-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--la-border);
    border-top-color: var(--la-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.la-live-search-empty {
    padding: var(--la-space-xl);
    text-align: center;
    color: var(--la-text-secondary);
}

.la-live-search-grid {
    padding: var(--la-space-md);
}

.la-live-search-section {
    margin-bottom: var(--la-space-md);
}

.la-live-search-section:last-child {
    margin-bottom: 0;
}

.la-live-search-section__title {
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--la-text-muted);
    padding: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border);
    margin-bottom: var(--la-space-sm);
}

.la-live-search-section__items {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-xs);
}

.la-live-search-item {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-sm) var(--la-space-md);
    border-radius: var(--la-radius-md);
    text-decoration: none;
    transition: var(--la-transition-fast);
}

.la-live-search-item:hover {
    background: var(--la-bg-card-hover);
}

.la-live-search-item__logo,
.la-live-search-item__thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--la-radius-sm);
    object-fit: contain;
    background: var(--la-bg-light);
    flex-shrink: 0;
}

.la-live-search-item__content {
    flex: 1;
    min-width: 0;
}

.la-live-search-item__title {
    display: block;
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-live-search-item__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--la-text-xs);
    color: var(--la-accent);
}

.la-live-search-item__provider,
.la-live-search-item__value,
.la-live-search-item__excerpt {
    display: block;
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-live-search-item__cta {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-secondary);
    white-space: nowrap;
}

.la-live-search-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md);
    border-top: 1px solid var(--la-border);
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-primary);
    text-decoration: none;
    transition: var(--la-transition-fast);
}

.la-live-search-viewall:hover {
    color: var(--la-primary-hover);
    background: rgba(99, 102, 241, 0.05);
}

/* ==========================================================================
   Page Template
   ========================================================================== */

.la-page {
    padding: var(--la-space-3xl) 0;
}

.la-page--with-sidebar .la-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--la-space-2xl);
}

.la-page__header {
    margin-bottom: var(--la-space-xl);
}

.la-page__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-4xl);
    font-weight: 700;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-md);
}

.la-page__excerpt {
    font-size: var(--la-text-lg);
    color: var(--la-text-secondary);
}

.la-page__featured-image {
    margin-bottom: var(--la-space-xl);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
}

.la-page__featured-image img {
    width: 100%;
    height: auto;
}

.la-page__content {
    line-height: var(--la-leading-relaxed);
}

.la-page__sidebar {
    position: sticky;
    top: calc(80px + var(--la-space-lg));
}

.la-page-links {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    margin-top: var(--la-space-xl);
    padding-top: var(--la-space-xl);
    border-top: 1px solid var(--la-border);
}

.la-page-links__label {
    font-weight: 500;
    color: var(--la-text-secondary);
}

.la-page-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    color: var(--la-text-primary);
    text-decoration: none;
    transition: var(--la-transition-fast);
}

.la-page-links a:hover {
    border-color: var(--la-primary);
    background: var(--la-primary);
}

/* ==========================================================================
   Single Post Template
   ========================================================================== */

.la-single-post {
    padding: var(--la-space-3xl) 0;
}

.la-single-post__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--la-space-xl);
}

.la-single-post__categories {
    display: flex;
    justify-content: center;
    gap: var(--la-space-sm);
    margin-bottom: var(--la-space-md);
}

.la-single-post__category {
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--la-primary-light);
    background: rgba(99, 102, 241, 0.1);
    padding: var(--la-space-xs) var(--la-space-sm);
    border-radius: var(--la-radius-sm);
    text-decoration: none;
    transition: var(--la-transition-fast);
}

.la-single-post__category:hover {
    background: rgba(99, 102, 241, 0.2);
}

.la-single-post__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-4xl);
    font-weight: 700;
    color: var(--la-text-primary);
    line-height: var(--la-leading-tight);
    margin-bottom: var(--la-space-lg);
}

.la-single-post__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-lg);
    flex-wrap: wrap;
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
}

.la-single-post__author {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-single-post__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.la-single-post__reading-time {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
}

.la-single-post__featured-image {
    max-width: 900px;
    margin: 0 auto var(--la-space-2xl);
    border-radius: var(--la-radius-xl);
    overflow: hidden;
}

.la-single-post__featured-image img {
    width: 100%;
    height: auto;
}

.la-single-post__caption {
    padding: var(--la-space-sm);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    text-align: center;
    background: var(--la-bg-card);
}

.la-single-post__content {
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--la-leading-relaxed);
}

.la-single-post__footer {
    max-width: 700px;
    margin: var(--la-space-xl) auto 0;
    padding-top: var(--la-space-xl);
    border-top: 1px solid var(--la-border);
}

.la-single-post__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-single-post__tags-label {
    font-weight: 500;
    color: var(--la-text-secondary);
}

.la-single-post__tags a {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    background: var(--la-bg-card);
    padding: var(--la-space-xs) var(--la-space-sm);
    border-radius: var(--la-radius-sm);
    text-decoration: none;
    transition: var(--la-transition-fast);
}

.la-single-post__tags a:hover {
    color: var(--la-primary);
    background: rgba(99, 102, 241, 0.1);
}

/* Share Buttons */
.la-single-post__share {
    max-width: 700px;
    margin: var(--la-space-xl) auto;
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-single-post__share-label {
    font-weight: 500;
    color: var(--la-text-secondary);
}

.la-single-post__share-buttons {
    display: flex;
    gap: var(--la-space-sm);
}

.la-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--la-radius-md);
    color: #fff;
    transition: var(--la-transition-fast);
}

.la-share-btn--facebook { background: #1877f2; }
.la-share-btn--twitter { background: #1da1f2; }
.la-share-btn--linkedin { background: #0077b5; }

.la-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--la-shadow);
}

/* Author Box */
.la-author-box {
    /* max-width: 700px; */
    margin: var(--la-space-xl) auto;
    padding: var(--la-space-lg);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    display: flex;
    gap: var(--la-space-lg);
}

.la-author-box__avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.la-author-box__content {
    flex: 1;
}

.la-author-box__name {
    font-size: var(--la-text-lg);
    font-weight: 600;
    color: var(--la-text-primary);
}

.la-author-box__name a {
    color: var(--la-primary);
    text-decoration: none;
}

.la-author-box__bio {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: var(--la-leading-relaxed);
}

/* Related Posts */
.la-related-posts {
    max-width: 900px;
    margin: var(--la-space-3xl) auto 0;
    padding-top: var(--la-space-2xl);
    border-top: 1px solid var(--la-border);
}

.la-related-posts__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 600;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-lg);
}

.la-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--la-space-lg);
}

.la-related-post-card {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    transition: var(--la-transition-base);
}

.la-related-post-card:hover {
    border-color: var(--la-primary);
    transform: translateY(-2px);
    box-shadow: var(--la-shadow);
}

.la-related-post-card__image {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.la-related-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--la-transition-base);
}

.la-related-post-card:hover .la-related-post-card__image img {
    transform: scale(1.05);
}

.la-related-post-card__content {
    padding: var(--la-space-md);
}

.la-related-post-card__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    margin-bottom: var(--la-space-sm);
}

.la-related-post-card__title a {
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-related-post-card__date {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* ==========================================================================
   Archive Template
   ========================================================================== */

.la-archive {
    padding: var(--la-space-3xl) 0;
}

.la-archive__header {
    text-align: center;
    margin-bottom: var(--la-space-2xl);
}

.la-archive__author-avatar {
    margin-bottom: var(--la-space-md);
}

.la-archive__author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--la-primary);
}

.la-archive__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-3xl);
    font-weight: 700;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-sm);
}

.la-archive__description {
    max-width: 600px;
    margin: 0 auto var(--la-space-md);
    color: var(--la-text-secondary);
}

.la-archive__count {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

/* Post Card */
.la-archive__posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--la-space-lg);
}

.la-post-card {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    transition: var(--la-transition-base);
}

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

.la-post-card__image {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--la-bg-light);
}

.la-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--la-transition-base);
}

.la-post-card:hover .la-post-card__image img {
    transform: scale(1.05);
}

.la-post-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--la-text-muted);
}

.la-post-card__content {
    padding: var(--la-space-lg);
}

.la-post-card__category {
    display: inline-block;
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--la-primary-light);
    background: rgba(99, 102, 241, 0.1);
    padding: var(--la-space-xs) var(--la-space-sm);
    border-radius: var(--la-radius-sm);
    text-decoration: none;
    margin-bottom: var(--la-space-sm);
}

.la-post-card__title {
    font-size: var(--la-text-xl);
    font-weight: 600;
    line-height: var(--la-leading-tight);
    margin-bottom: var(--la-space-sm);
}

.la-post-card__title a {
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-post-card__excerpt {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: var(--la-leading-relaxed);
    margin-bottom: var(--la-space-md);
}

.la-post-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-post-card__author {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-post-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* Archive No Posts */
.la-archive__no-posts {
    text-align: center;
    padding: var(--la-space-3xl) var(--la-space-md);
    color: var(--la-text-muted);
}

.la-archive__no-posts svg {
    margin-bottom: var(--la-space-lg);
}

.la-archive__no-posts h2 {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 600;
    color: var(--la-text-primary);
    margin-bottom: var(--la-space-sm);
}

.la-archive__no-posts p {
    margin-bottom: var(--la-space-xl);
}

.la-archive__pagination {
    margin-top: var(--la-space-2xl);
}

/* ==========================================================================
   Author Box - E-E-A-T Component
   ========================================================================== */

.la-author-box {
    background: var(--la-bg-secondary);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    margin-top: var(--la-space-lg);
    border: 1px solid var(--la-border);
    position: relative;
}

/* Casino page inline variant */
.la-author-box--casino {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    margin-top: 0;
    padding: var(--la-space-md) var(--la-space-lg);
    flex-direction: column;
    gap: 0;
}

.la-author-box__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    margin-bottom: var(--la-space-md);
    padding-bottom: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border);
}

.la-author-box__label {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-author-box__label svg {
    opacity: 0.7;
}

.la-author-box__role-label {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--la-space-sm);
    padding-bottom: var(--la-space-sm);
    border-bottom: 1px solid var(--la-border);
}

.la-author-box__role-label svg {
    opacity: 0.8;
    color: var(--la-primary);
}

.la-author-box--casino .la-author-box__role-label {
    color: var(--la-success);
    border-bottom-color: rgba(16, 185, 129, 0.2);
}

.la-author-box--casino .la-author-box__role-label svg {
    color: var(--la-success);
}

.la-author-box__content {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-md);
}

/* Avatar */
.la-author-box__avatar {
    flex-shrink: 0;
}

.la-author-box__avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--la-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform var(--la-transition), box-shadow var(--la-transition);
}

.la-author-box--casino .la-author-box__avatar img {
    width: 48px;
    height: 48px;
    border-color: rgba(255, 255, 255, 0.4);
}

.la-author-box__avatar a:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.la-author-box__avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--la-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--la-text-muted);
}

.la-author-box--casino .la-author-box__avatar-placeholder {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

/* Info section */
.la-author-box__info {
    flex: 1;
    min-width: 0;
}

.la-author-box__name-row {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--la-space-xs);
}

.la-author-box__name {
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-text-primary);
    text-decoration: none;
    transition: color var(--la-transition);
}

.la-author-box--casino .la-author-box__name {
    color: #fff;
}

.la-author-box__name:hover {
    color: var(--la-primary);
}

.la-author-box--casino .la-author-box__name:hover {
    color: var(--la-accent);
}

.la-author-box__title {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
    background: var(--la-bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--la-radius-sm);
}

.la-author-box--casino .la-author-box__title {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

/* Meta inline (for casino variant) */
.la-author-box__meta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
    margin-bottom: var(--la-space-sm);
}

.la-author-box__stat,
.la-author-box__date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-author-box--casino .la-author-box__stat,
.la-author-box--casino .la-author-box__date {
    color: rgba(255, 255, 255, 0.7);
}

.la-author-box__stat svg,
.la-author-box__date svg {
    opacity: 0.7;
}

/* Quote */
.la-author-box__quote {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    padding-left: var(--la-space-sm);
    border-left: 2px solid var(--la-primary);
}

.la-author-box--casino .la-author-box__quote {
    color: rgba(255, 255, 255, 0.9);
    border-left-color: var(--la-accent);
}

/* Bio */
.la-author-box__bio {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--la-space-md) 0;
}

/* Meta section (for full variant) */
.la-author-box__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
    margin-bottom: var(--la-space-md);
}

.la-author-box__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-author-box__meta-item svg {
    color: var(--la-primary);
    opacity: 0.8;
}

/* Expertise tags */
.la-author-box__expertise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--la-space-xs);
    margin-bottom: var(--la-space-md);
}

.la-author-box__expertise-label {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-author-box__expertise-tag {
    font-size: var(--la-text-xs);
    background: rgba(99, 102, 241, 0.1);
    color: var(--la-primary);
    padding: 3px 10px;
    border-radius: var(--la-radius-full);
    font-weight: 500;
}

/* Social links */
.la-author-box__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
    margin-bottom: var(--la-space-md);
}

.la-author-box__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--la-radius-md);
    background: var(--la-bg-tertiary);
    color: var(--la-text-muted);
    transition: all var(--la-transition);
}

.la-author-box__social-link:hover {
    transform: translateY(-2px);
}

.la-author-box__social-link--linkedin:hover {
    background: #0077b5;
    color: #fff;
}

.la-author-box__social-link--twitter:hover {
    background: #1da1f2;
    color: #fff;
}

.la-author-box__social-link--facebook:hover {
    background: #1877f2;
    color: #fff;
}

.la-author-box__social-link--instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}

.la-author-box__social-link--youtube:hover {
    background: #ff0000;
    color: #fff;
}

.la-author-box__social-link--telegram:hover {
    background: #0088cc;
    color: #fff;
}

.la-author-box__social-link--website:hover {
    background: var(--la-primary);
    color: #fff;
}

/* More link */
.la-author-box__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-primary);
    text-decoration: none;
    transition: gap var(--la-transition);
}

.la-author-box__more:hover {
    gap: 10px;
}

.la-author-box__more svg {
    transition: transform var(--la-transition);
}

.la-author-box__more:hover svg {
    transform: translateX(2px);
}

/* Bottom variant (after content) */
.la-author-box--bottom {
    margin-top: var(--la-space-2xl);
    margin-bottom: var(--la-space-xl);
    padding: var(--la-space-xl);
    background: linear-gradient(135deg, var(--la-bg-secondary) 0%, var(--la-bg-tertiary) 100%);
}

.la-author-box--bottom .la-author-box__avatar img {
    width: 80px;
    height: 80px;
}

.la-author-box--bottom .la-author-box__avatar-placeholder {
    width: 80px;
    height: 80px;
}

.la-author-box--bottom .la-author-box__name {
    font-size: var(--la-text-lg);
}

/* Responsive */
@media (max-width: 640px) {
    .la-author-box__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .la-author-box__name-row {
        justify-content: center;
    }

    .la-author-box__meta-inline {
        justify-content: center;
    }

    .la-author-box__quote {
        border-left: none;
        padding-left: 0;
        text-align: center;
    }

    .la-author-box__meta {
        justify-content: center;
    }

    .la-author-box__expertise {
        justify-content: center;
    }

    .la-author-box__social {
        justify-content: center;
    }

    .la-author-box--bottom .la-author-box__avatar img,
    .la-author-box--bottom .la-author-box__avatar-placeholder {
        width: 64px;
        height: 64px;
    }
    .single-casino .la-floating-bonus-btn {
        bottom: 93px;
    }
    .la-author-box__role-label {
        justify-content: center;
    }
}

/* ==========================================================================
   Author Profile Page
   ========================================================================== */

.la-author-hero {
    position: relative;
    padding: var(--la-space-3xl) 0;
    background: linear-gradient(135deg, var(--la-primary) 0%, #4338ca 50%, #6d28d9 100%);
    color: #fff;
    overflow: hidden;
}

.la-author-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.la-author-hero__pattern {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.la-author-hero .la-breadcrumb {
    margin-bottom: var(--la-space-xl);
}

.la-author-hero .la-breadcrumb a,
.la-author-hero .la-breadcrumb__current {
    color: rgba(255, 255, 255, 0.8);
}

.la-author-hero .la-breadcrumb a:hover {
    color: #fff;
}

.la-author-hero__content {
    display: flex;
    align-items: center;
    gap: var(--la-space-xl);
}

.la-author-hero__avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.la-author-hero__avatar-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    border: 4px solid rgba(255, 255, 255, 0.2);
}

.la-author-hero__name {
    font-size: var(--la-text-3xl);
    font-weight: 800;
    margin: 0 0 var(--la-space-xs) 0;
    color: #fff;
}

.la-author-hero__title {
    font-size: var(--la-text-lg);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--la-space-lg) 0;
}

.la-author-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xl);
    margin-bottom: var(--la-space-lg);
}

.la-author-hero__stat {
    text-align: center;
}

.la-author-hero__stat-value {
    display: block;
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: #fff;
}

.la-author-hero__stat-label {
    font-size: var(--la-text-xs);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-author-hero__social {
    display: flex;
    gap: var(--la-space-sm);
}

.la-author-hero__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--la-radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all var(--la-transition);
}

.la-author-hero__social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Author Content Section */
.la-author-content {
    padding: var(--la-space-3xl) 0;
}

.la-author-content__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--la-space-2xl);
}

.la-author-section {
  margin-bottom: 0;
    background: #10102c;
        padding: 2px;
}

.la-author-section__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-lg) 0;
    padding-bottom: var(--la-space-sm);
    border-bottom: 2px solid var(--la-primary);
}

.la-author-section__title svg {
    color: var(--la-primary);
}

/* Expertise Tags */
.la-author-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
}

.la-author-expertise__tag {
    background: rgba(99, 102, 241, 0.1);
    color: var(--la-primary);
    padding: var(--la-space-xs) var(--la-space-md);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 500;
}

/* Credentials */
.la-author-credentials {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-author-credentials__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--la-space-md); 
    background: #1c1a43;
    border-radius: var(--la-radius-md);
    border-left: 3px solid var(--la-primary);
}

.la-author-credentials__label {
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--la-primary);
}

.la-author-credentials__value {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: 1.6;
}

/* Author Reviews Grid */
.la-author-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-author-review-card {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: var(--la-bg-secondary);
    border-radius: var(--la-radius-md);
    border: 1px solid var(--la-border);
    text-decoration: none;
    transition: all var(--la-transition);
}

.la-author-review-card:hover {
    border-color: var(--la-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.la-author-review-card__logo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--la-radius-md);
    overflow: hidden;
    background: var(--la-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.la-author-review-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.la-author-review-card__info {
    flex: 1;
    min-width: 0;
}

.la-author-review-card__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
    margin: 0 0 2px 0;
}

.la-author-review-card__bonus {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
    margin: 0;
}

.la-author-review-card__rating {
    flex-shrink: 0;
    text-align: center;
}

.la-author-review-card__rating-value {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-success);
}

.la-author-review-card__rating-max {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* Author Sidebar */
.la-author-sidebar {
    position: sticky;
    top: 90px;
}

.la-author-sidebar__card {
    background: var(--la-bg-secondary);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    margin-bottom: var(--la-space-lg);
    border: 1px solid var(--la-border);
}

.la-author-sidebar__card-title {
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-md) 0;
}

.la-author-sidebar__email {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    color: var(--la-primary);
    text-decoration: none;
    font-size: var(--la-text-sm);
    word-break: break-all;
}

.la-author-sidebar__email:hover {
    text-decoration: underline;
}

.la-author-sidebar__facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-author-sidebar__facts li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--la-space-sm) 0;
    border-bottom: 1px solid var(--la-border);
}

.la-author-sidebar__facts li:last-child {
    border-bottom: none;
}

.la-author-sidebar__fact-label {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-author-sidebar__fact-value {
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-text-primary);
}

/* Author Page Responsive */
@media (max-width: 991px) {
    .la-author-content__grid {
        grid-template-columns: 1fr;
    }

    .la-author-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .la-author-hero__content {
        flex-direction: column;
        text-align: center;
    }

    .la-author-hero__avatar img,
    .la-author-hero__avatar-placeholder {
        width: 120px;
        height: 120px;
    }

    .la-author-hero__stats {
        justify-content: center;
    }

    .la-author-hero__social {
        justify-content: center;
    }

    .la-author-hero__name {
        font-size: var(--la-text-2xl);
    }
}

/* ==========================================================================
   Responsive Adjustments for New Templates
   ========================================================================== */

@media (max-width: 768px) {
    .la-404__slot-num {
        font-size: 2.5rem;
    }

    .la-404__slot-window {
        padding: var(--la-space-sm) var(--la-space-md);
    }

    .la-404__slot-lever {
        height: 60px;
    }

    .la-404__title {
        font-size: var(--la-text-2xl);
    }

    .la-404__search-form {
        flex-direction: column;
    }

    .la-404__actions {
        flex-direction: column;
    }

    .la-search-page__form {
        flex-direction: column;
    }

    .la-search-result {
        grid-template-columns: 1fr;
    }

    .la-search-result__actions {
        flex-direction: row;
    }

    .la-page--with-sidebar .la-container {
        grid-template-columns: 1fr;
    }

    .la-page__sidebar {
        position: relative;
        top: 0;
    }

    .la-single-post__title {
        font-size: var(--la-text-2xl);
    }

    .la-single-post__meta {
        flex-direction: column;
        gap: var(--la-space-sm);
    }

    .la-author-box {
        flex-direction: column;
        text-align: center;
    }

    .la-single-post__share {
        flex-direction: column;
        text-align: center;
    }

    .la-archive__posts {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Author Box V2 - Clean Structured Design
   ======================================== */

.la-author-box-v2 {
 background: #10102c;
    border: 1px solid var(--la-border-color);
    overflow: hidden;
    margin: 30px 0 0;
    border-radius: 12px;
    padding: 30px 20px;
}

.la-author-box-v2__header {
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-primary-dark) 100%);
    padding: var(--la-space-sm) var(--la-space-lg);
}

.la-author-box-v2__label {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: #fff;
    font-size: var(--la-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-author-box-v2__label svg {
    opacity: 0.8;
}

.la-author-box-v2__body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--la-space-lg);
    padding: var(--la-space-lg);
    align-items: start;
}

/* Avatar */
.la-author-box-v2__avatar-wrap {
    flex-shrink: 0;
}

.la-author-box-v2__avatar {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--la-primary);
    box-shadow: 0 4px 12px rgba(var(--la-primary-rgb), 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.la-author-box-v2__avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(var(--la-primary-rgb), 0.3);
}

.la-author-box-v2__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.la-author-box-v2__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--la-primary-light) 0%, var(--la-primary) 100%);
    color: #fff;
}

/* Main Content */
.la-author-box-v2__main {
    min-width: 0;
}

.la-author-box-v2__identity {
    margin-bottom: var(--la-space-sm);
}

.la-author-box-v2__name {
    font-size: var(--la-text-xl);
    font-weight: 700;
    margin: 0 0 var(--la-space-2xs) 0;
    line-height: 1.2;
}

.la-author-box-v2__name a {
    color: var(--la-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.la-author-box-v2__name a:hover {
    color: var(--la-primary);
}

.la-author-box-v2__title {
    display: block;
    font-size: var(--la-text-sm);
    color: var(--la-primary);
    font-weight: 500;
}

.la-author-box-v2__bio {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--la-space-md) 0;
}

/* Credentials */
.la-author-box-v2__credentials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
}

.la-author-box-v2__credential {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-2xs) var(--la-space-sm);
    background: var(--la-bg-tertiary);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
}

.la-author-box-v2__credential-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.la-author-box-v2__credential-icon--expertise {
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

.la-author-box-v2__credential-icon--experience {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.la-author-box-v2__credential-icon--cert {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* Aside (Right Column) */
.la-author-box-v2__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--la-space-md);
    padding-left: var(--la-space-lg);
    border-left: 1px solid var(--la-border-color);
}

.la-author-box-v2__stats {
    text-align: center;
}

.la-author-box-v2__stat-number {
    display: block;
    font-size: var(--la-text-2xl);
    font-weight: 700;
    color: var(--la-primary);
    line-height: 1;
}

.la-author-box-v2__stat-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Social Links */
.la-author-box-v2__social {
    display: flex;
    gap: var(--la-space-xs);
}

.la-author-box-v2__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--la-bg-tertiary);
    color: var(--la-text-secondary);
    transition: all 0.2s ease;
}

.la-author-box-v2__social-link:hover {
    background: var(--la-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* View Articles Link */
.la-author-box-v2__link {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-md);
    background: var(--la-primary);
    color: #fff;
    font-size: var(--la-text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--la-radius-full);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.la-author-box-v2__link:hover {
    background: var(--la-primary-dark);
    transform: translateX(3px);
}

.la-author-box-v2__link svg {
    transition: transform 0.2s ease;
}

.la-author-box-v2__link:hover svg {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 900px) {
    .la-author-box-v2__body {
        grid-template-columns: auto 1fr;
    }

    .la-author-box-v2__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 0;
        padding-top: var(--la-space-md);
        border-left: none;
        border-top: 1px solid var(--la-border-color);
    }
}

@media (max-width: 600px) {
    .la-author-box-v2__body {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .la-author-box-v2__avatar-wrap {
        justify-self: center;
    }

    .la-author-box-v2__avatar {
        width: 80px;
        height: 80px;
    }

    .la-author-box-v2__credentials {
        justify-content: center;
    }

    .la-author-box-v2__aside {
        flex-direction: column;
        align-items: center;
    }

    .la-author-box-v2__social {
        order: -1;
    }
}

/* ========================================
   FAQ Block Styles
   ======================================== */

.la-faq {
    margin: var(--la-space-xl) 0;
}

/* Default style - with container background */
.la-faq--default {
    background: linear-gradient(135deg, rgba(62, 75, 109, 0.3) 0%, rgba(50, 50, 102, 0.3) 100%);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-xl);
    padding: var(--la-space-lg);
}

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

.la-faq__item {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border-color);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.la-faq__item:hover {
    border-color: var(--la-primary);
}

.la-faq__item.is-open {
    border-color: var(--la-primary);
    box-shadow: 0 4px 20px rgba(var(--la-primary-rgb), 0.1);
}

.la-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--la-space-md) var(--la-space-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s ease;
}

.la-faq__question:hover {
    background: var(--la-bg-tertiary);
}

.la-faq__question-inner {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    flex: 1;
    min-width: 0;
}

.la-faq__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-primary-dark) 100%);
    color: #fff;
    font-size: var(--la-text-sm);
    font-weight: 700;
    border-radius: var(--la-radius-md);
    flex-shrink: 0;
}

.la-faq__question-text {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
    line-height: 1.4;
}

.la-faq__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--la-bg-tertiary);
    border-radius: 50%;
    color: var(--la-text-secondary);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.la-faq__item.is-open .la-faq__icon-wrap {
    background: var(--la-primary);
    color: #fff;
    transform: rotate(180deg);
}

.la-faq__icon {
    transition: transform 0.3s ease;
}

/* Plus icon rotation */
.la-faq__item.is-open .la-faq__icon-v {
    transform: rotate(90deg);
    transform-origin: center;
    opacity: 0;
}

/* Arrow icon rotation */
.la-faq--arrow .la-faq__item.is-open .la-faq__icon-wrap {
    transform: rotate(90deg);
}

.la-faq__answer {
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.la-faq__item.is-open .la-faq__answer {
    grid-template-rows: 1fr;
}

.la-faq__answer-inner {
    overflow: hidden;
    padding: 0 var(--la-space-lg);
    padding-left: calc(var(--la-space-lg) + 32px + var(--la-space-md));
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: 1.7;
    transition: padding 0.3s ease-out;
}

.la-faq__item.is-open .la-faq__answer-inner {
    padding-bottom: var(--la-space-lg);
}

@media (max-width: 768px) {
    .la-faq__answer-inner {
        font-size: var(--la-text-xs);
        padding-left: var(--la-space-md);
        padding-right: var(--la-space-md);
    }
}

/* FAQ Styles */
.la-faq--minimal .la-faq__item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--la-border-color);
    border-radius: 0;
}

.la-faq--minimal .la-faq__question {
    padding-left: 0;
    padding-right: 0;
}

.la-faq--minimal .la-faq__answer-inner {
    padding-left: calc(32px + var(--la-space-md));
}

.la-faq--boxed .la-faq__item {
    background: var(--la-bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.la-faq--gradient .la-faq__item {
    background: linear-gradient(135deg, var(--la-bg-secondary) 0%, var(--la-bg-tertiary) 100%);
}

.la-faq--gradient .la-faq__item.is-open {
    background: linear-gradient(135deg, rgba(var(--la-primary-rgb), 0.05) 0%, rgba(var(--la-primary-rgb), 0.1) 100%);
}

/* ========================================
   Tabs Block Styles
   ======================================== */

.la-tabs {
    margin: var(--la-space-xl) 0;
}

.la-tabs__nav {
    position: relative;
}

.la-tabs__nav-inner {
    display: flex;
    gap: var(--la-space-xs);
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.la-tabs__nav-inner::-webkit-scrollbar {
    display: none;
}

.la-tabs__nav-item {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-md) var(--la-space-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.la-tabs__nav-item:hover {
    color: var(--la-primary);
}

.la-tabs__nav-item.is-active {
    color: var(--la-primary);
    border-bottom-color: var(--la-primary);
}

.la-tabs__icon {
    display: flex;
    width: 18px;
    height: 18px;
}

.la-tabs__panel {
    display: none;
}

.la-tabs__panel.is-active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Pills style */
.la-tabs--pills .la-tabs__nav-inner {
    background: var(--la-bg-secondary);
    padding: var(--la-space-2xs);
    border-radius: var(--la-radius-lg);
}

.la-tabs--pills .la-tabs__nav-item {
    border-bottom: none;
    border-radius: var(--la-radius-md);
}

.la-tabs--pills .la-tabs__nav-item.is-active {
    background: var(--la-primary);
    color: #fff;
}

/* Boxed style */
.la-tabs--boxed .la-tabs__nav-inner {
    border-bottom: 1px solid var(--la-border-color);
}

.la-tabs--boxed .la-tabs__panel-inner {
    background: var(--la-bg-secondary);
    padding: var(--la-space-lg);
    border: 1px solid var(--la-border-color);
    border-top: none;
    border-radius: 0 0 var(--la-radius-lg) var(--la-radius-lg);
}

/* ========================================
   TOC Block Styles
   ======================================== */

.la-toc__progress {
    height: 3px;
    background: var(--la-bg-tertiary);
}

.la-toc__progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--la-primary), var(--la-primary-light));
    transition: width 0.2s ease;
}

.la-toc__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-md) var(--la-space-lg);
    border-bottom: 1px solid var(--la-border-color);
}

.la-toc--collapsible .la-toc__header {
    cursor: pointer;
    transition: background 0.2s ease;
}

.la-toc--collapsible .la-toc__header:hover {
    background: var(--la-bg-tertiary);
}

.la-toc__icon {
    display: flex;
    color: var(--la-primary);
}

.la-toc__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
    margin: 0;
    flex: 1;
}

.la-toc__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--la-space-xs);
    background: var(--la-primary);
    color: #fff;
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-full);
}

.la-toc__toggle {
    display: flex;
    color: var(--la-text-muted);
    transition: transform 0.3s ease;
}

.la-toc--collapsible.is-collapsed .la-toc__toggle {
    transform: rotate(-180deg);
}

.la-toc__toggle-text {
    font-size: var(--la-text-sm);
    color: var(--la-primary);
    font-weight: 500;
    white-space: nowrap;
}

.la-toc__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease-out;
}

.la-toc__body-inner {
    overflow: hidden;
    padding: var(--la-space-md) var(--la-space-lg);
    transition: padding 0.3s ease-out;
}

.la-toc--collapsible.is-collapsed .la-toc__body {
    grid-template-rows: 0fr;
}

.la-toc--collapsible.is-collapsed .la-toc__body-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.la-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--la-space-2xs);
}

.la-toc__link {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-xs) var(--la-space-sm);
    color: var(--la-text-secondary);
    text-decoration: none;
    font-size: var(--la-text-sm);
    border-radius: var(--la-radius-sm);
    transition: all 0.2s ease;
}

.la-toc__link:hover {
    color: var(--la-primary);
    background: rgba(var(--la-primary-rgb), 0.1);
}

.la-toc__link.is-active {
    color: var(--la-primary);
    background: rgba(var(--la-primary-rgb), 0.1);
    font-weight: 500;
}

.la-toc__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--la-bg-tertiary);
    color: var(--la-text-muted);
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: var(--la-radius-sm);
    flex-shrink: 0;
}

.la-toc__link:hover .la-toc__number,
.la-toc__link.is-active .la-toc__number {
    background: var(--la-primary);
    color: #fff;
}

/* TOC Styles */
.la-toc--minimal {
    background: transparent;
    border: none;
    padding: 0;
}

.la-toc--minimal .la-toc__header {
    border-bottom: none;
    padding-left: 0;
}

.la-toc--minimal .la-toc__body {
    padding-left: 0;
}

.la-toc--boxed {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.la-toc--gradient {
    background: linear-gradient(135deg, var(--la-bg-secondary) 0%, rgba(var(--la-primary-rgb), 0.05) 100%);
}

/* TOC Mobile */
@media (max-width: 767px) {
    .la-toc__body {
        padding: var(--la-space-sm) var(--la-space-sm);
    }
}

/* ========================================
   Accordion Block Styles
   ======================================== */


.la-accordion__item {
    background: var(--la-bg-secondary);
    border: 1px solid var(--la-border-color);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.la-accordion__item:hover {
    border-color: var(--la-primary-light);
}

.la-accordion__item.is-open {
    border-color: var(--la-primary);
}

.la-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--la-space-md) var(--la-space-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.2s ease;
}

.la-accordion__header:hover {
    background: var(--la-bg-tertiary);
}

.la-accordion__title {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
}

.la-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--la-bg-tertiary);
    border-radius: 50%;
    color: var(--la-text-secondary);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.la-accordion__item.is-open .la-accordion__icon {
    background: var(--la-primary);
    color: #fff;
    transform: rotate(180deg);
}

.la-accordion__item.is-open .la-accordion__icon-v {
    opacity: 0;
}

.la-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.la-accordion__item.is-open .la-accordion__panel {
    grid-template-rows: 1fr;
}

.la-accordion__content {
    overflow: hidden;
    padding: 0 var(--la-space-lg);
    transition: padding 0.3s ease-out;
}

.la-accordion__item.is-open .la-accordion__content {
    padding-bottom: var(--la-space-lg);
}

/* Accordion Styles */
.la-accordion--bordered .la-accordion__item {
    border-width: 2px;
}

.la-accordion--separated .la-accordion__item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--la-border-color);
    border-radius: 0;
}

.la-accordion--minimal .la-accordion__item {
    background: transparent;
    border: none;
}

.la-accordion--minimal .la-accordion__header {
    padding-left: 0;
    padding-right: 0;
}

/* ========================================
   Icon List Block Styles
   ======================================== */

.la-icon-list {
    list-style: none;
    padding: 0;
    margin: var(--la-space-lg) 0;
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: var(--la-space-sm);
}

.la-icon-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-sm);
    padding: var(--la-space-xs) 0;
}

.la-icon-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}

.la-icon-list__svg {
    width: 14px;
    height: 14px;
}

.la-icon-list__text {
    font-size: var(--la-text-sm);
    color: var(--la-text-primary);
    line-height: 1.5;
}

/* Icon List Colors */
.la-icon-list--primary .la-icon-list__icon { background: rgba(var(--la-primary-rgb), 0.1); color: var(--la-primary); }
.la-icon-list--success .la-icon-list__icon { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.la-icon-list--warning .la-icon-list__icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.la-icon-list--danger .la-icon-list__icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.la-icon-list--muted .la-icon-list__icon { background: var(--la-bg-tertiary); color: var(--la-text-muted); }

/* Per-item color overrides */
.la-icon-list__item--success .la-icon-list__icon { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.la-icon-list__item--danger .la-icon-list__icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.la-icon-list__item--highlight {
    background: rgba(var(--la-primary-rgb), 0.05);
    padding: var(--la-space-sm);
    border-radius: var(--la-radius-md);
    margin: 0 calc(var(--la-space-sm) * -1);
}

/* Icon List Styles */
.la-icon-list--boxed {
    background: var(--la-bg-secondary);
    padding: var(--la-space-lg);
    border-radius: var(--la-radius-lg);
    border: 1px solid var(--la-border-color);
}

/* ========================================
   Pros & Cons Block Styles
   ======================================== */

.la-pros-cons {
    display: grid;
    gap: var(--la-space-lg);
    margin: var(--la-space-xl) 0;
}

.la-pros-cons--side-by-side {
    grid-template-columns: repeat(2, 1fr);
}

.la-pros-cons__column {
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    border: 2px solid var(--la-border);
}

.la-pros-cons__pros {
    border-color: rgba(34, 197, 94, 0.4);
}

.la-pros-cons__cons {
    border-color: rgba(239, 68, 68, 0.4);
}

.la-pros-cons__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md) var(--la-space-lg);
}
.la-casino-content__main .la-pros-cons__header {
    padding: 0 0 7px; 
}
.la-casino-content__main .la-pros-cons__column--pros .la-pros-cons__list li, 
.la-casino-content__main .la-pros-cons__column--cons .la-pros-cons__list li,
.la-casino-content__main .la-pros-cons__pros .la-pros-cons__header {
    padding-left: 0
}
.la-pros-cons__pros .la-pros-cons__header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
}

.la-pros-cons__cons .la-pros-cons__header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.la-pros-cons__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.la-pros-cons__header-icon .la-pros-cons__icon-svg {
    width: 16px;
    height: 16px;
}

.la-pros-cons__pros .la-pros-cons__header-icon {
    background: #22c55e;
    color: #fff;
}

.la-pros-cons__cons .la-pros-cons__header-icon {
    background: #ef4444;
    color: #fff;
}

.la-pros-cons__title {
    font-size: var(--la-text-lg);
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.la-pros-cons__pros .la-pros-cons__title { color: #22c55e; }
.la-pros-cons__cons .la-pros-cons__title { color: #ef4444; }

.la-pros-cons__list {
    list-style: none;
    padding: var(--la-space-md) var(--la-space-lg);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-pros-cons__item {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-sm);
}

.la-pros-cons__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.la-pros-cons__pros .la-pros-cons__item-icon { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.la-pros-cons__cons .la-pros-cons__item-icon { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.la-pros-cons__icon-svg {
    width: 12px;
    height: 12px;
}

.la-pros-cons__item-text {
    font-size: var(--la-text-sm);
    color: var(--la-text-primary);
    line-height: 1.5;
}

/* Pros Cons Styles */
.la-pros-cons--boxed .la-pros-cons__column {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.la-pros-cons--minimal .la-pros-cons__column {
    background: transparent;
    border: none;
}

.la-pros-cons--minimal .la-pros-cons__header {
    padding-left: 0;
    background: transparent;
    border-bottom: 2px solid;
}

.la-pros-cons--minimal .la-pros-cons__pros .la-pros-cons__header { border-bottom-color: #22c55e; }
.la-pros-cons--minimal .la-pros-cons__cons .la-pros-cons__header { border-bottom-color: #ef4444; }

.la-pros-cons--minimal .la-pros-cons__list {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    .la-pros-cons--side-by-side {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Top List Block Styles
   ======================================== */

.la-top-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--la-space-lg);
}

.la-top-list__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-size: var(--la-text-xl);
    font-weight: 700;
    margin: 0;
    color: var(--la-text-primary);
}

.la-top-list__title-icon {
    color: var(--la-primary);
}

.la-top-list__subtitle {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-top-list__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-top-list__item {
    position: relative;
    background: var(--la-bg-secondary);
    border: 1px solid var(--la-border-color);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.la-top-list__item:hover {
    border-color: var(--la-primary);
    box-shadow: 0 4px 20px rgba(var(--la-primary-rgb), 0.1);
}

.la-top-list__item--featured {
    border-color: var(--la-primary);
    border-width: 2px;
}

.la-top-list__item-inner {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: var(--la-space-lg);
    padding: var(--la-space-lg) var(--la-space-xl);
    align-items: center;
}

.la-top-list__rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-2xs);
}

.la-top-list__rank-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--la-bg-tertiary);
    color: var(--la-text-secondary);
    font-size: var(--la-text-lg);
    font-weight: 700;
    border-radius: var(--la-radius-md);
}

.la-top-list__rank--gold .la-top-list__rank-number {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}

.la-top-list__rank--silver .la-top-list__rank-number {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #fff;
}

.la-top-list__rank--bronze .la-top-list__rank-number {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
}

.la-top-list__rank-badge {
    font-size: var(--la-text-lg);
}

.la-top-list__logo {
    width: 70px;
    height: 70px;
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    background: var(--la-bg-tertiary);
    flex-shrink: 0;
}

.la-top-list__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.la-top-list__logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--la-text-muted);
}

.la-top-list__content {
    min-width: 0;
}

.la-top-list__content-main {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    margin-bottom: var(--la-space-xs);
    flex-wrap: wrap;
}

.la-top-list__name {
    font-size: var(--la-text-lg);
    font-weight: 600;
    margin: 0;
}

.la-top-list__name a {
    color: var(--la-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.la-top-list__name a:hover {
    color: var(--la-primary);
}

.la-top-list__rating {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
}

.la-top-list__rating-value {
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-primary);
}

.la-top-list__bonus {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    margin-bottom: var(--la-space-xs);
}

.la-top-list__bonus-icon {
    color: var(--la-primary);
}

.la-top-list__bonus-text {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-top-list__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs);
}

.la-top-list__feature {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-2xs);
    padding: var(--la-space-2xs) var(--la-space-sm);
    background: var(--la-bg-tertiary);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    color: var(--la-text-secondary);
}

.la-top-list__feature svg {
    color: #22c55e;
}

.la-top-list__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-sm);
    text-align: center;
}

.la-top-list__cta {
    white-space: nowrap;
}

.la-top-list__review-link {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-2xs);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.la-top-list__review-link:hover {
    color: var(--la-primary);
}

.la-top-list__featured-badge {
    position: absolute;
    top: 0;
    right: var(--la-space-lg);
    display: flex;
    align-items: center;
    gap: var(--la-space-2xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    background: linear-gradient(135deg, var(--la-primary), var(--la-primary-dark));
    color: #fff;
    font-size: var(--la-text-xs);
    font-weight: 600;
    border-radius: 0 0 var(--la-radius-md) var(--la-radius-md);
}

.la-top-list__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--la-space-lg);
}

.la-top-list__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-sm) var(--la-space-lg);
    color: var(--la-primary);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--la-primary);
    border-radius: var(--la-radius-full);
    transition: all 0.2s ease;
}

.la-top-list__view-all:hover {
    background: var(--la-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .la-top-list__item-inner {
        grid-template-columns: auto 1fr;
        gap: var(--la-space-md);
    }

    .la-top-list__rank {
        grid-row: span 2;
    }

    .la-top-list__logo {
        width: 50px;
        height: 50px;
    }

    .la-top-list__action {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
    }
}

/* ========================================
   Gallery Block Styles
   ======================================== */

.la-gallery {
    margin: var(--la-space-xl) 0;
}

.la-gallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
}

.la-gallery--gap-small .la-gallery__grid { gap: var(--la-space-xs); }
.la-gallery--gap-medium .la-gallery__grid { gap: var(--la-space-md); }
.la-gallery--gap-large .la-gallery__grid { gap: var(--la-space-lg); }

.la-gallery__item {
    margin: 0;
    position: relative;
    overflow: hidden;
}

.la-gallery--rounded .la-gallery__item {
    border-radius: var(--la-radius-lg);
}

.la-gallery__link {
    display: block;
}

.la-gallery__image-wrap {
    position: relative;
    overflow: hidden;
}

.la-gallery--aspect-square .la-gallery__image-wrap { aspect-ratio: 1; }
.la-gallery--aspect-4-3 .la-gallery__image-wrap { aspect-ratio: 4/3; }
.la-gallery--aspect-16-9 .la-gallery__image-wrap { aspect-ratio: 16/9; }

.la-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.la-gallery__link:hover .la-gallery__image {
    transform: scale(1.08);
}

.la-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.la-gallery__link:hover .la-gallery__overlay {
    opacity: 1;
}

.la-gallery__zoom-icon {
    color: #fff;
    width: 48px;
    height: 48px;
    background: var(--la-primary);
    border-radius: 50%;
    padding: 12px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.la-gallery__link:hover .la-gallery__zoom-icon {
    transform: scale(1);
}

.la-gallery__caption {
    padding: var(--la-space-md);
    font-size: var(--la-text-sm);
    color: var(--la-muted);
    text-align: center;
    background: var(--la-surface);
}

@media (max-width: 768px) {
    .la-gallery {
        padding: var(--la-space-md);
    }

    .la-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .la-gallery__image-wrap {
        min-height: 180px;
    }
}

@media (max-width: 640px) {
    .la-grid--4,
    .la-grid--3,
    .la-grid--2 { grid-template-columns: 1fr; }
    
    .la-hero__stats {
        gap: unset!important; 
        justify-content: space-between;
    }
    .la-category-tabs__tab {
        padding: 6px 10px;
    }
    .la-category-tabs__tab {
        background: #0000008c;
    }
    .la-category-tabs__nav {
            padding: 7px 0;
    }
    .la-casino-card__bonus-grid, 
    .la-casino-card__stats,
    .la-casino-card__payments {
        justify-content: center;
    }
    .la-author-box-v2__header {
        text-align: center;
    }
    .la-author-box-v2 {
        margin: 0 0;
    }
    .la-casino-hero__rating-badge {
        bottom: 4px;
    }
    .la-casino-hero__main {
        gap: 0px;
    }
    .la-casino-hero__grid {
        gap: 0px;
    }
    .la-casino-nav__tab {
        font-size: 14px;
        padding: 5px 8px;
    }
    .la-casino-nav__tab svg {
        margin-bottom: -2px;
    }
    .la-casino-card--full {
        gap: 7px;
    }
}

@media (max-width: 480px) {
    .la-gallery__grid {
        grid-template-columns: 1fr;
    }

    .la-gallery__image-wrap {
        min-height: 220px;
    }
}


/* ========================================
   Filter Bar Block Styles
   ======================================== */

.la-filter-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--la-space-md) var(--la-space-lg);
    border-bottom: 1px solid var(--la-border-color);
}

.la-filter-bar__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-weight: 600;
    color: var(--la-text-primary);
}

.la-filter-bar__icon {
    color: var(--la-primary);
}

.la-filter-bar__count {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
}

.la-filter-bar__count-number {
    font-weight: 700;
    color: var(--la-primary);
}

.la-filter-bar__count-label {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-filter-bar__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--la-space-md);
    padding: var(--la-space-lg);
}

.la-filter-bar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
    flex: 1;
}

.la-filter-bar__filter {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-xs);
    min-width: 160px;
}

.la-filter-bar__label {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: var(--la-text-secondary);
}

.la-filter-bar__select-wrap {
    position: relative;
}

.la-filter-bar__select {
    width: 100%;
    padding: var(--la-space-sm) var(--la-space-lg) var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-primary);
    border: 1px solid var(--la-border-color);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-sm);
    color: var(--la-text-primary);
    cursor: pointer;
    appearance: none;
    transition: border-color 0.2s ease;
}

.la-filter-bar__select:focus {
    outline: none;
    border-color: var(--la-primary);
}

.la-filter-bar__select-icon {
    position: absolute;
    right: var(--la-space-sm);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--la-text-muted);
}

.la-filter-bar__sort {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-xs);
    min-width: 180px;
}

.la-filter-bar__actions {
    display: flex;
    align-items: flex-end;
}

.la-filter-results {
    position: relative;
    min-height: 200px;
}

.la-filter-results__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-md);
    padding: var(--la-space-2xl);
    color: var(--la-text-muted);
}

.la-filter-results__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--la-border-color);
    border-top-color: var(--la-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.la-filter-results__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-md);
    padding: var(--la-space-2xl);
    text-align: center;
    color: var(--la-text-muted);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

@media (max-width: 768px) {
    .la-filter-bar__body {
        flex-direction: column;
        align-items: stretch;
    }

    .la-filter-bar__filters {
        flex-direction: column;
    }

    .la-filter-bar__filter {
        min-width: 100%;
    }

    .la-filter-bar__sort {
        min-width: 100%;
    }
}

/* ========================================
   Alert Block Styles
   ======================================== */

.la-alert {
    display: flex;
    gap: var(--la-space-md);
    padding: var(--la-space-md) var(--la-space-lg);
    border-radius: var(--la-radius-lg);
    margin: var(--la-space-lg) 0;
}

.la-alert__icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.la-alert__content {
    flex: 1;
    min-width: 0;
}

.la-alert__title {
    font-weight: 600;
    margin-bottom: var(--la-space-2xs);
}

.la-alert__text {
    font-size: var(--la-text-sm);
    line-height: 1.6;
}

.la-alert__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.la-alert__close:hover {
    opacity: 1;
}

/* Alert Types */
.la-alert--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.la-alert--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.la-alert--warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.la-alert--danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.la-alert--info .la-alert__text,
.la-alert--success .la-alert__text,
.la-alert--warning .la-alert__text,
.la-alert--danger .la-alert__text {
    color: var(--la-text-secondary);
}

/* ========================================
   CTA Block Styles
   ======================================== */

.la-cta--default { 
    background: var(--la-bg-secondary);
    border: 1px solid var(--la-border-color);
}

.la-cta--gradient {
    background: linear-gradient(135deg, var(--la-primary), var(--la-primary-dark));
    color: #fff;
}

.la-cta--dark {
    background: var(--la-bg-tertiary);
}

.la-cta__inner {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-lg);
}

.la-cta--center .la-cta__inner {
    text-align: center;
    align-items: center;
}

.la-cta--left .la-cta__inner {
    text-align: left;
    align-items: flex-start;
}

.la-cta__title {
    font-size: var(--la-text-2xl);
    font-weight: 700;
    margin: 0;
}

.la-cta--gradient .la-cta__title {
    color: #fff;
}

.la-cta__text {
    font-size: var(--la-text-base);
    max-width: 600px;
}

.la-cta--gradient .la-cta__text {
    color: rgba(255, 255, 255, 0.9);
}

.la-cta__action {
    display: flex;
    gap: var(--la-space-sm);
}

@media (max-width: 768px) {
    .la-cta {
        padding: var(--la-space-lg);
    }

    .la-cta__title {
        font-size: var(--la-text-xl);
    }
}

/* ==========================================================================
   Q&A Expert Section - User Engagement
   ========================================================================== */

.la-qa-section {
    background: linear-gradient(135deg, var(--la-bg-card) 0%, var(--la-bg-light) 100%);
    border-radius: var(--la-radius-xl);
    padding: var(--la-space-2xl);
    margin-top: var(--la-space-2xl);
    border: 1px solid var(--la-border);
    position: relative;
    overflow: hidden;
}

.la-qa-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--la-primary), var(--la-secondary), var(--la-accent));
}

.la-qa-section__header {
    display: flex;
    gap: var(--la-space-lg);
    padding-bottom: var(--la-space-lg);
}

.la-qa-section__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--la-primary), var(--la-primary-light));
    border-radius: var(--la-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.la-qa-section__header-content {
    flex: 1;
}

.la-qa-section__title {
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-xs);
}

.la-qa-section__subtitle {
    color: var(--la-text-secondary);
    margin: 0;
    font-size: var(--la-text-sm);
}

/* Q&A List */
.la-qa-section__list {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
    margin-bottom: var(--la-space-xl);
}

.la-qa-item {
    background: var(--la-bg-dark);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-lg);
    border: 1px solid var(--la-border);
    transition: border-color 0.2s ease;
}

.la-qa-item:hover {
    border-color: var(--la-border-light);
}

.la-qa-item--featured {
    border-color: var(--la-accent);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, var(--la-bg-dark) 100%);
}

.la-qa-item__question {
    display: flex;
    gap: var(--la-space-md);
    margin-bottom: var(--la-space-md);
}

.la-qa-item__q-label,
.la-qa-item__a-label {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--la-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--la-text-sm);
}

.la-qa-item__q-label {
    background: var(--la-primary);
    color: #fff;
}

.la-qa-item__a-label {
    background: var(--la-secondary);
    color: #fff;
}

.la-qa-item__q-text {
    font-size: var(--la-text-base);
    font-weight: 600;
    color: var(--la-text-primary);
    margin: 0;
    line-height: 1.5;
}

.la-qa-item__answer {
    display: flex;
    gap: var(--la-space-md);
    padding-left: var(--la-space-xl);
    position: relative;
}

.la-qa-item__answer::before {
    content: '';
    position: absolute;
    left: 14px;
    top: -12px;
    bottom: 0;
    width: 2px;
    background: var(--la-border);
}

.la-qa-item__a-text {
    flex: 1;
    color: var(--la-text-secondary);
    line-height: 1.7;
}

.la-qa-item__a-text p:first-child {
    margin-top: 0;
}

.la-qa-item__a-text p:last-child {
    margin-bottom: 0;
}

.la-qa-item__meta {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    margin-top: var(--la-space-sm);
    font-size: var(--la-text-xs);
}

.la-qa-item__expert {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: var(--la-secondary);
    font-weight: 500;
}

.la-qa-item__date {
    color: var(--la-text-muted);
}

/* Q&A Form */
.la-qa-form-wrapper {
    background: var(--la-bg-dark);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-xl);
    border: 1px solid var(--la-border);
}

.la-qa-form-intro {
    margin-bottom: var(--la-space-xl);
    padding-bottom: var(--la-space-lg);
    border-bottom: 1px solid var(--la-border);
}

.la-qa-form-intro__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-text-primary);
    margin: 0 0 var(--la-space-sm);
}

.la-qa-form-intro__title svg {
    color: var(--la-primary);
}

.la-qa-form-intro__text {
    color: var(--la-text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--la-space-md);
}

.la-qa-form-intro__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm) var(--la-space-lg);
}

.la-qa-form-intro__features li {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
}

.la-qa-form-intro__features svg {
    color: var(--la-secondary);
    flex-shrink: 0;
}

/* Form Fields */
.la-qa-form__fields {
    display: grid;
    gap: var(--la-space-lg);
}

.la-qa-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-xs);
}

.la-qa-form__label {
    font-weight: 600;
    color: var(--la-text-primary);
    font-size: var(--la-text-sm);
}

.la-qa-form__label .required {
    color: var(--la-error);
}

.la-qa-form__input,
.la-qa-form__textarea {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    padding: var(--la-space-sm) var(--la-space-md);
    color: var(--la-text-primary);
    font-size: var(--la-text-base);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.la-qa-form__input:focus,
.la-qa-form__textarea:focus {
    outline: none;
    border-color: var(--la-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.la-qa-form__input::placeholder,
.la-qa-form__textarea::placeholder {
    color: var(--la-text-muted);
}

.la-qa-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.la-qa-form__hint {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-qa-form__hint svg {
    flex-shrink: 0;
}

.la-qa-form__counter {
    text-align: right;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* Form Actions */
.la-qa-form__actions {
    margin-top: var(--la-space-lg);
}

.la-qa-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    min-width: 180px;
}

.la-qa-form__submit-text,
.la-qa-form__submit-loading {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-qa-form__submit.is-loading .la-qa-form__submit-text {
    display: none;
}

.la-qa-form__submit:not(.is-loading) .la-qa-form__submit-loading {
    display: none;
}

/* Form Message */
.la-qa-form__message {
    margin-top: var(--la-space-md);
    padding: var(--la-space-md);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-sm);
}

.la-qa-form__message--success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--la-secondary);
    color: var(--la-secondary);
}

.la-qa-form__message--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--la-error);
    color: var(--la-error);
}

.la-qa-form__disclaimer {
    margin-top: var(--la-space-md);
    color: var(--la-text-muted);
    font-size: var(--la-text-xs);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .la-qa-section {
        padding: var(--la-space-lg);
        margin-top: var(--la-space-xl);
    }

    .la-qa-section__header {
        flex-direction: column;
        gap: var(--la-space-md);
    }

    .la-qa-section__icon {
        width: 48px;
        height: 48px;
    }

    .la-qa-section__icon svg {
        width: 24px;
        height: 24px;
    }

    .la-qa-section__title {
        font-size: var(--la-text-lg);
    }

    .la-qa-form-wrapper {
        padding: var(--la-space-lg);
    }

    .la-qa-form-intro__features {
        flex-direction: column;
        gap: var(--la-space-xs);
    }

    .la-qa-item {
        padding: var(--la-space-md);
    }

    .la-qa-item__answer {
        padding-left: var(--la-space-lg);
    }

    .la-qa-item__answer::before {
        left: 10px;
    }

    .la-qa-form__submit {
        width: 100%;
    }
}

/* ==========================================================================
   Floating Bonus Panel
   ========================================================================== */

/* Floating Bonus Button */
.la-floating-bonus-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: var(--la-radius-full);
    background: var(--btn-color, var(--la-primary));
    border: none;
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--la-shadow-lg), 0 0 30px rgba(99, 102, 241, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.la-floating-bonus-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.la-floating-bonus-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--la-shadow-lg), 0 0 40px rgba(99, 102, 241, 0.6);
}

.la-floating-bonus-btn:active {
    transform: translateY(0) scale(0.98);
}

.la-floating-bonus-btn__icon {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatingBonusIconBounce 2s ease-in-out infinite;
}

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

.la-floating-bonus-btn__pulse {
    position: absolute;
    inset: -4px;
    border-radius: var(--la-radius-full);
    background: var(--btn-color, var(--la-primary));
    opacity: 0;
    animation: floatingBonusPulse 2s ease-out infinite;
}

@keyframes floatingBonusPulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.la-floating-bonus-btn__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--la-secondary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border-radius: var(--la-radius-full);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Panel Overlay */
.la-floating-bonus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.la-floating-bonus-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Floating Bonus Panel */
.la-floating-bonus-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: var(--la-bg-card);
    border-left: 1px solid var(--la-border);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

.la-floating-bonus-panel.is-open {
    transform: translateX(0);
}

/* Panel Header */
.la-floating-bonus-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--la-space-md);
    padding: var(--la-space-lg) var(--la-space-xl);
    background: linear-gradient(135deg, var(--la-primary) 0%, #4f46e5 100%);
    position: relative;
    overflow: hidden;
}

.la-floating-bonus-panel__header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.la-floating-bonus-panel__header-content {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-md);
    position: relative;
    z-index: 1;
}

.la-floating-bonus-panel__header-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--la-radius-lg);
    color: white;
    flex-shrink: 0;
}

.la-floating-bonus-panel__title {
    margin: 0;
    font-family: var(--la-font-display);
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: white;
    line-height: var(--la-leading-tight);
}

.la-floating-bonus-panel__subtitle {
    margin: var(--la-space-xs) 0 0;
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.8);
}

.la-floating-bonus-panel__close {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--la-radius-md);
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.la-floating-bonus-panel__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Panel Body */
.la-floating-bonus-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--la-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

/* Bonus Item */
.la-floating-bonus-item {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    transition: all 0.2s ease;
    animation: floatingBonusItemSlideIn 0.4s ease-out both;
}

.la-floating-bonus-item:nth-child(1) { animation-delay: 0.1s; }
.la-floating-bonus-item:nth-child(2) { animation-delay: 0.15s; }
.la-floating-bonus-item:nth-child(3) { animation-delay: 0.2s; }
.la-floating-bonus-item:nth-child(4) { animation-delay: 0.25s; }
.la-floating-bonus-item:nth-child(5) { animation-delay: 0.3s; }

@keyframes floatingBonusItemSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.la-floating-bonus-item:hover {
    border-color: var(--la-primary);
    background: var(--la-bg-card-hover);
    transform: translateX(4px);
}

.la-floating-bonus-item__rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-primary);
    color: white;
    font-size: var(--la-text-sm);
    font-weight: 700;
    border-radius: var(--la-radius-full);
    flex-shrink: 0;
}

.la-floating-bonus-item:first-child .la-floating-bonus-item__rank {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.la-floating-bonus-item__logo {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--la-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.la-floating-bonus-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.la-floating-bonus-item__logo-text {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-bg-dark);
    text-align: center;
    padding: 4px;
}

.la-floating-bonus-item__content {
    flex: 1;
    min-width: 0;
}

.la-floating-bonus-item__name {
    margin: 0 0 4px;
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-floating-bonus-item__bonus {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    flex-wrap: wrap;
}

.la-floating-bonus-item__bonus-amount {
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-secondary);
}

.la-floating-bonus-item__bonus-spins {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-accent);
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 6px;
    border-radius: var(--la-radius-sm);
}

.la-floating-bonus-item__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--la-text-xs);
    color: var(--la-accent);
}

.la-floating-bonus-item__rating svg {
    color: var(--la-accent);
}

.la-floating-bonus-item__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--la-secondary) 0%, #059669 100%);
    color: white;
    font-size: var(--la-text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--la-radius-md);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.la-floating-bonus-item__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.la-floating-bonus-item__cta svg {
    transition: transform 0.2s ease;
}

.la-floating-bonus-item__cta:hover svg {
    transform: translateX(3px);
}

/* Panel Footer */
.la-floating-bonus-panel__footer {
    padding: var(--la-space-md) var(--la-space-lg);
    border-top: 1px solid var(--la-border);
    background: var(--la-bg-dark);
}

.la-floating-bonus-panel__footer-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
    margin: 0;
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .la-floating-bonus-btn {
        bottom: 16px;
        right: 16px;
        width: 56px;
        height: 56px;
    }

    .la-floating-bonus-panel {
        max-width: 85%;
    }

    .la-floating-bonus-panel__header {
        padding: var(--la-space-md);
    }

    .la-floating-bonus-panel__header-icon {
        width: 40px;
        height: 40px;
    }

    .la-floating-bonus-panel__title {
        font-size: var(--la-text-lg);
    }

    .la-floating-bonus-panel__body {
        padding: var(--la-space-md);
    }

    .la-floating-bonus-item {
        flex-wrap: wrap;
        padding: var(--la-space-sm);
    }

    .la-floating-bonus-item__logo {
        width: 40px;
        height: 40px;
    }

    .la-floating-bonus-item__cta {
        width: 100%;
        justify-content: center;
        margin-top: var(--la-space-sm);
    }
}

/* ==========================================================================
   Bonus Details Section (Single Casino)
   ========================================================================== */

.la-bonus-details {
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    padding: var(--la-space-xl);
    margin-bottom: var(--la-space-lg);
}

.la-bonus-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--la-space-lg);
    margin-bottom: var(--la-space-lg);
}

.la-bonus-details__item {
    display: flex;
    align-items: flex-start;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.la-bonus-details__item--primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.la-bonus-details__item--primary .la-bonus-details__value {
    color: var(--la-primary);
    font-size: var(--la-text-2xl);
}

.la-bonus-details__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-md);
    color: var(--la-primary);
    flex-shrink: 0;
}

.la-bonus-details__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-bonus-details__label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.la-bonus-details__value {
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: var(--la-secondary);
    line-height: 1.2;
}

.la-bonus-details__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 2px dashed var(--la-accent);
    border-radius: var(--la-radius-md);
    margin-bottom: var(--la-space-lg);
}

.la-bonus-details__code-label {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-bonus-details__code-value {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-sm);
    padding: var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    font-family: var(--la-font-mono, monospace);
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-accent);
    cursor: pointer;
    transition: all 0.2s ease;
}

.la-bonus-details__code-value:hover {
    background: var(--la-accent);
    color: white;
    border-color: var(--la-accent);
}

.la-bonus-details__code-value svg {
    opacity: 0.7;
}

.la-bonus-details__headline {
    text-align: center;
    margin-bottom: var(--la-space-lg);
}

.la-bonus-details__headline p {
    font-size: var(--la-text-lg);
    color: var(--la-text-secondary);
    margin: 0;
}

.la-bonus-details__cta {
    display: flex;
    justify-content: center;
    margin-bottom: var(--la-space-lg);
}

.la-bonus-details__cta .la-btn {
    min-width: 280px;
}

.la-bonus-details__terms {
    border-top: 1px solid var(--la-border);
    padding-top: var(--la-space-md);
}

.la-bonus-terms {
    font-size: var(--la-text-sm);
}

.la-bonus-terms__toggle {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    cursor: pointer;
    color: var(--la-text-muted);
    transition: color 0.2s ease;
    list-style: none;
}

.la-bonus-terms__toggle::-webkit-details-marker {
    display: none;
}

.la-bonus-terms__toggle:hover {
    color: var(--la-primary);
}

.la-bonus-terms__toggle svg {
    flex-shrink: 0;
}

.la-bonus-terms[open] .la-bonus-terms__toggle {
    margin-bottom: var(--la-space-md);
    color: var(--la-text-primary);
}

.la-bonus-terms__content {
    padding: var(--la-space-md);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    line-height: var(--la-leading-relaxed);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .la-bonus-details {
        padding: var(--la-space-lg);
    }

    .la-bonus-details__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--la-space-md);
    }

    .la-bonus-details__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--la-space-sm);
    }

    .la-bonus-details__icon {
        width: 40px;
        height: 40px;
    }

    .la-bonus-details__value {
        font-size: var(--la-text-lg);
    }

    .la-bonus-details__item--primary .la-bonus-details__value {
        font-size: var(--la-text-xl);
    }

    .la-bonus-details__code {
        flex-direction: column;
        gap: var(--la-space-sm);
    }

    .la-bonus-details__cta .la-btn {
        width: 100%;
        min-width: auto;
    }
}

/* ==========================================================================
   BONUSES PAGE
   ========================================================================== */

/* Hero Section */
.la-bonuses-hero {
    background: linear-gradient(135deg, var(--la-bg-dark) 0%, var(--la-bg-darker) 100%);
    padding: var(--la-space-xl) 0;
    position: relative;
    overflow: hidden;
}

.la-bonuses-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.la-bonuses-hero__content {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.la-bonuses-hero__title {
    font-family: var(--la-font-display);
    font-size: clamp(var(--la-text-2xl), 4vw, var(--la-text-4xl));
    font-weight: 800;
    color: var(--la-text-primary);
    line-height: var(--la-leading-tight);
    margin: 0 0 var(--la-space-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.la-bonuses-hero__subtitle {
    font-size: var(--la-text-base);
    color: var(--la-text-secondary);
    line-height: var(--la-leading-relaxed);
    margin: 0 0 var(--la-space-md);
}

.la-bonuses-hero__stats {
    display: flex;
    justify-content: center;
    gap: var(--la-space-lg);
}

.la-bonuses-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.la-bonuses-hero__stat-value {
    font-family: var(--la-font-display);
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: var(--la-primary);
    line-height: 1.2;
}

.la-bonuses-hero__stat-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Bonus of the Day */
.la-bonus-of-day {
    padding: var(--la-space-2xl) 0;
    margin-top: calc(-1 * var(--la-space-xl));
    position: relative;
    z-index: 10;
}

.la-bonus-of-day__wrapper {
    background: var(--la-card-bg);
    border-radius: var(--la-radius-xl);
    border: 2px solid var(--la-primary);
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.3);
}

.la-bonus-of-day__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-sm);
    background: linear-gradient(135deg, var(--la-primary) 0%, #a855f7 100%);
    color: white;
    padding: var(--la-space-sm) var(--la-space-lg);
    font-weight: 700;
    font-size: var(--la-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-bonus-of-day__badge svg {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.la-bonus-of-day__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--la-space-xl);
    padding: var(--la-space-xl);
    align-items: center;
}

.la-bonus-of-day__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-md);
}

.la-bonus-of-day__logo {
    width: 120px;
    height: 120px;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--la-space-md);
    transition: transform var(--la-transition);
}

.la-bonus-of-day__logo:hover {
    transform: scale(1.05);
}

.la-bonus-of-day__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-bonus-of-day__casino {
    text-align: center;
}

.la-bonus-of-day__casino-name {
    display: block;
    font-weight: 600;
    color: var(--la-text-white);
    margin-bottom: var(--la-space-xs);
}

.la-bonus-of-day__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: var(--la-warning);
    font-weight: 600;
    font-size: var(--la-text-sm);
}

.la-bonus-of-day__center {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-bonus-of-day__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
}

.la-bonus-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-xs) var(--la-space-sm);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.la-bonus-tag--exclusive {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.la-bonus-tag--type {
    background: var(--la-bg-light);
    color: var(--la-text-light);
}

.la-bonus-tag--type svg {
    width: 14px;
    height: 14px;
}

.la-bonus-of-day__headline {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 700;
    color: var(--la-text-white);
    line-height: 1.3;
    margin: 0;
}

.la-bonus-of-day__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-lg);
}

.la-bonus-of-day__detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-bonus-of-day__detail-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-bonus-of-day__detail-value {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-text-white);
}

.la-bonus-of-day__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-md);
    min-width: 200px;
}

.la-bonus-of-day__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--la-space-xs);
}

.la-bonus-of-day__code-label {
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    text-transform: uppercase;
}

.la-bonus-code-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-sm);
    background: var(--la-bg-darker);
    border: 2px dashed var(--la-border);
    padding: var(--la-space-sm) var(--la-space-md);
    border-radius: var(--la-radius-md);
    color: var(--la-primary);
    font-weight: 700;
    font-family: var(--la-font-mono, monospace);
    font-size: var(--la-text-base);
    cursor: pointer;
    transition: all var(--la-transition);
}

.la-bonus-code-btn:hover {
    border-color: var(--la-primary);
    background: rgba(139, 92, 246, 0.1);
}

.la-bonus-code-btn.is-copied {
    border-color: var(--la-success);
    color: var(--la-success);
}

.la-bonus-code-btn.is-copied span::after {
    content: ' ✓';
}

.la-bonus-of-day__no-code {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    color: var(--la-success);
    font-size: var(--la-text-sm);
    font-weight: 500;
}

.la-bonus-of-day__cta {
    width: 100%;
}

.la-bonus-of-day__terms-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    background: none;
    border: none;
    color: var(--la-text-muted);
    font-size: var(--la-text-sm);
    cursor: pointer;
    transition: color var(--la-transition);
}

.la-bonus-of-day__terms-toggle:hover {
    color: var(--la-text-light);
}

.la-bonus-of-day__terms {
    background: var(--la-bg-darker);
    padding: var(--la-space-lg);
    border-top: 1px solid var(--la-border);
}

.la-bonus-of-day__terms-content {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
    line-height: 1.6;
}

/* Filters Section */
.la-bonuses-filters {
    padding: 1rem 0;
    background: var(--la-bg-dark);
    position: sticky;
    top: 60px;
    z-index: 100;
    border-bottom: 1px solid var(--la-border);
}

.la-bonuses-filters__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-lg);
}

.la-bonuses-filters__types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
    padding-bottom: var(--la-space-md);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.la-bonus-type-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    padding: var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-full);
    color: var(--la-text-light);
    font-size: var(--la-text-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--la-transition);
}

.la-bonus-type-btn:hover {
    border-color: var(--la-primary);
    color: var(--la-primary);
}

.la-bonus-type-btn.is-active {
    background: var(--la-primary);
    border-color: var(--la-primary);
    color: white;
}

.la-bonus-type-btn svg {
    width: 16px;
    height: 16px;
}

.la-bonus-type-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--la-radius-full);
    margin-left: 2px;
}

.la-bonus-type-btn:not(.is-active) .la-bonus-type-btn__count {
    background: var(--la-bg-subtle);
    color: var(--la-text-muted);
}

.la-bonuses-filters__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--la-space-md);
}

.la-bonuses-filters__checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-lg);
}

.la-checkbox-filter {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    cursor: pointer;
    user-select: none;
}

.la-checkbox-filter input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.la-checkbox-filter__box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    transition: all var(--la-transition);
    position: relative;
}

.la-checkbox-filter__box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--la-transition);
}

.la-checkbox-filter input:checked + .la-checkbox-filter__box {
    background: var(--la-primary);
    border-color: var(--la-primary);
}

.la-checkbox-filter input:checked + .la-checkbox-filter__box::after {
    transform: rotate(45deg) scale(1);
}

.la-checkbox-filter__label {
    font-size: var(--la-text-sm);
    color: var(--la-text-light);
}

.la-bonuses-filters__sort {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-bonuses-filters__sort-label {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-bonuses-filters__sort-select {
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    padding: var(--la-space-sm) var(--la-space-md);
    color: var(--la-text-white);
    font-size: var(--la-text-sm);
    cursor: pointer;
    min-width: 180px;
}

/* Bonuses List */
.la-bonuses-list {
    padding: var(--la-space-2xl) 0;
    background: var(--la-bg-darker);
    min-height: 400px;
}

.la-bonuses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--la-space-lg);
}

/* Bonus Card - Modern Design */
.la-bonus-card {
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    border: 1px solid var(--la-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--la-transition-base);
    position: relative;
}

.la-bonus-card:hover {
    border-color: var(--la-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.la-bonus-card--exclusive {
    border-color: rgba(245, 158, 11, 0.4);
}

.la-bonus-card--exclusive:hover {
    border-color: var(--la-accent);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.la-bonus-card--expired {
    opacity: 0.6;
    pointer-events: none;
}

.la-bonus-card.is-hidden {
    display: none;
}

.la-bonus-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--la-space-sm) var(--la-space-md);
    background: linear-gradient(135deg, var(--la-bg-light) 0%, var(--la-bg-card) 100%);
    min-height: 36px;
    border-bottom: 1px solid var(--la-border);
}

.la-bonus-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--la-radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-bonus-card__badge--exclusive {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.la-bonus-card__badge--featured {
    background: linear-gradient(135deg, var(--la-primary) 0%, var(--la-primary-hover) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.la-bonus-card__type {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: 11px;
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.la-bonus-card__type svg {
    width: 14px;
    height: 14px;
}

.la-bonus-card__casino {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
}

.la-bonus-card__logo {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--la-bg-light) 0%, var(--la-bg-card) 100%);
    border-radius: var(--la-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
    transition: all var(--la-transition-base);
    border: 1px solid var(--la-border);
    text-decoration: none;
}

.la-bonus-card__logo:hover {
    transform: scale(1.08);
    border-color: var(--la-primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.la-bonus-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--la-radius-sm);
}

/* Wide logo variant for bonus cards */
.la-bonus-card__logo--wide {
    width: 140px;
    height: 56px;
    padding: 8px 12px;
}

.la-bonus-card__logo--wide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.la-bonus-card__casino-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.la-bonus-card__casino-name {
    font-weight: 600;
    color: var(--la-text-primary);
    font-size: var(--la-text-sm);
    text-decoration: none;
    transition: color var(--la-transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-bonus-card__casino-name:hover {
    color: var(--la-primary-light);
}

.la-bonus-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--la-text-xs);
    font-weight: 600;
}

.la-bonus-card__rating svg {
    color: var(--la-accent);
}

.la-bonus-card__rating span {
    color: var(--la-text-secondary);
}

.la-bonus-card__headline {
    padding: 0 var(--la-space-md);
    margin: 0 0 var(--la-space-sm);
    font-family: var(--la-font-display);
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-text-primary);
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.la-bonus-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 var(--la-space-md) var(--la-space-md);
}

.la-bonus-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--la-text-secondary);
    border: 1px solid transparent;
}

.la-bonus-card__meta-item--highlight {
    background: rgba(16, 185, 129, 0.1);
    color: var(--la-success);
    border-color: rgba(16, 185, 129, 0.2);
}

.la-bonus-card__meta-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.la-bonus-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: var(--la-bg-light);
    border-top: 1px solid var(--la-border);
    margin-top: auto;
}

.la-bonus-card__code-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.la-bonus-card__code-label {
    font-size: 11px;
    color: var(--la-text-muted);
    flex-shrink: 0;
}

.la-bonus-card__code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--la-bg-card);
    border: 1px dashed var(--la-border-light);
    border-radius: var(--la-radius-sm);
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--la-primary-light);
    cursor: pointer;
    transition: all var(--la-transition-fast);
}

.la-bonus-card__code:hover {
    border-color: var(--la-primary);
    background: rgba(99, 102, 241, 0.1);
}

.la-bonus-card__code svg {
    color: var(--la-text-muted);
    flex-shrink: 0;
}

.la-bonus-card__no-code {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--la-success);
    font-size: 12px;
    font-weight: 500;
}

.la-bonus-card__no-code svg {
    flex-shrink: 0;
}

.la-bonus-card__cta {
    flex-shrink: 0;
    padding: 8px 16px !important;
    font-size: 13px !important;
}

.la-bonus-card__expired-label {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--la-error);
    border-radius: var(--la-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.la-bonus-card__expiry-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px var(--la-space-md);
    background: rgba(245, 158, 11, 0.1);
    color: var(--la-accent);
    font-size: 11px;
    font-weight: 500;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
}

.la-bonus-card__expiry-notice svg {
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.la-bonus-card__cta {
    flex-shrink: 0;
}

.la-bonus-card__terms {
    border-top: 1px solid var(--la-border);
}

.la-bonus-card__terms-toggle {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    width: 100%;
    padding: var(--la-space-sm) var(--la-space-md);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    cursor: pointer;
    list-style: none;
}

.la-bonus-card__terms-toggle::-webkit-details-marker {
    display: none;
}

.la-bonus-card__terms-toggle::after {
    content: '';
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform var(--la-transition);
}

.la-bonus-card__terms[open] .la-bonus-card__terms-toggle::after {
    transform: rotate(180deg);
}

.la-bonus-card__terms-content {
    padding: var(--la-space-sm) var(--la-space-md) var(--la-space-md);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
    line-height: 1.5;
}

/* No Results */
.la-bonuses-no-results {
    text-align: center;
    padding: var(--la-space-3xl);
    color: var(--la-text-muted);
}

.la-bonuses-no-results svg {
    margin-bottom: var(--la-space-md);
    opacity: 0.5;
}

.la-bonuses-no-results p {
    font-size: var(--la-text-lg);
    margin-bottom: var(--la-space-lg);
}

/* Content Section */
.la-bonuses-content {
    padding: var(--la-space-2xl) 0;
    background: var(--la-bg-dark);
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .la-bonus-of-day__card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .la-bonus-of-day__left {
        flex-direction: row;
        justify-content: center;
    }

    .la-bonus-of-day__casino {
        text-align: left;
    }

    .la-bonus-of-day__tags {
        justify-content: center;
    }

    .la-bonus-of-day__details {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .la-bonuses-hero {
        padding: var(--la-space-xl) 0;
    }

    .la-bonuses-hero__stats {
        gap: var(--la-space-md);
    }

    .la-bonuses-hero__stat-value {
        font-size: var(--la-text-lg);
    }

    .la-bonus-of-day {
        padding: var(--la-space-lg) 0;
    }

    .la-bonus-of-day__card {
        padding: var(--la-space-lg);
        gap: var(--la-space-lg);
    }

    .la-bonus-of-day__logo {
        width: 80px;
        height: 80px;
    }

    .la-bonus-of-day__headline {
        font-size: var(--la-text-xl);
    }

    .la-bonus-of-day__right {
        width: 100%;
        min-width: auto;
    }

    .la-bonuses-filters {
        position: static;
        padding: var(--la-space-md) 0;
    }

    .la-bonuses-filters__types {
        flex-wrap: nowrap;
        padding-bottom: var(--la-space-sm);
        margin: 0 calc(-1 * var(--la-space-md));
        padding-left: var(--la-space-md);
        padding-right: var(--la-space-md);
    }

    .la-bonuses-filters__controls {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--la-space-sm);
    }

    .la-bonuses-filters__checkboxes {
        width: 100%;
        gap: var(--la-space-md);
        flex-wrap: wrap;
    }

    .la-bonuses-filters__sort {
        width: 100%;
    }

    .la-bonuses-filters__sort-select {
        flex-grow: 1;
    }

    .la-bonuses-grid {
        grid-template-columns: 1fr;
    }

    .la-bonus-card__footer {
        flex-direction: column;
    }

    .la-bonus-card__cta {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .la-bonuses-hero__stats {
        flex-direction: column;
        gap: var(--la-space-xs);
    }

    .la-bonuses-filters__checkboxes {
        flex-direction: column;
        gap: var(--la-space-sm);
    }

    .la-bonus-of-day__left {
        flex-direction: column;
    }

    .la-bonus-of-day__details {
        flex-direction: column;
        align-items: center;
        gap: var(--la-space-sm);
    }
}

/* ==========================================================================
   Casino Block Styles (Gutenberg Block)
   ========================================================================== */

/* Casino Block Wrapper */
.la-casino-block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Gutenberg full/wide alignment support */
.wp-block-luckyaff-casino-table,
.wp-block-luckyaff-casino-table.alignnone,
.wp-block-luckyaff-casino-table.aligndefault {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.wp-block-luckyaff-casino-table.alignwide,
.wp-block-luckyaff-casino-table.alignfull {
    width: 100% !important;
    max-width: none !important;
}

/* Override Gutenberg content width constraints - very aggressive */
.is-layout-constrained > .wp-block-luckyaff-casino-table,
.is-layout-flow > .wp-block-luckyaff-casino-table,
.entry-content > .wp-block-luckyaff-casino-table,
.wp-block-post-content > .wp-block-luckyaff-casino-table,
.is-layout-constrained > :where(.wp-block-luckyaff-casino-table),
.wp-block-group > .wp-block-luckyaff-casino-table,
.wp-block-columns > .wp-block-luckyaff-casino-table,
article .wp-block-luckyaff-casino-table,
main .wp-block-luckyaff-casino-table,
[class*="wp-container"] > .wp-block-luckyaff-casino-table,
.wp-site-blocks .wp-block-luckyaff-casino-table {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force inner elements to use full width */
.wp-block-luckyaff-casino-table.la-casino-block,
.wp-block-luckyaff-casino-table.la-casino-block--table,
.wp-block-luckyaff-casino-table .la-casino-block__content,
.wp-block-luckyaff-casino-table .la-casino-table-wrapper,
.wp-block-luckyaff-casino-table .la-casino-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Override page content constraints for casino table block */
.la-page__content .wp-block-luckyaff-casino-table,
.la-page__content .la-casino-block--table,
.la-content .wp-block-luckyaff-casino-table,
.la-content .la-casino-block--table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure casino table inside block fills container */
.la-casino-block--table .la-casino-table-wrapper {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.la-casino-block--table .la-casino-table {
    width: 100% !important;
    display: table !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
}

.la-casino-block__content {
    width: 100%;
}

.la-casino-block__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-md);
    margin-bottom: var(--la-space-lg);
    padding: var(--la-space-md);
    background: var(--la-bg-card);
    border-radius: var(--la-radius-lg);
    border: 1px solid var(--la-border);
}

.la-casino-block__load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--la-space-xl);
}

/* Grid style - full width fix */
.la-casino-block--grid .la-casino-grid {
    width: 100%;
}

/* Table style - full width fix */
.la-casino-block--table {
    width: 100%;
    max-width: 100%;
}

.la-casino-block--table .la-casino-table-wrapper {
    width: 100%;
    overflow-x: visible;
}

.la-casino-block--table .la-casino-table {
    width: 100%;
    table-layout: auto;
    min-width: 0;
}

/* Fix CTA button in table - prevent text wrap */
.la-table-row__cta {
    white-space: nowrap;
    min-width: 100px;
}

/* ==========================================================================
   Table Mobile Responsive - Vertical Cards
   ========================================================================== */

@media (max-width: 768px) {
    .la-casino-block--table .la-casino-table-wrapper {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .la-casino-block--table .la-casino-table {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--la-space-lg);
    }

    .la-casino-block--table .la-casino-table thead {
        display: none;
    }

    .la-casino-block--table .la-casino-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--la-space-lg);
    }

    /* Card container */
    .la-casino-block--table .la-table-row {
        display: flex;
        flex-direction: column;
        background: var(--la-bg-card);
        border-radius: var(--la-radius-xl);
        padding: 0;
        border: 1px solid var(--la-border);
        position: relative;
        overflow: hidden;
    }

    .la-casino-block--table .la-table-row__cell {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    /* Rank badge - top left corner */
    .la-casino-block--table .la-table-row__cell--rank {
        position: absolute;
        top: var(--la-space-md);
        left: var(--la-space-md);
        z-index: 2;
    }

    .la-casino-block--table .la-table-row__rank-wrap {
        background: var(--la-primary);
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: var(--la-text-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .la-casino-block--table .la-table-row__rank {
        font-size: var(--la-text-sm);
    }

    .la-casino-block--table .la-table-row__rank-star {
        display: none;
    }

    /* Casino header with logo */
    .la-casino-block--table .la-table-row__cell--casino {
        padding: var(--la-space-lg);
        padding-top: var(--la-space-xl);
        background: linear-gradient(135deg, var(--la-bg-secondary) 0%, var(--la-bg-card) 100%);
        border-bottom: 1px solid var(--la-border);
    }

    .la-casino-block--table .la-table-row__casino {
        flex-direction: column;
        text-align: center;
        gap: var(--la-space-sm);
        width: 100%;
    }

    .la-casino-block--table .la-table-row__logo {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background: var(--la-bg-card);
        border-radius: var(--la-radius-lg);
        padding: var(--la-space-sm);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .la-casino-block--table .la-table-row__logo-img {
        max-width: 80px;
        max-height: 80px;
    }

    .la-casino-block--table .la-table-row__info {
        align-items: center;
        width: 100%;
    }

    .la-casino-block--table .la-table-row__name {
        font-size: var(--la-text-lg);
    }

    .la-casino-block--table .la-table-row__meta {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Bonus section - prominent */
    .la-casino-block--table .la-table-row__cell--bonus {
        padding: var(--la-space-lg);
        text-align: center;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }

    .la-casino-block--table .la-table-row__bonus {
        flex-direction: column;
        align-items: center;
        gap: var(--la-space-xs);
    }

    .la-casino-block--table .la-table-row__bonus-amount {
        font-size: var(--la-text-2xl);
        font-weight: 800;
        color: var(--la-secondary);
    }

    .la-casino-block--table .la-table-row__bonus-spins {
        font-size: var(--la-text-base);
        padding: var(--la-space-xs) var(--la-space-sm);
        background: var(--la-primary);
        color: #fff;
        border-radius: var(--la-radius-full);
    }

    .la-casino-block--table .la-table-row__bonus-text {
        font-size: var(--la-text-sm);
        color: var(--la-text-secondary);
        max-width: 280px;
    }

    /* Info rows - grid layout */
    .la-casino-block--table .la-table-row__cell--rating,
    .la-casino-block--table .la-table-row__cell--info,
    .la-casino-block--table .la-table-row__cell--payments {
        padding: var(--la-space-md) var(--la-space-lg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--la-border);
    }

    .la-casino-block--table .la-table-row__cell--rating::before,
    .la-casino-block--table .la-table-row__cell--info::before,
    .la-casino-block--table .la-table-row__cell--payments::before {
        font-size: var(--la-text-sm);
        font-weight: 600;
        color: var(--la-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .la-casino-block--table .la-table-row__cell--rating::before {
        content: 'Reiting';
    }

    .la-casino-block--table .la-table-row__cell--info::before {
        content: 'Info';
    }

    .la-casino-block--table .la-table-row__cell--payments::before {
        content: 'Maksed';
    }

    .la-casino-block--table .la-table-row__rating {
        justify-content: flex-end;
        gap: var(--la-space-sm);
    }

    .la-casino-block--table .la-table-row__rating-bar {
        width: 60px;
    }

    .la-casino-block--table .la-table-row__rating-value {
        font-weight: 700;
        font-size: var(--la-text-lg);
    }

    .la-casino-block--table .la-table-row__quick-info {
        flex-direction: row;
        gap: var(--la-space-md);
        justify-content: flex-end;
    }

    .la-casino-block--table .la-table-row__info-item {
        display: flex;
        align-items: center;
        gap: var(--la-space-xs);
        font-size: var(--la-text-sm);
    }

    .la-casino-block--table .la-table-row__payments {
        justify-content: flex-end;
    }

    /* Action section - full width buttons */
    .la-casino-block--table .la-table-row__cell--action {
        padding: var(--la-space-md);
        background: var(--la-bg-secondary);
    }

    .la-casino-block--table .la-table-row__actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--la-space-sm);
    }

    .la-casino-block--table .la-table-row__cta {
        width: 100%;
        padding: var(--la-space-md) var(--la-space-lg);
        font-size: var(--la-text-base);
        font-weight: 700;
        border-radius: var(--la-radius-lg);
        text-align: center;
        justify-content: center;
    }

    .la-casino-block--table .la-table-row__review-link {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--la-space-xs);
        padding: var(--la-space-sm);
        color: var(--la-text-secondary);
        font-size: var(--la-text-sm);
        text-decoration: none;
    }

    .la-casino-block--table .la-table-row__review-link:hover {
        color: var(--la-primary);
    }
}

/* ==========================================================================
   Grid Card V2 - Wide Logo at Top
   ========================================================================== */

.la-grid-card {
    display: flex;
    flex-direction: column;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-xl);
    border: 1px solid var(--la-border);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.la-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.la-grid-card--featured {
    border: 2px solid var(--la-primary);
}

/* Grid Card Header - Wide Logo */
.la-grid-card__header {
    position: relative;
    padding: var(--la-space-md);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes logoZoom {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Rank badge - override for wide logo header */
.la-grid-card__rank {
    position: absolute;
    top: var(--la-space-sm);
    left: var(--la-space-sm);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 10px;
    border-radius: var(--la-radius-full);
    z-index: 3;
    white-space: nowrap;
    line-height: 1;
}

/* Top 3 rank colors */
.la-grid-card__rank--1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.la-grid-card__rank--2 {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.la-grid-card__rank--3 {
    background: linear-gradient(135deg, #CD7F32 0%, #B8702E 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
}

.la-grid-card__badge {
    position: absolute;
    top: var(--la-space-sm);
    right: var(--la-space-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--la-radius-full);
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
}

.la-grid-card__badge--featured {
    background: linear-gradient(135deg, var(--la-primary), var(--la-secondary));
    color: white;
}

.la-grid-card__badge--new {
    background: var(--la-success);
    color: white;
}

/* Wide Logo in Header */
.la-grid-card__logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px var(--la-space-lg);
    text-decoration: none;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--la-radius-md);
    background: rgba(0, 0, 0, 0.3);
}

/* Blurred logo background effect */
.la-grid-card__logo::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: var(--logo-bg) center/cover no-repeat;
    filter: blur(25px) saturate(1.5);
    opacity: 0.8;
    animation: logoZoom 12s ease-in-out infinite;
    z-index: 0;
}

/* Dark overlay for better contrast */
.la-grid-card__logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.la-grid-card__logo-img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.la-grid-card__logo-text {
    font-weight: 700;
    font-size: var(--la-text-lg);
    text-align: center;
    color: #fff;
    padding: var(--la-space-md);
}

/* Rating Circle */
.la-grid-card__rating-circle {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: var(--la-bg-card);
    border-radius: var(--la-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.la-grid-card__rating-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(-90deg);
}

.la-grid-card__rating-bg {
    fill: none;
    stroke: var(--la-bg-light);
    stroke-width: 3;
}

.la-grid-card__rating-fill {
    fill: none;
    stroke: var(--la-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.la-grid-card__rating-value {
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: var(--la-text-primary);
}

/* Grid Card Body */
.la-grid-card__body {
    padding: var(--la-space-xl) var(--la-space-lg) var(--la-space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--la-space-md);
}

.la-grid-card__title {
    font-size: var(--la-text-lg);
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.la-grid-card__title a {
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-grid-card__title a:hover {
    color: var(--la-primary);
}

/* Bonus Section */
.la-grid-card__bonus {
    text-align: center;
    padding: var(--la-space-md);
    background: linear-gradient(135deg, rgba(var(--la-primary-rgb), 0.1), rgba(var(--la-secondary-rgb), 0.1));
    border-radius: var(--la-radius-md);
}

.la-grid-card__bonus-amount {
    font-size: var(--la-text-xl);
    font-weight: 800;
    color: var(--la-primary);
    display: block;
}

.la-grid-card__bonus-text {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    margin-top: 4px;
}

.la-grid-card__free-spins {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--la-space-sm);
    padding: 4px 10px;
    background: rgba(var(--la-secondary-rgb), 0.1);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-secondary);
}

/* Quick Info */
.la-grid-card__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--la-space-sm);
}

.la-grid-card__info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--la-space-sm);
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
    text-align: center;
}

.la-grid-card__info-label {
    font-size: 10px;
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.la-grid-card__info-value {
    font-size: var(--la-text-sm);
    font-weight: 600;
    color: var(--la-text-primary);
}

/* Payment Methods */
.la-grid-card__payments {
    display: flex;
    justify-content: center;
    gap: var(--la-space-xs);
    flex-wrap: wrap;
}

.la-grid-card__payment {
    width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-sm);
}

.la-grid-card__payment svg,
.la-grid-card__payment img {
    max-width: 24px;
    max-height: 16px;
}

.la-grid-card__payment--more {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-text-muted);
}

/* Grid Card Footer */
.la-grid-card__footer {
    padding: var(--la-space-lg);
    border-top: 1px solid var(--la-border);
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
}

.la-grid-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-sm);
}

.la-grid-card__review {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--la-space-xs);
    color: var(--la-text-secondary);
    font-size: var(--la-text-sm);
    text-decoration: none;
}

.la-grid-card__review:hover {
    color: var(--la-primary);
}

/* Grid Responsive */
@media (max-width: 768px) {
    .la-grid-card__header {
        min-height: 100px;
    }

    .la-grid-card__logo-img {
        max-height: 60px;
    }
    .la-casino-hero__stats {
        padding: 0 0 20px;
        gap: 6px;
    }
    .la-casino-hero__stat {
        padding: 7px 13px;
    }
    .la-grid-card__body {
        padding: var(--la-space-lg) var(--la-space-md) var(--la-space-md);
    }
}

/* ==========================================================================
   Horizontal Cards (Compact Inline Style)
   ========================================================================== */

.la-casino-horizontal {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-sm);
    width: 100%;
}

.la-horizontal-card {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: var(--la-space-md);
    background: var(--la-bg-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-lg);
    transition: all 0.2s ease;
}

.la-horizontal-card:hover {
    border-color: var(--la-primary);
    background: var(--la-bg-card-hover);
    transform: translateX(4px);
}

.la-horizontal-card--featured {
    border-color: var(--la-primary);
    background: linear-gradient(135deg, rgba(var(--la-primary-rgb), 0.05) 0%, var(--la-bg-card) 100%);
}

.la-horizontal-card__rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: var(--la-text-secondary);
    flex-shrink: 0;
}

.la-horizontal-card--featured .la-horizontal-card__rank {
    background: linear-gradient(135deg, var(--la-primary), var(--la-secondary));
    color: #fff;
}

.la-horizontal-card__logo {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--la-bg-light);
    border-radius: var(--la-radius-md);
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
}

.la-horizontal-card__logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.la-horizontal-card__logo-text {
    font-size: var(--la-text-xs);
    font-weight: 600;
    color: var(--la-text-primary);
    text-align: center;
    padding: 4px;
    line-height: 1.2;
}

.la-horizontal-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-horizontal-card__name {
    margin: 0;
    font-size: var(--la-text-base);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-horizontal-card__name a {
    color: var(--la-text-primary);
    text-decoration: none;
}

.la-horizontal-card__name a:hover {
    color: var(--la-primary);
}

.la-horizontal-card__bonus {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-horizontal-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 var(--la-space-md);
}

.la-horizontal-card__rating-value {
    font-size: var(--la-text-base);
    font-weight: 700;
    color: var(--la-primary);
}

.la-horizontal-card__rating svg {
    color: var(--la-accent);
}

.la-horizontal-card__actions {
    flex-shrink: 0;
}

.la-horizontal-card__cta {
    white-space: nowrap;
}

/* Horizontal Responsive */
@media (max-width: 640px) {
    .la-horizontal-card {
        flex-wrap: wrap;
    }

    .la-horizontal-card__rating {
        padding: 0;
    }

    .la-horizontal-card__actions {
        width: 100%;
        margin-top: var(--la-space-sm);
    }

    .la-horizontal-card__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Top List Page Template
   ========================================================================== */

/* Top List Hero */
.la-toplist-hero {
    position: relative;
    padding: var(--la-space-xl) 0 var(--la-space-2xl);
    overflow: hidden;
    background: var(--la-bg-gradient);
}

.la-toplist-hero--gradient {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.la-toplist-hero--dark {
    background: var(--la-bg-dark);
}

.la-toplist-hero--light {
    background: var(--la-bg-light);
}

.la-toplist-hero--minimal {
    background: transparent;
    padding: var(--la-space-xl) 0;
}

.la-toplist-hero--image,
.la-toplist-hero--has-bg {
    background-size: cover;
    background-position: center;
}

.la-toplist-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.85) 0%, rgba(26, 26, 46, 0.9) 100%);
    pointer-events: none;
}

.la-toplist-hero--minimal .la-toplist-hero__overlay {
    display: none;
}

/* Breadcrumbs */
.la-toplist-hero__breadcrumbs {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    margin-bottom: var(--la-space-lg);
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-toplist-hero__breadcrumbs a {
    color: var(--la-text-secondary);
    text-decoration: none;
    transition: color var(--la-transition-fast);
}

.la-toplist-hero__breadcrumbs a:hover {
    color: var(--la-primary-light);
}

.la-toplist-hero__breadcrumbs-sep {
    opacity: 0.5;
}

.la-toplist-hero__breadcrumbs-current {
    color: var(--la-text-primary);
}

/* Hero Content */
.la-toplist-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero Title */

.la-toplist-hero__title {
    font-family: var(--la-font-display);
    font-size: clamp(var(--la-text-2xl), 4vw, var(--la-text-4xl));
    font-weight: 800;
    color: var(--la-text-primary);
    line-height: var(--la-leading-tight);
    margin: 0 0 var(--la-space-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Hero Intro Text */
.la-toplist-hero__intro {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
    line-height: var(--la-leading-relaxed);
    margin: 0 0 var(--la-space-md);
    max-width: 550px;
}

/* Hero Meta (Author & Date) - SEO */
.la-toplist-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--la-space-sm);
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-toplist-hero__author {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.la-toplist-hero__author:hover {
    opacity: 0.85;
}

.la-toplist-hero__author-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--la-radius-full);
    border: 2px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
}

.la-toplist-hero__author-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.la-toplist-hero__author-name {
    font-weight: 600;
    color: var(--la-text-primary);
    font-size: var(--la-text-sm);
}

.la-toplist-hero__author-title {
    font-size: 11px;
    color: var(--la-text-muted);
}

.la-toplist-hero__meta-sep {
    opacity: 0.4;
}

.la-toplist-hero__updated {
    display: flex;
    align-items: center;
    gap: 4px;
}

.la-toplist-hero__updated svg {
    opacity: 0.7;
}

.la-toplist-hero__count {
    color: var(--la-text-secondary);
}

.la-toplist-hero__count strong {
    color: var(--la-primary-light);
    font-weight: 600;
}

/* Filter Bar */
.la-toplist-filters {
    background: var(--la-bg-card);
    border-bottom: 1px solid var(--la-border);
    padding: var(--la-space-md) 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.la-toplist-filters__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--la-space-lg);
    flex-wrap: wrap;
}

.la-toplist-filters__group {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
}

.la-toplist-filters__label {
    font-size: var(--la-text-sm);
    color: var(--la-text-secondary);
}

.la-toplist-filters__select {
    padding: var(--la-space-sm) var(--la-space-md);
    background: var(--la-bg-light);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-md);
    color: var(--la-text-primary);
    font-size: var(--la-text-sm);
    cursor: pointer;
}

.la-toplist-filters__select:focus {
    outline: none;
    border-color: var(--la-primary);
}

.la-toplist-filters__count {
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-toplist-filters__count strong {
    color: var(--la-text-primary);
}

/* Top List Content */
.la-toplist-content {
    padding: var(--la-space-2xl) 0;
}

.la-toplist-content__list {
    margin-bottom: var(--la-space-xl);
}

.la-toplist-content__footer {
    text-align: center;
    margin-top: var(--la-space-xl);
}

/* Content Area */
.la-toplist-content-area {
    padding: var(--la-space-2xl) 0;
}

.la-toplist-content-area .la-content {
    background: var(--la-bg-card);
    padding: var(--la-space-xl);
    border-radius: var(--la-radius-lg);
    border: 1px solid var(--la-border);
}

/* Related Section */
.la-related-section {
    padding: var(--la-space-2xl) 0;
        background: #191d37;
}

.la-related-grid {
    display: grid;
    gap: var(--la-space-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .la-toplist-hero {
        padding: var(--la-space-lg) 0 var(--la-space-xl);
    }

    .la-toplist-hero__title {
        font-size: var(--la-text-2xl);
    }

    .la-toplist-hero__intro {
        font-size: var(--la-text-sm);
    }

    .la-toplist-hero__meta {
        font-size: var(--la-text-xs);
        gap: var(--la-space-xs);
    }

    .la-toplist-hero__author-avatar {
        width: 24px;
        height: 24px;
    }

    .la-toplist-filters__bar {
        flex-direction: column;
        align-items: stretch;
    }

    .la-toplist-filters__group {
        justify-content: space-between;
    }

    .la-toplist-filters__count {
        text-align: center;
    }
}

/* ==========================================================================
   Top List Hero - Animated Background & Featured Card
   ========================================================================== */

/* Animated Background Container */
.la-toplist-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Floating Particles */
.la-toplist-hero__particles {
    position: absolute;
    inset: 0;
}

.la-toplist-hero__particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: toplist-particle-float 15s ease-in-out infinite;
}

.la-toplist-hero__particle:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    animation-duration: 20s;
}

.la-toplist-hero__particle:nth-child(2) {
    left: 25%;
    top: 60%;
    animation-delay: -3s;
    animation-duration: 18s;
    width: 6px;
    height: 6px;
}

.la-toplist-hero__particle:nth-child(3) {
    left: 50%;
    top: 30%;
    animation-delay: -5s;
    animation-duration: 22s;
}

.la-toplist-hero__particle:nth-child(4) {
    left: 70%;
    top: 70%;
    animation-delay: -8s;
    animation-duration: 16s;
    width: 5px;
    height: 5px;
}

.la-toplist-hero__particle:nth-child(5) {
    left: 85%;
    top: 40%;
    animation-delay: -12s;
    animation-duration: 25s;
    width: 3px;
    height: 3px;
}

@keyframes toplist-particle-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-50px) translateX(-10px) scale(1);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-20px) translateX(20px) scale(0.8);
        opacity: 0.5;
    }
}

/* Animated Glows */
.la-toplist-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: toplist-glow-pulse 8s ease-in-out infinite;
}

.la-toplist-hero__glow--1 {
    width: 400px;
    height: 400px;
    background: var(--la-primary);
    left: -100px;
    top: -100px;
    animation-delay: 0s;
}

.la-toplist-hero__glow--2 {
    width: 300px;
    height: 300px;
    background: var(--la-secondary);
    right: -50px;
    bottom: -50px;
    animation-delay: -4s;
}

@keyframes toplist-glow-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* Subtle Grid Pattern */
.la-toplist-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: toplist-grid-move 20s linear infinite;
}

@keyframes toplist-grid-move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Hero Wrapper - Two Column Layout */
.la-toplist-hero__wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--la-space-2xl);
    align-items: center;
}

.la-toplist-hero--with-featured .la-toplist-hero__wrapper {
    grid-template-columns: 1fr 1fr;
    gap: var(--la-space-xl);
}

.la-toplist-hero--with-featured .la-toplist-hero__content {
    text-align: left;
    max-width: none;
    margin: 0;
}

/* Featured Casino Card - Horizontal Layout */
.la-toplist-hero__featured {
    display: flex;
    align-items: center;
}

.la-toplist-hero__featured-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--la-radius-xl);
    padding: var(--la-space-lg) var(--la-space-xl);
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.la-toplist-hero__featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

.la-toplist-hero__featured-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--la-primary-rgb), 0.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Featured Badge - Same style as casino card rank but positioned top-right */
.la-toplist-hero__featured-badge {
    position: absolute;
    top: var(--la-space-md);
    right: var(--la-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--la-accent), #d97706);
    color: #1e1b4b;
    font-size: var(--la-text-sm);
    font-weight: 800;
    border-radius: var(--la-radius-md);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 2;
}

.la-toplist-hero__featured-badge svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Featured Header - Horizontal Layout */
.la-toplist-hero__featured-header {
    display: flex;
    align-items: center;
    gap: var(--la-space-lg);
    margin-bottom: var(--la-space-lg);
    padding-top: var(--la-space-xs);
}

/* Featured Logo */
.la-toplist-hero__featured-logo {
    flex-shrink: 0;
}

.la-toplist-hero__featured-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--la-radius-lg);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.la-toplist-hero__featured-logo a:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.la-toplist-hero__featured-logo img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}

/* Featured Info */
.la-toplist-hero__featured-info {
    flex: 1;
    min-width: 0;
}

.la-toplist-hero__featured-name {
    margin: 0 0 6px;
    font-size: var(--la-text-xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.la-toplist-hero__featured-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.la-toplist-hero__featured-name a:hover {
    color: var(--la-primary-light);
}

/* Featured Rating */
.la-toplist-hero__featured-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.la-toplist-hero__featured-rating .la-rating__star {
    color: var(--la-accent);
    width: 16px;
    height: 16px;
}

.la-toplist-hero__featured-rating .la-rating__star--empty {
    color: rgba(255, 255, 255, 0.25);
}

.la-toplist-hero__featured-rating-value {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: #fff;
}

.la-toplist-hero__featured-rating-max {
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.5);
}

/* Featured Bonus - Compact */
.la-toplist-hero__featured-bonus {
    margin-bottom: var(--la-space-md);
}

.la-toplist-hero__featured-bonus-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.la-toplist-hero__featured-bonus-value {
    display: block;
    font-family: var(--la-font-display);
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

/* Featured Highlights - Compact Row */
.la-toplist-hero__featured-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--la-space-lg);
}

.la-toplist-hero__featured-highlight {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-xs);
    color: rgba(255, 255, 255, 0.85);
}

.la-toplist-hero__featured-highlight svg {
    color: var(--la-primary-light);
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Featured Actions - Horizontal */
.la-toplist-hero__featured-actions {
    display: flex;
    align-items: center;
    gap: var(--la-space-lg);
}

.la-toplist-hero__featured-cta {
    flex: 1;
    justify-content: center;
}

.la-toplist-hero__featured-review {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--la-text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.la-toplist-hero__featured-review:hover {
    color: #fff;
}

.la-toplist-hero__featured-review svg {
    width: 14px;
    height: 14px;
}

/* Responsive - Featured Card */
@media (max-width: 1024px) {
    .la-toplist-hero--with-featured .la-toplist-hero__wrapper {
        grid-template-columns: 1fr;
        gap: var(--la-space-lg);
    }

    .la-toplist-hero--with-featured .la-toplist-hero__content {
        text-align: center;
        order: 1;
    }

    .la-toplist-hero--with-featured .la-toplist-hero__meta {
        justify-content: center;
    }

    .la-toplist-hero__featured {
        order: 2;
    }

    .la-toplist-hero__featured-card {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .la-toplist-hero__featured-card {
        padding: var(--la-space-md);
    }

    .la-toplist-hero__featured-badge {
        top: var(--la-space-xs);
        right: var(--la-space-xs);
        min-height: 24px;
        padding: 0 8px;
        font-size: 10px;
        gap: 4px;
        border-radius: var(--la-radius-sm);
    }

    .la-toplist-hero__featured-badge svg {
        width: 10px;
        height: 10px;
    }

    .la-toplist-hero__featured-header {
        flex-direction: column;
        text-align: center;
    }

    .la-toplist-hero__featured-logo a {
        width: 60px;
        height: 60px;
    }

    .la-toplist-hero__featured-highlights {
        justify-content: center;
    }

    .la-toplist-hero__featured-actions {
        flex-direction: column;
    }

    .la-toplist-hero__featured-review {
        justify-content: center;
    }

    .la-toplist-hero__author-info {
        display: none;
    }

    .la-toplist-hero__glow--1 {
        width: 200px;
        height: 200px;
    }

    .la-toplist-hero__glow--2 {
        width: 150px;
        height: 150px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .la-toplist-hero__particle,
    .la-toplist-hero__glow,
    .la-toplist-hero__grid {
        animation: none;
    }
}

/* ==========================================================================
   TOP LIST CONTENT SECTION
   ========================================================================== */

.la-toplist-content__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--la-space-xl);
    padding-bottom: var(--la-space-lg);
    border-bottom: 1px solid var(--la-border);
}

.la-toplist-content__header-left {
    flex: 1;
}

.la-toplist-content__title {
    display: flex;
    align-items: center;
    gap: var(--la-space-sm);
    margin: 0 0 var(--la-space-xs);
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 700;
    color: var(--la-text-primary);
}

.la-toplist-content__title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--la-space-sm);
    background: var(--la-primary);
    border-radius: var(--la-radius-full);
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: #fff;
}

.la-toplist-content__subtitle {
    margin: 0;
    font-size: var(--la-text-sm);
    color: var(--la-text-muted);
}

.la-toplist-content__header-right {
    flex-shrink: 0;
}

.la-toplist-content__legend {
    display: flex;
    align-items: center;
    gap: var(--la-space-lg);
}

.la-toplist-content__legend-item {
    display: flex;
    align-items: center;
    gap: var(--la-space-xs);
    font-size: var(--la-text-xs);
    color: var(--la-text-muted);
}

.la-toplist-content__legend-item svg {
    color: var(--la-accent);
}

.la-toplist-content__legend-item:last-child svg {
    color: var(--la-success);
}

@media (max-width: 768px) {
    .la-toplist-content__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--la-space-md);
    }

    .la-toplist-content__title {
        font-size: var(--la-text-xl);
    }

    .la-toplist-content__legend {
        gap: var(--la-space-md);
    }
}

/* ==========================================================================
   Components - VPN Card
   ========================================================================== */

.la-vpn-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--la-space-md);
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(49, 46, 129, 0.9) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--la-radius-xl);
    padding: var(--la-space-lg);
    transition: all var(--la-transition-base);
    overflow: visible;
}

.la-vpn-card:hover {
    border-color: var(--la-primary);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
    transform: translateY(-2px);
}

.la-vpn-card--top {
    border: 2px solid var(--la-primary);
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.98) 0%, rgba(99, 102, 241, 0.15) 100%);
}

/* VPN Card Rank Badge */
.la-vpn-card__rank {
    position: absolute;
    top: -10px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: linear-gradient(135deg, var(--la-accent), #d97706);
    color: #1e1b4b;
    font-size: var(--la-text-base);
    font-weight: 900;
    border-radius: var(--la-radius-md);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    z-index: 2;
}

/* VPN Card Header */
.la-vpn-card__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
}

.la-vpn-card__logo {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--la-radius-lg);
    padding: 8px;
}

.la-vpn-card__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.la-vpn-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--la-radius-md);
}

.la-vpn-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-vpn-card__name {
    margin: 0;
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

/* VPN Card Rating */
.la-vpn-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.la-vpn-card__rating-value {
    font-size: var(--la-text-lg);
    font-weight: 700;
    color: var(--la-accent);
}

.la-vpn-card__rating-max {
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.la-vpn-card__rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
}

.la-vpn-card__star {
    color: rgba(255, 255, 255, 0.2);
}

.la-vpn-card__star.filled {
    color: var(--la-accent);
}

/* VPN Card Discount Badge */
.la-vpn-card__discount {
    margin-left: auto;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: var(--la-radius-md);
    font-size: var(--la-text-sm);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* VPN Card Offer */
.la-vpn-card__offer {
    padding: var(--la-space-sm) var(--la-space-md);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: var(--la-radius-md);
    border-left: 3px solid var(--la-primary);
    font-family: var(--la-font-display);
    font-size: var(--la-text-base);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

/* VPN Card Pricing */
.la-vpn-card__pricing {
    display: flex;
    align-items: baseline;
    gap: var(--la-space-md);
}

.la-vpn-card__price-main {
    display: flex;
    align-items: baseline;
}

.la-vpn-card__price-value {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 800;
    color: #fff;
}

.la-vpn-card__price-period {
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-left: 2px;
}

.la-vpn-card__price-yearly {
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.5);
}

/* VPN Card Features */
.la-vpn-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-xs) var(--la-space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.la-vpn-card__features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.8);
}

.la-vpn-card__features li svg {
    color: #10b981;
    flex-shrink: 0;
}

/* VPN Card Description */
.la-vpn-card__description {
    font-size: var(--la-text-sm);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* VPN Card Actions */
.la-vpn-card__actions {
    margin-top: var(--la-space-sm);
}

.la-vpn-card__actions .la-btn--block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    font-size: var(--la-text-base);
}

.la-vpn-card__actions .la-btn svg {
    transition: transform 0.2s ease;
}

.la-vpn-card__actions .la-btn:hover svg {
    transform: translateX(4px);
}

/* VPN Card List */
.la-vpn-list {
    display: flex;
    flex-direction: column;
    gap: var(--la-space-lg);
}

.la-vpn-list__header {
    margin-bottom: var(--la-space-md);
}

.la-vpn-list__title {
    font-family: var(--la-font-display);
    font-size: var(--la-text-2xl);
    font-weight: 800;
    color: #fff;
    margin: 0 0 var(--la-space-xs) 0;
}

.la-vpn-list__subtitle {
    font-size: var(--la-text-base);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* VPN Cards Responsive */
@media (min-width: 768px) {
    .la-vpn-card {
        grid-template-columns: 1fr 180px;
        grid-template-rows: auto auto auto auto;
        gap: var(--la-space-md) var(--la-space-xl);
    }

    .la-vpn-card__header {
        grid-column: 1 / 2;
    }

    .la-vpn-card__offer {
        grid-column: 1 / 2;
    }

    .la-vpn-card__pricing {
        grid-column: 1 / 2;
    }

    .la-vpn-card__features {
        grid-column: 1 / 2;
    }

    .la-vpn-card__description {
        grid-column: 1 / 2;
    }

    .la-vpn-card__actions {
        grid-column: 2 / 3;
        grid-row: 1 / 5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .la-vpn-card__actions .la-btn--block {
        width: auto;
        padding: 14px 32px;
    }
}

@media (min-width: 1024px) {
    .la-vpn-card {
        grid-template-columns: 1fr auto 200px;
        grid-template-rows: auto auto;
        align-items: center;
    }

    .la-vpn-card__header {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .la-vpn-card__offer {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .la-vpn-card__pricing {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .la-vpn-card__features {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        justify-content: flex-end;
    }

    .la-vpn-card__description {
        display: none;
    }

    .la-vpn-card__actions {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }
}