* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #fcfcfc;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Header Navigation --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.left-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-toggle {
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    color:black;
}

.logo {
    display: flex;
    align-items: center;
    height: 56px;
}

.logo a {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-gif {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.right-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-selector-wrapper {
    position: relative;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color:#000000
}

.lang-selector .lang-caret {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.lang-selector-wrapper.open .lang-selector .lang-caret {
    transform: rotate(180deg);
}

.lang-dropdown {
    list-style: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: white;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: none;
    z-index: 1001;
}

.lang-selector-wrapper.open .lang-dropdown {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    text-align: left;
}

.lang-option:hover {
    background: #f0f0f0;
}

.lang-option.active {
    font-weight: 600;
    background: #f5f5f5;
}

.btn {
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-signup {
    background-color: transparent;
    border: 1px solid #333;
    color: #333;
}

.btn-signup:hover {
    background-color: #f0f0f0;
}

.btn-login {
    background-color: #ff8c00;
    color: white;
}

.btn-login:hover {
    background-color: #e07b00;
}

/* --- Main Layout Wrapper --- */
.app-container {
    display: flex;
    flex: 1;
}

/* --- Sidebar --- */
aside {
    width: 231px;
    background-color: #ffffff;
    border-right: 1px solid #eaeaea;
    padding: 3px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.site-sidebar {
    position: sticky;
    top: 77px;
    align-self: flex-start;
    height: calc(100vh - 77px);
    overflow-y: auto;
}

.sidebar-title {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    padding-left: 8px;
    margin-bottom: 5px;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition: background 0.2s;
}

.nav-item:hover {
    background-color: #f5f5f5;
}

.nav-icon {
    width: 41px;
    height: 33px;
    flex-shrink: 0;
}

/* --- 侧边栏子菜单 (Bonus > Welcome Bonus / Games > Slot, Fishing) --- */
.nav-parent {
    display: flex;
    flex-direction: column;
}

.nav-item-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-item-row .nav-item {
    flex: 1;
}

.nav-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-right: 4px;
    border: none;
    background: none;
    color: #888888;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-caret:hover {
    background-color: #f5f5f5;
}

.nav-caret svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.nav-parent.open .nav-caret svg {
    transform: rotate(180deg);
}

.nav-submenu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    padding-left: 40px;
    transition: max-height 0.25s ease;
}

.nav-parent.open .nav-submenu {
    max-height: 200px;
}

.nav-subitem {
    display: block;
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.nav-subitem:hover {
    background-color: #f5f5f5;
    color: #000000;
}

/* --- Main Content Area --- */
main {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column; 
    gap: 30px;              
    align-items: stretch;
}

/* Wide Banner Column takes up all primary middle space */
.hero-media-section {
    width: 100%;            
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.slider-container {
    width: 100%;
    max-height: 433px;     
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #f0f0f0;
    display: flex;
}

.banner-img {
    width: 100%;
    height: 511px;         
    object-fit: cover;
    display: block;
}

/* Slider Pagination Dots */
.slider-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dot.active {
    background-color: #333;
    width: 12px;
    border-radius: 3px;
}

/* Right Sidebar / Banner Ads Column */
.right-ads-column {
    width: 110px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
}

.ad-banner-placeholder {
    width: 100%;
    height: 380px;
    background: linear-gradient(180deg, #fff3e0, #ffe0b2);
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #e65100;
    padding: 10px;
}


/* ==========================================================================
   第二部分：游戏展示区独立 CSS
   ========================================================================== */

.games-display-section {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: stretch;
}

/* 左侧大人物海报 */
.character-illustration {
    width: 298px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
}

.character-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右侧组合包装 */
.games-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 过滤器与 View More 头部行 */
.games-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}

.filter-tabs {
    display: flex;
    gap: 10px;
}

.tab-btn {
    background: #eaeaea;
    color: #555;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

/* 选项卡高亮 */
.tab-btn.active, .tab-btn:hover {
    background: linear-gradient(135deg, #eb9c25, #d8581d);
    color: #fff;
}

.view-more-link {
    color: #ff8c00;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}

.view-more-link:hover {
    text-decoration: underline;
}

/* 游戏卡片自适应网格 */
.games-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

/* 单个游戏卡片 */
.game-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}

.game-card:hover {
    transform: translateY(-4px);
}

/* 游戏原画图片容器 */
.card-img-holder {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.card-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 卡片底栏 */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f9fafb;
}

.game-title {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
    padding: 0 5px;
}

.info-icon {
    font-size: 14px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;
}

.info-icon:hover { color: #2563eb; }


/* --- 响应式适配调整 --- */
@media (max-width: 1200px) {
    .games-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 992px) {
    main {
        flex-direction: column;
    }
    .right-ads-column {
        display: none;
    }
    .games-display-section {
        flex-direction: column;
    }
    .character-illustration {
        display: none;
        width: 100%;
        height: 200px;
        align-items: center;
    }
    .games-content-wrapper {
        padding: 4px 4px 20px;
    }
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .games-filter-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ==========================================================================
   第三部分：Featured On 媒体合作伙伴 (亮色主题 - 已移除 hover 滤镜效果)
   ========================================================================== */

.featured-on-section {
    width: 100%;
    background: linear-gradient(to right, #ffffff, #f7a429); 
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    border: 1px solid #f0f0f0; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 标题样式（使用亮眼的特色橙色） */
.featured-title {
    color: #ff8c00; 
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
}

/* 标志图标横向对齐容器 */
.logos-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    gap: 30px;
    width: 100%;
}

/* 单个 Logo 包装盒 */
.logo-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 45px;
}

.logo-item a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Logo 图片基础规则（移除了滤镜，保持原图原色且不带鼠标互动效果） */
.logo-item img {
    max-width: 100%;
    max-height: 63px;
    object-fit: contain;
    display: block;
}

/* --- 第三部分响应式适配 --- */
@media (max-width: 768px) {
    .logos-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
    }
}

/* ==========================================================================
   第四部分：Footer 底部区域 (移除文字，右侧直接展示全图代言人)
   ========================================================================== */

.main-footer {
    width: 100%;
    background: linear-gradient(to right, #ffffff, #fff3e0); 
    padding: 30px 24px 20px 24px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 主内容大布局 */
.footer-main-content {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 👈 改为垂直居中，让两边的内容和图片高度对齐更美观 */
    gap: 30px;
}

/* 栏目公共小标题 */
.footer-sub-title {
    color: #ff8c00; 
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    text-transform: capitalize;
}

/* --- 左侧区域 --- */
.footer-left-wrapper {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.footer-row-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.asset-container .license-img {
    max-height: 48px;
    object-fit: contain;
}


.payment-grid img {
    width: 100%;
    max-width: 36px;
    height: auto;
}

.payment-chip {
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.payment-chip:hover {
    transform: translateY(-2px);
    border-color: #ff8c00;
    box-shadow: 0 6px 14px rgba(255,140,0,0.12);
}

.payment-chip img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* --- 中间 Other Links 区域 --- */
/* --- Contact Information --- */
.footer-contact-wrapper {
    flex: 1.2;
}

.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-list li {
    color: #555555;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.footer-contact-list a {
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-list a:hover {
    color: #ff8c00;
}

.footer-center-wrapper {
    flex: 0.8;
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-list a {
    color: #555555;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-links-list a:hover {
    color: #ff8c00;
}

/* --- 右侧：代言人独立图片容器 --- */
.footer-right-wrapper {
    flex: 1.5;
    display: flex;
    justify-content: flex-start;
}

.ambassador-full-img {
    max-width: 462px; /* 👈 控制右侧图片的最大宽度，可以改成 220px 或 300px 控制大小 */
    display: flex;
}

/* --- 右侧：代言人图片容器（带绝对定位小图） --- */
.footer-right-wrapper {
    flex: 1.5;
    display: flex;
    justify-content: flex-end;
}

/* 核心包裹容器：用来作为定位基准 */
.ambassador-badge-wrapper {
    position: relative; /* 👈 让小图能够相对于这个区域精确定位 */
    display: inline-block;
}

.ambassador-full-img {
    max-width: 462px; /* 保持你原本的 462px 宽度 */
    display: flex;
}

.ambassador-full-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 两个小图的公共基础样式 */
.badge-img {
    position: absolute; /* 👈 脱离文档流，自由浮动 */
    width: 140px;        /* 👈 在这里控制小图的尺寸，比如 40px 或 60px */
    height: auto;
    z-index: 5;         /* 确保小图层级在主图之上 */
    object-fit: contain;
}

/* 精确控制左上角小图位置 */
.badge-img.top-left {
    top: -10px;        /* 👈 向上偏移，负数代表超出主图边缘，可微调 */
    left: -10px;       /* 👈 向左偏移 */
}

/* 精确控制右下角小图位置 */
.badge-img.bottom-right {
    bottom: -3px;     /* 👈 向下偏移 */
    right: -2px;      /* 👈 向右偏移 */
}

.ambassador-full-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* --- 最底部的版权声明行 --- */
.footer-bottom-bar {
    border-top: 1px solid #eaeaea;
    padding-top: 15px;
    text-align: left;
}

.footer-bottom-bar p {
    color: #222222;
    font-size: 13px;
    font-weight: 700;
}

/* --- Footer 响应式适配调整 --- */
@media (max-width: 992px) {
    .footer-main-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .footer-right-wrapper {
        justify-content: center; /* 手机端让代言人图片居中展示 */
        width: 100%;
        border-top: 1px solid #eaeaea;
        padding-top: 20px;
    }
    .ambassador-full-img {
        max-width: 200px; /* 手机端稍微缩小图片 */
    }
    .payment-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* On very wide screens the columns stretch edge-to-edge and end up
   far apart — cap the row width and center it so they sit closer together. */
@media (min-width: 1441px) {
    .footer-main-content {
        margin: 0px 206px;
    }
}

/* ==========================================================================
   第五部分：All Promotion 优惠活动页面样式 (无 Read More 按钮)
   ========================================================================== */

.promotion-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 页面大标题 */
.promotion-main-title {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 5px;
}

/* 3列网格布局容器 */
.promotion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 平铺3列 */
    gap: 24px;
    width: 100%;
}

/* 单个优惠卡片 */
.promo-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* 鼠标悬停卡片有微微浮起和加深阴影的效果，极具质感 */
.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* 优惠券 Banner 图片包装盒（16:7 比例适配） */
.promo-img-holder {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background-color: #f5f5f5;
}

.promo-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 下方纯文字信息区域：移除按钮后，文本垂直居中自然伸展 */
.promo-info {
    padding: 18px 16px;
    flex: 1;
    display: flex;
    align-items: center; /* 垂直居中 */
    background-color: #ffffff;
}

/* 优惠标题样式：采用黑体高质感字体，大小和设计图一致 */
.promo-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    text-transform: uppercase; /* 英文自动大写 */
    
    /* 限制最多显示 2 行，超出部分自动变省略号(...)，防止长短不一破坏排版 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 优惠页面响应式适配 --- */
@media (max-width: 1200px) {
    .promotion-grid {
        grid-template-columns: repeat(2, 1fr); /* 屏幕稍小时，变2列 */
        gap: 20px;
    }
}

@media (max-width: 680px) {
    .promotion-grid {
         grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .promotion-main-title {
        font-size: 20px;
    }
}

/* ==========================================================================
   第六部分：TAB66 独立银行页面组件样式（全图片流版）- 白橙定制版
   ========================================================================== */

.banking-main-wrapper {
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.banking-section {
    width: 100%;
}

/* 栏目特色小橙条标题 */
.banking-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 24px;
    position: relative;
    padding-left: 12px;
}

.banking-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    height: 18px;
    width: 4px;
    background-color: #ff8c00;
    border-radius: 2px;
}

/* --- 第一部分：纯图片 HERO BANKING BANNER 规则 --- */
.banking-hero-section {
    width: 100%;
}

.banking-hero-banner-container {
    width: 100%;
    max-height: 486px; /* 限制银行大图的最大高度，防止撑得过大，可根据图片比例微调 */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #f0f0f0;
    display: flex;
}

.banking-banner-img {
    width: 100%;
    height: 532px;   
    object-fit: cover;
    display: block;
}

/* --- 第二部分：SUPPORTED PAYMENT METHODS —— 支付网关风格模块 --- */

.banking-payment-header {
    margin-bottom: 20px;
}

.banking-payment-header .banking-section-title {
    margin-bottom: 8px;
}

.banking-payment-subtitle {
    font-size: 14px;
    color: #767676;
    line-height: 1.6;
    max-width: 560px;
    padding-left: 12px;
}

/* 白橙主题支付面板容器 */
.banking-payment-panel {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 14px;
    padding: 28px 26px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(255, 140, 0, 0.05);
    overflow: hidden;
}


.banking-payment-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.payment-category {
    background: #fdfdfd;
    border: 1px solid #eeeeee;
    border-left: 3px solid #ff8c00;
    border-radius: 10px;
    padding: 18px 16px;
}

.payment-category-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.payment-category-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-category-icon svg {
    width: 19px;
    height: 19px;
}

.payment-category-title {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 3px;
}

.payment-category-desc {
    font-size: 12.5px;
    color: #767676;
    line-height: 1.5;
}

.payment-method-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.payment-method-item {
    position: relative;
    flex: 1 1 110px;
    min-width: 100px;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-method-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 140, 0, 0.5);
    background: rgba(255, 140, 0, 0.04);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.08);
}

.payment-method-item:hover::after {
    border-color: #ff8c00;
    background-color: #ff8c00;
}

.payment-method-logo {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 5px 10px;
}

.payment-method-logo img {
    max-height: 100%;
    max-width: 68px;
    object-fit: contain;
    display: block;
}

.payment-method-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #495057;
}

/* 底部信任标识条 */
.banking-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #eeeeee;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-icon svg {
    width: 21px;
    height: 21px;
}

.trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trust-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #333333;
}

.trust-text span {
    font-size: 11.5px;
    color: #767676;
}

/* --- 响应式尺寸适配 --- */
@media (max-width: 900px) {
    .banking-payment-categories {
        grid-template-columns: 1fr;
    }
    .banking-trust-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .banking-hero-banner-container, .banking-banner-img {
        height: 180px; /* 手机端自动缩减 Banner 高度以适应屏幕宽度 */
    }
    .banking-payment-panel {
        padding: 22px 16px 18px;
    }
}

@media (max-width: 480px) {
    .payment-method-item {
        flex: 1 1 90px;
        min-height: 76px;
    }
    .payment-category {
        padding: 16px 12px;
    }
}

/* ==========================================================================
   第七部分：TAB66 Mobile 页面 —— 高级暗色游戏风格落地区
   ========================================================================== */

.mobile-page-main {
    padding: 0 !important;
    gap: 0 !important;
}

.mobile-landing-shell {
    position: relative;
    background: radial-gradient(circle at 15% 0%, rgba(255,140,0,0.16), transparent 45%),
                radial-gradient(circle at 100% 100%, rgba(255,178,58,0.08), transparent 55%),
                linear-gradient(160deg, #15100c 0%, #1c1510 45%, #120d0a 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 1. Hero Section --- */
.mobile-hero-section {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 56px 44px;
}

.mobile-hero-left {
    flex: 1 1 420px;
    min-width: 280px;
}

.mobile-hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ff8c00;
    background: rgba(255,140,0,0.12);
    border: 1px solid rgba(255,140,0,0.35);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.mobile-hero-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 16px;
}

.mobile-hero-desc {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255,255,255,0.62);
    max-width: 440px;
    margin-bottom: 28px;
}

.mobile-hero-cta {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff9d1f, #ff7a00);
    color: #1a1108;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(255,140,0,0.32);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255,140,0,0.42);
}

/* --- Phone mockup --- */
.mobile-hero-right {
    flex: 1 1 320px;
    display: flex;
    justify-content: center;
    min-width: 260px;
}

.phone-mockup-wrap {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out;
    will-change: transform;
}

.phone-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(255,140,0,0.32) 0%, transparent 65%);
    filter: blur(10px);
    z-index: 0;
}

.phone-mockup {
    position: relative;
    z-index: 1;
    width: 240px;
    background: linear-gradient(160deg, #2a2118, #100c08);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 34px;
    padding: 14px 10px 20px;
    box-shadow: 0 30px 50px rgba(0,0,0,0.45);
}

.phone-notch {
    width: 70px;
    height: 16px;
    background: #0c0906;
    border-radius: 10px;
    margin: 0 auto 10px;
}

.phone-screen {
    width: 100%;
    aspect-ratio: 9 / 17;
    border-radius: 22px;
    overflow: hidden;
    background: #0c0906;
    border: 1px solid rgba(255,255,255,0.06);
}

.phone-screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-home-bar {
    width: 90px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
    margin: 12px auto 0;
}

.floating-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(28,20,14,0.92);
    border: 1px solid rgba(255,140,0,0.35);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.3);
}

.badge-top {
    top: 6%;
    left: -8%;
}

.badge-bottom {
    bottom: 10%;
    right: -10%;
}

.badge-icon {
    width: 13px;
    height: 13px;
    color: #ff8c00;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b3b;
    box-shadow: 0 0 0 0 rgba(255,59,59,0.6);
    animation: badgePulse 1.8s infinite;
}

@keyframes badgePulse {
    0% { box-shadow: 0 0 0 0 rgba(255,59,59,0.55); }
    70% { box-shadow: 0 0 0 7px rgba(255,59,59,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}

/* --- 2. Mobile Advantages Section --- */
.mobile-advantages-section {
    padding: 8px 44px 44px;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: 4px;
    padding-top: 34px;
}

.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.advantage-item {
    padding: 22px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.advantage-item:hover {
    border-color: rgba(255,140,0,0.4);
    background: rgba(255,140,0,0.06);
    transform: translateY(-3px);
}

.advantage-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255,140,0,0.14);
    color: #ff8c00;
    margin-bottom: 14px;
}

.advantage-icon svg {
    width: 21px;
    height: 21px;
}

.advantage-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.advantage-desc {
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

/* --- 3. Download / CTA Section --- */
.mobile-cta-section {
    text-align: center;
    padding: 36px 44px 48px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(255,140,0,0.05), transparent);
}

.mobile-cta-title {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 22px;
}

.store-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #16110c;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    min-width: 168px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.store-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(255,140,0,0.22);
}

.store-btn-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #16110c;
}

.store-btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
}

.store-btn-text small {
    font-size: 10px;
    font-weight: 600;
    color: #7a7a7a;
    letter-spacing: 0.4px;
}

.store-btn-text strong {
    font-size: 16px;
    font-weight: 700;
}

.mobile-trust-points {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.trust-point {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
}

.trust-point svg {
    width: 16px;
    height: 16px;
    color: #ff8c00;
}

/* --- 响应式适配 --- */
@media (max-width: 900px) {
    .mobile-hero-section {
        flex-direction: column;
        text-align: center;
        padding: 40px 24px;
        gap: 32px;
    }
    .mobile-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .mobile-hero-left {
        min-width: 0;
    }
    .advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mobile-advantages-section,
    .mobile-cta-section {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 520px) {
    .mobile-hero-title {
        font-size: 30px;
    }
    .advantage-grid {
        grid-template-columns: 1fr;
    }
    .badge-top, .badge-bottom {
        display: none; /* 手机端隐藏浮动徽章，避免遮挡内容 */
    }
    .store-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   TAB66 APP DOWNLOAD SECTION - LIGHT THEME (EXTREME CENTER FOCUSED)
   ========================================================================== */

/* Main Section Wrapper */
.tab66-app-download-section.light-theme {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    padding: 38px 24px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, sans-serif;
}

/* Premium Radial Background Glow behind the center piece */
.tab66-app-download-section.light-theme .section-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 182, 0, 0.14) 0%, transparent 65%);
    filter: blur(45px);
    pointer-events: none;
    z-index: 1;
}

/* Golden Grid Layout - Max proportion locked to center showcase */
.tab66-app-download-section .app-download-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.65fr 1.6fr; 
    gap: 35px;
    align-items: center;
}

/* --- LEFT SIDE: COMPACT MINI-SIDE (Supporting Frame) --- */
.tab66-app-download-section .download-left-content.compact-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-left:80px;
}

/* Apple-style Micro Badge */
.tab66-app-download-section .compact-side .app-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e67e00;
    background: rgba(255, 140, 0, 0.06);
    border: 1px solid rgba(255, 140, 0, 0.15);
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 12px;
    line-height: 1;
}

/* Typography Scale Down */
.tab66-app-download-section .compact-side .app-main-title {
    font-size: 30px; 
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.15;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

/* Distinct Tech-Branding Splits */
.text-blue {
    color: #0071e3;
}
.text-orange {
    color: #ff7a00;
}

.tab66-app-download-section .compact-side .app-subtitle {
    font-size: 16px; 
    color: #6e6e73; 
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.3px;
}

/* Deep Visual Push to Bottom */
.tab66-app-download-section .store-buttons-grid.push-down {
    margin-top: 50px; 
}

.tab66-app-download-section .store-buttons-grid.mini-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 170px; 
    margin-bottom: 14px;
}

/* Premium Sized Micro Store Buttons */
.tab66-app-download-section .mini-buttons .store-download-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px; 
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}

