* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #0f1923;
    color: #ffffff;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header */
header {
    background-color: #1a2633;
    padding: 15px 0;
    position: relative;
    width: 100%;
    top: 0;
    z-index: 100;
}

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

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 40px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin-left: 20px;
}

.nav-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #3498db;
}

.auth-buttons {
    display: flex;
}

.btn {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-login {
    background-color: transparent;
    border: 1px solid #3498db;
    color: #3498db;
    margin-right: 10px;
}

.btn-register {
    background-color: #3498db;
    color: #ffffff;
}

/* Hero Section */
.hero {
    padding-top: 100px;
    padding-bottom: 50px;
    background: linear-gradient(rgba(15, 25, 35, 0.8), rgba(15, 25, 35, 0.8)), url("/api/placeholder/1200/600") center/cover no-repeat;
    text-align: center;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary {
    background-color: #3498db;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #2980b9;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
}

/* Features Section */
.features {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background-color: #1a2633;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.feature-card p {
    color: #cccccc;
}

/* Sports Section */
.sports {
    padding: 60px 0;
    background-color: #141f2d;
}

.sports-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.sport-card {
    background-color: #1a2633;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s;
}

.sport-card:hover {
    transform: translateY(-10px);
}

.sport-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #FFF;
}

.sport-icon a {
    color: #FFF;
    text-decoration: unset;
}

.sport-card h3 {
    font-size: 18px;
}

/* Promotions Section */
.promotions {
    padding: 60px 0;
}

.promotions-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.promotion-card {
    background-color: #1a2633;
    border-radius: 10px;
    overflow: hidden;
}

.promotion-img {
    height: 200px;
    background: url("/api/placeholder/400/200") center/cover no-repeat;
}

.promotion-content {
    padding: 20px;
}

.promotion-content h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.promotion-content p {
    color: #cccccc;
    margin-bottom: 20px;
}

/* Results Table */
.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

.results-table th, .results-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #2c3e50;
}

.results-table th {
    background-color: #1a2633;
    color: #3498db;
}

.results-table tr:hover {
    background-color: #1a2633;
}

/* Promo Block & Text Block */
.promo-block, .text-block {
    padding: 60px 0;
}

@media (max-width: 768px) {
    .promo-block, .text-block {
        padding: 20px 0;
    }
}

.promo-block {
    background-color: #141f2d;
}

.promo-block h2, .text-block h2 {
    font-size: 36px;
    margin-bottom: 30px;
}

.promo-block p, .text-block p, .text-block .block-list, .wp-block-list{
    margin-bottom: 20px;
    line-height: 1.6;
}

.text-block > .container > :not(:first-child) {
    margin-top: 20px;
}

/* Footer */
footer {
    background-color: #1a2633;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #3498db;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #3498db;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #2c3e50;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .features-grid, .sports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sports-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-menu, .auth-buttons {
        display: none;
    }

    .nav-menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        padding: 10px 0;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: #1a2633;
    }

    .nav-menu a {
        display: flex;
        padding: 10px 0;
    }
    
    .promotions-slider {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .hero h1 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .features-grid, .sports-grid {
        grid-template-columns: 1fr;
    }
    
    .hero {
        height: 500px;
    }
    
    .hero h1 {
        font-size: 28px;
    }
    
    .section-title {
        font-size: 28px;
    }
}


/* Slots Section Styles */
.slots-section {
    padding: 60px 0;
    background-color: #0f1923;
    text-align: center;
}

.slots-section h2 {
    font-size: 42px;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.slot-card {
    background-color: #141f2d;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s;
    position: relative;
}

.slot-card:hover {
    transform: translateY(-10px);
}

.slot-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.slot-title {
    color: #fff;
    font-size: 18px;
    padding: 15px 10px;
    margin: 0;
    text-align: center;
}

.slot-play-btn {
    background-color: #7758e9;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 0;
    width: 80%;
    margin: 0 auto 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    transition: background-color 0.3s;
}

.slot-play-btn:hover {
    background-color: #6143d1;
}

.show-more-btn {
    background-color: #172a49;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 20px auto;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s;
}

.show-more-btn:hover {
    background-color: #1c3359;
}

.show-more-btn:after {
    content: "▼";
    margin-left: 10px;
    font-size: 12px;
}

.latest-bets-section {
    padding: 60px 0;
    background-color: #0f1923;
    text-align: center;
}

.latest-bets-section h2 {
    font-size: 42px;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}

.bets-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.bet-card {
    background-color: #141f2d;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #2a3b4d;
    transition: all 0.3s;
    position: relative;
}

.bet-card:hover {
    border-color: #3498db;
    transform: translateY(-5px);
}

.bet-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.bet-user {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #8a9bae;
    font-size: 14px;
}

.bet-user-icon {
    margin-right: 5px;
    color: #8a9bae;
}

.bet-amount {
    background-color: #172a49;
    padding: 10px;
    color: #3fd24d;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet-amount.win {
    color: #3fd24d;
}

.bet-plus {
    margin-right: 5px;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .slot-img {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .slots-grid {
        grid-template-columns: 1fr;
    }
    
    .bets-grid {
        grid-template-columns: 1fr;
    }
    
    .slot-img {
        height: 180px;
    }
}

/* TOC */
.toc {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    background: #141f2d;
    padding: 30px;
}

.toc__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 66.667% */
    user-select: none;
    cursor: pointer;
}

.toc__title svg {
    transform: rotate(180deg);
}

.toc._active .toc__title svg {
    transform: unset;
}

.toc__list {
    display: none;
    flex-wrap: wrap;
    gap: 17px;
    list-style: none;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.40);
}

