/* The Appraisal Hub: the sign-in and sign-up pages in "The Institution" look.
   Loaded by the legacy shell (views/theappraisalhub/index.php) with the launch switch ON,
   on /login, /forgot-password, /appraiser-registration and /lender-registration, and on no
   other page. It reads institution.css's own tokens and adds nothing to them.

   WHY A SECOND FILE. Those four pages keep their legacy form markup, field for field, so
   that every script that drives them (script.js, forgot-password.min.js, jQuery Validation,
   select2, gijgo) keeps reading the ids and classes it reads today. This file is the bridge:
   it dresses those legacy class names in the new site's type, color and square edges. The
   old brand sheet (style.css) is simply not loaded on these four pages; it still dresses
   every other legacy page, untouched.

   Load order is bootstrap.min.css, the page's own widget sheets, institution.css, this file.
   Every !important here is deliberate and is commented where it stands, and there are four
   places: .base-btn.main-btn, because the shell's inline <style> block paints that button
   from the deployment's theme colors with !important and sits later in the head; the sign-in
   alert's top margin and one file row's alignment, because each answers a bootstrap utility
   class, and those are !important by design; and select2's corner radius, because its own
   bootstrap-5 theme sets the radius the same way.

   Steve approved the look on 2026-10-17 (option A: match the new site). */

/* ========================================================================
   0. the two places bootstrap reaches into the new site's own chrome
   ======================================================================== */
/* bootstrap.min.css is still loaded here (the forms' grid, tabs, modals and spinners are
   its own), and its .nav rule sets flex-wrap:wrap, which the masthead's five labels then
   wrap onto a second row with. The rebuilt pages, which load no bootstrap, keep the one
   row the design board has. Put it back, and only inside the masthead. */
.masthead .nav{flex-wrap:nowrap;}

/* ========================================================================
   1. the page frame
   ======================================================================== */
.page-wrapper{display:block;}
.page-main-wrapper{display:block;}

/* The legacy pages measure their width with bootstrap's .container. Give it the new site's
   own measure and gutter, so the form lines up with the masthead and the footer above and
   below it. */
.container.main-container{
  width:100%;max-width:var(--page);margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}

/* ---- the two sign-in pages ---- */
.auth-band{padding:var(--s8) 0 var(--s9);}
.auth-card{max-width:460px;margin:0 auto;}
.auth-card .card-main-content{display:block;}

.section-title-box{margin:0 0 var(--s6);}
.title-tertiary{
  font-family:var(--serif);font-weight:600;font-size:33px;line-height:1.2;
  letter-spacing:-.01em;color:var(--navy-900);margin:0 0 var(--s3);
}
.section-title-box .subtitle{font-size:15.5px;line-height:1.6;color:var(--text-soft);margin:0;}
.section-title-box .alert{margin-top:var(--s5) !important;}

/* The locked or inactive account message. */
.alert-danger{
  border:1px solid var(--rule);border-left:3px solid #8C2F26;border-radius:0;
  background:var(--bone);color:var(--text);
  padding:var(--s4) var(--s5);font-size:15px;line-height:1.6;
}

/* ---- the forgot password and forgot username tabs ---- */
.user-info-recovery-tab{
  display:flex;justify-content:center;gap:var(--s6);
  border:0;border-bottom:1px solid var(--rule);margin:0 0 var(--s6);padding:0;list-style:none;
}
.user-info-recovery-tab .nav-item{margin:0;}
.user-info-recovery-tab .nav-link{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-500);background:transparent;
  border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:0 2px 13px;margin-bottom:-1px;cursor:pointer;
}
.user-info-recovery-tab .nav-link:hover{color:var(--navy-900);border-bottom-color:var(--rule);}
.user-info-recovery-tab .nav-link.active{color:var(--navy-900);background:transparent;border-bottom-color:var(--brass);}

/* ========================================================================
   2. the form, the model being the contact form on the new site
   ======================================================================== */
.main-form .form-group{margin:0 0 var(--s5);}
.main-form .form-group.mb-0{margin-bottom:0;}

.main-form .form-label,
.main-form .info-label{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-500);margin:0 0 8px;
}