.tab66-app-download-section .app-store-btn { 
    background: #0071e3; 
}
.tab66-app-download-section .google-play-btn { 
    background: #4285f4; 
}

.tab66-app-download-section .store-download-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.tab66-app-download-section .mini-buttons .store-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.tab66-app-download-section .mini-buttons .store-btn-text small {
    font-size: 7.5px; 
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
}

.tab66-app-download-section .mini-buttons .store-btn-text strong {
    font-size: 12.5px; 
    font-weight: 600;
}

.tab66-app-download-section .mini-buttons .store-icon {
    flex-shrink: 0;
    color: #ffffff;
    display: block;
}

/* Footer Action Link */
.tab66-app-download-section .compact-side .instruction-guide-link {
    font-size: 11.5px;
    font-weight: 600;
    color: #e67e00;
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease;
}

.tab66-app-download-section .compact-side .instruction-guide-link:hover {
    color: #ff7a00;
    text-decoration: underline;
}

/* --- CENTER SIDE: THE HERO IMAGE (Absolute Focus Area) --- */
.tab66-app-download-section .download-center-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.tab66-app-download-section .center-showcase-img {
    width: 100%;
    max-width: 598px; 
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.09));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab66-app-download-section:hover .center-showcase-img {
    transform: scale(1.025);
}

