@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* design tokens
   BeerCSS sets html{font-size:1px}, so 1rem == 1px in this stylesheet.
   Everything here is written in px to keep that trap out of the way. */

:root {
  --swi-pink: #ff1ea4;
  --swi-pink-strong: #e6008d;
  --swi-pink-soft: #fff0f8;
  --swi-pink-tint: rgba(255, 30, 164, 0.07);
  --swi-amber-soft: #fff7e8;
  --swi-amber-border: #f6e2bd;
  --swi-amber-ink: #8a5a12;
  --swi-ink: #14141a;
  --swi-ink-muted: #5f606b;
  --swi-ink-subtle: #9b9ca8;
  --swi-border: #e8e8ee;
  --swi-border-strong: #d5d6de;
  --swi-surface-muted: #f4f4f7;
  --swi-success: #12a05c;
  --swi-success-soft: #e7f6ee;
  --swi-gradient: linear-gradient(90deg, #ffa94d 0%, #ff7d76 50%, #ff3d95 100%);
  --swi-radius: 12px;
  --swi-radius-lg: 16px;
  --swi-radius-pill: 999px;
  --swi-shadow-card: 0 1px 2px rgba(16, 16, 24, 0.04), 0 6px 16px -10px rgba(16, 16, 24, 0.14);
  --swi-shadow-card-hover: 0 1px 2px rgba(16, 16, 24, 0.05), 0 14px 28px -14px rgba(16, 16, 24, 0.22);
  --swi-focus-ring: 0 0 0 3px rgba(255, 30, 164, 0.3);
  --swi-sidebar-width: 264px;
  --swi-content-max: 820px;
  --swi-shell-max: 1120px;
  --swi-gutter: 20px;
  --swi-chat-gutter: 68px;
}

/* Keep modal content scrollable while hiding its visual scrollbars. */
:where([class*="modal"], [role="dialog"]),
:where([class*="modal"], [role="dialog"]) * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

:where([class*="modal"], [role="dialog"])::-webkit-scrollbar,
:where([class*="modal"], [role="dialog"]) *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Directors & Shareholders: layer-two nominator workflow */
.swi-deferred-nominator-form {
  display: none !important;
}

.swi-msf-directors-page #swi-dir-share-form-slider .nominator-form-group {
  display: none !important;
}

.swi-nominator-layer[hidden],
.swi-officer-layer[hidden] {
  display: none !important;
}

.swi-nominator-layer {
  width: 100%;
}

.swi-msf-directors-page .swi-nominator-layer .swi-msf-form-main-header {
  margin-bottom: 36px;
}

#swi-nominator-questions {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.swi-nominator-card {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: inherit;
  transition: none;
}

.swi-nominator-question {
  margin: 0 0 8px;
  color: #111116;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.swi-nominator-card-body {
  display: block;
  padding: 0;
}

