/* ============================================================
   tt_dreamjob1 模板自定义补充样式
   ------------------------------------------------------------
   说明：
   1. 本文件为 OpenCart 站点页面（工具页/账户页/充值页等）
      适配 DreamJob（142）模板时新增的样式；
   2. 模板基础样式在 /catalog/view/javascript/tt_dreamjob1/css/
      （bootstrap.css / fonts.css / style.css），本文件只做补充；
   3. 主色 #00a275（模板 primary）、深底 #1d1d35（gray-700）、
      浅底 #f5f6fa（gray-100）、灰字 #aeb1be、边框 #c5c6cd；
   4. 每一段均有中文注释说明用途，请勿删改注释。
   ============================================================ */

/* ------------------------------------------------------------
   一、Bootstrap 工具类补充
   142 自带的 Bootstrap 4.0.0 没有 .text-end / .fw-bold，
   但工具页 JS 动态生成的 HTML 使用了这些类，这里补齐。
   ------------------------------------------------------------ */
.text-end {
    text-align: right !important;
}
.fw-bold {
    font-weight: 700 !important;
}

/* ------------------------------------------------------------
   二、头部账户链接
   模板 .list-inline-bordered 只定义了 button 的样式，
   我们把原来的假弹窗按钮换成了真实 <a> 链接，这里补上样式。
   ------------------------------------------------------------ */
.rd-navbar-block .list-inline-bordered > li > a {
    display: inline-block;
    padding: 0;
    font-size: 16px;
    line-height: 1.7;
    color: inherit;
    text-decoration: none;
    outline: none;
    transition: .22s;
}
.rd-navbar-block .list-inline-bordered > li > a:hover {
    color: #00a275;
}

/* ------------------------------------------------------------
   三、内页横幅（breadcrumbs-custom）微调
   工具页/账户页标题较长时允许换行，副标题默认隐藏
   （部分页面未传副标题变量，避免出现空行）。
   ------------------------------------------------------------ */
.breadcrumbs-custom-title {
    white-space: normal;
}

/* 首页 Hero 双按钮（Start Converting / View Pricing）：
   内容区限宽 770px，两个大按钮并排会超宽换行错位，
   这里改为同行居中排列并统一间距；窄屏允许换行。 */
.jumbotron-modern .button-outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
/* 模板全局垂直节奏规则 "* + .button { margin-top: 40px }" 会把
   Hero 里第二个按钮往下推 40px 造成错位，这里在同行布局下清零。 */
.jumbotron-modern .button-outer .button + .button {
    margin-top: 0;
}

/* ------------------------------------------------------------
   四、工具页（img-to-pdf / pdf-to-word 等）
   布局：左侧参数面板（.tool-panel）+ 右侧记录列表（.tool-list）
   JS 依赖的类名：.paramet-item / .upload-container /
   .upload-input / .upload-preview / .update-image / .mescroll /
   .get-content-list / .download-img 等，均不可改名。
   ------------------------------------------------------------ */
.tool-page {
    padding: 50px 0 80px;
}

/* 左侧参数面板卡片 */
.tool-panel {
    padding: 28px 26px 30px;
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 29, 53, .06);
}
.tool-panel-title {
    margin-bottom: 18px;
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #1d1d35;
}

/* 参数项：标签 + 控件的纵向间距 */
.tool-panel .paramet-item {
    margin-bottom: 18px;
}
.tool-panel .paramet-item > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d35;
}

/* 下拉选择（select2 由模板 script.js 对 .select 自动初始化） */
.tool-panel .form-wrap {
    position: relative;
    margin-top: 0;
}
.tool-panel .form-wrap-select {
    max-width: none;
}
.tool-panel select.form-input {
    width: 100%;
    min-height: 46px;
}
/* select2 闭合选择框：模板原版 border:0（原场景是深色底上的白色块），
   放在工具页白色面板上会"白纸贴白纸"看不见，这里补边框并加聚焦绿框 */
.tool-panel .select2-container .select2-selection--single {
    border: 1px solid #c5c6cd;
}
.tool-panel .select2-container--focus .select2-selection--single,
.tool-panel .select2-container--open .select2-selection--single {
    border-color: #00a275;
}

/* 数字/文本输入（如视频页秒数、水印文字） */
.tool-panel input[type="number"],
.tool-panel input[type="text"] {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 15px;
    color: #1d1d35;
    background-color: #fff;
    border: 1px solid #c5c6cd;
    border-radius: 6px;
    transition: .3s ease-in-out;
}
.tool-panel input[type="number"]:focus,
.tool-panel input[type="text"]:focus {
    border-color: #00a275;
    outline: none;
}

