/* ==========================================================================
   FIN V2 — styling for the carried-over health lead popup.

   The markup and script in /v2/_inc/modal_saude.php are the v1 originals and
   were not touched, so its class names are the v1 ones (.wiz, .chip, .in2,
   .btnx, .tcard, .prof …). Rather than rename anything — which would break
   the wizard's own selectors — this file re-skins those exact classes in the
   V2 language, and aliases the v1 token names onto V2's tokens so the
   inherited rules resolve.

   Everything is scoped inside .modal so the page's own .field / .btn styles
   and these never collide.
   ========================================================================== */

.modal{
  /* v1 token names -> V2 palette */
  --line:var(--line-strong);
  --ink:#f2f4f7;
  --mut:var(--muted);
  --p1:var(--green-light);
  --p2:var(--green);
  --svc-panel:var(--panel);
  --svc-panel2:var(--panel-2);
  --svc-ink:#f2f4f7;
  --svc-muted:var(--muted);
  --svc-line:rgba(255,255,255,.12);
  --svc-gold:var(--green);
  --svc-gold-light:var(--green-light);

  position:fixed; inset:0;
  background:rgba(4,6,8,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; z-index:9999; padding:18px;
}
.modal.open{ display:flex; align-items:center; justify-content:center; }

.modal .modal-dialog{
  color:var(--ink);
  width:min(980px,100%);
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--r-m);
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.05);
  max-height:calc(100dvh - 36px);
  display:flex; flex-direction:column;
}

.modal .modal-head{
  position:sticky; top:0; z-index:5;
  background:var(--panel);
  border-bottom:1px solid var(--line-strong);
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal .modal-title{
  font-size:15px; font-weight:700; letter-spacing:-.02em;
  display:flex; gap:10px; align-items:center;
}
.modal .modal-body{ padding:18px; overflow:auto; -webkit-overflow-scrolling:touch; }

.modal .modal-close{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 auto;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); color:var(--ink);
  cursor:pointer; font-weight:700; line-height:1; opacity:1; visibility:visible;
  transition:background var(--motion-fast) var(--ease);
}
.modal .modal-close:hover{ background:rgba(255,255,255,.12); }

/* ------------------------------------------------------------- wizard --- */
.modal .wiz{
  border:1px solid var(--line-strong); border-radius:var(--r-m);
  background:rgba(255,255,255,.02); padding:16px;
}
.modal .wiz-grid{ display:grid; grid-template-columns:320px 1fr; gap:14px; }
@media (max-width:860px){ .modal .wiz-grid{ grid-template-columns:1fr; } }

.modal .wiz-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.modal .step-pill{
  font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 13px; border-radius:var(--r-pill);
  border:1px solid rgba(74,222,128,.3); background:rgba(34,197,94,.1); color:var(--green-light);
}
.modal .prog{ flex:1 1 auto; height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.modal .prog > div{ height:100%; width:0%; background:var(--green); border-radius:999px; transition:width var(--motion-normal) var(--ease); }

.modal .wiz-step{ display:none; }
.modal .wiz-step.active{ display:block; }

.modal .tcard{
  border:1px solid var(--line-strong); border-radius:var(--r-m);
  background:var(--panel-2); padding:18px;
}

/* ------------------------------------------------------------- fields --- */
.modal .fgrid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .modal .fgrid{ grid-template-columns:1fr; } }

.modal .field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink); }
.modal .in2{
  width:100%; padding:13px 15px; border-radius:var(--r-m);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04);
  color:var(--ink); font-family:var(--sans); font-size:16px; font-weight:400;
  outline:none; box-shadow:none;
  transition:border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.modal .in2::placeholder{ color:var(--faint); opacity:1; }
