/* General styles for the page-6vin-bet context */
.page-6vin-bet {
    font-family: 'Arial', sans-serif;
    color: #f0f0f0; /* Light text for dark background */
    background-color: #1a1a2e; /* Dark blue background */
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Section base styles */
.page-6vin-bet__hero-section,
.page-6vin-bet__features-section,
.page-6vin-bet__products-section,
.page-6vin-bet__promotions-section,
.page-6vin-bet__about-section,
.page-6vin-bet__payment-providers-section,
.page-6vin-bet__faq-section {
    padding: 40px 20px;
    margin-bottom: 20px;
    text-align: center;
}

/* Specific padding for the first section (hero) to account for header offset, if body padding is not used.
   Assuming body padding is handled by shared.css, this is just for decorative top spacing. */
.page-6vin-bet__hero-section {
    padding-top: calc(10px + var(--header-offset, 0px)); /* Add 10px decorative padding. If header-offset is not applied to body, this will apply it. */
    background-color: #0d0d1a; /* Slightly darker for hero */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-6vin-bet__hero-content {
    max-width: 900px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}

.page-6vin-bet__main-title {
    font-size: 2.8em;
    color: #f7b32b; /* Gold accent */
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    word-wrap: break-word; /* Ensure long titles wrap */
    overflow-wrap: break-word;
}

.page-6vin-bet__hero-description {
    font-size: 1.2em;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.page-6vin-bet__hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.page-6vin-bet__button {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box; /* Important for button sizing */
}

.page-6vin-bet__button--primary {
    background-color: #007bff; /* Blue */
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.page-6vin-bet__button--primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.page-6vin-bet__button--secondary {
    background-color: #f7b32b; /* Gold */
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.page-6vin-bet__button--secondary:hover {
    background-color: #e0a120;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.page-6vin-bet__hero-image {
    max-width: 100%;
    height: auto;
    margin-top: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: block; /* Ensure it takes full width of its container */
    margin-left: auto;
    margin-right: auto;
}

.page-6vin-bet__section-title {
    font-size: 2.2em;
    color: #f7b32b;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-6vin-bet__section-subtitle {
    font-size: 1.1em;
    color: #cccccc;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Features Section */
.page-6vin-bet__features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-6vin-bet__feature-item {
    background-color: #2a2a4a; /* Slightly lighter dark blue */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-6vin-bet__feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-6vin-bet__feature-icon {
    width: 200px; /* Minimum 200x200 as per instructions */
    height: auto;
    margin-bottom: 20px;
    max-width: 100%; /* Responsive image */
    box-sizing: border-box;
}

.page-6vin-bet__feature-title {
    font-size: 1.5em;
    color: #f7b32b;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-6vin-bet__feature-description {
    font-size: 1em;
    color: #cccccc;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Products Section */
.page-6vin-bet__products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-6vin-bet__product-card {
    background-color: #2a2a4a;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-6vin-bet__product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-6vin-bet__product-image {
    width: 100%; /* Fill card width */
    max-width: 800px; /* Max width for product images as per placeholder */
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.page-6vin-bet__product-title {
    font-size: 1.4em;
    color: #f7b32b;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-6vin-bet__product-description {
    font-size: 0.95em;
    color: #cccccc;
    flex-grow: 1; /* Push button to bottom */
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-6vin-bet__button--product {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 0.9em;
    border-radius: 20px;
}

.page-6vin-bet__button--product:hover {
    background-color: #0056b3;
}

/* Promotions Section */
.page-6vin-bet__promotions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-6vin-bet__promotion-card {
    background-color: #2a2a4a;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-6vin-bet__promotion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-6vin-bet__promotion-image {
    width: 100%;
    max-width: 800px; /* Max width for promotion images */
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.page-6vin-bet__promotion-title {
    font-size: 1.4em;
    color: #f7b32b;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-6vin-bet__promotion-description {
    font-size: 0.95em;
    color: #cccccc;
    flex-grow: 1;
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-6vin-bet__button--promotion {
    background-color: #f7b32b;
    color: #1a1a2e;
    padding: 10px 20px;
    font-size: 0.9em;
    border-radius: 20px;
}

.page-6vin-bet__button--promotion:hover {
    background-color: #e0a120;
}

/* About Section */
.page-6vin-bet__about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left; /* Align text left within its container */
}

.page-6vin-bet__about-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.page-6vin-bet__about-text {
    flex: 1;
    min-width: 300px;
    color: #cccccc;
}

.page-6vin-bet__about-text p {
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Payment & Providers Section */
.page-6vin-bet__payment-providers-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.page-6vin-bet__payment-methods,
.page-6vin-bet__game-providers {
    flex: 1;
    min-width: 300px;
    max-width: 550px;
    background-color: #2a2a4a;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.page-6vin-bet__logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.page-6vin-bet__logo-item {
    max-width: 150px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    min-width: 100px; /* Ensure logos are not too small */
    min-height: 50px; /* Ensure logos are not too small */
}

.page-6vin-bet__logo-item:hover {
    opacity: 1;
}

/* Floating Buttons */
.page-6vin-bet__floating-buttons {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 1000;
}

/* FAQ Section */
.page-6vin-bet__faq-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.page-6vin-bet__faq-item {
    background-color: #2a2a4a;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Important for max-height transition */
}

.page-6vin-bet__faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #3a3a5a; /* Slightly different background for question */
    color: #f7b32b;
    font-weight: bold;
    transition: background-color 0.3s ease;
    user-select: none;
}

.page-6vin-bet__faq-question:hover {
    background-color: #4a4a6a;
}

.page-6vin-bet__faq-q-text {
    font-size: 1.1em;
    margin: 0;
    pointer-events: none; /* Prevent h3 from blocking click event on parent div */
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-grow: 1;
    padding-right: 10px; /* Space between text and toggle */
}

.page-6vin-bet__faq-toggle {
    font-size: 1.5em;
    line-height: 1;
    pointer-events: none; /* Prevent span from blocking click event on parent div */
    transition: transform 0.3s ease;
}

.page-6vin-bet__faq-item.active .page-6vin-bet__faq-toggle {
    transform: rotate(45deg); /* Change + to X or similar */
}

.page-6vin-bet__faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px; /* Initial padding is 0 */
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.4s ease;
    color: #cccccc;
}

.page-6vin-bet__faq-item.active .page-6vin-bet__faq-answer {
    max-height: 2000px !important; /* Sufficiently large */
    padding: 20px 20px !important; /* Final padding */
    opacity: 1;
}

.page-6vin-bet__faq-answer p {
    margin: 0;
    padding-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .page-6vin-bet__main-title {
        font-size: 2.5em;
    }
    .page-6vin-bet__section-title {
        font-size: 2em;
    }
    .page-6vin-bet__about-content {
        flex-direction: column;
        text-align: center;
    }
    .page-6vin-bet__about-image {
        margin-bottom: 30px;
    }
    .page-6vin-bet__about-text {
        min-width: unset;
        width: 100%;
    }
    .page-6vin-bet__payment-providers-section {
        flex-direction: column;
        align-items: center;
    }
    .page-6vin-bet__payment-methods,
    .page-6vin-bet__game-providers {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .page-6vin-bet__hero-section,
    .page-6vin-bet__features-section,
    .page-6vin-bet__products-section,
    .page-6vin-bet__promotions-section,
    .page-6vin-bet__about-section,
    .page-6vin-bet__payment-providers-section,
    .page-6vin-bet__faq-section {
        padding: 30px 15px;
    }

    .page-6vin-bet__main-title {
        font-size: 2em;
    }
    .page-6vin-bet__hero-description {
        font-size: 1.1em;
    }
    .page-6vin-bet__hero-cta {
        flex-direction: column;
        gap: 10px;
    }
    .page-6vin-bet__button {
        width: 100%;
        max-width: 300px; /* Limit button width on small screens */
        margin: 0 auto;
        padding: 12px 20px;
        font-size: 1em;
    }

    .page-6vin-bet__section-title {
        font-size: 1.8em;
    }
    .page-6vin-bet__section-subtitle {
        font-size: 1em;
    }

    /* List items for features, products, promotions */
    .page-6vin-bet__features-grid,
    .page-6vin-bet__products-grid,
    .page-6vin-bet__promotions-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    .page-6vin-bet__feature-item,
    .page-6vin-bet__product-card,
    .page-6vin-bet__promotion-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px !important; /* Adjust padding */
    }

    .page-6vin-bet__feature-description,
    .page-6vin-bet__product-description,
    .page-6vin-bet__promotion-description,
    .page-6vin-bet__about-text p,
    .page-6vin-bet__faq-answer p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .page-6vin-bet__feature-icon,
    .page-6vin-bet__product-image,
    .page-6vin-bet__promotion-image,
    .page-6vin-bet__about-image,
    .page-6vin-bet__logo-item {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .page-6vin-bet__logo-item {
        min-width: 80px;
        max-width: 120px;
    }

    .page-6vin-bet__floating-buttons {
        gap: 10px;
        bottom: 15px;
        width: calc(100% - 30px); /* Adjust width to account for padding */
    }
    .page-6vin-bet__floating-button {
        flex: 1; /* Distribute space evenly */
        padding: 10px 15px;
        font-size: 1em;
    }

    .page-6vin-bet__faq-question {
        padding: 15px;
    }
    .page-6vin-bet__faq-q-text {
        font-size: 1em;
    }
    .page-6vin-bet__faq-answer {
        padding: 0 15px; /* Adjust padding for mobile */
    }
    .page-6vin-bet__faq-item.active .page-6vin-bet__faq-answer {
        padding: 15px 15px !important;
    }
}

@media (max-width: 480px) {
    .page-6vin-bet__main-title {
        font-size: 1.8em;
    }
    .page-6vin-bet__section-title {
        font-size: 1.6em;
    }
    .page-6vin-bet__hero-description {
        font-size: 1em;
    }
    .page-6vin-bet__floating-buttons {
        flex-direction: column; /* Stack buttons vertically on very small screens */
        width: calc(100% - 30px);
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }
    .page-6vin-bet__floating-button {
        width: 100%;
        max-width: none;
    }
}