/**
 * 蛙言域名授权 - 前台用户中心样式表
 * 由 func.php 提取
 * 包含：授权信息表格样式 + 下载区块响应式样式
 * 作者: 蛙言
 */
 
/* 弹窗选择 已授权 应用 提示图标*/
 div#bind-authorized-icon svg.icon {
    width: 90%;
    height: 90%;
}
/* ============================================================
 * 一、授权信息模块样式（子比主题表格式）
 * 对应 HTML 容器：.wayan-auth-info
 * ============================================================ */
.wayan-auth-info {
    background: var(--main-bg-color);
   /* border: 1px solid #e8eaf6; */
    border-radius: 10px;
    padding: 4px 0;
}
.wayan-auth-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
   /* border-bottom: 1px solid #f0f0f0;*/
    min-height: 48px;
}
.wayan-auth-row:last-child {
    border-bottom: none;
}
.wayan-auth-label {
    width: 100px;
    flex-shrink: 0;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}
.wayan-auth-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #333;
    font-size: 14px;
    word-break: break-all;
}
.wayan-auth-value .copy-target {
    font-family: monospace;
}
.wayan-auth-btn {
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: all 0.2s;
}
.wayan-auth-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.wayan-auth-icon-btn {
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}
.wayan-auth-icon-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.wayan-auth-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}
.wayan-auth-badge.status-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
}
.wayan-auth-badge.status-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.wayan-auth-badge.status-warning {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}
.wayan-auth-badge.wayan-auth-badge-info {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

/* 域名标签样式 */
.wayan-domain-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wayan-domain-tag {
    display: inline-block;
    padding: 3px 10px;
    background: #f0f7ff;
    color: #1e6fd9;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

/* 授权信息手机端适配 */
@media (max-width: 640px) {
    .wayan-auth-row {
        padding: 12px 14px;
    }
    .wayan-auth-label {
        width: 80px;
        font-size: 13px;
    }
    .wayan-auth-value {
        font-size: 13px;
    }
}

/* ============================================================
 * 二、下载区块响应式样式
 * 对应 HTML 容器：#file-download / .wayan-dl-card
 * PC：顶部按钮一行 + 主体左右布局
 * 手机：顶部按钮一行、版本时间一行；主体②③在上、④在下
 * ============================================================ */
@media (max-width: 640px) {
    /* 顶部按钮一行，版本时间一行 */
    .wayan-dl-topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .wayan-dl-btns {
        width: 100%;
        justify-content: space-between;
    }
    .wayan-dl-btns > a {
        flex: 1;
        justify-content: center;
    }
    .wayan-dl-version-row {
        width: 100%;
        justify-content: flex-start;
    }

    /* 主体：②③在上，④排在最下面，100%宽度居中 */
    .wayan-dl-body {
        flex-direction: column !important;
    }
    .wayan-dl-left {
        order: 1;
        min-width: 0 !important;
    }
    .wayan-dl-right {
        order: 2;
        width: 100% !important;
        margin: 0 auto;
        align-self: center;
        padding-top: 8px;
        border-top: 1px dashed #e0e0e0;
    }
}

/* ============================================================
 * 三、代理/支付表单中的图片尺寸修复
 * 解决 .wp-posts-content img { max-width:100%; height:auto; display:block; margin:auto; }
 * 导致支付方式图标（微信/支付宝/余额）被放大变形的问题
 * 仅限制在代理加入区块和授权信息区域内
 * ============================================================ */
.wp-posts-content .wayan-no-inline-paymethods .balance-charge-form img,
.wp-posts-content .wayan-agent-status-card .balance-charge-form img,
.wp-posts-content .wayan-agent-join-card .balance-charge-form img {
    max-width: 48px !important;
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* 代理中心区块内的支付图片限制 */
.wp-posts-content .wayan-agent-center-box .balance-charge-form img,
.wp-posts-content .wayan-agent-center-box img[alt*="支付"],
.wp-posts-content .wayan-agent-center-box img[alt*="微信"],
.wp-posts-content .wayan-agent-center-box img[alt*="支付宝"],
.wp-posts-content .wayan-agent-center-box img[alt*="余额"] {
    max-width: 48px !important;
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* 全局兜底：balance-charge-form 内的所有 img 不允许被 wp-posts-content 全局规则影响 */
.wp-posts-content .balance-charge-form img {
    max-width: 48px !important;
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* ============================================================
 * 四、代理中心产品列表表格样式
 * ============================================================ */
.wp-posts-content .wayan-agent-center-box .table th,
.wp-posts-content .wayan-agent-center-box .table td {
    vertical-align: middle !important;
}

/* 代理中心提取卡密按钮紧凑样式 */
.wp-posts-content .wayan-agent-center-box .but.c-green.hollow,
.wp-posts-content .wayan-agent-center-box .but.jb-gray.jb-gray {
    padding: 4px 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}