.modal .in2:focus{ border-color:rgba(74,222,128,.6); background:rgba(255,255,255,.06); box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.modal .in2.is-error{ border-color:rgba(239,68,68,.6); box-shadow:0 0 0 4px rgba(239,68,68,.14); }
.modal textarea.in2{ min-height:104px; resize:vertical; }
.modal .help{ color:var(--faint); font-size:13px; line-height:1.55; margin-top:7px; }

/* -------------------------------------------------------------- chips --- */
.modal .chips{ display:flex; gap:8px; flex-wrap:wrap; }
.modal .chip{
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04);
  color:var(--ink); border-radius:var(--r-pill); padding:11px 15px;
  font-size:14.5px; font-weight:600; cursor:pointer; user-select:none;
  transition:background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.modal .chip:hover{ background:rgba(255,255,255,.08); }
.modal .chip input{ display:none; }
.modal .chip.active{
  background:var(--green); border-color:transparent; color:#04140b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}

/* ------------------------------------------------------------ buttons --- */
.modal .wiz-actions{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-strong);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center;
}
.modal .btnx{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:12px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04);
  color:var(--ink); font-size:14.5px; font-weight:700; cursor:pointer; text-decoration:none;
  transition:background var(--motion-normal) var(--ease), border-color var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease);
}
.modal .btnx:hover{ background:rgba(255,255,255,.09); }
.modal .btnx.primary{
  background:var(--green); border-color:transparent; color:#04140b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px rgba(34,197,94,.22);
}
.modal .btnx.primary:hover{ background:var(--green-light); transform:translateY(-1px); }
.modal .btnx.ghost{ background:transparent; }
.modal .btnx:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* ----------------------------------------------------- summary sidebar -- */
.modal .prof{
  border:1px solid rgba(74,222,128,.2); border-radius:var(--r-m);
  background:rgba(34,197,94,.05); padding:16px;
  position:sticky; top:14px; height:fit-content;
}
@media (max-width:860px){ .modal .prof{ position:relative; top:auto; } }
.modal .prof h3{ margin:0 0 10px; font-size:13px; font-weight:700; display:flex; gap:8px; align-items:center; color:var(--ink); }
.modal .prof .mini{ color:var(--muted); font-size:12.5px; line-height:1.55; }
.modal .prof .pitem{
  margin-top:10px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03); border-radius:var(--r-s); padding:12px;
}
.modal .prof .pitem .k{ font-family:var(--num); font-size:10.5px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.modal .prof .pitem .v{ margin-top:5px; font-weight:600; color:var(--ink); }

/* --------------------------------------------------------------- notes -- */
.modal .mini-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--green-wash); border:1px solid rgba(74,222,128,.22);
  padding:14px; border-radius:var(--r-m); color:var(--muted); line-height:1.6; margin-top:12px;
  font-size:14px;
}
.modal .mini-note i{ color:var(--green-light); margin-top:3px; }
.modal .muted{ color:var(--muted); }

@media (max-width:600px){
  .modal{ padding:0; }
  .modal .modal-dialog{ max-height:100dvh; border-radius:0; border:0; width:100%; }
  .modal .modal-body{ padding:14px; }
  .modal .wiz{ padding:12px; border:0; background:transparent; }
  .modal .tcard{ padding:14px; }
  .modal .wiz-actions .btnx{ flex:1 1 100%; }
}


/* ==========================================================================
   POPUP — arrival, and the phone

   The popup is the v1 component, restyled. This adds how it arrives, and the
   two things that matter on a phone: the page behind it must not scroll, and
   the action buttons must stay reachable while a long step scrolls.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @keyframes modalBackdropIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes modalIn{
    from{ opacity:0; transform:translateY(26px) scale(.97); }
    to{ opacity:1; transform:none; }
  }
  @keyframes modalSheetIn{
    from{ opacity:.6; transform:translateY(100%); }
    to{ opacity:1; transform:none; }
  }
  .modal.open{ animation:modalBackdropIn .28s ease; }
  .modal.open .modal-dialog{ animation:modalIn .46s var(--ease-out-expo); }
  @media (max-width:600px){
    .modal.open .modal-dialog{ animation:modalSheetIn .5s var(--ease-out-expo); }
  }
}

body:has(.modal.open){ overflow:hidden; }
.modal .modal-body{ overscroll-behavior:contain; }
.modal .modal-dialog{ overscroll-behavior:contain; }

/* the header's own progress line, lit */
.modal .prog > div{ box-shadow:0 0 12px var(--green-glow); }

/* step change: the new step slides up into place */
@media (prefers-reduced-motion:no-preference){
  @keyframes stepIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  .modal .wiz-step.active,.modal .wizstep.active{ animation:stepIn .36s var(--ease-out-expo); }
}

/* chips: a small press response, and a firmer selected state */
.modal .chip:active{ transform:scale(.97); }
.modal .chip.active{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(34,197,94,.22); }
.modal .in2:disabled{ opacity:.5; }

@media (max-width:600px){
  .modal .modal-head{ padding:14px 16px calc(14px); }
  .modal .modal-title{ font-size:14.5px; line-height:1.3; }
  /* the actions stay pinned to the foot of the sheet while a long step scrolls */
  .modal .wiz-actions{
    position:sticky; bottom:-14px; z-index:3;
    margin:18px -14px -14px; padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(19,19,22,0), var(--panel) 32%);
    border-top:1px solid var(--line-strong);
  }
  .modal .wiz-actions .btnx{ min-height:50px; }
  .modal .fgrid{ gap:12px; }
  .modal .in2{ font-size:16px; }               /* 16px stops iOS zooming into the field */
}