.swi-nominator-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.swi-nominator-choice {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 72px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid #ececf0;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

/* The 1px border stays transparent (so selecting does not shift the box by a
   pixel), but the gradient must be sized to the border box as well. With the
   default `background-origin: padding-box` the gradient tile stops at the
   padding box and repeats into the border strip, painting a 1px pink line down
   the left edge and a 1px cream line down the right — the two ends of the ramp
   showing up on the wrong sides. */
.swi-nominator-choice.is-selected {
  border-color: transparent;
  background: linear-gradient(90deg, #fff0ce 0%, #ffd0e8 100%);
  background-origin: border-box;
  outline: none;
}

.swi-nominator-choice.is-hidden {
  display: none;
}

.swi-nominator-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.swi-nominator-choice-radio {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid #d3d3d9;
  border-radius: 50%;
  background: #fff;
}

.swi-nominator-choice input:checked+.swi-nominator-choice-radio {
  border-color: #ff5b79;
  background: transparent;
}

.swi-nominator-choice input:checked+.swi-nominator-choice-radio::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5b79;
  content: '';
  transform: translate(-50%, -50%);
}

.swi-nominator-choice-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.swi-nominator-choice-copy strong {
  color: #202027;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

.swi-nominator-choice-copy small {
  margin-top: 2px;
  color: #83838c;
  font-size: 13px;
}

.swi-nominator-manual-form {
  margin-top: 14px;
}

.swi-nominator-manual-form>h5 {
  margin: 0 0 6px;
  color: #676770;
  font-size: 12px;
  font-weight: 600;
}

.swi-nominator-manual-form .swi-nominator-field-grid+h5 {
  margin-top: 14px;
}

.swi-nominator-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.swi-nominator-field {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
}

.swi-nominator-field>span {
  position: absolute;
  top: -6px;
  left: 9px;
  z-index: 2;
  margin: 0;
  padding: 0 4px;
  background: #fff;
  color: #8c8c95;
  font-size: 10px;
  line-height: 12px;
}

.swi-nominator-field.is-required::after {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff1ea4;
  content: '';
}

.swi-nominator-field input,
.swi-nominator-field select {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #e7e7eb;
  border-radius: 5px;
  outline: none;
  background: #fff;
  color: #25252b;
  font: inherit;
  font-size: 12px;
}

.swi-nominator-field.has-icon input {
  padding-right: 40px;
}

.swi-nominator-field.has-icon>i {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 20px;
  height: 20px;
  margin: 0;
  color: #4f5058;
  font-size: 19px;
  pointer-events: none;
}

.swi-nominator-field input:focus,
.swi-nominator-field select:focus {
  border-color: #ff2a9a;
  box-shadow: 0 0 0 2px rgba(255, 42, 154, 0.08);
}

.swi-nominator-field input.is-invalid,
.swi-nominator-field select.is-invalid {
  border-color: #dc3545;
}

.swi-nominator-phone-field {
  display: block;
}

.swi-nominator-phone-control {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 38px;
  border: 1px solid #e7e7eb;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

.swi-nominator-phone-control select,
.swi-nominator-phone-control input {
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.swi-nominator-phone-control select {
  flex: 0 0 92px;
  width: 92px;
  padding-right: 4px;
  color: #55565e;
}

.swi-nominator-phone-control input {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 4px;
}

.swi-nominator-same {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 18px 0 0;
}

.swi-nominator-same-title {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  color: #17171d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.swi-nominator-same label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: #34343b;
  font-size: 14px;
  cursor: pointer;
}

.swi-nominator-same input {
  position: absolute;
  opacity: 0;
}

.swi-nominator-same-radio {
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid #d3d3d9;
  border-radius: 50%;
  background: #fff;
}

.swi-nominator-same input:checked + .swi-nominator-same-radio {
  border-color: #ff5b79;
}

.swi-nominator-same input:checked + .swi-nominator-same-radio::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5b79;
  content: '';
  transform: translate(-50%, -50%);
}

.swi-nominator-same input:focus-visible + .swi-nominator-same-radio {
  outline: 2px solid var(--swi-pink);
  outline-offset: 2px;
}

.swi-nominator-secondary-wrap {
  margin-top: 28px;
}

.swi-nominator-card .swi-nominator-secondary-question {
  margin: 0 0 8px;
  color: #111116;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

/* left/width here are only the pre-measurement fallback: positionSameNominatorToast()
   snaps the toast to the content column's measured box as it is shown, because
   no static formula is right in every band (the sidebar leaves the flow below
   1367px and .sw-dir-share-layout reshapes its tracks at 1200px). */
.swi-nominator-same-toast {
  position: fixed;
  right: 0;
  bottom: 110px;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(720px, calc(100vw - 48px));
  min-height: 44px;
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: 7px;
  background: #207f3b;
  box-shadow: 0 8px 22px rgba(20, 75, 35, 0.18);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  visibility: hidden;
  transition:
    opacity 240ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 240ms;
}

.swi-nominator-same-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.swi-nominator-same-toast[hidden] {
  display: none !important;
}

.swi-nominator-same-toast i {
  flex: 0 0 20px;
  width: 20px;
  margin-right: 8px;
  color: #fff;
  font-size: 20px;
}

.swi-nominator-same-toast b {
  color: #fff;
}

#swi-nominator-layer-alert[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .swi-nominator-choice-list {
    grid-template-columns: 1fr;
  }

  .swi-nominator-field-grid {
    grid-template-columns: 1fr;
  }

  .swi-nominator-phone-field {
    grid-template-columns: 1fr;
  }

  .swi-nominator-same-toast {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .swi-nominator-same-toast {
    bottom: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swi-nominator-same-toast {
    transition: none;
  }
}

* {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

/* keyboard focus is always visible inside the wizard; BeerCSS resets outlines
   on buttons, so this is what keeps tab navigation followable.

   Form fields are deliberately excluded: they already show focus through the
   2px pink border and the label switching to the accent colour. Adding an
   offset outline on top painted only inside the four corner notches left by
   the 10px border-radius (the ring is clipped to the input's border box),
   which read as stray dots at the corners. */

.swi-msf-wrapper a:focus-visible,
.swi-msf-wrapper button:focus-visible,
.swi-msf-wrapper summary:focus-visible {
  outline: 2px solid var(--swi-pink);
  outline-offset: 2px;
}

/* visible to screen readers only — used to give the sidebar step list the
   position/completion context that the marker circles convey visually */

.swi-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

b,
strong {
  font-weight: 600;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  /* to block ios safari pull to refresh */
  overflow: hidden;
}

img {
  width: initial;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

i {
  margin: 0;
}

a {
  display: initial;
}

details summary::-webkit-details-marker {
  display: none;
}

ol {
  margin: 0;
  padding-left: 15px;
}

::selection {
  background: #ff1ea4;
  color: #fff;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #959595;
  font-size: 15px;
  opacity: 1;
  /* Firefox */
  text-transform: none;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #959595;
  font-size: 15px;
  text-transform: none;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #959595;
  font-size: 15px;
  text-transform: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* chrome autofill background colour */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #000 !important;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
}

.flex-vcenter {
  align-items: center;
}

#swi-logo-desktop {
  /* width: 130px;*/
  width: 150px;
}

/* select 2 */

.swi-flag-text {
  vertical-align: middle;
  margin-left: 10px;
}

.swi-flags-icon {
  vertical-align: middle;
  width: 20px;
}

.swi-country-code-text {
  font-weight: 500;
  margin-left: 8px;
}

.swi-flag-text {
  font-size: 14px;
  margin-left: 10px;
}


.tippy-box .swi-info-pages-list {
  list-style: none;
}

.tippy-box .swi-info-pages-list-item {
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 15px;
  padding-left: 15px;
}

.tippy-box .swi-info-pages-list-item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #7f1eff;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 8px;
}

/* tippy theme */

.tippy-box[data-theme~='white'] {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.6);
  /* padding: 15px; */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  border: 1px solid #dedede;
}

/* Start of tooltip styles*/
.tippy-box[data-theme~='white'] .tippy-content {
  padding: 10px 15px 22px 15px !important;
}

.tippy-box .swi-tooltip-header {
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.tippy-box p {
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.tippy-box p:last-child {
  margin-bottom: 0;
}

.tippy-box ul {
  margin: 0;
}

/* End of tooltip styles*/

.tippy-box[data-theme~='pink'] {
  background-color: #ff1ea4;
  color: #fff;
  /* padding: 15px;
  border: 1px solid #dedede; */
}

.tippy-box[data-theme~='pink'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: #ff1ea4;
}

.tippy-box[data-theme~='pink'][data-placement^='bottom']>.tippy-arrow::before {
  border-bottom-color: #ff1ea4;
}

.tippy-box[data-theme~='pink'][data-placement^='left']>.tippy-arrow::before {
  border-left-color: #ff1ea4;
}

.tippy-box[data-theme~='pink'][data-placement^='right']>.tippy-arrow::before {
  border-right-color: #ff1ea4;
}

.tippy-box[data-theme~='sw-nominee-tooltip'] {
  max-width: min(395px, calc(100vw - 24px)) !important;
  border-radius: 6px;
  background-color: #343434;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

.tippy-box[data-theme~='sw-nominee-tooltip'] .tippy-content {
  padding: 16px !important;
}

.tippy-box[data-theme~='sw-nominee-tooltip'] p {
  margin: 0 0 18px;
  color: #fff;
  line-height: inherit;
}

.tippy-box[data-theme~='sw-nominee-tooltip'] p:last-child {
  margin-bottom: 0;
}

.tippy-box[data-theme~='sw-nominee-tooltip'] strong {
  color: inherit;
  font-weight: 600;
}

.tippy-box[data-theme~='sw-nominee-tooltip']>.tippy-arrow {
  color: #343434;
}

.tippy-box[data-theme~='sw-nominee-tooltip'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: #343434;
}

.tippy-box[data-theme~='sw-nominee-tooltip'][data-placement^='bottom']>.tippy-arrow::before {
  border-bottom-color: #343434;
}

.swi-tooltip-header {
  font-weight: 600;
  font-size: 16px;
  color: #000;
  margin-bottom: 15px;
}

.swi-tooltip-lightbulb {
  color: #fbc02d;
  margin-right: 10px;
}

/* helper */

.swi-msf-pink {
  color: #ff1ea4;
}

.swi-light-pink-btn {
  box-shadow: none !important;
  background-color: rgba(255, 30, 164, 0.2) !important;
  color: #ff1ea4 !important;
}

.swi-pink-btn {
  box-shadow: none !important;
  background-color: #ff1ea4 !important;
  color: #fff !important;
}

/* alerts hold free-flowing inline copy (<b>, <a>, bare text), so this stays a
   block with an inline leading icon — flex would split every inline run into
   its own column */

.swi-msf-alert {
  display: block;
  padding: 14px 16px;
  border-radius: var(--swi-radius);
  width: 100%;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
}

.swi-msf-alert i {
  font-size: 18px;
  width: 18px;
  margin: 0 6px 0 0;
  vertical-align: -4px;
}

.swi-msf-alert.swi-msf-alert-pink {
  background-color: var(--swi-pink-soft);
  border: 1px solid rgba(255, 30, 164, 0.18);
  color: #c2007c;
}

.swi-msf-alert.swi-msf-alert-pink i {
  color: #ff1ea4;
}

/* Confirms an outcome rather than warning about one, so it carries no border to
   draw the eye and the icon takes the same ink as the copy instead of standing
   out from it. */
.swi-msf-alert.swi-msf-alert-green {
  background-color: var(--swi-success-soft);
  border: 0;
  color: #1f7735;
}

.swi-msf-alert.swi-msf-alert-green i {
  color: #1f7735;
}

/* Bare validation copy — no card, no icon; it sits directly under the thing it
   is complaining about, so the red text alone carries the message. */
.swi-msf-inline-error {
  margin: 20px 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #FF0000;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

/* Asterisk lives in CSS so every message the script injects gets it. */
.swi-msf-inline-error::before {
  content: "*\00a0";
}

/* The script focuses it to move a screen reader there; role="alert" already
   announces it, so the ring would only draw the box back in. */
.swi-msf-inline-error:focus {
  outline: none;
}

.swi-msf-inline-error a,
.swi-msf-inline-error .swi-msf-link {
  color: #FF0000;
  text-decoration: underline;
}

.swi-modals {
  background-color: #fff;
  border-radius: 20px;
  padding: 25px 25px 30px 25px;
  top: 50%;
  top: 50dvh;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  max-height: calc(100% - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  max-width: 500px;
  /* width: 30%; */
  animation: none !important;
}

.swi-modal-overlay {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity linear 300ms;
}

.swi-modal-overlay.swi-modal-overlay-open {
  opacity: 1;
  pointer-events: all;
}

.swi-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

.swi-modal-paragraph {
  font-size: 14px;
  color: #808080;
  margin-bottom: 30px;
}

.swi-modal-paragraph>a {
  color: #7f1eff;
}

.swi-modal-img {
  width: 100%;
  margin-bottom: 20px;
}

.swi-modal-btn {
  font-weight: 600;
  background-color: #fff;
  box-shadow: none;
  color: #7f1eff;
}

.swi-modal-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.swi-modal-header-icon {
  font-size: 50px;
  width: 50px;
  color: #ff1ea4;
}

.swi-error-modals {
  text-align: center;
}

.swi-error-modals .swi-modal-title,
.swi-error-modals .swi-modal-paragraph {
  display: block;
}

.swi-overflow-modals {
  position: relative;
  height: fit-content;
  padding: 0;
  max-width: 100%;
  width: 750px;
  max-height: 60vh;
  max-height: 60dvh;
}

.swi-info-modals p {
  width: fit-content;
  margin: 8rem auto;
}

.swi-overflow-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #fff;
  border-bottom: 1px solid #dedede;
  padding: 10px 0;
  box-sizing: border-box;
  z-index: 99999;
  width: 100%;
}

.swi-overflow-modal-header-icon {
  font-size: 30px;
  width: 30px;
  color: #ff1ea4;
}

.swi-overflow-modal-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-top: 0 !important;
}

.swi-modal-info-list {
  position: static;
  left: 0;
  top: 0;
  width: 100%;
  height: fit-content;
  padding-top: 30px;
  z-index: 99998;
  overflow: auto;
}

#swi-dir-share-info-modal-overlay .swi-modal-info-list {
  padding-top: 0;
}

.swi-modal-info-list-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-bottom: 1px solid #dedede;
}

.swi-modal-info-list-item:last-child {
  border-bottom: none;
}

.swi-modal-info-list-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.swi-modal-info-list-item-content {
  font-size: 14px;
  color: #808080;
}

.swi-info-pages-list-item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #808080;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.swi-overflow-modal-content-inner {
  position: static;
  left: 0;
  top: 0;
  width: 100%;
  height: fit-content;
  padding: 30px 20px 50px 20px;
  z-index: 99998;
  overflow: auto;
}

.swi-overflow-modal-content {
  position: relative;
}

.swi-overflow-modal-content-header {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

.swi-overflow-modal-content-para {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 30px;
}

.swi-overflow-modal-footer {
  position: sticky;
  width: 100%;
  z-index: 99999;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.swi-overflow-modal-footer.swi-overflow-modal-footer-2-btns {
  display: flex;
}



.swi-overflow-modal-footer-btn {
  background-color: #fff;
  box-shadow: none;
  color: #7f1eff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
  border-top: 1px solid #dedede;
  border-radius: 0;
}

.swi-overflow-modal-footer.swi-overflow-modal-footer-2-btns>.swi-overflow-modal-footer-btn {
  margin: 0;
  width: 50%;
}

/* tab modal */
/* .swi-overflow-modals.swi-tabs-modals {
  height: 600px;
} */

.page:not(.active) {
  display: none;
}


.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header {
  overflow-x: auto;
  padding-bottom: 0;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs {
  width: inherit;
  justify-content: initial;
  border-bottom: none;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs>a {
  padding-bottom: 10px;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs>a.active>i {
  color: #ff1ea4;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs>a.active {
  border-bottom: 2rem solid #ff1ea4;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs>a.active>span {
  color: #ff1ea4;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs>a>i {
  color: #959595;
}

.swi-overflow-modals.swi-tabs-modals .swi-overflow-modal-header .tabs>a>span {
  color: #959595;
  text-transform: none;
}

.swi-overflow-modal-tabs-container {
  position: static;
  left: 0;
  top: 0;
  width: 100%;
  height: fit-content;
  padding-top: 30px;
  z-index: 99998;
  overflow: auto;
}

.swi-overflow-modal-tabs-container .page {
  padding: 0 30px;
}

.swi-plan-info-item-header {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px !important;
}

.swi-plan-info-item-list>li {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  margin-bottom: 15px;
}

.swi-plan-info-item-list>li>i {
  color: #ff1ea4;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 600;
  width: 15px;
}

.swi-plan-info-item-list>li>sup {
  vertical-align: super;
  font-size: 10px;
}

.swi-plan-info-link {
  font-size: 14px;
  color: #7f1eff;
  font-weight: 500;
  display: block;
  margin: 20px 0;
}

.swi-plan-info-link>i {
  color: #7f1eff;
}

.swi-modal-footer-list {
  margin: 20px 0;
}

.swi-modal-footer-list-item {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

/* beer css input config */

/* Floated (shrunk) label state: focused, filled, or forced .active. This only
   controls the typography — the colour stays the resting grey. */
.field.label.border:not(.fill)>[placeholder]:focus~label,
.field.label.border:not(.fill)>[placeholder]:not(:placeholder-shown)~label,
.field.label.border:not(.fill)>label.active {
  font-size: 11.5px;
  font-weight: 500;
  color: #999999;
}

/* The focused field keeps the same grey label as every other state — the label
   only floats, it does not change colour. Each branch is specific enough to
   beat the matching branch above it, so it must stay after that block. */
.field.label>*:focus~label,
.field.label.border:not(.fill)>[placeholder]:focus~label,
.field.label.border:not(.fill)>[placeholder]:not(:placeholder-shown):focus~label,
.field.label.border:not(.fill)>*:focus~label.active {
  color: #999999;
}

.field.label>label {
  font-size: 15px;
  font-weight: 500;
  color: #999999;
  pointer-events: none;
}

.field.invalid.label.border:not(.fill)>[placeholder]:focus~label,
.field.invalid.label.border:not(.fill)>[placeholder]:not(:placeholder-shown)~label,
.field.invalid.label.border:not(.fill)>label.active {
  color: #f00 !important;
}

.field.invalid.label>label {
  color: #999999 !important;
}

.field.border>input,
.field.border>select,
.field.border>textarea {
  border-color: var(--swi-border);
  border-radius: 10px;
}

.field.border>input.swi-myinfo-biz-highlight,
.field.border>select.swi-myinfo-biz-highlight,
.field.border>textarea.swi-myinfo-biz-highlight {
  border-color: #ff1ea4;
  border-width: 2px;
  border-radius: 10px;
}

/* Focus is shown in grey, not the pink accent: the outline just darkens a step
   from the resting --swi-border so the active field still reads as active. */
.field.border>input:focus,
.field.border>select:focus,
.field.border>textarea:focus {
  border-color: var(--swi-ink-subtle);
}

.field.invalid.border>input,
.field.invalid.border>select,
.field.invalid.border>textarea {
  border-color: #f00;
  border-radius: 10px;
}

.field.invalid.border>input:focus,
.field.invalid.border>select:focus,
.field.invalid.border>textarea:focus {
  border-color: #f00;
}

/* BeerCSS dims the control itself (`.field>:disabled`) but leaves the suffix
   icon beside it untouched, so a disabled select still shows a full-strength
   caret with a pointer cursor and reads as clickable -- e.g. Nationality once
   Residential Status is Singapore Citizen. Match the control's own treatment.
   Read-only fields (the date pickers) are deliberately excluded: their icon is
   still the way you open them. */
.field:has(>input:disabled)>i,
.field:has(>select:disabled)>i,
.field:has(>textarea:disabled)>i {
  opacity: .5;
  cursor: not-allowed;
}


.checkbox>input {
  width: initial !important;
  height: initial !important;
}

.checkbox>span,
.checkbox>span>a {
  display: inline-block !important;
}

.checkbox>span>a {
  color: #7f1eff;
}

.checkbox>input+span::before,
.radio>input+span::before {
  color: #ff1ea4 !important;
}

.radio>input:checked+span::before {
  color: #ff1ea4;
}

.field.invalid>i {
  color: #f00 !important;
}

.field>.error {
  color: #f00 !important;
}

.toast.active {
  z-index: 9999;
  bottom: 110rem;
}

/* Jquery datepicker styling */

.ui-widget.ui-widget-content {
  border-radius: 5px;
  border-color: #dedede;
}

.ui-datepicker-title {
  display: flex;
  align-items: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-family: 'Poppins', sans-serif;
  border-radius: 3px;
  border: 1px solid #dedede;
  padding: 5px 8px;
  font-size: 14px;
  margin: 0 5px;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  border-color: transparent;
  background-color: transparent;
  text-align: center;
}

.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover {
  background-color: rbga(0, 0, 0, 0.03);
}

.ui-state-default.ui-state-active {
  background-color: transparent;
  color: #fff;
}

.ui-datepicker-current-day {
  position: relative;
}

.ui-datepicker-current-day::after {
  content: '';
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  z-index: -1;
  background-color: #ff1ea4;
  color: #fff;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}


.ui-datepicker-calendar .ui-state-hover {
  position: relative;
  background-color: transparent;
}

.ui-datepicker-calendar .ui-state-hover::after {
  content: '';
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.03);
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.ui-widget-header {
  background-color: #fff;
  border: 0;
}

.ui-datepicker .ui-datepicker-header {
  padding: 10px 0 5px 0;
}

.ui-widget-header .ui-icon {
  background-image: none;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  background-color: #fff;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.03);
}

.ui-datepicker .ui-datepicker-prev {
  left: 8px;
}

.ui-datepicker .ui-datepicker-next {
  right: 8px;
}

.ui-datepicker .ui-datepicker-prev::after {
  font-family: 'Material Icons';
  content: '\e5de';
  color: #000;
}

.ui-datepicker .ui-datepicker-next::after {
  font-family: 'Material Icons';
  content: '\e5df';
  color: #000;
}

/* preloader */

#swi-preloader-wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  /* Must swallow clicks: this overlay is what stops a user from firing the
     step submit again while a slow request is still in flight. */
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.62);
  display: none;
  z-index: 999999999;
}

/* jQuery .show() writes an inline display:block, so the spinner is centred
   with absolute positioning rather than flex. */
#swi-preloader-wrapper .swi-preloader-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 30, 164, 0.18);
  border-top-color: #ff1ea4;
  animation: swi-spin 700ms linear infinite;
}

@keyframes swi-spin {
  to {
    transform: rotate(360deg);
  }
}

#swi-msf-splash {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(40deg, rgba(255, 30, 164, 1) 0%, rgba(255, 223, 64, 1) 100%);
  z-index: 999999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* animation: swi-splash-animation 2s forwards; */

}

#swi-splash-logo {
  width: 100px;
  /* margin-bottom: 10px; */
  transition: width 1s;
  animation: swi-splash-icon-float-animation 2s infinite alternate;
  transform-origin: center;
}

#swi-splash-logo.swi-splash-logo-scaled {
  width: 100vw;
}

.swi-splash-text {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

@keyframes swi-splash-icon-heartbeat-animation {
  to {
    transform: scale(1.4);
  }
}

@keyframes swi-splash-icon-float-animation {
  0% {
    transform: translateY(-20px);
  }

  25% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  75% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-20px);
  }
}

#swi-splash-loader {
  position: fixed;
  width: 100vw;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  z-index: 9999999999;
  display: block;
}

.swi-splash-loader-inner {
  background: #fff;
}

.swi-splash-loader-inner::before {
  content: '';
  /* display: block;
  width: 60%;
  height: 4px; */
  height: 4px;
  background: #fff;
  will-change: left, right;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  -webkit-animation: test 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  animation: test 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;

}

.swi-splash-loader-inner::after {
  content: '';
  /* display: block;
  width: 60%;
  height: 4px; */
  height: 4px;
  background: #fff;
  will-change: left, right;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  -webkit-animation: test2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation: test2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
  animation-delay: 1.15s;
}

.del-price {
  font-weight: normal;
  font-size: 15px;
  margin-right: 10px;
  color: rgba(0, 0, 0, 0.6);
}

@-webkit-keyframes test {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}


@keyframes test {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@-webkit-keyframes test2 {

  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}

@keyframes test2 {

  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}



@keyframes swi-splash-animation {

  0%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes swi-splash-animation {

  0%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


/* general */

.swi-msf-wrapper {
  display: flex;
}

/* sidebar (form step navigation) */

.swi-msf-sidebar {
  width: var(--swi-sidebar-width);
  min-width: var(--swi-sidebar-width);
  height: 100vh;
  height: 100dvh;
  padding: 0 16px 24px 16px;
  background-color: #fff;
  border-right: 1px solid var(--swi-border);
  box-shadow: none;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

/* logo */

/* The sidebar has no layout relationship to the content column, so both of its
   edges are set by hand against it:
   - top margin (41px) centres the 25px logo on the step header, which runs
     30px..78px;
   - bottom margin puts the step list on the same line as the first block under
     that header -- the content column and the summary card share that top edge
     (78 + 28 = 106).
   Steps whose header is a different height re-tune the bottom margin below. */
.swi-msf-sidebar-logo {
  width: 132px;
  margin: 41px 0 40px 14px;
  padding: 0;
}

/* Step 2's title is 22px rather than 24px, so its header is shorter and its
   content starts 2px higher. Desktop only: the tablet and mobile drawers set
   their own logo margins and have no content column beside them. */
@media (min-width: 1367px) {
  .sw-company-details .swi-msf-sidebar-logo {
    margin-bottom: 38px;
  }

  /* Step 1's header carries the plan-page grid, which makes it taller. */
  .swi-msf-wrapper:has(.sw-plan-page-header) .swi-msf-sidebar-logo {
    margin-bottom: 59px;
  }
}

/* step list */

.swi-msf-sidebar-nav ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.swi-msf-sidebar-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--swi-radius-pill);
  font-size: 14px;
  line-height: 1.35;
  color: var(--swi-ink-subtle);
}

.swi-msf-sidebar-step-marker {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--swi-surface-muted);
  color: var(--swi-ink-subtle);
  font-size: 12px;
  font-weight: 600;
}

.swi-msf-sidebar-step-marker>i {
  font-size: 16px;
  width: 16px;
  margin: 0;
}

.swi-msf-sidebar-step-completed {
  color: var(--swi-ink-muted);
}

.swi-msf-sidebar-step-completed .swi-msf-sidebar-step-marker {
  background-color: var(--swi-success-soft);
  color: var(--swi-success);
}

/* Completed steps navigate back, so they read and behave like controls. */
a.swi-msf-sidebar-step-link {
  /* beer.css centres the contents of every <a>; the step rows are left-aligned
     like their non-link siblings. */
  justify-content: flex-start;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.swi-msf-sidebar-step-link:hover,
a.swi-msf-sidebar-step-link:focus-visible {
  background-color: var(--swi-surface-muted);
  color: var(--swi-ink);
}

.swi-msf-sidebar-step-current {
  background-color: var(--swi-pink-soft);
  color: var(--swi-ink);
  font-weight: 600;
}

.swi-msf-sidebar-step-current .swi-msf-sidebar-step-marker {
  background-color: var(--swi-pink);
  color: #fff;
}

/* The incorporation / corp-sec journeys mark the current step with the brand
   gradient at every width -- the tablet drawer and the phone layout render the
   same sidebar, so the treatment must not stop at the 1200px rail. */
.sw-incorp-plan .swi-msf-sidebar-step.swi-msf-sidebar-step-current {
  background: linear-gradient(90deg, #fff2df 0%, #ffe4f1 100%);
  color: #111116;
  font-weight: 600;
}

.sw-incorp-plan .swi-msf-sidebar-step-current .swi-msf-sidebar-step-marker {
  background-image: var(--swi-gradient);
  color: #fff;
}

/* form area */

.swi-msf-form {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Browsers with no dvh support (older in-app webviews, iOS < 15.4) fall back to
   the `height: 100vh` above, which on mobile resolves to the LARGE viewport --
   the height the page would have if the browser's chrome were hidden. The shell
   is then taller than the screen, and because it is overflow:hidden with the
   content column as its only scroller, the Back/Continue bar sits below the fold
   with no gesture that reaches it: a swipe over the content scrolls the content,
   not the window. Give those browsers ordinary document scrolling instead, so the
   bar is always reachable at the end of the page. Guarded by @supports, so no
   browser that understands dvh ever sees these rules. */
@supports not (height: 100dvh) {
  .swi-msf-form,
  .sw-incorp-plan .swi-msf-form {
    height: auto;
    min-height: 100vh;
    max-height: none;
    overflow: visible;
  }

  .swi-msf-form-main-content-wrapper {
    overflow: visible;
  }
}

/* the shell is a flex column: header and footer size to content and the
   content column is the only scroller, so the bottom bar can never sit on
   top of the form the way the old fixed-position offsets allowed */

.swi-msf-form-main-content-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 24px var(--swi-gutter) 48px var(--swi-gutter);
  overflow-y: auto;
  overflow-x: hidden;
}

.swi-msf-form-main-content-inner-wrapper {
  width: 100%;
  max-width: var(--swi-content-max);
}

.swi-msf-logo-mobile {
  width: 34px;
  margin: 0;
}

.swi-msf-logo-mobile-link {
  display: inline-flex;
  align-items: center;
}

/* page header: journey label + step indicator on the left, compact order
   summary on the right */

.swi-msf-form-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* the extra gutter lands the order summary's right edge on the same line as
     the footer divider */
  max-width: calc(var(--swi-shell-max) + var(--swi-gutter));
  background-color: #fff;
  padding: 14px var(--swi-gutter);
  position: relative;
  z-index: 9990;
  border-bottom: 1px solid var(--swi-border);
}

.swi-msf-form-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.swi-msf-form-header-title,
.swi-msf-form-header-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.swi-msf-form-header-title {
  color: var(--swi-ink-muted);
}

.swi-msf-form-header-step {
  color: var(--swi-ink-subtle);
  font-weight: 500;
}

.swi-msf-form-header-step::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: 9px;
  opacity: 0.7;
}

/* slim progress bar under the mobile header — the same progress is stated in
   words next to it, so this is decorative only */

.swi-msf-form-header-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--swi-border);
}

.swi-msf-form-header-progress-bar {
  display: block;
  height: 100%;
  background-color: var(--swi-pink);
  transition: width 300ms ease;
}

.swi-msf-form-main-header {
  margin: 0 0 18px 0;
}

.swi-msf-form-main-header-wrapper {
  display: flex;
  align-items: center;
  margin: 0;
}

/* the decorative step glyph is dropped in favour of a plain title */

.swi-msf-form-main-header-img {
  display: none;
}

.swi-msf-form-main-header-text>* {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--swi-ink);
  margin-bottom: 0;
}

