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

/* ============ 通用页面骨架：内页小横幅 + 正文区间距 ============ */
.page-hero-mini {
    padding: 8.5rem 0 3rem;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(108, 92, 231, 0.16), transparent 55%),
        linear-gradient(180deg, #12121f, #0f0f1b);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.page-hero-mini .section-title {
    margin: 0.8rem 0 0;
}
.page-body-section {
    padding: 3.5rem 0 5rem;
    min-height: 40vh;
}

/* 正文窄容器：登录/表格等内容居中限宽（137 无 bootstrap 栅格，用自定宽度） */
.narrow-wrap {
    max-width: 860px;
    margin: 0 auto;
}
.narrow-wrap.narrow-wrap-sm {
    max-width: 520px;
}

/* ============ 深色内容卡片：信息页/成功页/积分明细通用 ============ */
.panel-card {
    position: relative;
    padding: 2.2rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: linear-gradient(160deg, #171728, #10101c);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
/* 后台富文本（information/success）在深色下保持可读 */
.panel-card .content-card-body {
    color: #c9c9de;
    font-size: 1rem;
    line-height: 1.8;
    word-wrap: break-word;
}
.panel-card .content-card-body a {
    color: #00f5d4;
    text-decoration: underline;
}
.panel-card .content-card-body img {
    max-width: 100%;
    height: auto;
}
.panel-card .content-card-body p {
    margin: 0 0 0.9rem;
}
.panel-card .clm_btn {
    margin-top: 1.6rem;
}

/* ============ 登录/注册/改密表单卡片（sign 系列类名沿用旧模板） ============ */
.auth-card .auth-tip {
    margin: 0 0 1.4rem;
    text-align: center;
    color: #8f8fb0;
}
.fast_input {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sign_input_inner {
    position: relative;
}
.sign_input_inner input {
    width: 100%;
    padding: 0.95rem 1.1rem 0.95rem 2.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #0c0c16;
    color: #e9e9f5;
    font-size: 1rem;
    font-family: 'Rajdhani', sans-serif;
    outline: 0;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.sign_input_inner input::placeholder {
    color: #6a6a8c;
}
.sign_input_inner input:focus {
    border-color: rgba(0, 245, 212, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.1);
}
/* 输入框左侧图标 */
.sign_input_inner i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #00f5d4;
    font-size: 0.95rem;
    pointer-events: none;
}
/* 提交按钮：复用 137 主按钮质感 */
.auth-submit {
    margin-top: 0.4rem;
    padding: 0.95rem 1.4rem;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #6c5ce7, #00f5d4);
    color: #0b0b14;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 245, 212, 0.25);
}
/* 表单下方提示（如“没有账号？去注册”） */
.signup-tip {
    margin: 0.2rem 0 0;
    text-align: center;
    color: #8f8fb0;
    font-size: 0.95rem;
}
.signup-tip a {
    color: #00f5d4;
}
/* 协议勾选行 */
.signup-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #a8a8c4;
    font-size: 0.95rem;
    line-height: 1.5;
}
.signup-check input {
    margin-top: 0.3rem;
    accent-color: #00f5d4;
    width: 1rem;
    height: 1rem;
    flex: none;
}
.signup-check a {
    color: #00f5d4;
    text-decoration: underline;
}

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

/* ============ 导航：logo 图片尺寸适配（137 原版为文字 logo） ============ */
.nav-logo-img {
    display: inline-flex;
    align-items: center;
}
.nav-logo-image {
    height: 42px;
    width: auto;
    display: block;
}
/* 登录后的积分按钮：比 Join Now 收敛的描边样式 */
.nav-cta-points {
    background: transparent;
    border: 1px solid rgba(0, 245, 212, 0.45);
    color: #00f5d4;
}
.nav-cta-points:hover {
    background: rgba(0, 245, 212, 0.12);
    transform: none;
}
/* 导航右侧按钮组：Login/Join Now 紧凑排列在一起
   （137 的 .nav-container 是 space-between，两个按钮作为独立子项会被撑到两边） */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* 移动端与 137 的 .nav-cta 隐藏断点（1024px）保持一致 */
@media (max-width: 1024px) {
    .nav-actions {
        display: none;
    }
}

/* 未登录的 Login 幽灵按钮 */
.nav-cta-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #d9d9ea;
}
.nav-cta-ghost:hover {
    border-color: #ff00c8;
    color: #ff00c8;
    transform: none;
}
/* 137 导航没有下拉组件：Account 下拉菜单补齐（hover / 获得焦点展开） */
.nav-account {
    position: relative;
}
.nav-account-toggle {
    cursor: pointer;
}
.nav-account-toggle i {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    transition: transform 0.25s;
}
.nav-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 185px;
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    border: 1px solid rgba(0, 245, 212, 0.35);
    border-radius: 10px;
    background: #12121f;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s, visibility 0.22s;
    z-index: 90;
}
.nav-account-menu li a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: #c9c9de !important;
    font-size: 0.95rem;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.04em;
    text-transform: none;
    transition: background 0.2s, color 0.2s;
}
.nav-account-menu li a:hover {
    background: rgba(0, 245, 212, 0.1);
    color: #00f5d4 !important;
}
.nav-account:hover .nav-account-menu,
.nav-account:focus-within .nav-account-menu {
    opacity: 1;
    visibility: visible;
}
.nav-account:hover .nav-account-toggle i {
    transform: rotate(180deg);
}

