/**
 * 昇磁霍尔商城 - 公共主题样式
 * 符合 color-scheme.html 配色方案
 * 包含：按钮体系、Layer弹窗皮肤、通用配色变量
 *
 * 【配色调整说明】
 * 所有颜色值集中在下方 :root 变量中定义，按钮/弹窗/工具类均引用 var()。
 * 调整配色只需修改此处，全站自动生效。
 * 修改后请同步更新 button.html 配色标注页。
 */

/* ============================================================
 * 配色变量（唯一颜色定义处 · 修改这里即可全站生效）
 * ============================================================ */
:root {
    /* --- 主色调：品牌核心 --- */
    --color-navy:         #0F3460;  /* 海军蓝：导航/页脚/弹窗标题栏 */
    --color-navy-dark:    #0a2540;  /* 海军蓝 Hover */
    --color-lake:         #16587E;  /* 主按钮/链接/选中态（统一主题蓝） */
    --color-lake-dark:    #155A7A;  /* 主按钮 Hover（统一主题蓝深一档） */
    --color-lake-light:   #EDF4F9;  /* 中湖蓝浅底：描边按钮Hover/选中行高亮 */

    /* --- 产品展示辅色 --- */
    --color-silver:       #F5F7FA;  /* 银白：卡片背景/产品图底板 */
    --color-metal-1:      #D8DEE6;  /* 浅金属灰1：分割线/边框 */
    --color-metal-2:      #E9EDF2;  /* 浅金属灰2：表格偶数行/次面板底 */

    /* --- 中性灰阶 --- */
    --color-text:         #1A202C;  /* 正文黑 */
    --color-text-sub:     #4A5568;  /* 次级灰 */
    --color-text-aux:     #718096;  /* 辅助灰 */
    --color-disabled:     #A0AEC0;  /* 禁用灰：默认按钮/禁用态 */
    --color-white:        #FFFFFF;  /* 页面白 */

    /* --- 功能警示色 --- */
    --color-success:      #23A26D;  /* 成功绿：现货/成功提示 */
    --color-success-dark: #1e8a5c;  /* 成功绿 Hover */
    --color-danger:       #D13636;  /* 危险红：删除/报错/价格 */
    --color-danger-dark:  #b52e2e;  /* 危险红 Hover */
    --color-warning:      #E68930;  /* 警告橙：库存紧张/售后 */
    --color-warning-dark: #d17a28;  /* 警告橙 Hover */
    --color-info:         #3490C9;  /* 提示浅蓝：公告/发票 */
    --color-info-dark:    #2a7aa8;  /* 提示浅蓝 Hover */

    /* --- 按钮尺寸（统一规范） --- */
    --btn-radius:         4px;      /* 按钮圆角（统一 4px） */
    --btn-padding-y:      10px;     /* 默认按钮垂直内边距 */
    --btn-padding-x:      24px;     /* 默认按钮水平内边距 */
    --btn-font-size:      12px;     /* 默认按钮字号 */
    --btn-sm-padding-y:   6px;      /* 小按钮垂直内边距 */
    --btn-sm-padding-x:   16px;     /* 小按钮水平内边距 */
    --btn-sm-font-size:   12px;     /* 小按钮字号 */
    --btn-lg-padding-y:   12px;     /* 大按钮垂直内边距 */
    --btn-lg-padding-x:   32px;     /* 大按钮水平内边距 */
    --btn-lg-font-size:   12px;     /* 大按钮字号 */

    /* --- Layer 弹窗 --- */
    --layer-radius:       8px;      /* 弹窗圆角 */
    --layer-title-bg:     var(--color-navy);      /* 弹窗标题栏背景 */
    --layer-btn-primary:  var(--color-lake);      /* 弹窗主按钮 */
    --layer-btn-cancel:   var(--color-disabled);  /* 弹窗取消按钮 */
}

/* ===== 按钮基础 ===== */
.yrx-btn,
.btn-yrx {
    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-size: var(--btn-font-size);
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}
.yrx-btn:hover,
.btn-yrx:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.yrx-btn:active,
.btn-yrx:active {
    transform: translateY(0);
}
.yrx-btn:disabled,
.btn-yrx:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== 按钮尺寸 ===== */
.yrx-btn-sm,
.btn-yrx-sm {
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
    font-size: var(--btn-sm-font-size);
}
.yrx-btn-lg,
.btn-yrx-lg {
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
    font-size: var(--btn-lg-font-size);
}
.yrx-btn-block,
.btn-yrx-block {
    display: block;
    width: 100%;
}

