/* ==========================================================================
   CONTACT CTA FORM — Shared styles for listing, agents, how-it-works
   ========================================================================== */

/* ---- Card Container ---- */
.cta-form{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 24px;
}

/* ---- Title & Subtitle ---- */
.cta-form-title{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  margin: 0 0 4px;
}
.cta-form-sub{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.45;
}

/* ---- Fields ---- */
.cta-form-fields{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cta-form-field label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: .75;
  margin-bottom: 6px;
}
.cta-form-field input{
  width: 100%;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.cta-form-field input::placeholder{
  color: rgba(15,23,42,.35);
}
.cta-form-field input:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.cta-form-field input.error{
  border-color: #dc2626;
}

/* ---- Submit Button ---- */
.cta-form-btn{
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: rgba(15,23,42,.9);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}
.cta-form-btn:hover{
  opacity: .85;
}
.cta-form-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Form-level Error ---- */
.cta-form-error{
  font-size: 12px;
  color: #dc2626;
  margin-top: 8px;
  display: none;
}

/* ---- Trust Line ---- */
.cta-form-trust{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: .7;
}
.cta-form-trust span{
  display: flex;
  align-items: center;
  gap: 4px;
}
.cta-form-trust svg{
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* ---- Success State ---- */
.cta-form-success{
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 12px;
  animation: ctaFadeIn .4s ease;
}
.cta-form-success.visible{
  display: flex;
}
.cta-form-success-icon{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(22,163,74,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.cta-form-success-icon svg{
  width: 24px; height: 24px;
  fill: none; stroke: #16a34a; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.cta-form-success-title{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  margin-bottom: 6px;
}
.cta-form-success-msg{
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
@keyframes ctaFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ==========================================================================
   LANDING PAGE CONTEXT — Centered form within .lp-final
   ========================================================================== */
.lp-final .cta-form{
  text-align: left;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:400px){
  .cta-form-row{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] .cta-form{
  background: var(--card);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .cta-form-field input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e4e4e4;
}
[data-theme="dark"] .cta-form-field input::placeholder{
  color: rgba(228,228,228,.35);
}
[data-theme="dark"] .cta-form-field input:focus{
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
[data-theme="dark"] .cta-form-field input.error{
  border-color: #ef4444;
}
[data-theme="dark"] .cta-form-btn{
  background: #e4e4e4;
  color: #141414;
}
[data-theme="dark"] .cta-form-error{
  color: #ef4444;
}
[data-theme="dark"] .cta-form-success-icon{
  background: rgba(22,163,74,.15);
}