/* =========================================================================
   KPI:Health Radiology Forms — premium multi-step UI
   Brand: navy #0e3950, teal #007b97, Manrope
   ========================================================================= */

.kpi-rad{
  --navy:#0e3950; --navy-700:#0a2c3e;
  --teal:#007b97; --teal-700:#00657d; --teal-tint:#e6f2f5;
  --ink:#1b2b34; --muted:#5f7480; --line:#dce6ea; --mist:#f5f9fb;
  --radius:22px;
  --shadow:0 30px 70px -40px rgba(14,57,80,.55);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  color:var(--ink); line-height:1.6;
  max-width:600px; margin:0 auto;
}
.kpi-rad *{box-sizing:border-box}
.kpi-rad button{font-family:inherit}

/* Card */
.kpi-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:44px 44px 38px; overflow:hidden;
}
.kpi-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--teal),var(--navy));
}

/* Header */
.kpi-head{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:8px}
.kpi-eyebrow{font-weight:800; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.kpi-eyebrow::before{content:""; display:inline-block; width:22px; height:2px; background:var(--teal); vertical-align:middle; margin-right:9px; border-radius:2px}
.kpi-count{flex:0 0 auto; font-size:.74rem; font-weight:700; color:var(--muted); white-space:nowrap; padding-top:2px}
.kpi-card h2{font-weight:800; color:var(--navy); font-size:1.7rem; line-height:1.18; letter-spacing:-.01em; margin:14px 0 0}
.kpi-sub{color:var(--muted); font-size:.95rem; margin:10px 0 0}

/* Progress */
.kpi-progress{height:5px; background:var(--mist); border-radius:99px; margin:24px 0 30px; overflow:hidden}
.kpi-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--navy)); border-radius:99px; transition:width .45s cubic-bezier(.4,0,.2,1)}

/* Step body animation */
.kpi-step{animation:kpiIn .4s cubic-bezier(.4,0,.2,1)}
@keyframes kpiIn{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
.kpi-step.back{animation:kpiInBack .4s cubic-bezier(.4,0,.2,1)}
@keyframes kpiInBack{from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:none}}

/* Chooser */
.kpi-choices{display:grid; gap:13px; margin-top:6px}
.kpi-choice{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:20px 22px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.kpi-choice:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(0,123,151,.6)}
.kpi-choice .ic{flex:0 0 auto; width:50px; height:50px; border-radius:14px; background:var(--teal-tint); color:var(--teal); display:flex; align-items:center; justify-content:center}
.kpi-choice .ic svg{width:24px; height:24px}
.kpi-choice .tx b{display:block; font-size:1.05rem; font-weight:800; color:var(--navy)}
.kpi-choice .tx span{display:block; font-size:.86rem; color:var(--muted); margin-top:2px}
.kpi-choice .arr{margin-left:auto; color:var(--teal); transition:transform .2s ease}
.kpi-choice:hover .arr{transform:translateX(4px)}

/* Fields */
.kpi-field{margin-bottom:18px}
.kpi-row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.kpi-field label{display:block; font-weight:700; font-size:.8rem; color:var(--navy); margin-bottom:8px}
.kpi-req{color:var(--teal)}
.kpi-opt{font-weight:500; color:var(--muted)}
.kpi-rad input[type=text],
.kpi-rad input[type=email],
.kpi-rad input[type=tel],
.kpi-rad select,
.kpi-rad textarea{
  width:100%; font-family:inherit; font-size:.96rem; color:var(--ink);
  padding:14px 16px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.kpi-rad input:focus,.kpi-rad select:focus,.kpi-rad textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,123,151,.12);
}
.kpi-rad textarea{min-height:108px; resize:vertical}
.kpi-rad select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23007b97' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.kpi-rad input.kpi-invalid,.kpi-rad select.kpi-invalid,.kpi-rad textarea.kpi-invalid{
  border-color:#d2473b; box-shadow:0 0 0 4px rgba(210,71,59,.1);
}
.kpi-error{display:block; color:#b3261e; font-size:.78rem; font-weight:600; margin-top:6px}

/* Secure note */
.kpi-secure{
  font-size:.85rem; color:var(--navy); background:var(--teal-tint);
  border:1px solid #cfe6eb; border-radius:12px; padding:13px 16px; font-weight:600; margin-bottom:18px;
  display:flex; gap:10px; align-items:flex-start;
}
.kpi-secure svg{flex:0 0 auto; width:18px; height:18px; color:var(--teal); margin-top:1px}

/* Consent */
.kpi-consent{display:flex; gap:12px; align-items:flex-start; margin:4px 0 6px; font-size:.84rem; color:var(--muted); font-weight:500; cursor:pointer}
.kpi-consent input{width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--teal)}
.kpi-consent a{color:var(--teal); font-weight:700}

/* Actions */
.kpi-actions{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px}
.kpi-actions.end{justify-content:flex-end}
.kpi-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none;
  font-weight:700; font-size:.96rem; padding:15px 30px; border-radius:99px;
  background:var(--teal); color:#fff; transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 26px -16px rgba(0,123,151,.8);
}
.kpi-btn:hover{background:var(--teal-700); transform:translateY(-2px)}
.kpi-btn:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none}
.kpi-btn svg{width:16px; height:16px}
.kpi-back{
  background:none; border:none; cursor:pointer; color:var(--muted); font-weight:700; font-size:.92rem;
  display:inline-flex; align-items:center; gap:8px; padding:8px 4px; transition:color .2s ease;
}
.kpi-back:hover{color:var(--navy)}
.kpi-back svg{width:15px; height:15px}

/* Spinner */
.kpi-spin{width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:kpiSpin .7s linear infinite}
@keyframes kpiSpin{to{transform:rotate(360deg)}}

/* Success */
.kpi-success{text-align:center; padding:18px 6px; animation:kpiIn .4s ease}
.kpi-success .ic{width:64px; height:64px; border-radius:50%; background:var(--teal-tint); color:var(--teal); display:flex; align-items:center; justify-content:center; margin:0 auto 18px}
.kpi-success .ic svg{width:32px; height:32px}
.kpi-success h2{color:var(--navy)}
.kpi-success p{color:var(--muted); margin-top:10px; font-size:.96rem}

/* Form-level error */
.kpi-formerror{color:#b3261e; font-size:.86rem; font-weight:600; margin-top:14px; text-align:right}

@media(max-width:560px){
  .kpi-card{padding:30px 22px 26px}
  .kpi-row2{grid-template-columns:1fr}
  .kpi-card h2{font-size:1.42rem}
}