/* 参数按钮组（word/ppt 转 pdf 的格式切换，JS 切换 .active） */
.tool-panel .param-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tool-panel .param-option {
    padding: 7px 16px;
    font-size: 14px;
    color: #1d1d35;
    background: #fff;
    border: 1px solid #c5c6cd;
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
}
.tool-panel .param-option:hover {
    border-color: #00a275;
    color: #00a275;
}
.tool-panel .param-option.active {
    color: #fff;
    background: #00a275;
    border-color: #00a275;
}

/* 上传框：虚线边框可点击区域，点击触发隐藏的 file input */
.tool-panel .upload-container {
    position: relative;
    border: 2px dashed #c5c6cd;
    border-radius: 6px;
    background: #f5f6fa;
    cursor: pointer;
    transition: .2s;
}
.tool-panel .upload-container:hover {
    border-color: #00a275;
    background: #fff;
}
.tool-panel .upload-input {
    display: none;
}
.tool-panel .upload-preview {
    min-height: 86px;
    padding: 14px 16px;
    font-size: 14px;
    color: #aeb1be;
    word-break: break-all;
}
.tool-panel .upload-item {
    padding: 2px 0;
    color: #1d1d35;
}
/* colorize 页预览图（JS 向 .upload-preview 插入 #exp-image） */
.tool-panel .upload-preview img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 4px;
}

/* 右侧记录列表卡片 */
.tool-list {
    min-height: 220px;
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 29, 53, .06);
    overflow: hidden;
}
.tool-list .table {
    margin-bottom: 0;
}
.tool-list .table th,
.tool-list .table td {
    padding: 14px 18px;
    font-size: 14px;
    color: #1d1d35;
    border-color: #eef0f5;
    vertical-align: middle;
}
/* 列表内生成的缩略图（colorize 双图对比） */
.tool-list .table td img {
    max-width: 120px;
    max-height: 90px;
    border-radius: 4px;
    margin-right: 8px;
}

/* 下载/查看按钮：JS 生成的是 btn btn-info / btn btn-primary，
   这里统一改成模板绿色系按钮外观 */
.tool-list .download-img.btn,
.points-table .download-img.btn {
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    background: #00a275;
    border: 1px solid #00a275;
    border-radius: 4px;
    text-decoration: none;
    transition: .2s;
}
.tool-list .download-img.btn-info {
    background: #fff;
    color: #00a275;
}
.tool-list .download-img.btn:hover {
    background: #00845d;
    border-color: #00845d;
    color: #fff;
}
.tool-list .download-img.btn-info:hover {
    background: #00a275;
    color: #fff;
}

/* 生成中的行与错误提示（JS 生成 .await/.myhidden/.error_info） */
.tool-list tr.await td {
    opacity: .55;
}
.tool-list .myhidden {
    display: none;
}
.tool-list .error_info {
    color: #dc0000;
}
.tool-list .in-image {
    margin-right: 6px;
    color: #00a275;
}

/* ------------------------------------------------------------
   五、转换遮罩层（#mask）
   工具提交后 JS 移除 d-none 显示遮罩，自绘加载圈
   ------------------------------------------------------------ */
.tool-mask {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(29, 29, 53, .55);
}
.tool-mask-text {
    margin-top: 14px;
    font-size: 15px;
    color: #fff;
}
.tool-mask-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #00a275;
    border-radius: 50%;
    animation: tt-spin .8s linear infinite;
}
@keyframes tt-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   六、账户页（登录/注册/修改密码）
   使用模板 .form-wrap + .form-input + .form-label 浮动标签结构，
   浮动效果由模板 script.js 的 RDInputLabel 插件驱动。
   ------------------------------------------------------------ */
.auth-page {
    padding: 60px 0 90px;
    background: #f5f6fa;
}
.auth-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 38px;
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 29, 53, .06);
}
.auth-card .auth-title {
    margin-bottom: 26px;
    font-family: "Oswald", sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: #1d1d35;
    text-align: center;
}
.auth-card .auth-tip {
    margin: -14px 0 22px;
    font-size: 14px;
    color: #aeb1be;
    text-align: center;
}
.auth-card .rd-form .form-wrap {
    margin-top: 22px;
}
.auth-card .auth-agree {
    position: relative;
    display: block;
    margin: 22px 0 6px;
    font-size: 14px;
    color: #1d1d35;
    cursor: pointer;
}
.auth-card .auth-agree a {
    color: #00a275;
}
/* 协议复选框：script.js 会给所有 input[type=checkbox] 注入模板自定义复选框
   （.checkbox-custom 隐藏原生框 + .checkbox-custom-dummy 画自定义方框），
   该机制要求 .checkbox / .checkbox-inline 父级作为定位上下文，
   这里补上 position:relative 让方框出现在文字左侧。 */