/* --- RIGHT SIDE: COMPACT SUPPORTING CARDS --- */
.tab66-app-download-section .download-right-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tab66-app-download-section .premium-feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.01);
    padding: 12px 14px; 
    border-radius: 12px;
    transition: all 0.25s ease;
}

.tab66-app-download-section .premium-feature-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.tab66-app-download-section .card-icon-wrap {
    flex-shrink: 0;
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 10px;
}

/* Card Glow Treatments */
.tab66-app-download-section .icon-purple { background: linear-gradient(135deg, #e3e3ff, #c7c7ff); color: #5856d6; }
.tab66-app-download-section .icon-blue { background: linear-gradient(135deg, #e1f0ff, #b3d7ff); color: #0071e3; }
.tab66-app-download-section .icon-pink { background: linear-gradient(135deg, #ffe3e3, #ffb3b3); color: #ff2d55; }

.tab66-app-download-section .card-text-wrap h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 2px 0;
}

.tab66-app-download-section .card-text-wrap p {
    font-size: 11px;
    color: #86868b;
    line-height: 1.3;
    margin: 0;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 992px) {
    .tab66-app-download-section .app-download-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .tab66-app-download-section .download-left-content.compact-side {
        align-items: center;
        margin-left:0px;
    }
    
    .tab66-app-download-section .store-buttons-grid.push-down {
        margin-top: 20px;
    }
    
    .tab66-app-download-section .store-buttons-grid.mini-buttons {
        margin: 0 auto 12px;
    }
    
    /* Pushes key art design to act as the primary visual on mobile displays */
    .tab66-app-download-section .download-center-showcase {
        order: -1;
    }
}

/* ==========================================================================
   真人娱乐场页面组件样式 (Live Casino Section with Video Optimization)
   ========================================================================== */

/* --- 全局外层定位包裹器 --- */
.live-casino-main {
    flex: 1;
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #ffffff;
}

/* --- Hero Banner --- */
.live-casino-hero-banner {
    position: relative;
    width: 100%;
    height: 330px;
    border-radius: 12px;
    background-color: #eaeaea;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.live-casino-hero-banner .banner-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-casino-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 8, 6, 0.75) 0%, rgba(10, 8, 6, 0.4) 45%, rgba(10, 8, 6, 0) 75%);
    z-index: 1;
}

.live-casino-hero-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-left: 5%;
}

.live-casino-hero-text {
    max-width: 520px;
}

.live-casino-hero-title {
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 14px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.live-casino-hero-intro {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.live-casino-hero-intro-below {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin: 2px 12px;
}

.live-casino-content-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(255, 140, 0, 0.05);
}

.live-casino-content-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
}

.live-casino-content-card p + p {
    margin-top: 10px;
}

.live-casino-content-card a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.live-casino-content-card a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .live-casino-hero-banner {
        height: 220px;
    }
    .live-casino-hero-title {
        font-size: 19px;
        margin-bottom: 6px;
    }
    .live-casino-hero-intro {
        display: none;
    }
    .live-casino-content-card {
        padding: 20px 18px;
    }
}

@media (max-width: 480px) {
    .live-casino-hero-banner {
        height: 160px;
    }
}

/* --- 顶部分类过滤导航条 --- */
.casino-filter-nav {
    border-bottom: 1px solid #eaeaea;
    width: 100%;
}

.filter-tabs-list {
    list-style: none;
    display: flex;
    gap: 32px;
    padding: 0;
    margin: 0;
}

.filter-item {
    font-size: 14px;
    font-weight: 500;
    color: #888888;
    padding: 14px 4px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    user-select: none;
}

.filter-item:hover, .filter-item.active {
    color: #2b61ff;
    font-weight: 600;
}

/* 激活分类选项卡下方的亮橙色装饰横条 */
.filter-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ff8c00;
    border-radius: 2px 2px 0 0;
}

/* --- 大排版分栏双列网格 --- */
.section-heading {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 14px;
}

/* --- 直播供应商列表 --- */
.casino-providers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.casino-provider-card {
    position: relative;
    flex: 0 0 auto;
    background: #f7f7f8;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 7px 16px 7px 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.casino-provider-card:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 8px 18px rgba(255, 140, 0, 0.12);
}

.casino-provider-card:hover .casino-provider-icon {
    filter: none;
}

.casino-provider-card:hover .casino-provider-name {
    color: #ff8c00;
}

/* --- 选中/高亮状态：使用主题橙色 --- */
.casino-provider-card.active {
    background: linear-gradient(135deg, #ff9d1f, #ff7a00);
    border-color: #ff7a00;
    box-shadow: 0 8px 18px rgba(255, 140, 0, 0.32);
}

.casino-provider-card.active .casino-provider-name {
    color: #ffffff;
}

.casino-provider-card.active:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ffac3f, #ff6a00);
}

.casino-provider-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
    transition: filter 0.2s ease;
}

/* 未选中的供应商图标默认灰阶显示，悬停/选中时恢复彩色 */
.casino-provider-card:not(.active) .casino-provider-icon {
    filter: grayscale(1) opacity(0.7);
}

.icon-evo { background: linear-gradient(135deg, #ff9d1f, #ff5f00); }
.icon-dream { background: linear-gradient(135deg, #ff6fa5, #c2185b); }
.icon-pragmatic { background: linear-gradient(135deg, #ff7a59, #d9342b); }
.icon-sexy { background: linear-gradient(135deg, #ff4d6d, #a4133c); }
.icon-sa { background: linear-gradient(135deg, #4facfe, #2b61ff); }
.icon-wm { background: linear-gradient(135deg, #2b3a67, #0d1b3e); }
.icon-big { background: linear-gradient(135deg, #34d399, #059669); }
.icon-allbet { background: linear-gradient(135deg, #22c1c3, #0e7490); }
.icon-micro { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.icon-gameplay { background: linear-gradient(135deg, #6366f1, #3730a3); }
.icon-playtech { background: linear-gradient(135deg, #4b5563, #1f2937); }

.casino-provider-name {
    font-size: 13px;
    font-weight: 700;
    color: #999999;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.casino-provider-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff8a3d, #ff5200);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(255, 82, 0, 0.4);
    z-index: 2;
}

/* 移动端：供应商列表改为单行横向滑动 */
@media (max-width: 768px) {
    .casino-providers-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-left: 12px;
        padding-bottom: 4px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scrollbar-width: none;
    }

    .casino-providers-grid::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    .casino-provider-card {
        scroll-snap-align: start;
    }
}

/* --- 右侧游戏列表双列瀑布流 --- */
.live-games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 35px;
}

.live-game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-game-card:hover {
    transform: translateY(-3px);
}

.game-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2.6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    background-color: #eaeaea;
}

.game-thumbnail img {
    width: 100%;
    height: 100%;
}

.game-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    margin-top: 8px;
    text-align: center;
}

/* 角标状态标牌 (HOT/NEW) */
.game-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    z-index: 2;
}

.badge-hot { background-color: #ff5200; }
.badge-new { background-color: #00cc66; }

/* --- 高级自适应断点媒介查询 --- */
@media (max-width: 1024px) {
    .live-games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .live-games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .filter-tabs-list {
        gap: 16px;
        overflow-x: auto; /* 过滤项超出时支持手势左右横向滑动滑动 */
        white-space: nowrap;
        padding-bottom: 4px;
    }
}

/* --- Main Background Container --- */
.poker-bg-holder {
  /* Dimensions - adjust these to fit your layout */
  width: 100%;
  height: 400px;
  background-image: 
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.8) 100%),
    url('/img/pokerbanner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Flexbox to center the inner content perfectly */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* --- Inner Content Styling --- */
.poker-content {
  text-align: center;
  color: #fdfdfd;
  font-family: 'Georgia', serif; /* Gives a classic, classy casino vibe */
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 24px;
  max-width: 820px;
}

.poker-content h1 {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  /* Heavy text shadow to ensure it pops off the background */
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
  color: #f5cf74; /* Soft gold text */
}

.poker-content p {
  font-size: 1.2rem;
  margin: 0;
  font-family: sans-serif;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* --- Poker Page Layout Column --- */
.poker-page-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

/* --- Poker Variants Section --- */
.poker-variants-section {
  width: 100%;
}

.poker-variants-title {
  font-size: 22px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 12px;
}

.poker-variants-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  height: 18px;
  width: 4px;
  background-color: #ff8c00;
  border-radius: 2px;
}

.poker-variants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.poker-variant-img {
  width: 100%;
  aspect-ratio: 45 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f0f0f0;
  margin-bottom: 14px;
}

.poker-variant-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poker-variant-name {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 8px;
}

.poker-variant-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #666666;
}

@media (max-width: 900px) {
  .poker-variants-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   0. 全局外层包裹器 (解决左右跑位)
   ========================================== */
.games-page-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px; 
}

/* ==========================================
   1. 超薄游戏横幅样式 (Games Banner)
   ========================================== */
.games-hero-banner {
  width: 100%;
  height: 225px; 
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 80%),
    url('/img/FG-en-my-bn-Photoroom.png'); 
  background-size: cover; 
  background-position: center; 
  display: flex;
  align-items: center; 
  padding: 0 5%; 
  box-sizing: border-box;
  overflow: hidden; 
}

.games-hero-banner .banner-content {
  display: flex;
  align-items: center; 
  justify-content: space-between; 
  width: 100%;
  gap: 20px; 
}

.games-hero-banner .banner-text {
  flex: 1;
}

.games-hero-banner .banner-text h1 {
  font-size: 1.4rem; 
  font-weight: bold;
  margin: 0; 
  color: #f5cf74; 
  text-transform: uppercase;
  letter-spacing: 1px;
}

.games-hero-banner .banner-text p {
  font-size: 0.85rem; 
  margin: 4px 0 0 0; 
  color: #e2e8f0;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}

.games-hero-banner .btn-play-now {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap; 
  background: linear-gradient(135deg, #f5cf74 0%, #d4af37 100%);
  color: #1a1a1a;
  border-radius: 6px; 
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.games-hero-banner .btn-play-now:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffdf8c 0%, #e6be45 100%);
}

/* ==========================================
   2. 下方游戏大厅样式 (Filter, Search, Grid)
   ========================================== */
.game-library-section {
  width: 100%;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eaeaea;
}

/* --- 顶栏：过滤器与搜索 --- */
.library-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #fcfcfc;
  border-bottom: 1px solid #eaeaea;
  flex-wrap: wrap; 
  gap: 16px;
}

.filter-container {
  display: flex;
  gap: 8px;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 24px;
  background-color: #f5f5f5;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #555555;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background-color: #ebebeb;
}

.filter-btn.active {
  background: linear-gradient(180deg, #ff9d1f 0%, #ff7a00 100%); /* 橙色渐变 */
  color: #ffffff;
  border-color: #ff7a00; /* 橙色边框 */
  box-shadow: 0 2px 5px rgba(255, 140, 0, 0.3); /* 橙色发光阴影 */
}

.search-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.game-count {
  font-size: 13px;
  color: #888;
  font-weight: 600;
}

.search-input-box {
  position: relative;
  width: 220px;
}

.search-input-box input {
  width: 100%;
  padding: 8px 35px 8px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.search-input-box input:focus {
  border-color: #007cff;
  background-color: #ffffff;
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #888888;
  pointer-events: none;
}

/* --- 游戏大图网格 (图片版) --- */
.games-grid-container {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}

.game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* 移除原有的悬停上浮，改为图片悬停放大，更符合图片展示的质感 */
.game-item:hover .game-cover img {
  transform: scale(1.06);
}

.game-cover {
  width: 100%;
  aspect-ratio: 1 / 1; 
  border-radius: 14px; 
  position: relative;
  background-color: #f0f0f0; /* 图片未加载时的占位颜色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 保证图片放大时不会超出圆角边框 */
  margin-bottom: 10px;
}

/* 图片强制撑满容器 */
.game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 顺滑的缩放动画 */
}

/* --- "Read More" 结尾卡片 --- */
.game-item-more {
  text-decoration: none;
}

.game-cover-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9d1f, #ff7a00);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
}

.game-item-more:hover .game-cover-more {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(255, 140, 0, 0.3);
}

.read-more-text {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 0 10px;
}

.game-title {
  font-size: 13px;
  color: #333333;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

/* --- 响应式适配 --- */
@media (max-width: 768px) {
  .library-header-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .search-container {
    width: 100%;
    justify-content: space-between;
  }
  .search-input-box {
    flex: 1;
    max-width: 250px;
  }
  .games-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .games-grid-container {
    grid-template-columns: repeat(3, 1fr); 
  }
  .search-input-box {
    max-width: none;
  }
}

/* ==========================================
   Blog 子页面样式 (无 Read More 按钮版)
   ========================================== */

/* --- 主容器 --- */
.blog-subpage-container {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 24px;
  background-color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

/* --- 页面标题 --- */
.blog-main-title {
  font-size: 26px;
  font-weight: 800;
  color: #111111;
  margin-bottom: 16px;
  margin-top: 0;
}

/* --- 页面简介 --- */
.blog-intro {
  font-size: 14.5px;
  line-height: 1.75;
  color: #555555;
  margin: 0 0 24px;
}

.blog-intro strong {
  color: #333333;
}

/* --- 分类过滤器 --- */
.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.blog-filter-btn {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #555555;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blog-filter-btn:hover {
  border-color: rgba(255,140,0,0.4);
  color: #ff8c00;
}

.blog-filter-btn.active {
  background: linear-gradient(135deg, #ff9d1f, #ff7a00);
  border-color: #ff7a00;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(255,140,0,0.25);
}

/* --- 网格布局 (桌面端默认 3 列) --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

/* --- 单个博客卡片 --- */
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: #f7f9fa; /* 匹配原图中的浅灰色背景 */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  text-decoration: none; /* 去除 a 标签的默认下划线 */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

/* 卡片悬停特效：整体上浮并加深阴影 */
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* --- 顶部图片区域 --- */
.blog-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; /* 保持标准的宽屏比例 */
  overflow: hidden;
  background-color: #e0e0e0;
}

.blog-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 图片悬停特效：微微放大 */
.blog-card:hover .blog-img-wrapper img {
  transform: scale(1.05);
}

/* --- 底部文字信息区域 --- */
.blog-info {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 让内容区自动填满剩余空间 */
}

/* 博客标题 */
/* 分类标签 */
.blog-tag {
  display: inline-block;
  align-self: flex-start;
  background: rgba(255,140,0,0.1);
  color: #ff8c00;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.blog-title {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;
  margin: 0 0 12px 0;
  text-transform: uppercase;

  /* 如果标题过长，强制显示为2行并用省略号结尾 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片悬停时，标题颜色可以稍微变化增加互动感 (可选) */
.blog-card:hover .blog-title {
  color: #ff8c00;
}

/* 摘要 */
.blog-excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: #767676;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 博客发布日期 */
.blog-date {
  font-size: 13px;
  color: #767676;
  font-weight: 500;
  margin-top: auto; /* 将日期自动推到卡片最底部 */
}

/* --- Community Block / Editorial Note --- */
.blog-community-block,
.blog-editorial-note {
  margin-top: 32px;
  padding: 28px 26px;
  background: #fdfdfd;
  border: 1px solid #eeeeee;
  border-left: 3px solid #ff8c00;
  border-radius: 10px;
}

.blog-block-title {
  font-size: 18px;
  font-weight: 700;
  color: #333333;
  margin: 0 0 10px;
}

.blog-block-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: #666666;
  margin: 0 0 16px;
}

.blog-editorial-note .blog-block-desc {
  margin-bottom: 0;
}

/* ==========================================
   响应式适配 (适配平板与手机)
   ========================================== */

@media (max-width: 992px) {
  /* 平板尺寸：切换为 2 列 */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  /* 小屏手机：保持 2 列，标题字号与内边距缩小 */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .blog-main-title {
    font-size: 22px;
  }
  .blog-info {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  /* 超小屏手机：切换为 1 列，卡片图文才有足够空间显示 */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ==========================================
   Blog Post Article Template (single post)
   ========================================== */
.blog-post-container {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 24px;
  background-color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

.blog-post-inner {
  width: 100%;
}

.blog-post-breadcrumb {
  font-size: 12.5px;
  color: #888888;
  margin-bottom: 18px;
}

.blog-post-breadcrumb a {
  color: #888888;
  text-decoration: none;
}

.blog-post-breadcrumb a:hover {
  color: #ff8c00;
}

.blog-post-category {
  display: inline-block;
  background: rgba(255, 140, 0, 0.1);
  color: #ff8c00;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.blog-post-title {
  font-size: 30px;
  font-weight: 800;
  color: #111111;
  line-height: 1.3;
  margin: 0 0 18px;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eeeeee;
}

.blog-post-avatar-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd166, #ff8c00);
  color: #1a1108;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.blog-post-meta-text {
  font-size: 13px;
  color: #767676;
  line-height: 1.5;
}

.blog-post-meta-text strong {
  color: #333333;
  font-weight: 700;
}

.blog-post-meta-dot {
  margin: 0 6px;
}

/* --- Disclaimer line (lighter variant, no box) --- */
.blog-post-disclaimer-line {
  font-size: 13px;
  font-style: italic;
  color: #888888;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eeeeee;
}

.blog-post-disclaimer-line a {
  color: #ff8c00;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}

.blog-post-disclaimer-line a:hover {
  text-decoration: underline;
}

/* --- Inline callout link (routes to funnel pages) --- */
.blog-post-callout {
  display: block;
  background: rgba(255 140 0);
  border: 1px solid rgba(255, 140, 0, 0.25);
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ff8c00;
  text-decoration: none;
  margin: 0 0 20px;
  transition: background 0.2s ease;
}

.blog-post-callout:hover {
  background: rgba(255, 140, 0, 0.14);
  text-decoration: none;
}

/* --- Disclaimer box --- */
.blog-post-disclaimer {
  background: #fdf6ec;
  border: 1px solid rgba(255, 140, 0, 0.3);
  border-left: 4px solid #ff8c00;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 28px;
}

.blog-post-disclaimer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #7a5c2e;
  font-style: italic;
}

/* --- Article body typography --- */
.blog-post-body h2 {
  font-size: 21px;
  font-weight: 800;
  color: #111111;
  margin: 36px 0 14px;
}

.blog-post-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #222222;
  margin: 22px 0 8px;
}

.blog-post-body p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #444444;
  margin: 0 0 16px;
}

.blog-post-body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.blog-post-body li {
  font-size: 14.5px;
  line-height: 1.75;
  color: #444444;
  margin-bottom: 8px;
}

.blog-post-body strong {
  color: #222222;
}

.blog-post-body a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.blog-post-body a:hover {
  text-decoration: underline;
}

/* --- CTA box (commercial section) --- */
.blog-post-cta-box {
  background: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 24px 26px;
  margin: 0 0 8px;
}

.blog-post-cta-box p {
  margin-bottom: 18px;
}

/* --- FAQ accordion --- */
.blog-post-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.blog-post-faq details {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 14px 18px;
  background: #fdfdfd;
}

.blog-post-faq details[open] {
  border-color: rgba(255, 140, 0, 0.35);
}

.blog-post-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: #111111;
  list-style: none;
  position: relative;
  padding-right: 26px;
}

.blog-post-faq summary::-webkit-details-marker {
  display: none;
}

.blog-post-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 20px;
  font-weight: 600;
  color: #ff8c00;
  transition: transform 0.2s ease;
}

.blog-post-faq details[open] summary::after {
  transform: rotate(45deg);
}

.blog-post-faq p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: #555555;
}

/* --- Author bio box --- */
.blog-post-author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 22px 24px;
  background: #fdfdfd;
  border: 1px solid #eeeeee;
  border-radius: 10px;
}

.blog-post-author-avatar-initials {
  width: 52px;
  height: 52px;
  font-size: 16px;
}

.blog-post-author-box h4 {
  margin: 0 0 4px;
  font-size: 14.5px;
  color: #111111;
}

.blog-post-author-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #666666;
}

.blog-post-back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #ff8c00;
  text-decoration: none;
}

.blog-post-back-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .blog-post-title {
    font-size: 23px;
  }

  .blog-post-body h2 {
    font-size: 18px;
  }

  .blog-post-container {
    padding: 18px;
  }
}

/* ==========================================
   GLOBAL WRAPPER & VARIABLES
   ========================================== */
.slots-page-wrapper {
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fcfcfc; /* Light bright background */
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 40px;
}

/* ==========================================
   1. HERO BANNER
   ========================================== */
.slots-hero-banner {
  position: relative;
  width: 100%;
  height: 256px;
  background-color: #eaeaea; /* Fallback */
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.slots-hero-banner .banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slots-hero-banner .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 5%;
}

.slots-hero-banner .banner-title {
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.25;
  max-width: 560px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  margin: 0;
}


/* ==========================================
   2. RECOMMENDED GAMES
   ========================================== */
.recommended-section {
  width: 100%;
}

.section-title {
  color: #ff8c00; /* Orange theme text */
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.recommended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

/* ==========================================
   GAME CARD STYLES (Reusable)
   ========================================== */
.slot-card {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  cursor: pointer;
}

.slot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255, 140, 0, 0.15);
  border-color: rgba(255, 140, 0, 0.3);
}

.slot-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f5f5f5; /* Placeholder color before img loads */
}

.slot-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RTP Floating Badge */
.rtp-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ff9d1f, #ff7a00);
  color: #ffffff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border: 2px solid #ffffff;
}

.rtp-badge .rtp-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.rtp-badge .rtp-value {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.slot-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
}

.slot-title {
  font-size: 12px;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: center;
  padding: 0 4px;
}

.icon-btn {
  background: none;
  border: none;
  color: #a0a0a0;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.slot-card:hover .icon-btn {
  color: #ff8c00; /* Icons turn orange on card hover */
}

/* ==========================================
   3. MAIN CONTENT (Sidebar + Games)
   ========================================== */
.slots-main-content {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

/* --- SIDEBAR --- */
.provider-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 471px; /* ~5 buttons (80px) + gaps (12px) visible by default */
  overflow-y: auto;
  padding-right: 4px;
}

.provider-sidebar::-webkit-scrollbar {
  width: 6px;
}

.provider-sidebar::-webkit-scrollbar-thumb {
  background: #e65c00;
  border-radius: 3px;
}

/* --- 左侧侧边栏按钮 (专为白色 Logo/字体定制的橙色渐变) --- */
.provider-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  flex-shrink: 0;
  
  /* 默认状态：亮橙色到深橙色，完美衬托白色内容 */
  background: linear-gradient(135deg, #ff9d1f 0%, #e65c00 100%);
  border: 1px solid #d85700;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
}

.provider-btn:hover {
  /* 悬停状态：颜色变得更亮更耀眼 */
  background: linear-gradient(135deg, #ffac3f 0%, #ff6a00 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 140, 0, 0.35);
}

.provider-btn.active {
  /* 激活状态：加上深色内阴影，做出“按下去”的真实质感 */
  background: linear-gradient(135deg, #e65c00 0%, #cc5200 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
  border-color: #b34700;
}

.provider-btn img {
  max-width: 60%;
  max-height: 35px;
  object-fit: contain;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
  /* 关键：给白色 Logo 加上微微的黑色阴影，让它立刻从背景中浮现出来，极具质感 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.provider-btn span {
  font-size: 12px;
  font-weight: 700;
  /* 字体默认直接设为纯白 */
  color: #ffffff; 
  position: relative;
  z-index: 2;
  /* 给白色字体也加上一点文字阴影，保证清晰度 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.provider-btn.active span {
  /* 激活状态下，文字可以微微发亮 */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Hot Corner Ribbon */
.hot-ribbon {
  position: absolute;
  top: 10px;
  left: -26px;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 4px 28px;
  transform: rotate(-45deg);
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- RIGHT AREA (Filters) --- */
.slots-games-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.slots-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  flex-wrap: wrap;
  gap: 16px;
}

.filter-tabs {
  display: flex;
  gap: 4px;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #777777;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: #ff8c00;
  background-color: #fffaf0;
}

.tab-btn.active {
  background-color: #ff8c00;
  color: #ffffff;
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sort-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555555;
}

.sort-box select {
  padding: 8px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background-color: #ffffff;
  outline: none;
  font-size: 13px;
  color: #333333;
  cursor: pointer;
}

.sort-box select:focus {
  border-color: #ff8c00;
}

.search-box {
  position: relative;
}

.search-box input {
  padding: 8px 30px 8px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  background-color: #f5f5f5;
  outline: none;
  font-size: 13px;
  width: 200px;
  transition: all 0.2s;
}

.search-box input:focus {
  background-color: #ffffff;
  border-color: #ff8c00;
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999999;
  font-size: 12px;
  pointer-events: none;
}

/* --- MAIN GAMES GRID --- */
.main-games-grid {
    margin-right:12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 992px) {
  .slots-main-content {
    grid-template-columns: 1fr; /* Sidebar moves to top */
  }
  
  .provider-sidebar {
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: none;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 12px 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 12px;
    scrollbar-width: none;
  }

  .provider-sidebar::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .provider-btn {
    min-width: 100px;
    height: 64px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .provider-btn img {
    max-width: 82%;
    max-height: 44px;
    margin-bottom: 0;
  }

  .hot-ribbon {
    top: 8px;
    left: -24px;
    font-size: 8px;
    padding: 3px 24px;
  }
}

@media (max-width: 480px) {
  .provider-btn {
    min-width: 86px;
    height: 56px;
  }

  .provider-btn img {
    max-width: 85%;
    max-height: 38px;
  }
}

@media (max-width: 768px) {
  .slots-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .search-box input {
    width: 140px;
  }
}

/* =========================================
   SPORTSBOOK 独立页面布局 (添加 sb- 前缀防冲突)
========================================= */

.sb-wrapper {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #f8f9fa;
}

/* =========================================
   1. 上方 Banner
========================================= */
.sb-hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 380px;
    border-radius: 20px;
    padding: 50px 60px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.sb-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% center; /* 控制图片往右移动的参数 */
    z-index: 1;
}

.sb-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0.38) 48%, rgba(10, 8, 6, 0) 78%);
}

.sb-banner-text {
    position: relative;
    z-index: 3;
    max-width: 45%;
    color: #ffffff;
}

.sb-banner-text h1 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.sb-banner-text p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.sb-btn-play {
    background: #ffffff;
    color: #ff5722;
    padding: 14px 35px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.sb-btn-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.sb-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
    margin: 2px 17px;
}

.slots-page-title {
    margin-bottom: 4px;
}

.sb-intro-text a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.sb-intro-text a:hover {
    text-decoration: underline;
}

/* =========================================
   2. 下方 Sport Game 卡片区域 (纯图片)
========================================= */
.sb-providers-grid {
    display: grid;
    /* 自动排版：最小宽度160px，自适应拉伸，保持一排多个 */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
}

.sb-provider-card {
    display: block; /* 改为 a 标签的块级显示 */
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 给图片加一个淡淡的阴影，让它看起来立体一点 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 鼠标移入时的浮动与发光效果 (保持橙色主题) */
.sb-provider-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.3);
}

.sb-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 确保图片完整铺满卡片区域 */
}

/* ==========================================================================
   全站移动端响应式总规则 (GLOBAL MOBILE RESPONSIVE — applies to every page)
   ========================================================================== */

img {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

/* --- Sidebar off-canvas drawer + backdrop (controlled by .is-open / .is-visible via JS) --- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 992px) {
    /* --- Sidebar becomes a slide-in drawer instead of a fixed column --- */
    .app-container {
        display: block;
    }

    main {
        width: 100%;
    }

    .site-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        max-width: 80vw;
        z-index: 1100;
        padding: 80px 10px 20px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    .site-sidebar.is-open {
        transform: translateX(0);
    }
}

/* --- Desktop: menu-toggle collapses the sidebar column instead of sliding a drawer --- */
@media (min-width: 993px) {
    .site-sidebar.is-collapsed {
        display: none;
    }
}

/* --- Header shrinks and wraps gracefully on small phones --- */
@media (max-width: 480px) {
    header {
        padding: 8px 12px;
    }

    .left-header {
        gap: 8px;
    }

    .logo {
        height: 40px;
    }

    .right-header {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .lang-selector {
        display: none;
    }

    .btn {
        padding: 6px 14px;
        font-size: 13px;
    }

    .menu-toggle {
        font-size: 22px;
    }
}

/* --- Home page hero banner (index.html) scales down instead of staying huge --- */
@media (max-width: 768px) {
    main {
        padding: 16px;
        gap: 20px;
    }

    .slider-container {
        max-height: none;
    }

    .banner-img {
        height: 309px;
    }
}

@media (max-width: 480px) {
    .banner-img {
        height: 155px;
    }
}

/* --- Games landing hero banner (games/index.html) --- */
@media (max-width: 768px) {
    .games-hero-banner {
        height: auto;
        padding: 20px 5%;
    }

    .games-hero-banner .banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .games-hero-banner .banner-text p {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .games-hero-banner .banner-text h1 {
        font-size: 1.15rem;
    }

    .games-hero-banner .btn-play-now {
        padding: 0.45rem 1rem;
        font-size: 0.8rem;
    }
}

/* --- Slots / Fishing hero banner --- */
@media (max-width: 768px) {
    .slots-hero-banner {
        height: 180px;
    }

    .slots-hero-banner .banner-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .slots-hero-banner {
        height: 77px;
    }

    .slots-hero-banner .banner-title {
        font-size: 15px;
    }
}

/* --- Games grid always stays 2-per-row on mobile (slots & fishing pages) --- */
@media (max-width: 768px) {
    .main-games-grid,
    .recommended-grid {
        margin-left:12px;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px;
    }
}

/* --- Sportsbook page (sportsbook/index.html) --- */
@media (max-width: 900px) {
    .sb-hero-banner {
        min-height: 300px;
        padding: 30px 24px;
        border-radius: 14px;
    }

    .sb-banner-text {
        max-width: 70%;
    }

    .sb-banner-text h1 {
        font-size: 2rem;
    }

    .sb-banner-text p {
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
    .sb-wrapper {
        padding: 14px;
        gap: 20px;
    }

    .sb-hero-banner {
        min-height: 260px;
        padding: 24px 18px;
        align-items: flex-end;
    }

    .sb-banner-text {
        max-width: 100%;
    }

    .sb-banner-text h1 {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .sb-banner-text p {
        font-size: 0.85rem;
        margin-bottom: 16px;
    }

    .sb-btn-play {
        padding: 10px 22px;
        font-size: 0.95rem;
    }

    .sb-providers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 380px) {
    .sb-providers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* --- Poker page (poker/index.html) --- */
@media (max-width: 768px) {
    .poker-bg-holder {
        height: 280px;
        margin: 1.2rem auto;
    }

    .poker-content h1 {
        font-size: 1.8rem;
    }

    .poker-content p {
        font-size: 1rem;
    }
    
    .badge-img.bottom-right{
        right: -70px;
    }

    .badge-img.top-left{
        left: -80px;
    }
}

@media (max-width: 480px) {
    .poker-bg-holder {
        height: 220px;
    }

    .poker-content h1 {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .poker-content p {
        font-size: 0.85rem;
    }
}

/* --- Footer payment icon grid on very small phones --- */
@media (max-width: 420px) {
    .payment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Welcome Bonus 子页面 (bonus/welcome-bonus/index.html)
   ========================================================================== */

.welcome-bonus-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* --- 顶部三张 Banner (自动滚动 Slider) --- */
.welcome-bonus-slider {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    background-color: #f5f5f5;
}

.welcome-banner-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
}

.welcome-banner-item {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 16 / 6;
}

.welcome-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 左右箭头 */
.welcome-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 2;
}

.welcome-slider-arrow:hover {
    background: rgba(255,140,0,0.85);
}

.welcome-slider-arrow.prev { left: 14px; }
.welcome-slider-arrow.next { right: 14px; }

/* 分页圆点 */
.welcome-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.welcome-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.welcome-slider-dot.active {
    background: #ff8c00;
    width: 20px;
    border-radius: 4px;
}

/* --- 下方 SEO 内容区 --- */
.welcome-bonus-content {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.welcome-content-title {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 16px;
    line-height: 1.3;
}

.welcome-content-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin: 28px 0 12px;
    position: relative;
    padding-left: 12px;
}

.welcome-content-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    height: 16px;
    width: 4px;
    background-color: #ff8c00;
    border-radius: 2px;
}

.welcome-bonus-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
}

.welcome-bonus-content p + p {
    margin-top: 12px;
}

.welcome-content-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #555555;
}

.welcome-bonus-content a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.welcome-bonus-content a:hover {
    text-decoration: underline;
}

/* --- 响应式适配 --- */
@media (max-width: 900px) {
    .welcome-banner-item {
        aspect-ratio: 16 / 9;
        height:301px;
    }
}



@media (max-width: 576px) {
    .welcome-banner-item {
        aspect-ratio: 4 / 3;
        height:163px;

    }
    .welcome-slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    .welcome-bonus-content {
        padding: 22px 18px;
    }
    .welcome-content-title {
        font-size: 20px;
    }
    .welcome-content-subtitle {
        font-size: 16px;
    }
}

@media (max-width:375px){
    .welcome-banner-item{
        height:143px;
    }
}

@media (max-width:320px){
    .welcome-banner-item{
        height:120px;
    }
}

/* ==========================================================================
   Register Now Promo Section (homepage, above Featured On)
   ========================================================================== */

.register-promo-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.register-promo-title {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
}

.register-promo-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* --- 左侧：自动滚动 Slider (约占 65%) --- */
.register-promo-slider {
    position: relative;
    flex: 1.6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #f0f0f0;
    height: 263px;
}

.register-promo-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.register-promo-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.register-promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.register-promo-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.register-promo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.register-promo-dot.active {
    background: #ff8c00;
    width: 20px;
    border-radius: 4px;
}

/* --- 右侧：单张静态 Banner (约占 35%) --- */
.register-promo-side {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #f0f0f0;
    height: 263px;
}

.register-promo-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 响应式适配 --- */
@media (max-width: 900px) {
    .register-promo-row {
        flex-direction: column;
    }
    .register-promo-slider,
    .register-promo-side {
        height: 240px;
    }
}

@media (max-width: 480px) {
    .register-promo-slider,
    .register-promo-side {
        height: 180px;
    }
}

/* ==========================================================================
   Homepage Content Build-Out (index.html) — Hero overlay, trust strip,
   reusable "home-*" section system, tables, FAQ accordion, sticky elements
   ========================================================================== */

/* --- Hero Banner Overlay (H1 + CTA on left of banner) --- */
.slider-container {
    position: relative;
}

.slider-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,8,6,0.65) 0%, rgba(10,8,6,0.25) 55%, transparent 82%);
    z-index: 2;
    pointer-events: none;
}

.hero-overlay-content {
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    max-width: 52%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-h1 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.28;
    color: #ffffff;
    text-shadow: 0 3px 12px rgba(0,0,0,0.55);
    margin: 0;
}

.hero-subheadline {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    max-width: 480px;
    margin: 0;
}

/* --- Mobile-only copy of the subheadline/CTA, rendered below the banner instead of overlaid on it --- */
.hero-below-banner {
    display: none;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* --- Reusable "home-*" Buttons --- */
.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.home-btn-primary {
    background: linear-gradient(135deg, #ffd166, #ff8c00);
    color: #1a1108;
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.35);
}

.home-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(255, 140, 0, 0.45);
}

.home-btn-outline {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.home-btn-outline:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.home-btn-dark {
    border-color: #ff8c00;
    color: #ff8c00;
}

.home-btn-dark:hover {
    background: rgba(255,140,0,0.08);
}

/* --- Trust Strip (4 cards directly below hero) --- */
.trust-strip-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
}

.trust-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-strip-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255,140,0,0.1);
}

.trust-strip-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.trust-strip-text {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    line-height: 1.4;
}

/* --- Generic "home-section" white card wrapper --- */
.home-section {
    width: 100%;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.home-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 14px;
    position: relative;
    padding-left: 14px;
}

.home-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    height: 18px;
    width: 4px;
    background-color: #ff8c00;
    border-radius: 2px;
}

.home-section-intro {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
    margin: 0 0 14px;
}

.home-section-intro a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.home-section-intro a:hover {
    text-decoration: underline;
}

.home-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 10px 0 8px;
}

.home-display-heading {
    font-size: 22px;
    font-weight: 800;
    color: #ff7a00;
    margin: 0 0 22px;
}

/* --- 4-Card Grid (Why Tab66 / Casino Games) --- */
.home-card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 6px;
}

.home-info-card {
    background: #fdfdfd;
    border: 1px solid #eeeeee;
    border-left: 3px solid #ff8c00;
    border-radius: 10px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.home-info-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin: 0;
}

.home-info-card-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #666666;
    flex: 1;
    margin: 0;
}

.home-info-card-link {
    font-size: 13px;
    font-weight: 700;
    color: #ff8c00;
    text-decoration: none;
    margin-top: 2px;
}

.home-info-card-link:hover {
    text-decoration: underline;
}

.home-info-card-img {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.home-info-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Bullet Lists --- */
.home-bullet-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0 16px;
    padding: 0;
}

.home-bullet-list li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
}

