/* ══════════════════════════════════════
   Buttons & Form Components
══════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: all .2s;
  border: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 14px rgba(224,90,0,.3);
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(224,90,0,.4);
  transform: translateY(-1px);
}

.btn-outline {
  background: white;
  color: var(--primary-hex);
  border-color: var(--border);
}
.btn-outline:hover {
  border-color: var(--primary-hex);
  background: var(--accent);
}

.btn-wa {
  background: #25D366;
  color: white;
  box-shadow: 0 4px 14px rgba(37,211,102,.25);
}
.btn-wa:hover {
  background: #20bd5a;
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
}

.btn-lg  { height: 3.5rem; padding: 0 2rem; font-size: 1rem; }
.btn-sm  { height: 2rem; padding: 0 .875rem; font-size: .8rem; }
.btn-full { width: 100%; }

/* ── Form Elements ── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: white;
  font-size: .9375rem;
  font-family: var(--font-body);
  color: var(--foreground);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary-hex);
  box-shadow: 0 0 0 3px rgba(224,90,0,.12);
}

.form-textarea { resize: none; line-height: 1.6; }

.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted-foreground); }

/* ── Toast ── */
.toast-wrap {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  padding: .875rem 1.5rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 500;
  color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  pointer-events: auto;
  animation: toastIn .3s ease;
}
.toast.success { background: var(--primary); }
.toast.error   { background: #dc2626; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}