/* ═══════════════════════════════════════════════════════════════════════
   ns-auth-modal.css — the sign-in family on the public site
   Login / Register, Forgot password and Reset password.

   Scoped to `body.ns-theme .ns-authmodal`, a class carried only by those
   three modals in frontend/assets/header.php. Remove the class and every
   rule here stops applying; nothing else on the site is touched.

   WHY THIS FILE EXISTS
   The modals use a floating-label field: `.contact_inner_form_detail`
   wraps an input whose placeholder is hidden, and a <label> sits on top
   of it and flies up on :focus / :not(:placeholder-shown). ns-legacy.css
   deliberately excluded them from its form rules for exactly that reason
   — but ns-account.css then matched `.floating-input` by name, repainted
   the input and, fatally, gave the placeholder a visible colour. The
   label and the placeholder were being drawn on top of each other.

   The fix is not another exclusion. This file OWNS the component: the
   placeholder goes back to transparent, the input is sized to leave room
   for the floated label inside its own box, and the icon, the reveal-eye
   and the label are each given an explicit position in that box. Anything
   that restyles `.floating-input` elsewhere is out-specified from here.
   ═══════════════════════════════════════════════════════════════════════ */

body.ns-theme .ns-authmodal{
  /* panel palette — the same values ns-theme.css uses for its dark
     sections, so the brand side of the card matches the rest of the site */
  --am-panel-1:#12305A;
  --am-panel-2:#0C1F3D;
  --am-panel-3:#0A182F;
  --am-on-dark:#EDE9E1;
  --am-on-dark-soft:rgba(237,233,225,.72);
  --am-field:56px;
  --am-gutter:46px;      /* icon well on both sides of a field */
}


/* ───────────────────────────────────────────────
   1. THE CARD
   One shell, 920px, split down the middle: form on the left, brand panel
   on the right. The panel is painted by ::after on .modal-content rather
   than by the right-hand column, because the tab strip is a sibling of
   the columns — a panel built inside a column would stop short of the
   card's top edge and leave a white notch.
   ─────────────────────────────────────────────── */
/* custom.css caps this with `#loginModal .modal-dialog`, so the shared rule
   alone loses on specificity — the ID is repeated here to answer it. */
body.ns-theme .ns-authmodal .modal-dialog,
body.ns-theme #loginModal.ns-authmodal .modal-dialog{
  max-width:920px;
  width:calc(100% - 32px);
  margin:16px auto;
}
body.ns-theme .ns-authmodal.ns-authmodal--single .modal-dialog{max-width:470px}
body.ns-theme #forgotmodel.ns-authmodal .modal-dialog,
body.ns-theme #resetpassmodel.ns-authmodal .modal-dialog{max-width:470px}

body.ns-theme .ns-authmodal .modal-content{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,39,69,.10);
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 48px 96px -40px rgba(12,31,61,.55),0 6px 20px rgba(12,31,61,.10);
}

/* the brand panel, full height of the card */
body.ns-theme .ns-authmodal:not(.ns-authmodal--single) .modal-content::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;
  width:50%;
  background:
    radial-gradient(120% 90% at 108% -10%,rgba(217,180,92,.30),transparent 58%),
    radial-gradient(110% 80% at -12% 112%,rgba(44,99,181,.42),transparent 60%),
    linear-gradient(155deg,var(--am-panel-1) 0%,var(--am-panel-2) 52%,var(--am-panel-3) 100%);
  z-index:0;
}

/* everything real sits above the panel */
body.ns-theme .ns-authmodal nav,
body.ns-theme .ns-authmodal .tab-content,
body.ns-theme .ns-authmodal .modal-body,
body.ns-theme .ns-authmodal .close{position:relative;z-index:2}

/* the form column carries the white; the image column stays transparent
   so the panel shows through */
body.ns-theme .ns-authmodal .tab-pane > .row{margin:0}
body.ns-theme .ns-authmodal .tab-pane > .row > .col-md-6:first-child{
  background:var(--surface);
  padding:6px 34px 30px;
}
body.ns-theme .ns-authmodal .tab-pane > .row > .col-md-6:last-child{padding:0}