.home-bullet-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #ff8c00;
    font-weight: 700;
}

/* --- Welcome Bonus Tier Blocks --- */
.home-tier-block {
    margin-bottom: 22px;
}

.home-tier-block:last-of-type {
    margin-bottom: 20px;
}

.home-tier-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.home-tier-item {
    font-size: 13.5px;
    line-height: 1.65;
    color: #555555;
    margin: 0 0 8px;
}

.home-tier-item strong {
    color: #333333;
}

/* --- Tables (Deposit/Withdrawal, VIP Ladder) --- */
.home-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 14px 0;
    border-radius: 8px;
}

.home-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 480px;
}

.home-table th {
    background: linear-gradient(135deg, #ff9d1f, #ff7a00);
    color: #ffffff;
    font-weight: 700;
    text-align: left;
    padding: 11px 14px;
    white-space: nowrap;
}

.home-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #555555;
}

.home-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.home-table tbody tr:hover {
    background: rgba(255,140,0,0.06);
}

/* --- 3-Step Sign Up Row --- */
.home-step-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 6px;
}

.home-step-item {
    background: #fdfdfd;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 26px 18px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-step-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.home-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9d1f, #ff7a00);
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 12px;
    box-shadow: 0 6px 14px rgba(255,140,0,0.3);
}

