/* style/casino.css */
:root {
    --primary-color: #11A84E;
    --secondary-color: #22C768;
    --bg-dark: #08160F;
    --bg-card: #11271B;
    --text-main: #F2FFF6;
    --text-secondary: #A7D9B8;
    --border-color: #2E7A4E;
    --glow-color: #57E38D;
    --gold-color: #F2C14E;
    --divider-color: #1E3A2A;
    --deep-green: #0A4B2C;
    --btn-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
}

.page-casino {
    font-family: 'Arial', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-dark);
}

.page-casino__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.page-casino__section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    color: var(--gold-color);
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 10px;
    font-weight: 700;
}

.page-casino__section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--btn-gradient);
    border-radius: 2px;
}

.page-casino__text-block {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 30px auto;
    color: var(--text-secondary);
}

.page-casino__btn-primary,
.page-casino__btn-secondary {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
}

.page-casino__btn-primary {
    background: var(--btn-gradient);
    color: var(--text-main);
    border: 2px solid transparent;
}

.page-casino__btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(87, 227, 141, 0.4);
}

.page-casino__btn-secondary {
    background: none;
    color: var(--glow-color);
    border: 2px solid var(--glow-color);
}

.page-casino__btn-secondary:hover {
    background: var(--glow-color);
    color: var(--bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(87, 227, 141, 0.2);
}

/* HERO Section */
.page-casino__hero-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    padding-top: 10px; /* Small top padding, body handles --header-offset */
    background-color: var(--bg-dark);
    overflow: hidden;
}