/* ===== 主按钮 - 中湖蓝 ===== */
.yrx-btn-primary,
.btn-yrx-primary {
    background: var(--color-lake);
    color: var(--color-white);
}
.yrx-btn-primary:hover,
.btn-yrx-primary:hover {
    background: var(--color-lake-dark);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 次要按钮 - 海军蓝 ===== */
.yrx-btn-navy,
.btn-yrx-navy {
    background: var(--color-navy);
    color: var(--color-white);
}
.yrx-btn-navy:hover,
.btn-yrx-navy:hover {
    background: var(--color-navy-dark);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 描边按钮 - 中湖蓝描边 ===== */
.yrx-btn-outline,
.btn-yrx-outline {
    background: transparent;
    border: 1.5px solid var(--color-lake);
    color: var(--color-lake);
}
.yrx-btn-outline:hover,
.btn-yrx-outline:hover {
    background: var(--color-lake-light);
    color: var(--color-lake-dark);
    opacity: 1;
}

/* ===== 成功按钮 ===== */
.yrx-btn-success,
.btn-yrx-success {
    background: var(--color-success);
    color: var(--color-white);
}
.yrx-btn-success:hover,
.btn-yrx-success:hover {
    background: var(--color-success-dark);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 危险按钮 ===== */
.yrx-btn-danger,
.btn-yrx-danger {
    background: var(--color-danger);
    color: var(--color-white);
}
.yrx-btn-danger:hover,
.btn-yrx-danger:hover {
    background: var(--color-danger-dark);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 警告按钮 ===== */
.yrx-btn-warning,
.btn-yrx-warning {
    background: var(--color-warning);
    color: var(--color-white);
}
.yrx-btn-warning:hover,
.btn-yrx-warning:hover {
    background: var(--color-warning-dark);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 信息按钮 ===== */
.yrx-btn-info,
.btn-yrx-info {
    background: var(--color-info);
    color: var(--color-white);
}
.yrx-btn-info:hover,
.btn-yrx-info:hover {
    background: var(--color-info-dark);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 默认按钮 - 禁用灰 ===== */
.yrx-btn-default,
.btn-yrx-default {
    background: var(--color-disabled);
    color: var(--color-white);
}
.yrx-btn-default:hover,
.btn-yrx-default:hover {
    background: var(--color-text-aux);
    color: var(--color-white);
    opacity: 1;
}

/* ===== 文字链接按钮 ===== */
.yrx-btn-link,
.btn-yrx-link {
    background: transparent;
    color: var(--color-lake);
    padding: 6px 12px;
}
.yrx-btn-link:hover,
.btn-yrx-link:hover {
    color: var(--color-lake-dark);
    text-decoration: underline;
    opacity: 1;
    transform: none;
}

/* ===== 覆写 Bootstrap 按钮（兼容旧代码） ===== */
.btn-primary {
    background: var(--color-lake) !important;
    border-color: var(--color-lake) !important;
    color: var(--color-white) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--color-lake-dark) !important;
    border-color: var(--color-lake-dark) !important;
    color: var(--color-white) !important;
}
.btn-primary:disabled {
    opacity: 0.5;
}

.btn-danger {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-white) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background: var(--color-danger-dark) !important;
    border-color: var(--color-danger-dark) !important;
}

.btn-warning {
    background: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background: var(--color-warning-dark) !important;
    border-color: var(--color-warning-dark) !important;
}

.btn-info {
    background: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: var(--color-white) !important;
}
.btn-info:hover,
.btn-info:focus {
    background: var(--color-info-dark) !important;
    border-color: var(--color-info-dark) !important;
}

.btn-success {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-white) !important;
}
.btn-success:hover,
.btn-success:focus {
    background: var(--color-success-dark) !important;
    border-color: var(--color-success-dark) !important;
}

.btn-default {
    background: var(--color-disabled) !important;
    border-color: var(--color-disabled) !important;
    color: var(--color-white) !important;
}
.btn-default:hover,
.btn-default:focus {
    background: var(--color-text-aux) !important;
    border-color: var(--color-text-aux) !important;
}

/* 去除 btn-embossed 凸起效果 */
.btn-embossed {
    box-shadow: none !important;
}

/* ===== 业务自定义按钮覆盖 ===== */
/* 列表页：加入购物车(实心蓝) */
.list-action .btn-add-cart {
    background: var(--color-lake) !important;
    color: var(--color-white) !important;
    border-color: var(--color-lake) !important;
}
.list-action .btn-add-cart:hover {
    background: var(--color-lake-dark) !important;
    border-color: var(--color-lake-dark) !important;
}

/* 列表页：立即购买(描边蓝) */
.list-action .btn-buy-now {
    background: var(--color-white) !important;
    color: var(--color-lake) !important;
    border: 1px solid var(--color-lake) !important;
}
.list-action .btn-buy-now:hover {
    background: var(--color-lake-light) !important;
}

/* 详情页：直接购买(实心蓝) + 加入购物车(描边蓝) */
.goods-detail-page .buy-actions .btn-buy {
    background: var(--color-lake) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-lake) !important;
}
.goods-detail-page .buy-actions .btn-buy:hover {
    background: var(--color-lake-dark) !important;
}
.goods-detail-page .buy-actions .btn-cart {
    background: var(--color-white) !important;
    color: var(--color-lake) !important;
    border: 1px solid var(--color-lake) !important;
}
.goods-detail-page .buy-actions .btn-cart:hover {
    background: var(--color-lake-light) !important;
}

/* 统一按钮基础样式（覆盖 Bootstrap 默认值） */
.btn {
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    border-radius: var(--btn-radius) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: 500 !important;
    border: none !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}
.btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}
.btn:active {
    transform: translateY(0) !important;
}
.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* 去除 btn-rounded 过大圆角 */
.btn-rounded {
    border-radius: var(--btn-radius) !important;
}

/* 按钮尺寸变体 */
.btn-sm {
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x) !important;
    font-size: var(--btn-sm-font-size) !important;
}
.btn-lg {
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x) !important;
    font-size: var(--btn-lg-font-size) !important;
}
.btn-block {
    display: block !important;
    width: 100% !important;
}

