/* ============================================================
   app.css —— 全局样式唯一入口
   ------------------------------------------------------------
   引用策略（方案 A）：本文件顶部按顺序 @import 各分层分片，
   浏览器 / 静态服务端（PHP 5.6 仅负责按原样输出本文件）均支持；
   分片相对路径以本文件所在目录（/static/css/）为基准解析。

   @import 顺序设计（必须在任何其他规则之前，且严格按此序）：
     1 base/variables.css    变量最先（后续规则依赖 --cms-* / --front-*）
     2 base/reset.css        重置依赖变量，紧随其后
     3 base/layout.css       通用布局
     4 components/buttons.css
     5 components/header.css
     6 components/cards.css
     7 components/forms.css
     8 pages/home.css
     9 pages/factory.css
    10 pages/product.css
    11 pages/contact.css
    12 pages/shop.css
    13 themes/default.css    前台主题放最后：其对 .cms-layout(60px)、
                             .factory-product-card .price(#c92a2a) 等的
                             覆盖必须晚于 base / pages，优先级才与重构前一致。

   后台专属样式（admin/admin.css）不在此入口引入，由
   header_admin.tpl.htm 额外 <link> 加载，保证「前台不误载后台 css、
   后台正常加载后台 css」。

   本文件 @import 之后仅保留：个人中心、登录页、全局响应式媒体查询等
   无法明确归类 / 极通用的兜底规则（顺序与重构前一致）。
   ============================================================ */

@import "base/variables.css";
@import "base/reset.css";
@import "base/layout.css";
@import "components/buttons.css";
@import "components/header.css";
@import "components/cards.css";
@import "components/forms.css";
@import "pages/home.css";
@import "pages/factory.css";
@import "pages/product.css";
@import "pages/contact.css";
@import "pages/shop.css";
@import "themes/default.css";


/* ==================== 个人中心（前台） ==================== */
.account-center-nav { padding-bottom: 4px; }
.account-center-nav .btn { white-space: nowrap; }

.account-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #f0f2f5;
    font-size: 14px;
}
.account-info-list li:last-child { border-bottom: 0; }
.account-info-list li span { flex-shrink: 0; }