.swi-msf-steps {
  display: none;
  align-items: center;
}

/* order summary pill */

button.swi-msf-cart-btn {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--swi-radius-pill);
  background-image: var(--swi-gradient);
  box-shadow: 0 6px 18px -10px rgba(255, 62, 140, 0.85);
  transition: filter 150ms ease, box-shadow 150ms ease;
}

button.swi-msf-cart-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 22px -10px rgba(255, 62, 140, 0.95);
}

.swi-msf-cart-btn i {
  color: #fff;
  font-size: 19px;
  width: 19px;
  margin: 0;
}

.swi-msf-cart-btn span {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: block;
  white-space: nowrap;
}

.swi-msf-cart-btn-caret {
  margin-left: auto !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 20px !important;
}

/* bottom navigation */

.swi-msf-form-footer {
  flex: 0 0 auto;
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 9998;
  background-color: #fff;
  width: 100%;
  max-width: var(--swi-shell-max);
  border-top: 1px solid var(--swi-border);
  /* the right gutter keeps Back/Next clear of the floating chat launcher */
  padding: 0 calc(var(--swi-gutter) + var(--swi-chat-gutter)) 0 var(--swi-gutter);
}

.swi-msf-form-footer-inner-wrapper {
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.swi-msf-step {
  display: flex;
  align-items: center;
}

.swi-msf-step-circle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 2px solid var(--swi-border-strong);
  outline: none;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--swi-pink);
}

.swi-msf-step-circle.swi-msf-step-circle-active {
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-color: var(--swi-pink);
  outline: none;
  color: var(--swi-pink);
  box-shadow: 0 0 0 4px var(--swi-pink-tint);
}

.swi-msf-step-circle.swi-msf-step-circle-completed {
  border-color: var(--swi-pink);
  background-color: var(--swi-pink);
  outline: none;
}

.swi-msf-step-circle.swi-msf-step-circle-completed>i {
  color: #fff;
  font-size: 12px;
  width: 12px;
  margin: 0;
}

/* non ubo ui */
.swi-msf-step::after {
  content: "";
  width: 26px;
  height: 2px;
  background-color: var(--swi-border);
  display: inline-block;
}

/* colour the connector that a completed step leads out of */
.swi-msf-step:has(.swi-msf-step-circle-completed)::after {
  background-color: var(--swi-pink);
}

/* non ubo ui */

.swi-msf-step:last-child::after {
  display: none;
}

/* forms */

.swi-msf-form-rows {
  display: flex;
  flex-direction: column;
}

.swi-msf-form-rows:last-child {
  margin-bottom: 0;
}

.swi-msf-form-rows.swi-msf-form-rows-slider {
  flex-direction: column;
  margin-bottom: 0;
}

.swi-msf-form-rows.swi-msf-form-rows-slider.swi-msf-form-rows-phone {
  flex-direction: row;
}


.swi-msf-form-rows.swi-msf-form-rows-slider>.swi-input-wrapper {
  width: 100%;
}

.swi-msf-form-rows.swi-msf-form-rows-slider>.swi-input-wrapper.swi-input-country-code {
  width: 50%;
  margin-right: 15px;
}

.swi-msf-form-rows.swi-msf-form-rows-slider>.swi-input-wrapper.swi-input-contact-no {
  width: calc(50% - 15px);
}

.swi-msf-form-rows.swi-msf-form-rows-phone {
  flex-direction: row;
}

.swi-input-wrapper {
  margin: 0 0 10px 0 !important;
  width: 100%;
  position: relative;
}

.swi-input-wrapper.swi-input-wrapper-upload-checkbox {
  margin-right: 20px !important;
}

.swi-input-wrapper.swi-input-country-code {
  width: 50%;
  margin-right: 15px !important;
}

.swi-input-wrapper.swi-input-contact-no {
  width: 50%;
}


/* select 2 */

.swi-input-phone {
  position: relative;
}

.swi-input-phone>.select2-container {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 70px !important;
  z-index: 9998;
}

.swi-input-phone>.select2-container .select2-selection {
  border: 0;
  background: transparent;
}

.select2-results__option,
.select2-selection__rendered {
  text-transform: uppercase !important;
}

.select2-selection__rendered {
  padding: 0 !important;
}

.select2-selection__placeholder {
  text-transform: capitalize !important;
}

.swi-input-phone>.select2-container .select2-selection__arrow {
  display: none;
}

.select2-search {
  padding: 10px !important;
}

.select2-search__field {
  border: 1px solid #dfdfdf !important;
  border-radius: 3px;
}

.select2-search__field:focus {
  outline: 0 !important;
  border: 2px solid #ff1ea4 !important;
  border-radius: 3px;
}

.select2-dropdown {
  border: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf !important;
  border-bottom: 1px solid #dfdfdf !important;
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
  border-radius: 5px;
  z-index: 9999 !important;
}

.select2-results__option--highlighted {
  background: #ff1ea4 !important;
}

.swi-select2-dropdown-class {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 500px !important;
}


.swi-input-phone>.swi-input {
  padding-left: 90px !important;
}