.home-step-title {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 6px;
}

.home-step-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* --- FAQ Accordion --- */
.home-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.home-faq-item {
    border: 1px solid #eaeaea;
    border-radius: 10px;
    overflow: hidden;
}

.home-faq-question {
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #fdfdfd;
    border: none;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    cursor: pointer;
    transition: background 0.2s ease;
}

.home-faq-item:hover .home-faq-question {
    background: #fff6ea;
}

.home-faq-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #ff8c00;
    transition: transform 0.25s ease;
}

.home-faq-item.open .home-faq-caret {
    transform: rotate(180deg);
}

.home-faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
    transition: max-height 0.3s ease;
}

.home-faq-item.open .home-faq-answer {
    max-height: 320px;
}

.home-faq-answer p {
    padding: 0 18px 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}


/* --- Scroll-Triggered Image Popup (mobile only) --- */
.mobile-scroll-popup {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 54px;
    transform: translateX(-50%) translateY(20px);
    width: 309px;
    max-width: 92vw;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.mobile-scroll-popup.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.mobile-scroll-popup-link {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
}

.mobile-scroll-popup-img {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-scroll-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 8px 12px 14px;
}

.mobile-scroll-popup-headline {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    color: #111111;
}

.mobile-scroll-popup-btn {
    padding: 8px 14px;
    font-size: 12px;
}

.mobile-scroll-popup-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #111111;
    color: #ffffff;
    border: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

@media (max-width: 900px) {
    .mobile-scroll-popup {
        display: block;
    }
}


/* --- Exit-Intent Popup (desktop only) --- */
.exit-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,8,6,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.exit-popup-overlay.visible {
    display: flex;
}

.exit-popup-box {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.exit-popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #999999;
    cursor: pointer;
}

.exit-popup-close:hover {
    color: #333333;
}

.exit-popup-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #ff8c00;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

.exit-popup-title {
    font-size: 22px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 10px;
}

.exit-popup-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin: 0 0 20px;
}

