/* General Resets & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: #f9fafb; /* Softer background */
  color: #374151; /* Slightly softer black for text */
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; /* 抗锯齿 */
  -moz-osx-font-smoothing: grayscale; /* 灰度渲染 */
}

/* 根变量，与admin.css保持协调 */
:root {
  --primary: #6f42c1;        /* 主色调：深紫色 */
  --primary-light: #8b62d8;  /* 主色调浅色 */
  --primary-dark: #5a32a3;   /* 主色调深色 */
  --text-dark: #1f2937;      /* 主要标题文本 */
  --text-main: #374151;      /* 主要内容文本 */
  --text-secondary: #6b7280; /* 次要文本 */
  --bg-light: #f9fafb;       /* 浅背景 */
  --bg-card: #ffffff;        /* 卡片背景 */
  --border-light: #e5e7eb;   /* 浅边框 */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-medium: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.05);
  --radius-soft: 8px;
  --transition-fast: all 0.2s ease-out;
}

.container {
  width: 100%;
  max-width: 1140px; /* Common breakpoint for content */
  margin: 0 auto;
  padding: 0 20px; 
}

/* Links */
a { color: var(--primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--primary-dark); text-decoration: underline; }

/* Headings */
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75em; color: var(--text-dark); font-weight: 600; }
.page-main-heading { font-size: 2rem; margin-bottom: 1.5rem; text-align: center; color: var(--text-dark); }


/* Header */
.site-header {
  background-color: var(--bg-card); 
  color: var(--text-secondary);
  padding: 0.8rem 0;
  box-shadow: var(--shadow-subtle);
  border-bottom: 1px solid var(--border-light);
  position: sticky; top: 0; z-index: 100;
}
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo a {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.main-nav ul { display: flex; list-style: none; }
.main-nav ul li { margin-left: 25px; }
.main-nav ul li a {
  color: var(--text-secondary); 
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0.2rem; /* Smaller padding for a tighter look */
  transition: color 0.2s;
  position: relative;
}
.main-nav ul li a:hover, .main-nav ul li a.active {
  color: var(--primary);
}
.main-nav ul li a::after { /* Underline effect for active/hover */
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary);
  transition: width 0.25s ease-out;
}
.main-nav ul li a:hover::after, .main-nav ul li a.active::after {
  width: 100%;
}
.main-nav ul li a.nav-admin-link { color: #EF4444; /* Red for admin link */ }
.main-nav ul li a.nav-admin-link:hover { color: #DC2626; }


/* Main Content Area */
.main-content { padding-top: 30px; padding-bottom: 40px; flex-grow: 1; }

/* Alert Messages */
.alert {
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-soft); /* Slightly more rounded */
  font-size: 0.95rem;
  box-shadow: var(--shadow-subtle);
}
.alert-success { background-color: #ECFDF5; color: #065F46; border-color: #A7F3D0; } /* Green */
.alert-error, .alert-danger { background-color: #FEF2F2; color: #991B1B; border-color: #FECACA; } /* Red */
.alert-warning { background-color: #FFFBEB; color: #92400E; border-color: #FDE68A; } /* Yellow */
.alert-info { background-color: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; } /* Blue */
.alert ul { list-style-position: inside; padding-left: 5px; margin-top: 0.5em;}
.alert ul li { margin-bottom: 0.3em; }

/* Product Grid & Cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); /* Min card width */
  gap: 25px;
}
.product-card {
  background: var(--bg-card);
  border-radius: var(--radius-soft); /* Softer radius */
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: var(--transition-fast);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.product-image a.product-image-link { display: block; height: 220px; }
.product-image .product-img-actual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--border-light);
}
.product-details { padding: 18px; flex-grow: 1; display: flex; flex-direction: column; }
.product-details h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.product-details h3 a.product-name-link { color: var(--text-dark); text-decoration: none; }
.product-details h3 a.product-name-link:hover { color: var(--primary); }
.product-details p.description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  flex-grow: 1;
  min-height: 50px; /* For 2-3 lines of text */
  line-height: 1.5;
}
.price-action-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.price-tag { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.buy-button {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-soft);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-fast);
  font-size: 0.9rem;
}
.buy-button:hover, .buy-button:focus { background-color: var(--primary-dark); transform: translateY(-1px); }
.buy-button:disabled { background-color: #9ca3af; cursor: not-allowed; transform: none; }

/* Payment Page & Status Page Styles */
.payment-container, .payment-status {
  background-color: var(--bg-card);
  padding: 2rem 2.5rem;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-hover);
  max-width: 680px;
  margin: 2.5rem auto;
  text-align: center;
}
.payment-container h1, .payment-status h1 { margin-bottom: 1.5rem; font-size: 1.75rem; color: var(--text-dark);}
.payment-container .product-info { margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--border-light); }
.payment-container .product-info h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.payment-container .product-info p { color: var(--text-main); margin-bottom: 0.4rem; }
.payment-container .product-info .price { font-size: 1.25rem; font-weight: bold; color: var(--primary); margin-top: 0.75rem; }

