/* ============================================================
   tt_clickza1 模板自定义补充样式（中文注释说明用途）
   模板源：138（CLICKZA 风格），本文件只放 OpenCart 页面适配的增量样式，
   模板自带样式在 /catalog/view/javascript/tt_clickza1/css/style.css
   ============================================================ */

/* ============ layer 弹窗（协议/支付弹窗）内容区域的排版 ============ */
.model-content {
    padding: 1.5rem;
    color: rgba(0, 0, 0, 0.9) !important;
    background: #fff;
}
.model-content img {
    max-width: 100%;
}

/* ============ 导航：Account 下拉菜单深色适配（138 未定义 bootstrap dropdown 样式） ============ */
.menu_head .dropdown-menu {
    background: #150035;
    border: 1px solid #9e4efc;
    border-radius: 5px;
    margin-top: 8px;
}
.menu_head .dropdown-item {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    padding: 8px 20px;
}
.menu_head .dropdown-item:hover {
    background: #9e4efc;
    color: #fff;
}

/* 移动端汉堡按钮图标：默认黑色在深色头部看不见 */
.menu_head .navbar-toggler {
    color: #fff;
    outline: 0;
}
.menu_head .navbar-toggler i {
    color: #ff39dc;
    font-size: 26px;
}

/* 移动端折叠菜单里的积分/登录/注册按钮换行间距 */
@media (max-width: 767px) {
    .main_menu > a {
        display: inline-block;
        margin: 8px 10px 0 0;
    }
}

/* ============ 内页页头条（/points、/recharge、信息页、成功页共用） ============ */
/* 138 导航是绝对定位悬浮在内容上，内页补顶部留白避免标题被导航盖住 */
.page-head-strip {
    background: linear-gradient(to right, #150035, #2b0152, #150035);
    padding: 150px 0 40px;
}
.page-head-strip h1 {
    color: #fff;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 44px;
    letter-spacing: 1px;
}

/* ============ 内页正文通用留白 ============ */
.page-body-pad {
    padding: 80px 0;
}

/* ============ 积分明细卡片与表格（/points 页） ============ */
.points-card {
    background: #150035;
    border: 1px solid #6428b4;
    border-radius: 8px;
    padding: 32px;
}
.points-card h3 {
    color: #fff;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 28px;
    margin-bottom: 24px;
}
/* 深色卡片下的表格文字颜色 */
.points-table {
    color: #fff;
    margin-bottom: 0;
    width: 100%;
}
.points-table thead th {
    color: #fdb125;
    border-bottom: 2px solid #6428b4;
    border-top: 0;
    font-weight: 700;
    white-space: nowrap;
}
.points-table td {
    color: #dcd3f5;
    border-color: #2f0b5e;
    vertical-align: middle;
}
.points-table .text-success {
    color: #35d07f !important;
}
.points-table .text-danger {
    color: #ff6b81 !important;
}
/* 明细列表滚动容器高度（配合 mescroll 上拉加载） */
.table-wrapper#mescroll {
    max-height: 560px;
    overflow-y: auto;
}

/* ============ 充值套餐选择卡片（/recharge 页） ============ */
/* 套餐卡片可点击，鼠标悬停提示 */
#pricing_part .pricing-item {
    cursor: pointer;
}
/* 卡片换行时行与行的垂直间距 = 左右栅格间距（15px+15px=30px），避免上下贴死 */
#pricing_part .price_main {
    margin-bottom: 30px;
}
/* 选中的套餐卡片：金色描边高亮，贴合 138 金色标题主视觉 */
#pricing_part .pricing-item.active {
    box-shadow: 0 0 0 3px #fdb125;
}
/* 套餐区副标题文字 */
#pricing_part .pricing-tip {
    color: #cfc6e8;
    font-size: 16px;
    margin-top: 14px;
}
/* 自定义金额输入框：在紫色卡片中保持可读 */
#pricing_part .customize-input {
    width: 80%;
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    border-radius: 0;
    padding: 15px 0;
}
#pricing_part .customize-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}
#pricing_part .customize-input:focus {
    outline: 0;
}
/* 数字输入框去掉浏览器自带的上下箭头，避免遮挡金额 */
#pricing_part .customize-input::-webkit-outer-spin-button,
#pricing_part .customize-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#pricing_part .customize-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============ 注册页同意条款复选框 / 表单下方提示文字 ============ */
/* 注意：上边距不能为负——上一个 .sign_input_inner 是 relative 定位且较高，
   负边距会把本行拉进它的版图导致点击被截走（复选框点不中、政策链接无响应） */
.signup-check {
    margin: 0 0 30px;
    color: #fff;
    font-size: 15px;
    position: relative;
    z-index: 1;
}
/* 复选框抵消 138 的 .signup_inner input{width:100%}，恢复与文字同行 */
.signup-check input[type="checkbox"] {
    width: auto;
    margin: 0 8px 0 0;
    padding: 0;
    border: 0;
    transform: scale(1.2);
    accent-color: #9e4efc;
    vertical-align: middle;
}
.signup-check label {
    vertical-align: middle;
    display: inline;
}
.signup-check a {
    color: #ff39dc;
}
.signup-tip {
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin-bottom: 10px;
}
.signup-tip a {
    color: #ff39dc;
}