.exit-popup-btn {
    width: 100%;
}


@media (max-width: 900px) {
    .exit-popup-overlay {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .home-card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-strip-section {
        grid-template-columns: repeat(2, 1fr);
    }
    .home-step-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hero-overlay-content {
        max-width: 94%;
        left: 3%;
        align-items: stretch;
    }
    .hero-h1 {
        font-size: 15px;
    }
    /* The banner is too short at this width to also hold the subheadline + CTA —
       hide the overlaid copy and show the below-banner copy instead. */
    .hero-overlay-content .hero-subheadline,
    .hero-overlay-content .hero-cta-row {
        display: none;
    }
    .hero-below-banner {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px 4px 0;
    }
    .hero-below-banner .hero-subheadline {
        font-size: 0.9rem;
        color: #555555;
        text-shadow: none;
        max-width: none;
    }
    .hero-below-banner .hero-cta-row {
        justify-content: center;
        text-align: center;
    }
    .home-card-grid-4 {
        grid-template-columns: 1fr;
    }
    .trust-strip-section {
        grid-template-columns: 1fr;
    }
    .home-section {
        padding: 20px;
    }
}

@media (max-width: 376px) {
    .hero-h1 {
        font-size: 14px;
    }
    .home-btn {
        font-size: 13px;
    }

}

@media (max-width: 321px) {
    .hero-h1 {
        font-size: 14px;
    }
    .home-btn {
        font-size: 9px;
    }

}

/* ==========================================================================
   /bonus/ Promotions Hub — SEO content page
   ========================================================================== */

.bonus-hub-content {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.bonus-hub-title {
    font-size: 26px;
    font-weight: 700;
    color: #111111;
    margin: 2px 12px;
    line-height: 1.3;
}

.bonus-hub-intro {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
    margin-bottom: 20px;
}


.bonus-hub-h2 {
    font-size: 19px;
    font-weight: 700;
    color: #333333;
    margin: 30px 0 12px;
    position: relative;
    padding-left: 12px;
}

.bonus-hub-h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    height: 17px;
    width: 4px;
    background-color: #ff8c00;
    border-radius: 2px;
}

.bonus-hub-h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: #333333;
    margin: 18px 0 8px;
}

