/* Native vv-25 presentation: registration/signing card, Haffer, theme palette,
 * 54px controls and pill buttons. Existing DOM and JS state classes are retained. */
.vv-connection-forms {
  --connection-blue: #5dabff;
  --connection-ink: #0f0f0f;
  --connection-muted: #59637a;
  --connection-border: #8c94a8;
  box-sizing: border-box;
  min-width: 0;
  padding: 48px 16px;
  background: #99aeff;
  color: var(--connection-ink);
  font: 16px/24px Haffer, Arial, sans-serif;
}
.vv-connection-forms *, .vv-connection-forms *::before, .vv-connection-forms *::after { box-sizing: border-box; }
.vv-connection-forms .form-reg-row { display: block; max-width: 1312px; margin-inline: auto; }
.vv-connection-forms .form-reg-col-wrap,
.vv-connection-forms .form-reg-col-wrap + .form-reg-col-wrap { display: block; min-width: 0; background: transparent; }
.vv-connection-forms .form-reg-col,
.vv-connection-forms .form-reg-col-wrap + .form-reg-col-wrap .form-reg-col {
  width: 100%; max-width: none; margin: 0; padding: 0 !important;
}
.vv-connection-forms .form-reg-row:not([data-component="wizard"]) { margin-bottom: 20px; }
.vv-connection-forms #breadcrumbs { color: #110c5e; font-size: 12px; line-height: 20px; margin: 0; overflow-wrap: anywhere; }
.vv-connection-forms #breadcrumbs a { color: inherit; }
.vv-connection-forms [data-component="wizard"] {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  padding: 32px 20px; background: #fff; border-radius: 16px;
}
.vv-connection-forms .wizard-step-wrap > h2 {
  font: 500 28px/36px Haffer, Arial, sans-serif;
  color: var(--connection-ink); letter-spacing: -.02em;
  margin: 0 0 32px; overflow-wrap: anywhere;
}
.vv-connection-forms .wizard-step { min-width: 0; margin-left: 8px; }
.vv-connection-forms .wizard-step-track { flex: 0 0 24px; width: 24px; margin-right: 24px; margin-bottom: 20px; }
.vv-connection-forms .wizard-step-track::after { background: #d3d6de; }
.vv-connection-forms .wizard-step-dot { border-color: #d3d6de; background: #f3f5fa; }
.vv-connection-forms .wizard-step-text { min-width: 0; padding-bottom: 28px; }
.vv-connection-forms .wizard-step-title { color: var(--connection-ink); font: 500 20px/28px Haffer, Arial, sans-serif; margin: 0 0 4px; }
.vv-connection-forms .wizard-step-subtitle { color: var(--connection-muted); font-size: 14px; line-height: 20px; }
.vv-connection-forms .wizard-step--active .wizard-step-dot,
.vv-connection-forms .wizard-step--complete .wizard-step-dot { background: var(--connection-blue); border-color: var(--connection-blue); box-shadow: none; }
.vv-connection-forms .wizard-step--valid:not(.wizard-step--active):not(.wizard-step--complete) .wizard-step-dot,
.vv-connection-forms .wizard-step--valid + .wizard-step--default:not(.wizard-step--active) .wizard-step-dot { background: #e9f0ff; border-color: #5dabff; }
.vv-connection-forms .wizard-step--active .wizard-step-title,
.vv-connection-forms .wizard-step--complete .wizard-step-title { color: #3596ff; }
.vv-connection-forms .wizard-step:last-of-type .wizard-step-text { padding-bottom: 0; }
.vv-connection-forms .wizard-pane { min-width: 0; margin: 0; padding: 0; border: 0; }
.vv-connection-forms .wizard-pane > h2,
.vv-connection-forms .wizard-pane > h3,
.vv-connection-forms .wizard-pane > h4,
.vv-connection-forms #docs > h3 { color: var(--connection-ink); font: 500 24px/32px Haffer, Arial, sans-serif; margin: 0 0 24px; }
.vv-connection-forms .wizard-pane p { color: var(--connection-muted); line-height: 24px; }
.vv-connection-forms .control-wrap { min-width: 0; margin: 0 0 20px; }
.vv-connection-forms .control-label { display: block; font: 400 12px/18px Haffer, Arial, sans-serif; color: var(--connection-muted); margin: 0; }
.vv-connection-forms .control-label sup { font-size: .75em; }
.vv-connection-forms .control {
  width: 100%; min-width: 0; min-height: 54px; height: auto;
  margin-top: 6px; padding: 14px 16px; border: 1px solid var(--connection-border);
  border-radius: 8px; background: #fff; color: var(--connection-ink);
  font: 400 16px/24px Haffer, Arial, sans-serif;
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.vv-connection-forms .control::placeholder, .vv-connection-forms .control--placeholder { color: #8c94a8; opacity: 1; }
.vv-connection-forms .control:focus { border-color: #3596ff; outline: 2px solid #dae5fe; outline-offset: 1px; }
.vv-connection-forms textarea.control { min-height: 128px; resize: vertical; }
.vv-connection-forms .control[readonly], .vv-connection-forms .control[disabled],
.vv-connection-forms fieldset:disabled .control--pseudo { background: #f3f5fa; color: var(--connection-muted); border-color: #d3d6de; }
.vv-connection-forms .control-group { min-width: 0; }
.vv-connection-forms .control-wrap .control-group .control-prefix {
  margin-top: 6px; padding: 0 12px; border: 1px solid var(--connection-border);
  border-radius: 8px 0 0 8px; background: #f3f5fa; color: var(--connection-muted); font-size: 14px;
}
.vv-connection-forms .control-select .control--pseudo { padding-right: 40px; }
.vv-connection-forms .control-select-list { z-index: 20; max-height: 300px; border: 1px solid #d3d6de; border-radius: 8px; box-shadow: 0 8px 24px #110c5e14; }
.vv-connection-forms .control-select-item { padding: 12px 16px; margin: 0; font: 400 16px/24px Haffer, Arial, sans-serif; white-space: normal; }
.vv-connection-forms .control-select-item:hover,
.vv-connection-forms [is="control-select-radio"] input[type="radio"]:focus + .control-select-item { background: #e9f0ff; color: var(--connection-ink); }
.vv-connection-forms [is="control-select-radio"] input[type="radio"]:checked + .control-select-item { background: var(--connection-blue); color: var(--connection-ink); }
.vv-connection-forms .control-radio-group fieldset { padding-top: 12px; }
.vv-connection-forms .control-radio { margin: 0 0 12px; }
.vv-connection-forms .control-radio .control-label-wrap,
.vv-connection-forms .control-checkbox .control-label-wrap { align-items: flex-start; margin: 0; cursor: pointer; }
.vv-connection-forms .control-radio .control-label,
.vv-connection-forms .control-checkbox .control-label { padding-left: 12px; font-size: 14px; line-height: 24px; }
.vv-connection-forms .control-radio-box, .vv-connection-forms .control-checkbox-box { width: 24px; height: 24px; border-color: #8c94a8; }
.vv-connection-forms .control-checkbox-box { border-radius: 6px; overflow: hidden; }
.vv-connection-forms .control-checkbox-box .box-check { background: var(--connection-blue); }
.vv-connection-forms .control-checkbox .control--value:checked + .control-label-wrap .control-checkbox-box,
.vv-connection-forms .control-checkbox-box:hover,
.vv-connection-forms .control-radio-box:hover,
.vv-connection-forms .control-radio .control--value:checked + .control-label-wrap .control-radio-box { border-color: var(--connection-blue); }
.vv-connection-forms .control-radio .control--value:checked + .control-label-wrap .control-radio-box .box-check,
.vv-connection-forms .control-radio .control--value:focus + .control-label-wrap .control-radio-box .box-check { border-color: var(--connection-blue); }
.vv-connection-forms .control-checkbox .control--value:focus-visible + .control-label-wrap,
.vv-connection-forms .control-radio .control--value:focus-visible + .control-label-wrap,
.vv-connection-forms .control-file .control--value:focus-visible + .control-file-btn { outline: 2px solid #110c5e; outline-offset: 4px; border-radius: 6px; }
/* Keep visually-hidden inputs hidden even when vv-25's generic input rules apply. */
.vv-connection-forms input.sr-only { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vv-connection-forms .control-file { border: 1px solid #d3d6de; border-radius: 12px; padding: 20px; background: #fff; }
.vv-connection-forms .control-file > .control-label { font-size: 14px; line-height: 22px; margin-bottom: 16px; }
.vv-connection-forms .control-file-multi-wrap > .control-label { margin-bottom: 8px; }
.vv-connection-forms .control-file-btn { max-width: 100%; margin: 0; padding: 10px 18px; background: #e9ebf2; color: var(--connection-ink); border-radius: 40px; text-transform: none; font: 400 16px/24px Haffer, Arial, sans-serif; }
.vv-connection-forms .control-file-btn:hover { background: #e0e4ee; }
.vv-connection-forms .control-file-list { min-width: 0; overflow-wrap: anywhere; }
.vv-connection-forms .control-file-list-item { max-width: 100%; color: var(--connection-muted); font-size: 14px; }
.vv-connection-forms .btn-vv-secondary,
.vv-connection-forms .alert-modal .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 24px; border: 0; border-radius: 33px; background: var(--connection-blue); color: var(--connection-ink); font: 400 16px/24px Haffer, Arial, sans-serif; letter-spacing: normal; box-shadow: none; white-space: normal; }
.vv-connection-forms .btn-vv-secondary:hover, .vv-connection-forms .alert-modal .btn:hover { background: #3596ff; color: var(--connection-ink); }
.vv-connection-forms .btn-vv-secondary svg { flex-shrink: 0; fill: currentColor; }
.vv-connection-forms .btn-prev { display: block; margin-top: 16px; padding: 8px 0; color: #3596ff; background: transparent; border: 0; font: 400 14px/20px Haffer, Arial, sans-serif; }
.vv-connection-forms .btn-prev:hover { text-decoration: underline; }
.vv-connection-forms button:focus-visible { outline: 2px solid #110c5e; outline-offset: 4px; }
.vv-connection-forms .control--invalid .control, .vv-connection-forms .border-danger { border-color: #e0185b !important; }
.vv-connection-forms .control--invalid .control:focus { outline-color: #e0185b33; }
.vv-connection-forms .control-wrap.control--invalid .control-prefix { border-color: #e0185b; background: #fff1f6; }
.vv-connection-forms .control--invalid .control-file-btn { background: #fff1f6; }
.vv-connection-forms .text-danger, .vv-connection-forms .invalid-mail { color: #e0185b !important; font-size: 12px; line-height: 18px; }
.vv-connection-forms hr { margin: 24px 0; border: 0; border-top: 1px solid #e0e4ee; }
.vv-connection-forms .alert { border-radius: 8px; font-size: 14px; line-height: 22px; }
.vv-connection-forms .alert-info { background: #e9f0ff; color: #110c5e; border-color: #ceddfc; }
.vv-connection-forms .alert ol { padding-left: 20px; }
.vv-connection-forms .alert li + li { margin-top: 12px; }
.vv-connection-forms .alert-modal { padding: 20px; background: #110c5e66; }
.vv-connection-forms .alert-modal .card { width: 520px; padding: 32px !important; border: 0; border-radius: 20px; box-shadow: 0 12px 48px #110c5e1a; }
.vv-connection-forms .alert-modal h4 { font: 500 26px/34px Haffer, Arial, sans-serif; }
.vv-connection-forms .lds-ellipsis div { background: var(--connection-blue); }
body:has(.vv-connection-forms) .vv-alert-wrap { z-index: 100000; padding: 20px; font: 16px/24px Haffer, Arial, sans-serif; }
body:has(.vv-connection-forms) .vv-alert { padding: 16px; border-radius: 20px; color: #0f0f0f; }
body:has(.vv-connection-forms) .vv-alert-header h4 { font-size: 26px; font-weight: 500; line-height: 34px; }
body:has(.vv-connection-forms) .vv-alert-footer .vv-alert-btn.vv-alert-ok { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 33px; background: #5dabff; color: #0f0f0f; font: 400 16px/24px Haffer, Arial, sans-serif; }
@media (min-width: 768px) {
  .vv-connection-forms { padding: 120px 24px; }
  .vv-connection-forms [data-component="wizard"] { padding: 48px 38px; gap: 40px; }
  .vv-connection-forms .wizard-step-wrap > h2 { font-size: 48px; line-height: 56px; }
}
@media (min-width: 1024px) {
  .vv-connection-forms [data-component="wizard"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vv-connection-forms .wizard-step-wrap { max-width: 440px; }
}
@media (max-width: 767px) {
  .vv-connection-forms .wizard-step-title { font-size: 18px; line-height: 26px; }
  .vv-connection-forms .wizard-step-text { padding-bottom: 20px; }
  .vv-connection-forms .wizard-step-track { margin-right: 20px; margin-bottom: 12px; }
  .vv-connection-forms .row { margin-inline: -8px; }
  .vv-connection-forms .row > [class*="col"] { min-width: 0; padding-inline: 8px; }
  .vv-connection-forms .row > .col-4, .vv-connection-forms .row > .col-8,
  .vv-connection-forms .row > .col-6 { flex-basis: 100%; max-width: 100%; }
  .vv-connection-forms .btn-vv-secondary { width: 100%; }
  .vv-connection-forms .control-file { padding: 16px; }
}
@media (max-width: 374px) {
  .vv-connection-forms { padding-inline: 8px; }
  .vv-connection-forms [data-component="wizard"] { padding-inline: 12px; }
  .vv-connection-forms .row > .col { flex-basis: 100%; }
  /* Fit the unchanged fixed-width widget inside the narrow card. */
  .vv-connection-forms .recaptcha { display: block; zoom: .85; }
}