/* --- Table of Contents ---
1.  :root Variables & Base Styles
2.  Animated Background
3.  Header & Navigation
4.  Mobile Navigation Overlay
5.  Utility & Animation Classes
6.  Hero Section
7.  Offers Section & Casino Cards
8.  Content Sections (General)
9.  About Us Section
10. Why Choose Us Section
11. FAQ Section
12. Important Information Section
13. Footer
14. Popups
15. Media Queries (Responsive Design)
--------------------------- */

/* --- 1. :root Variables & Base Styles --- */
:root {
    --primary-orange: #ff793e;
    --dark-blue: #0a1f3a;
    --mid-blue: #022a55;
    --dark-purple: #1b0b31;
    --light-text: #ffffff;
    --secondary-text: #c0c8e7;
    --gold: #ffc701;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --header-height: 70px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", sans-serif;
    color: var(--light-text);
    background: var(--dark-blue);
    overflow-x: hidden;
}

h1, h2, h3, h4, .header-logo a {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 2. Animated Background --- */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(80px);
    will-change: transform;
}

.blob1 {
    width: 500px;
    height: 500px;
    background: #4e0287;
    top: -10%;
    left: -10%;
    animation: float 20s infinite alternate;
}

.blob2 {
    width: 400px;
    height: 400px;
    background: var(--primary-orange);
    bottom: 5%;
    right: -5%;
    animation: float 25s infinite alternate;
    animation-delay: -5s;
}

.blob3 {
    width: 300px;
    height: 300px;
    background: var(--mid-blue);
    top: 50%;
    left: 50%;
    animation: float 18s infinite alternate;
    animation-delay: -10s;
}

@keyframes float {
    from {
        transform: translate(0, 0) rotate(0deg);
    }
    to {
        transform: translate(100px, 50px) rotate(180deg);
    }
}

/* --- 3. Header & Navigation --- */
.header-main {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    height: var(--header-height);
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.header-main.scrolled {
    background-color: rgba(10, 31, 58, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px var(--shadow-color);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header-logo a {
    font-size: 24px;
    font-weight: 800;
}

.nav-bar ul {
    display: flex;
    gap: 30px;
}

.nav-bar ul li a {
    font-weight: 500;
    padding: 10px 5px;
    position: relative;
    letter-spacing: 0.5px;
}

.nav-bar ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-bar ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.burger-menu {
    display: none;
    cursor: pointer;
    z-index: 1002;
    position: relative;
    width: 25px;
    height: 20px;
}

.burger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--light-text);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    position: absolute;
}
.burger-menu span:nth-child(1) { top: 0; }
.burger-menu span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-menu span:nth-child(3) { bottom: 0; }

.burger-menu.open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger-menu.open span:nth-child(2) { opacity: 0; }
.burger-menu.open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* --- 4. Mobile Navigation Overlay --- */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 31, 58, 0.95);
    backdrop-filter: blur(15px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.mobile-nav-overlay.open {
    transform: translateX(0);
}
.mobile-nav-overlay nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
}
.mobile-nav-link {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-text);
    opacity: 0;
    transform: translateY(20px);
    transition: color 0.3s, opacity 0.5s, transform 0.5s;
}
.mobile-nav-link:hover {
    color: var(--primary-orange);
}
.mobile-nav-overlay.open .mobile-nav-link {
    opacity: 1;
    transform: translateY(0);
}
.mobile-nav-overlay.open .mobile-nav-link:nth-child(1) { transition-delay: 0.2s; }
.mobile-nav-overlay.open .mobile-nav-link:nth-child(2) { transition-delay: 0.3s; }
.mobile-nav-overlay.open .mobile-nav-link:nth-child(3) { transition-delay: 0.4s; }
.mobile-nav-overlay.open .mobile-nav-link:nth-child(4) { transition-delay: 0.5s; }


/* --- 5. Utility & Animation Classes --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- 6. Hero Section --- */
.hero-section {
    padding: 120px 40px;
    text-align: left;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* subtle dark-blue gradient to make orange pop */
    background: linear-gradient(180deg, var(--dark-blue), var(--mid-blue));
}