.checkbox,
.checkbox-inline {
    position: relative;
}
/* 支付弹窗（payhtml）协议复选框：#temp 是 text/html 模板缓冲，页面加载时
   其内容不在 DOM，script.js 的自定义复选框注入不到它；弹窗打开后原生
   input 又被模板 ".checkbox input" 裁剪规则隐藏，导致完全看不见。
   这里在弹窗范围内恢复原生复选框显示（绿色强调色）。 */
.layui-layer .checkbox {
    padding-left: 0;
}
.layui-layer .checkbox input[type="checkbox"] {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    accent-color: #00a275;
    cursor: pointer;
}
.auth-card .auth-alt {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eef0f5;
    font-size: 14px;
    color: #aeb1be;
    text-align: center;
}
.auth-card .auth-alt a {
    color: #00a275;
}

/* ------------------------------------------------------------
   七、充值页（recharge）与订阅套餐页（plans）
   卡片复用模板 .pricing-modern 结构，JS 依赖 .pricing-item /
   .points / .top-up-btn / .plans / .plans-title / .subscribe。
   选中态由 JS 切换 .active。
   视觉层次：星级(装饰) → 套餐名(小标签) → 价格(主视觉/大号绿字)
   → 权益列表(辅助) → 按钮；选中卡绿边+浮起+淡绿底。
   ------------------------------------------------------------ */
.pricing-page {
    padding: 50px 0 90px;
}
.pricing-page-desc {
    max-width: 640px;
    margin: 14px auto 34px;
    font-size: 15px;
    color: #aeb1be;
    text-align: center;
}

/* 卡片容器：白底圆角细边，等高，悬停微浮 */
.pricing-page .pricing-modern {
    position: relative;
    height: 100%;
    padding: 30px 22px 28px;
    background: #fff;
    border: 2px solid #e8e9ee;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(29, 29, 53, .05);
    transition: .25s ease-in-out;
}
.pricing-page .pricing-modern:hover {
    transform: translateY(-3px);
    border-color: #b8e6d6;
}

/* 顶部星级：绿色小星，随档位递增（自定义卡为调节图标） */
.pricing-page .pricing-modern-rating {
    margin-bottom: 8px;
}
.pricing-page .pricing-modern-rating > li {
    width: 18px;
    font-size: 19px;
}

/* 套餐名：小号灰标签（.points 兼具 JS 读取文本职责，不可改名） */
.pricing-page .pricing-modern-title {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #74757f;
}

/* 价格：卡片主视觉，大号绿色粗体 */
.pricing-page .pricing-modern-price {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.15;
    color: #00a275;
}

/* Best Value 徽章：悬浮卡顶中央 */
.pricing-page .pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: #00a275;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 162, 117, .35);
}

/* 选中态：绿边 + 浮起 + 淡绿渐变底 + 阴影 */
.pricing-modern.pricing-item {
    cursor: pointer;
}
.pricing-modern.pricing-item.active {
    border-color: #00a275;
    background: linear-gradient(180deg, #f2fbf7 0%, #fff 42%);
    box-shadow: 0 14px 34px rgba(0, 162, 117, .18);
    transform: translateY(-5px);
}
.pricing-modern .pricing-modern-title {
    /* JS 通过 .points 读取套餐名文本 */
    display: block;
}
/* 自定义金额卡输入框 */
.pricing-page .pricing-modern .recharge-custom-input {
    margin-top: 4px;
}

/* 订阅套餐卡内的描述文字 */
.pricing-modern .plans-desc {
    min-height: 44px;
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.6;
    color: #aeb1be;
}
/* 首页工具网格卡片标题链接（后台 ptstaticblock 首页块使用） */
.box-light-title a {
    color: inherit;
    text-decoration: none;
}
.box-light-title a:hover {
    color: #00a275;
}
/* 自定义金额输入卡（充值页 is_customize 时出现） */
.recharge-custom-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 16px;
    color: #1d1d35;
    background: #fff;
    border: 1px solid #c5c6cd;
    border-radius: 6px;
    transition: .3s ease-in-out;
}
.recharge-custom-input:focus {
    border-color: #00a275;
    outline: none;
}
/* 每日充值优惠条（JS 控制显隐） */
.recharge-discount-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 30px;
    padding: 14px 20px;
    font-size: 14px;
    color: #1d1d35;
    background: #e6f6f0;
    border: 1px solid #b8e6d6;
    border-radius: 6px;
}
.pricing-page-actions {
    margin-top: 38px;
    text-align: center;
}