.swi-input-phone>.swi-phone-label {
  left: 90px !important;
}

.swi-input-phone>.swi-phone-label.active {
  left: 16rem !important;
}

.swi-country-code-text {
  padding-left: 5px;
  font-weight: 500;
  font-size: 15px;
}

.swi-select2-select {
  width: 100% !important;
}

.swi-select2-input-wrapper .select2-container {
  width: 100% !important;
}

.swi-select2-input-wrapper .select2-selection {
  height: 56px !important;
  border: 1px solid var(--swi-border) !important;
  border-radius: 10px !important;
}

.swi-select2-input-wrapper .select2-selection.invalid {
  border-color: #f00 !important;
}

.swi-select2-input-wrapper .select2-selection__arrow {
  display: none !important;
}

.swi-select2-input-wrapper .select2-selection__rendered {
  padding: 15px 47px 15px 15px !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 500 !important;
}

.swi-hide-for-sg {
  display: none;
}

.swi-required-dot {
  position: absolute;
  top: -2px;
  right: 0;
  background-color: #ff1ea4;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 9998;
}

.swi-required-dot.swi-required-dot-invalid {
  background-color: #f00;
}

.swi-tooltip {
  color: #ff1ea4 !important;
  z-index: 9998 !important;
  padding: 30px;
}

/* The Registrable Controller info icon reads as part of the checkbox label it
   sits beside, so it takes that text's ink instead of the pink every other
   wizard tooltip uses. `!important` only to beat the rule above -- the anchor
   around it is a .swi-msf-link, so `currentColor` would come out purple. */
.swi-rcinfo-tooltip>.swi-tooltip {
  color: #1c1b1f !important;
}

.swi-input {
  width: 100% !important;
  font-weight: 500;
  position: relative;
}

.swi-input-loader {
  width: 20rem;
  height: 20rem;
  border: 2px solid #ff1ea4;
}

.swi-file-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 100%;
  height: 100% !important;
  display: block;
  /* visibility: hidden; */
}

.swi-file-input-wrapper.swi-file-input-disabled::after {
  content: "";
  display: block;
  width: 100%;
  height: 56px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid var(--swi-border);
  opacity: 0.5 !important;
  cursor: not-allowed;
}

.swi-file-input-wrapper.swi-file-input-invalid::after {
  content: "";
  display: block;
  width: 100%;
  height: 56px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #f00;
  opacity: 1 !important;
  cursor: pointer;
}

.swi-file-input-wrapper.swi-myinfo-biz-highlight::after {
  content: "";
  display: block;
  width: 100%;
  height: 56px;
  background-color: #fff;
  border-radius: 10px;
  border: 2px solid #ff1ea4;
  opacity: 1 !important;
  cursor: pointer;
}

.swi-file-input-wrapper.swi-file-input-disabled>.swi-file-input {
  cursor: not-allowed;
}

.swi-file-input-wrapper {
  position: relative;
}

.swi-file-input-wrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 56px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid var(--swi-border);
  opacity: 1 !important;
  cursor: pointer;
}


.swi-file-input-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  color: #959595;
  pointer-events: all;
  /* z-index: -1; */
}

.swi-file-upload-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--swi-ink-muted);
}

.swi-select {
  font-weight: 500;
}

.swi-radio {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.swi-radio > input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  display: block;
  opacity: 1;
  flex: 0 0 26px;
  width: 26px !important;
  height: 26px !important;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 2px solid #8a8a8a;
  border-radius: 50%;
  box-shadow: none;
  outline: 0;
}

.swi-radio > input[type="radio"]:checked {
  /* Centre dot + gradient ring. The band between them is punched out with a
     mask rather than painted a flat colour, so whatever sits behind the
     control shows through (white drawer, tinted plan card, anything). */
  background: radial-gradient(circle, #ff647c 0 5px, transparent 5.5px), var(--swi-gradient);
  -webkit-mask-image: radial-gradient(circle, #000 0 5px, transparent 5.5px 9.5px, #000 10px);
  mask-image: radial-gradient(circle, #000 0 5px, transparent 5.5px 9.5px, #000 10px);
  /* Keep the :focus-visible ring outside the mask box from being clipped. */
  -webkit-mask-clip: no-clip;
  mask-clip: no-clip;
  border: 0;
}

.swi-radio > input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(127, 30, 255, .24);
}

.swi-radio > input[type="radio"] + .swi-radio-text::before {
  display: none;
}

.swi-radio-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 24px;
}

.swi-radio-wrapper>.swi-radio {
  width: initial;
  padding: 0;
  margin: 0;
}

.swi-radio-wrapper>.swi-radio:last-child {
  margin-left: 0;
}

.swi-radio-text {
  padding-left: 10px !important;
}

.swi-checkbox {
  margin-bottom: 20px;
}

.swi-checkbox-wrapper {
  padding: 0 8px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.swi-checkbox-wrapper .swi-msf-form-rows>.swi-checkbox:first-child {
  margin-right: 30px;
}

.swi-checkbox-wrapper .swi-msf-form-rows>.swi-checkbox {
  margin-left: 0;
}

.swi-checkbox-wrapper.swi-checkbox-wrapper-share-assign {
  margin-bottom: 0;
  margin-top: 0;
}

.swi-checkbox-text {
  padding-left: 10px !important;
  white-space: normal !important;
}

.swi-description-tooltip {
  color: #ff1ea4;
}

/* ubo ui */
/* .swi-add-corp-share-btn, */
/* ubo ui */
/* add-person area — a single large, obvious target that keeps the icon and
   its instruction centred together */

button.swi-add-dir-share-btn,
button.swi-add-more-dir-share-btn {
  background-color: #fff;
  margin: 0 0 16px 0;
  width: 100%;
  height: auto;
  min-height: 104px;
  padding: 22px 20px;
  box-sizing: border-box;
  color: var(--swi-ink);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: left;
  box-shadow: none;
  border: 1px dashed var(--swi-border-strong);
  border-radius: var(--swi-radius-lg);
  transition: border-color 150ms ease, background-color 150ms ease,
    box-shadow 150ms ease;
}

/* ubo ui */
/* .swi-add-corp-share-btn:hover, */
/* ubo ui */
button.swi-add-dir-share-btn:hover {
  border-color: var(--swi-pink);
  background-color: var(--swi-pink-soft);
  box-shadow: var(--swi-shadow-card);
}

/* "Add more" keeps a neutral hover — no pink tint on border or fill */
button.swi-add-more-dir-share-btn:hover {
  border-color: var(--swi-border-strong);
  background-color: #fff;
  box-shadow: var(--swi-shadow-card);
}

/* BeerCSS expands a translucent white ripple (`button:hover::after`) over the
   whole button on hover, veiling the icon and label. Off for both add-person
   buttons. */
button.swi-add-dir-share-btn::after,
button.swi-add-more-dir-share-btn::after {
  display: none;
}

button.swi-add-dir-share-btn:active,
button.swi-add-more-dir-share-btn:active {
  border-style: solid;
  border-color: var(--swi-pink);
}

button.swi-add-dir-share-btn:focus-visible,
button.swi-add-more-dir-share-btn:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--swi-pink);
  box-shadow: var(--swi-focus-ring);
}

/* ubo ui */
/* .swi-add-corp-share-btn > i, */
/* ubo ui */
.swi-add-dir-share-btn>i,
.swi-add-more-dir-share-btn>i {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-image: var(--swi-gradient);
  color: #fff;
  font-size: 26px;
  margin: 0;
}

.swi-add-dir-share-btn>span,
.swi-add-more-dir-share-btn>span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--swi-ink);
  text-transform: none;
}

.swi-add-dir-share-btn>span>em,
.swi-add-more-dir-share-btn>span>em {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--swi-ink-muted);
}

#swi-myinfo-personal-btn,
#swi-myinfo-business-btn {
  display: inline-block;
  margin-bottom: 30px;
}

#swi-myinfo-personal-btn.swi-myinfo-hidden {
  display: none !important;
}

.swi-hide-for-reupload.swi-reupload-hidden {
  display: none !important;
}

/* ubo ui */
/* .swi-corp-shareholder-table, */
/* ubo ui */
/* people already added — a stack of standalone summary cards, with the
   add-person area kept first so it stays above the list */

.swi-dir-share-table {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  margin-bottom: 20px;
  display: none;
  flex-direction: column;
  gap: 12px;
}

/* ubo ui */
/* .swi-corp-shareholder-table.swi-corp-shareholder-table-review, */
/* ubo ui */
.swi-dir-share-table.swi-dir-share-table-review {
  display: flex;
}

/* ubo ui */
/* .swi-corp-shareholder-table > .swi-details:last-child, */
/* ubo ui */
.swi-dir-share-table>.swi-details:last-child {
  border-bottom: 1px solid var(--swi-border);
}

/* ubo ui */
/* .swi-corp-shareholder-table > .swi-details:hover, */
/* ubo ui */
.swi-dir-share-table>.swi-details:hover {
  background-color: #fff;
  border-color: var(--swi-border-strong);
  box-shadow: var(--swi-shadow-card-hover);
}

.swi-details {
  background-color: #fff;
  box-shadow: var(--swi-shadow-card);
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--swi-border);
  border-radius: var(--swi-radius);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.swi-readonly-details {
  cursor: default;
}

.swi-details:focus-within {
  border-color: var(--swi-pink);
  box-shadow: var(--swi-focus-ring);
}

.swi-summary {
  margin-bottom: 0;
  padding: 16px 18px;
  border-radius: var(--swi-radius);
}

.swi-summary-btns {
  display: flex;
  gap: 4px;
}

.swi-summary-btns>i {
  color: #ff1ea4;
}

.swi-summary-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--swi-ink);
  margin-bottom: 2px;
}

.swi-summary-description {
  color: var(--swi-ink-muted);
}


/* ubo ui */
/* .swi-edit-corp-share,
.swi-delete-corp-share, */
/* ubo ui */
.swi-edit-btn,
.swi-delete-btn,
.swi-edit-corp-share,
.swi-delete-corp-share {
  background-color: transparent;
  box-shadow: none;
  box-sizing: border-box;
  padding: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  margin: 0;
  transition: background-color 150ms ease;
}

.swi-edit-btn:hover,
.swi-delete-btn:hover,
.swi-edit-corp-share:hover,
.swi-delete-corp-share:hover {
  background-color: var(--swi-surface-muted);
}

.swi-edit-btn:focus-visible,
.swi-delete-btn:focus-visible,
.swi-edit-corp-share:focus-visible,
.swi-delete-corp-share:focus-visible {
  outline: none;
  box-shadow: var(--swi-focus-ring);
}

/* ubo ui */
/* .swi-edit-corp-share, */
/* ubo ui */
.swi-edit-btn {
  color: #808080;
}

/* ubo ui */
/* .swi-delete-corp-share, */
/* ubo ui */
.swi-delete-btn {
  color: #ff1ea4;
}

.swi-action-icon {
  display: block;
  height: 24px;
  pointer-events: none;
  width: 24px;
}

.swi-company-member-details {
  display: flex;
  flex-direction: column;
}

.swi-company-member-details-item {
  width: 100%;
  margin-bottom: 30px;
}

.swi-company-member-details-icon {
  color: #808080;
  margin-right: 10px;
}

/* ubo ui */
/* .swi-add-more-corp-share-btn-text, */
/* ubo ui */
.swi-add-more-dir-share-btn-text {
  margin-left: 0 !important;
}

.swi-company-member-details-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.swi-company-member-details-content {
  font-size: 14px;
  margin: 0;
}

.swi-share-information-table {
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 5px;
  margin-bottom: 20px;
}

.swi-msf-share-info-rows {
  padding: 30px 20px;
  border-bottom: 1px solid #dedede;
}

.swi-msf-share-info-rows:last-child {
  border-bottom: 0;
}

.swi-msf-share-info-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.swi-msf-share-info-details {
  display: flex;
  flex-direction: column;
}

.swi-msf-share-info-details .swi-checkbox:first-child {
  margin-right: 20px;
  margin-bottom: 10px;
}

.swi-msf-share-info-details .swi-checkbox:last-child {
  margin-bottom: 0;
}

/* ubo ui */
/* .swi-add-more-corp-share-btn, */
/* ubo ui */
/* .swi-add-more-dir-share-btn shares the add-person area styling defined
   alongside .swi-add-dir-share-btn */

.swi-share-info-footer {
  padding: 20px 0;
}

.swi-share-info-total-share {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swi-share-info-total-share-icon {
  color: #808080;
  margin-right: 10px;
}

.swi-share-info-total-share-text {
  color: #808080;
  font-weight: 500;
}

.swi-share-info-total-share.swi-share-info-pass .swi-share-info-total-share-icon {
  color: #4caf50;
}

.swi-share-info-total-share.swi-share-info-pass .swi-share-info-total-share-text {
  color: #4caf50;
}

.swi-share-info-total-share.swi-share-info-error .swi-share-info-total-share-icon {
  color: #e91e63;
}

.swi-share-info-total-share.swi-share-info-error .swi-share-info-total-share-text {
  color: #e91e63;
}

.swi-review-simple-info-table {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #dedede;
  margin-bottom: 30px;
}

.swi-review-simple-info-table-row {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-bottom: 1px solid #dedede;
}

.swi-review-simple-info-table-row:last-child {
  border-bottom: 0;
}

.swi-review-simple-info-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}