.payment-instructions p, .check-payment p, .payment-status p { margin-bottom: 1rem; line-height: 1.7; color: var(--text-main); }
.payment-instructions strong { color: #D97706; /* Amber color for emphasis */ } 
.payment-button, .button { /* General button styling */
  display: inline-block;
  background-color: var(--primary);
  color: white;
  padding: 0.7rem 1.6rem;
  text-decoration: none;
  border-radius: var(--radius-soft);
  font-weight: 500;
  transition: var(--transition-fast);
  border: none;
  cursor: pointer;
  margin: 0.5rem;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.payment-button:hover, .button:hover { background-color: var(--primary-dark); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); transform: translateY(-1px); }
.button.primary { background-color: #2563EB; } /* Blue for primary actions like "Refresh" */
.button.primary:hover { background-color: #1D4ED8; }
.button.secondary { background-color: #6B7280; } /* Gray for secondary */
.button.secondary:hover { background-color: #4B5563; }
.button.danger { background-color: #DC2626; } /* Red for danger/cancel */
.button.danger:hover { background-color: #B91C1C; }

.payment-status .icon { font-size: 2.5rem; margin-right: 0.75rem; vertical-align: middle; display: block; margin-bottom: 0.5rem; }
.payment-status.success h1 { color: #059669; } .payment-status.success .icon { color: #059669; }
.payment-status.pending h1 { color: #D97706; } .payment-status.pending .icon { color: #D97706; }
.payment-status.warning h1 { color: #F59E0B; } .payment-status.warning .icon { color: #F59E0B; } /* For cancelled/expired/deleted */
.payment-status.error h1 { color: #DC2626; }   .payment-status.error .icon { color: #DC2626; } /* For actual errors */
.payment-status .actions { margin-top: 1.8rem; }
.auto-refresh-notice { font-size: 0.85em; color: var(--text-secondary); margin-top:1.2rem; }

.post-purchase-content.well { /* For content shown after successful purchase */
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  text-align: left;
  line-height: 1.6;
}
.post-purchase-content h4 { margin-top:0; margin-bottom: 0.8rem; font-size: 1.1rem; color: var(--text-dark);}


/* Footer */
.site-footer {
  background-color: #1F2937; /* Darker gray */
  color: #9ca3af; 
  padding: 2.5rem 0;
  text-align: center;
  margin-top: auto; 
  font-size: 0.9rem;
}
.footer-content { }
.footer-links { margin-bottom: 1rem; }
.footer-links a { color: #d1d5db; margin: 0 12px; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: white; }
.copyright { font-size: 0.85rem; }
.powered-by { font-size: 0.8rem; color: #6b7280; margin-top: 0.6rem; }

/* Utility Classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.small-text { font-size: 0.875em; color: var(--text-secondary); }

/* Forms (General, simple styling for frontend if needed) */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: 500; color: var(--text-main); }
.form-control {
  display: block;
  width: 100%;
  padding: .6rem .9rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-card);
  background-clip: padding-box;
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
  color: var(--text-main);
  background-color: var(--bg-card);
  border-color: var(--primary-light); 
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.2); /* Indigo focus ring */
}
.form-control[readonly] { background-color: #f3f4f6; opacity: 1; }
textarea.form-control { min-height: 100px; resize: vertical; }
.form-text { display: block; margin-top: .3rem; font-size: .85em; color: var(--text-secondary); }

/* Pagination (from admin, slightly adapted for frontend if needed) */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: .375rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap; /* Allow wrapping on small screens */
}
.page-item.disabled .page-link {
  color: #9ca3af;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #e5e7eb;
}
.page-item.active .page-link {
  z-index: 3; /* Ensure active is on top */
  color: #fff;
  background-color: var(--primary); 
  border-color: var(--primary);
}
.page-link {
  position: relative;
  display: block;
  padding: .5rem .85rem;
  margin: 2px; /* Spacing for wrapped items */
  line-height: 1.25;
  color: var(--primary); 
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem; /* Individual item radius */
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.page-link:hover {
  z-index: 2;
  color: var(--primary-dark);
  text-decoration: none;
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.code-block-display {
    background-color: #f3f4f6;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-family: monospace;
    font-size: 1.1em;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    cursor: text;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-content { flex-direction: column; align-items: center; }
  .logo { margin-bottom: 0.8rem; }
  .main-nav ul { margin-top: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .main-nav ul li { margin: 5px 10px; } /* Adjust spacing for wrapped items */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;}
  .page-main-heading { font-size: 1.6rem; }
  .payment-container, .payment-status { padding: 1.5rem; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; } /* Single column on very small screens */
  .price-action-row { flex-direction: column; align-items: stretch; }
  .price-tag { margin-bottom: 0.8rem; text-align: center; }
  .buy-button { width: 100%; }
  .main-nav ul li a { font-size: 0.9rem; }
}


/* --- 方案一：活力渐变风格 --- */

.total-sales-banner {
  /* 核心样式：浅色背景和主题色文字 */
  background-color: #f3e8ff; /* 一个非常浅的紫色，与主色调协调 */
  color: var(--primary-dark, #5a32a3);
  
  /* 布局与尺寸 */
  padding: 12px 20px;
  margin-bottom: 2rem;
  
  /* 外观与装饰 */
  border-radius: var(--radius-soft, 8px);
  text-align: center;
  border: 1px solid var(--primary-light, #8b62d8);
  
  /* 字体 */
  font-size: 1rem;
  
  /* 动画效果 */
  animation: fadeIn-banner 0.5s ease-out;
}

.total-sales-banner strong {
  font-weight: 700;
  font-size: 1.2em;
  margin: 0 3px;
}

/* 定义简单的淡入动画 */
@keyframes fadeIn-banner {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}