/*
 * ARCK AMC order-system front pages (login, forgot password, lender and appraiser
 * registration, 404), made to look like arckamc.com.
 *
 * Load order (application/views/arckamc/index.php):
 *   1. the shared front stylesheet /assets/theappraisalhub/css/style.css (layout of the
 *      Hub's forms, which these pages keep so every field, id and script hook works);
 *   2. the website's own tokens.css and site.css, copied from
 *      1-customer-facing/arckamc-website/design-handoff/site/css/ (see website/README);
 *      they style the header, footer, 404 and every .ak-* class exactly as the website;
 *   3. this file, which maps the Hub's form and button classes onto the website's
 *      FormField and Button components (design-handoff/design/components/*.md):
 *      48px fields with a line-strong border and 2px corners, a 14px/600 label above,
 *      16px input text, blue focus border with a 3px blue-tint halo; 48px buttons,
 *      15px/600 Archivo, 2px corners, blue fill, blue-deep on hover.
 *
 * The shared stylesheet sets html { font-size: 62.5% } (1rem = 10px), so every length
 * here is in px or a website token, never rem.
 * Only LOOK changes here: nothing is hidden that a form needs, except the Hub's left
 * photo panel on the login and forgot-password pages.
 */

/* ---------- type: the website's Archivo and ink colours everywhere on these pages ---------- */
.arck-body,
.arck-body .main-form,
.arck-body .main-form input,
.arck-body .main-form select,
.arck-body .main-form textarea,
.arck-body .base-btn,
.arck-body .page-title,
.arck-body .title-tertiary,
.arck-body .subtitle,
.arck-body .modal-title,
.arck-body p,
.arck-body label,
.arck-body .page-wrapper *,
.arck-body .modal * {
  font-family: var(--font-sans) !important;
}
.arck-body { font-size: 17px; line-height: 27px; color: var(--ink-soft); background: var(--surface); }

.arck-body .page-title {          /* = .ak-h1 */
  font-weight: 600; color: var(--ink); text-transform: none;
  font-size: 34px; line-height: 40px; letter-spacing: -0.015em;
}
.arck-body .title-tertiary,
.arck-body .modal-title {         /* = .ak-h2 */
  font-weight: 600; color: var(--ink); text-transform: none;
  font-size: 28px; line-height: 34px; letter-spacing: -0.01em;
}
.arck-body .subtitle,
.arck-body .section-title-box p { font-size: 17px; line-height: 27px; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .arck-body .page-title { font-size: 44px; line-height: 50px; }
  .arck-body .title-tertiary, .arck-body .modal-title { font-size: 32px; line-height: 40px; }
}

/* The shared stylesheet styles the three sign-up pop-up titles through id selectors
   (#modal-thank-you h3.modal-title and its two siblings: the Hub's faded gold, 3rem, capitalize), which
   outrank .arck-body .modal-title above. Restate the website's heading look (.ak-h2) at that weight. */
.arck-body #modal-thank-you h3.modal-title,
.arck-body #modal-try-again h3.modal-title,
.arck-body #modal-thank-you-error h3.modal-title {
  color: var(--ink); text-transform: none; letter-spacing: -0.01em; font-size: 28px; line-height: 34px;
}
@media (min-width: 1024px) {
  .arck-body #modal-thank-you h3.modal-title,
  .arck-body #modal-try-again h3.modal-title,
  .arck-body #modal-thank-you-error h3.modal-title { font-size: 32px; line-height: 40px; }
}

