/* =====================================================================
   eNotarize Universal Input System
   ---------------------------------------------------------------------
   Bootstrap-style form-control utility. Drop on any <input>, <select>
   or <textarea>. Loaded AFTER main.css so these rules win the cascade.
   SCOPE: text/select/textarea fields only — search boxes, filter
   dropdowns (.dash-search-input / .dash-filter-select) and date-picker
   fields keep their own compact filter-bar styling; this file is for
   full-size form fields (auth, profile, contact, document prep, etc).

   Usage:
     <input class="enotary-form-control">
     <div class="input-icon-wrap"><i class="lni lni-envelope"></i>
       <input class="enotary-form-control with-icon"></div>
     <select class="enotary-form-control">...</select>
     <textarea class="enotary-form-control"></textarea>
   ===================================================================== */

.enotary-form-control {
  width: 100%;
  height: 52px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: #081828;
  background-color: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.enotary-form-control::placeholder { color: #a0aec0; }

.enotary-form-control:hover {
  border-color: #cbd5e1;
  background-color: #fff;
}

.enotary-form-control:focus {
  border-color: #004aad;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.1);
}

/* Validation error state — Bootstrap's own .is-invalid rules require a
   companion .form-control class we don't use, so they never fire here. */
.enotary-form-control.is-invalid { border-color: #ef4444; }
.enotary-form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }

select.enotary-form-control {
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

select.enotary-form-control:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

textarea.enotary-form-control {
  height: auto;
  min-height: 120px;
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Icon-prefixed variant — wrap the input + a leading <i> in this div
   --------------------------------------------------------------------- */
.input-icon-wrap { position: relative; }
.input-icon-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0aec0;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}
.enotary-form-control.with-icon { padding-left: 40px; }

/* Password show/hide toggle */
.enotary-form-control.with-toggle { padding-right: 44px; }
.pass-toggle { position: relative; }
.pass-field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #a0aec0; font-size: 16px; pointer-events: none; z-index: 1;
}
.toggle-eye {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: #a0aec0; font-size: 17px; user-select: none;
  z-index: 1; transition: color 0.2s;
}
.toggle-eye:hover { color: #004aad; }

/* OTP entry — short numeric code, not a full-width text field */
.enotary-form-control.otp-input {
  text-align: center;
  letter-spacing: 6px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Sizes — composable with the base class, Bootstrap-5 style
   (<input class="enotary-form-control enotary-form-control-sm">)
   --------------------------------------------------------------------- */
.enotary-form-control-sm {
  height: 44px;
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 10px;
}
.enotary-form-control-sm.with-icon { padding-left: 40px; }
.enotary-form-control-sm.with-toggle { padding-right: 40px; }
select.enotary-form-control-sm { padding-right: 34px; background-position: right 12px center; }

.enotary-form-control-xs {
  height: 38px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}
.enotary-form-control-xs.with-icon { padding-left: 32px; }
.enotary-form-control-xs.with-toggle { padding-right: 36px; }
select.enotary-form-control-xs { padding-right: 30px; background-position: right 10px center; }

/* ---------------------------------------------------------------------
   Field wrapper — groups a label + one enotary-form-control together
   --------------------------------------------------------------------- */
.enotary-form-group { margin-bottom: 18px; }
.enotary-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3d4a5c;
  margin-bottom: 7px;
}

/* Required-field marker, e.g. <label>Name <span class="req">*</span></label> */
.req { color: #ef4444; }

/* ---------------------------------------------------------------------
   Checkbox & radio — one system for both types. Markup:
     <label class="enotary-checkbox-group">
       <input type="checkbox|radio" class="enotary-checkbox-input">
       <span class="enotary-checkbox-custom"></span>
       <span class="enotary-checkbox-label">Text</span>
     </label>
   The [type="radio"] attribute selector below is what makes it round;
   everything else is shared between the two types.
   --------------------------------------------------------------------- */

.enotary-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
}

.enotary-checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.enotary-checkbox-custom {
  position: relative;
  top: 2px;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.enotary-checkbox-input[type="radio"]~.enotary-checkbox-custom { border-radius: 50%; }

.enotary-checkbox-group:hover .enotary-checkbox-input~.enotary-checkbox-custom {
  border-color: #004aad;
  background-color: #f9fafb;
}

.enotary-checkbox-input:checked~.enotary-checkbox-custom {
  background-color: #004aad;
  border-color: #004aad;
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25);
}

/* Keep the checked (blue) fill while hovering a checked box. The plain :hover
   rule above has higher specificity (0,4,0) than the :checked rule (0,3,0),
   so without this the box reverts to the near-white hover colour on hover and
   the white tick disappears. This rule is (0,5,0) so checked+hover stays blue. */
.enotary-checkbox-group:hover .enotary-checkbox-input:checked~.enotary-checkbox-custom {
  background-color: #004aad;
  border-color: #004aad;
}

.enotary-checkbox-custom:after { content: ""; position: absolute; display: none; }
.enotary-checkbox-input:checked~.enotary-checkbox-custom:after { display: block; }

/* Checkbox → tick mark */
.enotary-checkbox-input[type="checkbox"]~.enotary-checkbox-custom:after {
  left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Radio → filled dot */
.enotary-checkbox-input[type="radio"]~.enotary-checkbox-custom:after {
  left: 5px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: white;
}

.enotary-checkbox-label { font-size: 14px; line-height: 1.5; color: #4b5563; font-weight: 500; cursor: pointer; }
.enotary-checkbox-label a { color: #004aad; font-weight: 600; text-decoration: none; }
.enotary-checkbox-label a:hover { text-decoration: underline; }