.main-form .form-control,
.main-form .select2-container--bootstrap-5 .select-control{
  width:100%;box-sizing:border-box;
  font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--text);
  background-color:var(--paper);border:1px solid var(--rule);border-radius:0;
  padding:12px 14px;box-shadow:none;min-height:0;height:auto;
}
.main-form select.form-control,
.main-form .form-select{
  padding-right:36px;border-radius:0;border-color:var(--rule);
  background-position:right 14px center;background-size:14px 11px;
}
.main-form .form-control:focus,
.main-form .form-select:focus{
  outline:2px solid var(--brass);outline-offset:1px;
  border-color:var(--brass-deep);background-color:var(--paper);box-shadow:none;color:var(--text);
}
.main-form .form-control::placeholder{color:#8B97A1;opacity:1;}
.main-form .form-control[readonly],
.main-form .form-control:disabled{background-color:var(--bone-deep);color:var(--text-soft);}

/* the refusal a field carries, and the message under it */
.main-form .form-group.form-error .form-control,
.main-form .form-group.form-error .select-control{border-color:#8C2F26;}
.main-form .form-message,
.main-form span.form-error{
  display:block;font-family:var(--sans);font-size:13px;line-height:1.5;color:#8C2F26;margin-top:7px;
}
.main-form .form-group.form-success .form-message{color:#2F6B3A;}

/* the password eye. The two icons and the class the page's own script toggles are the
   page's, unchanged: only the frame around them is new. */
.main-form .form-input-group{position:relative;display:block;}
.main-form .form-input-group .form-control{padding-right:48px;}
.main-form .toggle-password-btn{
  position:absolute;top:0;right:0;height:100%;width:46px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.main-form .toggle-password-btn .icon{width:21px;height:21px;}
.main-form .toggle-password-btn .icon.show{display:none;}
.main-form .toggle-password-btn.show .icon.show{display:block;}
.main-form .toggle-password-btn.show .icon.hide{display:none;}

/* the link under the sign-in fields, and the "Add another ..." links */
.reset-info-box{margin:calc(-1 * var(--s3)) 0 var(--s5);}
.main-form .text-link,
.main-form .link-btn{color:var(--brass-deep);font-size:14.5px;text-decoration:underline;}
.main-form .text-link:hover,
.main-form .link-btn:hover{color:var(--navy-900);}
/* The NOTE lines are warnings ("We do NOT accept Trainees at this time", the background
   check note), and the old sheet drew them red. They take the SAME red the forms' own error
   messages take above, and no other color (check R, SHOULD-3). */
.main-form .note-text{font-size:14px;line-height:1.65;color:#8C2F26;margin:var(--s4) 0 0;}

/* ---- the button ---- */
.base-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:15px 26px;border:1px solid transparent;border-radius:0;
  text-align:center;text-decoration:none;cursor:pointer;transition:none;
}
.base-btn .btn-inner{display:inline-flex;align-items:center;justify-content:center;}
.base-btn .btn-inner .icon{width:20px;height:20px;margin-left:8px;flex-shrink:0;}
/* body is in the selector on purpose. The shell's inline <style> block paints
   .base-btn.main-btn from the deployment's theme colors with !important and sits LATER in
   the head than this file, so equal weight would lose to it. On these four pages the
   button is the new site's own. */
body .base-btn.main-btn{background-color:var(--navy-900) !important;color:#fff !important;border-color:var(--navy-900);}
body .base-btn.main-btn:hover{background-color:var(--navy-700) !important;color:#fff !important;filter:none;}
body .base-btn.main-btn.active{background-color:var(--navy-900) !important;color:#fff !important;border-color:var(--navy-900) !important;}
.base-btn.w-100{width:100%;}
button.base-btn:disabled,.base-btn.disabled{opacity:.55;}

/* ========================================================================
   3. the two sign-up pages
   ======================================================================== */
.top-intro-section{background:var(--bone);border-bottom:1px solid var(--rule);padding:var(--s8) 0;}
.top-intro-section .top-intro-section--inner{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;
}
.top-intro-section .top-intro__title-box{margin:0;}
.top-intro-section h1.page-title{margin:0;}
.top-intro-section .text-content p{
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.55;color:var(--navy-900);
  margin:0 0 var(--s4);padding-top:var(--s4);border-top:2px solid var(--brass);display:inline-block;
}
.top-intro-section .text-content ul{list-style:none;margin:0;padding:0;}
.top-intro-section .text-content li{
  position:relative;padding-left:20px;margin-bottom:9px;
  font-size:15px;line-height:1.6;color:var(--text);
}
.top-intro-section .text-content li::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--brass);
}

.registration-section{display:block;}
.form-steps{padding:var(--s7) 0 0;}
.form-step-list{
  display:flex;align-items:center;justify-content:center;
  list-style:none;margin:0;padding:0;counter-reset:li;
}
.form-step-list .step{display:flex;align-items:center;}
.form-step-list .step:not(:last-child)::after{
  content:'';width:56px;height:1px;background:var(--rule);margin:0 16px;
}
.form-step-list .step .step-title{
  flex-shrink:0;width:46px;height:46px;border:1px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;font-weight:600;color:var(--text-soft);
  /* THE COUNTER IS INCREMENTED ON THE BADGE ITSELF, NOT ON ITS ::before (check R, MUST-1).
     A finished step hides its number with content:none, which removes the pseudo-element and,
     while the increment lived there, removed that step from the count: the fourth page then
     read 01. Counting on the element keeps every step its own number whatever its state. */
  counter-increment:li;
}
.form-step-list .step .step-title::before{content:counter(li, decimal-leading-zero);}
.form-step-list .step .step-title .icon{width:22px;height:22px;display:none;}
.form-step-list .step.active::after,
.form-step-list .step.finish::after{background:var(--brass);}
.form-step-list .step.active .step-title{border-color:var(--brass);color:var(--navy-900);}
.form-step-list .step.finish .step-title{border-color:var(--brass);background:var(--brass);color:#20180A;}
.form-step-list .step.finish .step-title::before{content:none;}
.form-step-list .step.finish .step-title .icon{display:block;}

/* THE STEP CONTROL'S OWN RULE, kept exactly as the old sheet had it: the four pages of the
   appraiser form start hidden and script.js shows one at a time. Without it every page of
   the form would be on screen at once. The lender form's single .form-tab is not inside
   .registration-steps and stays visible, as today. */
.registration-steps .form-tab{display:none;}

.form-tabs{padding:var(--s7) 0 0;}
.form-tabs .fieldset{border:0;margin:0 0 var(--s7);padding:0;min-width:0;}
.form-tabs .fieldset:last-child{margin-bottom:0;}
.form-tabs .legend{display:block;float:none;width:100%;margin:0 0 var(--s5);padding:0;}
.form-tabs .legend .title{
  display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.3;
  color:var(--navy-900);
}
.form-tabs .legend .subtitle{display:block;font-size:14px;line-height:1.6;color:var(--text-soft);margin-top:6px;}
.form-tabs .fieldset-card{background:var(--bone);border:1px solid var(--rule);padding:var(--s6);}

.form-tabs .check-btn-box{gap:var(--s4);margin-top:var(--s4);}
.form-tabs .check-btn-box .info{font-size:15px;color:var(--text);margin:0 var(--s5) 0 0;}

.main-form .custom-check-btns{gap:var(--s5);}
.main-form .custom-check-btn label{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0;}
.main-form .custom-check-btn input{display:none;}
.main-form .custom-check-btn .icon-box{
  width:20px;height:20px;flex-shrink:0;border:1px solid var(--brass-deep);background-color:var(--paper);
  background-repeat:no-repeat;background-size:12px;background-position:center;
}
.main-form .custom-check-btn input:checked+.icon-box{
  background-color:var(--navy-900);border-color:var(--navy-900);
  background-image:url("../images/icons/check-icon.svg");
}
.main-form .radio-btn-label{font-size:15px;line-height:1.6;color:var(--text);}
.main-form .confirm-terms{width:100%;margin-bottom:var(--s5);}
.main-form .confirm-terms .form-group{margin-bottom:var(--s3);}

/* the file choosers: the input stays hidden behind its label, as today */
.main-form .download-file-btn input,
.main-form .file-input{display:none;}
.main-form .download-file-btn label{cursor:pointer;display:inline-flex;align-items:flex-start;gap:14px;margin:0;}
.main-form .download-file-btn .file-name{font-size:14px;line-height:1.5;color:var(--text-soft);}
/* Step 4's Misc rows: the label sits ABOVE its Choose File control, as every other label on
   these forms does, so the two rows start at the same edge and the two columns sit level
   (check R, SHOULD-4). The row is bootstrap's .row, so its gutters are zeroed here rather
   than fought with. */
.main-form .download-info-btn-box{
  display:block;margin:0 0 var(--s5);
}
.main-form .download-info-btn-box > .col-auto{
  width:100%;max-width:100%;flex:0 0 auto;padding-left:0;padding-right:0;
}
.main-form .download-info-btn-box .info-label{margin:0 0 8px;}
.main-form .download-info-btn-box .form-group{margin:0;}
/* the inner label carries bootstrap's own align-items-end utility, which is !important by
   design, so the control hung off the right edge of the column while its own label started
   at the left; this is the one place that has to answer it in kind */
.main-form .download-info-btn-box .download-file-btn label{align-items:flex-start !important;}

.form-submit-box{padding:var(--s7) 0 var(--s9);}
.form-step-actions{padding:0 0 var(--s9);}
.form-step-actions .form-step-actions--inner{align-items:center;}
.prev-btn,
.next-btn{
  width:52px;height:52px;flex-shrink:0;border:1px solid var(--navy-600);border-radius:0;
  background:transparent;color:var(--navy-900);
  align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.prev-btn:hover,
.next-btn:hover{background:var(--navy-900);color:#fff;}
.prev-btn .icon,
.next-btn .icon{width:22px;height:22px;}

/* the overlay a submission puts over the form */
.loader-overlay .spinner-border{color:var(--brass-deep);}
.main-form .spinner-grow{color:#fff;}

/* ========================================================================
   4. the modals and the two widgets
   ======================================================================== */
.modal-dialog{max-width:480px;}
.modal-content{border:1px solid var(--rule);border-radius:0;box-shadow:0 18px 48px rgba(17,26,35,.18);}
.modal-body{padding:var(--s7) var(--s6);}
.modal-body .modal-title{
  font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.3;
  color:var(--navy-900);margin:0 0 var(--s3);
}
.modal-body p{font-size:15.5px;line-height:1.6;color:var(--text-soft);margin:0 0 var(--s5);}
.modal-backdrop.show{opacity:.55;}

/* select2 and the date picker, squared and given the same hairline */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select-control,
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5 .select2-search__field{
  border-radius:0 !important;border-color:var(--rule);font-family:var(--sans);
}
.select2-container--bootstrap-5 .select2-selection--single{min-height:0;padding:12px 14px;}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option--highlighted{background:var(--navy-900);color:#fff;}
/* THE DATE FIELDS (check R, SHOULD-2). The picker renders bootstrap's own input group: the
   field, then a button carrying the calendar icon. bootstrap sizes that input with
   flex:1 1 auto;width:1%, and this sheet's .form-control{width:100%} was beating it, so the
   button wrapped onto a line of its own and the icon fell out of the field. Inside an input
   group the input takes bootstrap's sizing back, the group does not wrap, and the button is
   drawn as the field's right-hand edge: same hairline, no second border between them. */
.main-form .input-group{flex-wrap:nowrap;}
.main-form .input-group > .form-control{width:1%;flex:1 1 auto;min-width:0;}
.main-form .form-datepicker .gj-datepicker{margin-bottom:0;}
.main-form .input-group > .btn,
.main-form .gj-datepicker > .btn{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-left:0;border-radius:0;
  background:var(--paper);color:var(--slate-500);padding:0 12px;box-shadow:none;
}
.main-form .gj-datepicker > .btn:hover{background:var(--bone);color:var(--navy-900);}
.main-form .gj-datepicker > .btn:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
.gj-picker-bootstrap{border-radius:0;border-color:var(--rule);font-family:var(--sans);}

/* ========================================================================
   5. the narrow screens
   ======================================================================== */
@media (max-width:860px){
  .top-intro-section .top-intro-section--inner{grid-template-columns:1fr;gap:var(--s5);}
}
@media (max-width:760px){
  .auth-band{padding:var(--s7) 0 var(--s8);}
  .title-tertiary{font-size:27px;}
  .top-intro-section{padding:var(--s7) 0;}
  .top-intro-section h1.page-title{font-size:31px;}
  .form-tabs .fieldset-card{padding:var(--s5) var(--s4);}
  .form-tabs{padding:var(--s6) 0 0;}
  .form-submit-box{padding:var(--s6) 0 var(--s8);}
  .form-step-actions{padding:0 0 var(--s8);}
  .user-info-recovery-tab{gap:var(--s5);}
  .main-form .download-file-btn label{flex-direction:column;align-items:flex-start;gap:8px;}
  .form-tabs .check-btn-box .info{margin-right:0;margin-bottom:var(--s3);}
}
@media (max-width:560px){
  /* the four step badges and their rules have to fit a phone without pushing the page wide */
  .form-step-list .step .step-title{width:38px;height:38px;font-size:13px;}
  .form-step-list .step:not(:last-child)::after{width:18px;margin:0 8px;}
  .form-step-list .step .step-title .icon{width:18px;height:18px;}
}