/* Herman & Associates — Shared Header + Footer Styles */

html { scrollbar-gutter: stable; scroll-padding-top: 119px; }

.site-header { background: #0b2d4a; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* ── LOGGED-IN: single bar ── */
.header-member { max-width: 1456px; margin: 0 auto; padding: 0 28px; height: 65px; display: flex; align-items: center; gap: 0; }
.header-member .site-logo { flex-shrink: 0; display: flex; align-items: center; margin-right: 20px; overflow: hidden; height: 48px; }
.header-member .site-logo img { height: 48px; width: auto; display: block; margin-top: 0; border-radius: 3px; }
.member-nav { display: flex; list-style: none; align-items: center; gap: 8px; flex: 1; justify-content: center; }
.nav-links { display: contents; } /* wrapper is transparent on desktop; becomes the 2nd row on mobile */
.member-nav a { font-family: Arial, Helvetica, sans-serif; font-size: 0.76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #c8dff0; height: 38px; padding: 0 12px; border-radius: 3px; text-decoration: none; border: 1px solid rgba(168,200,224,.45); background: rgba(255,255,255,.07); display: inline-flex; align-items: center; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.member-nav a:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(168,200,224,.7); }
.member-nav a.active { color: #c8a84b; border-color: #c8a84b; background: rgba(200,168,75,.12); font-weight: 700; }
.member-nav .nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 6px; flex-shrink: 0; }
.nav-user-wrap { position: relative; }
.member-nav .nav-user {
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: 0.76rem; color: #c8dff0; white-space: nowrap;
  border: 1px solid rgba(144,184,208,.45);
  padding: 0 14px; border-radius: 3px; background: rgba(255,255,255,.07); height: 38px;
}
.member-nav .nav-user::before { content: "👤"; margin-right: 6px; font-size: 0.8rem; }
.member-nav .nav-user strong { color: #c8a84b; }
.nav-user-dropdown {
  display: none; position: absolute; right: 0; top: 100%;
  background: #0b2d4a; border: 1px solid rgba(144,184,208,.25);
  border-top: 2px solid #c8a84b;
  border-radius: 0 0 6px 6px; box-shadow: 0 6px 20px rgba(0,0,0,.45); z-index: 300;
  padding: 6px; flex-direction: column; gap: 4px;
  width: -webkit-fit-content; width: fit-content; max-width: 240px;
}
.nav-user-wrap.open .nav-user-dropdown { display: flex; }
.nav-user-dropdown a {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  border-radius: 3px; transition: background .15s; white-space: nowrap;
  font-size: 0.74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 10px;
}

/* Edit mode — gold button */
.nav-user-dropdown .nav-edit-btn { background: #c8a84b; color: #0b2d4a; }
.nav-user-dropdown .nav-edit-btn:hover { background: #d4b96a; }
.nav-user-dropdown .nav-edit-btn.edit-active { background: #a8881e; color: #fff; }

/* Divider */
.nav-dropdown-sep { height: 1px; background: rgba(144,184,208,.2); margin: 1px 0; }

/* Sign out — compact, matches other dropdown items */
.nav-user-dropdown .nav-signout-btn { background: #c8102e; color: #fff; }
.nav-user-dropdown .nav-signout-btn:hover { background: #a00824; }

/* ── SEARCH DROPDOWN ── */
.nav-search-wrap { position: relative; margin-left: auto; }
.nav-search-btn { display: inline-flex; align-items: center; cursor: pointer; font-size: 0.76rem; color: #c8dff0; white-space: nowrap; border: 1px solid rgba(144,184,208,.45); padding: 0 14px; border-radius: 3px; background: rgba(255,255,255,.07); gap: 5px; font-family: Arial, Helvetica, sans-serif; font-weight: 600; letter-spacing: .04em; height: 38px; }
.nav-search-btn:hover { color: #fff; background: #0f3d62; }
.nav-search-dropdown { display: none; position: absolute; right: 0; top: 100%; min-width: 340px; background: #0b2d4a; border: 1px solid rgba(144,184,208,.25); border-top: 2px solid #c8a84b; border-radius: 0 0 4px 4px; box-shadow: 0 4px 16px rgba(0,0,0,.4); z-index: 300; padding: 12px; }
.nav-search-wrap.open .nav-search-dropdown { display: block; }
.nav-search-dropdown form { display: flex; gap: 8px; }
.search-input { flex: 1; min-width: 0; padding: 8px 12px; background: #fff; border: none; border-radius: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 0.88rem; color: #1c2b38; outline: none; }
.search-input:focus { box-shadow: inset 0 0 0 2px #c8a84b; }
.search-btn { background: #c8102e; color: #fff; border: none; border-radius: 3px; padding: 8px 16px; font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s; white-space: nowrap; }
.search-btn:hover { background: #a00824; }
.sbtn-ico { display: none; }  /* swaps in for the "Search" text on tiny screens (≤350) */

/* ── LOGGED-OUT: logo + member box row ── */
.header-public-top { max-width: 1456px; margin: 0 auto; padding: 0 28px; height: 65px; display: flex; align-items: center; gap: 20px; }
.header-public-top .site-logo { flex-shrink: 0; display: flex; align-items: center; overflow: hidden; height: 48px; }
.header-public-top .site-logo img { height: 48px; width: auto; display: block; margin-top: 0; border-radius: 3px; }
.member-box { display: flex; align-items: center; gap: 16px; border: 2px solid #c8a84b; border-radius: 4px; padding: 0 22px; height: 46px; background: #0a2030; margin-left: auto; }
.member-box-label { font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c8a84b; white-space: nowrap; flex-shrink: 0; }
.teaser-items { display: flex; align-items: center; gap: 3px; flex: 1; }
.teaser-item { font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c8dff0; padding: 3px 9px; border: 1px solid rgba(200,223,240,.18); border-radius: 3px; white-space: nowrap; cursor: pointer; user-select: none; transition: color .16s, border-color .16s, background .16s; }
.teaser-item:hover { color: #fff; border-color: rgba(200,168,75,.6); background: rgba(200,168,75,.12); }
.teaser-div { color: #445566; font-size: 0.62rem; }
.member-login-form { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.member-login-form input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 3px; padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 0.8rem; color: #fff; outline: none; width: 120px; transition: border-color .18s; }
.member-login-form input::placeholder { color: rgba(255,255,255,.35); }
.member-login-form input:focus { border-color: rgba(200,168,75,.6); }
.member-login-form button { background: #c8102e; color: #fff; border: none; border-radius: 3px; padding: 6px 14px; font-family: Arial, Helvetica, sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .18s; white-space: nowrap; }
.member-login-form button:hover { background: #a00824; }
.login-bar-error { font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; color: #f08090; white-space: nowrap; }

/* ── secondary page nav (logged-out) ── */
.header-public-nav { background: rgba(0,0,0,.35); border-top: 2px solid rgba(200,168,75,.45); }
.header-public-nav-inner { max-width: 1456px; margin: 0 auto; padding: 0 28px; height: 48px; display: flex; align-items: center; gap: 0; }
.header-public-nav a { font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8aafc8; padding: 0 20px; height: 48px; text-decoration: none; border: none; background: none; display: inline-flex; align-items: center; position: relative; transition: color .2s; white-space: nowrap; }
.header-public-nav a::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; background: #c8a84b; transform: scaleX(0); transition: transform .2s; }
.header-public-nav a:hover { color: #d8e8f4; }
.header-public-nav a:hover::after { transform: scaleX(.4); }
.header-public-nav a.nav-active { color: #c8a84b; }
.header-public-nav a.nav-active::after { transform: scaleX(1); }

/* ── DETAIL BAR (breadcrumb strip — federal, state, auto) ── */
.detail-bar { position: sticky; top: 65px; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.detail-bar-inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; height: 48px; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.detail-bar-back { font-size: 0.84rem; color: #3a5a78; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.detail-bar-back:hover { color: var(--accent); }
.detail-bar-sep { color: #aabbcc; flex-shrink: 0; font-size: 0.9rem; line-height: 1; }
.detail-bar-crumb { font-size: 0.84rem; color: #3a5a78; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.detail-bar-crumb:hover { color: var(--accent); }
.detail-bar-name { font-size: 0.88rem; font-weight: 600; color: #1c2b38; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.detail-bar-main { display: flex; align-items: center; gap: 8px; overflow: hidden; flex: 1; }
.detail-bar-pills { display: flex; gap: 6px; flex-shrink: 0; }
.detail-pill { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--border); color: var(--muted); transition: all .15s; }
.detail-pill:hover { background: var(--bg); color: var(--navy); border-color: #b0bec8; }
.detail-pill.active { background: var(--navy-mid); color: var(--gold); border-color: var(--navy-mid); }

/* ── RESPONSIVE HEADER ── */
.nav-abbr { display: none; }

/* Degradation priority as the viewport narrows:
   ①  Member: label drops + Search → magnifying-glass icon   (~1120px)
   ②  Auto / Briefing labels abbreviate                       (~960px)
   ③  wrap to exactly two rows                                 (~660px)
   ④  hamburger                                                (~340px)  */

/* ① First to give: the "Member:" prefix collapses to just the name, and the
   Search button collapses to its magnifying-glass icon. Section labels stay full. */
@media (max-width: 1120px) {
  .header-member { padding: 0 20px; }
  .header-member .site-logo, .header-member .site-logo img { height: 46px; }
  .nav-user-label  { display: none; }   /* "Member:" gone → 👤 Name ▾ */
  .nav-search-text { display: none; }   /* "Search ▾" gone → 🔍 only */
  .nav-search-btn  { padding: 0 8px; }
  .nav-search-icon { font-size: 1.2rem; line-height: 1; }  /* bigger, obvious magnifier */
}

/* ② Abbreviate the long section labels, then trim the member name as the single
   row keeps tightening — everything stays on ONE row until even a trimmed name
   won't fit (reserve = logo + 4 buttons + search icon + gaps ≈ 548px at logo 42). */
@media (max-width: 960px) {
  .header-member { padding: 0 16px; }
  .header-member .site-logo, .header-member .site-logo img { height: 42px; }
  .header-member .site-logo { margin-right: 12px; }
  .member-nav { gap: 5px; }
  .member-nav a, .member-nav .nav-user, .nav-search-btn { padding: 0 9px; font-size: 0.72rem; letter-spacing: .02em; }
  .nav-long { display: none; }
  .nav-abbr { display: inline; }
  .nav-user { min-width: 0; max-width: calc(100vw - 548px); overflow: hidden; }
  .nav-user strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ③ Only once the trimmed single row can't fit (~≤600px) do we wrap to two rows.
   The four links drop to row 2 (nav-links, basis 100%). Row 1 (logo + search-icon
   + member) now has ~280px more room, so the name EXPANDS back to show more; as the
   2-row layout narrows the name trims again. Both rows are centred, and row 1 is
   held to a minimum of the button width (~282px) so it's never narrower than row 2 —
   it can be wider. Below where 282px fits, the hamburger takes over. */
@media (max-width: 670px) {
  .header-member { position: relative; height: auto; min-height: 65px; padding: 8px 8px; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 8px; column-gap: 6px; }
  .header-member .site-logo, .header-member .site-logo img { height: 36px; }
  .header-member .site-logo { margin-right: 0; }
  .member-nav { display: contents; }
  .member-nav a, .member-nav .nav-user, .nav-search-btn { padding: 0 9px; font-size: 0.72rem; height: 36px; }

  .nav-search-wrap { order: 1; margin-left: 0; position: static; }
  .nav-user-wrap   { order: 2; margin-left: 0; }
  .nav-links       { display: flex; order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; justify-content: center; }

  /* member expands into the reclaimed row-1 space; min-width keeps row 1 ≥ the
     282px button row; max-width truncates the name only when it must. */
  .nav-user { min-width: 72px; max-width: calc(100vw - 242px); overflow: hidden; }
  .nav-user strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* search dropdown spans the viewport under the bar, not the tiny icon */
  .nav-search-dropdown { left: 8px; right: 8px; width: auto; min-width: 0; }
}
/* Compress member-box at 760px */
@media (max-width: 760px) {
  .member-box { padding: 0 12px; gap: 6px; }
  .member-box-label { display: none; }
  .member-login-form input { width: 88px; font-size: 0.74rem; padding: 4px 8px; }
}
/* At 600px: shrink logo + header padding to keep login form visible */
@media (max-width: 600px) {
  .header-public-top { padding: 0 14px; }
  .header-public-top .site-logo { height: 36px; }
  .header-public-top .site-logo img { height: 36px; }
  .member-login-form input { width: 78px; }
  .member-login-form button { padding: 4px 10px; font-size: 0.68rem; }
}
/* Nav wrap + member-box hide at narrow widths */
.mobile-signin-btn { display: none; }
@media (max-width: 480px) {
  .header-public-nav-inner { height: auto; padding: 6px 14px; flex-wrap: wrap; gap: 0; }
  .header-public-nav a { height: auto; padding: 7px 10px; font-size: 0.68rem; }
  .member-box { display: none; }
  .mobile-signin-btn {
    display: inline-flex; align-items: center; margin-left: auto;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    color: #c8a84b; border: 1px solid rgba(200,168,75,.55); border-radius: 3px;
    padding: 6px 13px; text-decoration: none; flex-shrink: 0;
  }
  .mobile-signin-btn:hover { background: rgba(200,168,75,.1); }
}

/* At phone width drop the 👤 icon too (name only) — gives the name the whole
   ~96px slot inside the block (logo stays 30px from the block rule above). */
@media (max-width: 400px) {
  .nav-user::before { display: none; }
  .nav-user-label { display: none; }
}

/* The dropdown's red "Search" submit button shrinks to a red magnifying-glass
   box on tiny screens, leaving the input more room. */
@media (max-width: 350px) {
  .search-btn { padding: 8px 12px; }
  .search-btn .sbtn-txt { display: none; }
  .search-btn .sbtn-ico { display: inline; font-size: 1.1rem; line-height: 1; }
}

/* ── LOGGED-IN: hamburger once the 282px block no longer fits (~≤310px) ── */
.nav-hamburger { display: none; }
@media (max-width: 320px) {
  /* the 282px button row no longer fits — collapse to a full-width bar: logo + hamburger */
  .site-header { overflow: visible; }
  .header-member { position: relative; width: auto; max-width: 1456px; flex-wrap: nowrap; height: 58px; min-height: 0; padding: 0 12px; }
  .header-member .site-logo { height: 34px; margin-right: 0; }
  .header-member .site-logo img { height: 34px; }

  .nav-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; flex-shrink: 0;
    width: 44px; height: 38px; padding: 0;
    background: rgba(255,255,255,.07); color: #c8dff0;
    border: 1px solid rgba(168,200,224,.45); border-radius: 3px;
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .nav-hamburger:hover { background: rgba(255,255,255,.14); color: #fff; }

  /* nav becomes a full-width vertical panel under the bar */
  .member-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 6px; padding: 10px 14px 14px;
    background: #0b2d4a; border-top: 2px solid #c8a84b;
    box-shadow: 0 6px 20px rgba(0,0,0,.45); z-index: 300;
  }
  .header-member.nav-open .member-nav { display: flex; }

  /* full labels in the panel — undo the desktop abbreviation swap */
  .nav-long { display: inline; }
  .nav-abbr { display: none; }
  .member-nav li { display: block; width: 100%; }
  .member-nav .nav-links { display: flex; flex-direction: column; gap: 6px; order: 0; flex: 0 0 auto; }
  .member-nav a {
    justify-content: flex-start; height: 44px; width: 100%;
    font-size: 0.82rem; letter-spacing: .04em; padding: 0 14px;
  }

  /* search: show the form inline, drop the toggle button */
  .nav-search-wrap { margin-left: 0; width: 100%; }
  .nav-search-btn { display: none; }
  .nav-search-dropdown {
    display: block; position: static; width: 100%; min-width: 0;
    padding: 0; border: none; box-shadow: none; background: none;
  }

  /* member menu: name as a label, edit/sign-out always shown below it.
     Panel has room, so restore the full "👤 Member:" prefix hidden at ≤400. */
  .nav-user-wrap { width: 100%; order: 2; margin-left: 0; }
  .nav-user::before { display: inline; }
  .nav-user-label { display: inline; }
  .member-nav .nav-user {
    display: inline-flex; width: 100%; max-width: none; justify-content: flex-start;
    height: 44px; cursor: default;
  }
  .nav-user-dropdown {
    display: flex !important; position: static; width: 100%; max-width: none;
    padding: 6px 0 0; border: none; box-shadow: none; background: none;
  }
  .nav-user-dropdown a { justify-content: flex-start; height: 42px; }
}

/* ── TOAST NOTIFICATIONS ── */
#ha-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  max-width: 360px; padding: 13px 20px;
  border-radius: 6px; font-size: 0.87rem; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(12px);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
#ha-toast.toast-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#ha-toast.toast-ok    { background: #1a6e3c; color: #fff; }
#ha-toast.toast-error { background: #c8102e; color: #fff; }
#ha-toast.toast-info  { background: #0b2d4a; color: #c8a84b; }

/* ── SHARED FOOTER ── */
/* flex-shrink:0 so the footer keeps its height when the body is a flex column
   (member pages use body{display:flex} + .page-wrap{flex:1 0 auto} to pin the
   footer to the bottom without a magic min-height calc). */
.site-footer { background: #071e30; border-top: 2px solid #c8102e; padding: 14px 28px; margin-top: 32px; flex-shrink: 0; }
/* When the footer follows a full-bleed colour band, the 32px breathing room
   above reads as a stray white stripe — run them flush instead. */
.cta-banner + .site-footer { margin-top: 0; }
/* Wide: logo | copyright | Contact Us on one row.
   Too narrow to fit: copyright drops to its own second row, centred, while
   logo and Contact Us keep the first row to themselves. Nothing shrinks and
   the copyright never wraps mid-sentence. */
.footer-inner { max-width: 1456px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; color: #445566; }
.footer-inner > span { flex: 0 0 auto; white-space: nowrap; }
.footer-inner > a { flex: 0 0 auto; white-space: nowrap; }
/* display:block kills the inline-image descender gap. Without it the pages
   using _footer.php (logo wrapped in <a>) render a few px taller than
   index.php, whose logo is a bare <img> and gets blockified by the flex row. */
.footer-logo { flex: 0 0 auto; display: block; }
.footer-inner > a { display: flex; align-items: center; }
@media (max-width: 700px) {
  .footer-inner > span { order: 3; flex: 0 0 100%; text-align: center; white-space: normal; }
}
.footer-inner span { color: #445566; }
.footer-inner a { color: #7090a8; text-decoration: none; }
.footer-inner a:hover { color: #a8c8e0; }
.footer-logo { height: 32px; border-radius: 3px; }

.ha-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ha-modal[hidden] { display: none; }
.ha-modal-backdrop { position: absolute; inset: 0; background: rgba(6,18,30,.72); }
.ha-modal-panel { position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: 6px; border-top: 3px solid #0b2d4a; box-shadow: 0 18px 50px rgba(0,0,0,.4); overflow: hidden; animation: ha-modal-in .18s ease-out; }
@keyframes ha-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ha-modal-x { position: absolute; top: 6px; right: 10px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: rgba(255,255,255,.75); cursor: pointer; z-index: 2; padding: 0 4px; }
.ha-modal-x:hover { color: #fff; }
.ha-modal-head { background: #0b2d4a; padding: 16px 22px; text-align: center; }
.ha-modal-head h3 { font-family: Arial, Helvetica, sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: .04em; color: #fff; margin: 0; }
.ha-modal-body { padding: 20px 22px 22px; font-family: Arial, Helvetica, sans-serif; }
.ha-modal-preview { text-align: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #e4ebf1; }
.ha-modal-preview[hidden] { display: none; }
.ha-modal-pv-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 8px; }
.ha-modal-pv-title { font-size: 1rem; font-weight: 700; color: #0b2d4a; margin-bottom: 6px; }
.ha-modal-pv-desc { font-size: 0.82rem; line-height: 1.5; color: #556677; margin-bottom: 12px; }
.ha-modal-pv-note { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a6100; background: #f6edd6; border: 1px solid #dcc079; border-radius: 20px; padding: 4px 12px; }
.ha-modal-error { background: #fff0f2; border: 1px solid #f8c0c8; border-left: 3px solid #c8102e; border-radius: 3px; padding: 9px 12px; font-size: 0.8rem; color: #c8102e; margin-bottom: 14px; }
.ha-modal-form { display: flex; flex-direction: column; }
.ha-modal-form label { font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #556677; margin-bottom: 5px; }
.ha-modal-form input { border: 1px solid #cdd7e0; border-radius: 3px; padding: 10px 12px; font-size: 0.9rem; color: #1c2b38; outline: none; margin-bottom: 14px; transition: border-color .16s; }
.ha-modal-form input:focus { border-color: #0b2d4a; }
.ha-modal-form button { background: #c8102e; color: #fff; border: none; border-radius: 3px; padding: 11px; font-size: 0.82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .18s; }
.ha-modal-form button:hover { background: #a00824; }
.ha-modal-contact { margin-top: 14px; text-align: center; font-size: 0.75rem; color: #8899aa; }
.ha-modal-contact a { color: #0b2d4a; }
body.ha-modal-open { overflow: hidden; }