.swi-review-simple-info-content {
  margin: 0;
  color: #808080;
}

.swi-msf-form-sub-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--swi-ink);
  margin-top: 0 !important;
  margin-bottom: 6px;
}

.swi-msf-form-sub-header>i {
  margin-left: 0;
  margin-right: 10px;
  color: inherit;
}

/* "next step" hint that closes a section */

.swi-msf-form-sub-header.swi-msf-pink {
  display: inline-flex;
  align-items: center;
  margin-top: 24px !important;
  font-size: 14px;
}

.swi-msf-form-sub-header.swi-msf-pink>i {
  font-size: 20px;
  width: 20px;
  margin-right: 8px;
}

.swi-msf-form-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--swi-ink-muted);
  margin-bottom: 20px;
  margin-top: 0;
}

.swi-msf-form-description.swi-small-text {
  font-size: 10px;
}

/* informational note — used for requirement copy that the user needs before
   they can act, e.g. the local director and shareholder rules */

.swi-msf-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--swi-amber-soft);
  border: 1px solid var(--swi-amber-border);
  border-radius: var(--swi-radius);
  color: var(--swi-amber-ink);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 14px 16px;
  margin: 0 0 16px 0;
}

.swi-msf-note>i {
  flex: 0 0 auto;
  font-size: 18px;
  width: 18px;
  margin: 1px 0 0 0;
  color: #d08700;
}

.swi-msf-note b,
.swi-msf-note strong {
  color: #7a4e0a;
}

.swi-msf-link {
  color: #7f1eff;
  font-weight: 500;
}

.swi-msf-form-back-prev-buttons {
  /* res margin-left: auto; */
  display: flex;
  flex: 1;
}

button.swi-msf-form-prev,
button.swi-msf-form-next {
  /* BeerCSS forces content-box on every button, which makes the inline widths
     JS sets (50% / 80px / 100%) overflow the footer once padding is added */
  box-sizing: border-box;
  height: 48px;
  border-radius: var(--swi-radius-pill);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  padding: 0 24px;
  width: fit-content;
  transition: background-color 150ms ease, color 150ms ease;
}

button.swi-msf-form-prev {
  background-color: var(--swi-surface-muted);
  color: var(--swi-ink);
  /* res width: 70px; */
  width: 50%;
  min-width: 96px;
  margin-right: 10px;
  margin-left: 0;
}

button.swi-msf-form-prev:hover {
  background-color: #e9e9ef;
}

button.swi-msf-form-next {
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--swi-radius-pill);
  background: linear-gradient(90deg, #ffb940, #ff1ea4);
  color: #fff;
  /* res width: 70px; */
  min-width: 120px;
  margin-left: 0;
  margin-right: 0;
  cursor: pointer;
  white-space: nowrap;
}

button.swi-msf-form-next:hover {
  background: linear-gradient(90deg, #ffad22, #ed1595);
}

button.swi-msf-form-prev:focus-visible,
button.swi-msf-form-next:focus-visible {
  outline: none;
  box-shadow: var(--swi-focus-ring);
}

button.swi-msf-form-prev:disabled,
button.swi-msf-form-next:disabled,
button.swi-msf-form-prev[aria-disabled="true"] {
  background: #ededf1;
  color: var(--swi-ink-subtle);
  cursor: not-allowed;
  pointer-events: none;
}

/* Incomplete Next buttons remain clickable so a click can reveal validation
   errors; aria-disabled controls only their shared visual state. */
button.swi-msf-form-next[aria-disabled="true"] {
  background: #f2f2f4;
  color: #b7b7bd;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}

button.swi-msf-form-next[aria-disabled="false"] {
  background: linear-gradient(90deg, #ffb940, #ff1ea4);
  color: #fff;
  box-shadow: none;
  transform: none;
}

button.swi-msf-form-next[aria-disabled="false"]:hover {
  background: linear-gradient(90deg, #ffad22, #ed1595);
  box-shadow: none;
  transform: none;
}

button.swi-msf-form-next:hover {
  background-color: var(--swi-pink-strong);
}

button.swi-msf-form-prev:focus-visible,
button.swi-msf-form-next:focus-visible {
  outline: none;
  box-shadow: var(--swi-focus-ring);
}

button.swi-msf-form-prev:disabled,
button.swi-msf-form-next:disabled,
button.swi-msf-form-prev[aria-disabled="true"],
button.swi-msf-form-next[aria-disabled="true"] {
  background-color: #ededf1;
  color: var(--swi-ink-subtle);
  cursor: not-allowed;
  pointer-events: none;
}

/* Busy state for the step footer buttons. Applied by SwiftlyMsfLoading only
   once a step really starts navigating, never on a click that just failed
   validation. The label is made transparent rather than removed so the button
   keeps the width JS assigned to it and nothing in the footer shifts. */
button.swi-msf-form-prev.swi-btn-busy,
button.swi-msf-form-next.swi-btn-busy,
button.swi-msf-slider-footer-btn.swi-btn-busy {
  position: relative;
  color: transparent !important;
  cursor: progress;
  pointer-events: none;
}

button.swi-msf-form-next.swi-btn-busy {
  background: linear-gradient(90deg, #ffb940, #ff1ea4);
}

button.swi-msf-slider-footer-btn.swi-btn-busy {
  opacity: 1;
}

button.swi-msf-form-prev.swi-btn-busy {
  background-color: var(--swi-surface-muted);
}

/* Chevrons, icons and any other element children of the label. */
button.swi-msf-form-prev.swi-btn-busy > *,
button.swi-msf-form-next.swi-btn-busy > *,
button.swi-msf-slider-footer-btn.swi-btn-busy > * {
  visibility: hidden;
}

/* .swi-msf-form-footer is a z-index: 9998 stacking context, so a busy button
   cannot be raised above the overlay -- it always renders washed out beneath
   it. The spinner is therefore inked rather than white, which reads on both
   the pink gradient and the dimmed version of it. */
/* The third selector is not redundant: incorp-package.css carries
   `.sw-incorp-plan #swi-msf-submit-btn::after { display: none }`, and only an
   id-bearing selector outranks it. */
button.swi-msf-form-prev.swi-btn-busy::after,
button.swi-msf-form-next.swi-btn-busy::after,
button.swi-msf-slider-footer-btn.swi-btn-busy::after,
#swi-msf-submit-btn.swi-msf-form-next.swi-btn-busy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* BeerCSS keeps button::after parked as display:none / opacity:0 for its
     ripple -- both have to be reset or the spinner never paints. */
  display: block;
  opacity: 1;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid rgba(20, 20, 30, 0.2);
  border-top-color: var(--swi-ink);
  animation: swi-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #swi-preloader-wrapper .swi-preloader-spinner,
  button.swi-msf-form-prev.swi-btn-busy::after,
  button.swi-msf-form-next.swi-btn-busy::after,
  button.swi-msf-slider-footer-btn.swi-btn-busy::after {
    animation-duration: 2s;
  }
}

.swi-plan-select-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #dedede;
  width: 100%;
  padding: 0 15px;
  border-radius: 4px;

  margin-bottom: 20px;
}

.swi-plan-select-wrapper.swi-plan-select-wrapper-active {
  background-color: #FEF1F8;
  border: none;
  transform: translateZ(0);
}

.swi-plan-select-price {
  margin-bottom: 0;
  margin-left: auto;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

/* slider */

.swi-msf-overlay {
  position: fixed;
  z-index: 9999;
  /* Anchor to the viewport. Without these offsets the box falls back to its
     static position (the left edge of the centred .swi-msf-wrapper), which
     leaves the page gutter undimmed on wide screens. */
  inset: 0;
  width: auto;
  height: auto;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity linear 200ms;
}

.swi-msf-slider {
  background-color: #fff;
  position: fixed;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform linear 200ms;
  box-shadow: 0px 0 10px 2px rgba(0, 0, 0, 0.1);
}

.swi-msf-slider.swi-msf-slider-open {
  transform: translateX(0);
}

.swi-msf-slider-header {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  border-bottom: 1px solid var(--swi-border);
  display: flex;
  align-items: center;
  padding: 14px 16px 14px 24px;
  z-index: 999999999 !important;
}

.swi-msf-slider-header-text {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--swi-ink);
  margin: 0;
}

.swi-msf-slider-header-text>i {
  color: var(--swi-ink);
  font-size: 22px;
  width: 22px;
  margin-right: 12px;
}

.swi-msf-slider-close-btn {
  margin-left: auto;
  background-color: #fff;
  box-shadow: none !important;
  color: var(--swi-ink-subtle);
}

.swi-msf-slider-close-btn:hover {
  background-color: var(--swi-surface-muted);
  color: var(--swi-ink);
}

.swi-msf-slider-main-content {
  padding: 70px 0 200px 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
}

/* The drawer lists recurring services and one-time charges as separate groups. */
.swi-cart-group + .swi-cart-group {
  margin-top: 18px;
}

.swi-cart-group-title {
  margin: 0;
  color: var(--swi-ink);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.swi-cart-item {
  margin: 0;
  min-height: 40px;
  padding: 10px 0;
  border-bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.swi-cart-item:last-child {
  border-bottom: 0;
}

.swi-cart-item-name {
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--swi-ink-muted);
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
}

.swi-cart-item-name>i {
  color: #7f1eff;
  font-size: 25px;
  width: 25px;
  margin-right: 15px;
}

.swi-cart-item-cost {
  margin-left: auto;
  color: var(--swi-ink);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.swi-cart-empty-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.swi-cart-empty-icon {
  font-size: 96px;
  width: 96px;
  color: #959595;
  margin-bottom: 20px;
}

.swi-cart-empty-text {
  font-size: 16px;
  font-weight: 500;
  color: #959595;
}

.swi-msf-slider-main-content {
  padding: 88px 24px 148px 24px;
}

/* Myinfo call-out inside the add-person drawer: the Singpass button leads,
   with the retrieval terms directly under it, then a divider into the
   manual-entry fields */

.swi-myinfo-card {
  background-color: #f6f6f8;
  border-radius: var(--swi-radius);
  padding: 20px;
  margin-bottom: 20px;
}

.swi-myinfo-card #swi-myinfo-personal-btn {
  display: inline-block;
  margin-bottom: 16px;
}

.swi-myinfo-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--swi-ink);
  margin: 0 0 4px 0;
}

.swi-myinfo-card-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--swi-ink-muted);
  margin: 0;
}

.swi-msf-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px 0;
  font-size: 13px;
  color: var(--swi-ink-subtle);
}

.swi-msf-divider::before,
.swi-msf-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--swi-border);
}

.swi-msf-slider-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
  border-top: 1px solid var(--swi-border);
  display: block;
  align-items: center;
  padding: 16px 24px;
  z-index: 10000;
}

button.swi-msf-slider-footer-btn {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
  border-radius: var(--swi-radius);
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
}

.swi-gst-disclaimer {
  font-size: 13px !important;
  color: #000;
  margin-top: 10px;
  font-weight: 500;
}

.swi-msf-slider-footer-text {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.swi-msf-slider-footer-text i {
  margin-right: 10px;
  color: #808080;
}

.swi-msf-cart-subtotal {
  margin-left: auto;
  font-weight: 600;
  font-size: 20px;
}

.swi-cart-summary-footer {
  padding: 0;
}

.swi-cart-summary-total {
  padding: 16px 24px 17px;
  border-top: 1px solid var(--swi-border);
}

.swi-cart-summary-total-heading,
.swi-cart-summary-total-row {
  display: flex;
  align-items: center;
}

.swi-cart-summary-total-heading h3 {
  margin: 0;
  color: var(--swi-ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.swi-cart-summary-total-heading span {
  margin-left: auto;
  padding: 3px 15px;
  border-radius: 999px;
  background-color: #f1f1f3;
  color: #85858a;
  font-size: 7px;
  line-height: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.swi-cart-summary-total-row {
  align-items: flex-end;
  margin-top: 4px;
}

.swi-cart-summary-total-row p {
  margin: 0 0 2px;
  color: var(--swi-ink-subtle);
  font-size: 11px;
  line-height: 20px;
}

.swi-cart-summary-total-row .swi-msf-cart-subtotal {
  background-image: var(--swi-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 24px;
  line-height: 31px;
  font-weight: 600;
}

.swi-cart-summary-note {
  min-height: 53px;
  margin: 0;
  padding: 16px 24px 17px;
  border-top: 1px solid var(--swi-border);
  color: var(--swi-ink-muted);
  font-size: 12px;
  line-height: 19px;
}

#swi-cart-slider .swi-msf-slider-main-content {
  padding-bottom: 168px;
}

#swi-cart-slider .swi-msf-slider-header {
  padding: 0;
}

button.swi-cart-summary-header-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 14px 16px 14px 24px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--swi-ink);
  text-align: left;
}

button.swi-cart-summary-header-toggle:hover,
button.swi-cart-summary-header-toggle:focus {
  background: transparent;
  box-shadow: none;
}

.swi-cart-summary-collapse-icon {
  width: 20px;
  margin: 0 0 0 auto;
  color: var(--swi-ink-subtle);
  font-size: 20px;
}

.swi-msf-slider-footer-btns {
  display: flex;
  flex: 1;
}

.swi-msf-slider-footer-btn {
  /* uncomment if need 2 btns */
  /* width: 50%; */
  width: 100%;
  margin: 0;
}

/* uncomment if need 2 btns */

/* .swi-msf-slider-footer-btn:nth-child(odd) {
  margin-right: 15px;
} */

.swi-file-uploaded-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 15px 0;
  border-radius: 5px;
  border: 1px solid #dedede;
  color: #7f1eff;
  font-weight: 500;
  margin-bottom: 20px;
}

