/* ===== 11 个自定义组件 ===== */

/* 1. bottom-tabbar */
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 414px;
  height: 56px;
  background: var(--color-card);
  border-top: 1px solid var(--color-divider);
  display: flex;
  z-index: 1000;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-xs);
  transition: color 0.2s;
}
.tab-item.active { color: var(--color-primary); }
.tab-icon { font-size: 22px; margin-bottom: 2px; }

/* 2. page-header */
.page-header {
  background: var(--header-gradient);
  color: #fff;
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 100;
}
.page-header-left { display: flex; align-items: center; }
.page-header-back { cursor: pointer; font-size: 20px; margin-right: var(--spacing-sm); }
.page-header-title { font-size: var(--font-lg); font-weight: 600; }
.page-header-right { cursor: pointer; font-size: var(--font-sm); opacity: 0.9; }

/* 3. info-list */
.info-list { background: var(--color-card); margin: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); overflow: hidden; }
.info-list-title { padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); font-size: var(--font-lg); font-weight: 600; }
.info-item { display: flex; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-divider); }
.info-item:last-child { border-bottom: none; }
.info-label { color: var(--color-text-secondary); }
.info-value { text-align: right; }
.info-value.highlight { color: var(--color-primary); font-weight: 600; }
.info-value.danger { color: var(--color-danger); }
.info-value.success { color: var(--color-success); }
.info-value.warning { color: var(--color-warning); }

/* 4. section-card */
.section-card {
  background: var(--color-card);
  margin: var(--spacing-sm) var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
}
.section-card-title { font-size: var(--font-lg); font-weight: 600; margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-divider); }

/* 5. fixed-bottom */
.fixed-bottom {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 414px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-card);
  border-top: 1px solid var(--color-divider);
  z-index: 99;
}