/* ------------------------------------------------------------
   八、积分明细页（points）
   ------------------------------------------------------------ */
.points-page {
    padding: 50px 0 90px;
}
.points-table {
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 29, 53, .06);
    overflow: hidden;
}
.points-table .table {
    margin-bottom: 0;
}
.points-table .table th,
.points-table .table td {
    padding: 14px 18px;
    font-size: 14px;
    color: #1d1d35;
    border-color: #eef0f5;
    vertical-align: middle;
}
.points-table .points.text-success {
    color: #00a275 !important;
}
.points-table .points.text-danger {
    color: #dc0000 !important;
}

/* ------------------------------------------------------------
   九、FAQ 页
   手风琴使用模板 card-custom card-corporate（bootstrap collapse）。
   ------------------------------------------------------------ */
.faq-page {
    padding: 50px 0 90px;
}
.faq-page-title {
    margin-bottom: 10px;
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #1d1d35;
}
.faq-page-desc {
    margin-bottom: 26px;
    font-size: 15px;
    color: #aeb1be;
}
.faq-side-card {
    padding: 30px 26px;
    text-align: center;
    background: #1d1d35;
    border-radius: 6px;
}
.faq-side-card .mdi {
    font-size: 40px;
    color: #00a275;
}
.faq-side-card h6 {
    margin: 12px 0 8px;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    color: #fff;
}
.faq-side-card p {
    margin-bottom: 18px;
    font-size: 14px;
    color: #aeb1be;
}

/* ------------------------------------------------------------
   十、通用内容页（成功提示页 / 信息正文页）
   ------------------------------------------------------------ */
.success-page {
    padding: 60px 0 100px;
}
.success-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 46px 38px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 29, 53, .06);
}
.success-card .success-icon {
    font-size: 56px;
    color: #00a275;
}
.success-card h4 {
    margin: 14px 0 10px;
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #1d1d35;
}
.success-card p {
    margin-bottom: 24px;
    font-size: 15px;
    color: #aeb1be;
}

.article-page {
    padding: 50px 0 90px;
}
.article-card {
    padding: 34px 38px;
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 29, 53, .06);
}
.article-card img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   十一、页脚联系信息（position7，内容在后台 ptstaticblock.76）
   深色页脚（bg-gray-700 #1d1d35）上：公司名/文字用白色，
   地址电话邮箱行文字用模板链接灰 #aeb1be（邮箱 SVG 同色）。
   ------------------------------------------------------------ */
.footer-contact .footer-logo img {
    max-width: 160px;
    height: auto;
}
.footer-contact .footer-company {
    margin: 14px 0 18px;
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.footer-contact .footer-line {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #aeb1be;
}
.footer-contact .footer-line .icon {
    margin-right: 12px;
    color: #fff;
}
.footer-contact .footer-line img {
    max-height: 25px;
}
/* 页脚底部行：版权与支付图标左右分布 */
.footer-bottom {
    align-items: center;
}
.footer-bottom .rights {
    margin-bottom: 0;
}
.footer-bottom .footer-pay img {
    max-height: 45px;
}

/* ------------------------------------------------------------
   十二、preloader 兜底保护
   模板 preloader 依赖 script.js 在 window load 后添加 .loaded
   滑出白屏；若页面 JS 异常未执行，白屏会一直盖住首屏。
   这里用纯 CSS 动画在 6 秒后强制整体隐藏，保证极端情况下
   页面也可用（正常流程下 .loaded 早已滑出，不受影响；
   preloader 本身 pointer-events:none，不影响交互）。
   ------------------------------------------------------------ */
.preloader {
    animation: tt-preloader-forcehide 0s 6s forwards;
}
@keyframes tt-preloader-forcehide {
    to { visibility: hidden; }
}

/* ------------------------------------------------------------
   十三、mescroll 空列表提示微调（保持模板字体颜色）
   ------------------------------------------------------------ */
.mescroll-empty {
    padding: 30px 0;
    color: #aeb1be;
}