.order-stat {
    background: #f7f8fa;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    padding: 12px 6px;
}
.order-stat .num { font-size: 22px; font-weight: 700; color: #1c2536; line-height: 1.2; }
.order-stat .label { font-size: 14px; margin-top: 2px; }
.order-stat-total .num { color: #2f6feb; }

.account-quick {
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.account-quick:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-2px);
    color: inherit;
}
.account-quick .icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* 登录页 */
.cms-login-body {
    background: linear-gradient(135deg, #2f6feb 0%, #5b8def 100%);
    min-height: 100vh;
}

.cms-card .list-group-item { font-size: 14px; }

/* ===== 前台响应式（跨 header / home / factory / product） ===== */
@media (max-width: 900px) {
    .factory-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
    .home-hero { padding: 48px 32px; }
    .home-hero h1 { font-size: 32px; }
}
@media (max-width: 700px) {
    .cms-topbar .container-fluid { flex-wrap: wrap; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
    .cms-topbar .navbar-nav { order: 3; width: 100%; justify-content: center; overflow-x: auto; padding-bottom: 2px; }
    .cms-topbar .navbar-brand { margin-right: auto; }
    .cms-topbar .navbar-nav .cms-nav-link { padding: 6px 8px; font-size: 14px; }
    .cms-topbar .site-brand-logo { max-width: 160px; max-height: 34px; }
    .home-hero { padding: 38px 24px; margin-left: 0; margin-right: 0; }
    .home-hero h1 { font-size: 28px; }
    .home-hero p { font-size: 14px; }
    .category-banner { padding: 28px 24px; }
    .category-banner-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .factory-footer-cols { grid-template-columns: 1fr; }
    .factory-main { padding-left: 16px; padding-right: 16px; }
}

/* ==================== 个人中心（前台）视觉优化（覆盖） ==================== */
.account-center-nav {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: #fff; border: 1px solid #eef1f5; border-radius: 12px;
    padding: 8px; box-shadow: 0 1px 3px rgba(16,40,32,.04);
}
.account-center-nav .btn {
    border-radius: 8px; padding: 8px 16px; font-size: 14px; border-width: 0;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.account-center-nav .btn-outline-primary { color: #3c4656; background: transparent; }
.account-center-nav .btn-outline-primary:hover { color: #0c8f5b; background: #f0f6f3; }
.account-center-nav .btn-primary { background: #0fae6f; box-shadow: 0 3px 8px rgba(15,174,111,.2); }
.account-center-nav .btn-ghost-home { color: #7a8798; background: #f7f8fa; }
.account-center-nav .btn-ghost-home:hover { color: #111a2e; background: #eef2f6; }

/* 个人中心统计卡：更清晰的信息层次 */
.order-stat { border-radius: 12px; padding: 14px 6px; }
.order-stat .num { font-size: 23px; font-weight: 700; }
.order-stat .label { font-size: 14px; }

/* 个人中心欢迎卡 */
.account-welcome {
    background: linear-gradient(120deg, #0d2b21, #123a2b);
    border-radius: 14px; color: #fff; box-shadow: 0 10px 26px rgba(13,43,33,.18);
}
.account-welcome .account-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
    background: rgba(255,255,255,.14); color: #fff; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.3);
}
.account-welcome .text-muted { color: #c5d8cc !important; }
.account-welcome .btn-outline-primary { color: #fff; border-color: rgba(255,255,255,.5); }
.account-welcome .btn-outline-primary:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.account-welcome .btn-outline-secondary { color: #d7e6dc; border-color: rgba(255,255,255,.35); }
.account-welcome .btn-outline-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ==================== 个人中心：侧栏 + 主区两栏布局 ==================== */
.account-page {
    max-width: 1240px; margin: 0 auto; padding: 24px 20px;
}
.account-page.account-layout {
    display: flex; align-items: flex-start; gap: 24px;
}
.account-sidebar {
    width: 240px; flex: 0 0 240px; position: sticky; top: 84px;
    background: #fff; border: 1px solid #eef1f5; border-radius: 14px;
    box-shadow: 0 6px 20px rgba(16,40,32,.05); overflow: hidden;
}
.account-side-user {
    display: flex; align-items: center; gap: 12px; padding: 18px 16px;
    background: linear-gradient(120deg, #0d2b21, #123a2b); color: #fff;
}
.account-side-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
    background: #0fae6f; color: #fff; font-size: 20px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.3); box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.account-side-user-meta { min-width: 0; }
.account-side-name {
    font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-side-actions { display: flex; gap: 14px; margin-top: 4px; }
.account-side-actions a { color: #c5d8cc; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.account-side-actions a:hover { color: #fff; }
.account-side-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.account-side-link {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    border-radius: 9px; color: #3c4656; font-size: 14px; font-weight: 500;
    transition: background .14s, color .14s, transform .14s;
}
.account-side-link i:first-child { font-size: 15px; color: #7fa890; }
.account-side-link:hover { background: #f0f6f3; color: #0c8f5b; transform: translateX(2px); }
.account-side-link.active { background: #0fae6f; color: #fff; font-weight: 600; }
.account-side-link.active i:first-child { color: #fff; }
.account-side-arrow { margin-left: auto; font-size: 14px; }
.account-side-home {
    display: flex; align-items: center; gap: 9px; margin: 0 8px 10px; padding: 10px 12px;
    border-radius: 9px; color: #7a8798; font-size: 14px; background: #f7f8fa; transition: background .14s;
}
.account-side-home:hover { background: #eef2f6; color: #111a2e; }

/* 主区包装：让未改动的子页（.account-wrap/.account-header）也有卡片化外观 */
.account-wrap { flex: 1; min-width: 0; }
.account-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    flex-wrap: wrap; margin-bottom: 20px; padding: 20px;
    background: #fff; border: 1px solid #eef1f5; border-radius: 14px;
    box-shadow: 0 4px 16px rgba(16,40,32,.05);
}
.account-header h1 { font-size: 20px; font-weight: 700; color: #111a2e; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.account-header h1 i { color: #0fae6f; }
.account-header .text-muted { font-size: 14px; }

/* 个人中心响应式：窄屏时侧栏移到顶部并横向可滚 */
@media (max-width: 940px) {
    .account-page.account-layout { flex-direction: column; gap: 16px; }
    .account-sidebar { width: 100%; flex: none; position: static; }
    .account-side-user { display: none; }
    .account-side-nav { flex-direction: row; overflow-x: auto; padding: 8px; }
    .account-side-link { flex: 0 0 auto; white-space: nowrap; gap: 7px; padding: 9px 12px; }
    .account-side-arrow { display: none; }
    .account-side-home { display: none; }
}

/* ============================================================
   全局滚动条美化 + 回到顶部按钮
   ------------------------------------------------------------
   滚动条：
   - Chromium / WebKit 系用 ::-webkit-scrollbar 系列伪元素；
   - Firefox 用 scrollbar-width / scrollbar-color。
   页面级与容器级（table-responsive、侧栏、下拉等）统一为
   细圆角中性灰条，hover 加深；对暗色内容区不强制着色。
   回到顶部按钮：
   - 基础样式放此处（前后台均加载 app.css，故全局可用）；
   - 显隐 .show 由 footer 模板内联脚本按滚动距离切换；
   - 默认固定右下角。前台首页右下角已有「浮动联系方式」按钮，
     故前台 footer 模板内联样式将 bottom 抬高错开。
   ============================================================ */
html {
    scrollbar-width: thin;
    scrollbar-color: #c3cad6 transparent;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: #c3cad6;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
html::-webkit-scrollbar-thumb:hover { background-color: #9aa5b5; }
html::-webkit-scrollbar-corner { background: transparent; }

/* 页面内所有可滚动容器统一细滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: #d3d9e1 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #d3d9e1;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #aab3c1; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ===== 回到顶部按钮 ===== */
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1095;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #344054;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(16,40,60,.16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s, color .15s;
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: #f0f4ff; color: var(--cms-primary, #2f6feb); }
.scroll-top-btn:active { transform: translateY(1px) scale(.97); }
@media (max-width: 767px) {
    .scroll-top-btn { width: 40px; height: 40px; font-size: 16px; }
}

/* ============================================================
   浮窗联系方式（前台布局 footer 使用，后台/商家后台无此组件）
   ------------------------------------------------------------
   前台的右下角浮窗与回到顶部按钮垂直叠放：
   - 用 .floating-contact ~ .scroll-top-btn 将回到顶部按钮上移，
     避免遮挡；这里只作用于同时存在浮窗的页面。
   - 浮窗展开（.floating-contact.open）时暂时隐藏回到顶部按钮。
   脚本在 static/js/global_ui.js（前台 / wap 共享）。
   ============================================================ */
.floating-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.floating-contact-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15,30,60,.12);
    overflow: hidden;
    margin-bottom: 10px;
    max-width: 290px;
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
}
.floating-contact.open .floating-contact-panel { transform: translateY(0); opacity: 1; visibility: visible; }
.floating-contact-panel a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #1c2b3a;
    text-decoration: none;
    font-size: 14px;
    white-space: normal;
    border-bottom: 1px solid #f0f2f6;
}
.floating-contact-panel a:last-child { border-bottom: none; }
.floating-contact-panel a:hover { background: #f4f7fb; }
.floating-contact-panel a i { font-size: 18px; color: #2f6fed; }
.floating-contact-toggle {
    width: 52px; height: 52px;
    border-radius: 50%; border: none;
    background: #2f6fed; color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(47,111,237,.4);
}
.floating-contact-toggle:hover { background: #1f56c9; }

/* 存在浮窗联系方式时：回到顶部按钮上移错开；浮窗展开时隐藏它 */
.floating-contact ~ .scroll-top-btn { right: 20px; bottom: 84px; }
.floating-contact.open ~ .scroll-top-btn { opacity: 0; visibility: hidden; transform: translateY(8px); }


/* 全局轻量消息提示：非阻塞，不替代确认对话框 */
.app-message-container {
    position: fixed;
    top: 24px;
    left: 50%;
    z-index: 12000;
    display: flex;
    width: min(92vw, 420px);
    flex-direction: column;
    gap: 10px;
    transform: translateX(-50%);
    pointer-events: none;
}

.app-message {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28), 0 4px 14px rgba(15, 23, 42, 0.12);
    color: #364152;
    font-size: 14px;
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-message.is-visible { opacity: 1; transform: translateY(0); }
.app-message-icon { display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; }
.app-message-info .app-message-icon { background: #e8f1ff; color: #2f6feb; }
.app-message-success .app-message-icon { background: #e7f7ee; color: #198754; }
.app-message-warning .app-message-icon { background: #fff4db; color: #a66b00; }
.app-message-error .app-message-icon { background: #ffe8e8; color: #c92a2a; }
.app-message-text { flex: 1; line-height: 1.5; }
.app-message-close { padding: 0 3px; border: 0; background: transparent; color: #8b929c; font-size: 20px; line-height: 1; cursor: pointer; }
.app-message-close:hover { color: #20242b; }

@media (max-width: 560px) {
    .app-message-container { top: 12px; width: calc(100% - 24px); }
}

/* ============================================================
   结算表单弹窗（checkout-form-modal）—— 全局共用样式
   ------------------------------------------------------------
   结算页 / 个人中心（新增、编辑地址等）弹窗统一复用：
   - 外层 .modal.fade.checkout-form-modal
   - 头部 .checkout-modal-head（标题 + 副标题 + 关闭按钮）
   - 正文 .modal-body，底部 .modal-footer
   原样式位于 static/css/shop/checkout.css，因结算页 CSS 仅在
   结算页加载，个人中心无法复用，故抽到全局 app.css。
   ============================================================ */
.checkout-form-modal .modal-dialog { width: min(720px, calc(100% - 32px)); max-width: 720px; }
.checkout-form-modal .modal-content { overflow: hidden; border: 0; border-radius: 16px; }
.checkout-form-modal .checkout-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 20px; border-bottom: 1px solid #f1f2f4; }
.checkout-form-modal .checkout-modal-head h5 { margin: 0; color: #20242b; font-size: 20px; font-weight: 700; }
.checkout-form-modal .checkout-modal-head p { margin: 6px 0 0; color: #8b919b; font-size: 13px; }
.checkout-form-modal .modal-body { max-height: 62vh; overflow-y: auto; padding: 24px 28px; }
.checkout-form-modal .form-label { display: block; margin-bottom: 6px; color: #4e5661; font-weight: 600; }
.checkout-form-modal .form-control { min-height: 42px; border-color: #dfe3e8; border-radius: 7px; box-shadow: none; }
.checkout-form-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid #f1f2f4; }
.checkout-form-modal .modal-footer .btn { min-width: 92px; border-radius: 8px; }
.checkout-form-modal .modal-footer .btn-primary { border-color: #ff6a00; background: #ff6a00; }

/* 弹窗表单：标签与输入框横向排列，统一紧凑高度 */
.checkout-form-modal .modal-body .row > [class*="col-"] { display: flex; align-items: center; gap: 12px; }
.checkout-form-modal .modal-body .row > [class*="col-"] > .form-label { flex: 0; margin: 0; white-space: nowrap; }
.checkout-form-modal .modal-body .row > [class*="col-"] > .form-control,
.checkout-form-modal .modal-body .row > [class*="col-"] > .form-select { flex: 1 1 auto; min-width: 0; height: 32px; min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.checkout-form-modal .checkout-modal-check-row { display: block; }

@media (max-width: 575.98px) {
    .checkout-form-modal .modal-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
    }
    .checkout-form-modal .checkout-modal-head,
    .checkout-form-modal .modal-body,
    .checkout-form-modal .modal-footer {
        padding-right: 18px;
        padding-left: 18px;
    }
    .checkout-form-modal .modal-body { max-height: calc(100vh - 190px); }
    .checkout-form-modal .modal-body .col-6,
    .checkout-form-modal .modal-body .col-md-6 { width: 100%; }
    .checkout-form-modal .modal-body .row > [class*="col-"] { display: block; }
    .checkout-form-modal .modal-body .row > [class*="col-"] > .form-label { display: block; margin-bottom: 6px; }
    .checkout-form-modal .modal-body .row > [class*="col-"] > .form-control,
    .checkout-form-modal .modal-body .row > [class*="col-"] > .form-select { width: 100%; }
}

/* ==================== 全局确认窗口 ==================== */
.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.app-dialog-backdrop.is-open { opacity: 1; visibility: visible; }
.app-dialog {
    width: min(92vw, 440px);
    overflow: hidden;
    border: 1px solid #e7ebf0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease;
}
.app-dialog-backdrop.is-open .app-dialog { transform: none; }
.app-dialog-title {
    padding: 22px 26px 8px;
    color: #20242b;
    font-size: 20px;
    font-weight: 700;
}
.app-dialog-message {
    padding: 8px 26px 24px;
    color: #4e5661;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}
.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 24px 20px;
}
.app-dialog-btn {
    min-width: 84px;
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.app-dialog-btn.cancel { background: #f4f6f8; color: #4e5661; }
.app-dialog-btn.cancel:hover { background: #e9edf2; }
.app-dialog-btn.confirm { background: #ff6a00; color: #fff; }
.app-dialog-btn.confirm:hover { background: #e95700; }
@media (max-width: 575.98px) {
    .app-dialog-backdrop { padding: 12px; }
    .app-dialog { width: min(100%, 440px); }
    .app-dialog-title { padding: 18px 20px 6px; font-size: 18px; }
    .app-dialog-message { padding: 6px 20px 20px; }
    .app-dialog-actions { padding: 0 18px 16px; }
}