/* Inter is self-hosted; load vendor/fonts/inter/inter.css before this file (see p_header.tmpl/a_header.tmpl).
 * Phase 1 UI modernization theme variables.
 * Replace placeholder values with county branding in Phase 2.
 */
:root {
  --bp-primary: #3b6642;
  --bp-primary-rgb: 59, 102, 66;
  --bp-secondary: #4f5d62;
  --bp-secondary-rgb: 79, 93, 98;
  --bp-accent: #d0aa49;
  --bp-accent-rgb: 208, 170, 73;
  --bp-info: #437599;
  --bp-info-rgb: 67, 117, 153;
  --bp-danger: #b85646;
  --bp-danger-rgb: 184, 86, 70;
  --bp-bg: #f9faf9;
  --bp-surface: #f2f4f3;
  --bp-surface-rgb: 242, 244, 243;
  --bp-border: #d5dbd8;
  --bp-border-rgb: 213, 219, 216;
  /* Darker than --bp-accent: --bp-accent (2.2:1 vs white) fails WCAG
     non-text/text contrast; this is the accessible gold used for focus
     rings and hover/focus link text. --bp-accent stays unconstrained for
     purely decorative borders/backgrounds. */
  --bp-focus: #8c6d1f;
  --bp-heading-page: #1f2f27;
  --bp-section-heading: #4b6554;
  --bp-section-heading-rgb: 75, 101, 84;
  --bp-body-color-rgb: 31, 31, 31;

  --bp-font-sans: "InterVariable", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --font-size--2: clamp(0.75rem, 0.7rem + 0.4vw, 0.875rem);
  --font-size--1: 0.875rem;
  --font-size-0: 1rem;
  --font-size-1: clamp(1.125rem, 1rem + 1vw, 1.25rem);
  --font-size-2: clamp(1.25rem, 1rem + 1.6vw, 1.5rem);
  --font-size-3: clamp(1.5rem, 1rem + 2.2vw, 1.875rem);
  --font-size-4: clamp(1.875rem, 1rem + 3vw, 2.375rem);
  --font-size-5: clamp(2.25rem, 1rem + 4vw, 3rem);

  --t-page-title-fs: var(--font-size-4);
  --t-page-title-lh: 1.15;
  --t-page-title-wt: 700;
  --t-page-title-tr: -0.01em;

  --t-section-title-fs: var(--font-size-2);
  --t-section-title-lh: 1.2;
  --t-section-title-wt: 600;

  --t-subsection-title-fs: var(--font-size-1);
  --t-subsection-title-lh: 1.3;
  --t-subsection-title-wt: 600;

  --t-eyebrow-fs: var(--font-size--1);
  --t-eyebrow-lh: 1.4;
  --t-eyebrow-wt: 600;
  --t-eyebrow-tr: 0.08em;

  --t-body-fs: var(--font-size-0);
  --t-body-lh: 1.6;
  --t-body-wt: 400;

  --t-lead-fs: clamp(1.0625rem, 1rem + 0.6vw, 1.35rem);
  --t-lead-lh: 1.55;
  --t-lead-wt: 400;

  --t-caption-fs: var(--font-size--1);
  --t-caption-lh: 1.4;
  --t-caption-wt: 400;

  --t-mono-fs: var(--font-size--1);
  --t-mono-lh: 1.5;

  --t-meta-fs: var(--font-size--1);
  --t-meta-lh: 1.45;
  --t-meta-wt: 500;

  --t-legal-fs: clamp(0.8125rem, 0.78rem + 0.3vw, 0.95rem);
  --t-legal-lh: 1.65;
  --t-legal-wt: 400;

  --t-label-fs: var(--font-size-0);
  --t-label-lh: 1.45;
  --t-label-wt: 500;

  --t-data-fs: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
  --t-data-lh: 1.1;
  --t-data-wt: 600;

  --t-badge-fs: var(--font-size--1);
  --t-badge-lh: 1.3;
  --t-badge-wt: 600;

  --t-alert-title-fs: var(--font-size-1);
  --t-alert-title-lh: 1.3;
  --t-alert-title-wt: 600;

  --t-table-head-fs: var(--font-size--1);
  --t-table-head-lh: 1.4;
  --t-table-head-wt: 600;
  --t-table-head-tr: 0.08em;

  --tone-muted: 0.65;
  --tone-subtle: 0.8;

  --measure: 70ch;
  --flow-space: 1rem;

  --bs-primary: var(--bp-primary);
  --bs-primary-rgb: var(--bp-primary-rgb);
  --bs-secondary: var(--bp-secondary);
  --bs-secondary-rgb: var(--bp-secondary-rgb);
  --bs-warning: var(--bp-accent);
  --bs-warning-rgb: var(--bp-accent-rgb);
  --bs-danger: var(--bp-danger);
  --bs-danger-rgb: var(--bp-danger-rgb);
  --bs-info: var(--bp-info);
  --bs-info-rgb: var(--bp-info-rgb);
  --bs-body-bg: var(--bp-bg);
  --bs-body-color: #1f1f1f;
  --bs-font-sans-serif: var(--bp-font-sans);
  --bs-body-font-family: var(--bp-font-sans);
  --bs-body-font-size: var(--t-body-fs);
  --bs-body-font-weight: var(--t-body-wt);
  --bs-body-line-height: var(--t-body-lh);
  --bs-heading-color: var(--bp-heading-page);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus,
.skip-link:active {
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background-color: var(--bp-primary);
  color: #fff;
  z-index: 1040;
}

a {
  color: rgba(var(--bp-primary-rgb), 0.9);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(var(--bp-primary-rgb), 0.4);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.22em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease;
}

a:hover,
a:focus {
  color: var(--bp-focus);
  text-decoration-color: rgba(var(--bp-accent-rgb), 0.65);
  text-decoration-thickness: 0.14em;
}

a:focus-visible {
  outline: 2px solid var(--bp-focus);
  outline-offset: 2px;
}

body {
  background-color: var(--bp-bg);
  color: var(--bs-body-color);
  font: var(--t-body-wt) var(--t-body-fs) / var(--t-body-lh) var(--bp-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p {
  margin-top: 0;
  margin-bottom: var(--flow-space);
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol,
dl {
  margin-top: 0;
  margin-bottom: var(--flow-space);
  padding-left: 1.5rem;
}

/* Preserve the legacy reset's dt font-weight now that dl/dt/dd are being
   dropped from burnpermit_screen.css's universal reset block — otherwise
   Bootstrap's own dt{font-weight:700} takes over unopposed. */
dt {
  font-weight: inherit;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0.5rem;
}

h1,
.h1,
.page-title {
  font-family: var(--bp-font-sans);
  font-size: var(--t-page-title-fs);
  line-height: var(--t-page-title-lh);
  font-weight: var(--t-page-title-wt);
  letter-spacing: var(--t-page-title-tr);
  margin: 0 0 calc(var(--flow-space) * 1.5);
  color: var(--bp-heading-page, #1f2f27);
}

h2,
.h2 {
  font-family: var(--bp-font-sans);
  font-size: var(--t-section-title-fs);
  line-height: var(--t-section-title-lh);
  font-weight: var(--t-section-title-wt);
  margin: 2rem 0 0.75rem;
  color: var(--bp-section-heading, var(--bp-heading-page, #1f2f27));
}

h1 + h2 {
  margin-top: var(--flow-space);
}

h3,
.h3,
.t-subsection-title {
  font-family: var(--bp-font-sans);
  font-size: var(--t-subsection-title-fs);
  line-height: var(--t-subsection-title-lh);
  font-weight: var(--t-subsection-title-wt);
  margin: 1.5rem 0 0.5rem;
  color: var(--bp-heading-page, #1f2f27);
}

h4,
.h4 {
  font-family: var(--bp-font-sans);
  font-size: var(--font-size-0);
  line-height: 1.4;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  color: var(--bp-heading-page, #1f2f27);
}

h5,
.h5 {
  font-family: var(--bp-font-sans);
  font-size: var(--font-size--1);
  line-height: 1.35;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  color: var(--bp-heading-page, #1f2f27);
}

h6,
.h6 {
  font-family: var(--bp-font-sans);
  font-size: var(--font-size--1);
  line-height: 1.3;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.02em;
  color: rgba(var(--bp-body-color-rgb), 0.9);
}

.t-body {
  font: var(--t-body-wt) var(--t-body-fs) / var(--t-body-lh) var(--bp-font-sans);
}

.t-lead,
.lead {
  font: var(--t-lead-wt) var(--t-lead-fs) / var(--t-lead-lh) var(--bp-font-sans);
  color: rgba(var(--bp-body-color-rgb), 0.88);
}

small,
.small {
  font-size: var(--t-caption-fs);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-caption-wt);
  color: rgba(var(--bp-body-color-rgb), var(--tone-subtle));
}

.t-eyebrow {
  font: var(--t-eyebrow-wt) var(--t-eyebrow-fs) / var(--t-eyebrow-lh) var(--bp-font-sans);
  letter-spacing: var(--t-eyebrow-tr);
  text-transform: uppercase;
}

.helper {
  font: var(--t-meta-wt) var(--t-meta-fs) / var(--t-meta-lh) var(--bp-font-sans);
  color: rgba(var(--bp-body-color-rgb), 0.72);
}

.t-legal {
  font: var(--t-legal-wt) var(--t-legal-fs) / var(--t-legal-lh) var(--bp-font-sans);
  color: rgba(var(--bp-body-color-rgb), 0.86);
}

.t-label,
.form-label,
label,
label.normal,
label.singleRow,
label.payment,
.checkbox-fieldset legend {
  font: var(--t-label-wt) var(--t-label-fs) / var(--t-label-lh) var(--bp-font-sans);
  color: rgba(var(--bp-body-color-rgb), 0.9);
}

.t-data {
  font: var(--t-data-wt) var(--t-data-fs) / var(--t-data-lh) var(--bp-font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.badge {
  font: var(--t-badge-wt) var(--t-badge-fs) / var(--t-badge-lh) var(--bp-font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.alert-heading {
  font: var(--t-alert-title-wt) var(--t-alert-title-fs) / var(--t-alert-title-lh) var(--bp-font-sans);
}

.table thead th,
.table thead td {
  font: var(--t-table-head-wt) var(--t-table-head-fs) / var(--t-table-head-lh) var(--bp-font-sans);
  letter-spacing: var(--t-table-head-tr);
  text-transform: uppercase;
  color: rgba(var(--bp-body-color-rgb), 0.8);
}

.t-mono,
code,
pre,
kbd,
samp,
.text-monospace,
.font-monospace {
  font-family: var(--bp-font-mono);
  font-size: var(--t-mono-fs);
  line-height: var(--t-mono-lh);
}

pre {
  padding: 1rem;
  background-color: rgba(var(--bp-border-rgb), 0.4);
  border-radius: 0.75rem;
  overflow-x: auto;
}

code {
  padding: 0.125em 0.25em;
  background-color: rgba(var(--bp-border-rgb), 0.35);
  border-radius: 0.375rem;
}

blockquote {
  margin: calc(var(--flow-space) * 1.5) 0;
  padding-left: 1rem;
  border-left: 4px solid rgba(var(--bp-border-rgb), 0.6);
  color: rgba(var(--bp-body-color-rgb), 0.8);
  font-style: italic;
}

figure {
  margin: var(--flow-space) 0;
}

figcaption {
  margin-top: 0.5rem;
  color: rgba(var(--bp-body-color-rgb), 0.7);
}

.form-text {
  font-size: var(--t-caption-fs);
  line-height: var(--t-caption-lh);
  color: rgba(var(--bp-body-color-rgb), var(--tone-subtle));
}

.card-title {
  font: var(--t-section-title-wt) var(--t-section-title-fs) / var(--t-section-title-lh) var(--bp-font-sans);
  color: var(--bp-heading-page, #1f2f27);
}

.card-subtitle {
  font: var(--t-meta-wt) var(--t-meta-fs) / var(--t-meta-lh) var(--bp-font-sans);
  color: rgba(var(--bp-body-color-rgb), var(--tone-subtle));
}

.card-text {
  font: var(--t-body-wt) var(--t-body-fs) / var(--t-body-lh) var(--bp-font-sans);
  color: inherit;
}

.alert .btn-close {
  opacity: var(--tone-subtle);
}

.is-muted {
  color: rgba(var(--bp-body-color-rgb), var(--tone-muted));
}

.is-subtle {
  color: rgba(var(--bp-body-color-rgb), var(--tone-subtle));
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--flow-space);
}

.dense .t-body {
  line-height: 1.45;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: var(--t-body-fs);
  line-height: var(--t-body-lh);
}

#wrap,
#wrapAdmin {
  background-color: var(--bp-surface);
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.site-frame {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding-inline: 1.25rem;
  box-sizing: border-box;
}

.site-header {
  position: relative;
  color: #fff;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  background-color: var(--bp-bg);
  background-image: url('../images/burn-permit-hero-modern-tapered-gold.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(100%, 1597px) 144px;
  min-height: 144px;
}

.admin .site-header {
  background-color: var(--bp-bg);
  background-image: url('../images/burn-permit-hero-modern-tapered-gold.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(100%, 1597px) 144px;
}

/* Header status banners (top_burning_prohibited/_district/_zone,
   top_message) are full-bleed .alert divs with their own inner
   .site-frame to align the text with the hero/nav content column. The
   bare .alert rule's own horizontal padding stacked with .site-frame's,
   inset the text an extra 1.25rem past where the hero title/nav row
   start. Zero it here so .site-frame is the only source of horizontal
   inset; vertical padding (the banner's height) is unaffected. The
   banner also butted straight against the hero photo with no
   separation (mb-0 only removes the gap below it, toward the nav row,
   which already reads fine) -- margin-top gives it the same visual
   breathing room the nav row has, revealing --bp-bg (near-white, matches
   the rest of the page) rather than the hero's photo.  */
.site-header > .alert {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0.75rem;
}

/* Both hero variants (public and admin) are title-only, centered. */
.site-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.75rem;
  min-height: 144px;
  padding-block: 1.5rem;
  padding-inline: 26px 18px;
}

/* County identity (seal + name), shown in the utility nav band once a
   county is known — not in the hero. Kept deliberately plain: no card,
   ring, or heavy shadow, so any county's seal normalizes the same way. */
.county-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.county-identity-seal {
  min-width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

/* Height-bound, width follows the image: county images range from square
   seals to wide logos (Hill's is ~3.4:1), and a fixed square box shrank the
   wide ones to a speck. */
.county-identity-seal img {
  height: 44px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  display: block;
}

.county-identity-seal.placeholder {
  border-radius: 50%;
  background: rgba(var(--bp-primary-rgb), 0.1);
}

.county-identity-name {
  font-family: var(--bp-font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--bp-primary);
}

.site-header-title {
  font-family: var(--bp-font-sans);
  font-weight: var(--t-page-title-wt);
  font-size: clamp(var(--font-size-3), 1.5rem + 1.1vw, 2.2rem);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-tr);
  color: #ffffff;
  text-shadow: 0 6px 16px rgba(10, 18, 15, 0.55);
}

/* Below this the title's natural word-wrap point is unstable (a common
   phone width like 414px wraps to 3 lines and overflows the fixed-height
   144px hero background; 417px wraps to 2). Force it smaller so it stays
   within 2 lines down to ~375px, and doesn't visibly overflow even if it
   wraps to 3 at the narrowest supported widths. */
@media (max-width: 480px) {
  .site-header-title {
    font-size: 1.3rem;
  }
}

.site-header .btn-outline-primary,
.site-header .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.site-header .btn-outline-primary:hover,
.site-header .btn-outline-secondary:hover,
.site-header .btn-outline-primary:focus,
.site-header .btn-outline-secondary:focus {
  color: var(--bp-primary);
  background-color: #fff;
  border-color: #fff;
}

.site-main > .container-xl {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--flow-space) * 1.5);
  flex: 1 1 auto;
  background-color: var(--bp-surface);
  padding: 2.25rem 2.25rem 2rem;
}

.site-main .site-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-inline: 0.75rem;
  background-color: var(--bp-surface);
}

.site-main {
  background-color: var(--bp-surface);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--flow-space) * 2);
}


.site-footer {
  background:
    linear-gradient(180deg, rgba(var(--bp-primary-rgb), 0.9), rgba(var(--bp-primary-rgb), 0.82)),
    linear-gradient(180deg, rgba(27, 46, 33, 0.65), rgba(59, 102, 66, 0.92));
  color: rgba(255, 255, 255, 0.88);
  width: 100%;
  max-width: 1300px;
  margin: 2.5rem auto 0;
  border-radius: 0 0 1.5rem 1.5rem;
  padding: 2.5rem 0;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #fff;
  text-decoration: none;
}

.page-card {
  background: #fff;
  border: 0;
  border-radius: 1.25rem;
  box-shadow: 0 1.8rem 3.5rem rgba(17, 34, 23, 0.12);
  margin: 0 auto;
  max-width: 720px;
}

.page-card.narrow {
  max-width: 560px;
}

.page-card > .card-body {
  padding: 2.25rem 2.5rem;
}

/* At medium-small widths the container, .site-content and card-body
   paddings stack and squeeze the card; trim them and let it fill the width. */
@media (max-width: 768px) {
  .site-main > .container-xl {
    padding: 1rem 0.5rem;
  }

  .site-main .site-content {
    padding-inline: 0;
  }

  .page-card,
  .page-card.narrow {
    max-width: 100%;
  }

  .page-card > .card-body {
    padding: 1.25rem 1rem;
  }

  .option-card {
    padding: 1.25rem 1rem;
  }
}

.site-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-card fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  position: static;
}

.page-card legend {
  position: static;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(var(--bp-section-heading-rgb, 109, 124, 129), 0.85);
}

.form-section-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
  color: rgba(var(--bp-section-heading-rgb, 109, 124, 129), 1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-grid {
  display: grid;
  gap: 1rem 1.5rem;
}

.form-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.form-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: rgba(33, 51, 43, 0.82);
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-hint {
  font-size: 0.85rem;
  color: rgba(var(--bp-section-heading-rgb), 0.7);
  margin-bottom: 1rem;
}

.lookup-inline {
  display: grid;
  gap: 0.75rem;
}

.lookup-inline .form-group {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .lookup-inline {
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.85rem;
  }
}

.lookup-inline .btn {
  min-width: 11rem;
  justify-self: start;
}

.or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 640px;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(to right, rgba(var(--bp-primary-rgb), 0.05), rgba(var(--bp-primary-rgb), 0.45));
}

.or-divider img {
  display: block;
  width: 62px;
  height: auto;
}

.btn {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--bp-focus);
  outline-offset: 2px;
}

a.link-button,
a.link-button-secondary,
#pageBottom a:not(.btn),
form .form-actions a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.35rem;
  border-radius: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(109, 124, 129, 0.45);
  background-color: #fff;
  color: rgba(var(--bp-secondary-rgb, 109, 124, 129), 0.96);
  box-shadow: 0 0.35rem 0.9rem rgba(18, 33, 25, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.link-button:hover,
a.link-button-secondary:hover,
#pageBottom a:not(.btn):hover,
form .form-actions a:not(.btn):hover,
a.link-button:focus,
a.link-button-secondary:focus,
#pageBottom a:not(.btn):focus,
form .form-actions a:not(.btn):focus {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1.2rem rgba(18, 33, 25, 0.12);
  border-color: rgba(var(--bp-primary-rgb), 0.45);
  color: rgba(var(--bp-primary-rgb), 0.95);
}

a.link-button-primary {
  background-color: var(--bp-primary);
  border-color: var(--bp-primary);
  color: #fff;
}

a.link-button-primary:hover,
a.link-button-primary:focus {
  background-color: color-mix(in srgb, var(--bp-primary) 92%, #000);
  border-color: color-mix(in srgb, var(--bp-primary) 86%, #000);
  color: #fff;
}

a.link-button-secondary,
#pageBottom a:not(.btn),
form .form-actions a:not(.btn) {
  background-color: #fff;
}

a.link-button:focus-visible,
a.link-button-secondary:focus-visible,
a.link-button-primary:focus-visible,
#pageBottom a:not(.btn):focus-visible,
form .form-actions a:not(.btn):focus-visible {
  outline: 2px solid var(--bp-focus);
  outline-offset: 2px;
}

a.link-button:disabled,
a.link-button-secondary:disabled,
a.link-button-primary:disabled,
#pageBottom a:not(.btn):disabled,
form .form-actions a:not(.btn):disabled {
  opacity: 0.6;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button:not(.btn) {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  border-radius: var(--bs-border-radius);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bp-primary);
  background-color: var(--bp-primary);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:not(.btn):hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
button:not(.btn):focus {
  background-color: color-mix(in srgb, var(--bp-primary) 85%, #000);
  border-color: color-mix(in srgb, var(--bp-primary) 70%, #000);
  outline: none;
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
button:not(.btn):focus-visible {
  outline: 2px solid var(--bp-focus);
  outline-offset: 2px;
}

input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button:not(.btn):disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.schedule_box {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(var(--bp-primary-rgb), 0.14);
  border-radius: 1rem;
  background: radial-gradient(circle at top, rgba(var(--bp-primary-rgb), 0.07), transparent 65%), #fff;
  box-shadow: 0 0.65rem 1.6rem rgba(21, 45, 32, 0.1);
}

.datepicker-field {
  display: inline-flex;
  align-items: stretch;
  gap: 0.35rem;
}

.active-permits-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.active-permits-filter-quick,
.active-permits-filter-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Keep each "from:" / "to:" label on the same line as its input and
   calendar button; the pair wraps as a unit. */
.date-filter-item {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.datepicker-field .date,
.datepicker-field input[type="text"] {
  min-width: 10ch;
}

.datepicker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(var(--bp-border-rgb, 213, 219, 216), 0.85);
  background-color: #fff;
  color: rgba(var(--bp-primary-rgb, 59, 102, 66), 0.9);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.datepicker-trigger:hover,
.datepicker-trigger:focus {
  color: rgba(var(--bp-primary-rgb, 59, 102, 66), 1);
  border-color: rgba(var(--bp-primary-rgb, 59, 102, 66), 0.55);
  background-color: rgba(var(--bp-primary-rgb, 59, 102, 66), 0.08);
  box-shadow: 0 0.3rem 0.8rem rgba(17, 34, 23, 0.12);
}

.datepicker-trigger:focus-visible {
  outline: 2px solid var(--bp-focus);
  outline-offset: 2px;
}

.datepicker-trigger svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  display: block;
}

/* Flatpickr calendar — brand overrides on top of the vendored library's own
   CSS (real classnames/DOM, not the hand-rolled picker's invented ones). */
.flatpickr-calendar {
  border-radius: 0.85rem;
  border: 1px solid rgba(var(--bp-border-rgb, 213, 219, 216), 0.7);
  box-shadow: 0 1.25rem 2.5rem rgba(20, 38, 28, 0.18);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--bp-primary, #3b6642);
}

.flatpickr-months .flatpickr-prev-month:focus-visible,
.flatpickr-months .flatpickr-next-month:focus-visible {
  outline: 2px solid var(--bp-focus);
  outline-offset: 2px;
}

.flatpickr-day:hover,
.flatpickr-day:focus-visible {
  background: rgba(var(--bp-primary-rgb, 59, 102, 66), 0.18);
  border-color: rgba(var(--bp-primary-rgb, 59, 102, 66), 0.25);
  outline: none;
}

.flatpickr-day.today {
  border-color: rgba(var(--bp-accent-rgb, 208, 170, 73), 0.8);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus-visible {
  background: rgba(var(--bp-accent-rgb, 208, 170, 73), 0.3);
  border-color: rgba(var(--bp-accent-rgb, 208, 170, 73), 0.8);
  color: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus-visible {
  background: var(--bp-primary, #3b6642);
  border-color: var(--bp-primary, #3b6642);
  color: #fff;
}

.schedule_box .schedule-box-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.schedule_box .schedule-box-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: rgba(var(--bp-primary-rgb), 0.95);
}

.schedule_box .schedule-box-toggle input {
  margin: 0;
}

.schedule_box .schedule-box-label {
  font-weight: 600;
  color: rgba(33, 51, 43, 0.82);
}

.schedule_box .schedule-box-date {
  width: 8.5rem;
  max-width: 100%;
}

.schedule_box .schedule-box-note {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: rgba(var(--bp-primary-rgb), 0.72);
  line-height: 1.5;
}

.radio-stack {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.form-subheading {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(33, 51, 43, 0.82);
  margin: 1.5rem 0 0.75rem;
}

.radio-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(var(--bp-primary-rgb), 0.18);
  border-radius: 0.9rem;
  background-color: #fff;
  box-shadow: 0 0.45rem 1.2rem rgba(15, 32, 23, 0.08);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.radio-chip:hover,
.radio-chip:focus-within {
  border-color: rgba(var(--bp-primary-rgb), 0.35);
  box-shadow: 0 0.6rem 1.4rem rgba(15, 32, 23, 0.12);
}

.radio-chip input {
  margin-top: 0.35rem;
}

.radio-chip-title {
  font-weight: 600;
  color: rgba(33, 51, 43, 0.88);
}

.form-divider {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(33, 51, 43, 0.56);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.5rem 0 1rem;
}

.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--bp-primary-rgb), 0.25));
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.checkbox-grid-card {
  margin-top: 0.85rem;
  border: 1px solid rgba(var(--bp-primary-rgb), 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0.75rem 1.8rem rgba(21, 36, 28, 0.12);
  padding: 1.1rem 1.25rem 1.35rem;
}

.checkbox-grid-card .checkbox-grid {
  margin: 0;
  gap: 0.55rem 0.9rem;
}

.checkbox-grid-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-grid-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(var(--bp-border-rgb), 0.9);
  border-radius: 0.65rem;
  background: rgba(var(--bp-primary-rgb), 0.04);
  font-weight: 600;
  color: rgba(33, 51, 43, 0.88);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.checkbox-grid-label:hover,
.checkbox-grid-label:focus-within {
  border-color: rgba(var(--bp-primary-rgb), 0.5);
  background: rgba(var(--bp-primary-rgb), 0.13);
  box-shadow: 0 0.55rem 1.2rem rgba(18, 33, 25, 0.08);
}

.checkbox-grid-input {
  margin-top: 0.25rem;
}

.checkbox-grid-body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.checkbox-grid-title {
  font-size: 0.98rem;
}

.checkbox-grid-meta {
  font-size: 0.8rem;
  color: rgba(33, 51, 43, 0.56);
}

.restriction-card {
  border: 1px solid rgba(var(--bp-primary-rgb), 0.12);
  border-radius: 0.85rem;
  background: rgba(var(--bp-primary-rgb), 0.06);
  padding: 1rem 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.restriction-card-note {
  font-size: 0.9rem;
  color: rgba(33, 51, 43, 0.7);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

.restriction-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem 1.1rem;
  align-items: end;
}

.restriction-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(33, 51, 43, 0.78);
}

.restriction-select {
  width: 100%;
}

.restriction-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: rgba(33, 51, 43, 0.78);
  margin-bottom: 0.85rem;
}

.restriction-radio input {
  margin: 0;
}

.checkbox-grid + .schedule_box {
  margin-top: 1.5rem;
}

.activation-warning-preview {
  margin: 0.75rem 0 1.25rem 2rem;
  padding: 0.85rem 1.15rem;
  border-left: 4px solid var(--bp-accent);
  background: color-mix(in srgb, rgba(var(--bp-accent-rgb), 0.12) 70%, #fff);
  color: rgba(33, 51, 43, 0.78);
  border-radius: 0.65rem;
  box-shadow: 0 0.4rem 1rem rgba(18, 33, 25, 0.08);
}

.table-modern-wrapper {
  margin-top: 1.25rem;
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 1.25rem 2.4rem rgba(21, 36, 28, 0.12);
}

.table-modern {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

.table-modern thead th {
  background: linear-gradient(to bottom, rgba(var(--bp-primary-rgb), 0.12), rgba(var(--bp-primary-rgb), 0.08));
  color: rgba(var(--bp-primary-rgb), 0.9);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.table-modern thead th a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.table-modern thead th a:hover,
.table-modern thead th a:focus {
  color: inherit;
  text-decoration: underline;
}

.table-modern th,
.table-modern td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(var(--bp-border-rgb), 1);
  vertical-align: top;
  text-align: left;
}

.table-modern tbody tr:nth-child(odd) {
  background-color: rgba(var(--bp-primary-rgb), 0.03);
}

.table-modern tbody tr:hover {
  background-color: rgba(var(--bp-primary-rgb), 0.08);
}

.table-modern td:first-child,
.table-modern th:first-child {
  width: 12rem;
}

.table-subtext {
  display: block;
  font-size: 0.8rem;
  color: rgba(33, 51, 43, 0.55);
}

.table-modern-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: rgba(33, 51, 43, 0.82);
}

.table-modern-status img,
.status-flame {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
}

fieldset {
  position: relative;
  border: 1px solid rgba(var(--bp-primary-rgb), 0.08);
  border-radius: 1.15rem;
  padding: 2.35rem 1.8rem 1.6rem;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1.1rem 2.3rem rgba(18, 31, 24, 0.06);
  margin: 0 0 2rem;
}

legend {
  display: block;
  width: auto;
  margin: 0 0 1rem;
  border: 0;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  position: absolute;
  top: -0.8rem;
  left: 1.85rem;
  transform: none;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(var(--bp-section-heading-rgb), 0.85);
  padding: 0.2rem 0.85rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.25rem 0.7rem rgba(18, 31, 24, 0.08);
}

legend + * {
  margin-top: 0.4rem;
}

/* a_update_county_config.tmpl's fieldsets carry Bootstrap's own .card
   spacing (mb-4 between fieldsets, the page's h2.mb-3 above the first),
   which the legend's -0.8rem float then eats into -- leaving 3-4px between
   the pill and whatever precedes it instead of a real gap. Cancel the
   float for this one legend/fieldset combo rather than touching the
   shared bare legend rule other still-legacy pages rely on. */
legend.card-header {
  margin-top: 0.8rem;
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.form-actions .btn {
  min-width: 14rem;
}

.form-select {
  border-radius: 0.85rem;
  border: 1px solid var(--bp-border);
  padding: 0.85rem 1rem;
  font-size: 1rem;
  line-height: 1.15;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  background-color: #fff;
  color: var(--bs-body-color);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233b6642' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 0.75rem;
  background-position: calc(100% - 1.1rem) 50%;
  padding-right: 2.4rem;
}

.form-select:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.45);
}

.form-select:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.2);
  background-color: #fff;
  color: var(--bs-body-color);
}

.form-select option,
.form-select optgroup {
  background-color: #fff;
  color: var(--bs-body-color);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.form-select option:checked,
.form-select option:focus {
  background-color: rgba(var(--bp-primary-rgb), 0.18);
  color: var(--bp-primary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
  border: 1px solid var(--bp-border);
  border-radius: 0.75rem;
  padding: 0.7rem 0.95rem;
  font-size: 1rem;
  line-height: 1.4;
  background-color: #fff;
  color: var(--bs-body-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.2);
  outline: none;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.site-form-actions {
  margin-top: 0.5rem;
}

.header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 56px;
  background-color: var(--bp-bg);
  border-bottom: 1px solid var(--bp-border);
  padding-inline: 1.25rem;
}

.header-nav-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Primary nav: inline beside the county identity from 768px up; below that
   the links collapse behind a toggle (Bootstrap collapse) and open as a
   stacked list under the identity row. */
.header-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(var(--bp-primary-rgb), 0.35);
  border-radius: 0.5rem;
  color: var(--bp-primary);
}

.header-nav-toggle:hover,
.header-nav-toggle:focus-visible,
.header-nav-toggle[aria-expanded="true"] {
  background: rgba(var(--bp-primary-rgb), 0.08);
}

.header-nav-toggle-icon {
  width: 22px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

@media (max-width: 767.98px) {
  .header-nav {
    padding-block: 0.5rem;
    flex-wrap: wrap;
  }

  .county-identity {
    flex: 1 1 0;
    min-width: 0;
  }

  .header-nav-toggle {
    display: inline-flex;
  }

  .header-nav > .header-nav-collapse {
    flex: 1 0 100%;
  }

  .header-nav-list {
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.25rem;
  }

  .header-nav-list a {
    display: block;
    padding: 0.7rem 0.25rem;
    border-top: 1px solid var(--bp-border);
  }
}

@media (min-width: 768px) {
  .header-nav > .header-nav-collapse.collapse:not(.show) {
    display: block;
  }
}

/* Static nav (no collapse toggle), e.g. the generic error page: stays a
   right-aligned row at every width instead of the stacked mobile list. */
.header-nav-simple .header-nav-list {
  flex-direction: row;
  padding-bottom: 0;
}

.header-nav-simple .header-nav-list a {
  display: inline;
  padding: 0;
  border-top: 0;
}

.header-nav-list a {
  color: var(--bp-primary);
  text-decoration: none;
}

.header-nav-list a:hover,
.header-nav-list a:focus {
  color: var(--bp-focus);
}

.header-nav-admin-label {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bp-primary);
}

.header-nav-end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-header-actions {
  display: flex;
  gap: 0.5rem;
}

.admin-header-actions .btn-group {
  display: inline-flex;
  gap: 0.5rem;
}

.admin-header-actions .btn {
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  border-radius: 0.75rem;
}

/* Narrow screens: identity gets its own row; the Administration label and
   the Main Menu / Logout buttons share a second row beneath it. */
@media (max-width: 575.98px) {
  .header-nav > .header-nav-end {
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bp-border);
  }

  .header-nav-end .admin-header-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .admin-header-actions .btn-group {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .admin-header-actions .btn {
    flex: 1 1 0;
    max-width: 8.5rem;
    white-space: nowrap;
    padding-block: 0.45rem;
  }
}

.admin-header-actions .btn-outline-primary,
.admin-header-actions .btn-outline-secondary {
  border-color: rgba(var(--bp-primary-rgb), 0.35);
  background-color: transparent;
  color: var(--bp-primary);
}

.admin-header-actions .btn-outline-primary:hover,
.admin-header-actions .btn-outline-primary:focus,
.admin-header-actions .btn-outline-secondary:hover,
.admin-header-actions .btn-outline-secondary:focus {
  color: #fff;
  background-color: var(--bp-primary);
  border-color: var(--bp-primary);
}

.topMessage {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--bp-surface);
  border-left: 4px solid var(--bp-accent);
  border-right: 1px solid var(--bp-border);
  border-top: 1px solid var(--bp-border);
  border-bottom: 1px solid var(--bp-border);
  color: var(--bs-body-color);
  font-weight: 500;
}

.option-card {
  border: 1px solid var(--bp-border);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  margin-top: 1.5rem;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(15, 34, 26, 0.08);
}

.option-card legend {
  margin-bottom: 1rem;
}

.option-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (min-width: 1020px) {
  .option-card-body.option-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.option-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bp-border);
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 0.35rem 0.9rem rgba(18, 33, 25, 0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.option-choice:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.5);
}

.option-choice:has(.option-choice-input:checked) {
  border-color: var(--bp-primary);
  background-color: rgba(var(--bp-primary-rgb), 0.06);
  box-shadow: 0 0.5rem 1.1rem rgba(var(--bp-primary-rgb), 0.2);
}

.option-choice:has(.option-choice-input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.option-choice:has(.option-choice-input:disabled):hover {
  border-color: var(--bp-border);
}

.option-choice-input {
  position: absolute;
  opacity: 0;
}

.option-choice-indicator {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bp-border);
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.option-choice-input:checked + .option-choice-indicator,
.option-choice-input:focus-visible + .option-choice-indicator {
  border-color: var(--bp-primary);
  background: var(--bp-primary);
  box-shadow: inset 0 0 0 4px #fff;
}

.option-choice-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
}

.option-choice-title {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2f27;
}

.option-choice-detail {
  font-size: 0.9rem;
  color: rgba(33, 51, 43, 0.8);
}

/* Option-card forms (admin main menu, etc.) on phones: the container, grid
   gutter, outer card and option card each add horizontal padding, which
   squeezes the choices into about two thirds of the screen. Strip the
   stacked gutters so the choices run nearly edge to edge. */
@media (max-width: 575.98px) {
  .container-xl:has(> .row > [class*="col-"] > .option-card-form) {
    padding-inline: 0.25rem;
  }

  .row:has(> [class*="col-"] > .option-card-form) {
    --bs-gutter-x: 0;
  }

  .option-card-form > .card > .card-body {
    padding: 1rem 0.5rem;
  }

  .option-card-form .option-card {
    padding: 1rem 0.5rem;
    margin-inline: 0;
  }

  .option-card-form .option-choice {
    padding: 0.85rem 0.75rem;
  }
}

.option-card .option-choice-input:checked + .option-choice-indicator + .option-choice-body {
  color: var(--bp-primary);
}

.option-choice-input:focus-visible + .option-choice-indicator + .option-choice-body {
  outline: 2px solid var(--bp-focus);
  outline-offset: 4px;
  border-radius: 0.8rem;
}

.option-card.small-grid .option-choice {
  flex-wrap: wrap;
}

.option-card.compact {
  padding: 1rem;
}

.option-card-body.compact-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.option-choice.compact {
  padding: 0.75rem 0.9rem;
  gap: 0.65rem;
}

.option-choice.compact .option-choice-title {
  font-size: 1rem;
}

#pageBottom {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
}

#pageBottom input[type="submit"] {
  min-width: 12rem;
}

.btn-primary,
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bp-primary);
  --bs-btn-border-color: var(--bp-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bp-primary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bp-primary) 70%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bp-primary) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bp-primary) 55%, #000);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bp-secondary);
  --bs-btn-border-color: var(--bp-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bp-secondary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bp-secondary) 70%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bp-secondary) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bp-secondary) 55%, #000);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bp-info);
  --bs-btn-border-color: var(--bp-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bp-info) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bp-info) 70%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bp-info) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bp-info) 55%, #000);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bp-danger);
  --bs-btn-border-color: var(--bp-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bp-danger) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bp-danger) 70%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bp-danger) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bp-danger) 55%, #000);
}

