/* Darker focus ring for keyboard navigation (ADA visibility) - overrides Bootstrap default #c2dbfe-like ring */
:root {
  /* WCAG 1.4.11: default Bootstrap #dee2e6/~1.3:1 on white; #6c757d/~4.7:1 */
  --bs-border-color: #6c757d;

  /* Opaque: an alpha ring composites toward the page behind it and loses the contrast.
     rgba(29, 78, 216, 0.5) over #fff is 2.37:1, under the WCAG 1.4.11 3:1 floor. */
  --bs-focus-ring-color: #1d4ed8;
  --bs-focus-ring-opacity: 1;
}

/* Base .btn focus ring. Bootstrap declares --bs-btn-focus-box-shadow on .btn ITSELF
   (bootstrap.css, .btn block) as rgba(var(--bs-btn-focus-shadow-rgb), .5) with the alpha
   hardcoded, so a :root override is inert - a custom property set on the element beats one
   inherited from :root. It has to be redeclared at the same level. Site.css loads after
   bootstrap, so equal specificity plus later source order wins.
   Covers every stock button: Add row, Remove row, Remove file, Clear signature, Copy, and
   the Cancel/Confirm pair in both VerifyEmailSent modals. The datepicker variants use a
   more specific attribute selector and still win. */
.btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem #1d4ed8;
}

/* Same trap as .btn above: Bootstrap declares each of these INSIDE the component rule
   (.accordion, .btn-close, .pagination), not :root, so a :root override never applies.
   The vendor value is rgba(13, 110, 253, 0.25), which composites to rgb(195, 219, 255)
   = 1.42:1 on white - a pale halo that is effectively no indicator at all.

   Declared on the element that CONSUMES the token, not the container that usually wraps it.
   Bootstrap reads this one in ".accordion-button:focus", and the FAQ renders .accordion-item /
   .accordion-header / .accordion-button with NO .accordion ancestor - the only class="accordion"
   in the repo is ImportantDates. Scoped to .accordion it resolved to nothing there, box-shadow
   fell to none, Bootstrap's own "outline: 0" stood, and every FAQ question header lost its focus
   ring entirely. .btn and .btn-close below are already consumers, which is why they were fine. */
.accordion-button {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem #1d4ed8;
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem #1d4ed8;
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem #1d4ed8;
}

/* Nav/pager links: high-contrast keyboard focus (WCAG) - visible on light and dark backgrounds */
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.9), 0 0 0 0.35rem #1d4ed8;
}

/* Do NOT remove class="navbar-light" from the navbar in _Layout.cshtml. Bootstrap 5.3 dropped the
   class, so it looks like a Bootstrap 4 leftover, but this rule depends on it: it is what swaps the
   white-halo ring above (built for the dark hero) for a plain blue ring on the white navbar. The
   base rule sets outline: 0, so the box-shadow is the only focus indicator there is (WCAG 2.4.7). */
.navbar-light .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem #1d4ed8;
}

/* Skip-navigation link: visually hidden until focused (Bootstrap .visually-hidden-focusable),
   then revealed as a strong navy chip so sighted keyboard users can see it (WCAG 2.4.7). */
#skip-to-main-content:focus {
  position: fixed;

  /* Sits BELOW the fixed-top navbar (79px tall) rather than inside it. The header band is
     crowded: the UserWay launcher is fixed at 13px with a 44x44 footprint (right edge 57px)
     and cannot be out-stacked - its wrapper is z-index 2147483647, the max 32-bit int - while
     the brand logo shifts horizontally with viewport width (x=225 at 1765px, x=247 at 889px).
     No fixed left value clears both at every width: the gap between them is 168px and the
     revealed chip is 191px. Dropping below the header removes the horizontal competition
     entirely, so this holds at any breakpoint, and lets the link keep the conventional
     top-left position. */
  top: 5.5rem;
  left: 0.75rem;
  z-index: 1080; /* above the .fixed-top navbar (Bootstrap z-index 1030) */
  width: auto;
  height: auto;
  padding: 0.625rem 1.25rem;
  background-color: #172145; /* navy chrome; white text ≈ 15.7:1 (WCAG 1.4.3) */
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 0.25rem;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8; /* matches nav-link focus ring */
}