/* only the form scrolls — the brand panel never moves */
body.ns-theme .ns-authmodal .tab-pane > .row > .col-md-6:first-child{
  max-height:calc(92vh - 74px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
body.ns-theme .ns-authmodal .col-md-6:first-child::-webkit-scrollbar{width:8px}
body.ns-theme .ns-authmodal .col-md-6:first-child::-webkit-scrollbar-thumb{
  background:rgba(15,39,69,.18);border-radius:8px;
}

/* the "or" bubble custom.css hangs off the form column, and the divider
   rule beside it — the brand panel is the division now */
body.ns-theme .ns-authmodal .modal_registration_form{border:0}
body.ns-theme .ns-authmodal .modal_registration_form::after{content:none}


/* ───────────────────────────────────────────────
   2. BRAND PANEL CONTENT
   Either the banner the admin uploaded (full bleed, cover) or, when
   there is none, the copy block rendered by header.php. Both are inside
   .control_image so the panel is never an empty white half.
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal .control_image{
  position:relative;
  height:100%;
  min-height:420px;
  display:block;
  padding:0;
  overflow:hidden;
}
/* The banner an admin uploads is whatever shape they uploaded — the current
   one is 492x328 landscape, and the panel is portrait. `cover` cropped the
   sides off and cut through the artwork's own headline, so the image is
   letterboxed instead: inset from the panel edge, `contain` so nothing is
   ever lost, and framed so the gradient around it reads as deliberate. */
body.ns-theme .ns-authmodal .control_image .offer-image{
  position:absolute;
  inset:20px;
  top:20px;left:20px;right:20px;bottom:20px;
  /* an absolutely positioned <img> with width:auto takes its INTRINSIC size
     and ignores the right/bottom insets, so the box is stated explicitly */
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  max-width:none;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
}

body.ns-theme .ns-authmodal .am-brand{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  padding:44px 38px;
  color:var(--am-on-dark);
}
/* `.tab-pane p` in custom.css sets colour AND size with !important, so every
   <p> in the panel has to answer with !important or it renders #555 on navy. */
body.ns-theme .ns-authmodal .am-brand__kicker{
  font-family:var(--label) !important;
  font-size:10.5px !important;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-2) !important;
  margin:0;
}
body.ns-theme .ns-authmodal .am-brand__title{
  font-family:var(--display);
  font-size:clamp(26px,2.4vw,33px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--am-on-dark);
  margin:0;
}
body.ns-theme .ns-authmodal .am-brand__title em{
  font-style:italic;
  color:var(--gold-2);
}
body.ns-theme .ns-authmodal .am-brand__sub{
  font-family:var(--body) !important;
  font-size:13.5px !important;
  line-height:1.6;
  color:var(--am-on-dark-soft) !important;
  margin:0;
}
body.ns-theme .ns-authmodal .am-brand__list{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
body.ns-theme .ns-authmodal .am-brand__list li{
  position:relative;
  padding-left:27px;
  font-family:var(--body) !important;
  font-size:13.5px !important;
  line-height:1.45;
  color:var(--am-on-dark) !important;
  list-style:none;
}
body.ns-theme .ns-authmodal .am-brand__list li::before{
  content:"";
  position:absolute;
  left:0;top:3px;
  width:16px;height:16px;
  border-radius:50%;
  background:rgba(217,180,92,.18);
  border:1px solid rgba(217,180,92,.55);
}
body.ns-theme .ns-authmodal .am-brand__list li::after{
  content:"";
  position:absolute;
  left:5px;top:7px;
  width:6px;height:3px;
  border-left:1.6px solid var(--gold-2);
  border-bottom:1.6px solid var(--gold-2);
  transform:rotate(-45deg);
}
body.ns-theme .ns-authmodal .am-brand__rule{
  width:46px;height:2px;border:0;margin:2px 0;
  background:var(--gold-fill);opacity:.9;
}


/* ───────────────────────────────────────────────
   3. CLOSE
   custom.css hangs it off the card's outside corner on a coral disc,
   where it reads as a stray element. It belongs inside the card, over
   the dark panel, as glass.
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal .modal-content > #custom_close_icon,
body.ns-theme .ns-authmodal .modal-content > .close{
  position:absolute;
  top:14px;right:14px;
  width:34px;height:34px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(237,233,225,.30);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:var(--am-on-dark);
  opacity:1;
  text-shadow:none;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
body.ns-theme .ns-authmodal .modal-content > #custom_close_icon span,
body.ns-theme .ns-authmodal .modal-content > .close span{
  position:static;
  top:auto;
  opacity:1;
  font-size:21px;
  line-height:1;
  font-weight:400;
  color:inherit;
}
body.ns-theme .ns-authmodal .modal-content > #custom_close_icon:hover,
body.ns-theme .ns-authmodal .modal-content > .close:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(237,233,225,.55);
  transform:rotate(90deg);
}
/* the single-column modals are white behind the button */
body.ns-theme .ns-authmodal--single .modal-content > #custom_close_icon{
  border-color:var(--line-2);
  background:#fff;
  color:var(--text);
  box-shadow:var(--sh-sm);
}
body.ns-theme .ns-authmodal--single .modal-content > #custom_close_icon:hover{
  background:var(--paper-3);
  border-color:var(--blue-2);
}


