/*
 * core/components.css
 * Shared primitives: container - btn - badge - card - form - flash - product-grid - product-card - price - section - error-page
 * No :root / reset rules. Load after tokens.css and reset.css.
 */

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  height: 44px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-10);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(200,16,46,.2), 0 4px 12px rgba(200,16,46,.25);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
  color: #fff;
}

.btn-outline, .btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover, .btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

/* Zalo-style outline button - keeps Zalo blue on hover (does not turn red) */
.btn--zalo {
  color: var(--color-zalo);
  border-color: var(--color-zalo);
  background: #fff;
}
.btn--zalo:hover {
  background: var(--color-zalo);
  border-color: var(--color-zalo);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-bg-soft);
  text-decoration: none;
}

.btn-accent {
  background: var(--color-accent);
  color: #1F2937;
  border-color: var(--color-accent);
  box-shadow: 0 1px 2px rgba(245,158,11,.2), 0 4px 12px rgba(245,158,11,.25);
}
.btn-accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  text-decoration: none;
}

/* btn-white: "Leave phone number" on footer-cta */
.btn-white {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.btn-white:hover {
  background: rgba(255,255,255,0.2);
  text-decoration: none;
  color: #fff;
}

.btn-zalo {
  background: var(--color-zalo);
  color: #fff;
  border-color: var(--color-zalo);
}
.btn-zalo:hover {
  background: #0052cc;
  border-color: #0052cc;
  text-decoration: none;
  color: #fff;
}

.btn-dark {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

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

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  height: 36px;
  gap: 6px;
}

.btn-lg {
  padding: 14px 26px;
  font-size: 15px;
  height: 52px;
  gap: 10px;
}

.btn-xl {
  padding: 18px 32px;
  font-size: 16px;
  height: 58px;
  gap: 10px;
}

.btn-full { width: 100%; }

/* Forms */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
.form-control.is-invalid { border-color: var(--color-error); }
.form-error {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

/* Flash messages */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}
.flash-success { background: var(--color-success-bg); color: #166534; border: 1px solid #BBF7D0; }
.flash-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.flash-warning { background: #FEF9C3; color: #92400E; border: 1px solid #FDE68A; }
.flash-info    { background: var(--color-info-bg); color: #1E40AF; border: 1px solid #BFDBFE; }

/* Cards */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-body { padding: var(--space-6); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  line-height: 1.3;
  white-space: nowrap;
}
.badge-default  { background: var(--color-bg-soft); color: var(--color-text); border-color: var(--color-border); }
.badge-primary  { background: #FDE8EC; color: var(--color-primary-dark); border-color: #FBC8D0; }
.badge-accent   { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.badge-success  { background: var(--color-success-bg); color: #15803D; border-color: #BBF7D0; }
.badge-info     { background: var(--color-info-bg); color: #1D4ED8; border-color: #BFDBFE; }
.badge-danger   { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }
.badge-solid    { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.badge-solid-accent { background: var(--color-accent); color: #1F2937; border-color: var(--color-accent); }
.badge-dark     { background: #1F2937; color: #fff; border-color: #1F2937; }
/* Legacy aliases */
.badge-red      { background: var(--color-primary); color: #fff; }
.badge-red-soft { background: #FEE2E2; color: #991B1B; }
.badge-green    { background: var(--color-success-bg); color: #166534; }
.badge-yellow   { background: #FEF9C3; color: #92400E; }
.badge-gray     { background: #F3F4F6; color: #374151; }

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* Product card */
.product-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.product-card__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card__img img { transform: scale(1.04); }
.product-card__body { padding: var(--space-3) var(--space-4); }
.product-card__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__price {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary);
}
.product-card__price-original {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

/* Price helpers */
.price-main, .price-sale { color: var(--color-primary); font-weight: 700; }
.price-main--lg, .price-sale--lg { font-size: var(--font-size-xl); }
.price-original { color: var(--color-text-soft); text-decoration: line-through; font-size: var(--font-size-sm); }

/* Section */
.section { padding: var(--space-12) 0; }
.section--alt  { background: var(--color-bg-soft); }
.section--warm { background: var(--color-bg-warm); }
.section--dark { background: var(--color-footer-bg); color: #fff; }
.section--red  { background: var(--color-primary); color: #fff; }

.section-heading { text-align: center; margin-bottom: var(--space-10); }
.section-title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  letter-spacing: -0.6px;
}
.section--dark .section-title,
.section--red .section-title { color: #fff; }
.section-subtitle { color: var(--color-text-muted); font-size: var(--font-size-base); margin-bottom: 0; }

/* Error pages */
.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-4);
}
.error-page__code  { font-size: 5rem; font-weight: 900; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-4); }
.error-page__title { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); }
.error-page__msg   { color: var(--color-text-muted); max-width: 440px; margin-bottom: var(--space-8); }

/* Keyframes */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

/* Responsive - product-grid (container-pad lives in tokens.css) */
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}