.btn-outline-primary {
  --bs-btn-color: var(--bp-primary);
  --bs-btn-border-color: var(--bp-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bp-primary);
  --bs-btn-hover-border-color: var(--bp-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bp-primary);
  --bs-btn-active-border-color: var(--bp-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bp-secondary);
  --bs-btn-border-color: var(--bp-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bp-secondary);
  --bs-btn-hover-border-color: var(--bp-secondary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bp-secondary);
  --bs-btn-active-border-color: var(--bp-secondary);
}

.form-control {
  border: 1px solid var(--bp-border);
  border-radius: 0.75rem;
  box-shadow: none;
  background-color: #fff;
}

.form-control:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.25);
}

.form-check-input {
  border: 1px solid var(--bp-border);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--bp-primary);
  border-color: var(--bp-primary);
}

.alert {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  color: var(--bs-body-color);
}

.alert-info {
  background-color: #e9f1f8;
  border-color: var(--bp-info);
}

.alert-warning {
  background-color: #fcf8e3;
  border-color: var(--bp-accent);
}

.alert-danger {
  background-color: #f8e9e7;
  border-color: var(--bp-danger);
}
.checkbox-fieldset {
  border: 1px solid var(--bp-border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0 0;
  background: #fff;
  box-shadow: 0 0.75rem 1.8rem rgba(17, 34, 23, 0.08);
}

.checkbox-fieldset legend {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0 0.5rem;
  margin: 0 0 5px 0;
}

.checkbox-card-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checkbox-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bp-border);
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 0.35rem 0.9rem rgba(18, 33, 25, 0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.checkbox-card:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.5);
  transform: translateY(-1px);
}