/* ───────────────────────────────────────────────
   4. TABS — a segmented control, not browser tabs
   ns-account.css puts `gap:4px` on .nav-tabs while custom.css sizes each
   link at exactly 50%: 50% + 50% + 4px overflows the row and the second
   tab wraps underneath the first. Sizing by flex instead of by width
   removes the arithmetic entirely.
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal nav{
  position:relative;
  z-index:2;
  width:50%;
  background:var(--surface);
  padding:22px 34px 6px;
}
/* ns-theme.css frosts the SITE header with `.nav::before{position:absolute;
   inset:0}`. The tab strip carries `class="nav nav-tabs"`, so it grew the same
   pseudo-element — invisible, but stacked above its own links, and it
   swallowed every click on LOGIN and REGISTER. */
body.ns-theme .ns-authmodal .nav-tabs::before,
body.ns-theme .ns-authmodal .nav-tabs::after{content:none !important}

body.ns-theme .ns-authmodal .nav-tabs{
  display:flex;
  gap:0;
  margin:0;
  padding:4px;
  border:1px solid rgba(15,39,69,.10);
  border-bottom:1px solid rgba(15,39,69,.10) !important;
  border-radius:100px;
  background:var(--paper-3);
}
body.ns-theme .ns-authmodal .nav-tabs .nav-link{
  flex:1 1 0;
  width:auto;
  min-width:0;
  margin:0;
  padding:10px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:100px;
  background:transparent;
  font-family:var(--body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
body.ns-theme .ns-authmodal .nav-tabs .nav-link:hover{color:var(--blue-2)}
body.ns-theme .ns-authmodal .nav-tabs .nav-link.active{
  background:var(--surface);
  color:var(--blue-3);
  box-shadow:0 2px 8px rgba(12,31,61,.13);
  border:0;
}
body.ns-theme .ns-authmodal .nav-tabs .nav-link .modal_login_icon{
  width:auto;
  margin:0;
  font-size:12px;
  color:inherit;
  opacity:.75;
}
body.ns-theme .ns-authmodal .nav-tabs .nav-link.active .modal_login_icon{
  color:var(--gold-3);
  opacity:1;
}

body.ns-theme .ns-authmodal .tab-pane.pdzero{padding:0}


/* ───────────────────────────────────────────────
   5. THE FIELD
   The component this file exists for. The box is tall enough to hold the
   floated label inside itself, so the label never escapes above the field
   and never lands on the placeholder. The placeholder goes back to
   transparent — it is the state flag the CSS reads, not visible text.
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal .modal_registration_form{
  position:relative;
  height:auto;
}
body.ns-theme .ns-authmodal .login__registration_forms{padding:0}

body.ns-theme .ns-authmodal .contact_inner_form_detail{
  position:relative;
  width:100%;
  margin:0 0 15px;
  padding:0;
  display:block;
  border:0;
}

body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input,
body.ns-theme .ns-authmodal .contact_inner_form_detail input.form-control,
body.ns-theme .ns-authmodal .contact_inner_form_detail input[type="text"],
body.ns-theme .ns-authmodal .contact_inner_form_detail input[type="email"],
body.ns-theme .ns-authmodal .contact_inner_form_detail input[type="password"]{
  display:block;
  width:100%;
  height:var(--am-field);
  box-sizing:border-box;
  /* symmetric by default; the floating-label variant below claims the top
     15px for its shrunken label */
  padding:0 var(--am-gutter);
  border:1px solid var(--line-2);
  border-radius:13px;
  background:#fff;
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  line-height:20px;
  letter-spacing:0;
  box-shadow:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
/* room at the top for the label once it flies up */
body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input{
  padding-top:24px;
  padding-bottom:7px;
}
body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input:focus,
body.ns-theme .ns-authmodal .contact_inner_form_detail input:focus{
  outline:0;
  border-color:var(--blue-2);
  background:#fff;
  box-shadow:0 0 0 3px rgba(27,75,150,.13);
}

/* transparent placeholder — the floating label depends on it. Scoped to
   .floating-input: the reset modal's fields have no label and the
   placeholder is the only caption they have. */
body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input::placeholder{
  color:transparent;
}
body.ns-theme .ns-authmodal .contact_inner_form_detail input:not(.floating-input)::placeholder{
  color:var(--faint);
}
/* Chrome's autofill repaints the field; keep the ink readable */
body.ns-theme .ns-authmodal .contact_inner_form_detail input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px #fff inset;
}

body.ns-theme .ns-authmodal .contact_inner_form_detail label{
  position:absolute;
  left:var(--am-gutter);
  right:var(--am-gutter);
  top:25px;
  margin:0;
  pointer-events:none;
  font-family:var(--body);
  font-size:14px;
  font-weight:400;
  line-height:20px;
  letter-spacing:0;
  color:var(--faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:top .2s var(--ease),font-size .2s var(--ease),letter-spacing .2s var(--ease),color .2s var(--ease);
}
body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input:focus ~ label,
body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input:not(:placeholder-shown) ~ label,
body.ns-theme .ns-authmodal .contact_inner_form_detail input:focus ~ label,
body.ns-theme .ns-authmodal .contact_inner_form_detail input:not(:placeholder-shown) ~ label{
  top:8px;
  font-size:9.5px;
  font-weight:700;
  line-height:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--blue-2);
}

/* icon well, left. Given an explicit box rather than a baseline offset so
   it lines up with the text whatever the field height becomes. */
body.ns-theme .ns-authmodal .contact_inner_form_detail .input_icons{
  position:absolute;
  left:0;
  top:25px;
  bottom:7px;
  width:var(--am-gutter);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--faint);
  pointer-events:none;
  transition:color .25s var(--ease);
}
body.ns-theme .ns-authmodal .contact_inner_form_detail .floating-input:focus ~ .input_icons,
body.ns-theme .ns-authmodal .contact_inner_form_detail input:focus ~ .input_icons{color:var(--blue-2)}

