*,*::before,*::after{box-sizing:border-box;}

body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f2f2f2;color:#222;}
header{background:#003f87;padding:14px 20px;display:flex;align-items:center;}
header img{height:44px;}
nav{margin-left:auto;display:flex;gap:18px;}
nav a{color:#fff;text-decoration:none;font-weight:600;}
nav a:hover{text-decoration:underline;}
main{padding:40px 20px;}
h1,h2{color:#003f87;text-align:center;}
.home-block{max-width:900px;margin:0 auto;text-align:center;}
.home-block p{text-align:justify;text-align-last:center;}
.logo-center{display:flex;justify-content:center;margin:24px 0;}
.logo-center img{width:min(260px,70vw);}
.quick-links{text-align:center;margin-top:16px;}
.quick-links a{color:#003f87;text-decoration:none;font-weight:bold;}
.quick-links a:hover{text-decoration:underline;}
.card{background:#fff;padding:24px;max-width:900px;margin:0 auto 30px;border-radius:14px;}
.disabled{opacity:.5;pointer-events:none;}
.video-frame{background:#fff;padding:16px;border-radius:16px;max-width:900px;margin:20px auto;}
.video-frame video{width:100%;border-radius:12px;}
footer{background:#003f87;color:#fff;text-align:center;padding:20px;font-size:.9rem;position:relative;}

.footer-bottom{display:flex;justify-content:center;gap:10px;align-items:baseline;margin:0;padding:0;}
.footer-version-inline{font-size:.75rem;opacity:.75;}
.footer-copy{font-size:1rem;}
footer a{color:#fff;text-decoration:underline;}
.footer-contact{margin:0 0 10px 0;font-weight:600;}
.lead{font-size:1.05rem;color:#444;}


/* --- iPhone Safari tweaks --- */
header, .site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Ensure some breathing room between logo and first nav item on iPhone Safari */
@media (max-width: 640px){
  header img, .site-header img{
    margin-right: 12px;
  }
  nav, .header-nav{
    padding-left: 6px;
  }
}

/* Video container: no white frame; show poster/first frame cleanly */
.video-frame{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  max-width: 900px;
  margin: 16px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.video-frame video{
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}


/* --- Header spacing fixes (Board clipping) --- */
header, .site-header{
  padding-left: 16px !important;
  padding-right: 16px !important;
}
nav, .header-nav{
  gap: 12px !important;           /* tighter spacing so all titles fit */
  padding-right: 6px !important;  /* keeps last letter from clipping at edge */
}
nav a, .header-nav a{
  padding: 8px 8px !important;    /* slightly tighter link padding */
}

body{overflow-x:hidden;}


/* --- Header rounding + iPhone nav spacing (Board visible) --- */
header, .site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 18px !important;   /* symmetrical */
  border-radius: 18px;             /* rounded both corners */
  overflow: hidden;                /* ensure top-right rounding renders */
  margin: 10px 10px 0 10px;        /* show rounding against page background */
}

/* Keep header full width on larger screens while maintaining rounding look */
@media (min-width: 641px){
  header, .site-header{ margin: 0; border-radius: 0; overflow: visible; }
}

/* Nav: professional spacing, no clipping at right */
nav, .header-nav{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px !important;
  padding-right: 8px !important;   /* breathing room for 'Board' */
}

nav a, .header-nav a{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px !important;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.95rem;
}

/* iPhone: tighten slightly so Board always fits */
@media (max-width: 420px){
  header, .site-header{ padding: 12px 14px !important; }
  nav, .header-nav{ gap: 8px !important; padding-right: 10px !important; }
  nav a, .header-nav a{ padding: 7px 8px !important; font-size: 0.90rem; }
}

/* Smallest phones: allow wrap instead of clipping */
@media (max-width: 360px){
  nav, .header-nav{ flex-wrap: wrap; row-gap: 6px; }
}


/* --- Mobile portrait: keep menu on one line (Board visible) --- */
@media (max-width: 430px){
  nav, .header-nav{
    flex-wrap: nowrap;
    gap: 8px !important;
  }
  nav a, .header-nav a{
    font-size: 0.86rem;
    padding: 6px 6px !important;
  }
}
@media (max-width: 360px){
  nav, .header-nav{
    flex-wrap: wrap; /* last resort on very small devices */
    row-gap: 6px;
  }
}
}


/* --- Extra-tight mobile nav spacing so Board fits --- */
@media (max-width: 430px){
  nav, .header-nav{
    gap: 6px !important;
  }
  nav a, .header-nav a{
    padding: 6px 5px !important;
    font-size: 0.84rem !important;
    letter-spacing: .1px;
  }
}
@media (max-width: 390px){
  nav, .header-nav{ gap: 5px !important; }
  nav a, .header-nav a{ padding: 6px 4px !important; font-size: 0.82rem !important; }
}


/* --- Board bio layout --- */
.bio-card{
  display:flex;
  gap: 18px;
  align-items:flex-start;
}
.bio-photo{
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.bio-content h3{
  margin-top: 12px;
}
.bio-name{
  margin: 0;
}
.bio-title{
  margin-top: 4px;
  font-weight: 700;
  color: #2b2b2b;
}
.simple-list{
  margin: 0;
  padding-left: 18px;
}

  .bio-content{
    width: 100%;
  }
}



/* Bio: center name/title next to photo, keep body text below */
.bio-card{
  display:flex;
  gap: 18px;
  align-items:flex-start;
}
.bio-photo{
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.bio-content{
  flex: 1 1 auto;
  min-width: 0;
}
.bio-header{
  min-height: 160px;          /* match photo height */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* centers name/title vertically */
  margin-bottom: 6px;
}
.bio-name{margin: 0;}
.bio-title{
  margin: 4px 0 0 0;
  font-weight: 800;
  color: #2b2b2b;
}

@media (max-width: 900px){
  .board-list li{ grid-template-columns: 1fr 200px; }
}
@media (max-width: 640px){
  .board-list li{
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  
  .bio-header{
    min-height: auto;
    width: 100%;
    text-align: left;
  }
}


/* --- Board page layout polish --- */
.board-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: grid;
  gap: 10px;
}
.board-list li{
  display: grid;
  grid-template-columns: 1fr 280px; /* fixed title column for neat alignment */
  column-gap: 18px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
}
.bm-name{
  font-weight: 800;
}
.bm-role{
  font-weight: 700;
  color: #2b2b2b;
  text-align: right;            /* aligns titles in a clean column */
  white-space: nowrap;
}

/* Bio: always keep name/title to the RIGHT of the photo (even on phones) */
.bio-card{
  display:flex;
  gap: 16px;
  align-items: flex-start;
}
.bio-photo{
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.bio-content{
  flex: 1 1 auto;
  min-width: 0;
}
.bio-header{
  min-height: 150px;             /* match photo height */
  display: flex;
  align-items: center;           /* vertical center */
  margin-bottom: 8px;
}
.bio-name{
  margin: 0;
}
.bio-title{
  margin: 4px 0 0 0;
  font-weight: 800;
  color: #2b2b2b;
}

/* Responsive tweaks */
@media (max-width: 520px){
  .board-list li{
    grid-template-columns: 1fr 210px;
  }
  .bio-photo{ width: 120px; height: 120px; }
  .bio-header{ min-height: 120px; }
  .bm-role{ font-size: 0.95rem; }
}
@media (max-width: 390px){
  .board-list li{
    grid-template-columns: 1fr 170px;
  }
  .bm-role{ font-size: 0.92rem; }
}


/* === BOARD PAGE FINAL OVERRIDES (do not remove) === */
.board-list{
  list-style:none !important;
  padding:0 !important;
  margin:12px 0 0 0 !important;
  display:grid !important;
  gap:10px !important;
}
.board-list li{
  display:grid !important;
  grid-template-columns: 1fr 260px !important; /* clean aligned title column */
  column-gap: 18px !important;
  align-items:center !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.04) !important;
}
.board-list .bm-name{font-weight:800 !important;}
.board-list .bm-role{
  font-weight:700 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* Keep name + title to the RIGHT of the photo on all screen sizes */
.bio-card{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:16px !important;
}
.bio-photo{
  width:150px !important;
  height:150px !important;
  object-fit:cover !important;
  border-radius:16px !important;
  flex:0 0 auto !important;
}
.bio-content{flex:1 1 auto !important; min-width:0 !important;}
.bio-header{
  min-height:150px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important; /* vertical center */
  margin-bottom:8px !important;
}
.bio-name{margin:0 !important;}
.bio-title{margin:4px 0 0 0 !important; font-weight:800 !important;}

/* Small phones: slightly reduce sizes but KEEP layout in one row */
@media (max-width: 520px){
  .board-list li{ grid-template-columns: 1fr 200px !important; }
  .bio-photo{ width:120px !important; height:120px !important; }
  .bio-header{ min-height:120px !important; }
}
@media (max-width: 390px){
  .board-list li{ grid-template-columns: 1fr 165px !important; }
}


/* === Donate page layout === */
.donate-stack{
  display: grid;
  gap: 16px;
}
.donate-method h2{
  margin-top: 0;
}
.qr-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 10px 0 4px 0;
}
.qr-wrap img{
  width: min(360px, 92%);
  height: auto;
  border-radius: 14px;
}
.paytypes-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 10px 0 2px 0;
}
.paytypes-wrap img{
  width: min(520px, 96%);
  height: auto;
  border-radius: 12px;
}


/* Donate QR links */
.qr-link{
  display:inline-flex;
  border-radius: 14px;
}
.qr-link:hover{
  transform: translateY(-1px);
  transition: transform .12s ease;
}
.qr-link img{ cursor: pointer; }
.muted{ opacity: .75; }

/* Donate page notes */
.donate-notes{
  margin: 10px 0 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
 text-align: left;}
.donate-notes li{ margin: 0; }


/* === Extra nav tightening to prevent Board clipping (phones) === */
@media (max-width: 430px){
  nav, .header-nav{
    gap: 3px !important;
    padding-right: 4px !important;
  }
  nav a, .header-nav a{
    padding: 6px 3px !important;
    font-size: 0.74rem !important;
  }
}
@media (max-width: 390px){
  nav, .header-nav{ gap: 2px !important; }
  nav a, .header-nav a{ padding: 6px 2px !important; font-size: 0.72rem !important; }
}


/* Donate: check address inside top donate box */
.check-intro{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.12);
  text-align: center;
}
.check-intro .check-label{ margin-top: 14px; margin-bottom: 6px; }
.check-intro .check-lines{ margin-top: 0; }
.check-intro .check-org{
  display: inline-block;
  font-weight: 900;
  font-size: 1.18rem;
}


/* === Request page form preview === */
.form-preview h2{ margin-top: 0; }
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.field label{
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
}
.field input, .field select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.65);
  color: #111;
}
.field input:disabled, .field select:disabled{
  opacity: .75;
  cursor: not-allowed;
}
.soft-rule{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.10);
  margin: 18px 0;
}
.type-sections{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.type-card{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}
.type-card.active{
  border-color: rgba(0,63,135,.35);
  background: rgba(0,63,135,.06);
}
.type-card.ghost{
  opacity: .55;
}
.submit-row{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}
.btn.ghosted{
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.28);
  background: rgba(255,255,255,.35);
  font-weight: 900;
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
}


/* === Request page form (construction mode) === */
.request-form{
  margin-top: 14px;
}
.form-section-title{
  margin: 18px 0 10px 0;
  font-size: 1.05rem;
}
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.field{ display:flex; flex-direction:column; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-weight: 800; }
.field input, .field select{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
.field input:disabled, .field select:disabled{
  opacity: .65;
  cursor: not-allowed;
  background: rgba(0,0,0,.03);
}
.hint{
  margin: 8px 0 0 0;
  opacity: .75;
  font-size: .95rem;
}
.type-fields{
  display:none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.10);
}
.type-fields.is-active{ display:block; }
.type-title{ margin: 0 0 10px 0; }
.submit-row{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}
.btn.ghost{
  opacity: .55;
  filter: grayscale(1);
  cursor: not-allowed;
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
}


/* Request page council line */
.council-line{
  margin: 6px 0 0 0;
  text-align: center;
  font-weight: 900;
  font-size: 1.15rem;
}

/* Request page construction note */
.construction-note{
  color: #b00020;
  font-weight: 900;
  font-size: 1.15rem;
}


.section-sep{
  margin: 18px 0 6px 0;
  border-top: 3px solid #003F87;
}

/* Request: textarea and word counter */
.request-form textarea{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  resize: vertical;
}
.word-count{
  margin: 4px 0 0 0;
  font-size: .9rem;
  opacity: .75;
}
.other-inline{ margin-top: 10px; }
#summerCampOtherWrap{ display:none; }

/* SVG headshots should behave like images */
.bio-photo{ object-fit: cover; background: #fff; }

/* Board note under list */
.board-note{
  margin: 12px 0 0 0;
  font-size: 0.98rem;
  opacity: 0.9;
  text-align: center;
}

/* Footer privacy statement */
.privacy-note{
  margin: 0 0 12px 0;
  font-size: 0.92rem;
  opacity: 0.85;
  line-height: 1.35;
}

/* Donate bullets */
.donate-bullets{
  margin: 12px 0 6px 18px;
}
.donate-bullets li{
  margin: 6px 0;
}

/* Donate: keep payment method strip contained */
.payment-types{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto 0 auto;
}

/* Donate: thank-you line above bullets */
.donate-thanks{
  text-align: center;
  margin: 8px 0 10px 0;
  font-size: 1.12rem;
}

/* Board bios: header row then full-width body */
.bio-card{
  display: block;
}
.bio-top{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
}
.bio-toptext .bio-header{
  margin: 0;
}
.bio-body{
  margin-top: 14px;
}

/* === Board bio layout fix === */
.bio-card{ display:block; }
.bio-top{
  display:flex;
  gap:18px;
  align-items:center;
}
.bio-top .bio-header{
  margin:0;
  text-align:left;
}
.bio-body{
  margin-top:14px;
}
@media (max-width: 520px){
  .bio-top{
    gap:14px;
  }
  .bio-photo{
    width:90px;
    height:90px;
  }
}

/* === Board bio layout: body under photo + header === */
.bio-card{
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-template-areas:
    "photo header"
    "body  body";
  column-gap: 18px;
  row-gap: 14px;
  align-items: center;
}
.bio-card .bio-photo{
  grid-area: photo;
}
.bio-card .bio-header{
  grid-area: header;
  margin: 0;
  text-align: left;
}
.bio-card .bio-body{
  grid-area: body;
}
@media (max-width: 520px){
  .bio-card{
    grid-template-columns: 90px 1fr;
    column-gap: 14px;
  }
  .bio-card .bio-photo{
    width: 90px;
    height: 90px;
  }
}

/* === FORCE board bio layout (photo + header row, body full-width) === */
.card.bio-card{
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 14px !important;
  align-items: center !important;
}
.card.bio-card > .bio-photo{
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.card.bio-card > .bio-header{
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  text-align: left !important;
}
.card.bio-card > .bio-body{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}
@media (max-width: 520px){
  .card.bio-card{
    grid-template-columns: 120px 1fr !important;
    column-gap: 14px !important;
  }
  .card.bio-card > .bio-photo{
    width: 100px !important;
    height: 100px !important;
  }
}

/* About dropdown (clickable) */
nav .nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

nav .nav-dropdown .about-link{
  padding-right: 0;
}

nav .nav-dropdown .dropdown-toggle{
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1;
}

nav .nav-dropdown .dropdown-toggle:hover{
  background: rgba(255,255,255,0.12);
}

nav .nav-dropdown .dropdown-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  padding: 10px;
  display: none;
  z-index: 2000;
}

nav .nav-dropdown .dropdown-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
  color: #0b2c4a;
  text-decoration: none;
  font-weight: 700;
}

nav .nav-dropdown .dropdown-menu a:hover{
  background: rgba(3, 70, 140, .10);
}

nav .nav-dropdown.open .dropdown-menu{ display: block; }

@media (hover:hover){
  nav .nav-dropdown:hover .dropdown-menu{ display: block; }
}

/* About landing grid */
.about-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.about-tile{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
}
.about-tile h3{ margin:0; font-size: 1.05rem; color:#03468c; }
.about-tile p{ margin:0; color:#223; opacity:.9; line-height:1.35; }
.about-tile:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.08); }

@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  nav{ gap: 10px; }
  nav a{ padding-left: 10px; padding-right: 10px; }
  nav .nav-dropdown .dropdown-menu{ min-width: 200px; }
}


/* Request form spacer cell */
.field.spacer{ visibility:hidden; }


/* Excel dropdown reload button */
.reload-dropdowns{
  display:inline-block;
  margin: 10px 0 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #ffffff;
  font-weight: 700;
  cursor: pointer;
}
.reload-dropdowns:disabled{
  opacity: .6;
  cursor: default;
}

.amount-help{
  display:block;
  margin-top: 6px;
  opacity: 0.8;
  font-size: 0.95em;
}


/* Highlight request amount when outside min/max */
.amount-out-of-range{
  border: 2px solid #c1121f !important;
  box-shadow: 0 0 0 4px rgba(193,18,31,0.15) !important;
  background: rgba(193,18,31,0.06) !important;
}


/* Test mode toggle (request page) */
.test-toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #ffffff;
  vertical-align: middle;
}
.test-toggle-label{
  font-weight: 700;
  opacity: 0.85;
}
.test-toggle-btn{
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  font-weight: 800;
  cursor: pointer;
  min-width: 56px;
}
.test-toggle.is-on .test-toggle-btn{
  background: rgba(0, 120, 255, 0.12);
  border-color: rgba(0, 120, 255, 0.35);
}

/* --- Form validation --- */
.error-msg{margin-top:6px;font-size:.92rem;color:#b00020;}
.field.error input,.field.error select,.form-field.error input,.form-field.error select{
  border-color:#b00020 !important;
  box-shadow:0 0 0 3px rgba(176,0,32,.12) !important;
}

/* Header tools */
.header-tools{display:flex;align-items:center;gap:10px;margin-left:14px;flex:0 0 auto;}
.header-tools select{
  border-radius:10px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  color:#fff;
}
.header-tools select option{color:#000;}
.header-tools label{color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px;}
.header-tools input[type="checkbox"]{width:16px;height:16px;}
.header-tools button{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-weight:700;
}
.header-tools button:active{transform:translateY(1px);}
@media (max-width:640px){
  nav{gap:10px;}
  .header-tools{gap:8px;margin-left:10px;}
  .header-tools button{padding:6px 8px;}
}

/* --- Request page bottom controls --- */
.bottom-controls{
  position: sticky;
  bottom: 0;
  z-index: 999;
  background: rgba(242,242,242,.98);
  backdrop-filter: blur(6px);
  border-top: 2px solid rgba(0,0,0,.14);
  padding: 10px 12px;
  margin-top: 18px;
}
.bottom-controls .bc-inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.bottom-controls .bc-group{
  display:flex;
  align-items:center;
  gap: 10px;
}
.bottom-controls label{
  font-weight: 800;
  color:#003f87;
}
#requestReloadSelect{
  border-radius: 10px;
  padding: 8px 10px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
}
.bc-toggle input{width:16px;height:16px;}
@media (max-width: 640px){
  .bottom-controls .bc-inner{flex-direction:column; align-items:stretch;}
  .bottom-controls .bc-group{justify-content:space-between;}
}

/* One-click reload button */
.bottom-controls #reloadDropdownsBtn{
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  border-radius:10px;
  padding:7px 10px;
  font-weight:700;
  cursor:pointer;
}
.bottom-controls #reloadDropdownsBtn:disabled{opacity:.65;cursor:not-allowed;}

/* Larger error border (requested) */
.field.error input, .field.error select,
.form-field.error input, .form-field.error select,
input.error, select.error,
input.invalid, select.invalid {
  border-width: 4px !important;
}


/* Ensure textarea shows red border when its field wrapper is in error */
.field.error textarea,
.form-field.error textarea,
textarea.error,
textarea.invalid {
  border: 3px solid #d32f2f !important;
}

/* Request key display (next to Reload button) */
.request-key{
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  white-space: nowrap;
}
.request-key-label{
  font-weight: 600;
  opacity: 0.85;
}
#requestKey{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Modal (Acknowledgment on Submit) */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
}
.modal-overlay.is-open{ display: flex; }
.modal{
  width: min(560px, 100%);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}
.modal-header{
  padding: 16px 18px 10px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.modal-header h3{
  margin: 0;
  font-size: 1.1rem;
}
.modal-body{
  padding: 14px 18px 6px 18px;
}
.modal-body p{
  margin: 0;
  line-height: 1.35;
}
.modal-actions{
  padding: 12px 18px 16px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}


/* Thank-you overlay shown after Accept Submit */
.thankyou-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.thankyou-overlay.is-open{ display: flex; }
.thankyou-card{
  background: #fff;
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.thankyou-title{ font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.thankyou-text{ font-size: 16px; margin-bottom: 6px; }
.thankyou-subtext{ font-size: 13px; opacity: 0.8; }


/* === Submit button enabled state (Request page) === */
.btn.primary{
  background: #0b3d2e; /* dark green */
  color: #ffffff;
  border: 1px solid rgba(0,0,0,.15);

  /* Override any "ghost" styling when the button is enabled */
  opacity: 1;
  filter: none;
  cursor: pointer;
}
.btn.primary.submit-big{
  /* ~50% larger for iPhone readability */
  padding: 16px 22px;
  font-size: 1.1rem;
  border-radius: 18px;
}
.btn.primary:hover{
  filter: brightness(0.95);
}
.btn.primary:disabled{
  background: rgba(11,61,46,.45);
  color: rgba(255,255,255,.85);
}

/* Thank-you overlay Request Key line */
.thankyou-key{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.25;
}
.thankyou-key-note{
  font-size: 0.9rem;
  opacity: 0.9;
}


/* Acknowledgment modal Request Key line */
.ack-key{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.25;
}
.ack-key-note{
  font-size: 0.9rem;
  opacity: 0.9;
}