/* ============================================================
   Components — Button, Card, Badge, Form, Table, Toast
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}
.btn-danger:hover { filter: brightness(0.9); }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); min-height: 36px; }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); min-height: 52px; }

.btn-full { width: 100%; }

/* ---- Cards ---- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}

.card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.card-desc {
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }
.badge-muted   { background: #F3F4F6; color: #6B7280; }

/* ---- Tags (tech stack) ---- */
.tag {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

/* ---- Forms ---- */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  outline: none;
  min-height: 44px;
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.15);
}
.form-control::placeholder { color: var(--color-muted); }
.form-control.is-invalid { border-color: var(--color-danger); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B9090' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

textarea.form-control { min-height: 120px; resize: vertical; }

.form-hint { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-1); }
.form-error { font-size: var(--text-sm); color: var(--color-danger); margin-top: var(--space-1); }

/* ---- Table (Admin) ---- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
thead {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--color-surface); }

/* ---- Toast / Alert ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-sm);
}
.alert-success { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }
.alert-danger   { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }
.alert-warning  { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.alert-info     { background: #DBEAFE; border-color: #93C5FD; color: #1E40AF; }

/* ---- Divider ---- */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}

/* ---- Price Card ---- */
.price-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: var(--transition-base);
  position: relative;
}
.price-card.featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
.price-card.featured::before {
  content: 'แนะนำ';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}
.price-amount {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1;
}
.price-unit {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-weight: var(--font-normal);
}
.price-features { list-style: none; margin: var(--space-6) 0; }
.price-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.price-features li:last-child { border-bottom: none; }
.price-features li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: bold;
  flex-shrink: 0;
}

/* ---- Skeleton Loader ---- */
.skeleton {
  background: linear-gradient(90deg, #f0fffe 25%, #e6faf9 50%, #f0fffe 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}