.hero-section h1 {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 800;
    color: var(--primary-orange); /* <- orange headline */
    position: relative;
    display: inline-block;
    letter-spacing: -0.02em;
    /* gentle orange glow + readable shadow */
    text-shadow:
      0 6px 18px rgba(255,121,62,0.12),
      0 2px 6px rgba(0,0,0,0.45);
    -webkit-font-smoothing: antialiased;
}

.hero-section h1::after {
    content: "";
    display: block;
    width: 80px;
    height: 6px;
    margin: 14px 0 0;
    background: linear-gradient(90deg, var(--primary-orange), var(--gold));
    border-radius: 3px;
    box-shadow: 0 4px 20px rgba(255,121,62,0.18);
}

.hero-section p {
    font-size: 1.15rem;
    color: var(--secondary-text);
    margin-top: 20px;
    max-width: 650px;
}


/* --- 7. Offers Section & Casino Cards --- */
.offers-section {
    padding: 80px 0;
}
.offers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}
.offer-wrapper {
    background: linear-gradient(135deg, rgba(78, 2, 135, 0.3), rgba(85, 2, 72, 0.3));
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--shadow-color);
    position: relative;
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
}
.offer-wrapper:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 16px 40px var(--shadow-color);
}
.offer-label {
    position: absolute;
    top: -15px;
    left: 25px;
    background: var(--primary-orange);
    padding: 7px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}
.offer-container {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}
.offer-logo {
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.welcome-title h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}
.offer-votes {
    text-align: right;
}
.score-point {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--gold);
}
.stars {
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 1px;
}
.txt-raiting {
    font-size: 12px;
    color: var(--secondary-text);
    margin-top: 5px;
}
.offer-footer {
    margin-top: auto;
}
.offer-btn {
    background: var(--primary-orange);
    color: var(--light-text);
    padding: 14px 25px;
    border-radius: 8px;
    text-decoration: none;
    display: block;
    font-weight: 700;
    text-align: center;
    transition: background 0.3s, transform 0.2s;
    margin-bottom: 15px;
}
.offer-btn:hover {
    background: #e66a2e;
    transform: scale(1.03);
}
.welcome-policy {
    font-size: 11px;
    line-height: 1.5;
    color: var(--secondary-text);
    text-align: center;
}

/* --- 8. Content Sections (General) --- */
.content-section {
    padding: 100px 0;
}
.section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-orange);
    border-radius: 2px;
}
.bg-dark-purple {
    background: var(--dark-purple);
}

/* --- 9. About Us Section --- */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-text h3 {
    font-size: 1.5rem;
    color: var(--primary-orange);
    margin-bottom: 15px;
}
.about-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--secondary-text);
    margin-bottom: 25px;
}
.about-image img {
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--shadow-color);
}

/* --- 10. Why Choose Us Section --- */
/* --- 10. Why Choose Us Section --- */
#why-choose-us {
    padding: 80px 20px;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--mid-blue);
    padding: 25px 30px;
    border-radius: 14px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.why-icon {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--primary-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 3px 8px rgba(255,121,62,0.4);
}

.why-text h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--light-text);
}

.why-text p {
    color: var(--secondary-text);
    line-height: 1.6;
    font-size: 1rem;
    max-width: 650px;
}


/* --- 11. FAQ Section --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    margin-bottom: 15px;
    background: var(--mid-blue);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: background 0.3s;
}
.faq-item[open] {
    background: var(--dark-purple);
}
.faq-item summary {
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 20px;
    position: relative;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--primary-orange);
    transition: transform 0.3s;
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.faq-item p {
    padding: 0 20px 20px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--secondary-text);
}

/* --- 12. Important Information Section --- */
/* --- Important Info Section --- */
#important-info {
    padding: 60px 20px;
}

/* Container grid */
#important-info .info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 50px;
}

/* --- Play Safely & Responsibly block --- */
#important-info .responsible-gaming-container {
    background: var(--mid-blue);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

#important-info .responsible-gaming-container h2 {
    color: var(--primary-orange);
    margin-bottom: 20px;
    font-size: 1.8rem;
}

#important-info .responsible-gaming-container p {
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1rem;
}

/* Logos row */
#important-info .responsible-gaming-logos {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
}

