/* LiverCare AI — Patient flow · Signup Step 1: Create Patient Account
   Values in reference px (approved design scaled to a 720 px canvas). */

.dr-page { --card-w: 547; --ref-h: 960; }

.pa-card { padding: calc(36 * var(--au)) calc(38 * var(--au)) calc(33 * var(--au)); }

.pa-head .dr-logo__mark { width: calc(42 * var(--au)); height: calc(33 * var(--au)); }
.pa-head__alt { font-size: calc(13.5 * var(--au)); color: var(--sub); }
.pa-head__alt a { font-size: calc(15 * var(--au)); }

.pa-title {
  margin-top: calc(38 * var(--au));
  font-size: calc(34 * var(--au));
  text-align: center;
}

.pa-sub {
  margin-top: calc(9 * var(--au));
  font-size: calc(17 * var(--au));
  text-align: center;
  color: var(--navy-2);
}

/* ---- 3-step stepper ---- */
.pa-card .dr-steps {
  grid-template-columns: repeat(3, 1fr);
  margin: calc(26 * var(--au)) calc(-14 * var(--au)) 0;
}

.pa-card .dr-step__dot {
  width: calc(40 * var(--au));
  height: calc(40 * var(--au));
  font-size: calc(17 * var(--au));
  font-weight: 500;
}

.pa-card .dr-step.is-todo .dr-step__dot {
  color: var(--blue);
  background: #dfeaf9;
  box-shadow: inset 0 0 0 1px #cfdff4;
}

.pa-card .dr-step:not(:first-child)::before,
.pa-card .dr-step:not(:first-child)::after {
  top: calc(20 * var(--au));
  left: calc(-50% + 30 * var(--au));
  right: calc(50% + 30 * var(--au));
}

.pa-card .dr-step__label {
  margin-top: calc(13 * var(--au));
  font-size: calc(14 * var(--au));
  white-space: nowrap;
}

/* ---- fields ---- */
.pa-row { margin-top: calc(22 * var(--au)); }
.pa-row--first { margin-top: calc(36 * var(--au)); }
.dr-alert + .pa-row--first { margin-top: calc(18 * var(--au)); }

.pa-card .dr-label { margin-bottom: calc(5 * var(--au)); font-size: calc(14.5 * var(--au)); }

.pa-field { --fh: 48; }
.pa-field .dr-ico { width: calc(21 * var(--au)); height: calc(21 * var(--au)); margin-left: calc(16 * var(--au)); }
.pa-field input { font-size: calc(14.5 * var(--au)); padding-left: calc(14 * var(--au)); }

.pa-pw { column-gap: calc(18 * var(--au)); margin-top: calc(21 * var(--au)); }
.pa-pw .dr-eye { width: calc(38 * var(--au)); }
.pa-pw .dr-ico { margin-left: calc(14 * var(--au)); }
.pa-pw .dr-field input { font-size: calc(13.5 * var(--au)); padding-left: calc(10 * var(--au)); padding-right: 0; }

/* ---- privacy card ---- */
.pa-privacy {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--au));
  min-height: calc(103 * var(--au));
  margin-top: calc(22 * var(--au));
  padding: calc(20 * var(--au)) calc(22 * var(--au)) calc(18 * var(--au)) calc(22 * var(--au));
  border: 1px solid rgba(206, 224, 246, 0.9);
  border-radius: calc(12 * var(--au));
  background: linear-gradient(160deg, rgba(232, 241, 253, 0.92), rgba(223, 235, 251, 0.86));
}

.pa-privacy__icon {
  flex: 0 0 auto;
  width: calc(32 * var(--au));
  height: calc(38 * var(--au));
  margin-top: calc(3 * var(--au));
  color: var(--blue);
  filter: drop-shadow(0 calc(4 * var(--au)) calc(8 * var(--au)) rgba(22, 112, 240, 0.22));
}

.pa-privacy__title {
  margin: 0;
  font-size: calc(16.5 * var(--au));
  font-weight: 700;
  color: var(--navy);
}

.pa-privacy__body {
  margin: calc(6 * var(--au)) 0 0;
  font-size: calc(14 * var(--au));
  line-height: 1.38;
  color: var(--sub);
}

/* ---- or / google / next / footer ---- */
.pa-or { margin-top: calc(18 * var(--au)); }
.pa-or span { font-size: calc(14 * var(--au)); letter-spacing: 0; font-weight: 400; }

.pa-google {
  margin-top: calc(21 * var(--au));
  height: calc(52 * var(--au));
  font-size: calc(16.5 * var(--au));
  border-color: #a9cdf2;
}

.pa-submit { margin-top: calc(15 * var(--au)); }
.pa-btn { height: calc(52 * var(--au)); font-size: calc(17 * var(--au)); }

.pa-foot {
  margin: calc(30 * var(--au)) 0 0;
  font-size: calc(14.5 * var(--au));
  text-align: center;
  color: var(--sub);
}

.pa-foot .dr-link { margin-left: calc(6 * var(--au)); }

@media (max-width: 640px) {
  .pa-title { font-size: 27px; margin-top: 26px; }
  .pa-card .dr-steps { margin-left: -8px; margin-right: -8px; }
  .pa-card .dr-step__label { font-size: 11px; white-space: normal; }
  .pa-privacy { padding: 16px; gap: 14px; }
}

/* very narrow phones: keep both password labels on one line so the two
   fields stay perfectly side by side */
@media (max-width: 360px) {
  .pa-pw .dr-label { font-size: 12.5px; white-space: nowrap; }
  .pa-pw .dr-field input { font-size: 13px; }
}