/* ---------- form fields: the website's FormField ---------- */
.arck-body .main-form .form-label,
.arck-body .main-form label {
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-2);
}
.arck-body .main-form .form-control,
.arck-body .main-form input[type="text"],
.arck-body .main-form input[type="email"],
.arck-body .main-form input[type="password"],
.arck-body .main-form input[type="tel"],
.arck-body .main-form input[type="number"],
.arck-body .main-form select,
.arck-body .main-form textarea {
  font-size: 16px; line-height: 24px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  min-height: 48px; padding: 11px 14px; box-shadow: none;
}
.arck-body .main-form textarea { min-height: 120px; }
.arck-body .main-form .form-control::placeholder,
.arck-body .main-form input::placeholder,
.arck-body .main-form textarea::placeholder { color: var(--ink-muted); }
.arck-body .main-form .form-control:focus,
.arck-body .main-form input:focus,
.arck-body .main-form select:focus,
.arck-body .main-form textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.arck-body .main-form .form-error .form-control,
.arck-body .main-form .form-control.error,
.arck-body .main-form input.error { border-color: var(--danger); }
.arck-body .main-form .form-message,
.arck-body .main-form label.error,
.arck-body .main-form span.error { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--danger); }

/* select2 drop-downs (registration pages) take the same box */
.arck-body .select2-container--bootstrap-5 .select2-selection,
.arck-body .select2-container .select2-selection--single {
  min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 16px; color: var(--ink); background-color: var(--surface);
}
.arck-body .select2-container--focus .select2-selection,
.arck-body .select2-container--open .select2-selection {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.arck-body .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted { background-color: var(--blue-tint); color: var(--ink); }

/* check boxes and radio cards */
.arck-body .main-form .custom-check-btn input:checked + .icon-box { background-color: var(--blue) !important; }
.arck-body input[type="checkbox"], .arck-body input[type="radio"] { accent-color: var(--blue); }

/* ---------- buttons: the website's Button ---------- */
.arck-body .base-btn {
  min-height: 48px; padding: 0 var(--space-5);
  font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  border-radius: var(--radius-sm); border: 1.5px solid transparent;
}
.arck-body .base-btn.main-btn {
  background-color: var(--blue) !important; border-color: var(--blue) !important; color: var(--on-blue) !important;
}
.arck-body .base-btn.main-btn:hover,
.arck-body .base-btn.main-btn.active {
  background-color: var(--blue-deep) !important; border-color: var(--blue-deep) !important; color: var(--on-blue) !important; filter: none;
}
.arck-body .base-btn.outline-btn,
.arck-body .base-btn.light-btn,
.arck-body .base-btn.outline-btn.outline-btn--primary {
  background: transparent !important; border-color: var(--blue) !important; color: var(--blue) !important;
}
.arck-body .base-btn.outline-btn:hover,
.arck-body .base-btn.light-btn:hover { background: var(--blue-tint) !important; color: var(--blue-deep) !important; }
.arck-body .base-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* links inside forms */
.arck-body .text-link,
.arck-body .main-form .link-btn,
.arck-body .main-form a:not(.base-btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-transform: none; }
.arck-body .text-link:hover,
.arck-body .main-form a:not(.base-btn):hover { color: var(--blue-deep); }

/* ---------- login and forgot password: a form panel on the website's tint ---------- */
.arck-auth { background: var(--surface-tint); padding: var(--space-7) var(--space-4); min-height: 0; }
.arck-auth .fullscreen-card,
.arck-auth .fullscreen-card .container,
.arck-auth .fullscreen-card--inner { background: transparent; min-height: 0; height: auto; }
.arck-auth .fullscreen-card__info-box,
.arck-auth .fullscreen-card__main-box > .logo-box,
.arck-auth .fullscreen-card__main-box > .footer-inline { display: none !important; }
.arck-auth .fullscreen-card__main-box {     /* = .ak-form-panel */
  max-width: 480px; margin: 0 auto; flex: none; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-raised);
}
.arck-auth .section-title-box { margin-bottom: var(--space-5); }
.arck-auth .main-form .form-group { margin-bottom: var(--space-4); }
.arck-auth .reset-info-box { margin: 0 0 var(--space-5); }
.arck-auth .submit-btn { margin-top: 0; }
@media (min-width: 768px) { .arck-auth { padding: var(--space-8) var(--space-6); } }