.bonus-hub-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
}

.bonus-hub-content p + p {
    margin-top: 10px;
}

.bonus-hub-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #555555;
    margin-top: 10px;
}

.bonus-hub-list li strong {
    color: #111111;
}

.bonus-hub-content a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.bonus-hub-content a:hover {
    text-decoration: underline;
}

/* --- Overview table --- */
.bonus-hub-table-wrap {
    overflow-x: auto;
    margin: 8px 0 10px;
    border-radius: 12px;
    border: 1px solid #eaeaea;
}

.bonus-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 560px;
}

.bonus-hub-table thead th {
    background: linear-gradient(135deg, #eb9c25, #d8581d);
    color: #ffffff;
    text-align: left;
    padding: 12px 14px;
    font-weight: 700;
    white-space: nowrap;
}

.bonus-hub-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #555555;
    vertical-align: top;
}

.bonus-hub-table tbody tr:last-child td {
    border-bottom: none;
}

.bonus-hub-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.bonus-hub-table td strong {
    color: #111111;
}

.bonus-hub-table-note {
    font-size: 13px;
    color: #888888;
    margin-bottom: 12px;
}

/* --- Seasonal campaign grid reuses .promotion-grid / .promo-card --- */
.bonus-hub-campaign-grid {
    margin-top: 8px;
}

