/* =========================================
   1. CSS Reset & Normalize
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* =========================================
   2. Variables & Theme (Dark/Casino Vibes)
   ========================================= */
:root {
    /* Colors */
    --color-bg-main: #0f172a;       /* Deep Slate */
    --color-bg-secondary: #1e293b;  /* Lighter Slate */
    --color-text-main: #f1f5f9;     /* Off-white */
    --color-text-muted: #94a3b8;    /* Grey */
    
    --color-primary: #0ea5e9;       /* Sky Blue */
    --color-primary-hover: #38bdf8; 
    --color-accent: #f59e0b;        /* Gold/Amber for casino feel */
    --color-accent-hover: #fbbf24;
    --color-success: #10b981;
    --color-danger: #ef4444;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-dark: linear-gradient(to bottom, #1e293b, #0f172a);

    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.5rem, 2vw + 1rem, 2.25rem);
    --font-size-2xl: clamp(2rem, 3vw + 1rem, 3rem);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --container-width: 1200px;

    /* Effects */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);
    
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   3. Global Structure
   ========================================= */
body {
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    font-family: var(--font-family-base);
    overflow-x: hidden;
}

.wrap {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Utility for background sections */
.bgall {
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================
   4. Header Styling
   ========================================= */
header.bgall {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.header_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    height: 80px;
}

.custom-logo-link img {
    max-height: 50px;
    width: auto;
    transition: var(--transition-base);
}

.custom-logo-link:hover img {
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255,255,255,0.2));
    transform: scale(1.02);
}

/* Header Buttons (Login) */
.m_but {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.5em;
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    margin-left: auto; /* Pushes it to the right */
}

.m_but:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
}

.m_but:active {
    transform: translateY(0);
}

/* Hidden util for tailwind replacement */
.hidden { display: none; }
.md\:block { display: block; }
.ml-auto { margin-left: auto; }

@media (max-width: 768px) {
    .hidden { display: none !important; }
    .md\:block { display: none !important; }
    .md\:hidden { display: flex !important; }
    
    .m_but {
        display: none; /* Hide regular login btn on mobile if needed, or adjust */
    }
}

/* =========================================
   5. Navigation Styling
   ========================================= */
nav.bgall {
    background-color: var(--color-bg-main);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}

.header-menu li a {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition-base);
    position: relative;
    padding: 0.5em 0;
}

.header-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.header-menu li a:hover {
    color: var(--color-primary);
}

.header-menu li a:hover::after {
    width: 100%;
}

/* Mobile Menu (Alpine replacement styles) */
#mobileMenu {
    background-color: var(--color-bg-secondary);
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: var(--spacing-lg);
    z-index: 200;
    transition: transform 0.3s ease;
}

#mobileMenu .header-menu {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
}

#mobileMenu .header-menu li a {
    font-size: 1.1rem;
    color: var(--color-text-main);
}

/* Button inside mobile header */
[aria-label="mobile menu"] {
    background: transparent;
    border: none;
    color: var(--color-text-main);
    cursor: pointer;
    padding: var(--spacing-xs);
    transition: var(--transition-base);
}

[aria-label="mobile menu"]:hover {
    color: var(--color-primary);
}

/* =========================================
   6. Content Styling (Typography & Layout)
   ========================================= */
.cms-content {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    max-width: 800px; /* Better readability */
}

.cms-content h1 {
    font-size: var(--font-size-xl);
    color: var(--color-text-main);
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
    font-weight: 800;
    background: linear-gradient(90deg, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cms-content h2 {
    font-size: var(--font-size-2xl); /* Using the clamp var */
    font-size: 1.75rem;
    color: var(--color-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    border-left: 4px solid var(--color-accent);
    padding-left: var(--spacing-md);
}

.cms-content p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.cms-content ul {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-lg);
}

.cms-content ul li {
    position: relative;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
    padding-left: var(--spacing-md);
}

.cms-content ul li::before {
    content: '•';
    color: var(--color-accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2em;
}

/* Images */
figure.wp-block-image {
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.1);
}

figure.wp-block-image img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

figure.wp-block-image:hover img {
    transform: scale(1.03);
}

/* Content Buttons (CTA) */
.btn-box {
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg) 0;
}

.btn.btn-size-big {
    display: inline-block;
    background: var(--gradient-gold);
    color: #0f172a; /* Dark text for contrast on gold */
    font-weight: 800;
    padding: 1.2rem 2.5rem;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    border: none;
    text-align: center;
}

.btn.btn-size-big::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.5s;
}

.btn.btn-size-big:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(245, 158, 11, 0.6);
}

.btn.btn-size-big:hover::after {
    left: 100%;
}

/* =========================================
   7. Modal Styling (Consolidating & Improving)
   ========================================= */
/* 
   The HTML provided contains inline styles for the modal. 
   Below is an improved CSS structure that targets the provided semantic classes 
   to ensure it looks great even if inline styles are removed or overridden.
*/

#promo-overlay {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px);
}

.promoX_9b2f_modal {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
    font-family: var(--font-family-base) !important;
}

.promoX_9b2f_badge {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.5) !important;
}

.promoX_9b2f_btnMain {
    background: var(--gradient-primary) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition-base) !important;
}

.promoX_9b2f_btnMain:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4) !important;
}

.promoX_9b2f_btnSecondary {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--color-text-muted) !important;
    transition: var(--transition-base) !important;
}

.promoX_9b2f_btnSecondary:hover {
    background: rgba(255,255,255,0.05) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.5) !important;
}

.promoX_9b2f_closeBtn {
    background: rgba(0,0,0,0.3) !important;
    transition: var(--transition-base) !important;
}

.promoX_9b2f_closeBtn:hover {
    background: var(--color-danger) !important;
    color: white !important;
    transform: rotate(90deg);
}

/* =========================================
   8. Footer Styling
   ========================================= */
footer.bgall {
    background-color: #020617; /* Darker than main bg */
    padding: var(--spacing-lg) 0;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.copu {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    opacity: 0.7;
}

/* =========================================
   9. Responsive Media Queries
   ========================================= */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 1.5rem;
        --spacing-xl: 2.5rem;
    }

    .header_list {
        height: 60px;
        padding: 0 var(--spacing-sm);
    }

    .custom-logo-link img {
        max-height: 35px;
    }

    .cms-content {
        padding: var(--spacing-lg);
    }

    .cms-content h1 {
        font-size: 1.75rem;
    }

    .btn.btn-size-big {
        width: 100%;
        padding: 1rem;
    }
    
    nav.hidden.md\:block {
        display: none;
    }
}

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

.cms-content > * {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Staggered animation for content */
.cms-content > *:nth-child(1) { animation-delay: 0.1s; }
.cms-content > *:nth-child(2) { animation-delay: 0.2s; }
.cms-content > *:nth-child(3) { animation-delay: 0.3s; }