/* ---------- registration pages: sections on white, step list and cards in website colours ---------- */
.arck-body .page-wrapper .main-section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.arck-body .form-step-list { background-color: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius-md); }
.arck-body .form-tabs .fieldset-card { border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
.arck-body .scroll-box::-webkit-scrollbar-thumb { background-color: var(--blue); }
.arck-body .gj-picker-bootstrap table tr td.today div { color: var(--blue); }

/* ---------- modals (registration thank-you / try again) ---------- */
.arck-body .modal-content { border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: var(--shadow-raised); }

/* ---------- the website header must sit above the shared stylesheet's page wrapper ---------- */
.arck-body .ak-header { position: sticky; top: 0; z-index: 20; }
.arck-body .ak-header img, .arck-body .ak-footer img { display: block; }

/* ---------- overrides the shared stylesheet makes for .page-wrapper.with-bg ----------
   (it draws a gradient behind the page on phones and removes the field borders there:
   `.page-wrapper.with-bg .main-form .form-control{border:none}`) */
.page-wrapper.with-bg.arck-auth { background: var(--surface-tint) !important; }
.page-wrapper.with-bg.arck-auth .main-form .form-control,
.page-wrapper.with-bg.arck-auth .main-form .select2-container--bootstrap-5 .select-control {
  border: 1px solid var(--line-strong) !important; background-color: var(--surface) !important;
}
.page-wrapper.with-bg.arck-auth .main-form .form-control:focus { border-color: var(--blue) !important; }

/* forgot password / forgot username tabs: the website's current-page mark (2px blue underline) */
.arck-auth .user-info-recovery-tab .nav-link {
  color: var(--ink-soft); font-weight: 500; font-size: 16px; border-bottom: 2px solid transparent !important;
}
.arck-auth .user-info-recovery-tab .nav-link.active { color: var(--ink); border-bottom-color: var(--blue) !important; }

/* registration pages: the intro box and the page width follow the website
   (.ak-container: 1200px max, 16px side padding, 32px from 768px; surface-tint panels
   with 4px corners instead of the shared stylesheet's beige 40px-radius box) */
.arck-body .main-container { max-width: 1200px; padding-left: var(--space-4); padding-right: var(--space-4); }
@media (min-width: 768px) { .arck-body .main-container { padding-left: var(--space-6); padding-right: var(--space-6); } }
.arck-body .top-intro-section.with-bg .top-intro-section--inner,
.arck-body .with-bg .top-intro-section--inner {
  background-color: var(--surface-tint) !important; border: 1px solid var(--line); border-radius: var(--radius-md) !important;
}
.arck-body .form-tabs .fieldset-card { background-color: var(--surface); }

/* appraiser registration: the step list, step arrows, round check boxes and date picker,
   whose shared rules carry the Hub's gold as rgba(180,142,77,...) literals
   (selectors read out of assets/theappraisalhub/css/style.css) */
.arck-body .form-step-list .step:not(:last-child)::after { background-color: var(--line) !important; }
.arck-body .form-step-list .step .step-title { background-color: var(--blue-tint) !important; color: var(--ink-soft) !important; }
.arck-body .form-step-list .step.active::after,
.arck-body .form-step-list .step.finish::after { background-color: var(--blue) !important; }
.arck-body .form-step-list .step.active .step-title,
.arck-body .form-step-list .step.finish .step-title { background-color: var(--blue) !important; color: var(--on-blue) !important; }
.arck-body .form-step-actions .next-btn,
.arck-body .form-step-actions .prev-btn { background-color: var(--blue) !important; color: var(--on-blue) !important; border-color: var(--blue) !important; }
.arck-body .form-step-actions .next-btn:hover,
.arck-body .form-step-actions .prev-btn:hover { background-color: var(--blue-deep) !important; border-color: var(--blue-deep) !important; color: var(--on-blue) !important; }
.arck-body .main-form .custom-check-btn .icon-box { border-color: var(--line-strong) !important; }
.arck-body .gj-picker-bootstrap table tr td.current-month.selected div { background-color: var(--blue) !important; }