/* reveal-password eye, right, in a matching well */
body.ns-theme .ns-authmodal .contact_inner_form_detail .toogle_password{
  position:absolute;
  right:0;
  left:auto;
  top:24px;
  bottom:7px;
  width:var(--am-gutter);
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--faint);
  cursor:pointer;
}
body.ns-theme .ns-authmodal .contact_inner_form_detail .toogle_password:hover{color:var(--blue-2)}
body.ns-theme .ns-authmodal .contact_inner_form_detail .toogle_password span::after{left:9px}

/* the old underline sweep belongs to a borderless field */
body.ns-theme .ns-authmodal .contact_inner_form_detail .bar,
body.ns-theme .ns-authmodal .contact_inner_form_detail .highlight{display:none}


/* ───────────────────────────────────────────────
   6. BUTTONS AND LINKS
   Primary action is the brass pill the site uses for its main CTA;
   sapphire is reserved for links, so the two never compete.
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal .modal__form_btn,
body.ns-theme .ns-authmodal #forgot,
body.ns-theme .ns-authmodal #resetpass{
  width:100%;
  min-height:50px;
  margin:4px 0 0;
  padding:13px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:100px;
  background:var(--gold-fill) !important;
  color:#241A05 !important;
  font-family:var(--body);
  font-size:14px !important;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  text-transform:uppercase;
  white-space:normal;
  box-shadow:0 12px 28px -14px rgba(168,123,34,.85) !important;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
}
body.ns-theme .ns-authmodal .modal__form_btn:hover,
body.ns-theme .ns-authmodal #forgot:hover,
body.ns-theme .ns-authmodal #resetpass:hover{
  transform:translateY(-2px);
  background:var(--gold-fill) !important;
  color:#241A05 !important;
  box-shadow:0 18px 36px -16px rgba(168,123,34,.95) !important;
  filter:saturate(1.06);
}
body.ns-theme .ns-authmodal .modal__form_btn:active{transform:translateY(0)}

/* secondary button — "Send OTP", used beside the primary one */
body.ns-theme .ns-authmodal #send_login_otp{
  background:linear-gradient(135deg,var(--blue-1),var(--blue-2) 60%,var(--blue-3)) !important;
  color:#fff !important;
  box-shadow:0 12px 28px -14px rgba(27,75,150,.85) !important;
}
body.ns-theme .ns-authmodal #send_login_otp:hover{
  background:linear-gradient(135deg,var(--blue-1),var(--blue-2) 60%,var(--blue-3)) !important;
  box-shadow:0 18px 36px -16px rgba(27,75,150,.95) !important;
}

