/*
 Theme Name: VFP Single Form Theme
 Theme URI: https://veteranfamilyprotection.com/
 Author: veteranfamilyprotection
 Author URI: https://veteranfamilyprotection.com/
 Description: Single-page, conversion-focused veteran life insurance lead form. Saves leads in WP Admin and emails your team.
 Version: 1.3.0
 Text Domain: vfp-form
*/
:root{
  --bg:#0b1220; --surface:#0f172a; --muted:#9fb1c7; --txt:#e5e7eb;
  --border:#1f2937; --primary:#2563eb; --primary-strong:#1d4ed8;
  --ring:rgba(37,99,235,.35);
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, rgba(16,185,129,.10), transparent 60%),
    var(--bg);
  color:var(--txt);
}
.vh-wrap{min-height:100%; display:flex; flex-direction:column;}
.main{flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:20px;}
.container{width:min(1120px,100%)}
.hero{
  background:linear-gradient(135deg, rgba(30,41,59,.97), rgba(17,24,39,.92));
  border:1px solid var(--border);
  border-radius:16px;
  padding:clamp(16px,2.8vw,28px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
/* Header aesthetic: logo L, texts R */
.hero-top{display:grid; grid-template-columns:240px 1fr; gap:var(--gap); align-items:center; margin-bottom:12px}
.hero-top .logo-left{display:flex; align-items:center; gap:12px}
.hero-top .logo-left .logo-box{background:#fff; border-radius:12px; padding:10px; display:inline-flex; box-shadow:0 1px 0 rgba(0,0,0,.25)}
.hero-top .logo-left .logo-box img{height:54px; width:auto; display:block}
.hero-top .texts-right h1{margin:0 0 6px; font-size:clamp(24px,4.4vw,36px); line-height:1.08; letter-spacing:.2px}
.hero-top .texts-right p.lead{margin:0; color:#cbd5e1; font-size:clamp(13px,2.4vw,16px)}

/* Two columns */
.grid{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap)}
.card{
  background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.78));
  border:1px solid var(--border); border-radius:14px; padding:14px 14px 12px;
}

/* Form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid .full{grid-column:1/-1}
label{font-size:12px; color:#cbd5e1; display:block; margin:2px 0 4px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; padding:10px 11px; border:1px solid var(--border); border-radius:12px;
  background:#0b1220; color:var(--txt); outline:none; transition:box-shadow .2s,border-color .2s; font-size:14px
}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
textarea{min-height:84px; resize:vertical}
button[type=submit]{border:0; background:linear-gradient(180deg,var(--primary),var(--primary-strong)); color:#fff; font-weight:800; padding:11px 14px; border-radius:12px; cursor:pointer; font-size:14px; box-shadow:0 10px 20px rgba(37,99,235,.25)}
button[type=submit]:disabled{opacity:.75; cursor:not-allowed}
.small{font-size:11px; color:#cbd5e1}
.help{margin-top:4px}

/* Phone */
.phone-field{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center}
.phone-prefix{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#0b1220; color:var(--txt); font-weight:700; user-select:none}

/* Benefits */
.benefits{display:grid; gap:12px; margin-top:2px}
.benefit{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:flex-start}
.benefit .tick{width:20px; height:20px; border-radius:50%; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.5); display:grid; place-items:center}
.benefit .tick svg{width:13px; height:13px; fill:#22c55e}
.benefit .text{font-size:14px; color:var(--txt)}
.benefit .sub{font-size:12px; color:var(--muted)}

/* Form footer */
.form-meta{margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px dashed var(--border); padding-top:8px}
.brand-mini{display:flex; align-items:center; gap:8px}
.brand-mini .mini-box{background:#fff; border-radius:8px; padding:4px; display:inline-flex}
.brand-mini .mini-box img{height:18px}

/* Responsive */
@media (max-width:980px){
  .hero-top{grid-template-columns:1fr}
  .hero-top .logo-left{justify-content:center}
  .hero-top .texts-right{text-align:center}
  .grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}


/* Success overlay */
.success-overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(3,6,20,.85); z-index:9999}
.success-card{width:min(520px,94vw); background:linear-gradient(180deg, rgba(17,24,39,.95), rgba(17,24,39,.88)); border:1px solid var(--border); border-radius:18px; padding:20px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.success-card .icon{width:62px; height:62px; margin:0 auto 8px; display:grid; place-items:center; border-radius:50%; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.4); color:#86efac; font-size:26px; font-weight:900}
.success-card h2{margin:6px 0 6px; font-size:24px}
.success-card p{color:#cbd5e1; margin:0 0 12px}
.success-card .close-btn{margin-top:6px; background:#0b1220; border:1px solid var(--border); padding:9px 11px; border-radius:10px; color:#e5e7eb; cursor:pointer; font-weight:700}