/* Form controls: darker focus for inputs, select, radio, checkbox, range (WCAG contrast – overrides Bootstrap #86b7fe) */
.form-control:focus,
.form-select:focus {
  border-color: #1d4ed8;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8; /* matches nav/skip-link ring */
}

/* Invalid controls: MVC applies .input-validation-error to the CONTROL on a server postback and via
   jQuery unobtrusive validation's errorClass. Bootstrap's .is-invalid is added only by some client
   paths, so styling .is-invalid alone leaves most invalid states with no error affordance.
   Target the MVC class so every path renders identically. #dc3545 on white ≈ 3.9:1 (WCAG 1.4.11).
   Note .field-validation-error styles the MESSAGE element, not the control — see below. */
.form-control.input-validation-error,
.form-select.input-validation-error,
.form-check-input.input-validation-error {
  border-color: #dc3545;
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.form-check-input.input-validation-error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #dc3545; /* #dc3545 on white 3.9:1 */
}

.form-check-input:focus {
  border-color: #1d4ed8;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231d4ed8'/%3e%3c/svg%3e");

  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #1d4ed8;
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #1d4ed8;
}

.main-body {
  /* With body.d-flex.flex-column.min-vh-100 + flex-grow-1 on main, this stretches so the
     bottom border sits against the footer instead of floating mid-page at a fixed 49vh. */
  min-height: 0;
}

.bg-darkblue {
  background: linear-gradient(90deg, rgba(64, 92, 142, 1) 0%, rgba(34, 44, 97, 1) 50%, rgba(64, 92, 142, 1) 100%);
  color: white;
}

/* Footer matches darkened hero banner gradient (WCAG contrast work on .site-hero-banner.bg-darkblue). */
.site-footer {
  background: linear-gradient(90deg, rgba(24, 34, 70, 1) 0%, rgba(20, 30, 65, 1) 50%, rgba(24, 34, 70, 1) 100%);
  color: white;
}

/* Footer links matched no focus rule at all, so they fell back to the browser default ring.
   Chrome draws an adaptive two-tone ring for `outline: auto` and gets away with it; Firefox
   and Safari do not, and the house rule is one ring everywhere - see wcag-patterns.md.

   This is the same ring .nav-link uses, and the white halo is the load-bearing half: measured
   against this footer gradient the halo is 15.5:1, while the blue alone is 2.3:1 - under the
   3:1 WCAG 1.4.11 wants for a focus indicator. That is exactly why .navbar-light swaps to
   blue-only for the WHITE navbar and the base rule keeps the halo for dark backgrounds. Do
   not "simplify" this to the blue ring here.

   The halo is opaque #fff here where .nav-link uses rgba(255,255,255,.9). On the nav the
   alpha is a separator and the opaque blue outer ring is the indicator; on this navy the
   blue does NOT reach 3:1, so the halo IS the indicator and must not composite toward
   whatever is behind it. nova4874-focus-contrast asserts exactly that. */