.bonus-hub-campaign-grid .promo-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- FAQ accordion --- */
.bonus-hub-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.bonus-hub-faq details {
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 14px 18px;
    background: #fdfdfd;
}

.bonus-hub-faq details[open] {
    border-color: rgba(255, 140, 0, 0.35);
}

.bonus-hub-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: #111111;
    list-style: none;
    position: relative;
    padding-right: 26px;
}

.bonus-hub-faq summary::-webkit-details-marker {
    display: none;
}

.bonus-hub-faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 20px;
    font-weight: 600;
    color: #ff8c00;
    transition: transform 0.2s ease;
}

.bonus-hub-faq details[open] summary::after {
    transform: rotate(45deg);
}

.bonus-hub-faq p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
}

@media (max-width: 576px) {
    .bonus-hub-content {
        padding: 22px 18px;
    }
    .bonus-hub-title {
        font-size: 21px;
        margin:0px;
    }
    .bonus-hub-h2 {
        font-size: 17px;
    }
}

/* ==========================================================================
   /bonus/welcome-bonus/ — breadcrumb + extra child-page components
   ========================================================================== */

.breadcrumb-nav {
    font-size: 13px;
    color: #888888;
    margin: 14px 2px 0;
}

.breadcrumb-nav a {
    color: #888888;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.breadcrumb-nav a:hover {
    color: #ff8c00;
}

.breadcrumb-sep {
    margin: 0 8px;
    color: #cccccc;
}

.breadcrumb-current {
    color: #333333;
    font-weight: 600;
}

.welcome-content-h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: #333333;
    margin: 18px 0 8px;
}

.welcome-content-linkbar {
    font-size: 13.5px;
    color: #767676;
    background: #f9fafb;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px !important;
}

/* ==========================================================================
   /banking/ — Hero H1 overlay + SEO content cards
   ========================================================================== */

.banking-hero-banner-container {
    position: relative;
}

.banking-hero-banner-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0.42) 42%, rgba(10, 8, 6, 0) 72%);
    z-index: 1;
}

.banking-hero-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 540px;
    padding: 0 46px;
}

.banking-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 14px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.banking-hero-intro {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.banking-content-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(255, 140, 0, 0.05);
}

.banking-content-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
}

.banking-content-card p + p {
    margin-top: 10px;
}

.banking-content-card a {
    font-weight: 600;
    text-decoration: none;
}

.banking-content-card a:hover {
    text-decoration: underline;
}

.banking-payment-section .banking-payment-header {
    margin-top: 20px;
}

@media (max-width: 900px) {
    .banking-hero-title {
        font-size: 24px;
    }
    .banking-hero-overlay {
        max-width: 100%;
        padding: 0 26px;
    }
}

@media (max-width: 768px) {
    .banking-hero-overlay {
        padding: 0 20px;
    }
    .banking-hero-title {
        font-size: 19px;
        margin-bottom: 6px;
    }
    .banking-hero-intro {
        display: none;
    }
    .banking-content-card {
        padding: 20px 18px;
    }
}

/* ==========================================================================
   第七部分：Mobile 页面 CTA 按钮样式
   ========================================================================== */

.banking-hero-intro-below {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin: 11px 12px;

}

.mobile-cta-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 28px;
    background-color: #ff8c00;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}

.mobile-cta-btn:hover {
    background-color: #e07b00;
    text-decoration: none;
}

@media (min-width:2560px) {
    .slider-container{
        max-height:595px ;
    }
    .banner-img{
        height:849px;
    }
    .hero-media-section{
        height:597px;
    }
    .register-promo-slider{
        height:511px;
    }
    .register-promo-side {
        height:511px;
    }
    .live-casino-hero-banner {
        height:609px;
    }
    .slots-hero-banner {
        height:388px;
    }

}

/* ==========================================================================
   Responsible Gaming Page
   ========================================================================== */

.rg-page {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.rg-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rg-h1 {
    font-size: 30px;
    font-weight: 800;
    color: #111111;
}

.rg-h2 {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    position: relative;
    padding-left: 12px;
    margin-bottom: 4px;
}

.rg-h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    height: 18px;
    width: 4px;
    background-color: #ff8c00;
    border-radius: 2px;
}

.rg-h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin-top: 10px;
}

.rg-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rg-intro p,
.rg-section p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
}

.rg-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 4px;
}

.rg-list li {
    font-size: 14.5px;
    line-height: 1.7;
    color: #555555;
    padding-left: 18px;
    position: relative;
}

.rg-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff8c00;
}

.rg-list li strong {
    color: #333333;
}

.rg-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.rg-tools-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rg-tools-table thead th {
    background-color: #ff8c00;
    color: #ffffff;
    text-align: left;
    padding: 12px 16px;
    font-weight: 700;
    white-space: nowrap;
}

.rg-tools-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid #eaeaea;
    color: #555555;
}

.rg-tools-table tbody td:first-child {
    font-weight: 700;
    color: #333333;
    white-space: nowrap;
}

.rg-tools-table tbody tr:hover {
    background-color: #fff8ef;
}

.rg-help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.rg-help-card {
    background: #fdfdfd;
    border: 1px solid #eeeeee;
    border-left: 3px solid #ff8c00;
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rg-help-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
}

.rg-help-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #767676;
}

.rg-help-contact {
    font-weight: 600;
    color: #333333 !important;
}

.rg-help-contact a {
    color: #ff8c00;
    text-decoration: none;
}

.rg-help-contact a:hover {
    text-decoration: underline;
}

.rg-commitment {
    background: linear-gradient(to right, #ffffff, #fff3e0);
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 22px 24px;
}

@media (max-width: 900px) {
    .rg-help-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .rg-tools-table thead {
        display: none;
    }
    .rg-tools-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 12px 16px;
        gap: 4px;
    }
    .rg-tools-table tbody td {
        border-top: none;
        padding: 2px 0;
    }
    .rg-tools-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: #333333;
    }
    .rg-tools-table tbody td:first-child::before {
        content: '';
    }
    .rg-tools-table tbody tr + tr {
        border-top: 1px solid #eaeaea;
    }
}

/* --- 局部安全重置 (绝对不使用星号 *) --- */
.tab66-subpage-wrapper,
.tab66-subpage-wrapper header,
.tab66-subpage-wrapper main,
.tab66-subpage-wrapper section,
.tab66-subpage-wrapper div,
.tab66-subpage-wrapper h1,
.tab66-subpage-wrapper h2,
.tab66-subpage-wrapper p,
.tab66-subpage-wrapper span,
.tab66-subpage-wrapper nav,
.tab66-subpage-wrapper a,
.tab66-subpage-wrapper img {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- 子页面整体大背景铺满 --- */
.tab66-subpage-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh; 
    /* 铺满整个子页面的蓝白柔和渐变色 */
    background: radial-gradient(circle at 80% 50%, #9bc2ff 0%, #d8e4fa 30%, #f4f7fc 70%);
    color: #333;
    overflow-x: hidden;
    padding-bottom: 50px;
}

/* --- 头部 & Logo (完全透明，直接应用整块大背景) --- */
.tab66-subpage-wrapper .tab-header {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; 
    box-shadow: none;
    z-index: 100;
}

.tab66-subpage-wrapper .logo-link {
    display: inline-block;
    line-height: 0;
}

.tab66-subpage-wrapper .logo-img {
    height: 70px; 
    width: auto;
    display: block;
}

/* --- 右侧导航栏 --- */
.tab66-subpage-wrapper .top-nav {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%); 
    display: flex;
    gap: 20px;
}

.tab66-subpage-wrapper .nav-link {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e3c87;
    text-transform: uppercase;
}

.tab66-subpage-wrapper .nav-link.text-orange {
    color: #f28220;
}

/* --- 主视觉文字区域 --- */
.tab66-subpage-wrapper .hero-section {
    text-align: center;
    margin-top: 80px;
    padding: 0 20px;
}

.tab66-subpage-wrapper .welcome-text {
    color: #f28220;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.tab66-subpage-wrapper .main-title {
    color: #213b86;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 25px;
}

.tab66-subpage-wrapper .description {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 500;
}

/* --- 国旗图标区域 --- */
.tab66-subpage-wrapper .flags-section {
    margin-top: 60px;
    padding: 0 20px;
}

.tab66-subpage-wrapper .flag-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.tab66-subpage-wrapper .flag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.tab66-subpage-wrapper .flag-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.tab66-subpage-wrapper .flag-circle {
    width: 90px;
    height: 90px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border: 4px solid #ffffff; 
    overflow: hidden; 
}

.tab66-subpage-wrapper .flag-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tab66-subpage-wrapper .country-name {
    font-weight: 700;
    color: #000;
    font-size: 1.05rem;
}

/* --- 响应式移动端适配 --- */
@media (max-width: 1024px) {
    .tab66-subpage-wrapper .flag-container {
        gap: 20px;
    }
    .tab66-subpage-wrapper .flag-circle {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 768px) {
    .tab66-subpage-wrapper .main-title { font-size: 2rem; }
    .tab66-subpage-wrapper .welcome-text { font-size: 2.5rem; }
    .tab66-subpage-wrapper .top-nav {
        position: static;
        justify-content: center;
        margin-top: 20px;
    }
}