.page-casino__hero-image-wrapper {
    width: 100%;
    max-height: 700px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.page-casino__hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.page-casino__hero-content {
    text-align: center;
    max-width: 900px;
    padding: 20px;
}

.page-casino__main-title {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.page-casino__description {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.6;
}

.page-casino__cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Introduction Section */
.page-casino__introduction-section {
    padding: 80px 0;
    background-color: var(--bg-card);
    color: var(--text-main);
    border-bottom: 1px solid var(--divider-color);
}

.page-casino__image-content {
    width: 100%;
    height: auto;
    display: block;
    max-width: 800px;
    margin: 40px auto 0 auto;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Games Section */
.page-casino__games-section {
    padding: 80px 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
    border-bottom: 1px solid var(--divider-color);
}

.page-casino__game-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.page-casino__game-card {
    background-color: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.page-casino__card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.page-casino__card-title {
    font-size: 1.6rem;
    color: var(--gold-color);
    margin-bottom: 15px;
    font-weight: 600;
}

.page-casino__card-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Why Choose Us Section */
.page-casino__why-choose-us {
    padding: 80px 0;
    background-color: var(--bg-card);
    color: var(--text-main);
    border-bottom: 1px solid var(--divider-color);
}

.page-casino__feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.page-casino__feature-item {
    text-align: center;
    padding: 25px;
    border-radius: 10px;
    background-color: var(--deep-green);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-casino__feature-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 5px var(--glow-color));
}

.page-casino__feature-title {
    font-size: 1.5rem;
    color: var(--gold-color);
    margin-bottom: 10px;
    font-weight: 600;
}

.page-casino__feature-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Guide Section */
.page-casino__guide-section {
    padding: 80px 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
    border-bottom: 1px solid var(--divider-color);
}

.page-casino__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.page-casino__step-item {
    background-color: var(--bg-card);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-casino__step-title {
    font-size: 1.7rem;
    color: var(--gold-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.page-casino__step-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Tips Section */
.page-casino__tips-section {
    padding: 80px 0;
    background-color: var(--bg-card);
    color: var(--text-main);
    border-bottom: 1px solid var(--divider-color);
}

.page-casino__tips-list {
    list-style: none;
    padding: 0;
    margin-top: 50px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.page-casino__tips-list li {
    background-color: var(--deep-green);
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1.7;
}

.page-casino__tips-list li strong {
    color: var(--gold-color);
}

/* FAQ Section */
.page-casino__faq-section {
    padding: 80px 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
}

.page-casino__faq-list {
    max-width: 900px;
    margin: 50px auto 0 auto;
}

.page-casino__faq-item {
    background-color: var(--bg-card);
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    color: var(--text-main);
}

.page-casino__faq-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold-color);
    background-color: var(--deep-green);
    border-bottom: 1px solid var(--border-color);
}

.page-casino__faq-item summary::-webkit-details-marker {
    display: none;
}

.page-casino__faq-question {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-casino__faq-qtext {
    flex-grow: 1;
}

.page-casino__faq-toggle {
    font-size: 1.5rem;
    margin-left: 15px;
    transition: transform 0.3s ease;
}

.page-casino__faq-item[open] .page-casino__faq-toggle {
    transform: rotate(45deg);
}

.page-casino__faq-answer {
    padding: 20px 25px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    background-color: var(--bg-card);
}

/* CTA Bottom Section */
.page-casino__cta-bottom {
    padding: 80px 0;
    background-color: var(--bg-card);
    text-align: center;
    color: var(--text-main);
}

/* General Content Area Images */
.page-casino__content-area img,
.page-casino__game-card img,
.page-casino__feature-item img,
.page-casino__steps img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .page-casino {
        font-size: 16px;
        line-height: 1.6;
    }

    .page-casino__container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .page-casino__hero-section {
        padding: 40px 15px;
        padding-top: 10px !important;
    }

    .page-casino__main-title {
        font-size: 2.2rem;
    }

    .page-casino__description {
        font-size: 1rem;
    }

    .page-casino__cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .page-casino__btn-primary,
    .page-casino__btn-secondary {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-casino__section-title {
        font-size: 2rem;
    }

    .page-casino__text-block {
        font-size: 1rem;
    }

    .page-casino__game-list,
    .page-casino__feature-list,
    .page-casino__steps {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .page-casino__game-card,
    .page-casino__feature-item,
    .page-casino__step-item {
        padding: 20px;
    }

    .page-casino__card-image {
        height: 180px;
    }

    .page-casino__card-title {
        font-size: 1.4rem;
    }

    .page-casino__feature-title {
        font-size: 1.3rem;
    }

    .page-casino__step-title {
        font-size: 1.5rem;
    }

    .page-casino__faq-item summary {
        font-size: 1.1rem;
        padding: 15px 20px;
    }

    .page-casino__faq-answer {
        padding: 15px 20px;
    }

    .page-casino img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .page-casino__hero-image-wrapper,
    .page-casino__image-content,
    .page-casino__game-card,
    .page-casino__feature-item,
    .page-casino__step-item,
    .page-casino__faq-item {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .page-casino__hero-image {
        border-radius: 8px;
    }

    .page-casino__tips-list li {
        font-size: 1rem;
        padding: 15px 20px;
    }
}

/* Ensure content area images meet min size requirements */
.page-casino__content-area img,
.page-casino__game-card img,
.page-casino__feature-item img {
    min-width: 200px;
    min-height: 200px;
}

.page-casino__feature-icon {
    min-width: 100px; /* Specific for icons, but still > 200px as per global rule */
    min-height: 100px;
}

/* Adjust min-width/height for feature icons to meet global 200x200px minimum if they are the ONLY image in their context, or if they are meant to be content images */
/* Given the prompt specifies 'no small icons' and 'min 200x200px', these feature icons should technically be larger or replaced by content images. 
   For now, I'll ensure their container gives them space, and assume they are 'content images' that happen to be square. */
.page-casino__feature-icon {
    width: 200px; /* Enforcing min 200px for features */
    height: 200px;
    object-fit: cover; /* To ensure they fill the 200x200 space */
}

/* Desktop video width for __video-container if present (not explicitly used here, but for completeness) */
.page-casino__video-container {
    width: 100%; /* Important for desktop flex alignment */
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}