/* 支付页"立即支付"：大按钮 + 满宽，需独立高度与 flex 垂直居中
   覆盖 .btn-lg 的 padding!important 与 .btn-block 的 display:block!important */
.btn-recharge {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 36px !important;
    padding: 0 32px !important;
}

/* ===== Layer 弹窗皮肤 - 全局扁平化设计 ===== */
.layui-layer {
    border-radius: var(--layer-radius) !important;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
}
.layui-layer-title {
    background: var(--layer-title-bg) !important;
    color: var(--color-white) !important;
    border-color: transparent !important;
    border-radius: var(--layer-radius) var(--layer-radius) 0 0 !important;
    font-weight: 500;
}
.layui-layer-content {
    padding: 24px 20px !important;
    background: var(--color-white);
    color: var(--color-text-sub);
}
.layui-layer-dialog .layui-layer-content {
    padding: 24px 20px !important;
}
.layui-layer-dialog .layui-layer-padding {
    padding: 24px 20px !important;
}
.layui-layer-ico {
    display: none !important;
}
.layui-layer-btn {
    padding: 0 15px 12px !important;
    border-top: 1px solid var(--color-metal-1) !important;
}
.layui-layer-btn a {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 24px !important;
    border-radius: var(--btn-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    margin: 5px 8px 0 !important;
}
.layui-layer-btn0 {
    background: var(--color-lake) !important;
    color: var(--color-white) !important;
    border-color: var(--color-lake) !important;
}
.layui-layer-btn0:hover {
    background: var(--color-lake-dark) !important;
}
.layui-layer-btn1 {
    background: var(--color-disabled) !important;
    color: var(--color-white) !important;
    border-color: var(--color-disabled) !important;
}
.layui-layer-btn1:hover {
    background: var(--color-text-aux) !important;
}
.layer-ext-demo .layui-layer-setwin {
    top: 14px;
    right: 14px;
}
.layer-ext-demo .layui-layer-close {
    filter: brightness(10);
    opacity: 0.7;
}
.layer-ext-demo .layui-layer-close:hover {
    opacity: 1;
}

/* ===== 确认/操作提示弹窗（layer-ext-demo，对齐申请售后弹窗风格：白底圆角、简洁标题、小尺寸） ===== */
.layer-ext-demo.layui-layer {
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}
.layer-ext-demo .layui-layer-title {
    background: #fff !important;
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    height: 44px !important;
    line-height: 44px !important;
    padding-left: 16px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
.layer-ext-demo .layui-layer-content {
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    padding: 20px 22px !important;
}
.layer-ext-demo .layui-layer-content .layui-layer-ico3 {
    background-size: 26px 26px !important;
}
.layer-ext-demo .layui-layer-btn {
    border-top: 1px solid #f2f2f2 !important;
    padding: 10px 16px !important;
    text-align: right !important;
    background: #fafafa !important;
}
.layer-ext-demo .layui-layer-btn a {
    border-radius: 4px !important;
    height: 30px !important;
    line-height: 28px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
}
.layer-ext-demo .layui-layer-btn0 {
    background: var(--color-lake, #0084ff) !important;
    border-color: var(--color-lake, #0084ff) !important;
    color: #fff !important;
}
.layer-ext-demo .layui-layer-btn1 {
    background: #fff !important;
    border-color: #ddd !important;
    color: #666 !important;
}
.layer-ext-demo .layui-layer-btn1:hover {
    background: #f5f5f5 !important;
}

/* ===== 通用配色工具类 ===== */
.yrx-bg-navy   { background: var(--color-navy); }
.yrx-bg-lake   { background: var(--color-lake); }
.yrx-bg-silver { background: var(--color-silver); }
.yrx-bg-white  { background: var(--color-white); }

.yrx-text-navy { color: var(--color-navy); }
.yrx-text-lake { color: var(--color-lake); }
.yrx-text-sub  { color: var(--color-text-sub); }
.yrx-text-aux  { color: var(--color-text-aux); }
.yrx-text-danger { color: var(--color-danger); }
.yrx-text-success { color: var(--color-success); }

.yrx-border { border-color: var(--color-metal-1); }

/* ===== 商品详情 · 查询运费按钮 ===== */
.btn-query-freight {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    color: var(--color-lake);
    border: 1px solid var(--color-lake);
    border-radius: 4px;
    text-decoration: none !important;
    line-height: 1.6;
    transition: all .2s;
}
.btn-query-freight:hover {
    background: var(--color-lake);
    color: var(--color-white);
    text-decoration: none !important;
}