/* Neutralize the theme's default element styles */
.nias-modal-box button,
.nias-modal-box input {
  margin: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  box-shadow: none;
}
/* --------------------------------- Inputs --------------------------------- */
.nias-modal-box * {
  box-sizing: border-box;
}
/* Floating field label - the only place the label transform is written.
   The offset comes from custom properties set by two sources: the plugin's
   appearance settings (view/nias_login_modal.php) and the Elementor widget
   controls (elementor-widget/login-widget.php). Each source used to write its
   own transform rule as well, and those fought each other; now they only set the
   variable. The widget's variable lands on the label itself and the plugin's on
   the default modal, so the two never meet on one element. */
.nias-main-modal .nsinput-field label.ns-radio-label {
  position: absolute !important;
  color: var(--nias-label-color, #8d8d8d);
  pointer-events: none;
  background-color: transparent;
  right: 9px;
  /* The label centres against the field's real middle rather than a fixed offset
     from the top. It used to be top:0 plus a hard pixel value, which was only
     right for the plugin's own default height; in themes that change the input's
     padding, line-height or font, the label drifted out of the field. The
     reference is now 50% of the field's own height, so any height lands
     correctly and the settings values are pure fine-tuning (0 = dead centre). */
  top: var(--nias-label-anchor, 50%);
  transform: translateY(var(--nias-label-center, -50%))
    translateY(var(--nias-label-ty, 0px))
    translateX(var(--nias-label-tx, 0px)) scale(var(--nias-label-sc, 1));
  transition: all 0.3s ease;
  max-width: fit-content;
  margin: 0;
  line-height: 1.2;
  font-size: 15px;
}
.nias-main-modal .nsinput-field input[type="text"],
.nias-main-modal .nsinput-field input[type="password"],
.nias-main-modal .nsinput-field input[type="tel"],
.nias-main-modal .nsinput-field input[type="email"] {
  box-sizing: border-box;
  font-size: var(--nias-font-size, 1rem);
  line-height: var(--nias-input-line-height, 0);
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  padding: var(--nias-input-padding, 12px 16px);
  min-height: var(--nias-input-min-height,43px);
  height: var(--nias-input-height, auto);
  border: 1px solid #cdcdcd;
  outline: none !important;
}

.nias-main-modal .nsinput-field input[type="text"]:focus,
.nias-main-modal .nsinput-field input[type="password"]:focus,
.nias-main-modal .nsinput-field input[type="tel"]:focus,
.nias-main-modal .nsinput-field input[type="email"]:focus,
.nias-main-modal .nsinput-field input[type="text"]:valid,
.nias-main-modal .nsinput-field input[type="password"]:valid,
.nias-main-modal .nsinput-field input[type="tel"]:valid,
.nias-main-modal .nsinput-field input[type="email"]:not(:placeholder-shown) {
  outline: none;
  border: solid 1px #0034de;
}

/* Focused/filled state - same rule, with the -f variables */
.nias-main-modal .nsinput-field input[type="text"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="password"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="tel"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="email"]:focus ~ label,
.nias-main-modal .nsinput-field input[type="text"]:valid ~ label,
.nias-main-modal .nsinput-field input[type="password"]:valid ~ label,
.nias-main-modal .nsinput-field input[type="tel"]:valid ~ label,
.nias-main-modal
  .nsinput-field
  input[type="email"]:not(:placeholder-shown)
  ~ label {
  /* Sits on the field's top border; again independent of field height */
  top: var(--nias-label-anchor-f, 0);
  transform: translateY(var(--nias-label-center-f, -50%))
    translateY(var(--nias-label-ty-f, 0px))
    translateX(var(--nias-label-tx-f, -5px)) scale(var(--nias-label-sc-f, 0.7)) !important;
  background-color: var(--nias-modal-bg, #fff);
  padding: 0px 5px;
  color: var(--nias-label-color-focus, #0034de);
  font-weight: bold;
  letter-spacing: 1px;
  border: none;
  border-radius: 100px;
}

/* The Elementor widget keeps the old geometry: its own controls (top offset,
   Y transform, typography) write onto this same label and were all tuned
   assuming "reference = top of field". Auto-centring would move every existing
   widget overnight, so the previous reference and line-height are restored here
   and stored widget values keep exactly the meaning they had. */
.nias-main-modal.nias-elementor .nsinput-field label.ns-radio-label {
  --nias-label-anchor: 0px;
  --nias-label-center: 0px;
  --nias-label-anchor-f: 0px;
  --nias-label-center-f: 0px;
  line-height: 30px;
}

/* ---------------------------------- Tabs ---------------------------------- */
.nias-tabs {
  overflow: hidden;
}
.nias-tabs__header {
  display: flex;
  gap: 6px;
  padding: 8px;
}

/* Radios are hidden but stay accessible */
.nias-main-modal .nias-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset-inline-start: -9999px;
}

.nias-main-modal label#nias-label-2 {
  float: right;
}

.nias-main-modal label#nias-label-1 {
  float: left;
}

