/* =============================================================
   ATOZ THEME — COMPONENTS.CSS
   Reusable UI components
   ============================================================= */

/* ---- Forms ---- */
.atoz-form-group { margin-bottom: var(--atoz-space-4); }
.atoz-label { display: block; font-size: var(--atoz-text-sm); font-weight: 600; margin-bottom: var(--atoz-space-2); }
.atoz-input,
.atoz-textarea,
.atoz-select {
  width: 100%;
  padding: var(--atoz-space-3) var(--atoz-space-4);
  border: var(--atoz-border);
  border-radius: var(--atoz-radius);
  background: var(--atoz-white);
  font-size: var(--atoz-text-base);
  color: var(--atoz-text);
  transition: border-color var(--atoz-transition), box-shadow var(--atoz-transition);
}
.atoz-input:focus,
.atoz-textarea:focus,
.atoz-select:focus {
  outline: none;
  border-color: var(--atoz-primary);
  box-shadow: 0 0 0 3px rgba(0,102,255,.15);
}
.atoz-textarea { resize: vertical; min-height: 120px; }

/* ---- Badge ---- */
.atoz-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--atoz-space-3);
  font-size: var(--atoz-text-xs);
  font-weight: 700;
  border-radius: var(--atoz-radius-full);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.atoz-badge--primary  { background: var(--atoz-primary-light); color: var(--atoz-primary); }
.atoz-badge--success  { background: #f0fdf4; color: #16a34a; }
.atoz-badge--warning  { background: #fffbeb; color: #d97706; }
.atoz-badge--danger   { background: #fef2f2; color: #dc2626; }

/* ---- Card ---- */
.atoz-card {
  background: var(--atoz-white);
  border: var(--atoz-border);
  border-radius: var(--atoz-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--atoz-transition);
}
.atoz-card:hover { box-shadow: var(--atoz-shadow); }
.atoz-card__img img { width: 100%; object-fit: cover; }
.atoz-card__body { padding: var(--atoz-space-6); }
.atoz-card__title { font-size: var(--atoz-text-xl); margin-bottom: var(--atoz-space-2); }
.atoz-card__text { color: var(--atoz-text-light); }
.atoz-card__footer { padding: var(--atoz-space-4) var(--atoz-space-6); border-top: var(--atoz-border); }

/* ---- Section ---- */
.atoz-section { padding: var(--atoz-space-20) 0; }
.atoz-section--sm { padding: var(--atoz-space-12) 0; }
.atoz-section--lg { padding: var(--atoz-space-24) 0; }
.atoz-section--dark { background: var(--atoz-gray-900); color: var(--atoz-white); }
.atoz-section--dark h1, .atoz-section--dark h2, .atoz-section--dark h3 { color: var(--atoz-white); }
.atoz-section--primary { background: var(--atoz-primary); color: var(--atoz-white); }
.atoz-section--gray { background: var(--atoz-gray-100); }

.atoz-section__header { text-align: center; max-width: 640px; margin: 0 auto var(--atoz-space-12); }
.atoz-section__subtitle { font-size: var(--atoz-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--atoz-primary); margin-bottom: var(--atoz-space-2); }
.atoz-section__title { font-size: clamp(var(--atoz-text-2xl), 4vw, var(--atoz-text-4xl)); margin-bottom: var(--atoz-space-4); }
.atoz-section__desc { color: var(--atoz-text-light); font-size: var(--atoz-text-lg); }

/* ---- Divider ---- */
.atoz-divider { border: none; border-top: var(--atoz-border); margin: var(--atoz-space-8) 0; }

/* ---- Spinner ---- */
.atoz-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--atoz-gray-300);
  border-top-color: var(--atoz-primary);
  border-radius: 50%;
  animation: atoz-spin .6s linear infinite;
}
@keyframes atoz-spin { to { transform: rotate(360deg); } }

/* ---- Alert ---- */
.atoz-alert {
  padding: var(--atoz-space-4) var(--atoz-space-6);
  border-radius: var(--atoz-radius);
  border-left: 4px solid;
  margin-bottom: var(--atoz-space-4);
}
.atoz-alert--info    { background: var(--atoz-primary-light); border-color: var(--atoz-primary); }
.atoz-alert--success { background: #f0fdf4; border-color: #22c55e; }
.atoz-alert--warning { background: #fffbeb; border-color: #f59e0b; }
.atoz-alert--error   { background: #fef2f2; border-color: #ef4444; }