/* ============ 积分明细表格：深色配色 ============ */
.points-table {
    width: 100%;
    border-collapse: collapse;
    color: #c9c9de;
}
.points-table th {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(0, 245, 212, 0.35);
    color: #00f5d4;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.points-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.98rem;
}
/* 旧模板沿用下来的语义色类（积分增减） */
.text-success {
    color: #2bd98a !important;
}
.text-danger {
    color: #ff5c7a !important;
}
.fw-bold {
    font-weight: 700;
}
/* mescroll 空数据提示在深色下可读 */
.mescroll-empty {
    color: #8f8fb0;
}

/* ============ 充值页：套餐卡片选中态与点击热区 ============ */
.pricing-body .pricing-card {
    cursor: pointer;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    /* 中文注释：padding 移到 .pricing_inner 上——JS 的选中事件绑在内层，
       这样内层铺满整卡，点卡片任意位置（含边缘）都能选中 */
    padding: 0;
}
.pricing-body .pricing_inner {
    padding: 2.5rem 2rem; /* 与 137 原版 .pricing-card 的 padding 等值，视觉不变 */
}
.pricing-body .pricing-card:hover {
    transform: translateY(-4px);
}
/* 选中的套餐：霓虹描边 + 光晕画在整张卡片最外围
   （JS 把 .active 加在内层 .pricing_inner 上，这里用 :has 上浮到外层卡片） */
.pricing-body .pricing-card:has(.pricing_inner.active) {
    outline: 2px solid rgba(0, 245, 212, 0.75);
    outline-offset: 4px;
    box-shadow: 0 0 24px rgba(0, 245, 212, 0.18);
}
/* 自定义金额输入框 */
.customize-input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #0c0c16;
    color: #e9e9f5;
    font-size: 1.05rem;
    font-family: 'Rajdhani', sans-serif;
    outline: 0;
}
.customize-input:focus {
    border-color: rgba(0, 245, 212, 0.55);
}
.customize-card .pricing-tier {
    color: #ff00c8;
}
/* 底部充值按钮行 */
.pricing-actions-row {
    margin-top: 3rem;
    text-align: center;
}

/* ============ 充值页：每日优惠领取条（原 bootstrap alert 替换） ============ */
.discount-row {
    max-width: 860px;
    margin: 0 auto 2rem;
}
.discount-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(43, 217, 138, 0.45);
    border-radius: 10px;
    background: rgba(43, 217, 138, 0.08);
    color: #b8f3d5;
}
.discount-alert strong {
    color: #2bd98a;
}
.btn-claim {
    padding: 0.45rem 1.1rem;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #22c07f, #2bd98a);
    color: #06130d;
    font-weight: 700;
    cursor: pointer;
}
.btn-claim:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ 首页游戏卡片：用游戏图标图片替换 137 原版的 emoji ============ */
/* 原版该位置是 emoji（靠 font-size 撑大小）；图片按原始尺寸显示、不设宽高，
   用块级 + auto 边距保证在卡片内水平居中 */
.game-card-icon {
    width: 100%;
    text-align: center;
}
.game-card-icon img {
    display: block;
    margin: 0 auto;
    border-radius: 14px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

/* ============ 尾部 position7 联系信息块：logo/公司名/地址/电话/邮箱各占一行 ============ */
.footer-contact-info .footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}
.footer-contact-info .footer-logo img {
    height: 42px;
    width: auto;
    display: block;
}
.footer-contact-info .company-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #e9e9f5;
    margin: 0 0 0.6rem;
}
.footer-contact-info .contact-line {
    /* 中文注释：flex 保证 Email 文字与防爬 SVG 图片始终同一行并垂直居中 */
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #6060a0;
    font-size: 0.92rem;
    line-height: 1.9;
    margin: 0;
}
.footer-contact-info .contact-line img {
    flex: none;
    max-width: 100%;
}

/* ============ 尾部版权行右侧：支付方式图标（187x30 黑底，40px 高显示） ============ */
.footer-pay {
    height: 40px;
    width: auto;
    display: block;
    border-radius: 5px;
}

/* ============ 响应式微调 ============ */
@media (max-width: 767px) {
    .page-hero-mini {
        padding: 7rem 0 2.2rem;
    }
    .page-body-section {
        padding: 2.2rem 0 3.5rem;
    }
    .panel-card {
        padding: 1.5rem 1.2rem;
    }
    .nav-logo-image {
        height: 34px;
    }
    .discount-alert {
        text-align: center;
    }
}