/* UXD MRS Agreement Sign – form. Scoped to .uxd-mas, inherits the theme font. */
.uxd-mas {
  --uxd-mas-accent: #ff5410;
  --uxd-mas-ink: #0b1437;
  --uxd-mas-field: #f4f5f9;
  --uxd-mas-line: #e3e6ee;
  --uxd-mas-muted: #5f6679;
  --uxd-mas-err: #c4281c;
  --uxd-mas-ok: #16a34a;
  max-width: 1040px;
  margin: 0 auto;
  container: uxd-shell / inline-size;
  color: var(--uxd-mas-ink);
  font-family: inherit;
  line-height: 1.5;
  text-align: left;
}
.uxd-mas *, .uxd-mas *::before, .uxd-mas *::after { box-sizing: border-box; }
.uxd-mas [hidden] { display: none !important; }

.uxd-mas-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 22px;
  padding: clamp(22px, 5vw, 36px);
  box-shadow: 0 1px 2px rgba(11, 20, 55, .04), 0 12px 32px -8px rgba(11, 20, 55, .12);
}

/* Progress: three real steps of the journey */
.uxd-mas .uxd-mas-steps {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: none;
}
.uxd-mas-steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: #9aa0b2; text-align: center;
}
.uxd-mas-steps li::before {
  content: ""; position: absolute; top: 14px; left: calc(-50% + 18px); right: calc(50% + 18px);
  height: 2px; border-radius: 2px; background: var(--uxd-mas-line);
}
.uxd-mas-steps li:first-child::before { display: none; }
.uxd-mas-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--uxd-mas-line); color: #9aa0b2; font-size: 13px; font-weight: 700;
}
.uxd-mas-step-text { display: flex; flex-direction: column; align-items: center; }
.uxd-mas-step-text small { display: none; }
.uxd-mas-main { container: uxd-main / inline-size; }
.uxd-mas-steps li.is-current { color: var(--uxd-mas-ink); }
.uxd-mas-steps li.is-current .uxd-mas-dot { background: var(--uxd-mas-accent); border-color: var(--uxd-mas-accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--uxd-mas-accent) 16%, transparent); }
.uxd-mas-steps li.is-done { color: var(--uxd-mas-ink); }
.uxd-mas-steps li.is-done .uxd-mas-dot { background: var(--uxd-mas-ink); border-color: var(--uxd-mas-ink); color: #fff; }
.uxd-mas-steps li.is-done + li::before, .uxd-mas-steps li.is-current:not(:first-child)::before { background: var(--uxd-mas-ink); }

.uxd-mas .uxd-mas-title { margin: 0 0 6px; font-size: clamp(22px, 4.5vw, 26px); line-height: 1.2; font-weight: 700; color: var(--uxd-mas-ink); letter-spacing: -0.01em; }
.uxd-mas .uxd-mas-intro { margin: 0 0 22px; font-size: 15px; color: var(--uxd-mas-muted); }

/* Fields */
.uxd-mas-field { margin: 0 0 16px; }
.uxd-mas-field > label:not(.uxd-mas-drop) { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; color: var(--uxd-mas-ink); }
.uxd-mas-control { position: relative; display: flex; align-items: center; }
.uxd-mas-ico { position: absolute; left: 15px; display: flex; color: #8a91a5; pointer-events: none; transition: color .15s; }
.uxd-mas-cc {
  position: absolute; left: 44px; padding-right: 10px; border-right: 1px solid #d5d9e3;
  font-size: 16px; font-weight: 600; color: var(--uxd-mas-ink); pointer-events: none; line-height: 1.2;
}
.uxd-mas .uxd-mas-control input {
  width: 100%; height: 54px; margin: 0; padding: 0 44px 0 46px;
  font: inherit; font-size: 16px; color: var(--uxd-mas-ink);
  background: var(--uxd-mas-field); border: 1.5px solid transparent; border-radius: 14px;
  box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.uxd-mas .uxd-mas-control input.uxd-mas-has-cc { padding-left: 94px; letter-spacing: .02em; }
.uxd-mas .uxd-mas-control input::placeholder { color: #a7adbd; letter-spacing: normal; }
.uxd-mas .uxd-mas-control input:hover { background: #eef0f5; }
.uxd-mas .uxd-mas-control input:focus {
  background: #fff; border-color: var(--uxd-mas-ink);
  box-shadow: 0 0 0 4px rgba(11, 20, 55, .08);
}
.uxd-mas-control:focus-within .uxd-mas-ico { color: var(--uxd-mas-ink); }

.uxd-mas-ok { position: absolute; right: 14px; display: flex; color: var(--uxd-mas-ok); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; pointer-events: none; }
.uxd-mas-field.is-valid .uxd-mas-ok { opacity: 1; transform: none; }

.uxd-mas-err { margin: 6px 0 0 4px; font-size: 13px; font-weight: 500; color: var(--uxd-mas-err); }
.uxd-mas-err:empty { display: none; }
.uxd-mas .uxd-mas-field.has-error input { background: #fff6f5; border-color: var(--uxd-mas-err); }
.uxd-mas-field.has-error .uxd-mas-ico { color: var(--uxd-mas-err); }

.uxd-mas-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.uxd-mas-alert { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: var(--uxd-mas-err); font-size: 14px; }

/* Submit */
.uxd-mas .uxd-mas-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin: 8px 0 0; padding: 0 24px;
  border: 0; border-radius: 14px; background: var(--uxd-mas-accent); color: #fff;
  font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--uxd-mas-accent) 70%, transparent);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.uxd-mas .uxd-mas-submit:hover { filter: brightness(1.04); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--uxd-mas-accent) 80%, transparent); }
.uxd-mas .uxd-mas-submit:active { transform: translateY(1px); }
.uxd-mas .uxd-mas-submit:focus-visible { outline: 3px solid var(--uxd-mas-ink); outline-offset: 3px; }
.uxd-mas .uxd-mas-submit[disabled] { cursor: progress; }
.uxd-mas-submit.is-busy::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: uxd-mas-spin .8s linear infinite;
}
@keyframes uxd-mas-spin { to { transform: rotate(360deg); } }

.uxd-mas .uxd-mas-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 13px; color: var(--uxd-mas-muted); }
.uxd-mas-note svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Done */
.uxd-mas-done { text-align: center; padding: 6px 0 2px; }
.uxd-mas-done:focus { outline: none; }
.uxd-mas-done-ico {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--uxd-mas-accent) 12%, #fff); color: var(--uxd-mas-accent);
}
.uxd-mas-done-ico svg { width: 30px; height: 30px; }
.uxd-mas .uxd-mas-done h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--uxd-mas-ink); }
.uxd-mas .uxd-mas-done p { margin: 0 auto 8px; max-width: 40ch; color: var(--uxd-mas-muted); font-size: 15px; }
.uxd-mas .uxd-mas-done-to { color: var(--uxd-mas-ink); }
.uxd-mas .uxd-mas-again {
  margin: 10px 0 0; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--uxd-mas-ink); text-decoration: underline; text-underline-offset: 3px;
}
.uxd-mas .uxd-mas-again:focus-visible { outline: 2px solid var(--uxd-mas-ink); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 480px) {
  .uxd-mas-card { border-radius: 18px; }
  .uxd-mas-steps li { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .uxd-mas-submit.is-busy::before { animation-duration: 2s; }
  .uxd-mas-ok { transition: none; }
}

/* ---------- Optional identity section ---------- */
.uxd-mas-side-foot { display: none; }
.uxd-mas-section {
  margin: 6px 0 18px; padding: 18px 18px 4px;
  border: 1px solid #eceef4; border-radius: 16px; background: #fbfbfd;
}
.uxd-mas-section-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--uxd-mas-ink); }
.uxd-mas-badge {
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: #e9ecf3; color: var(--uxd-mas-muted);
}
.uxd-mas .uxd-mas-section-note { margin: 4px 0 14px; font-size: 13.5px; color: var(--uxd-mas-muted); }
.uxd-mas-section .uxd-mas-control input { background: #fff; border-color: var(--uxd-mas-line); }
.uxd-mas-section .uxd-mas-control input:hover { background: #fff; border-color: #cfd4df; }
.uxd-mas-section .uxd-mas-control input:focus { border-color: var(--uxd-mas-ink); }
.uxd-mas .uxd-mas-upper { text-transform: uppercase; letter-spacing: .06em; }

.uxd-mas-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@container uxd-main (min-width: 520px) { .uxd-mas-row { grid-template-columns: 1fr 1fr; } }
@container uxd-main (max-width: 420px) { .uxd-mas-section { padding: 16px 14px 2px; } }

.uxd-mas-filefield { position: relative; }
.uxd-mas-flabel { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; color: var(--uxd-mas-ink); }
.uxd-mas .uxd-mas-drop {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 14px; border: 1.5px dashed #cdd2de; border-radius: 14px;
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.uxd-mas-drop:hover, .uxd-mas-drop.is-over { border-color: var(--uxd-mas-ink); background: #f7f8fb; }
.uxd-mas-drop:focus-within { border-color: var(--uxd-mas-ink); box-shadow: 0 0 0 4px rgba(11, 20, 55, .08); }
.uxd-mas-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.uxd-mas-drop-ico {
  flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: #f0f2f7; color: var(--uxd-mas-ink);
}
.uxd-mas-drop-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.uxd-mas-drop-text strong { font-size: 14.5px; font-weight: 600; color: var(--uxd-mas-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uxd-mas-drop-text small { font-size: 12.5px; color: var(--uxd-mas-muted); }
.uxd-mas-filefield.is-set .uxd-mas-drop { border-style: solid; border-color: var(--uxd-mas-line); padding-right: 52px; }
.uxd-mas-filefield.is-set .uxd-mas-drop-ico { background: color-mix(in srgb, var(--uxd-mas-ok) 14%, #fff); color: var(--uxd-mas-ok); }
.uxd-mas-filefield.has-error .uxd-mas-drop { border-color: var(--uxd-mas-err); background: #fff6f5; }
.uxd-mas .uxd-mas-remove {
  position: absolute; right: 12px; top: 41px; z-index: 2;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: #f0f2f7; color: var(--uxd-mas-ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.uxd-mas .uxd-mas-remove:hover { background: #e3e6ee; }
.uxd-mas .uxd-mas-remove:focus-visible { outline: 2px solid var(--uxd-mas-ink); outline-offset: 2px; }

/* ---------- Wide containers (desktop): two-panel card, shorter form ---------- */
@container uxd-shell (min-width: 860px) {
  .uxd-mas-card {
    max-width: none; padding: 0; overflow: hidden;
    display: grid; grid-template-columns: minmax(300px, 35%) 1fr;
  }
  .uxd-mas-side {
    display: flex; flex-direction: column; gap: 32px;
    padding: 44px 36px;
    background:
      radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--uxd-mas-accent) 22%, transparent), transparent 60%),
      var(--uxd-mas-ink);
    color: #fff;
  }
  .uxd-mas-head { order: -1; }
  .uxd-mas .uxd-mas-side .uxd-mas-title { color: #fff; font-size: 30px; margin-bottom: 10px; }
  .uxd-mas .uxd-mas-side .uxd-mas-intro { color: rgba(255, 255, 255, .72); margin: 0; }

  /* Vertical steps */
  .uxd-mas .uxd-mas-steps { grid-template-columns: 1fr; gap: 0; margin: 0; }
  .uxd-mas-steps li { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; padding: 0 0 26px; color: rgba(255, 255, 255, .55); font-size: 15px; }
  .uxd-mas-steps li::before { display: none; }
  .uxd-mas-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; border-radius: 2px;
    background: rgba(255, 255, 255, .16);
  }
  .uxd-mas-steps li.is-done::after { background: rgba(255, 255, 255, .7); }
  .uxd-mas-dot { flex: 0 0 30px; background: transparent; border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .7); }
  .uxd-mas-steps li.is-current, .uxd-mas-steps li.is-done { color: #fff; }
  .uxd-mas-steps li.is-current .uxd-mas-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--uxd-mas-accent) 30%, transparent); }
  .uxd-mas-steps li.is-done .uxd-mas-dot { background: #fff; border-color: #fff; color: var(--uxd-mas-ink); }
  .uxd-mas-step-text { align-items: flex-start; padding-top: 4px; }
  .uxd-mas-step-text small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .6); }

  .uxd-mas .uxd-mas-side-foot {
    display: flex; gap: 10px; align-items: flex-start; margin: auto 0 0; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .62);
  }
  .uxd-mas-side-foot svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
  .uxd-mas .uxd-mas-main .uxd-mas-note { display: none; }
  .uxd-mas-main { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
  .uxd-mas .uxd-mas-control input { height: 50px; }
  .uxd-mas-field { margin-bottom: 14px; }
  .uxd-mas-section { margin: 6px 0 16px; }
  .uxd-mas .uxd-mas-drop { min-height: 58px; }
  .uxd-mas .uxd-mas-remove { top: 38px; }
}