body.ns-theme .ns-authmodal #forgotpass,
body.ns-theme .ns-authmodal .forget_password a,
body.ns-theme .ns-authmodal .register-forgot,
body.ns-theme .ns-authmodal #toggle_otp_login,
body.ns-theme .ns-authmodal #back_to_password_login,
body.ns-theme .ns-authmodal #otp_resend_link{
  display:inline-block;
  align-self:flex-start;   /* the column is a flex box: without this the link
                              stretches and its underline crosses the card */
  width:auto;
  max-width:100%;
  margin-top:14px;
  font-family:var(--body);
  font-size:13px;
  font-weight:600;
  color:var(--blue-2) !important;
  text-decoration:none;
  border-bottom:1px solid rgba(27,75,150,.28);
  padding-bottom:1px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
body.ns-theme .ns-authmodal #forgotpass:hover,
body.ns-theme .ns-authmodal .forget_password a:hover,
body.ns-theme .ns-authmodal .register-forgot:hover,
body.ns-theme .ns-authmodal #toggle_otp_login:hover,
body.ns-theme .ns-authmodal #back_to_password_login:hover,
body.ns-theme .ns-authmodal #otp_resend_link:hover{
  color:var(--blue-3) !important;
  border-color:var(--blue-3);
}
body.ns-theme .ns-authmodal #forgotpass{margin-top:0}

/* Remember me | Forgot password, one row above the button */
body.ns-theme .ns-authmodal .am-formrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:2px 0 16px;
}
body.ns-theme .ns-authmodal .am-check{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  cursor:pointer;
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  user-select:none;
}
body.ns-theme .ns-authmodal .am-check span{line-height:1.2}
body.ns-theme .ns-authmodal .am-check:hover{color:var(--text)}
body.ns-theme .ns-authmodal .am-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:0;
  padding:0;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:#fff;
  cursor:pointer;
  position:relative;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
body.ns-theme .ns-authmodal .am-check input[type="checkbox"]:checked{
  background:var(--blue-2);
  border-color:var(--blue-2);
}
body.ns-theme .ns-authmodal .am-check input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;top:2px;
  width:4px;height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
body.ns-theme .ns-authmodal .am-check input[type="checkbox"]:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:2px;
}


/* ───────────────────────────────────────────────
   7. MESSAGES
   The server's reply is written straight into these with its own inline
   colour, so only the container is styled — and only when it holds
   something, otherwise it would leave a gap above the first field.
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal #login_msg,
body.ns-theme .ns-authmodal #signup_msg,
body.ns-theme .ns-authmodal #otp_login_msg,
body.ns-theme .ns-authmodal #forgotmsg{
  display:block;
  font-family:var(--body);
  font-size:13px;
  line-height:1.5;
}
body.ns-theme .ns-authmodal #login_msg:not(:empty),
body.ns-theme .ns-authmodal #signup_msg:not(:empty),
body.ns-theme .ns-authmodal #otp_login_msg:not(:empty){
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--blue-2);
  border-radius:10px;
  background:var(--paper-3);
}
body.ns-theme .ns-authmodal #login_msg p,
body.ns-theme .ns-authmodal #signup_msg p,
body.ns-theme .ns-authmodal #otp_login_msg p{margin:0;font-size:13px !important}
body.ns-theme .ns-authmodal .validity{display:block}
body.ns-theme .ns-authmodal .validity,
body.ns-theme .ns-authmodal .error{
  margin:-9px 0 12px;
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  color:var(--terra);
}


/* ───────────────────────────────────────────────
   8. OTP BLOCK
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal #otp_channel_row{margin:4px 0 14px !important}
body.ns-theme .ns-authmodal .otp_channel_btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 15px;
  border-radius:100px;
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  background:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
body.ns-theme .ns-authmodal #otp_verify_block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
body.ns-theme .ns-authmodal #otp_resend_wait{
  font-family:var(--body);
  font-size:12.5px;
  color:var(--faint);
}
body.ns-theme .ns-authmodal #otp_wa_hint{
  font-family:var(--body);
  color:var(--faint) !important;
}


/* ───────────────────────────────────────────────
   9. THE "OR CONTINUE WITH" RULE AND SOCIAL ROW
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal .am-or{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 14px;
  font-family:var(--label);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}
body.ns-theme .ns-authmodal .am-or::before,
body.ns-theme .ns-authmodal .am-or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
body.ns-theme .ns-authmodal #social_login_buttons{gap:10px}
body.ns-theme .ns-authmodal #fb_login_btn{
  border-radius:100px !important;
  padding:11px 16px !important;
  font-family:var(--body);
  font-size:13.5px !important;
  font-weight:600 !important;
}


/* ───────────────────────────────────────────────
   10. FORGOT / RESET — the single-column members of the family
   ─────────────────────────────────────────────── */