.site-footer a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.site-footer-columns {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* WCAG 2.5.8 Target Size (Minimum). The footer links were 21px tall - under the 24px
   minimum - and passed only on the SPACING EXCEPTION, which is met when a 24px circle
   centred on each undersized target intersects no other target. Measured, the distance
   from a link centre to its neighbour box was 13.5px against the 12px the exception
   needs: 1.5px of headroom.

   That 13.5px is not a design decision. It is Bootstrap default line-height 1.5 (a 24px
   line box) minus the 21px text box, halved and added back - so it is the SAME 1.5px of
   headroom in every case site regardless of translated copy, and any tightening of the
   footer line-height below 22.5px silently puts every clone in breach.

   0.25rem top and bottom takes each link to 32px, which meets the minimum outright and
   stops the criterion depending on the exception at all. display: inline-block is what
   makes vertical padding affect the box: padding on an inline box paints but does not
   change its height, so the hit area would not actually grow without it.

   The links then sit flush against each other rather than with 3px of dead space between.
   That is correct for 2.5.8 - adjacent targets are fine once each one is big enough, and
   a thumb that lands between two links now hits one of them instead of nothing. */
.site-footer-columns a {
  display: inline-block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.site-footer-copyright {
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.35rem 0.75rem;
}

/* 0.75rem, not 0.7rem. 0.7rem computes to 11.2px, under the 12px floor this codebase
   chose - see standards/linting-and-code-quality.md, where the floor is recorded as a
   review convention because stylelint-a11y's font-size-is-readable hardcodes 15px and
   ignores its own minimumSize option. A px-unit scan does not catch this one; the check
   has to compute rem against the root. 0.75rem is exactly 12px and is already the
   smallest size used elsewhere in the codebase. */
.site-footer-copyright-text {
  font-size: 0.75rem;
  line-height: 1.2;
}

/* WCAG 1.3.1: replace Layout spacer <br>s (item 1 — header/hero only) */
.site-hero-banner {
  /* was <br /><br /> above hero (measured ~48px to hero top) */
  margin-top: 48px;

  /* was Bootstrap p-5 (3rem) + inner <br /> (~21px) above title */
  padding: 3rem;
  padding-top: calc(3rem + 21px);
}

/* WCAG 1.4.11 + 1.4.3: darker hero so #db1a4f button stays >= 3:1; white label on button stays >= 4.5:1 */
.site-hero-banner.bg-darkblue {
  background: linear-gradient(90deg, rgba(24, 34, 70, 1) 0%, rgba(20, 30, 65, 1) 50%, rgba(24, 34, 70, 1) 100%);
}

.esign-block-summary {
  /* was <br /> between attestation text and signature fields (item 3) */
  margin-bottom: 21px;
}

/* Keep upload error icon on the same line as message text (item 4) */
.multi-file-upload-error-messages {
  flex: 1;
  min-width: 0;
}

.multi-file-upload-error-messages > div + div {
  margin-top: 0.25rem;
}

/* WCAG 1.4.3: Bootstrap secondary #6c757d gives white text only 4.69:1, barely over the
   4.5:1 AA floor. #495057 raises filled and outline secondary buttons to 8.2:1. */
.btn-secondary {
  --bs-btn-bg: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-bg: #343a40;
  --bs-btn-hover-border-color: #343a40;
  --bs-btn-active-bg: #343a40;
  --bs-btn-active-border-color: #343a40;
  --bs-btn-disabled-bg: #495057;
  --bs-btn-disabled-border-color: #495057;
}

.btn-outline-secondary {
  --bs-btn-color: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #495057;
  --bs-btn-hover-border-color: #495057;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #343a40;
  --bs-btn-active-border-color: #343a40;
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-border-color: #495057;
}

.btn-americared {
  background-color: #db1a4f;
  color: white;
  border-color: #db1a4f;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(219, 26, 79, 0.2), 0 1px 2px rgba(219, 26, 79, 0.1);

  /* Subtle elevation for professional look */
}

/* Hover Effect - Color Inversion */
.btn-americared:hover,
.btn-americared:focus {
  background-color: white;
  color: #db1a4f;
  border-color: #db1a4f;
  box-shadow: 0 4px 8px rgba(219, 26, 79, 0.3), 0 2px 4px rgba(219, 26, 79, 0.2);
  transform: translateY(-1px);

  /* Slight lift on hover */
}

/* Focus State (keyboard tab) - Same contrast/reversal as hover + clear focus ring so keyboard matches mouse */
.btn-americared:focus-visible {
  background-color: white;
  color: #db1a4f;
  border-color: #db1a4f;
  outline: 0;
  box-shadow: 0 0 0 0.25rem #db1a4f, 0 4px 8px rgba(219, 26, 79, 0.3);
  transform: translateY(-1px);
}

/* Ripple Effect - CSS Only */

.btn-americared::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
  opacity: 0;
  pointer-events: none;
}

/* Active/Click State - Ripple Animation */

.btn-americared:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
  transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}

/* Active State - Pressed Effect */
.btn-americared:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(219, 26, 79, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Pressed down effect */
}

/* Hover Ripple Effect - Subtle glow on hover */

