/* ============================================
   WHITE OAK MEDIA — Client Portal Styles
   02-buttons-forms.css — Buttons, forms, type toggle, service checkboxes
   ============================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  font-weight: 600; font-size: 0.875rem;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary); color: white;
}
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent; color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover { background: var(--color-cream); border-color: var(--color-text-muted); }
.btn-text { background: transparent; color: var(--color-primary); padding: 0.5rem 0.75rem; }
.btn-text:hover { background: var(--color-primary-light); border-radius: var(--radius-sm); }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: var(--color-success); color: white; }
.btn-success:hover { background: #22703f; }
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.btn-google {
  background: var(--color-white); color: var(--color-text);
  border: 1px solid var(--color-border);
  font-weight: 500;
}
.btn-google:hover { background: var(--color-cream); box-shadow: var(--shadow-sm); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; margin-bottom: 0.375rem;
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary);
}
.form-group input, .form-group textarea, .form-select {
  width: 100%; padding: 0.65rem 0.875rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-white); color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-size: 0.9rem;
}
.form-group input:focus, .form-group textarea:focus, .form-select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; cursor: pointer; }
.file-upload-btn { cursor: pointer; }
.file-names { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 0.375rem; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.form-group.has-error .form-error {
  color: #dc2626;
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* ---------- Service Checkbox Group ---------- */
/* ---------- Client Type Toggle ---------- */
.client-type-toggle {
  display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
}
.client-type-toggle .type-btn {
  flex: 1; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600;
  background: var(--color-white); border: none; cursor: pointer;
  color: var(--color-text-muted); transition: all var(--transition);
  border-right: 1px solid var(--color-border);
}
.client-type-toggle .type-btn:last-child { border-right: none; }
.client-type-toggle .type-btn:hover { background: var(--color-gray-50); color: var(--color-text); }
.client-type-toggle .type-btn.active {
  background: var(--color-primary); color: #fff;
}
.service-checkbox-group {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.service-checkbox {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition);
  background: var(--color-white);
}
.service-checkbox:hover { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.service-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-primary);
  cursor: pointer; flex-shrink: 0;
}
.service-check-label { font-size: 0.875rem; font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 REFRESH — Button polish, badges & pills
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Buttons — smoother, better disabled, scale on press ────────── */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.btn:active:not(:disabled):not([disabled]) { transform: scale(0.97); }
.btn-primary {
  background: var(--wom-oak);
  color: #fff;
}
.btn-primary:hover {
  background: var(--wom-oak);
  filter: brightness(0.94);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180, 81, 67, 0.25);
}
.btn-primary:active:not(:disabled):not([disabled]) { transform: scale(0.97) translateY(0); box-shadow: 0 1px 3px rgba(180,81,67,0.2); }

.btn-ghost {
  background: #fff;
  color: var(--wom-navy);
  border: 1px solid var(--wom-stone);
}
.btn-ghost:hover {
  background: var(--wom-warm-white);
  border-color: var(--wom-dim);
  color: var(--wom-navy-deep);
}

/* ─── Badges & Pills — full WOM color spectrum ──────────────────── */
.badge {
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.65rem;
}
.badge-count {
  background: var(--wom-oak);
  color: #fff;
  font-weight: 800;
}

/* Phase badges with WOM palette */
.badge-discovery { background: var(--wom-slate-bg); color: var(--wom-slate); }
.badge-design    { background: var(--wom-copper-bg); color: var(--wom-copper); }
.badge-development { background: var(--wom-amber-bg); color: var(--wom-amber); }
.badge-review    { background: var(--wom-gold-bg); color: #a07820; }
.badge-launch    { background: var(--wom-forest-bg); color: var(--wom-forest); }
.badge-maintenance { background: var(--wom-sage-bg); color: var(--wom-sage); }

/* Status pills */
.badge-status {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.badge-new        { background: var(--wom-slate-bg); color: var(--wom-slate); }
.badge-in-review  { background: var(--wom-amber-bg); color: var(--wom-amber); }
.badge-in-progress { background: var(--wom-copper-bg); color: var(--wom-copper); }

/* ─── Phase 1 — Form polish ─────────────────────────────────────── */
/* ─── Form polish ───────────────────────────────────────────────── */
.form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wom-navy);
  letter-spacing: 0.01em;
}
.form-group input,
.form-group textarea,
.form-select {
  border: 1px solid var(--wom-stone);
  border-radius: 8px;
  background: #fff;
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-select:focus {
  border-color: var(--wom-oak);
  box-shadow: 0 0 0 3px rgba(180, 81, 67, 0.12);
}