/* ============ 通用按钮（.clm_btn 内的链接） ============ */
/* 138 原版的按钮样式只作用于 .banner_text a（首页 banner），充值页 Top Up、成功页 Continue
   也是 .clm_btn 结构但没样式会渲染成纯文本链接，这里按 138 按钮风格补齐 */
.clm_btn a {
    display: inline-block;
    padding: 15px 30px;
    background: #9e4efc;
    background: linear-gradient(to bottom, #9e4efc 0%, #570dc8 100%);
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    font-family: 'Anton', sans-serif;
    box-shadow: 0px 6px 0px 0px rgba(58, 0, 144, 1);
    text-shadow: 5px 5px 0px rgba(88, 19, 184, 0.8);
    text-decoration: none;
    cursor: pointer;
}
.clm_btn a:hover {
    background: #ff39dc;
    background: linear-gradient(to bottom, #ff39dc 0%, #a60084 100%);
    color: #ffffff;
    box-shadow: 0px 6px 0px 0px rgba(102, 19, 85, 1);
    text-shadow: 5px 5px 0px rgba(166, 0, 132, 0.8);
}

/* ============ 充值支付弹窗按钮文字垂直居中（payhtml #temp / layer 弹窗） ============ */
/* 138 的 style.css 给全站 .btn 强加 padding-bottom:25px（为 FAQ 手风琴按钮设计），
   支付弹窗按钮文字被顶高不居中，这里恢复对称内边距让文字垂直居中 */
.pay-model .modal-footer .btn,
#claim-recharge-discount.btn {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ============ 原生下拉框深色主题适配（全站） ============ */
/* 深色主题下 select 控件文字为浅色，但 Windows 原生下拉展开层是白色背景，浅字白底看不见；
   这里显式指定下拉选项文字为深色、背景白色，保证展开后可读（充值支付弹窗的年/月/账单地址等下拉） */
select.form-control option {
    color: #333;
    background: #fff;
}

/* ============ 页脚联系信息块（position7 / 模块76） ============ */
/* logo、公司名、地址、电话、邮箱各一行竖排，白色文字适配 138 深色页脚 */
.footer-contact-info {
    color: #fff;
    font-size: 16px;
    font-weight: 200;
    font-family: 'Nunito', sans-serif;
}
.footer-contact-info .footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}
.footer-contact-info .footer-logo img {
    max-height: 60px;
}
.footer-contact-info .company-name {
    color: #fff;
    font-weight: 600;
    padding-bottom: 14px;
}
.footer-contact-info .contact-line {
    color: #fff;
    padding-bottom: 8px;
}

/* ============ 页脚支付图标（Payment Method 列） ============ */
/* ptblock/icon.png 是 187x30 的支付方式图标条，放大到 40px 高（约1.3倍）保持清晰 */
.footer-pay-icons img {
    height: 40px;
    max-width: 100%;
    width: auto;
    display: block;
    margin-top: 15px;
}

/* ============ 信息页 / 成功页内容卡 ============ */
.content-card {
    background: #150035;
    border: 1px solid #6428b4;
    border-radius: 8px;
    padding: 40px;
}
.content-card-title {
    color: #fff;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 30px;
    margin-bottom: 24px;
}
/* 正文描述文字在深色背景下保持可读 */
.content-card-body {
    color: #dcd3f5;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 28px;
}
.content-card .clm_btn {
    display: inline-block;
}

/* ============ 首页游戏卡片（Top Games / 模块85） ============ */
/* 整卡可点击（移动端无 hover，直接点卡片进游戏） */
.game-card-link {
    display: block;
    color: inherit;
}
/* 游戏图标保持正方形不拉伸 */
.game-card-link .game_img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* 覆盖层：名称 + 激活积分 + Play Now 按钮（结构上整卡是 <a>，Play Now 用 span 模拟 138 的按钮样式） */
.game-card-link .game_overly {
    text-decoration: none;
}
.game-card-link .game_overly .game_activation {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fdb125;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
}
.game-card-link .game_overly h3 {
    padding-bottom: 0;
    top: 32%;
}
.game-card-link .game_overly .game_play_now {
    padding: 14px 30px;
    background: #9e4efc;
    background: linear-gradient(to bottom, #9e4efc 0%, #570dc8 100%);
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    font-family: 'Anton', sans-serif;
    box-shadow: 0px 6px 0px 0px rgba(58, 0, 144, 1);
    text-shadow: 5px 5px 0px rgba(88, 19, 184, 0.8);
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 72%;
    transform: translate(-50%, -50%);
}
.game-card-link:hover .game_overly {
    opacity: 1;
}
/* 触屏设备没有 hover：小屏下覆盖层常显，保证游戏可点进 */
@media (hover: none) {
    .game-card-link .game_overly {
        opacity: 1;
    }
}

/* ============ 首页 FAQ 手风琴（模块86，结构沿用 138 touna_left_inner） ============ */
/* 手风琴按钮内文字换行时保持左侧对齐 */
.touna_left_inner .card-header button span {
    display: inline-block;
    max-width: 92%;
    vertical-align: middle;
    line-height: 1.5;
}
/* 手风琴展开的正文在深色背景下可读 */
.touna_left_inner .card-body {
    color: #dcd3f5;
    font-size: 15px;
    line-height: 1.8;
}