/* ==========================================================================
   components.css — EasyCasaItaly child theme
   Task A3 — Fase 8 frontend redesign
   Depends on: design-tokens.css (enqueued first)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base reset
   -------------------------------------------------------------------------- */
html { font-family: var(--font-sans); }
body { color: var(--color-text-primary-light); background: var(--color-card-light); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn--primary-dark {
  background: var(--color-brand);
  color: var(--color-card-light);
}
.btn--primary-dark:hover { background: var(--color-brand-bright); }

.btn--primary-ink {
  background: var(--color-ink);
  color: var(--color-card-light);
}
.btn--primary-ink:hover { background: #1a2d24; }

.btn--primary-brand {
  background: var(--color-brand-bright);
  color: var(--color-ink);
}
.btn--primary-brand:hover { background: var(--color-brand); color: var(--color-card-light); }

.btn--secondary {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

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

.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.2;
}

.badge--founders {
  background: var(--color-brand);
  color: var(--color-card-light);
}
.badge--founders::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-card-light);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .badge--founders::before { animation: none; }
}

.badge--per-sempre {
  background: var(--color-accent-warm);
  color: var(--color-card-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--savings {
  background: var(--color-warning);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card--light {
  background: var(--color-card-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.card--dark {
  background: var(--color-card-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: var(--color-text-primary-dark);
}

.card--highlighted {
  background: var(--color-ink);
  color: var(--color-card-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-primary-light);
  margin-bottom: var(--sp-2);
}

.form-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #CBD5D0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-body);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus-visible {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0,167,113,0.15);
}
.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-helper {
  color: var(--color-text-secondary-light);
  font-size: var(--fs-body-sm);
  margin-top: var(--sp-1);
}

.form-error {
  color: var(--color-error);
  font-size: var(--fs-body-sm);
  margin-top: var(--sp-1);
}

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: var(--fs-body-sm);
}

.alert--success {
  background: rgba(16,185,129,0.08);
  border-color: var(--color-success);
  color: #065f46;
}

.alert--warning {
  background: rgba(245,158,11,0.08);
  border-color: var(--color-warning);
  color: #92400e;
}

.alert--error {
  background: rgba(239,68,68,0.08);
  border-color: var(--color-error);
  color: #991b1b;
}