.swi-file-uploaded-link::before {
  content: "attach_file";
  font-family: "Material Icons";
  font-size: 22px;
  margin-right: 5px;
}

#swi-file-reupload-btn {
  background-color: #7f1eff;
  border-radius: 5px;
  color: #fff;
  box-shadow: none;
  padding: 5px 0;
}

/* stripe */

.swi-stripe {
  padding: 20px 15px;
  display: block;
  width: 100%;
  background-color: #fff;
  height: 56px !important;
  border-radius: 5px !important;
  border: 1px solid #dfdfdf !important;
  position: relative;
}

.swi-stripe::after {
  content: '';
  display: block;
  position: absolute;
  top: -2px !important;
  left: auto !important;
  right: -2px !important;
  background-color: #ff1ea4;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 9998 !important;
}

.swi-stripe.swi-stripe-focused {
  border: 2px solid #ff1ea4 !important;
  outline: 0;
}

#swi-stripe-badge {
  margin-bottom: 20px;
  width: 100%;
  max-width: 388px;
  height: auto;
}

#name,
#company_name,
#primary_ssic_code,
#secondary_ssic_code,
#financial_month,
#financial_year,
#working_hour,
#capital_currency,
#nricno,
#identity_type,
#existing_corp_sec_name,
#existing_nominee_name {
  text-transform: uppercase;
}

#address_line_1 {
  text-transform: uppercase;
}

.swi-payment-success-wrapper {
  background-image: url("../img/swi-payment-success-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.swi-payment-success-inner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 50px 40px;
  width: 90%;
  border-radius: 20px;
  box-shadow: 0px 0 10px -2px rgba(0, 0, 0, 0.3);
}

.swi-payment-success-inner-wrapper img {
  width: 60px;
  margin-bottom: 15px;
}

.swi-payment-success-inner-wrapper h1 {
  margin-bottom: 10px;
  margin-top: 0;
  font-size: 25px;
  text-align: center;
}

.swi-payment-success-inner-wrapper p {
  margin-bottom: 20px;
  margin-top: 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}

.swi-payment-success-inner-wrapper a {
  font-size: 16px;
  text-decoration: none;
  color: #7f1eff;
  font-weight: 600;
}

.swi-payment-table {
  width: 100%;
}

.swi-payment-info-row {
  display: flex;
  margin-bottom: 15px;

}

.swi-payment-info-row>h6 {
  font-weight: 500;
  color: #000;
  font-size: 14px;
  margin-bottom: 0;
}

.swi-payment-info-row>span {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

.swi-payment-info-footer {
  display: flex;
  align-items: baseline;
  padding-top: 15px;
  border-top: 1px solid #dedede;

}

.swi-payment-info-footer>h6 {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.swi-payment-info-footer>h6>i {
  margin-right: 10px;
  color: #a5a5a5;
}

.swi-payment-info-footer>h6>span {
  font-size: 16px;
  font-weight: 300;
}

.swi-payment-info-footer>span {
  font-size: 25px;
  font-weight: 600;
  color: #000;
  margin-left: auto;
}

.swi-promocode-result {
  margin-top: 18px;
}

.swi-demo-photo-btn {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  z-index: 9999;
  opacity: 0;
  margin: 0;
}

.swi-msf-grid-list {
  display: flex;
  flex-direction: column;
}

.swi-msf-grid-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

}

.swi-msf-grid-list-item-text {
  white-space: nowrap;
}

.swi-msf-grid-list-icon {
  background-color: #7f1eff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.swi-msf-grid-list-icon i {
  color: #fff;
  font-size: 18px;

}

.swi-msf-grid-list-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9)
}

.swi-msf-grid-list-item-tooltip {
  color: #7f1eff;
  margin-left: 5px;
}

.swi-msf-grid-list-item-tooltip {
  font-size: 18px;
}

.swi-msf-grid-list-divider-mobile {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}

.swi-msf-grid-list-divider-text {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
}

.swi-msf-grid-list-divider-line {
  margin-left: 10px;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  border: 0;
}

.swi-msf-col-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.swi-msf-col-50 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
  border: 1px solid #DFDFDF;
  border-radius: 5px;
  padding: 15px;
}

.swi-img-header {
  align-items: center;
  margin-bottom: 15px;
}

.swi-img-header-img {
  margin-left: 0;
  margin-right: 15px;
  height: 60px;
}

.swi-img-header-logo {
  height: 14px;
  margin: 0;
  position: relative;
  top: 1px;
}

.swi-img-header-text {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0;
  white-space: nowrap;
  display: inline;
}

.swi-modal-btn:hover::after {
  display: none;
}

.swi-modal-btn:hover {
  color: #4B12C4;
  font-weight: 700;
}

/* ubo ui */
/* .swi-msf-steps {
  border: 1px solid #F81DA4;
  border-radius: 5px;
  height: 40px;
  padding: 5px;
  width: 100%;
  min-width: 1185px;
  max-width: 1185px;
  margin-right: 20px;
}

.swi-msf-steps .swi-msf-step {
  padding: 0 0 0 10px;
}

.swi-msf-steps .swi-msf-step:last-child {
  width: 100%;
  padding-right: 65px;
}

.swi-msf-steps .swi-msf-step:last-child::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 14px solid transparent;
  border-right: none;
  border-left: 14px solid #F82D9D;
  border-bottom: 14px solid transparent;
  background-color: transparent;
  width: 14px;
}

.swi-msf-steps .swi-step-text {
  font-size: 15px;
  color: white;
}

.swi-msf-steps .swi-progressbar {
  background-image: linear-gradient(to right, #FAC34E, #F82D9D);
  border-radius: 5px 0 0 5px;
}

.swi-msf-steps .swi-rocket {
  height: 22px;
  position: absolute;
  top: 2px;
  right: 0;
}

.swi-step-text.percentage {
    position: absolute;
    right: 30px;
}

.swi-msf-steps .swi-rocket img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.swi-msf-steps .swi-msf-step:not(.swi-msf-steps .swi-msf-step:first-child) {
  padding-left: 40px;
}

.swi-msf-steps .swi-msf-step:not(.swi-msf-steps .swi-msf-step:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  display: inline-block;
  border-right: 6px solid white;
  border-bottom: 6px solid white;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
} */
/* ubo ui */

@media (max-width: 1200px) {
  .swi-promocode-result {
    margin-top: -10px;
    margin-bottom: 40px;
  }
}

/* small phones: the journey label gives way so the step indicator and the
   order summary both stay on one line without wrapping */

@media (max-width: 559px) {
  .swi-msf-form-header-title {
    display: none;
  }

  /* keep the drawer title on one line so it does not push the fixed header
     down over the first field */
  .swi-msf-slider-header {
    padding-left: 18px;
  }

  .swi-msf-slider-header-text {
    font-size: 15px;
  }

  .swi-msf-slider-header-text>i {
    margin-right: 10px;
  }

  .swi-msf-form-header-step::before {
    display: none;
  }

  .swi-msf-form-header-step {
    font-size: 11px;
    color: var(--swi-ink-muted);
    font-weight: 600;
  }

  button.swi-add-dir-share-btn,
  button.swi-add-more-dir-share-btn {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
  }

  .swi-add-dir-share-btn>span,
  .swi-add-more-dir-share-btn>span {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  #swi-msf-splash,
  #swi-splash-loader,
  .swi-splash-loader-inner {
    animation: none !important;
  }

  .swi-msf-form-header-progress-bar,
  .swi-msf-slider,
  .swi-msf-overlay,
  button.swi-add-dir-share-btn,
  button.swi-add-more-dir-share-btn,
  button.swi-msf-cart-btn,
  button.swi-msf-form-prev,
  button.swi-msf-form-next,
  .swi-details,
  .swi-edit-btn,
  .swi-delete-btn {
    transition: none !important;
  }
}

#email {
  text-transform: uppercase;
}

