/* ==========================================================================
   NSRL VALIDATION — shared input + button states (the site-wide rule)
   Path: assets/common/css/shared/validation.css

   Based on the Input-Fields / Clickable reference videos:
     idle      grey fill, no visible border
     focus     white fill, dark border
     invalid   red border + message under the field (shown while typing)
     disabled  submit/proceed buttons fade to pale grey, not clickable

   Usage: add class "nsrl-input" to any input/select/textarea and
   "nsrl-btn-submit" to any Save / Submit / Proceed button. nsrl-validation.js
   toggles .is-invalid and the disabled state; this file only styles them.
   Toast + confirm dialog styles moved to assets/common/css/shared/popups.css.
   !important on the visual props is deliberate (same as signIn.css): page
   stylesheets scope with IDs and would otherwise win.
   ========================================================================== */

:root {
  --nsrl-v-field: #f1f3f4;
  --nsrl-v-field-hover: #e8eaec;
  --nsrl-v-ink: #1e293b;
  --nsrl-v-focus: #111827;
  --nsrl-v-danger: #b42318;
  --nsrl-v-danger-bg: #fef3f2;
  --nsrl-v-disabled-bg: #f1f1f1;
  --nsrl-v-disabled-ink: #a3a3a3;
}

/* ---- Inputs ------------------------------------------------------------ */
.nsrl-input {
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  background-color: var(--nsrl-v-field) !important;
  color: var(--nsrl-v-ink) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.nsrl-input:hover:not(:focus):not(:disabled) { background-color: var(--nsrl-v-field-hover) !important; }
.nsrl-input:focus {
  outline: none !important;
  background-color: #fff !important;
  border-color: var(--nsrl-v-focus) !important;
}
.nsrl-input:disabled { opacity: .6; cursor: not-allowed; }

/* ---- Floating label (label inside the field) -------------------------- */
.nsrl-float { position: relative; width: 100%; }
.nsrl-float > .nsrl-input {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 28px 14px 8px !important;
  font-family: inherit;   /* textareas default to a monospace font */
  font-size: 15px;
  line-height: 1.3;
  box-sizing: border-box;
}
.nsrl-float.is-textarea > .nsrl-input { min-height: 100px; resize: vertical; padding-top: 32px !important; }
.nsrl-float__label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #6b7280 !important;
  pointer-events: none;
  transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
}
.nsrl-float.is-textarea > .nsrl-float__label { top: 24px; transform: none; }
/* lifted: focused, filled, or a select */
.nsrl-float > .nsrl-input:focus ~ .nsrl-float__label,
.nsrl-float > .nsrl-input:not(:placeholder-shown) ~ .nsrl-float__label,
.nsrl-float.is-select > .nsrl-float__label {
  top: 10px;
  transform: none;
  font-size: 10.5px !important;
}
.nsrl-float > .nsrl-input:focus ~ .nsrl-float__label { color: var(--nsrl-v-focus) !important; }
/* an example in the placeholder (e.g. "+63 917 123 4567") shows only while the empty field is focused */
.nsrl-float > .nsrl-input:not(:focus)::placeholder { color: transparent !important; }
.nsrl-float > .nsrl-input:focus::placeholder { color: #9ca3af !important; opacity: 1; }
/* counters etc. that used to sit inside the label (e.g. "12 / 255") */
.nsrl-float__aside {
  position: absolute;
  top: 10px;
  right: 14px;
  margin: 0 !important;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.nsrl-float__aside.is-near-limit { color: var(--nsrl-v-danger); font-weight: 700; }

/* ---- Required mark: a red * after the label (2026-10-30) ----------------
   validation.js adds .is-required / .nsrl-req for NsrlValidate fields; plain markup
   gets it from required or aria-required="true" on the input. */
.nsrl-float.is-required > .nsrl-float__label::after,
.nsrl-float:has(> .nsrl-input:is([required], [aria-required="true"])) > .nsrl-float__label::after,
label.nsrl-req::after,
.ak-field:has(.ak-field__in:is([required], [aria-required="true"])) .ak-field__label::after {
  content: "*";
  margin-left: 3px;
  color: var(--ak-bad, var(--nsrl-v-danger));
  font-weight: 700;
  letter-spacing: 0;
}

/* invalid: the label turns red too */
.nsrl-float > .nsrl-input.is-invalid ~ .nsrl-float__label { color: var(--nsrl-v-danger) !important; }

/* ---- Browser autofill --------------------------------------------------
   Keeps the grey field instead of Chrome's blue/yellow fill, lifts the label,
   and the tiny animation lets validation.js notice the autofill. */
@keyframes nsrl-autofill { from { opacity: 1; } to { opacity: 1; } }
.nsrl-input:-webkit-autofill { animation: nsrl-autofill 1ms; }
.nsrl-input:-webkit-autofill,
.nsrl-input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--nsrl-v-field) inset !important;
  -webkit-text-fill-color: var(--nsrl-v-ink) !important;
  caret-color: var(--nsrl-v-ink);
}
.nsrl-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; }
.nsrl-float > .nsrl-input:-webkit-autofill ~ .nsrl-float__label {
  top: 10px;
  transform: none;
  font-size: 10.5px !important;
}