#important-info .responsible-gaming-logos a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#important-info .responsible-gaming-logos a img {
    max-height: 50px;
    width: auto;
    filter: grayscale(100%) brightness(1.2);
    transition: filter 0.3s ease, transform 0.3s ease;
}

#important-info .responsible-gaming-logos a:hover img {
    filter: none;
    transform: scale(1.1);
}

/* Static +18 logo */
#important-info .responsible-gaming-logos .age-icon img {
    max-height: 50px;
    filter: none !important;
    transform: none !important;
    pointer-events: none;
}

/* --- Disclaimer & Disclosure formatting --- */
.info-block.disclaimers {
    background: var(--mid-blue);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.info-block.disclaimers h3 {
    color: var(--primary-orange);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.info-block.disclaimers p {
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 10px;
    font-size: 1rem;
}

/* --- 13. Footer --- */
.main-footer {
    padding: 60px 0 30px;
    background: var(--dark-blue);
    border-top: 1px solid var(--border-color);
}
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}
.footer-about h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--primary-orange);
}
.footer-about p, .footer-links li {
    color: var(--secondary-text);
}
.footer-links h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links a:hover {
    color: var(--primary-orange);
    padding-left: 5px;
}
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--secondary-text);
}

/* --- 14. Popups --- */
.popup { display: none; /* JS will change this */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.popup-content { background: var(--mid-blue); padding: 30px; border-radius: 10px; text-align: center; max-width: 400px; margin: 20px; box-shadow: 0 5px 15px var(--shadow-color); border: 1px solid var(--border-color); }
.popup-content h2 { color: var(--primary-orange); margin-bottom: 15px; }
.popup-content p { margin-bottom: 25px; color: var(--secondary-text); line-height: 1.6; }
.popup-content button { padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; margin: 0 10px; transition: transform 0.2s; }
.popup-content button:hover { transform: scale(1.05); }
.popup-btn-confirm { background: var(--primary-orange); color: var(--light-text); }
.popup-btn-deny { background: #555; color: var(--light-text); }

.cookies-popup { position: fixed; bottom: -100%; left: 0; right: 0; background: #000; color: var(--light-text); padding: 20px; text-align: center; z-index: 9998; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; transition: bottom 0.5s ease-in-out; }
.cookies-popup.show { bottom: 0; }
.confirm-cookie { background: var(--primary-orange); color: var(--light-text); padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; }

/* --- 15. Media Queries --- */
@media (max-width: 992px) {
    .offers { grid-template-columns: 1fr; }
    .about-content { grid-template-columns: 1fr; }
    .about-image { display: none; /* Hide image on smaller screens for better flow */ }
    .info-container { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-links ul { align-items: center; }
}

@media (max-width: 768px) {
    .nav-bar { display: none; }
    .burger-menu { display: block; }
    .offer-container { grid-template-columns: 1fr; text-align: center; }
    .offer-votes { text-align: center; margin-top: 10px; }
    .offer-logo { margin: 0 auto; }
}


/* Privacy Policy Section */
#privacy-policy {
    padding: 60px 20px;
    background: var(--dark-purple); /* keep background unchanged */
    color: var(--secondary-text);
    line-height: 1.7;
}

#privacy-policy .privacy-container {
    max-width: 900px;
    margin: 0 auto;
}

#privacy-policy h1 {
    color: var(--primary-orange);
    font-size: clamp(2.5rem, 5vw, 3rem);
    margin-bottom: 25px;
}

#privacy-policy h2 {
    color: var(--primary-orange);
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

#privacy-policy p {
    font-size: 1rem;
    margin-bottom: 15px;
}

#privacy-policy ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

#privacy-policy ul li {
    margin-bottom: 8px;
    list-style-type: disc;
}

#privacy-policy a {
    color: var(--primary-orange);
    text-decoration: underline;
}

#privacy-policy a:hover {
    color: var(--gold);
    text-decoration: none;
}

/* Mobile responsive tweaks */
@media (max-width: 640px) {
    #privacy-policy h1 {
        font-size: 2rem;
    }
    #privacy-policy h2 {
        font-size: 1.3rem;
    }
}