/* --- Global Variables and Reset --- */
:root {
    /* Dark Theme Colors */
    --bg-color: #1f1f1f;
    --header-bg: #2a2a2a;
    --footer-bg: #2a2a2a;
    --text-color: #e0e0e0;
    --text-container-bg: #2f2f2f;
    --footer-text-color: #b0b0b0;
    --border-color: #444444;
    --banner-bg: #333333;
    --banner-border: #555555;
    --bonus-card-bg: #2f2f2f; /* Match text container */

    /* Accent Colors */
    --accent-color: #FFA500;
    --accent-hover: #FF8C00;
    --button-text-color: #ffffff;

    /* Layout Variables */
    --container-width: 1200px; /* Max width for header, footer, slider, games */
    --text-content-width: var(--container-width); /* Max width for text, banner, bonus list, image */
    --border-radius: 5px;
    --mobile-button-bar-height: 65px;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

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

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
    margin-bottom: 0.8em;
    line-height: 1.3;
    color: #ffffff;
}

.section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #ffffff;
}

/* --- Buttons --- */
.btn {
    display: inline-block; /* Changed to inline-block for flexibility */
    width: 100%; /* Make button fill its container (like an <a> tag) */
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--button-text-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-login {
    background-color: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    box-shadow: none;
}
.btn-login:hover {
    background-color: var(--accent-color);
    color: var(--button-text-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* --- Header --- */
.site-header {
    background-color: var(--header-bg);
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-container img { max-height: 50px; }
.main-nav { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.lang-switcher select {
    padding: 8px; border: 1px solid var(--border-color); border-radius: var(--border-radius);
    background-color: var(--header-bg); color: var(--text-color); cursor: pointer;
}
.lang-switcher option { background-color: var(--header-bg); color: var(--text-color); }
.nav-link-text {
    color: var(--text-color); text-decoration: none; padding: 10px 5px;
    font-size: 1em; font-weight: 500; transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: var(--border-radius);
}
.nav-link-text:hover { color: var(--accent-color); background-color: rgba(255, 255, 255, 0.05); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; }
.nav-toggle span { display: block; width: 25px; height: 3px; background-color: var(--text-color); margin: 5px 0; transition: all 0.3s ease-in-out; }

/* --- Slider --- */
.slider-section-wrapper { max-width: var(--container-width); margin: 30px auto; padding: 0 20px; }
.slider-container { position: relative; overflow: hidden; background-color: #444; border-radius: var(--border-radius); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.slider { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; position: relative; display: none; }
.slide.active { display: block; }
.slide img { width: 100%; display: block; max-height: 450px; object-fit: cover; border-radius: var(--border-radius); }
.slide-content {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 600px; color: #ffffff; background-color: rgba(0, 0, 0, 0.7);
    padding: 20px 25px; border-radius: var(--border-radius); text-align: center; animation: fadeIn 0.8s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}
.slide-content h2 { margin-bottom: 10px; font-size: 1.8em; color: #ffffff; }
.slide-content p { margin-bottom: 15px; color: #f0f0f0; }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5);
    color: white; border: none; font-size: 2em; padding: 10px 15px; cursor: pointer; z-index: 10; border-radius: 50%; transition: background-color 0.3s ease;
}
.slider-arrow:hover { background-color: rgba(0, 0, 0, 0.8); }
.slider-arrow.prev { left: 15px; }
.slider-arrow.next { right: 15px; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.slider-dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; }
.slider-dot.active { background-color: var(--accent-color); }

/* --- Games Block --- */
.games-block { max-width: var(--container-width); margin: 40px auto; padding: 0 20px; }
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.game-item { position: relative; overflow: hidden; border-radius: var(--border-radius); background-color: var(--header-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; }
.game-item:hover { transform: scale(1.03); }
.game-item img { display: block; width: 100%; border-bottom: 1px solid var(--border-color); }
.game-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s ease; }
.game-item:hover .game-overlay { opacity: 1; }
.btn-play { margin-bottom: 10px; }
.btn-demo { color: #fff; font-size: 0.9em; text-decoration: underline; padding: 5px; }
.btn-demo:hover { color: var(--accent-hover); }

/* --- Text Container --- */
.text-container {
    max-width: var(--text-content-width);
    margin: 40px auto; padding: 30px; background-color: var(--text-container-bg);
    border-radius: var(--border-radius); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.text-container h1, .text-container h2 { color: #ffffff; margin-top: 0; }
.text-container p { color: var(--text-color); }
.text-container ul, .text-container ol { margin-left: 25px; margin-bottom: 1em; color: var(--text-color); padding-left: 0; }
.text-container ul { list-style-type: disc; }
.text-container ol { list-style-type: decimal; }
.text-container li { margin-bottom: 0.5em; line-height: 1.6; }
.text-container ul ul, .text-container ol ol, .text-container ul ol, .text-container ol ul { margin-left: 20px; margin-top: 0.5em; margin-bottom: 0.5em; }
.text-container ul ul { list-style-type: circle; }
.text-container ul ul ul { list-style-type: square; }
.text-container ol ol { list-style-type: lower-alpha; }
.text-container ol ol ol { list-style-type: lower-roman; }

/* --- Image Content Section --- */
.image-content-container {
    max-width: var(--text-content-width);
    margin: 40px auto; padding: 0; background-color: var(--text-container-bg);
    border-radius: var(--border-radius); box-shadow: 0 1px 4px rgba(0,0,0,0.2); overflow: hidden;
}
.image-content-container img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--border-radius); }

/* --- Promotional Banner Styles --- */
.promo-banner-container {
    max-width: var(--text-content-width);
    margin: 30px auto; padding: 0;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.promo-banner-container:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
.promo-banner {
    background-color: var(--banner-bg);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px;
    border-radius: var(--border-radius); border: 1px solid var(--banner-border);
    padding: 25px 35px; display: flex; align-items: center; gap: 25px; flex-wrap: wrap;
    overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.promo-banner .banner-icon { display: inline-block; margin-right: 10px; flex-shrink: 0; width: 32px; height: 32px; vertical-align: middle; transition: transform 0.2s ease-in-out; }
.promo-banner:hover .banner-icon { transform: scale(1.1); }
.promo-banner .banner-icon svg { width: 100%; height: 100%; fill: var(--accent-color); }
.promo-banner .banner-content { flex-grow: 1; color: var(--text-color); display: flex; align-items: center; gap: 15px; }
.promo-banner .banner-text-wrapper { flex-grow: 1; }
.promo-banner .banner-content .title { font-size: 0.95em; margin-bottom: 3px; color: var(--footer-text-color); font-weight: normal; }
.promo-banner .banner-content .details { font-size: 1.5em; font-weight: bold; color: #ffffff; margin: 0; }
.promo-banner .banner-action { flex-shrink: 0; margin-left: auto; }
.promo-banner .banner-action .btn {
    padding: 12px 25px; font-size: 1.05em;
    background-image: linear-gradient(to bottom, var(--accent-color), var(--accent-hover));
    border: 1px solid rgba(0,0,0,0.2); text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.promo-banner .banner-action .btn:hover { background-image: linear-gradient(to bottom, #ffb01a, var(--accent-hover)); }
/* Banner Options */
.banner-option-1 .banner-text-wrapper, .banner-option-3 .banner-text-wrapper { text-align: center; }
.banner-option-2 .banner-text-wrapper { text-align: left; }
.banner-option-3 { background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 100%); border: none; background-image: none; }

/* --- Bonus List Section Styles --- */
.bonus-list-section {
    max-width: var(--text-content-width);
    margin: 40px auto; padding: 0 15px;
}
.bonus-list-section .section-intro { text-align: center; margin-bottom: 30px; padding: 0 10%; }
.bonus-list-section .section-intro h2 { font-size: 2em; margin-bottom: 10px; color: #ffffff; }
.bonus-list-section .section-intro p { font-size: 1em; color: var(--text-color); line-height: 1.6; }
.bonus-card {
    background-color: var(--bonus-card-bg); border-radius: var(--border-radius); margin-bottom: 25px;
    padding: 25px; display: flex; gap: 25px; align-items: center;
    border: 1px solid var(--border-color); box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden;
}
.bonus-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
.bonus-card::before {
    content: attr(data-rank); position: absolute; top: -1px; left: -1px; background-color: var(--accent-color);
    color: var(--button-text-color); padding: 8px 12px; font-weight: bold; font-size: 0.9em;
    border-bottom-right-radius: var(--border-radius); border-top-left-radius: var(--border-radius); z-index: 2; line-height: 1;
}
.bonus-card-image { flex: 0 0 150px; align-self: center; }
.bonus-card-image img { width: 100%; height: auto; object-fit: contain; border-radius: var(--border-radius); }
.bonus-card-main-details { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.bonus-card-main-details .bonus-title { font-size: 1.3em; font-weight: bold; color: #ffffff; margin-bottom: 0; }
.bonus-card-main-details ul { list-style: none; padding: 0; margin: 0; color: var(--text-color); font-size: 0.95em; }
.bonus-card-main-details ul li { margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.bonus-card-main-details ul li i { color: var(--accent-color); font-size: 0.8em; width: 12px; text-align: center; flex-shrink: 0; }
.bonus-card-rating {
    flex: 0 0 100px; font-size: 1.5em; font-weight: bold; color: var(--accent-color);
    display: flex; align-items: center; justify-content: center; gap: 5px;
    text-align: center; border-left: 1px solid var(--border-color); padding-left: 25px; align-self: stretch;
}
.bonus-card-rating i.fa-star { font-size: 0.8em; }
.bonus-card-action { flex-shrink: 0; margin-left: auto; align-self: center; }
.bonus-card-action .btn { padding: 12px 25px; font-size: 1em; }
.load-more-bonuses { text-align: center; margin-top: 30px; }
.load-more-bonuses .btn { background-color: var(--header-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 12px 30px; }
.load-more-bonuses .btn:hover { background-color: var(--border-color); color: #ffffff; }

/* --- Payment Table Styles --- */
.payment-table-container { max-width: var(--text-content-width); margin: 40px auto; padding: 0 20px; overflow-x: auto; }
.payment-table { width: 100%; border-collapse: collapse; background-color: var(--text-container-bg); color: var(--text-color); font-size: 0.95em; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.payment-table caption { font-size: 1.3em; font-weight: bold; padding: 15px; caption-side: top; text-align: left; color: #ffffff; }
.payment-table thead { background-color: var(--header-bg); }
.payment-table th, .payment-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
.payment-table th { font-weight: bold; color: #ffffff; white-space: nowrap; }
.payment-table tbody tr { transition: background-color 0.2s ease; }
.payment-table tbody tr:hover { background-color: var(--header-bg); }
.payment-table tbody tr:last-child td { border-bottom: none; }
.payment-table td:nth-child(2), .payment-table td:nth-child(3) { text-align: center; font-weight: bold; }

/* --- Pop-Up Banner Styles --- */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);
    z-index: 1999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.popup-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; }
.popup-banner {
    background-color: var(--header-bg); padding: 30px; border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); max-width: 550px; width: 90%;
    position: relative; text-align: center; transform: scale(0.9); transition: transform 0.4s ease;
}
.popup-overlay.active .popup-banner { transform: scale(1); }
.popup-banner .popup-close-btn {
    position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--text-color);
    font-size: 1.8em; line-height: 1; cursor: pointer; padding: 5px; transition: color 0.2s ease, transform 0.2s ease;
}
.popup-banner .popup-close-btn:hover { color: var(--accent-color); transform: rotate(90deg); }
.popup-banner .popup-image img { max-width: 150px; height: auto; margin: 0 auto 20px auto; border-radius: 50%; border: 3px solid var(--accent-color); }
.popup-banner .popup-title { font-size: 1.6em; font-weight: bold; color: #ffffff; margin-bottom: 10px; }
.popup-banner .popup-text { color: var(--text-color); margin-bottom: 25px; line-height: 1.6; font-size: 1em; }
.popup-banner .popup-action .btn {
    padding: 12px 30px; font-size: 1.1em;
    background-image: linear-gradient(to bottom, var(--accent-color), var(--accent-hover));
    border: 1px solid rgba(0,0,0,0.2); text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.popup-banner .popup-action .btn:hover { background-image: linear-gradient(to bottom, #ffb01a, var(--accent-hover)); }

/* --- Footer --- */
.site-footer {
    background-color: var(--footer-bg); color: var(--footer-text-color); padding: 40px 20px 20px 20px;
    margin-top: 50px; border-top: 1px solid var(--border-color);
}
.footer-content {
    max-width: var(--container-width); margin: 0 auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; align-items: start;
}
.footer-section h4 { color: #ffffff; margin-bottom: 15px; border-bottom: 1px solid var(--accent-color); padding-bottom: 5px; display: inline-block; }
.footer-section ul { list-style: none; padding: 0; }
.footer-section li { margin-bottom: 8px; }
.footer-section a { color: var(--footer-text-color); }
.footer-section a:hover { color: #ffffff; text-decoration: underline; }
.developer-logos .logo-list { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.developer-logos img { max-height: 30px; opacity: 0.8; transition: opacity 0.3s ease; filter: brightness(0) invert(0.8); }
.developer-logos img:hover { opacity: 1; filter: brightness(0) invert(1); }
.payment-logos .logo-list { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.payment-logos img { max-height: 30px; opacity: 0.8; transition: opacity 0.3s ease; filter: brightness(0) invert(0.8); }
.payment-logos img:hover { opacity: 1; filter: brightness(0) invert(1); }
.footer-info { grid-column: 1 / -1; text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color); font-size: 0.9em; }

/* --- Mobile Fixed Action Buttons --- */
.mobile-action-buttons {
    display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--header-bg);
    padding: 10px 15px; box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.3); z-index: 999;
    justify-content: space-around; align-items: stretch; /* Changed align-items */
    gap: 10px;
}
/* == MODIFICATION START: Mobile Action Buttons Fix == */
/* Target the anchor tags directly */
.mobile-action-buttons a {
    display: flex; /* Use flex to make anchor fill space */
    flex-grow: 1;
    max-width: 48%; /* Control max width */
    text-decoration: none; /* Remove underline */
    justify-content: center; /* Center button inside if needed */
    align-items: center; /* Center button vertically if needed */
}
/* Target the button *inside* the anchor */
.mobile-action-buttons a .btn {
    width: 100%; /* Make button fill the anchor tag */
    flex-grow: 1; /* Ensure it takes available space */
    /* Padding and other styles are inherited from .btn */
}
/* == MODIFICATION END == */


/* --- Responsiveness --- */

/* Apply side padding to containers on desktop */
.text-container,
.image-content-container,
.promo-banner-container,
.bonus-list-section {
    padding-left: 20px;
    padding-right: 20px;
}
.promo-banner-container {
    padding-left: 0;
    padding-right: 0;
}


@media (max-width: 768px) {

    body { padding-bottom: var(--mobile-button-bar-height); }
    .mobile-action-buttons { display: flex; } /* Show the bar */
    .main-nav .nav-links .desktop-only-btn { display: none; }

    /* Mobile Header */
     .header-container { padding: 0 15px; }
    .nav-links {
        display: none; position: absolute; top: 100%; left: 0; width: 100%;
        background-color: var(--header-bg); flex-direction: column; align-items: stretch;
        padding: 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2); gap: 0;
    }
    .nav-links.active { display: flex; }
    .nav-links > * {
        margin: 0; text-align: left; padding: 12px 20px; display: block; width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-links .lang-switcher { padding-top: 5px; padding-bottom: 5px; }
    .nav-links .lang-switcher select { width: 100%; padding: 8px 12px; }
    .nav-links .nav-link-text { color: var(--text-color); font-weight: normal; background-color: transparent; }
    .nav-links .nav-link-text:hover { background-color: transparent; color: var(--accent-color); }
    .nav-links > *:last-child { border-bottom: none; }
    .nav-toggle { display: block; }

    /* Mobile Slider */
    .slider-section-wrapper { padding: 0; margin-top: 20px; margin-bottom: 20px; }
    .slider-container { border-radius: 0; box-shadow: none; }
    .slide-content {
        left: 50%; transform: translateX(-50%); width: 85%; max-width: 450px;
        bottom: 15px; padding: 15px; text-align: center; position: absolute;
        color: #ffffff; background-color: rgba(0, 0, 0, 0.7); border-radius: var(--border-radius);
        animation: none;
    }
     .slide-content h2 { font-size: 1.4em; margin-bottom: 8px; color: #ffffff; }
     .slide-content p { margin-bottom: 12px; font-size: 0.9em; color: #f0f0f0; }
     .btn-slide { padding: 8px 18px; }

    /* Mobile Game Grid */
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .games-block { padding: 0 15px; }

    /* Mobile Text, Image, Banner, Bonus Containers */
     .text-container,
     .image-content-container,
     .promo-banner-container,
     .bonus-list-section {
        margin-left: 15px; margin-right: 15px; padding-left: 15px; padding-right: 15px;
        max-width: none; width: auto;
     }
     .text-container { margin-top: 20px; margin-bottom: 20px; padding-top: 20px; padding-bottom: 20px; }
     .image-content-container { margin-top: 25px; margin-bottom: 25px; }
     .promo-banner-container { margin-top: 20px; margin-bottom: 20px; padding-left: 0; padding-right: 0; }
     .bonus-list-section { margin-top: 20px; margin-bottom: 20px; }


    /* Mobile Promo Banner Specifics */
    .promo-banner { flex-direction: column; text-align: center; padding: 25px 20px; gap: 18px; border: none; background-image: none; background-color: var(--banner-bg); }
    .promo-banner .banner-content { order: 2; flex-direction: column; gap: 10px; width: 100%; }
    .promo-banner .banner-icon { margin-right: 0; margin-bottom: 8px; width: 30px; height: 30px; }
    .promo-banner .banner-action { order: 3; margin-top: 10px; margin-left: 0; width: 100%; }
    .promo-banner .banner-content .details { font-size: 1.3em; }
    .promo-banner .banner-action .btn { width: 100%; max-width: 300px; padding: 14px 20px; }

    /* Mobile Bonus List Specifics */
    .bonus-list-section .section-intro { padding: 0 5%; }
    .bonus-card { flex-direction: column; align-items: center; text-align: center; padding: 20px 15px; }
    .bonus-card::before { padding: 6px 10px; font-size: 0.8em; }
    .bonus-card-image { width: 150px; max-width: 50%; margin-bottom: 15px; flex-basis: auto; }
    .bonus-card-image img { max-height: none; object-fit: cover; }
    .bonus-card-main-details { align-items: center; width: 100%; order: 2; }
    .bonus-card-main-details ul { text-align: left; margin-left: auto; margin-right: auto; max-width: 300px; }
    .bonus-card-main-details ul li { justify-content: flex-start; }
    .bonus-card-rating { justify-content: center; order: 1; border-left: none; padding-left: 0; margin-bottom: 10px; flex-basis: auto; align-self: center; font-size: 1.3em; }
    .bonus-card-action { text-align: center; width: 100%; margin-top: 15px; order: 3; margin-left: 0; flex-basis: auto; align-self: center; }
    .bonus-card-action .btn { width: 100%; max-width: 280px; }

    /* Mobile Payment Table */
    .payment-table-container { padding: 0 10px; margin: 25px auto; }
    .payment-table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    .payment-table tr { display: block; margin-bottom: 15px; border-radius: var(--border-radius); border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .payment-table tbody tr:hover { background-color: inherit; }
    .payment-table td { display: block; text-align: right; padding-left: 50%; position: relative; border-bottom: 1px dotted var(--border-color); }
    .payment-table td:last-child { border-bottom: none; }
    .payment-table td::before { content: attr(data-label); position: absolute; left: 10px; width: calc(50% - 20px); padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; color: var(--footer-text-color); }
    .payment-table td:nth-child(2), .payment-table td:nth-child(3) { text-align: right; }
    .payment-table td:nth-child(2)::before, .payment-table td:nth-child(3)::before { text-align: left; }

    /* Mobile Pop-Up */
    .popup-banner { padding: 25px 20px; max-width: 95%; width: 95%; }
    .popup-banner .popup-image img { max-width: 120px; margin-bottom: 15px; }
    .popup-banner .popup-title { font-size: 1.4em; }
    .popup-banner .popup-text { font-size: 0.95em; margin-bottom: 20px; }
    .popup-banner .popup-action .btn { padding: 10px 25px; font-size: 1em; }
    .popup-banner .popup-close-btn { font-size: 1.6em; top: 8px; right: 8px; }


    /* Mobile Footer */
    .footer-content { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
    .site-footer { padding: 30px 15px 15px 15px; }
}

@media (max-width: 576px) {

    /* Keep 2 Columns for Games */
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .games-block { padding: 0 10px; }

    .logo-container img { max-height: 40px; }

    /* Adjust Slider Content */
    .slide-content { width: 90%; max-width: 90%; bottom: 10px; padding: 10px 12px; }
    .slide-content h2 { font-size: 1.25em; margin-bottom: 5px; }
    .slide-content p { font-size: 0.85em; margin-bottom: 10px; }

    /* Adjust Slider Controls */
     .slider-arrow { font-size: 1.4em; padding: 6px 10px; }
     .slider-dots { bottom: 8px; }
     .slider-dot { width: 9px; height: 9px; }

    .section-title { font-size: 1.6em; margin-bottom: 20px; }

    /* Small Mobile Text/Image/Banner/Bonus Containers */
    .text-container,
    .image-content-container,
    .promo-banner-container,
    .bonus-list-section {
        margin-left: 10px;
        margin-right: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .text-container { margin-top: 20px; margin-bottom: 20px; padding-top: 25px; padding-bottom: 15px; }
    .image-content-container { margin-top: 20px; margin-bottom: 20px; }
    .promo-banner-container { margin-top: 20px; margin-bottom: 20px; padding-left: 0; padding-right: 0; }
    .bonus-list-section { margin-top: 20px; margin-bottom: 20px; }

    /* Small Mobile Promo Banner */
    .promo-banner { padding: 20px 15px; }
    .promo-banner .banner-content .details { font-size: 1.2em; }

    /* Small Mobile Bonus List */
    .bonus-card { padding: 15px; }
    .bonus-card-image { width: 120px; }
    .bonus-card-main-details .bonus-title { font-size: 1.1em; }
    .bonus-card-main-details ul { font-size: 0.9em; }


    /* Stack Footer Sections */
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-section h4 { display: block; text-align: center; margin-bottom: 10px; }
    .footer-section ul { text-align: center; margin-bottom: 15px; }
    .developer-logos .logo-list { justify-content: center; }
    .footer-info { margin-top: 20px; padding-top: 15px; }

    /* Adjust Mobile Button Bar */
    .mobile-action-buttons { padding: 8px 10px; }
    /* Adjust anchor tag styling within the bar */
    .mobile-action-buttons a { max-width: 48%; } /* Adjust max-width */
}