/* ---- Password show/hide (reveal: true) --------------------------------- */
.nsrl-float.has-reveal > .nsrl-input { padding-right: 54px !important; }
.nsrl-float__reveal {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--nsrl-v-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.nsrl-float__reveal:hover { background: rgba(17, 24, 39, .07) !important; }
.nsrl-float__reveal:focus-visible { outline: 2px solid var(--nsrl-v-focus) !important; outline-offset: 1px; }
.nsrl-float__reveal svg { width: 20px; height: 20px; display: block; }
.nsrl-float__reveal .nsrl-eye-on,
.nsrl-float__reveal[aria-pressed="true"] .nsrl-eye-off { display: none; }
.nsrl-float__reveal[aria-pressed="true"] .nsrl-eye-on { display: block; }
/* hidden while the field is empty and not in use, like the reference */
.nsrl-float.has-reveal:not(:focus-within) > .nsrl-input:placeholder-shown ~ .nsrl-float__reveal {
  opacity: 0;
  pointer-events: none;
}

/* ---- Invalid ----------------------------------------------------------- */
.nsrl-input.is-invalid,
.nsrl-input.is-invalid:hover {
  background-color: var(--nsrl-v-field) !important;   /* same grey as idle: only the border turns red */
  border-color: var(--nsrl-v-danger) !important;
}
.nsrl-input.is-invalid:focus {
  background-color: #fff !important;
  border-color: var(--nsrl-v-danger) !important;
  box-shadow: none !important;                  /* no glow ring, just the red border */
}

/* Message under a field (or under a group such as a media list) */
.nsrl-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--nsrl-v-danger);
}
.nsrl-field-error[hidden] { display: none; }
.nsrl-field-error::before {
  content: "!";
  flex: 0 0 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--nsrl-v-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* Group (non-input) containers: dashed drop areas, galleries, etc. */
.nsrl-group.is-invalid:not(:empty) {
  outline: 2px solid var(--nsrl-v-danger);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Optional character counter: <span class="nsrl-counter"> */
.nsrl-counter { display: block; margin-top: 4px; text-align: right; font-size: 11.5px; color: #64748b; }
.nsrl-counter.is-over { color: var(--nsrl-v-danger); font-weight: 600; }

/* iOS Safari zooms the page into any field under 16px; only iOS matches this test */
@supports (-webkit-touch-callout: none) {
  .nsrl-float > .nsrl-input { font-size: 16px; }
}

/* ---- Submit / Proceed buttons ------------------------------------------ */
.nsrl-btn-submit:disabled,
.nsrl-btn-submit[aria-disabled="true"] {
  background: var(--nsrl-v-disabled-bg) !important;
  color: var(--nsrl-v-disabled-ink) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;           /* faded by colour, not by opacity, like the reference */
  cursor: not-allowed !important;
  pointer-events: auto;            /* keeps the not-allowed cursor + title tooltip */
}