/* 6. car-item */
.car-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-divider);
}
.car-plate { font-size: var(--font-lg); font-weight: 600; }
.car-actions { display: flex; gap: var(--spacing-sm); align-items: center; }
.car-default-badge { font-size: var(--font-xs); background: var(--color-success); color: #fff; padding: 2px 6px; border-radius: 3px; }

/* 7. coupon-card */
.coupon-card {
  display: flex;
  background: var(--color-card);
  margin: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-divider);
}
.coupon-amount {
  background: var(--color-danger);
  color: #fff;
  padding: var(--spacing-md);
  min-width: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.coupon-amount-value { font-size: var(--font-xxl); font-weight: 700; }
.coupon-amount-unit { font-size: var(--font-sm); }
.coupon-info { flex: 1; padding: var(--spacing-sm); }
.coupon-name { font-size: var(--font-md); font-weight: 600; }
.coupon-condition { font-size: var(--font-sm); color: var(--color-text-secondary); margin-top: var(--spacing-xs); }
.coupon-expire { font-size: var(--font-xs); color: var(--color-text-secondary); margin-top: var(--spacing-xs); }
.coupon-action { display: flex; align-items: center; padding: var(--spacing-sm); }
.coupon-card.used .coupon-amount { background: #ccc; }
.coupon-card.expired .coupon-amount { background: #ccc; }
.coupon-card.expired { opacity: 0.6; }

/* 8. faq-item */
.faq-item {
  padding: var(--spacing-md);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
}
.faq-question { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.faq-answer { margin-top: var(--spacing-sm); color: var(--color-text-secondary); font-size: var(--font-sm); line-height: 1.6; display: none; }
.faq-item.expanded .faq-answer { display: block; }
.faq-arrow { transition: transform 0.2s; }
.faq-item.expanded .faq-arrow { transform: rotate(180deg); }

/* 9. message-item */
.message-item {
  padding: var(--spacing-md);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-divider);
}
.message-title { font-size: var(--font-md); font-weight: 600; margin-bottom: var(--spacing-xs); }
.message-content { font-size: var(--font-sm); color: var(--color-text-secondary); line-height: 1.5; }
.message-time { font-size: var(--font-xs); color: var(--color-text-secondary); margin-top: var(--spacing-xs); }
.message-tag { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: var(--font-xs); margin-right: var(--spacing-xs); }
.message-tag.system { background: var(--color-primary-light); color: var(--color-primary); }
.message-tag.promo { background: #FFF7E6; color: var(--color-warning); }

/* 10. parking-item */
.parking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
}
.parking-item:active { background: var(--color-bg); }
.parking-name { font-size: var(--font-lg); font-weight: 600; }
.parking-address { font-size: var(--font-sm); color: var(--color-text-secondary); }
.parking-stats { display: flex; gap: var(--spacing-md); }
.parking-stat { text-align: center; }
.parking-stat-value { font-size: var(--font-lg); font-weight: 600; }
.parking-stat-label { font-size: var(--font-xs); color: var(--color-text-secondary); }

/* 11. setting-item */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-divider);
}
.setting-label { font-size: var(--font-md); }
.setting-value { color: var(--color-text-secondary); font-size: var(--font-sm); }
.setting-arrow { color: #ccc; }

/* ===== antd-mini 替代 ===== */

/* ant-button */
.ant-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-align: center;
  transition: opacity 0.2s;
}
.ant-btn:active { opacity: 0.8; }
.ant-btn-primary { background: var(--color-primary); color: #fff; }
.ant-btn-success { background: var(--color-success); color: #fff; }
.ant-btn-danger { background: var(--color-danger); color: #fff; }
.ant-btn-warning { background: var(--color-warning); color: #fff; }
.ant-btn-default { background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-divider); }
.ant-btn-block { display: block; width: 100%; }
.ant-btn-sm { padding: 6px 16px; font-size: var(--font-sm); }
.ant-btn-lg { padding: 14px 32px; font-size: var(--font-lg); }
.ant-btn-ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }

/* ant-tabs (胶囊) */
.tabs { display: flex; background: var(--color-card); padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); overflow-x: auto; }
.tab-capsule { display: inline-block; padding: 6px 16px; border-radius: 20px; background: var(--color-bg); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; font-size: var(--font-sm); }
.tab-capsule.active { background: var(--color-primary); color: #fff; }

/* ant-empty */
.empty-state { text-align: center; padding: var(--spacing-xl) var(--spacing-md); color: var(--color-text-secondary); }
.empty-icon { font-size: 48px; margin-bottom: var(--spacing-sm); }
.empty-text { font-size: var(--font-sm); }

/* ant-avatar */
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  font-weight: 600;
}
.avatar-lg { width: 64px; height: 64px; font-size: var(--font-xxl); }

/* Toast */
.toast-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}
.toast {
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  animation: toast-fade 2s ease forwards;
}
@keyframes toast-fade { 0% { opacity: 0; transform: scale(0.9); } 10% { opacity: 1; transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }

/* Dialog/Modal */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: var(--color-card);
  border-radius: var(--radius-md);
  width: 85%;
  max-width: 300px;
  overflow: hidden;
}
.modal-title { padding: var(--spacing-md); font-size: var(--font-lg); font-weight: 600; text-align: center; }
.modal-content { padding: 0 var(--spacing-md) var(--spacing-md); font-size: var(--font-md); color: var(--color-text-secondary); text-align: center; }
.modal-actions { display: flex; border-top: 1px solid var(--color-divider); }
.modal-btn { flex: 1; padding: var(--spacing-md); text-align: center; cursor: pointer; border: none; background: transparent; font-size: var(--font-md); }
.modal-btn.primary { color: var(--color-primary); font-weight: 600; }
.modal-btn.danger { color: var(--color-danger); }
.modal-input { width: 100%; padding: 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); margin-top: var(--spacing-sm); font-size: var(--font-md); }

/* Action Sheet */
.action-sheet-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}
.action-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 414px;
  margin: 0 auto;
  background: var(--color-card);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  z-index: 9999;
  max-height: 70vh;
  overflow-y: auto;
}
.action-sheet-title { padding: var(--spacing-md); text-align: center; color: var(--color-text-secondary); font-size: var(--font-sm); }
.action-sheet-item { padding: var(--spacing-md); text-align: center; cursor: pointer; border-bottom: 1px solid var(--color-divider); font-size: var(--font-md); }
.action-sheet-item:active { background: var(--color-bg); }
.action-sheet-cancel { padding: var(--spacing-md); text-align: center; color: var(--color-text-secondary); cursor: pointer; font-size: var(--font-md); margin-top: var(--spacing-sm); }