/* Tab labels */
.nias-tabs label:not(.nsinput-field label) {
  cursor: pointer;
  user-select: none;
  padding: 8px 15px;
  border-radius: 12px;
  color: #cbd5e1;
  font-weight: 600;
  transition: all 0.25s ease;
  outline-offset: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  position: relative;
  background-color: #000000;
}
.nias-tabs label[aria-selected="false"] {
    background-color: #00000017!important;
    color: #000000bd!important;
}
.nias-tabs label:not(.nsinput-field label):hover,
.nias-tabs [id^="nias-tab-"]:checked + label {
  color: #ffffff;
}

/* Tab bodies */
.nias-tabs__panels {
  position: relative;
}
.nias-panel {
  display: none;
  border-radius: 14px;
  animation: nias-fade 0.25s ease both;
}
@keyframes nias-fade {
  from {
    opacity: 0;
    translate: 0 6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Show the panel belonging to each radio */

/* Horizontal tab scrolling on mobile */
.nias-tabs__header {
  overflow: auto;
  scrollbar-width: thin;
}
.nias-tabs__header::-webkit-scrollbar {
  height: 6px;
}
.nias-tabs__header::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}

/* Content typography */
.nias-panel p {
  margin: 0.25rem 0;
}

/* Sufficient contrast for keyboard focus */
.nias-tabs label:focus-visible {
  outline: 3px solid #38bdf8;
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
}

.nias-modal-box {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 999999999;
  background-color: #00000082;
  visibility: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  transition: all 0.3s linear;
  display: flex;
}
.nias-modal-box.open,
.nias-locked .nias-modal-box {
  visibility: visible;
  opacity: 1;
}
/* Page lock - only direct children of body are hidden.
   This rule used to target every element on the page; if a theme wrapped the
   modal inside another element (an unterminated <small> in Woodmart's copyright
   block, say, which makes the browser nest the rest of the footer inside it),
   that parent wrapper was hidden too and took the modal with it - leaving a
   completely blank page. */
.nias-locked > *:not(.nias-modal-box):not(.nias-success):not(#nias-toast-wrap) {
  display: none !important;
}
.nias-locked button.nias-close-modal {
  display: none;
}
.nias-panel .nias-modal-title {
  display: flex;
  justify-content: center;
}

.nias-main-modal {
  background-color: var(--nias-modal-bg, #fff);
  padding: 15px;
  border-radius: var(--nias-radius, 15px);
  position: relative;
  width: 400px;
  display: block;
  margin: 10px;
  max-width: 750px;
  transform: scale(0);
  transition: 0.3s;
}
.nias-modal-box.open .nias-main-modal,
.nias-locked .nias-main-modal {
  transform: scale(1);
}

@media screen and (max-width: 500px) {
  .nias-main-modal {
    width: 350px;
  }
}
.nias-phone-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 10px;
  gap: 10px;
}

.nias-phone-box input[type="text"],
.nias-phone-box input[type="password"],
.nias-phone-box input[type="tel"],
.nias-phone-box input[type="email"] {
  border: none;
  outline: none;
  background-color: transparent;
  direction: ltr;
  border-bottom: 1px solid #043dcc00;
}

.nias-phone-box input[type="text"]:focus,
.nias-phone-box input[type="password"]:focus,
.nias-phone-box input[type="tel"]:focus,
.nias-phone-box input[type="email"]:focus {
  border-bottom: 1px solid #043ccc;
  border-radius: 0;
}

.nias-login-field button,
.nias-login-code button {
  background: var(--nias-primary, #043ccc);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  color: white;
  fill: white;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-top: 20px;
  gap: 10px;
  padding: 12px 24px;
  font-family: unset;
  margin-bottom: 0;
}
button.nias-close-modal {
  padding: 0;
  outline: none !important;
  display: flex;
  gap: 10px;
  font-size: var(--nias-close-btn-font, 12px);
  border: none !important;
  position: absolute;
  top: var(--nias-close-btn-top, -22px);
  right: var(--nias-close-btn-right, 0px);
  color: var(--nias-close-btn-color, #ffffff);
  fill: currentColor;
  stroke: currentColor;
  background-color: var(--nias-close-btn-bg, red) !important;
  align-items: center;
  /* Not a fixed width: as the icon or text grows the button has to make room, or
     the content is crushed. The settings value is a floor, not a ceiling. */
  width: auto;
  min-width: var(--nias-close-btn-width, 100px);
  text-align: center;
  justify-content: center;
  border-radius: var(--nias-close-btn-radius, 20px 20px 0 20px);
  padding: 5px;
  font-family: unset;
  box-shadow: var(--nias-close-btn-shadow, -14px 5px 20px 0 #0000004a);
}

/* Close icon size.
   min-width/min-height sit alongside width/height because many themes ship a
   global svg { max-width:100%; height:auto } rule that shrinks the icon. The
   floor blocks that, while width/height still allow a size below the default. */
button.nias-close-modal svg {
  width: var(--nias-close-btn-icon, 24px);
  height: var(--nias-close-btn-icon, 24px);
  min-width: var(--nias-close-btn-icon, 24px);
  min-height: var(--nias-close-btn-icon, 24px);
  flex-shrink: 0;
}
.nias-modal-title {
  width: 100%;
  text-align: center;
  display: block;
  font-size: var(--nias-title-font-size, 20px);
  font-weight: bold;
  margin-bottom: 30px;
  color: var(--nias-title-color, #205fff);
}
/*
span.nias-modal-title.second-form {
  width: 100%;
  display: flex;
}
  */
.nias-subtitle,
.nias-login-form label:not(.nsinput-field label) {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  font-size: var(--nias-subtitle-font-size, 13px);
  display: block;
}

.nias-login-message {
  margin-top: 20px;
  background-color: #ff000029;
  padding: 5px 12px;
  color: #fa0000;
  border-radius: 10px;
  display: none;
}
.nias-login-message.active {
  display: flex;
}

.nias-code-box {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  direction: ltr;
  flex-wrap: nowrap;
  flex-direction: row;
}
.nias-main-modal .nias-code-box input[type="text"],
.nias-main-modal .nias-code-box input[type="password"],
.nias-main-modal .nias-code-box input[type="tel"],
.nias-main-modal .nias-code-box input[type="email"] {
  background: #efefef;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #cdcdcd00;
  text-align: center;
  direction: ltr;
  font-size: 30px;
  color: var(--nias-primary, #043ccc);
  transition: all 0.3s ease;
}
.nias-main-modal .nias-code-box input[type="text"]:focus,
.nias-main-modal .nias-code-box input[type="password"]:focus,
.nias-main-modal .nias-code-box input[type="tel"]:focus,
.nias-main-modal .nias-code-box input[type="email"]:focus {
  background-color: #eaecff;
  border: 1px solid #2666cf;
  outline: none;
}

.nias-under-code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
/* Server messages are multi-line: a title on the first line and details (send
   destinations) below. The toast splits those same lines into title and body, so
   they must render line by line here too or they run together in one paragraph. */
.nias-login-result,
.nias-login-message {
  white-space: pre-line;
}
.nias-login-result {
  margin: 0;
}
.nias-confirm-box {
  display: flex;
  gap: 20px;
}

.nias-resend {
  opacity: 0;
  cursor: not-allowed;
  text-decoration: none;
  visibility: hidden;
  transition: all 0.3s ease;
}

.nias-success {
  background-color: #ffffffe6;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2147483646;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

p.niaslogin-success-title {
  font-size: 20px;
  color: #00cf30;
  background-color: #00cf301c;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: bold;
}
p.niaslogin-success-subtitle {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  color: #00a827;
  fill: #00a827;
}
.nias-success svg {
  width: 50px;
  height: 50px;
}
.nias-login-field button[disabled],
.nias-login-code button[disabled] {
  filter: grayscale(1);
  cursor: not-allowed;
}

.nias-checkicon {
  width: 70px;
  height: 30px;
  display: none;
}

.nias-resendbox {
  display: flex;
  gap: 10px;
  color: var(--nias-primary, #043ccc);
  border-radius: 10px;
  width: 100%;
  justify-content: center;
  max-width: 200px;
  padding: 10px;
  margin: auto;
  font-size: 13px;
}

.nias-resendbox.active .nias-resend {
  cursor: pointer;
  opacity: 1;
  text-align: center;
  border-radius: 10px;
  color: white;
  visibility: visible;
  opacity: 1;
}
.nias-resendbox.active circle.fill-neutral-light {
  fill: var(--nias-primary, #043ccc) !important;
}

span.nias-countdown {
  display: flex;
  justify-content: center;
}
input#niasphoneinput[type="text"],
input#niasphoneinput[type="password"],
input#niasphoneinput[type="tel"],
input#niasphoneinput[type="email"] {
  width: 100%;
}
#nias-change-number,
.nias-main-modal button.nias-forgot-password {
  background-color: color-mix(in srgb, var(--nias-primary, #043ccc) 28%, transparent);
  color: var(--nias-primary, #043ccc);
}

.nias-spinner-timer {
  fill: var(--nias-primary, #043ccc);
}
.stroke-neutral-dark {
  stroke: var(--nias-primary, #043ccc) !important;
}
/* --------------------------- form logo style img -------------------------- */
.nias-login-form-logo img,
.nias-login-form-logo-code img {
  display: flex;
  align-self: center;
}
.nias-login-form-logo,
.nias-login-form-logo-code {
  display: flex;
  flex-direction: column;
}

/* ------------------------------- input email ------------------------------ */
.nias-main-modal input#nias_email_input[type="text"],
.nias-main-modal input#nias_email_input[type="password"],
.nias-main-modal input#nias_email_input[type="tel"],
.nias-main-modal input#nias_email_input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: var(--nias-input-padding, 12px 16px);
  border: 1px solid #cdcdcd;
  outline: none !important;
  line-height: 0;
}

/* ---------------- to hide resend box when tab 2 is checked ---------------- */

.ns-text-small {
  font-size: 12px;
  display: block;
}
.nias-modal-box form {
  margin: 0;
}

/* ---------------------------- resend box style ---------------------------- */
.nias-spinner-timer,
.nias-resendbox.loading span.nias-countdown,
.nias-resendbox.active span.nias-countdown,
.nias-modal-box:has(#nias-tab-1:checked) .nias-resendbox,
.logged-in .nias-main-modal,
.nias-main-modal.verify .nias-login-form,
.nias-main-modal .nias-login-code,
.nias-login-field button svg,
.nias-confirm-code svg {
  display: none;
}

.nias-resendbox.loading .nias-spinner-timer,
.nias-checkicon.correct,
.nias-main-modal.verify .nias-login-code,
.nias-main-modal form.loading button svg,
#nias-tab-2:checked ~ .nias-tabs__panels #nias-panel-2,
#nias-tab-1:checked ~ .nias-tabs__panels #nias-panel-1 {
  display: block;
}

/*for improve timer svg*/
.nias-resendbox,
.nias-main-modal .nsinput-field {
  position: relative;
}

/* This box must be exactly as tall as the input, or the label's centring
   (top:50%) lands a few pixels low: an inline-block input leaves line-descent
   space beneath it. Flex removes that gap. The label and the password eye button
   are absolute and out of flow, so the layout is otherwise unchanged. */
.nias-main-modal .nsinput-field {
  display: flex;
  flex-direction: column;
}

/* --- OTP sending loader overlay --- */
#nias-code-form {
  position: relative;
}
#nias-code-form.nias-otp-sending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  z-index: 10;
}
#nias-code-form.nias-otp-sending::before {
  content: "در حال ارسال کد تایید...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  color: #043ccc;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(4, 60, 204, 0.15);
}

.nias-resendbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

a.nias-resend,
span.nias-countdown,
.nias-spinner-timer {
  position: absolute;
}

.spinner_d9Sa {
  transform-origin: center;
}

.spinner_qQQY {
  animation: spinner_ZpfF 9s linear infinite;
}

.spinner_pote {
  animation: spinner_ZpfF 0.75s linear infinite;
}

@keyframes spinner_ZpfF {
  100% {
    transform: rotate(360deg);
  }
}

/* Manual password creation and strength meter */
.nias-manual-password {
  display: flex;
  flex-direction: column;
}

.nias-pass-strength {
  margin: -2px 0 10px;
}

.nias-pass-strength__track {
  height: 6px;
  border-radius: 6px;
  background: #e5e7eb;
  overflow: hidden;
}

.nias-pass-strength__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: #e53935;
  transition: width 0.25s ease, background 0.25s ease;
}

.nias-pass-strength__text {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #8d8d8d;
}

/* Show/hide password eye icon */
.nias-main-modal .nsinput-field.nias-has-toggle input[type="password"],
.nias-main-modal .nsinput-field.nias-has-toggle input[type="text"] {
  padding-left: 42px;
}

.nias-main-modal .nsinput-field .nias-pass-toggle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #8d8d8d !important;
  fill: currentColor !important;
  line-height: 0;
  z-index: 2;
}

.nias-main-modal .nsinput-field .nias-pass-toggle:hover {
  color: #0034de !important;
}

.nias-main-modal .nsinput-field .nias-pass-toggle svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Google sign-in button - full width, below the confirm/edit buttons */
.nias-main-modal .nias-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 11px 16px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.nias-main-modal .nias-google-btn:hover {
  background: #f7f8fa;
  border-color: #c6c9ce;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.nias-main-modal .nias-google-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.nias-main-modal .nias-google-btn span {
  line-height: 1;
}

/* ── iOS: stop Safari zooming the page when a field takes focus ───────────────
   Mobile Safari zooms into any form control whose font-size computes below
   16px, and it never zooms back out: the user is left on a page wider than the
   screen with the modal half off it.

   A computed size of at least 16px is the only reliable cure. maximum-scale on
   the viewport is ignored by current iOS, would block pinch-zoom for everyone,
   and on a theme's page the plugin does not own that tag anyway.

   @supports (-webkit-touch-callout: none) is the standard iOS test - the
   property exists only there, and every browser on iOS is WebKit - so desktop
   and Android keep the configured sizes untouched.

   max() rather than a flat 16px, so a site that configured a larger field size
   keeps it and only sizes that would trigger the zoom are lifted. !important is
   required because the base size is settings-driven (--nias-font-size) and the
   Elementor widget writes its typography at a far higher specificity.

   .nias-code-box is deliberately absent: its digits are 30px by design, well
   clear of the threshold. An earlier fix here forced them to 16px on every
   device, which shrank the OTP boxes the stylesheet had sized at 30px.

   Both roots are listed. .nias-main-modal covers the Elementor widget dropped
   straight onto a page, whose own root is .nias-main-modal.nias-elementor with
   no .nias-modal-box around it; .nias-modal-box covers anything inside the
   modal shell but outside that element. */
@supports (-webkit-touch-callout: none) {
  .nias-modal-box .nsinput-field input,
  .nias-modal-box .nias-phone-box input,
  .nias-modal-box select,
  .nias-modal-box textarea,
  .nias-main-modal .nsinput-field input,
  .nias-main-modal .nias-phone-box input,
  .nias-main-modal select,
  .nias-main-modal textarea {
    /* Fallback first: max() needs iOS 11.3, and an unparsable declaration is
       dropped, leaving the plain value in place. */
    font-size: 16px !important;
    font-size: max(16px, var(--nias-font-size, 1rem)) !important;
  }
}

/* ===================================================================
   Hardening against global theme and Elementor kit styles
   ===================================================================
   Elementor builds a "kit" per site whose selectors, such as
   .elementor-kit-7 button:hover, apply to every button on the page. That
   selector weighs (0,2,1), more than this file's plain .nias-login-field button
   at (0,1,1), so the modal buttons took their colour from the kit - especially
   on hover, where we had no rule at all - and the appearance settings looked
   like they did nothing.
   Those states are restated here at a higher weight, using the value from the
   settings. !important is deliberately avoided so user customisation stays
   possible; only the selector weight goes up.

   :not(.nias-elementor) means these rules never reach the Elementor widget,
   where the widget's own controls decide. */

.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-field button,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-code button {
  background: var(--nias-primary, #043ccc);
  color: #fff;
  fill: #fff;
  border: none;
  box-shadow: none;
  text-decoration: none;
}

.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-field button:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-field button:focus,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-code button:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-login-code button:focus {
  /* A darker shade of the same base colour - no separate setting, so it can never
     clash with it. Very old browsers do not understand color-mix and keep the
     previous line (the base colour). */
  background: var(--nias-primary, #043ccc);
  background: color-mix(in srgb, var(--nias-primary, #043ccc) 84%, #000);
  color: #fff;
  fill: #fff;
  box-shadow: none;
}

/* Secondary buttons: edit number and forgot password */
.nias-modal-box .nias-main-modal:not(.nias-elementor) #nias-change-number,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-forgot-password {
  background-color: color-mix(in srgb, var(--nias-primary, #043ccc) 28%, transparent);
  color: var(--nias-primary, #043ccc);
  border: none;
  box-shadow: none;
}

.nias-modal-box .nias-main-modal:not(.nias-elementor) #nias-change-number:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) #nias-change-number:focus,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-forgot-password:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-forgot-password:focus {
  background-color: color-mix(in srgb, var(--nias-primary, #043ccc) 44%, transparent);
  color: var(--nias-primary, #043ccc);
}

/* Close button - background and text colour both from the settings */
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:focus {
  color: var(--nias-close-btn-color, #ffffff);
  fill: currentColor;
  stroke: currentColor;
  border: none;
  box-shadow: var(--nias-close-btn-shadow, -14px 5px 20px 0 #0000004a);
}

.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal:focus {
  background-color: color-mix(in srgb, var(--nias-close-btn-bg, red) 84%, #000) !important;
}

/* The close button's svg takes the text colour (the markup uses stroke="currentColor") */
.nias-modal-box .nias-main-modal:not(.nias-elementor) button.nias-close-modal svg {
  stroke: currentColor;
}

/* Fields: the kit puts a border and box-shadow on input as well */
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input:focus,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-code-box input:focus {
  box-shadow: none;
}

/* Resend link - the theme's global link colour must not reach it */
.nias-modal-box .nias-main-modal:not(.nias-elementor) a.nias-resend,
.nias-modal-box .nias-main-modal:not(.nias-elementor) a.nias-resend:hover,
.nias-modal-box .nias-main-modal:not(.nias-elementor) a.nias-resend:focus {
  color: var(--nias-primary, #043ccc);
  text-decoration: none;
}

.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-resendbox.active .nias-resend,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nias-resendbox.active .nias-resend:hover {
  color: #fff;
}

/* Floating label - its colour comes from the settings, not the global label style */
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field label.ns-radio-label {
  color: var(--nias-label-color, #8d8d8d);
}

.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input:focus ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="text"]:valid ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="password"]:valid ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="tel"]:valid ~ label.ns-radio-label,
.nias-modal-box .nias-main-modal:not(.nias-elementor) .nsinput-field input[type="email"]:not(:placeholder-shown) ~ label.ns-radio-label {
  color: var(--nias-label-color-focus, #0034de);
}
p.nias-subtitle {
    margin-bottom: 10px;
}