.checkbox-card-input {
  position: absolute;
  opacity: 0;
}

.checkbox-card-indicator {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.35rem;
  border: 2px solid var(--bp-border);
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
  margin-top: 0.2rem;
}

.checkbox-card-input:checked + .checkbox-card-indicator {
  border-color: var(--bp-primary);
  background: var(--bp-primary);
  box-shadow: inset 0 0 0 0.15rem #fff;
}

.checkbox-card-input:focus-visible + .checkbox-card-indicator {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.35);
}

.checkbox-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
}

.checkbox-card-title {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #1f2f27;
}

.checkbox-card-detail {
  font-size: 0.9rem;
  color: rgba(33, 51, 43, 0.8);
}

.checkbox-card-input:checked + .checkbox-card-indicator + .checkbox-card-body {
  color: var(--bp-primary);
}

.checkbox-card-input:focus-visible + .checkbox-card-indicator + .checkbox-card-body {
  outline: 2px solid var(--bp-focus);
  outline-offset: 4px;
  border-radius: 0.8rem;
}

@media (min-width: 1020px) {
  .checkbox-card-group.checkbox-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Lat/long map picker: status line under the map, and the brief highlight
   on the page's field after a location is chosen. */
.latlong-readout {
  min-height: 1.5rem;
  font-size: 0.95rem;
  color: rgba(33, 51, 43, 0.8);
}

.latlong-readout.is-selected {
  color: var(--bp-primary);
  font-weight: 600;
}

.latlong-flash {
  animation: latlong-flash 1.6s ease-out;
}

@keyframes latlong-flash {
  0%, 40% {
    background-color: rgba(var(--bp-primary-rgb), 0.18);
    box-shadow: 0 0 0 0.25rem rgba(var(--bp-primary-rgb), 0.35);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(var(--bp-primary-rgb), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .latlong-flash {
    animation: none;
    background-color: rgba(var(--bp-primary-rgb), 0.18);
  }
}

/* Terms and conditions: acknowledgment + agreement + actions read as one
   left-aligned block under the terms card, instead of a centered line, a
   left sentence and right-hand buttons. Buttons stack full-width on narrow
   screens with the primary action first and Cancel last. */
.terms-acknowledgment {
  margin: 1.5rem 0 0.75rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
}

.agree-statement {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

.agree-block {
  margin-top: 0;
}

.agree-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.agree-actions-primary {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
}

.agree-actions .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .agree-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .agree-actions-primary {
    flex-direction: row;
    gap: 0.75rem;
  }

  .agree-actions .btn {
    width: auto;
    min-width: 7.5rem;
  }
}

/* Terms quiz answers (terms_quiz_*_N.tmpl): the site's .form-check radios as
   subtle, full-width rows so each answer is an easy target, with the question
   above in a heavier weight. */
fieldset p:has(+ .quiz-options),
fieldset p:has(+ form) {
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
}

.quiz-options {
  margin-bottom: 0.75rem;
}

.quiz-options .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.quiz-options .form-check-input {
  float: none;
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

.quiz-options .form-check-label {
  flex: 1 1 auto;
  cursor: pointer;
}

.quiz-options .form-check:hover {
  background-color: rgba(var(--bp-primary-rgb), 0.05);
}

.quiz-options .form-check:has(.form-check-input:checked) {
  background-color: rgba(var(--bp-primary-rgb), 0.08);
  border-color: rgba(var(--bp-primary-rgb), 0.25);
}

.quiz-options .form-check:has(.form-check-input:focus-visible) {
  border-color: var(--bp-focus);
}

/* Google Maps info windows (active permits maps): the bubble content is
   built in a_gmap_header.tmpl as bare <br>-separated text. Give it the site
   typography and keep the close button from picking up the theme's button
   styling. */
.gm-style .gm-style-iw-c {
  border-radius: 0.85rem;
  padding: 0.9rem 1rem !important;
  box-shadow: 0 0.5rem 1.25rem rgba(15, 34, 26, 0.25);
}

.gm-style .gm-style-iw-d {
  overflow: auto !important;
}

.gm-style .infoWindowStyle {
  display: block;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--bs-body-color);
}

.gm-style .infoWindowStyle + .infoWindowStyle {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bp-border);
}

.gm-style .infoWindowStyle p {
  margin: 0 0 0.35rem;
}

.gm-style button.gm-ui-hover-effect {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0;
  outline: none;
}

.gm-style button.gm-ui-hover-effect:focus-visible {
  outline: 2px solid var(--bp-primary);
  outline-offset: -2px;
  border-radius: 50%;
}

/* Admin active permits list on phones: the 11-column table cannot fit, so
   each activation becomes a stacked card (labels come from the cells'
   data-label). The sortable header row is hidden at this size. Also used
   by the admin search permits results (.search-permits). */
@media (max-width: 767.98px) {
  :is(table.activations-cards, table.search-permits),
  :is(table.activations-cards, table.search-permits) tbody,
  :is(table.activations-cards, table.search-permits) tr,
  :is(table.activations-cards, table.search-permits) td {
    display: block;
    width: 100%;
  }

  :is(table.activations-cards, table.search-permits) {
    border: 0;
  }

  table.search-permits thead {
    display: none;
  }

  :is(table.activations-cards, table.search-permits) tr:first-child:has(th) {
    display: none;
  }

  :is(table.activations-cards, table.search-permits) tr {
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--bp-border);
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(18, 33, 25, 0.08);
  }

  :is(table.activations-cards, table.search-permits) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(var(--bp-primary-rgb), 0.08);
    text-align: right;
  }

  :is(table.activations-cards, table.search-permits) td a {
    white-space: nowrap;
  }

  :is(table.activations-cards, table.search-permits) td:last-child {
    border-bottom: 0;
  }

  :is(table.activations-cards, table.search-permits) td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(var(--bp-primary-rgb), 0.85);
    text-align: left;
  }

  :is(table.activations-cards, table.search-permits) td:empty {
    display: none;
  }
}