.btn-americared:hover::before,
.btn-americared:focus::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  animation: ripple-hover 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-hover {
  0% {
    width: 0;
    height: 0;
    opacity: 0.3;
  }

  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

/* Disabled State - Maintains styling */
.btn-americared:disabled,
.btn-americared.disabled {
  background-color: #db1a4f;
  color: white;
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-americared:disabled:hover,
.btn-americared.disabled:hover,
.btn-americared:disabled:focus,
.btn-americared.disabled:focus {
  background-color: #db1a4f;
  color: white;
  transform: none;
  box-shadow: 0 2px 4px rgba(219, 26, 79, 0.2), 0 1px 2px rgba(219, 26, 79, 0.1);
}

/* Mobile Optimizations - Touch-friendly */
@media (max-width: 768px) {
  .btn-americared {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Faster transitions on mobile */
  }

  .btn-americared:active {
    transform: scale(0.98);

    /* Slight scale down on mobile for better touch feedback */
  }

  .btn-americared:active::after {
    width: 400px;
    height: 400px;

    /* Larger ripple on mobile for better visibility */
  }
}

::highlight(search-highlight) {
  background-color: yellow;
}

.signature-canvas {
  border: 1px solid #000;
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
}

.add-alignment {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
}

.is-lawful {
  position: absolute;
  z-index: -1;
  background-color: red;
}

.fa-title-size-lg {
  font-size: 36px;
}

.fa-title-size {
  font-size: 28px;
}

.transparentBackground {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Inline icon button that sits inside running text or a heading. .btn-link sets
   --bs-btn-font-size: 1rem, so without this the control stops tracking the text it sits
   beside and renders as a tiny glyph next to a large heading. */
.inline-text-btn {
  font-size: inherit;
  line-height: 1;
  vertical-align: baseline;
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: #f5f5f5;
}

/* Focus gets a ring, not just the hover tint: #f5f5f5 on white is ~1.04:1 and conveys
   nothing on its own. CourtDocuments renders its download links as list-group items, so
   this is that page's primary interaction. */
.list-group-item:focus-visible {
  background-color: #f5f5f5;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.w-10 {
  width: 10%;
}

.borderedLeft15 {
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
  border: 1px solid;
}

.borderedCol25 {
  width: 25%;
  border: 1px solid;
}

.pb-100 {
  padding-bottom: 100px;
}

.formItemFitContent {
  position: relative;
  float: left;
  width: fit-content;
}

.validationFifteenNone {
  position: relative;
  top: 15px;
  display: none;
}

.collapsed:hover,
.collapsed:focus {
  background-color: #f5f5f5;

  /* background-image: linear-gradient(#bd0711, #db1a4f); */
}

.thumbnail {
  position: relative;
  z-index: 0;
}

.move-left {
  width: auto;
  box-shadow: none;
}

.thumbnail:hover,
.thumbnail:focus {
  background-color: transparent;
  z-index: 50;
}

.thumbnail span {
  /* CSS for enlarged image */
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /* CSS for enlarged image */
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span,
.thumbnail:focus span {
  /* CSS for enlarged image on hover */
  visibility: visible;
  top: 0;
  left: -500px; /* position where enlarged image should offset horizontally */
}

/* `.info { height: 600px; width: 480px }` was removed here. It was a generic utility with no
   consumer in any view, and dialog.js names the confirm and info dialog variants `info`, so
   every confirm dialog rendered as `dialog-container info` and inherited a 600px height it had
   no other source for. Measured: 230px of content in a 600px box - 370px of empty white under
   the buttons, which is what made the dialog look uncentred. Do not reintroduce a bare `.info`
   here; namespace it if something genuinely needs one. */

.mark,
mark {
  padding: 0;
  background-color: yellow;
}

@media (max-width: 992px) {
  .w-lg-100 {
    width: 100% !important;
  }
}

.grow {
  -moz-transition: height 0.5s;
  -o-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  height: 0;
  overflow: hidden;
}

/* The house tooltip. Behaviour lives in Content/ViewScripts/tooltip.js; the 1.4.13 section of
   docs/coding-standards-and-rules/accessibility/wcag-patterns.md explains why it is a component.
   This was two rules eighty lines apart, .tooltip-inner and .tooltip > .tooltip-inner, both
   setting max-width. Bootstrap always renders .tooltip-inner as a direct child of .tooltip, so
   the descendant selector bought a specificity bump and nothing else, and the 450px it declared
   could never beat the 50% !important -- it is dropped rather than carried over.
   Site.css loads after bootstrap.min.css, so this wins on order against Bootstrap's own rule. */
.tooltip-inner {
  border: 1px solid;
  padding: 10px;
  max-width: 50% !important;
  text-align: left;
  opacity: 1 !important;
}

.showactivationslipimage {
  width: 20px;
}

.activationslip {
  width: 26vw;
}

.btn-close-activation-slip {
  border: none;
  background-color: none;
}

a.disabled {
  /* Make the disabled links grayish */
  color: gray;

  /* And disable the pointer events */
  pointer-events: none;
}

.form-dropdown {
  width: 100%;
  height: 76%;
}

.custom-file-upload {
  cursor: pointer;
}

/* The real <input type="file"> lives in a .visually-hidden span, so focusing it paints the
   ring on a clipped 1x1 element nobody can see while the visible Upload box shows nothing.
   :focus-within moves the indicator onto the affordance the user is actually looking at.
   Done this way rather than making the span focusable: the input is already a tab stop, and
   a second one would mean tabbing through the same control twice. */
.custom-file-upload-field:focus-within .custom-file-upload {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.disabled {
  pointer-events: none; /* No cursor */
  background-color: #eee; /* Gray background */
}

input[readonly] {
  pointer-events: none; /* No cursor */
  background-color: #eee; /* Gray background */
}

form label {
  background-color: transparent;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: transparent !important;
}

/* WCAG 3.3.2 — required-field marker.
   Driven off aria-required, not a hand-applied class, so the visible mark cannot drift out of sync
   with the programmatic required state. The .is-required escape hatch covers label-first layouts
   (radio groups, question headings) where no single input carries the state.
   ::before, deliberately, not ::after: Bootstrap owns .form-floating label::after for the label's
   background chip (see the rule directly above), and a leading mark also survives the label's
   `text-overflow: ellipsis` on narrow columns, where a trailing one is the first thing clipped.
   The asterisk carries the meaning; the colour is emphasis only, never the sole indicator (1.4.1).

   a11y/content-property-no-static-value is disabled below deliberately. That rule guards against
   putting meaning *only* into generated content — here that is exactly the intent: aria-required
   carries the state to assistive tech, the visible legend explains the glyph, and the asterisk must
   stay out of the accessible name so fields are not announced as "First Name star".

   The `/ ""` is what keeps it out. Generated content IS part of the accessible name: with a plain
   `content: "* "`, Chrome's accessibility tree named these fields "* First Name". Empty alternative
   text (CSS Generated Content 3) makes the glyph decorative for assistive tech and leaves it on
   screen. The plain declaration above it is the fallback: a browser that does not know the alt-text
   syntax drops the second line as invalid and keeps the visible asterisk. Do not merge the two. */
/* stylelint-disable a11y/content-property-no-static-value */
.form-floating > [aria-required="true"] ~ label::before,
label.is-required::before,
/* The comment above already names "question headings" as a case the escape hatch covers, but no
   selector implemented it, so .is-required on a heading silently drew nothing. The payment block is
   the real instance: it is required (_MemberInfo.js refuses submit without it) and its group is
   introduced by an h4 rather than a label or a legend, because the control itself is a third-party
   widget with no label of ours to hang the marker on. */
h4.is-required::before,
.is-required > legend::before {
  content: "* ";
  content: "* " / "";
  color: #9b1b30; /* 8.1:1 on #fff */
  font-weight: 700;
}
/* stylelint-enable a11y/content-property-no-static-value */

/* Persistent format instruction shown under a control. Must stay visible at all times — 3.3.2 wants
   the instruction before the mistake, not only in the error message afterwards. */
.field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #495057; /* 7.5:1 on #fff */
}

/* Explains the asterisk. Sits above the first required control in each form. */
.required-field-legend {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  color: #495057;
}

.legalrights {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 10px;
  text-decoration: none;
  border: 1px solid;
  width: 85%;
}

/* WCAG 1.3.1 - "Your Rights and Options" column headers, hidden on screen but kept for
   assistive tech. The table's meaning is obvious to a sighted reader from the row headers and
   layout, so a second visible header row was not wanted; a screen reader still needs the
   column relationship to announce "Option: Do nothing".

   >>> TOGGLE <<<
   To SHOW the headers on screen, delete this one rule block. Nothing else needs to change -
   the th scope="col" cells are always rendered, and their text lives in Home.resx under
   Title_4_Header_1_Column_1 / _Column_2. Removing the legalrights-hidden-headers class from
   Views/Home/Partials/_InfoBlock.cshtml has the same effect.

   Uses the clip technique, NOT display:none or visibility:hidden - those remove the headers
   from the accessibility tree and would reintroduce the exact defect this fixes.
   Applied to the cells rather than the row so the table's box generation is left alone;
   column widths come from .borderedCol25 on the body cells, not from the header. */
.legalrights-hidden-headers thead th {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.info-card {
  width: 30%;
}

.accordion-header {
  text-indent: 16px;
}

.eCheckBox {
  display: flex; /* Use Flexbox */
  flex-direction: column; /* Stack the items vertically */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  width: 300px; /* Specify the width */
  height: 125px; /* Specify the height */
  border: solid 1.5px #eee; /* Add border to the box */
  padding: 10px; /* Add some padding */
  font-size: 0.75rem;
  cursor: pointer;
}

.payButton {
  width: 100%; /* Specify the width */
  height: 40px; /* Specify the height */
  border: 1px solid #fb8f00; /* Add border to the box */
  fill: #fb8f00;
  background-color: #fb8f00;
  color: white;
  padding: 10px; /* Add some padding */
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paymentTitle {
  height: 5px;
  color: rgb(119, 119, 119);
  letter-spacing: 0.00938em;
  font-size: 1.2rem;
  font-weight: bold;
}

.mockpaymentbox {
  color: #163f6b;
  font-size: 12pt;
  font-weight: 600;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  padding-inline-start: 2px;
  padding-inline-end: 2px;
}

.mockpaymentmessage {
  font-size: 1rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
}

.hiddenPaymentMethodValues {
  display: none;
}

.payButton:hover,
.payButton:focus {
  background-color: #b56516;
  border: 1px solid #b56516;
}

.shortFileUploadBox {
  width: 77%;
}

.spacedul li {
  margin-bottom: 5px;
}

.policy-iframe {
  width: 100%;
  height: 600px;
}

.text-indent {
  text-indent: 2em;
}

.float-left {
  position: relative;
  float: left;
}

.inline-field {
  position: relative;
  width: 250px !important; /* Define the width for the fields */
  display: inline-block; /* Ensure fields are inline */
  margin-right: 10px; /* Space between fields */
  float: left;
}

.inline-text {
  position: relative;
  margin-right: 10px; /* Space between text and fields */
  display: inline-block; /* Keep text inline with fields */
  vertical-align: middle; /* Align text with the middle of fields */
  float: left;
  width: max-content;
  white-space: nowrap;
}

@media (max-width: 576px) { /* Target screens smaller than 576px */
  .inline-text {
    white-space: normal; /* Allow word wrap on smaller screens */
    float: none; /* Optional: Remove float for better stacking */
    width: 100%;
  }
}

.row-line {
  display: flex; /* Ensure items are inline */
  align-items: start; /* Vertically align text and fields */
  gap: 10px; /* Add spacing between elements */
  margin-left: 10px;
}

.row-line-indent {
  padding-left: 22px;
}

.indent-adj {
  margin-left: 16px;
  margin-right: 17px;
}

.font-size-xx-large {
  font-size: xx-large;
}

.language-flag {
  height: 30px;
}

.height-30 {
  height: 30px;
}

.iframe-pdf {
  height: 100%;
  width: 100%;
}

.iframe-pdf-container {
  height: 5000px;
  width: 100%;
  border: 1px solid #ccc;
}

.field-validation-valid,
.field-validation-error {
  min-height: 1.5em; /* Adjust height to fit your messages */
  display: block; /* Ensure it takes up space */
}

.list-group-item {
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  overflow-wrap: anywhere; /* Ensure text breaks anywhere if necessary */
}

input[type="number"].no-spin {
  -moz-appearance: textfield; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none; /* Modern browsers */
}

/* Optional: Prevent margins from spinner buttons in some browsers */
input[type="number"].no-spin::-webkit-inner-spin-button,
input[type="number"].no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Float the label when the field has a value or focus.

   There used to be a third selector here, .has-value, set by an initializeFloatingLabels()
   routine in _MemberInfo.js on input and blur. It was redundant: removing the class from all
   sixteen fields in the running page moved no label at all, because a field with a value is
   already :not(:placeholder-shown). The typing transition works without it too - setting a
   value without firing an input event, so the script could not run, still floats the label.

   This block also carried the same two declarations twice, the second rule's selector being
   character-for-character the first selector above it. Collapsed. */
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label {
  opacity: 1;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* WCAG 1.4.10 Reflow. Bootstrap 5.3 gives a floating label height:100% but NOT a width, so
   an absolutely positioned label sizes to its own white-space:nowrap content. Its
   overflow:hidden and text-overflow:ellipsis then clip nothing, because the box IS the
   width of the text. "Description of expense (100 character limit)" came out 332px wide in
   a 320px viewport and pushed the whole claim form into a horizontal scrollbar
   (documentElement.scrollWidth 389). max-width is what lets the ellipsis do its job. */
.form-floating > label {
  max-width: 100%;

  /* Bootstrap 5.3.8 moved color: rgba(var(--bs-body-color-rgb), 0.65) from the FLOATED-state
     rule onto this base rule, so a resting label - the visible name of an empty field - went
     from full body colour to 65% opacity. On white that composites to #6F7174: 4.89:1, which
     passes AA, against 15.43:1 before.

     It is conformant either way, so this is a design decision rather than a correctness one,
     and a patch-version bump is not the place to make it silently across ~40 live claim sites.
     The colour is held where it was. Delete these two lines to take the lighter 5.3.8 look. */
  color: var(--bs-body-color);
}

/* Loading Overlay - CSS-First Approach (Inspired by PrimeReact ProgressSpinner) */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 58, 64, 0.8); /* 20% transparent dark grey/blue */

  /* Below toasts (10001) and the dialog (10000), above all other content. The full band is
     documented once, in ElementSpecific/cookie-consent-banner.css. */
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.loading-overlay.show {
  display: flex;
  opacity: 1;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

/* ProgressSpinner - Similar to PrimeReact */
.loading-spinner {
  width: 50px;
  height: 50px;
  position: relative;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

.loading-spinner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #87ceeb; /* Baby blue - darker sky blue */
  animation: spinner-rotate 0.6s linear infinite;
}

.loading-text {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-banner {
  width: 100%;
  padding: 12px;

  /* Match .site-hero-banner.bg-darkblue */
  background: linear-gradient(90deg, rgba(24, 34, 70, 1) 0%, rgba(20, 30, 65, 1) 50%, rgba(24, 34, 70, 1) 100%);
  color: white;
  text-align: center;
  display: none;
}

.loading-banner.visible {
  display: block;
}

/* Reduced motion (WCAG 2.2.2 / 2.3.3). Consolidated and placed LAST so it always wins
   on source order at equal specificity. Motion properties only - never opacity,
   transform, display or height: several of these components are hidden by default and
   revealed by a .show class, so redeclaring layout state here would fight that reveal. */

/* WCAG 1.4.3: validation text inside a danger alert. Measured on a case site with identical
   markup: the upload error span computed rgb(220, 53, 69) on the alert's rgb(248, 215, 218),
   which is 3.39:1 - under the 4.5:1 floor for 16px normal text.

   The class is not in the view. ValidationRegistry.js adds `field-validation-error text-danger`
   to the message element at runtime, and Bootstrap ships .text-danger with !important, so the
   utility beats the alert's own colour. That own colour, rgb(88, 21, 28), is 10.22:1 on the
   same background - so inherit it back.

   Scoped to .alert-danger deliberately: outside an alert, .text-danger sits on white at 4.53:1
   and passes, and it still carries meaning there. !important only because the declaration it
   overrides has one. */
.alert-danger .text-danger {
  color: inherit !important;
}

/* Multi-file upload preview column. Deliberately the same 80px treatment as
   .driver-license-thumbnail: two uploads on one claim form should not look like
   two different controls. */
.multi-file-thumbnail-cell {
  width: 96px;
  text-align: center;
  vertical-align: middle;
}

.multi-file-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: center;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background: #f8f9fa;
}

.multi-file-thumbnail-icon {
  font-size: 2rem;
  color: #6c757d;
  line-height: 80px;
}

@media screen and (prefers-reduced-motion: reduce) {
  .btn-americared,
  .btn-americared::after,
  .btn-americared:active::after,
  .grow,
  .loading-overlay {
    transition: none;
  }

  .btn-americared:hover::before,
  .btn-americared:focus::before,
  .loading-spinner::before {
    animation: none;
  }
}