/* =========================
   好邻分享 components.css
   全站公共组件样式
========================= */

:root{
  --color-primary:#b42318;
  --color-secondary:#1f3a5f;
  --color-accent:#b42318;
  --color-bg:#f5f7fb;
  --color-card:#ffffff;
  --color-text:#222222;
  --color-text-secondary:#5f6b7a;
  --color-border:#e4e8f0;
  --color-light:#f8fbff;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;

  --shadow-card:0 4px 16px rgba(0,0,0,0.04);
  --shadow-hover:0 10px 24px rgba(15,23,42,0.08);
}

/* ===== Buttons ===== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  transition:all .2s ease;
  font-family:inherit;
}

.btn-buy,
.btn-primary,
.btn-submit{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}

.btn-buy:hover,
.btn-primary:hover,
.btn-submit:hover{
  background:#c53024;
  border-color:#c53024;
}

.btn-info,
.btn-secondary{
  background:var(--color-secondary);
  color:#fff;
  border-color:var(--color-secondary);
}

.btn-info:hover,
.btn-secondary:hover{
  background:#294d7a;
  border-color:#294d7a;
}

.btn-light,
.btn-reset{
  background:#fff;
  color:var(--color-secondary);
  border-color:#d9e1ef;
}

.btn-light:hover,
.btn-reset:hover{
  border-color:var(--color-secondary);
  color:var(--color-secondary);
}

/* ===== Cards ===== */

.section-card,
.product-card,
.feature-card,
.info-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:14px;
  box-shadow:var(--shadow-card);
}

.product-card,
.feature-card{
  transition:transform .2s ease, box-shadow .2s ease;
}

.product-card:hover,
.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

/* ===== Note Box ===== */

.note-box,
.notice-box{
  background:#f8fbff;
  border:1px solid #e4ebf7;
  border-radius:12px;
  padding:18px 20px;
  color:var(--color-text-secondary);
  line-height:1.8;
}

/* ===== Forms ===== */

input,
select,
textarea{
  border:1px solid #d8e0eb;
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
  font-family:inherit;
  outline:none;
  background:#fff;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#5b9cff;
  box-shadow:0 0 0 3px rgba(91,156,255,0.12);
}

textarea{
  resize:vertical;
  line-height:1.8;
}

/* ===== Tables ===== */

.table,
.price-table,
.topic-table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.price-table th,
.topic-table th{
  background:#eaf3ff;
  color:#24508e;
  font-weight:700;
}

.table th,
.table td,
.price-table th,
.price-table td,
.topic-table th,
.topic-table td{
  padding:14px;
  border-bottom:1px solid #edf1f6;
  text-align:left;
}

/* ===== Badge ===== */

.badge,
.topic-badge,
.status-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.topic-badge{
  background:#ff8a3d;
  color:#fff;
}

/* ===== Button Group ===== */

.btn-group,
.product-actions,
.post-actions,
.page-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* ===== Mobile ===== */

@media (max-width:640px){
  .btn{
    min-height:40px;
    padding:9px 14px;
    font-size:14px;
  }

  .btn-group,
  .product-actions,
  .post-actions,
  .page-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn-group .btn,
  .product-actions .btn,
  .post-actions .btn,
  .page-actions .btn{
    width:100%;
  }

  .note-box,
  .notice-box{
    padding:16px;
  }
}