@media (min-width: 576px) {
  .swi-company-member-details {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .swi-company-member-details-item {
    width: 50%;
  }



  .swi-review-simple-info-table-row {
    flex-direction: row;
    align-items: center;
  }

  .swi-review-simple-info-content {
    margin-left: auto;
    padding-left: 15px;
    text-align: right;
  }

  /* overflow modal */

  .swi-overflow-modals {
    max-width: 100%;
  }

  .swi-overflow-modal-header {
    flex-direction: row;
    padding: 20px;
  }

  .swi-overflow-modal-header-icon {
    font-size: 30px;
    width: 30px;
    color: #ff1ea4;
    margin-right: 10px;
  }

  .swi-overflow-modal-header-title {
    margin-bottom: 0 !important;
  }

  .swi-modal-info-list-item {
    flex-direction: row;
    padding: 15px 20px;
  }

  .swi-modal-info-list-item-content {
    margin-left: auto;
    text-align: right;
  }
}

@media (min-width: 768px) {

  .swi-msf-steps {
    display: flex;
  }

  .swi-msf-grid-list-divider-mobile {
    display: none;
  }

  .swi-msf-grid-list {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .swi-msf-grid-list-item {
    margin-right: 20px;
  }

  .swi-msf-grid-list-item-with-divider::after {
    content: '/';
    font-size: 70px;
    color: rgba(0, 0, 0, 0.1);
    font-family: initial;
    margin-left: 20px;
  }


  .swi-msf-slider {
    width: 500px;
    max-width: 92vw;
  }

  .swi-msf-slider-header,
  .swi-msf-slider-footer {
    position: absolute;
    z-index: 9999999999 !important;
  }

  .swi-company-member-details-item {
    width: 30%;
  }

  .swi-overflow-modals {
    max-width: 100%;
  }

  .swi-payment-success-inner-wrapper {
    width: 60%;
  }

  .swi-msf-col-wrapper {
    flex-direction: row;
  }

  .swi-msf-col-50 {
    width: 50%;
  }

  .swi-msf-col-50:first-child {
    margin-right: 15px;
  }
}

@media (min-width: 992px) {
  :root {
    --swi-gutter: 48px;
  }

  .swi-msf-sidebar {
    display: block;
  }

  .swi-msf-form-main-content-wrapper {
    padding: 4px var(--swi-gutter) 56px var(--swi-gutter);
  }

  .swi-msf-logo-mobile-link {
    display: none;
  }

  .swi-msf-form-header {
    padding: 20px var(--swi-gutter) 0 var(--swi-gutter);
    border-bottom: 0;
  }

  /* the sidebar carries progress on desktop */
  .swi-msf-form-header-progress {
    display: none;
  }

  button.swi-msf-cart-btn {
    height: 56px;
    min-height: 56px;
    min-width: 330px;
    padding: 0 22px;
    gap: 12px;
  }

  .swi-msf-cart-btn i {
    font-size: 22px;
    width: 22px;
  }

  .swi-msf-cart-btn span {
    font-size: 20px;
  }

  .swi-msf-form-main-header-text>* {
    font-size: 26px;
  }

  .swi-payment-success-inner-wrapper {
    width: 50%;
  }
}

@media (min-width: 1200px) {

  .swi-msf-share-info-details {
    flex-direction: row;
    align-items: center;
  }

  .swi-msf-share-info-details .swi-input-wrapper {
    margin-bottom: 0 !important;
  }

  .swi-msf-share-info-details .swi-checkbox {
    margin-left: 0;
  }

  .swi-msf-share-info-rows .swi-input-wrapper {
    margin-right: 15px !important;
  }

  .swi-msf-form-main-content-wrapper {
    width: 100%;
  }

  .swi-msf-form-rows .field:first-child,
  .swi-msf-form-rows .swi-input-wrapper:first-child {
    margin-right: 15px !important;
  }

  .swi-msf-form-rows {
    flex-direction: row;
    margin-bottom: 15px;
  }

  .swi-input-wrapper {
    width: 50%;
  }

  .swi-input-wrapper.swi-input-country-code {
    width: 20%;
  }

  .swi-input-wrapper.swi-input-contact-no {
    width: calc(30% - 15px);
  }

  /* Back sits at the far left, the primary action at the far right, and the
     progress rail centres between them */
  .swi-msf-form-footer-inner-wrapper {
    position: relative;
  }

  .swi-msf-steps {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* scoped to the footer so it outranks the per-view <style> blocks that set
     display:block on this container */
  .swi-msf-form-footer .swi-msf-form-back-prev-buttons {
    display: flex;
    flex: 1;
    margin-left: 0;
    justify-content: flex-end;
  }

  /* beats the inline margin JS writes on resize */
  button.swi-msf-form-prev {
    margin-right: auto !important;
  }

  .swi-msf-form-prev,
  .swi-msf-form-next {
    width: 80px;
  }

  /* the inline width JS sets is deliberately small; min-width is what gives
     the pills their real size once they stop sharing the row */
  button.swi-msf-form-prev {
    min-width: 112px;
  }

  button.swi-msf-form-next {
    min-width: 168px;
  }

  .swi-plan-select-wrapper {
    width: 50%;
  }

  .swi-plan-select-wrapper:first-child {
    margin-right: 15px;
  }

  .swi-plan-select-wrapper:last-child {
    margin-right: -15px;
  }

  .swi-input-wrapper:last-child {
    margin-right: -15px !important;
  }

  .swi-payment-success-inner-wrapper {
    width: 30%;
  }

  .swi-payment-table {
    width: 60%;
  }

}

@media (min-width: 1500px) {
  .swi-cart-item {
    flex-direction: row;
  }

  .swi-cart-item-name {
    margin-bottom: 0;
  }

  .swi-cart-item-cost {
    font-size: 16px;
    margin-left: auto;
  }

  .swi-payment-success-inner-wrapper {
    width: 25%;
  }
}


#swi-postal-tooltip~.swi-sglocate-icon {
  right: 50px;
}

/* Compact desktop cart summary and Directors & Shareholders composition.
   The page uses the consolidated five-milestone layout from the approved
   reference while the form drawer retains the shared controls. */

@media (max-width: 991px) {
  #swi-cart-slider.swi-msf-cart-summary {
    right: auto;
    bottom: auto;
    height: auto;
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 20px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    box-shadow: 0 18px 42px rgba(18, 18, 24, 0.2);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  #swi-cart-slider.swi-msf-cart-summary.swi-msf-slider-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #swi-cart-slider .swi-msf-slider-header {
    position: static;
    height: 64px;
    padding: 0;
    border: 0;
    background-image: var(--swi-gradient);
  }

  #swi-cart-slider button.swi-cart-summary-header-toggle {
    padding: 0 10px 0 24px;
    color: #fff;
  }

  #swi-cart-slider .swi-msf-slider-header-text {
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
  }

  #swi-cart-slider .swi-msf-slider-header-text>i {
    width: 20px;
    margin-right: 10px;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-cart-summary-collapse-icon {
    width: 20px;
    margin: 0 8px 0 auto;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-msf-slider-main-content {
    width: 100%;
    height: auto;
    max-height: min(240px, calc(100vh - 240px));
    max-height: min(240px, calc(100dvh - 240px));
    padding: 15px 24px 14px;
    overflow-y: auto;
  }

  #swi-cart-slider .swi-cart-item-name,
  #swi-cart-slider .swi-cart-item-cost {
    font-size: 13px;
  }

  #swi-cart-slider .swi-cart-empty-wrapper {
    min-height: 120px;
  }

  #swi-cart-slider .swi-msf-slider-footer {
    position: static;
    width: 100%;
    padding: 0;
    border: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #swi-cart-slider.swi-msf-cart-summary {
    right: auto;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 20px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    box-shadow: 0 18px 42px rgba(18, 18, 24, 0.2);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  #swi-cart-slider.swi-msf-cart-summary.swi-msf-slider-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #swi-cart-slider .swi-msf-slider-header {
    position: static;
    height: 64px;
    padding: 0;
    border: 0;
    background-image: var(--swi-gradient);
  }

  #swi-cart-slider button.swi-cart-summary-header-toggle {
    padding: 0 10px 0 28px;
    color: #fff;
  }

  #swi-cart-slider .swi-msf-slider-header-text {
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
  }

  #swi-cart-slider .swi-msf-slider-header-text>i {
    width: 20px;
    margin-right: 12px;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-cart-summary-collapse-icon {
    width: 20px;
    margin: 0 10px 0 auto;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-msf-slider-main-content {
    width: 100%;
    height: auto;
    max-height: min(240px, calc(100vh - 240px));
    max-height: min(240px, calc(100dvh - 240px));
    padding: 15px 24px 14px;
    overflow-y: auto;
  }

  #swi-cart-slider .swi-cart-item-name,
  #swi-cart-slider .swi-cart-item-cost {
    font-size: 13px;
  }

  #swi-cart-slider .swi-cart-empty-wrapper {
    min-height: 120px;
  }

  #swi-cart-slider .swi-msf-slider-footer {
    position: static;
    width: 100%;
    padding: 0;
    border: 0;
  }
}

@media (min-width: 1200px) {
  #swi-cart-slider.swi-msf-cart-summary {
    right: auto;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 20px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    box-shadow: 0 18px 42px rgba(18, 18, 24, 0.2);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  #swi-cart-slider.swi-msf-cart-summary.swi-msf-slider-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #swi-cart-slider .swi-msf-slider-header {
    position: static;
    height: 64px;
    padding: 0;
    border: 0;
    background-image: var(--swi-gradient);
  }

  #swi-cart-slider button.swi-cart-summary-header-toggle {
    padding: 0 10px 0 28px;
    color: #fff;
  }

  #swi-cart-slider .swi-msf-slider-header-text {
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
  }

  #swi-cart-slider .swi-msf-slider-header-text>i {
    width: 20px;
    margin-right: 12px;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-msf-slider-close-btn,
  #swi-cart-slider .swi-msf-slider-close-btn:hover {
    width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0 0 0 auto;
    padding: 0;
    background-color: transparent;
    color: #fff;
  }

  #swi-cart-slider .swi-msf-slider-close-btn>i {
    width: 20px;
    margin: 0;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-cart-summary-collapse-icon {
    width: 20px;
    margin: 0 10px 0 auto;
    color: #fff;
    font-size: 20px;
  }

  #swi-cart-slider .swi-msf-slider-main-content {
    width: 100%;
    height: auto;
    max-height: min(240px, calc(100vh - 240px));
    max-height: min(240px, calc(100dvh - 240px));
    padding: 15px 24px 14px;
    overflow-y: auto;
  }

  #swi-cart-slider .swi-cart-item-name,
  #swi-cart-slider .swi-cart-item-cost {
    font-size: 13px;
  }

  #swi-cart-slider .swi-cart-empty-wrapper {
    min-height: 120px;
  }

  #swi-cart-slider .swi-msf-slider-footer {
    position: static;
    width: 100%;
    padding: 0;
    border: 0;
  }

  /* No sidebar overrides for this page: it used to run a slightly wider rail,
     a 160px logo and its own step spacing, which made the sidebar shift when
     stepping into and out of it. Every step now uses the base sidebar. */

  /* Every step of the incorporation / corp-sec wizard renders the same
     `sidebar_steps_ui` markup, so the whole journey takes one step treatment
     -- 30px markers and roomier rows on the desktop rail. The gradient current
     step is not width-dependent and lives with the base rules above. Scoped to
     `.sw-incorp-plan`, which is exactly those pages; the other journeys
     (nominee, registered address, payment) keep the flat base. */
  .sw-incorp-plan .swi-msf-sidebar-step {
    min-height: 50px;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 25px;
    color: #66666d;
    font-size: 13px;
    font-weight: 400;
  }

  .sw-incorp-plan .swi-msf-sidebar-step-marker {
    width: 30px;
    height: 30px;
    background-color: #f5f5f5;
    color: #77777d;
    font-size: 12px;
  }

  .sw-incorp-plan .swi-msf-sidebar-step-marker>i {
    width: 16px;
    font-size: 16px;
  }

  .sw-incorp-plan .swi-msf-sidebar-step-completed .swi-msf-sidebar-step-marker {
    background-color: #e8f8ef;
    color: #13ad62;
  }

  /* The legacy form header and its cart button are replaced on this page by
     the shared page-progress header + summary panel (see incorp-package.css,
     `.sw-dir-share-details`), matching the company-information step. */

  .swi-msf-directors-page .swi-msf-form-main-content-wrapper {
    width: 100%;
    padding: 54px 36px 120px;
  }

  .swi-msf-directors-page .swi-msf-form-main-content-inner-wrapper {
    width: 720px;
    max-width: 720px;
  }

  .swi-msf-directors-page .swi-msf-form-main-header {
    margin: 0 0 44px;
  }

  .swi-msf-directors-page .swi-msf-form-main-header-text>* {
    font-size: 20px;
    line-height: 25px;
    letter-spacing: -0.025em;
  }

  .swi-msf-directors-page .swi-msf-note {
    height: 40px;
    padding: 10px 16px;
    gap: 10px;
    margin: 0 0 28px;
    border: 0;
    border-radius: 8px;
    background-color: #fff2dc;
    color: #bd7100;
    font-size: 13px;
    line-height: 20px;
  }

  .swi-msf-directors-page .swi-msf-note>i {
    width: 18px;
    margin: 1px 0 0;
    color: #d88600;
    font-size: 18px;
  }

  .swi-msf-directors-page .swi-msf-note b,
  .swi-msf-directors-page .swi-msf-note strong {
    color: #b76900;
  }

  .swi-msf-directors-page button.swi-add-dir-share-btn,
  .swi-msf-directors-page button.swi-add-more-dir-share-btn {
    min-height: 94px;
    padding: 20px;
    border-color: #ceced3;
    border-radius: 20px;
    gap: 12px;
  }

  .swi-msf-directors-page .swi-add-dir-share-btn>i,
  .swi-msf-directors-page .swi-add-more-dir-share-btn>i {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 30px;
    font-weight: 400;
  }

  .swi-msf-directors-page .swi-add-dir-share-btn>span,
  .swi-msf-directors-page .swi-add-more-dir-share-btn>span {
    gap: 1px;
    font-size: 16px;
    line-height: 22px;
  }

  .swi-msf-directors-page .swi-add-dir-share-btn>span>em,
  .swi-msf-directors-page .swi-add-more-dir-share-btn>span>em {
    font-size: 13px;
    line-height: 19px;
  }

  .swi-msf-directors-page .swi-dir-share-table {
    gap: 12px;
    margin-bottom: 0;
  }

  .swi-msf-directors-page .swi-dir-share-table>footer {
    margin: 0;
  }

  .swi-msf-directors-page .swi-details {
    min-height: 94px;
    border-color: #ededf0;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(18, 18, 24, 0.06);
  }

  .swi-msf-directors-page .swi-summary {
    min-height: 92px;
    padding: 22px 24px;
    border-radius: 20px;
  }

  .swi-msf-directors-page .swi-summary-title {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 600;
  }

  .swi-msf-directors-page .swi-summary-description {
    color: #707076;
    font-size: 13px;
  }

  .swi-msf-directors-page .swi-summary-btns {
    opacity: 1;
  }

  /* Footer comes from the shared `.sw-incorp-plan` treatment so this page
     matches the company-information step. */
}

.swi-dpo-interest-group label {
  left: 0;
}

.swi-dpo-interest-group input {
  width: 24rem !important;
}

.swi-dpo-interest-group .swi-checkbox-wrapper {
  padding-left: 0;
}

/* Directors & Shareholders — add/edit individual drawer */

.swi-msf-directors-page:has(#swi-dir-share-form-slider.swi-msf-slider-open) .swi-msf-overlay {
  background-color: rgba(0, 0, 0, 0.68);
}

body:has(#swi-dir-share-form-slider.swi-msf-slider-open) .crisp-client {
  display: none !important;
}

#swi-dir-share-form-slider {
  width: 500px;
  max-width: 100vw;
  box-shadow: none;
}

#swi-dir-share-form-slider .swi-msf-slider-header {
  height: 57px;
  min-height: 57px;
  padding: 0 17px 0 24px;
  border-bottom-color: #dedede;
}

#swi-dir-share-form-slider .swi-msf-slider-header-text {
  color: #111116;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

#swi-dir-share-form-slider .swi-msf-slider-header-text>i {
  width: 20px;
  margin-right: 12px;
  color: #111116;
  font-size: 20px;
  font-weight: 400;
}

#swi-dir-share-form-slider .swi-msf-slider-close-btn,
#swi-dir-share-form-slider .swi-msf-slider-close-btn:hover {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  color: #b8b8b8;
}

#swi-dir-share-form-slider .swi-msf-slider-close-btn>i {
  width: 18px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}

#swi-dir-share-form-slider .swi-msf-slider-main-content {
  height: 100vh;
  height: 100dvh;
  padding: 80px 24px 100px;
  scrollbar-width: thin;
}

#swi-dir-share-form-slider .swi-drawer-supporting-copy {
  display: none;
}

#swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-msf-form-sub-header,
#swi-dir-share-form-slider #swi-dir-share-upload-doc>.swi-msf-form-sub-header,
#swi-dir-share-form-slider .nominator-form>.swi-msf-form-sub-header {
  margin: 0 0 9px !important;
  color: #111116;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

#swi-dir-share-form-slider .swi-msf-form-description {
  margin: 0 0 20px;
  color: #6e6e73;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}

/* Pull the description up under its heading. The description's own margin-top
   is already 0, so the gap above it comes from the heading's margin-bottom —
   tightened only where a description actually follows, so headings that sit
   straight on top of fields or checkboxes keep the roomier 9px. */
#swi-dir-share-form-slider .swi-msf-form-sub-header:has(+ .swi-msf-form-description),
#swi-dir-share-form-slider #swi-dir-share-upload-doc>.swi-msf-form-sub-header:has(+ .swi-msf-form-description) {
  margin-bottom: 2px !important;
}

/* Input fields render as the shared `field ... border large swi-input-wrapper`
   component (56px, 10px radius, 15px resting label) so the drawer matches the
   company-information step. Only spacing and behavioural rules belong here —
   don't reintroduce size/typography overrides. */
#swi-dir-share-form-slider .swi-msf-form-rows.swi-msf-form-rows-slider>.swi-input-wrapper,
#swi-dir-share-form-slider .swi-input-wrapper {
  margin: 0 0 12px !important;
}

#swi-dir-share-form-slider #identity_type,
#swi-dir-share-form-slider #nationality {
  text-transform: capitalize !important;
}

#swi-dir-share-form-slider #identity_type+label {
  display: none;
}

#swi-dir-share-form-slider #swi-datepicker-icon {
  color: #111116;
}

/* Nominator blocks carry the same date field; layer 2 renders outside the
   drawer, so this one is not scoped to the slider. */
.swi-nominator-datepicker-icon {
  color: #111116;
  cursor: pointer;
}

#swi-dir-share-form-slider #swi-myinfo {
  margin-top: 8px;
}

#swi-dir-share-form-slider .swi-myinfo-card {
  height: 163px;
  margin: 0 0 20px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

#swi-dir-share-form-slider .swi-myinfo-card #swi-myinfo-personal-btn {
  height: 53px;
  margin: 0 0 14px;
}

#swi-dir-share-form-slider .swi-myinfo-card #swi-myinfo-personal-btn img {
  display: block;
  width: 146px;
  height: 53px;
}

#swi-dir-share-form-slider .swi-myinfo-card-title {
  margin: 0 0 2px;
  color: #111116;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

#swi-dir-share-form-slider .swi-myinfo-card-text {
  margin: 0;
  color: #6e6e73;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

#swi-dir-share-form-slider .swi-msf-divider {
  gap: 13px;
  margin: 0 0 24px;
  color: #b3b3b7;
  font-size: 11px;
  line-height: 16px;
}

#swi-dir-share-form-slider .swi-msf-divider::before,
#swi-dir-share-form-slider .swi-msf-divider::after {
  background-color: #b7b7ba;
}

#swi-dir-share-form-slider .swi-radio-wrapper {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  margin: 0 0 22px;
}

#swi-dir-share-form-slider .swi-radio-wrapper>.swi-radio {
  flex: 0 0 auto;
}

#swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-radio-wrapper>.swi-radio:nth-of-type(2) {
  margin-left: 40px;
}

#swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-radio-wrapper>.swi-radio:nth-of-type(3) {
  margin-left: 38px;
}

#swi-dir-share-form-slider .swi-radio-text,
#swi-dir-share-form-slider .swi-checkbox-text {
  color: #111116;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}

#swi-dir-share-form-slider .swi-radio-text {
  padding-left: 8px !important;
}

#swi-dir-share-form-slider .radio>input:not(:checked)+span::before,
#swi-dir-share-form-slider .checkbox>input:not(:checked)+span::before {
  color: #cfcfd2 !important;
}

#swi-dir-share-form-slider .radio>input:checked+span::before,
#swi-dir-share-form-slider .checkbox>input:checked+span::before {
  background-image: var(--swi-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

#swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-msf-form-sub-header:nth-of-type(3) {
  margin-top: 12px !important;
}

#swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-msf-form-sub-header:nth-of-type(4) {
  margin-top: 15px !important;
}

#swi-dir-share-form-slider #swi-dir-share-upload-doc {
  padding-top: 13px;
}

#swi-dir-share-form-slider #swi-dir-share-upload-doc>.swi-msf-form-rows>.swi-input-wrapper {
  margin-bottom: 10px !important;
}

/* NRIC upload boxes keep the base 56px / 10px-radius treatment so they line up
   with the text fields above them. */

#swi-dir-share-form-slider .swi-file-upload-icon {
  color: #111116;
}

#swi-dir-share-form-slider .nominator-form>.swi-checkbox {
  display: flex;
  align-items: flex-start;
  min-height: 38px;
  margin: 0 0 5px;
}

#swi-dir-share-form-slider .nominator-form .swi-checkbox-text {
  padding-left: 31px !important;
}

#swi-dir-share-form-slider .nominator-form>.swi-checkbox>.swi-checkbox-text {
  padding-left: 10px !important;
}

#swi-dir-share-form-slider .nominator-form .swi-tooltip {
  width: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  color: #111116 !important;
  font-size: 14px;
}

#swi-dir-share-form-slider .nominee-type {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 !important;
  padding: 0;
}

#swi-dir-share-form-slider .nominator-form.swi-nominee-enabled>.nominee-type {
  display: flex;
}

#swi-dir-share-form-slider .nominee-type .swi-checkbox {
  min-width: 0;
  margin: 0;
}

#swi-dir-share-form-slider .nominee-type .swi-checkbox-text {
  padding-left: 10px !important;
  white-space: nowrap !important;
}

#swi-dir-share-form-slider .swi-msf-slider-footer {
  padding: 0 24px 20px;
  border-top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 16px);
}

#swi-dir-share-form-slider button.swi-msf-slider-footer-btn {
  height: 59px;
  min-height: 59px;
  border-radius: 999px;
  background-color: #f4f4f4 !important;
  background-image: none !important;
  color: #d2d2d4 !important;
  font-size: 14px;
  font-weight: 600;
}

#swi-msf-add-dir-share-form.swi-dir-share-form-submittable #swi-submit-dir-share,
#swi-msf-add-dir-share-form.swi-dir-share-form-submittable #swi-update-dir-share {
  background-color: #ff7d76 !important;
  background-image: var(--swi-gradient) !important;
  color: #fff !important;
}

@media (max-width: 559px) {
  #swi-dir-share-form-slider .swi-msf-slider-header {
    padding-left: 18px;
  }

  #swi-dir-share-form-slider .swi-msf-slider-main-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  #swi-dir-share-form-slider .swi-radio-wrapper {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }

  #swi-dir-share-form-slider .swi-radio-wrapper>.swi-radio {
    width: 100%;
  }

  #swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-radio-wrapper>.swi-radio:nth-of-type(2),
  #swi-dir-share-form-slider .swi-msf-slider-main-content>.swi-radio-wrapper>.swi-radio:nth-of-type(3) {
    margin-left: 0;
  }

  #swi-dir-share-form-slider .nominator-form.swi-nominee-enabled>.nominee-type {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #swi-dir-share-form-slider .nominee-type .swi-checkbox {
    width: 100%;
  }

  #swi-dir-share-form-slider .swi-msf-slider-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  /* Mobile footer comes from the shared `.sw-incorp-plan` treatment. */
}

/* Directors page: the member cards wrapping `.swi-summary` sit flat — border
   only, no drop shadow at rest or on hover. Declared last so it also overrides
   the desktop `.swi-msf-directors-page .swi-details` treatment above. The
   `:not(:focus-within)` guard keeps the keyboard focus ring intact. */
.swi-msf-directors-page .swi-details:not(:focus-within),
.swi-msf-directors-page .swi-dir-share-table>.swi-details:hover:not(:focus-within) {
  box-shadow: none;
}

/* Keyboard focus stays visible now that the card has no shadow of its own —
   restated here because the desktop block above outranks the base
   `.swi-details:focus-within` rule on specificity order. */
.swi-msf-directors-page .swi-details:focus-within {
  border-color: var(--swi-pink);
  box-shadow: var(--swi-focus-ring);
}

/* ---------------------------------------------------------------------------
   Mobile hardening for the wizard's tap targets and third-party overlays.
   --------------------------------------------------------------------------- */

/* touch-action: manipulation drops the browser's double-tap-to-zoom wait on
   these controls. Without it a tap on Back/Continue can be held back while the
   engine waits to see whether a second tap is coming, which on a touch device
   reads as "the button did nothing". These are single-tap controls -- there is
   no double-tap gesture to preserve. */
.swi-msf-form-next,
.swi-msf-form-prev,
#swi-msf-submit-btn,
.swi-msf-slider-footer-btn,
.swi-msf-cart-btn,
.sw-tablet-menu-toggle,
.swi-msf-slider-close-btn {
  touch-action: manipulation;
}

/* The TermsFeed consent notice is a standalone banner at z-index 2147483647,
   and at its natural height it covers roughly the bottom two-thirds of a phone
   screen -- including any modal underneath it, such as the "select a service
   package" notice on /contact-person, which the visitor then cannot read or
   dismiss. Cap it and let it scroll internally so it stays a banner. */
@media (max-width: 767px) {
  .termsfeed-com---nb {
    max-height: 45vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* ---------------------------------------------------------------------------
   Modal sizing, pinned.

   These land at the end of the sheet and carry !important because the cap has
   to beat three things at once: BeerCSS's own `.modal { top: 10%; max-height:
   80% }`, which matches at identical specificity, and the per-view <style>
   blocks that are emitted after this file. Without that the modals fall back to
   percentage sizing, and percentages on a position:fixed element resolve
   against the initial containing block -- on mobile the LARGE viewport, the
   height the page would have with the browser's chrome hidden. A dialog centred
   and capped against a box taller than the screen hangs off both ends: its
   header goes under the URL bar and its buttons under the bottom toolbar.

   Sizing against dvh instead keeps the whole dialog inside the viewport that is
   actually on screen, and overflow-y lets anything taller scroll internally. */
.swi-modals {
  top: 50dvh !important;
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
}

/* The tall scrolling variant keeps its tighter cap on desktop, where there is
   plenty of room around it. */
.swi-overflow-modals {
  max-height: 60dvh !important;
}

/* Phones and tablets: these are long documents -- the nominee compliance terms
   on /select-plan and the detail popups on /review -- and 60dvh of a phone
   screen shows only a few lines at a time. Below the docked-sidebar breakpoint
   give them almost the whole viewport (12px of backdrop top and bottom, since
   .swi-modals centres them on 50dvh). */
@media (max-width: 1366px) {
  .swi-overflow-modals {
    max-height: calc(100dvh - 24px) !important;
  }
}

/* ...and show their scrollbar. The :where() rule near the top of this file
   hides scrollbars on anything modal-ish, which suits short dialogs but leaves
   a long scrolling document with no cue that there is more below the fold.
   Scoped to this variant so every other modal keeps the clean look; :where()
   carries no specificity, so a single class is enough to win.

   Firefox only: Chrome honours `scrollbar-width` over the ::-webkit-scrollbar
   pseudo-elements, and `thin` there means an overlay bar that reserves no track
   -- no visible side rail. Gating it on engines that lack the pseudo-element
   leaves Chrome and Safari to the styled rules below, which do reserve one. */
/* `auto` rather than just unsetting: the global rule sets `none`, and `none`
   suppresses the styled ::-webkit-scrollbar rules below as well. */
.swi-overflow-modals {
  scrollbar-width: auto;
}

@supports not selector(::-webkit-scrollbar) {
  .swi-overflow-modals {
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 17, 22, 0.28) transparent;
  }
}

.swi-overflow-modals {
  /* reserve the track so the rail is always there rather than appearing over
     the text mid-scroll (and so the content does not reflow when it shows) */
  scrollbar-gutter: stable;
}

.swi-overflow-modals::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

.swi-overflow-modals::-webkit-scrollbar-track {
  background: transparent;
}

.swi-overflow-modals::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
  background-color: rgba(17, 17, 22, 0.28);
}

.swi-overflow-modals::-webkit-scrollbar-thumb:hover {
  background-color: rgba(17, 17, 22, 0.45);
}

/* Slider footer busy state.
   Both `#swi-dir-share-form-slider button.swi-msf-slider-footer-btn` (the
   greyed-out state) and `.swi-dir-share-form-submittable #swi-submit-dir-share`
   (the enabled pink state) set the label colour with !important at id-level
   specificity, so the generic .swi-btn-busy rule cannot hide the label on its
   own. This block is last in the file and matches at equal-or-higher weight. */
#swi-msf-add-dir-share-form #swi-submit-dir-share.swi-btn-busy,
#swi-msf-add-dir-share-form #swi-update-dir-share.swi-btn-busy,
#swi-dir-share-form-slider button.swi-msf-slider-footer-btn.swi-btn-busy {
  color: transparent !important;
}