.toc .toc__list {
    display: flex;
}

.toc__link {
    display: flex;
    align-items: center;
    gap: 0 10px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 111.111% */
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    text-decoration: unset;
}

.toc__link:hover {
    color: var(--accent-color);
}

.toc__link:after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 7.50012C3.72386 7.50012 3.5 7.72398 3.5 8.00012C3.5 8.27626 3.72386 8.50012 4 8.50012V7.50012ZM11.9896 10.6968L15.6464 14.3537L16.3536 13.6466L12.6967 9.98971L11.9896 10.6968ZM6.68629 7.50012H4V8.50012H6.68629V7.50012ZM12.6967 9.98971C11.1026 8.39566 8.94063 7.50012 6.68629 7.50012V8.50012C8.67542 8.50012 10.5831 9.2903 11.9896 10.6968L12.6967 9.98971Z" fill="white"/><path d="M10.5 14.0001H16V8.38452" stroke="white" stroke-linecap="round"/></svg>');
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .toc {
        padding: 16px;
    }

    .toc__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px 0;
        padding-top: 18px;
    }

    .toc__link {
        font-size: 16px;
    }
}

/* text image */
.text-image {
    display: grid;
}

.text-image:has(> img) {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.text-image > img {
    grid-row: 2/20;
}

.text-image:has(> img) > :not(img):not(.text-image__title) {
    grid-column: 2/3;
}

.text-image__title {
    grid-row: 1/2;
    grid-column: 1/-1;
}

@media (max-width: 767px) {
    .text-image:has(> img) {
        grid-template-columns: 1fr;
    }

    .text-image:has(> img) > :not(img):not(.text-image__title) {
        grid-column: 1/2;
    }

    .text-image > img {
        grid-row: 2/3;
    }
}

/* Lists */
.wp-block-list,
.block-list,
ul:not([class]),
ol:not([class]) {
    display: flex;
    flex-direction: column;
    gap: 8px 0;
    list-style: none;
}

.wp-block-list li,
.block-list li,
ul:not([class]) li,
ol:not([class]) li {
    position: relative;
}

ul.block-list li,
ul.wp-block-list li,
ul:not([class]) li {
    padding-left: 25px;
}

ul.block-list li:before,
ul.wp-block-list li:before,
ul:not([class]) li:before {
    content: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M3.83 14.9201L2.5 16.2601C0.939109 14.6313 0.0468689 12.4756 0 10.2201H1.88C1.92981 11.9733 2.62405 13.6466 3.83 14.9201Z" fill="%232CB865"/><path d="M8.85986 17.2V19.08C6.61826 19.0232 4.4786 18.1317 2.85986 16.58L4.17986 15.25C5.44827 16.4514 7.11364 17.1453 8.85986 17.2Z" fill="%232CB865"/><path d="M15.3498 3.42004L13.9998 4.75004C12.7263 3.5441 11.053 2.84985 9.2998 2.80004V0.920044C11.5576 0.970233 13.7152 1.86181 15.3498 3.42004Z" fill="%232CB865"/><path d="M8.85982 0.920044V2.80004C7.09295 2.85851 5.41081 3.57128 4.13982 4.80004L2.81982 3.42004C4.44867 1.85915 6.60432 0.966913 8.85982 0.920044Z" fill="%232CB865"/><path d="M3.83 5.06003C2.61951 6.33862 1.92492 8.01989 1.88 9.78003H0C0.0625121 7.53965 0.953217 5.40196 2.5 3.78003L3.83 5.06003Z" fill="%232CB865"/><path d="M18.1598 9.7801H16.2798C16.2213 8.01323 15.5085 6.33109 14.2798 5.0601L15.6098 3.7301C17.1863 5.35703 18.0961 7.51555 18.1598 9.7801Z" fill="%232CB865"/><path d="M18.1601 10.2201C18.1033 12.4617 17.2118 14.6013 15.6601 16.2201L14.3301 14.9201C15.5588 13.6491 16.2716 11.9669 16.3301 10.2001L18.1601 10.2201Z" fill="%232CB865"/><path d="M15.3398 16.5801C13.7211 18.1317 11.5814 19.0233 9.33984 19.0801V17.2001C11.1067 17.1416 12.7889 16.4288 14.0598 15.2001L15.3398 16.5801Z" fill="%232CB865"/><path d="M12.9 9.69004C12.9432 9.72485 12.9774 9.7694 13 9.82004C13.0148 9.87913 13.0148 9.94096 13 10C13.014 10.0592 13.014 10.1209 13 10.18C12.9634 10.2331 12.9156 10.2775 12.86 10.31C11.4261 11.169 10.2325 12.3764 9.39 13.82C9.35986 13.8748 9.31477 13.9199 9.26 13.95C9.20562 13.9827 9.14341 13.9999 9.08 13.9999C9.01659 13.9999 8.95438 13.9827 8.9 13.95C8.84523 13.9199 8.80014 13.8748 8.77 13.82C7.90788 12.3781 6.70196 11.1722 5.26 10.31C5.20438 10.2775 5.15658 10.2331 5.12 10.18C5.10596 10.1209 5.10596 10.0592 5.12 10C5.10518 9.94096 5.10518 9.87913 5.12 9.82004C5.15371 9.76457 5.20218 9.71956 5.26 9.69004C6.70763 8.83085 7.91493 7.62011 8.77 6.17004C8.80543 6.11947 8.84942 6.07547 8.9 6.04004C8.95918 6.02601 9.02082 6.02601 9.08 6.04004C9.13908 6.02523 9.20091 6.02523 9.26 6.04004C9.31058 6.07547 9.35457 6.11947 9.39 6.17004C10.2488 7.61721 11.4553 8.82712 12.9 9.69004Z" fill="%232CB865"/></g><defs><clipPath><rect width="18.16" height="18.16" fill="white" transform="translate(0 0.920044)"/></clipPath></defs></svg>');
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
}

ol.block-list,
ol.wp-block-list,
ol:not([class]) {
    counter-reset: list-counter;
}

ol.block-list li,
ol.wp-block-list li,
ol:not([class]) li {
    counter-increment: list-counter;
    position: relative;
}

ol.block-list > li::before,
ol.wp-block-list > li::before,
ol:not([class]) > li::before {
    content: counter(list-counter) ". ";
    color: #2CB865;
    font-size: 18px;
    font-style: italic;
    font-weight: 800;
    line-height: 24px;
}

.how-to > :not(:first-child) {
    margin-top: 20px;
}

/* Popup */
.popup {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, .7);
    margin: 0 !important;
}