/* Admin reports form on phones: drop the stacked container/gutter padding
   so the card uses the screen width, and make the submit button full width
   so it is an easy touch target. */
@media (max-width: 575.98px) {
  .container-xl:has(> .row > [class*="col-"] > .report-form) {
    padding-inline: 0.25rem;
  }

  .row:has(> [class*="col-"] > .report-form) {
    --bs-gutter-x: 0;
  }

  .report-form .card-footer .btn {
    width: 100%;
  }
}

/* Phone-width action rows: stack buttons full-width, primary action first. */
@media (max-width: 575.98px) {
  .stacked-actions {
    flex-direction: column-reverse;
  }

  .stacked-actions > .btn,
  .stacked-actions-group {
    width: 100%;
  }

  .stacked-actions-group {
    flex-direction: column-reverse;
    margin-left: 0 !important;
  }

  .stacked-actions .btn {
    width: 100%;
  }
}

/* Variants of the phone-width action row.
   -inorder: keep the written order (safe option first on destructive confirmations).
   -list: a group of secondary links that keeps its written order under the primary action. */
@media (max-width: 575.98px) {
  .stacked-actions-inorder {
    flex-direction: column;
  }

  .stacked-actions-inorder > .btn {
    width: 100%;
  }

  .stacked-actions-list {
    flex-direction: column;
    width: 100%;
  }
}