/* ========================================
   京微曦健康管理 PC版 - 样式表
   ======================================== */

:root {
    --primary: #e4393c;
    --primary-dark: #c1272a;
    --text-dark: #333;
    --text-gray: #666;
    --text-light: #999;
    --border: #eee;
    --bg-light: #f5f5f5;
    --radius: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    color: var(--text-dark);
    background:#fff;
    line-height:1.6;
}
a { text-decoration:none; color:inherit; cursor:pointer; }
button { cursor:pointer; border:none; outline:none; font-family:inherit; }
input { outline:none; font-family:inherit; }

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ====== 顶部导航 ====== */
.top-bar {
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.top-bar .container {
    display:flex; align-items:center; height:64px; gap:30px;
}
.logo {
    font-size:24px; font-weight:800; color:var(--primary);
    letter-spacing:2px; cursor:pointer; white-space:nowrap;
}
.logo-img {
    height:40px; max-width:180px; object-fit:contain; cursor:pointer;
}
.nav { flex:1; }
.nav a { padding:8px 16px; color:var(--text-dark); border-radius:20px; transition:.2s; font-size:15px; }
.nav a:hover, .nav a.active { background:var(--primary); color:#fff; }
.right { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.merchant-apply-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 20px; border-radius:24px;
    background:linear-gradient(135deg,#ff6a00,#ee0979);
    color:#fff; font-size:14px; font-weight:700;
    transition:.3s; box-shadow:0 2px 8px rgba(238,9,121,.25);
    animation:pulse 2s infinite;
}
.merchant-apply-btn:hover {
    transform:translateY(-2px); box-shadow:0 4px 16px rgba(238,9,121,.4);
}
@keyframes pulse {
    0%,100% { box-shadow:0 2px 8px rgba(238,9,121,.25); }
    50% { box-shadow:0 2px 16px rgba(238,9,121,.5); }
}
.right button {
    padding:7px 18px; border-radius:20px; font-size:14px; transition:.2s;
    background:transparent; color:var(--text-gray); border:1px solid var(--border);
}
.right button:hover { border-color:var(--primary); color:var(--primary); }
.cart-link { position:relative; color:var(--text-gray); display:flex; align-items:center; gap:4px; }
.cart-link:hover { color:var(--primary); }
.cart-count {
    position:absolute; top:-6px; right:-10px; min-width:18px; height:18px;
    background:var(--primary); color:#fff; border-radius:9px; font-size:11px;
    text-align:center; line-height:18px; padding:0 4px;
}
#user-menu { display:flex; align-items:center; gap:12px; }
#nickname { color:var(--text-dark); font-weight:600; font-size:14px; }

/* ====== 搜索栏 ====== */
.search-bar { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); padding:20px 0; }
.search-bar .container { display:flex; justify-content:center; }
.search-bar input {
    width:500px; height:44px; padding:0 20px; border-radius:22px 0 0 22px;
    border:none; font-size:15px;
}
.search-bar button {
    width:80px; height:44px; background:#333; color:#fff; border-radius:0 22px 22px 0; font-size:15px;
}
.search-bar button:hover { background:#222; }

/* ====== 主内容区 ====== */
.main-content { padding:24px 0 40px; }

/* 轮播图 */
.banner-section { margin-bottom:24px; }
.banner-slider {
    height:360px; border-radius:var(--radius); overflow:hidden; background:var(--bg-light);
    position:relative;
}
.banner-slider img { width:100%; height:100%; object-fit:cover; }
.banner-slider .loading { 
    display:flex; align-items:center; justify-content:center; height:100%;
    color:var(--text-light);
}

/* 分类导航 */
.category-nav {
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; padding:16px;
    background:var(--bg-light); border-radius:var(--radius);
}
.category-nav .cat-item {
    padding:8px 20px; background:#fff; border-radius:20px; font-size:14px;
    color:var(--text-gray); border:1px solid transparent; cursor:pointer; transition:.2s;
}
.category-nav .cat-item:hover { border-color:var(--primary); color:var(--primary); }

/* 商品区块 */
.goods-section { margin-bottom:40px; }
.section-title {
    display:flex; align-items:center; margin-bottom:20px; padding-left:14px;
    border-left:4px solid var(--primary); font-size:20px; font-weight:700;
}
.section-title span { position:relative; top:-1px; }

/* 商品网格 */
.goods-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.goods-card {
    background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
    transition:.25s; cursor:pointer; position:relative;
}
.goods-card:hover {
    transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1);
    border-color:var(--primary);
}
.goods-card .img-wrap {
    aspect-ratio:1; overflow:hidden; background:var(--bg-light);
}
.goods-card img { width:100%; height:100%; object-fit:cover; transition:.3s; }
.goods-card:hover img { transform:scale(1.05); }
.goods-card .info { padding:14px; }
.goods-card .name {
    font-size:14px; color:var(--text-dark); line-height:1.4; height:40px;
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.goods-card .price-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:10px; }
.goods-card .price { color:var(--primary); font-size:20px; font-weight:700; }
.goods-card .price::before { content:'¥'; font-size:13px; font-weight:400; }
.goods-card .original-price { color:var(--text-light); font-size:12px; text-decoration:line-through; }
.goods-card .sales-info { font-size:12px; color:var(--text-light); margin-top:4px; }
.goods-card .tag {
    position:absolute; left:0; top:12px; background:var(--primary); color:#fff;
    font-size:11px; padding:2px 8px; border-radius:0 8px 8px 0;
}
.goods-grid .loading { grid-column:1/-1; text-align:center; padding:60px; color:var(--text-light); }

.load-more-wrap { text-align:center; margin-top:24px; }
#btn-load-more {
    padding:10px 40px; border:1px solid var(--border); border-radius:20px;
    background:#fff; color:var(--text-gray); font-size:14px;
}
#btn-load-more:hover { border-color:var(--primary); color:var(--primary); }
#no-more { color:var(--text-light); font-size:14px; }

/* ====== 底部 ====== */
.footer {
    background:var(--text-dark); color:#888; padding:24px 0; text-align:center; font-size:14px; margin-top:40px;
}

/* ====== 登录/注册弹窗 ====== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
    display:flex; align-items:center; justify-content:center;
}
.modal-overlay .auth-box {
    background:#fff; border-radius:16px; padding:36px 32px; width:380px; box-shadow:0 20px 60px rgba(0,0,0,.2);
    animation:modalIn .25s ease;
}
@keyframes modalIn { from{opacity:0;transform:scale(.9) translateY(20px);} to{opacity:1;transform:scale(1) translateY(0);} }
.auth-box h3 { font-size:22px; text-align:center; margin-bottom:28px; }
.auth-box input {
    width:100%; height:46px; padding:0 16px; border:1. solid #ddd; border-radius:8px;
    margin-bottom:14px; font-size:14px; background:var(--bg-light); border-color:#ddd;
}
.auth-box input:focus { border-color:var(--primary); background:#fff; }
.auth-box button {
    width:100%; height:46px; background:var(--primary); color:#fff; border-radius:8px;
    font-size:16px; margin-top:6px; transition:.2s;
}
.auth-box button:hover { background:var(--primary-dark); }
.code-btn {
    width:auto !important; position:absolute; right:44px; margin-top:6px !important;
    height:38px !important; padding:0 14px !important; font-size:13px !important;
    background:var(--bg-light) !important; color:var(--text-gray) !important; border:1px solid #ddd !important;
    border-radius:6px !important;
}
.code-btn:disabled { opacity:.5; }
.switch-link { text-align:center; margin-top:16px; color:var(--text-light); font-size:14px; }
.switch-link a { color:var(--primary); }

/* ====== Toast提示 ====== */
.toast {
    position:fixed; top:80px; left:50%; transform:translateX(-50%);
    padding:12px 28px; background:rgba(0,0,0,.75); color:#fff; border-radius:8px;
    font-size:14px; z-index:300; opacity:0; pointer-events:none; transition:.3s;
    white-space:nowrap;
}
.toast.show { opacity:1; }

/* ====== 商家入驻申请页 ====== */
.apply-page {
    max-width: 820px; margin: 0 auto;
}
.apply-header {
    text-align: center; margin-bottom: 32px;
}
.apply-header h1 { font-size: 28px; color: var(--text-dark); margin-bottom: 10px; }
.apply-header p { color: var(--text-gray); font-size: 15px; }

/* 步骤条 */
.steps-bar {
    display:flex; align-items:center; justify-content:center; margin-bottom:36px;
    gap:0;
}
.step {
    display:flex; align-items:center; gap:8px; padding:10px 24px; border-radius:24px;
    background:var(--bg-light); color:var(--text-light); font-size:14px;
    transition:.3s; position:relative;
}
.step.active { background:var(--primary); color:#fff; }
.step.done { background:#e8f5e9; color:#4caf50; }
.step-num {
    width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%;
    background:rgba(255,255,255,.4); font-weight:700; font-size:13px;
}
.step.active .step-num { background:rgba(255,255,255,.35); color:#fff; }
.step.done .step-num { background:rgba(76,175,80,.2); }
.step-label { white-space:nowrap; }
.step-line {
    width:60px; height:2px; background: #ddd; margin:0 6px;
}

/* 表单区块 */
.form-section {
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    padding:32px; margin-bottom:24px;
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.form-item { display:flex; flex-direction:column; gap:6px; }
.form-item.full { grid-column:1/-1; }
.form-item.half { grid-column:auto; }
.form-item label {
    font-size:14px; font-weight:600; color:var(--text-dark);
}
.form-item label em { color:var(--primary); margin-left:2px; }
.form-item small { color:var(--text-light); font-size:12px; }
.form-item input,
.form-item select,
.form-item textarea {
    width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:8px;
    font-size:14px; background:#fff; transition:.2s;
}
.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(228,57,60,.08);
}
.form-item textarea { resize:vertical; min-height:80px; }
.form-item select { cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;
    padding-right:32px;
}

/* 上传区域 */
.upload-area .upload-box {
    width:100%; min-height:220px; border:2px dashed #ccc; border-radius:12px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:.2s; background:var(--bg-light);
}
.upload-area .upload-box:hover { border-color:var(--primary); }
.upload-box.small {
    width:200px; min-height:140px; display:inline-flex; vertical-align:top;
}
.upload-placeholder {
    text-align:center; color:var(--text-light); padding:16px;
}
.upload-placeholder p { margin-top:8px; font-size:14px; color:var(--text-gray); }
.upload-placeholder small { font-size:12px; }
.upload-placeholder svg { opacity:.5; }

.upload-row { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.upload-row > label {
    flex-shrink:0; font-size:14px; font-weight:600; color:var(--text-dark);
    padding-top:48px; min-width:100px;
}
.upload-row-label {
    flex-shrink:0; font-size:14px; font-weight:600; color:var(--text-dark);
    padding-top:48px; min-width:110px;
}

/* 地址行 */
.address-row { display:flex; gap:10px; }
.address-row select {
    flex:1; padding:10px 14px; border:1px solid #ddd; border-radius:8px;
    font-size:14px; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    padding-right:28px;
}

/* 操作按钮 */
.form-actions {
    display:flex; justify-content:center; gap:16px; margin-top:8px;
}
.btn-prev, .btn-next, .btn-submit, .btn-home {
    padding:12px 40px; border-radius:24px; font-size:15px; font-weight:600;
    transition:.25s; cursor:pointer; border:none;
}
.btn-prev {
    background:#fff; color:var(--text-gray); border:1px solid var(--border);
}
.btn-prev:hover { border-color:var(--primary); color:var(--primary); }
.btn-next {
    background:var(--primary); color:#fff; padding:12px 48px;
}
.btn-next:hover { background:var(--primary-dark); }
.btn-submit {
    background:linear-gradient(135deg,#52c41a,#389e0d); color:#fff; padding:12px 56px;
}
.btn-submit:hover { box-shadow:0 4px 16px rgba(82,196,26,.35); }
.btn-submit:disabled { opacity:.55; cursor:not-allowed; }
.btn-home { background:var(--primary); color:#fff; margin-top:20px; }

/* 成功提示 */
.success-box {
    text-align:center; padding:60px 20px;
}
.success-box h2 { font-size:26px; color:var(--text-dark); margin:20px 0 10px; }
.success-box p { color:var(--text-gray); font-size:15px; max-width:480px; margin:0 auto 30px; line-height:1.7; }

/* ====== 响应式 ====== */
@media (max-width:1024px) {
    .goods-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
    .goods-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .search-bar input { width:calc(100% - 90px); }
    .nav { display:none; }
}

/* ====== 店铺资质页面 ====== */
.qualification-page { padding:20px 0 40px; }
.qual-header { text-align:center; margin-bottom:36px; }
.qual-header h1 {
    font-size:30px; font-weight:700; color:var(--text-dark);
    margin-bottom:12px; display:inline-block; position:relative; padding:0 24px;
}
.qual-header h1::before, .qual-header h1::after {
    content:''; position:absolute; top:50%; width:30px; height:2px;
    background:var(--primary);
}
.qual-header h1::before { left:-20px; }
.qual-header h1::after { right:-20px; }
.qual-header p { color:var(--text-gray); font-size:15px; }

.qual-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:30px;
    max-width:960px; margin:0 auto 40px;
}
.qual-card {
    background:#fff; border:1px solid var(--border); border-radius:12px;
    overflow:hidden; cursor:pointer; transition:all .25s ease;
    display:flex; flex-direction:column; position:relative;
}
.qual-card:hover {
    box-shadow:0 12px 32px rgba(0,0,0,.1);
    transform:translateY(-4px);
    border-color:var(--primary);
}
.qual-img-wrap {
    width:100%; height:320px; background:var(--bg-light);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.qual-img-wrap img {
    max-width:100%; max-height:100%; object-fit:contain;
    transition:transform .3s ease;
}
.qual-card:hover .qual-img-wrap img { transform:scale(1.03); }
.qual-info { padding:20px 24px; flex:1; }
.qual-info h3 {
    font-size:18px; font-weight:600; color:var(--text-dark);
    margin-bottom:8px;
}
.qual-info p { font-size:13px; color:var(--text-light); line-height:1.6; }
.qual-zoom-hint {
    display:block; text-align:center; padding:12px;
    background:var(--bg-light); color:var(--text-gray); font-size:13px;
    border-top:1px solid var(--border);
}
.qual-card:hover .qual-zoom-hint { background:var(--primary); color:#fff; }

.qual-notice {
    max-width:960px; margin:0 auto; padding:24px 28px;
    background:var(--bg-light); border-radius:12px;
    border-left:4px solid var(--primary);
}
.qual-notice h3 { font-size:16px; color:var(--text-dark); margin-bottom:12px; }
.qual-notice ul { padding-left:20px; }
.qual-notice li {
    font-size:14px; color:var(--text-gray); line-height:2;
}

/* ====== 资质大图查看弹窗 ====== */
.lightbox-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.88);
    z-index:9999; display:none; align-items:center; justify-content:center;
    flex-direction:column; padding:40px 20px;
}
.lightbox-overlay.active { display:flex; animation:fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.lightbox-content {
    max-width:90vw; max-height:90vh; text-align:center;
    display:flex; flex-direction:column; align-items:center;
}
.lightbox-content img {
    max-width:90vw; max-height:75vh; object-fit:contain;
    box-shadow:0 8px 40px rgba(0,0,0,.5); border-radius:4px;
}
.lightbox-content h3 {
    color:#fff; font-size:18px; margin-top:20px;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.lightbox-close {
    position:absolute; top:20px; right:30px;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.15); color:#fff;
    font-size:28px; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s;
}
.lightbox-close:hover { background:var(--primary); }

/* ====== 底部链接 ====== */
.footer-links {
    margin-bottom:12px; font-size:13px;
}
.footer-links a {
    color:#aaa; text-decoration:none; margin:0 6px; transition:color .2s;
}
.footer-links a:hover { color:var(--primary); }
.footer-links .sep { color:#555; margin:0 4px; }

@media (max-width:768px) {
    .qual-grid { grid-template-columns:1fr; gap:20px; }
    .qual-img-wrap { height:240px; }
    .qual-header h1 { font-size:24px; }
}