.popup._active {
    display: flex;
}

.popup__title {
    color: #FFF;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    padding: 10px;
}

.popup__buttons {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .popup__buttons > .btn {
        width: 100%;
    }
}

.popup__buttons .slots__button {
    width: unset;
}

.popup__frame {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100%;
    max-width: 1380px;
    max-height: 720px;
    margin: auto;
    border-radius: 4px;
    background: #141f2d;
    padding: 8px 12px 0 12px;
}

.popup__body {
    position: relative;
    grid-column: 1/4;
    grid-row: 2/3;
    margin: 8px -10px 2px -10px;
    border-radius: 4px;
    background: #D9D9D9;
    overflow: hidden;
}

.popup__body iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border: none;
}

.popup__cross {
    background: none;
    border: none;
    cursor: pointer;
    color: #FFF;
}

@media (max-width: 767px) {
    .popup__frame {
        max-height: unset;
        height: 100dvh;
        border-radius: unset;
    }

    .popup__frame {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr auto;
    }

    .popup__cross {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .popup__frame .popup__buttons {
        justify-content: center;
        grid-column: 1/3;
        grid-row: 3/4;
    }

    .popup__frame .popup__buttons:has(:nth-child(1)) {
        padding: 10px 0;
    }

    .popup__body {
        grid-column: 1/3;
        grid-row: 2/3;
    }
}

/* wp-block-table */
.wp-block-table {
    overflow: auto;
}

@media (max-width: 767px) {
    .wp-block-table table:has(td:nth-child(3)) {
        min-width: 600px
    }

    .wp-block-table table:has(td:nth-child(4)) {
        min-width: 800px
    }

    .wp-block-table table:has(td:nth-child(5)) {
        min-width: 1000px
    }
}

.block-heading {
    margin-bottom: 20px;
}

/* Breadcrumbs */
.breadcrumbs {
  background: #141f2d;
 
}

.breadcrumbs ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  list-style: none;
}

.breadcrumbs ul li {
    display: flex;
}

.breadcrumbs ul li:not(:last-child):after {
    content: '/';
    margin-left: 10px;
}

.breadcrumbs a {
    color: #1fb73a;
}