body.ns-theme .ns-authmodal--single .modal-body{padding:34px 32px 30px}
body.ns-theme .ns-authmodal--single .modal-body > .row{margin:0}
body.ns-theme .ns-authmodal--single .modal-body > .row > [class*="col-"]{padding:0}

body.ns-theme .ns-authmodal .am-head{
  margin:0 0 6px;
  font-family:var(--display);
  font-size:25px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--text);
}
body.ns-theme .ns-authmodal .am-head__sub{
  margin:0 0 22px;
  font-family:var(--body) !important;
  font-size:13.5px !important;
  line-height:1.55;
  color:var(--faint) !important;
}

/* custom.css turns the wrapper into a bordered flex row on these two
   modals, which fights the floating label; put it back to the same
   component the login modal uses. */
body.ns-theme #forgotmodel .contact_inner_form_detail,
body.ns-theme #resetpassmodel .contact_inner_form_detail{
  display:block;
  flex-direction:row;
  border:0;
}
body.ns-theme #forgotmodel .contact_inner_form_detail input,
body.ns-theme #resetpassmodel .contact_inner_form_detail input{
  border:1px solid var(--line-2);
}
body.ns-theme #forgotmodel .contact_inner_form_detail input:focus,
body.ns-theme #resetpassmodel .contact_inner_form_detail input:focus{
  border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(27,75,150,.13);
}
/* the reset modal's icons are bare <span>s with no .input_icons class */
body.ns-theme #resetpassmodel .contact_inner_form_detail > span.fas{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--am-gutter);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--faint);
  pointer-events:none;
}
body.ns-theme .ns-authmodal #forgotwa{
  border-radius:100px !important;
  font-family:var(--body);
  font-size:13.5px !important;
  min-height:48px;
}
body.ns-theme .ns-authmodal .forget_password{margin-top:2px}


/* ───────────────────────────────────────────────
   11. NARROW SCREENS
   Below 860px the brand panel is dropped rather than squeezed: a 44px
   sliver of gradient beside a form is worse than no panel at all.
   ─────────────────────────────────────────────── */
@media (max-width:859.98px){
  body.ns-theme .ns-authmodal .modal-dialog,
  body.ns-theme #loginModal.ns-authmodal .modal-dialog{max-width:470px}
  body.ns-theme .ns-authmodal:not(.ns-authmodal--single) .modal-content::after{content:none}
  body.ns-theme .ns-authmodal nav{width:100%;padding:20px 62px 4px 22px}
  /* line the close button up with the middle of the tab pill */
  body.ns-theme .ns-authmodal .modal-content > #custom_close_icon,
  body.ns-theme .ns-authmodal .modal-content > .close{top:26px;right:16px}
  body.ns-theme .ns-authmodal .tab-pane > .row > .col-md-6:first-child{
    padding:6px 22px 26px;
    max-height:calc(88vh - 74px);
  }
  body.ns-theme .ns-authmodal .tab-pane > .row > .col-md-6:last-child{display:none}
  body.ns-theme .ns-authmodal .modal-content > #custom_close_icon,
  body.ns-theme .ns-authmodal .modal-content > .close{
    border-color:var(--line-2);
    background:#fff;
    color:var(--text);
    box-shadow:var(--sh-sm);
  }
  body.ns-theme .ns-authmodal--single .modal-body{padding:30px 22px 26px}
}

@media (max-width:479.98px){
  body.ns-theme .ns-authmodal{--am-gutter:42px}
  body.ns-theme .ns-authmodal .modal-dialog{width:calc(100% - 20px);margin:10px auto}
  body.ns-theme .ns-authmodal .modal-content{border-radius:18px}
  body.ns-theme .ns-authmodal .nav-tabs .nav-link{font-size:11px;letter-spacing:.07em}
  body.ns-theme .ns-authmodal .contact_inner_form_detail label{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  body.ns-theme .ns-authmodal *{transition-duration:.01ms !important}
  body.ns-theme .ns-authmodal .modal-content > #custom_close_icon:hover{transform:none}
}