/* ===== Retirement Planner – shared styles ===== */
:root{
  --rp-border:#e5e7eb;
  --rp-bg:#fafafa;
  --rp-radius:12px;
  --rp-pad:16px;
  --rp-text:#111827;
  --rp-muted:#4b5563;
  --rp-input:#d1d5db;
}

.rp-card{
  margin-top:24px;
  padding:var(--rp-pad);
  border:1px solid var(--rp-border);
  border-radius:var(--rp-radius);
  background:var(--rp-bg);
  color:var(--rp-text);
}

.rp-card-title{
  margin:0 0 .5rem;
  font-size:1.125rem;
  line-height:1.4;
}
.rp-card-subtitle{ margin:.125rem 0 1rem; color:var(--rp-muted); }

.rp-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:782px){
  .rp-form-grid{ grid-template-columns:1fr 1fr; }
}

/* Fields */
.rp-field{ display:flex; flex-direction:column; gap:.375rem; }
.rp-label{ font-weight:600; }

.rp-input,.rp-select,.rp-textarea{
  width:100%;
  padding:.625rem .75rem;
  border:1px solid var(--rp-input);
  border-radius:.5rem;
  background:#fff;
}
.rp-input:focus,.rp-select:focus,.rp-textarea:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
  border-color:#60a5fa;
}

.rp-help{ font-size:.875rem; color:#6b7280; }

.rp-actions{
  display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.75rem;
}

/* Buttons – scoped so we don't overwrite all WP buttons */
.rp-card .button.button-primary{
  padding:.5rem 1rem;
  border-radius:.5rem;
}

/* Alerts (optional, if your handler outputs them) */
.rp-alert{ padding:.75rem 1rem; border-radius:.5rem; margin:.75rem 0; }
.rp-alert-error{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.rp-alert-success{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }

/* Make lone submit buttons breathe even if no .rp-actions wrap */
.rp-register-card .button[type="submit"],
.rp-register-card input[type="submit"]{
  margin-top:.5rem;
}