/* =========================================================
   AIKEN COUNTY GOP — PRODUCTION CSS (ORGANIZED)
   Refactor-only: preserves existing visuals/behavior.
   Consolidated, de-duplicated, and WA-defensive.

   WA NOTES / RULES OF ENGAGEMENT
   - WA uses table-based layouts + inline styles; prefer ID pinning for quirks.
   - Avoid relying on pageId selectors; they can be brittle. Prefer gadget IDs.
   - Keep “HOTFIXES” at the end so they win against WA template/inline CSS.
   ========================================================= */


/* =========================================================
   0) GLOBAL UTILITIES & NORMALIZATION
   ========================================================= */

/* Global button rounding (covers WA button gadget variants + common form buttons)
   NOTE: nextButton is styled separately (Join Us wizard). */
.stylizedButton,
[class*="buttonStyle"],
input[type="submit"]:not(.nextButton),
input[type="button"],
button{
  border-radius: 10px !important;
}

/* Remove unwanted placeholder padding (site-wide layout control) */
.WaPlaceHolder > div{
  padding: 0 !important;
}


/* =========================================================
   1) HEADER / SECTION DECORATION
   ========================================================= */

/* Disable divider when Header3 contains Elections tiles */
.WaPlaceHolderHeader3:has(.ElectionsTile){
  border-bottom: none !important;
}

/* Center subheadline text inside hero overlay (WA inline z-index layer) */
.zoneHeader3 div[style*="z-index: 105"]{
  text-align: center !important;
}


/* =========================================================
   2) HERO OVERLAYS (CANONICAL)
   Home hero:        #id_VBXo1pm
   About/Elect/Vol:  #id_4lxp9LH
   NOTE: background-image lives on these wrapper gadgets.
   ========================================================= */

#id_VBXo1pm,
#id_4lxp9LH{
  position: relative !important;
  overflow: hidden !important; /* keep overlay clipped to hero bounds */
}

/* Unified dark overlay */
#id_VBXo1pm::before,
#id_4lxp9LH::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.40) !important; /* matches Home look */
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Keep all hero content above overlay */
#id_VBXo1pm > *,
#id_4lxp9LH > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Text readability (consistent) */
#id_VBXo1pm h1,
#id_VBXo1pm h2,
#id_VBXo1pm p,
#id_VBXo1pm a,
#id_4lxp9LH h1,
#id_4lxp9LH h2,
#id_4lxp9LH p,
#id_4lxp9LH a{
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}

/* WA table-based hero: keep full height alignment on desktop */
#id_VBXo1pm table{
  height: 100%;
}

/* Home hero button sizing */
#id_VBXo1pm .stylizedButton{
  min-width: 200px;
  text-align: center;
}

/* Home hero mobile behavior */
@media (max-width: 768px){
  #id_VBXo1pm{
    height: auto !important;
    min-height: 420px;
  }

  #id_VBXo1pm .gadgetStyleBody.gadgetContentEditableArea{
    height: auto !important;
    padding: 24px 16px !important;
  }

  #id_VBXo1pm table{
    height: auto !important;
    width: 100% !important;
  }

  #id_VBXo1pm p{
    font-size: 30px !important;
    line-height: 1.1;
    margin-bottom: 16px;
  }

  #id_VBXo1pm .stylizedButton{
    display: block;
    width: 240px;
    margin: 12px auto;
    text-align: center;
  }
}


/* =========================================================
   3) ELECTIONS TILES (CUSTOM CARDS)
   ========================================================= */

.ElectionsTile{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  height: 100%;
  transition: transform 0.15s ease;
}

.ElectionsTile:hover{
  transform: translateY(-2px);
}

.ElectionsTile img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-bottom: 12px;
}

.ElectionsTile h1,
.ElectionsTile h2,
.ElectionsTile h3,
.ElectionsTile h4,
.ElectionsTile p strong{
  color: #0B2545;
  margin: 10px 0;
}

.ElectionsTile a,
.ElectionsTile a:visited{
  background-color: #B22234;
  border-color: #B22234;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 20px;
  text-decoration: none;
}

.ElectionsTile a:hover{
  background-color: #8B1A2B;
  border-color: #8B1A2B;
}


/* =========================================================
   4) NEWS & EVENTS — MAIN LIST PAGES
   Grid layout + safe content behavior
   ========================================================= */

/* Grid layouts */
.WaGadgetBlog .boxesList{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.WaGadgetEvents .boxesList{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 20px !important;
}

@media (max-width: 640px){
  .WaGadgetBlog .boxesList,
  .WaGadgetEvents .boxesList{
    grid-template-columns: 1fr !important;
  }
}

/* Clamp long News previews ONLY */
.WaGadgetBlog .boxesListItem .boxBody,
.WaGadgetBlog .boxesListItem .content,
.WaGadgetBlog .boxesListItem .description{
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Explicitly disable any inherited clamping on Events (defensive) */
.WaGadgetEvents .boxesListItem .boxBody,
.WaGadgetEvents .boxesListItem .content,
.WaGadgetEvents .boxesListItem .description{
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
}


/* =========================================================
   5) NEWS & EVENTS — LIST CARDS + PATRIOTIC STRIPES
   ========================================================= */

.WaGadgetBlog .boxesListItem,
.WaGadgetEvents .boxesListItem{
  position: relative !important;
  background: #ffffff !important;

  /* breathing room */
  padding: 22px 20px !important;
  padding-top: 34px !important;      /* room for top stripe */
  padding-bottom: 34px !important;   /* room for bottom stripe */

  border: 1px solid rgba(0,0,0,0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;

  overflow: hidden !important; /* default: stripes stay clipped */
}

/* Events need overflow visible so meta text never gets clipped.
   DO NOT REMOVE: fixes "When/Where" truncation on event tiles. */
.WaGadgetEvents .boxesListItem{
  overflow: visible !important;
}

/* Patriotic stripes (top/bottom) */
.WaGadgetBlog .boxesListItem::before,
.WaGadgetEvents .boxesListItem::before,
.WaGadgetBlog .boxesListItem::after,
.WaGadgetEvents .boxesListItem::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 10px !important;
  background: linear-gradient(
    90deg,
    #B22234 0%, #B22234 33%,
    #ffffff 33%, #ffffff 66%,
    #0A3161 66%, #0A3161 100%
  ) !important;
}

.WaGadgetBlog .boxesListItem::before,
.WaGadgetEvents .boxesListItem::before{ top: 0 !important; }

.WaGadgetBlog .boxesListItem::after,
.WaGadgetEvents .boxesListItem::after{ bottom: 0 !important; }

/* Hover polish */
.WaGadgetBlog .boxesListItem:hover,
.WaGadgetEvents .boxesListItem:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
  border-color: rgba(0,0,0,0.22) !important;
}

/* Prevent pasted font sizes from overpowering News card previews */
.WaGadgetBlog .boxesListItem .blogPostBody [style*="font-size"],
.WaGadgetBlog .boxesListItem .gadgetBlogEditableArea [style*="font-size"],
.WaGadgetBlog .boxesListItem .boxBody [style*="font-size"],
.WaGadgetBlog .boxesListItem .description [style*="font-size"]{
  font-size: 1em !important;
}


/* =========================================================
   6) EVENTS — FIX TRUNCATED "WHEN / WHERE" ON EVENT TILES
   ========================================================= */

/* DO NOT TOUCH: WA sometimes applies nowrap/ellipsis to event meta.
   These rules force wrapping so date/location remain readable. */
.WaGadgetEvents .boxesListItem .boxInfoContainer,
.WaGadgetEvents .boxesListItem .boxInfoContainer *{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}

/* Common WA event fields (covers different templates) */
.WaGadgetEvents .boxesListItem .boxDate,
.WaGadgetEvents .boxesListItem .boxTime,
.WaGadgetEvents .boxesListItem .boxLocation,
.WaGadgetEvents .boxesListItem .boxVenue,
.WaGadgetEvents .boxesListItem .boxAddress,
.WaGadgetEvents .boxesListItem .boxInfo,
.WaGadgetEvents .boxesListItem .infoContainer,
.WaGadgetEvents .boxesListItem .boxFooterPrimaryContainer{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* If WA uses inline spans/links for location, wrap them too */
.WaGadgetEvents .boxesListItem span,
.WaGadgetEvents .boxesListItem a{
  white-space: normal !important;
}


/* =========================================================
   7) BLOG META CLEANUP (remove author, “on”, pipes)
   ========================================================= */

.WaGadgetBlog .author,
.WaGadgetBlog a.itemAuthor,
.WaGadgetBlog .postedByLink{
  display: none !important;
}

/* DOM-specific hack: hide stray text nodes ("on", "|") while keeping date */
.WaGadgetBlog .boxesListItem .boxInfoContainer h5{
  font-size: 0 !important;
  line-height: 0 !important;
}

.WaGadgetBlog .boxesListItem .boxInfoContainer h5 .postedOn,
.WaGadgetBlog .boxesListItem .boxInfoContainer h5 .postedOn *{
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.WaGadgetBlog .boxesListItem .boxInfoContainer h5 .postedOn::before{
  content: "" !important;
  display: none !important;
}


/* =========================================================
   8) HOME — RECENT NEWS WIDGET (TILE LIST)
   ========================================================= */

.WaGadgetRecentBlogPosts .gadgetStyleBody ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li{
  position: relative !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer;
}

.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10) !important;
  border-color: rgba(0,0,0,0.20) !important;
}

/* Base hit area (kept conservative; HOTFIX below expands to full tile) */
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .title a{
  display: block !important;
  padding-bottom: 3.5em !important;
  margin-bottom: -3.5em !important;
  text-decoration: none !important;
}

.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .title,
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .title a{
  font-weight: 700 !important;
}

.WaGadgetRecentBlogPosts .gadgetStyleBody .author,
.WaGadgetRecentBlogPosts .gadgetStyleBody a.itemAuthor{
  display: none !important;
}

.WaGadgetRecentBlogPosts .gadgetStyleBody .date::after{
  content: "" !important;
  display: none !important;
}


/* =========================================================
   9) HOME — UPCOMING EVENTS WIDGET (MATCH RECENT NEWS)
   ========================================================= */

.WaGadgetUpcomingEvents .gadgetStyleBody ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li{
  position: relative !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10) !important;
  border-color: rgba(0,0,0,0.20) !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .title{
  margin: 0 0 8px 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 700 !important;
}

/* Whole-tile click via expanded hit area + click-through date */
.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .title a{
  display: block !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  position: relative !important;
  z-index: 2 !important;
  padding-bottom: 10em !important;
  margin-bottom: -10em !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .date,
.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .date *{
  pointer-events: none !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .date{
  margin: 0 !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .date .dateonly{
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: rgba(10,49,97,0.06) !important;
  font-size: 0.9em !important;
  line-height: 1.2 !important;
  margin-right: 8px !important;
  text-transform: none !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .date .separator{
  display: none !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody ul > li .date .location{
  opacity: 0.9;
  text-transform: none !important;
}

.WaGadgetUpcomingEvents .gadgetStyleBody .author,
.WaGadgetUpcomingEvents .gadgetStyleBody a.itemAuthor{
  display: none !important;
}


/* =========================================================
   10) HOME — SOCIAL MEDIA WIDGET
   Gadget ID: #id_CEWtBMm
   ========================================================= */

#id_CEWtBMm .gadgetStyleBody{
  overflow: visible !important;
}

#id_CEWtBMm ul.orientationHorizontal{
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 6px 0 10px !important;
  margin-top: 6px !important;
  height: auto !important;
  line-height: normal !important;
  overflow: visible !important;
}

#id_CEWtBMm ul.orientationHorizontal li{
  overflow: visible !important;
}

#id_CEWtBMm ul.orientationHorizontal li a{
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
  transition: filter 0.15s ease, opacity 0.15s ease !important;
}

#id_CEWtBMm ul.orientationHorizontal li:hover a,
#id_CEWtBMm ul.orientationHorizontal li:hover a::before,
#id_CEWtBMm ul.orientationHorizontal li:hover a::after{
  filter: brightness(0.85) !important;
  opacity: 0.90 !important;
}


/* =========================================================
   11) READY TO GET INVOLVED — CTA CARDS (BUTTON NORMALIZATION)
   ========================================================= */

.cta-cards a.stylizedButton{
  box-sizing: border-box;
  padding: 12px 24px !important;
  line-height: 1.2 !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  display: inline-block;
}

.cta-cards a.stylizedButton.buttonStyle001{
  background: #b91c1c !important;
  color: #ffffff !important;
  border: 2px solid #b91c1c !important;
}

.cta-cards a.stylizedButton.buttonStyle001:hover{
  background: #991b1b !important;
  border-color: #991b1b !important;
}

.cta-cards a.stylizedButton.buttonStyle002{
  background: transparent !important;
  color: #b91c1c !important;
  border: 2px solid #b91c1c !important;
}

.cta-cards a.stylizedButton.buttonStyle002:hover{
  background: #b91c1c !important;
  color: #ffffff !important;
}

.cta-cards .WaLayoutItem h3,
.cta-cards .WaLayoutItem strong{
  letter-spacing: 0.2px;
}


/* =========================================================
   12) MEMBERSHIP APPLICATION (JOIN US) — POLISH + NEXT CTA
   ========================================================= */

/* Hide header row above level list:
   Targets ONLY "Select membership level" + "Mandatory fields" */
.WaGadgetMembershipApplication .formTitleOuterContainer{
  display: none !important;
}

/* Hide the "Membership level" label line without hiding options */
#idMembershipLevelRadioGroupContainer .fieldLabel{
  display: none !important;
}

/* Defensive: if WA shows mandatory markers near that label */
#idMembershipLevelRadioGroupContainer .mandatoryLabel,
#idMembershipLevelRadioGroupContainer .mandatorySymbol{
  display: none !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody{
  margin-top: 10px !important;
}

/* Each option becomes a “card” */
#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 0 0 12px 0 !important;

  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;

  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
  border-color: rgba(0,0,0,0.20) !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem .typeRadioContainer{
  flex: 0 0 22px !important;
  margin-top: 3px !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem .label{
  flex: 1 1 auto !important;
  cursor: pointer !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem label.levelProperties{
  display: block !important;
  cursor: pointer !important;
}

#idMembershipLevelRadioGroupContainer .labelTitle{
  color: #0B2545 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

#idMembershipLevelRadioGroupContainer .levelPrice{
  color: rgba(11,37,69,0.80) !important;
  font-weight: 600 !important;
}

#idMembershipLevelRadioGroupContainer .typeInstruction,
#idMembershipLevelRadioGroupContainer .extraInfo{
  color: rgba(31,41,55,0.70) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem:has(input[type="radio"]:checked){
  border-color: rgba(10,49,97,0.55) !important;
  box-shadow: 0 10px 26px rgba(10,49,97,0.12) !important;
  background: rgba(10,49,97,0.03) !important;
}

#idMembershipLevelRadioGroupContainer .fieldBody .fieldItem:first-child{
  margin-top: 0 !important;
}

/* JOIN US — constrain content width (pageId1075173) */
#idMembershipLevelRadioGroupContainer,
#idMembershipLevelRadioGroupContainer ~ div,
.pageId1075173 .WaGadgetContent,
.pageId1075173 .gadgetStyleBody{
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pageId1075173 p{
  margin-bottom: 14px;
}

.pageId1075173 .wizardButtons{
  margin-top: 30px;
}

/* NEXT button CTA — ultra-specific, hard to override */
.WaGadgetMembershipApplication .wizardButtons input.nextButton,
.WaGadgetMembershipApplication input.nextButton,
.WaGadgetMembershipApplication input[id$="_next"],
.WaGadgetMembershipApplication input[id*="stepTemplate_next"],
.WaGadgetMembershipApplication input[onclick*="Wizard.StopWatching"]{
  appearance: none !important;
  -webkit-appearance: none !important;

  background-color: #B22234 !important;
  background-image: none !important;
  border: 2px solid #B22234 !important;

  color: #ffffff !important;
  border-radius: 999px !important;

  padding: 14px 34px !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  height: auto !important;
  line-height: 1.1 !important;

  box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
  cursor: pointer !important;

  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

.WaGadgetMembershipApplication .wizardButtons input.nextButton:hover,
.WaGadgetMembershipApplication input.nextButton:hover{
  transform: translateY(-1px) !important;
  filter: brightness(0.95) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.16) !important;
}


/* =========================================================
   13) ABOUT US — TABLE-BASED COLUMN WIDTH OVERRIDES (ID-specific)
   ========================================================= */

#id_saMZr36 table,
#id_AQ3c7Bw table{
  width: 100% !important;
  border-collapse: separate !important;
}

#id_saMZr36 td,
#id_AQ3c7Bw td{
  vertical-align: top !important;
}

/* About Us: 60/40 split */
#id_saMZr36 td:first-child{ width: 60% !important; }
#id_saMZr36 td:last-child{  width: 40% !important; }

/* How We’re Organized: 60/40 split + padding */
#id_AQ3c7Bw td:first-child{
  width: 60% !important;
  padding-right: 24px !important;
}
#id_AQ3c7Bw td:last-child{
  width: 40% !important;
  padding-left: 24px !important;
}


/* =========================================================
   99) QUARANTINE
   Kept for reference; not applied by default.
   Move back into active CSS ONLY if you discover a regression.
   ========================================================= */

/* (intentionally empty in production) */


/* =========================================================
   90) HOTFIXES — WA quirks / page-specific overrides
   Keep this block at the VERY END of the CSS file.
   Scoped tightly to gadget IDs to avoid pageId brittleness.
   ========================================================= */

/* 90.1) HOME — restore rounded CTA buttons in hero */
#id_VBXo1pm a.stylizedButton,
#id_VBXo1pm a[class*="buttonStyle"],
#id_VBXo1pm [class*="buttonStyle"] a,
#id_VBXo1pm input[type="submit"],
#id_VBXo1pm input[type="button"],
#id_VBXo1pm button{
  border-radius: 10px !important;
}

/* 90.2) HOME — Recent News tiles: whole tile clickable */
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .title a{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  padding-bottom: 10em !important;
  margin-bottom: -10em !important;
}
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .date,
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .date *,
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .description,
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .description *,
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .itemSummary,
.WaGadgetRecentBlogPosts .gadgetStyleBody ul > li .itemSummary *{
  pointer-events: none !important;
}

/* 90.3) VOLUNTEER — CTA button rounding (Gadget: #id_EDirMRL) */
#id_EDirMRL a.stylizedButton{
  border-radius: 10px !important;
  overflow: hidden !important;
}
#id_EDirMRL a.stylizedButton::before,
#id_EDirMRL a.stylizedButton::after{
  border-radius: 10px !important;
}

/* 90.4) DONATE — round 3 specific CTA buttons on hover */
#id_g1LAhND a.stylizedButton.buttonStyle002,
#id_jJu213x a.stylizedButton.buttonStyle002,
#id_YrzaZVA a.stylizedButton.buttonStyle002{
  display: inline-block !important;
}
#id_g1LAhND a.stylizedButton.buttonStyle002:hover,
#id_jJu213x a.stylizedButton.buttonStyle002:hover,
#id_YrzaZVA a.stylizedButton.buttonStyle002:hover{
  border-radius: 999px !important;
  overflow: hidden !important;
}
#id_g1LAhND a.stylizedButton.buttonStyle002:hover::before,
#id_g1LAhND a.stylizedButton.buttonStyle002:hover::after,
#id_jJu213x a.stylizedButton.buttonStyle002:hover::before,
#id_jJu213x a.stylizedButton.buttonStyle002:hover::after,
#id_YrzaZVA a.stylizedButton.buttonStyle002:hover::before,
#id_YrzaZVA a.stylizedButton.buttonStyle002:hover::after{
  border-radius: 999px !important;
}
/* 90.x) ELECTIONS HERO — improve subheader contrast for busy image */
#id_4lxp9LH.elections-hero p{
  opacity: 1 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85) !important;
}

/* Optional: slightly stronger overlay ONLY on Elections */
#id_4lxp9LH.elections-hero::before{
  background: rgba(0,0,0,0.50) !important; /* was 0.40 */
}
/* Primary subheader line */
#id_4lxp9LH.elections-hero div[style*="top: 309px"] font{
  font-size: 19px !important;
  line-height: 1.45 !important;
}

/* Secondary supporting line */
#id_4lxp9LH.elections-hero div[style*="top: 421px"] font{
  font-size: 17px !important;
  line-height: 1.5 !important;
}
/* 90.x) ELECTIONS HERO — enlarge ONLY the subheader layers (avoid headline blow-up)
   Targets the two WA absolute layers by their top offsets. */
#id_4lxp9LH.elections-hero div[style*="position: absolute"][style*="top: 309px"],
#id_4lxp9LH.elections-hero div[style*="position: absolute"][style*="top: 421px"]{
  height: auto !important;
  overflow: visible !important;
}

/* Make the text bigger inside those two layers */
#id_4lxp9LH.elections-hero div[style*="position: absolute"][style*="top: 309px"] font,
#id_4lxp9LH.elections-hero div[style*="position: absolute"][style*="top: 421px"] font{
  font-size: 18px !important;
  line-height: 1.5 !important;
}
/* =========================================================
   MOBILE HEADER & NAV (≤ 768px)
   Ensures clean white header, right-aligned hamburger,
   and visible brand-colored menu icon.
   ========================================================= */

@media (max-width: 768px){

  /* ---------------------------------------------------------
     1) Keep entire header area white
     (prevents theme background bleed or unwanted navy strip)
     --------------------------------------------------------- */
  .zoneHeader1,
  .zoneHeader1 .container_12,
  #idHeaderContentHolder{
    background-color: #ffffff !important;
  }

  /* ---------------------------------------------------------
     2) Right-align mobile hamburger button
     (Wild Apricot horizontal menu gadget)
     --------------------------------------------------------- */
  .WaGadgetMenuHorizontal .menuButton{
    float: right !important;
    text-align: right !important;
    margin-right: 15px !important;  /* spacing from screen edge */
  }

  /* ---------------------------------------------------------
     3) Style hamburger icon (pseudo-element)
     Ensures visibility against white header
     --------------------------------------------------------- */
  .WaGadgetMenuHorizontal .menuButton:before{
    color: #1b365d !important;   /* Aiken GOP navy */
    font-size: 28px !important;  /* comfortable tap visibility */
  }

}
/* MOBILE: Make Recent Blog Posts items look like intentional tap tiles */
@media (max-width: 768px){

  .WaGadgetRecentBlogPosts ul{
    padding-left: 0 !important;
  }

  .WaGadgetRecentBlogPosts ul li{
    list-style: none !important;
    padding: 12px 14px !important;
    margin: 10px 0 !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  .WaGadgetRecentBlogPosts ul li .title a{
    display: block !important;          /* embrace full-tile click */
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }

  /* Subtle pressed feedback (instead of big “weird” highlight) */
  .WaGadgetRecentBlogPosts ul li:active{
    opacity: 0.85 !important;
  }
}
/* =========================================================
   RECENT BLOG POSTS (News Gadget)
   Fix oversized clickable area caused by block-level title link.
   Ensures link hitbox matches visible text (desktop + mobile).
   ========================================================= */

.WaGadgetRecentBlogPosts .gadgetStyleBody ul li .title{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.WaGadgetRecentBlogPosts .gadgetStyleBody ul li .title a{
  display: inline !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
/* =========================================================
   HERO BANNERS — HOME + ABOUT / ELECTIONS / VOLUNTEER
   Drop-in replacement (refactor-only; preserves behavior)

   GOALS (as implemented):
   1) Desktop: preserve current look for both hero gadgets
   2) Mobile:
      - Home hero (#id_VBXo1pm): keep your current “tall enough + readable” behavior
      - Shared hero (#id_4lxp9LH): stop WA cropping + center overlay layers
      - Prevent mid-word breaks (no “nee d”) — do NOT use break-word/anywhere
   3) About-only (mobile):
      - Hide redundant 24px subtitle inside the top headline block
   4) Elections-only (mobile):
      - Force WA inline heights to behave (editable area)
      - Title bigger, midline smaller, prevent layer collisions

   HERO GADGET IDS
   - Home hero:                 #id_VBXo1pm
   - About/Elections/Volunteer: #id_4lxp9LH
   ========================================================= */


/* =========================================================
   1) BASE (DESKTOP + MOBILE): overlay + stacking context
   ========================================================= */

/* Establish a clipping/stacking context for overlay */
#id_VBXo1pm,
#id_4lxp9LH{
  position: relative !important;
  overflow: hidden !important; /* keeps dark overlay inside hero bounds */
}

/* Unified dark overlay */
#id_VBXo1pm::before,
#id_4lxp9LH::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.40) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Ensure hero contents render above overlay */
#id_VBXo1pm > *,
#id_4lxp9LH > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Text readability across both heroes */
#id_VBXo1pm :is(h1,h2,p,a),
#id_4lxp9LH :is(h1,h2,p,a){
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}


/* =========================================================
   2) MOBILE — HOME HERO (#id_VBXo1pm)
   Preserve your existing mobile behavior.
   ========================================================= */
@media (max-width: 768px){

  #id_VBXo1pm{
    height: auto !important;
    min-height: 420px !important;
  }

  #id_VBXo1pm .gadgetStyleBody.gadgetContentEditableArea{
    height: auto !important;
    padding: 24px 16px !important;
  }

  #id_VBXo1pm table{
    height: auto !important;
    width: 100% !important;
  }

  #id_VBXo1pm p{
    font-size: 30px !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
  }
}


/* =========================================================
   3) MOBILE — SHARED HERO FIX (#id_4lxp9LH)
   Applies to About/Elections/Volunteer shared hero gadget.

   Core idea:
   WA uses absolute-positioned overlay layers + sometimes clips them.
   We (a) un-clip, (b) center layers, (c) make them responsive width,
   (d) enforce sane wrapping without mid-word breaks.
   ========================================================= */
@media (max-width: 768px){

  /* Give the shared hero enough room on mobile */
  #id_4lxp9LH{
    height: auto !important;
    min-height: 460px !important;
  }

  /* WA sometimes sets overflow:hidden inline on containers that wrap the overlay */
  #id_4lxp9LH .gadgetStyleBody [style*="overflow:hidden"],
  #id_4lxp9LH .gadgetStyleBody [style*="overflow: hidden"]{
    overflow: visible !important;
  }

  /* Center all WA absolute overlay layers and make them responsive */
  #id_4lxp9LH .gadgetStyleBody :is(
    div[style*="position:absolute"],
    div[style*="position: absolute"]
  ){
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 32px) !important;
    max-width: 520px !important;

    height: auto !important;
    overflow: visible !important;
    text-align: center !important;
  }

  /* Global wrap rules INSIDE the hero:
     - We explicitly do NOT allow mid-word breaks.
     - Keep overflow-wrap / word-break NORMAL.
  */
  #id_4lxp9LH .gadgetStyleBody *{
    white-space: normal !important;
    overflow-wrap: normal !important; /* IMPORTANT: do NOT change to break-word/anywhere */
    word-break: normal !important;
    hyphens: none !important;
    text-align: center !important;
  }

  /* Baseline mobile sizing defaults (safe fallback; Elections/About may override) */
  #id_4lxp9LH .gadgetStyleBody strong{
    font-size: 30px !important;
    line-height: 1.08 !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  #id_4lxp9LH .gadgetStyleBody :is(font,p){
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
}


/* =========================================================
   4) MOBILE — ABOUT ONLY (#id_4lxp9LH.about-hero)
   Hide redundant subtitle line inside the TOP headline block.
   ========================================================= */
@media (max-width: 768px){

  /* Top headline layer = first absolute overlay div inside gadget body */
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position:absolute"]:first-of-type,
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position: absolute"]:first-of-type{
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    height: auto !important;
    overflow: visible !important;
    line-height: normal !important; /* overrides WA fixed line-height */
  }

  /* Hide the redundant 24px subtitle line (nested font has inline 24px) */
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position:absolute"]:first-of-type font font[style*="24px"],
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position: absolute"]:first-of-type font font[style*="24px"]{
    display: none !important;
  }

  /* Resize the 57px headline line for mobile (nested font has inline 57px) */
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position:absolute"]:first-of-type font font[style*="57px"],
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position: absolute"]:first-of-type font font[style*="57px"]{
    font-size: 36px !important;
    line-height: 1.06 !important;

    display: block !important;
    width: 86vw !important;
    max-width: 380px !important;
    margin: 0 auto !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: center !important;
  }

  /* Remove <br> in that block to avoid dead space */
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position:absolute"]:first-of-type br,
  #id_4lxp9LH.about-hero .gadgetStyleBody div[style*="position: absolute"]:first-of-type br{
    display: none !important;
  }
}

/* =========================================================
   5) MOBILE — ELECTIONS ONLY (#id_4lxp9LH.elections-hero)
   NOTE: WA may set inline heights on the editable area.
   We must override those inline styles on mobile to prevent
   the hero from becoming overly tall.
   ========================================================= */
@media (max-width: 768px){

  /* A) Elections hero overall height */
  #id_4lxp9LH.elections-hero{
    height: auto !important;
    min-height: 560px !important;
  }

  /* B) WA inline height on editable area: force mobile behavior */
  #id_4lxp9LH.elections-hero .gadgetStyleBody.gadgetContentEditableArea{
    height: auto !important;
    min-height: 560px !important;
    overflow: visible !important;
  }

  /* C) Ensure elections overlay layers are centered/responsive (belt + suspenders) */
  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="position:absolute"],
    div[style*="position: absolute"]
  ){
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    overflow: visible !important;
    text-align: center !important;
  }

  /* --- 1) TOP TITLE LAYER (was top:86px) --- */
  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:86px"],
    div[style*="top: 86px"]
  ){
    top: 55px !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
  }

  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:86px"],
    div[style*="top: 86px"]
  ) p{
    font-size: 46px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }

  /* --- 2) MIDLINE LAYER (was top:309px) — moved up --- */
  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:309px"],
    div[style*="top: 309px"]
  ){
    top: 240px !important;
    width: calc(100% - 24px) !important;
    max-width: 720px !important;
  }

  /* Kill WA soft-break helpers inside the midline */
  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:309px"],
    div[style*="top: 309px"]
  ) :is(br,wbr){
    display: none !important;
  }

  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:309px"],
    div[style*="top: 309px"]
  ) strong{
    font-size: 22px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    margin: 0 !important;

    display: inline-block !important;
    max-width: 100% !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* --- 3) LOWER PARAGRAPH LAYER (was top:421px) ---
     Your current value is 430px (slightly DOWN, not up).
     If you truly want it moved up, reduce 430 -> e.g. 380/400.
  */
  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:421px"],
    div[style*="top: 421px"]
  ){
    top: 430px !important;
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
  }

  #id_4lxp9LH.elections-hero .gadgetStyleBody :is(
    div[style*="top:421px"],
    div[style*="top: 421px"]
  ) *{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}
/* =========================================================
   ABOUT PAGE — MOBILE FIXES FOR “WHO WE ARE” + “HOW WE’RE ORGANIZED”
   Targets (WA layout containers on About page):
   - #id_saMZr36  → “Who We Are” gray box section
   - #id_AQ3c7Bw  → “How We’re Organized” gray box section

   Problems solved (mobile only):
   1) WA 50/50 layout table stays 2-column → gray boxes look “skewed”
      Fix: convert the WA layout table structure to block so each “column” stacks.

   2) WA fixed heights / overflow assumptions → text can clip after stacking
      Fix: force height:auto and overflow:visible on the key gadget wrappers.

   3) Images drift / don’t center after stacking
      Fix: normalize images to block, responsive, centered.

   4) “Convention” image has a large blank gap above it
      Root cause: WA injects inline padding-top on the editable area.
      Fix: target the stable gadget class (.About-us-convention), not volatile ids.
   ========================================================= */

@media (max-width: 768px){

  /* =======================================================
     1) STACK THE WA 2-COL LAYOUT TABLES (NUCLEAR, SCOPED)
     ======================================================= */
  #id_saMZr36,
  #id_saMZr36 table.WaLayoutTable,
  #id_saMZr36 table.WaLayoutTable > tbody,
  #id_saMZr36 table.WaLayoutTable > tbody > tr,
  #id_saMZr36 table.WaLayoutTable > tbody > tr > td,
  #id_AQ3c7Bw,
  #id_AQ3c7Bw table.WaLayoutTable,
  #id_AQ3c7Bw table.WaLayoutTable > tbody,
  #id_AQ3c7Bw table.WaLayoutTable > tbody > tr,
  #id_AQ3c7Bw table.WaLayoutTable > tbody > tr > td{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Remove the vertical spacer/separator column in the 50/50 layout */
  #id_saMZr36 table.WaLayoutTable > tbody > tr > td.WaLayoutSeparator,
  #id_AQ3c7Bw table.WaLayoutTable > tbody > tr > td.WaLayoutSeparator{
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
  }

  /* Ensure the “columns” become full width even if WA keeps inline width:50% */
  #id_saMZr36 table.WaLayoutTable > tbody > tr > td.WaLayoutItem,
  #id_AQ3c7Bw table.WaLayoutTable > tbody > tr > td.WaLayoutItem{
    width: 100% !important;
    max-width: 100% !important;
  }


  /* =======================================================
     2) PREVENT TEXT CLIPPING (HEIGHT / OVERFLOW DEFENSE)
     ======================================================= */
  #id_saMZr36,
  #id_AQ3c7Bw{
    overflow: visible !important;
  }

  #id_saMZr36 :is(.WaGadgetOnly,.gadgetStyleBody,.gadgetContentEditableArea),
  #id_AQ3c7Bw :is(.WaGadgetOnly,.gadgetStyleBody,.gadgetContentEditableArea){
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* If WA wrote inline fixed heights on gadget wrappers, override them */
  #id_saMZr36 .WaGadgetOnly[style*="height"],
  #id_AQ3c7Bw .WaGadgetOnly[style*="height"]{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }


  /* =======================================================
     3) IMAGE NORMALIZATION (RESPONSIVE + CENTERED)
     ======================================================= */
  #id_saMZr36 .gadgetStyleBody img,
  #id_AQ3c7Bw .gadgetStyleBody img{
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto !important; /* centers and removes left drift */
  }

  /* If an image is wrapped in a link, make the link a block for clean centering */
  #id_saMZr36 .gadgetStyleBody a:has(img),
  #id_AQ3c7Bw .gadgetStyleBody a:has(img){
    display: block !important;
    float: none !important;
    text-align: center !important;
  }

  /* Reduce “wrapper margin stacking” above images without changing text paragraphs */
  #id_saMZr36 .gadgetStyleBody :is(p,div):has(img),
  #id_AQ3c7Bw .gadgetStyleBody :is(p,div):has(img){
    margin-top: 8px !important;   /* tweak to 0 if you want it flush */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* =======================================================
     4) ABOUT-US “CONVENTION” IMAGE — REMOVE BIG GAP ABOVE IT
     (This is the working fix; ids like #id_Bw5G90R are volatile.)
     ======================================================= */
  #id_AQ3c7Bw .About-us-convention .gadgetContentEditableArea[style*="padding-top"]{
    padding-top: 0 !important;
  }

  /* Belt + suspenders: kill any inline padding-top inside that gadget */
  #id_AQ3c7Bw .About-us-convention [style*="padding-top"]{
    padding-top: 0 !important;
  }

  /* Remove wrapper spacing WA inserts above the image inside this gadget */
  #id_AQ3c7Bw .About-us-convention :is(p,div){
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* WA often inserts <br> after images inside wrappers */
  #id_AQ3c7Bw .About-us-convention br{
    display: none !important;
  }
}
/* =========================================================
   ABOUT PAGE — MOBILE FIX: “Ready to Get Involved?” mashed text
   Cause: WA inline line-height:12px on <p align="center"> elements
   Scope: only the specific section (#id_bj2CdVh) / gadget (#id_Ps4qVXS)
   ========================================================= */
@media (max-width: 768px){

  /* Give the whole text block normal breathing room */
  #id_bj2CdVh #id_Ps4qVXS .gadgetStyleBody.gadgetContentEditableArea{
    padding-top: 16px !important;     /* overrides inline 3px */
    padding-bottom: 28px !important;  /* reduces huge 50px if you want */
  }

  /* Override the inline 12px line-height on the paragraphs */
  #id_bj2CdVh #id_Ps4qVXS .gadgetStyleBody p[align="center"],
  #id_bj2CdVh #id_Ps4qVXS .gadgetStyleBody p[style*="line-height"]{
    line-height: 1.3 !important;      /* fixes mashed lines */
    margin: 10px 0 !important;
  }

  /* Make the nested <font> tags inherit sane line-height */
  #id_bj2CdVh #id_Ps4qVXS .gadgetStyleBody font{
    line-height: inherit !important;
    display: inline !important;
  }

  /* Optional: remove the <br> that adds awkward spacing in tight line-height setups */
  #id_bj2CdVh #id_Ps4qVXS .gadgetStyleBody br{
    display: none !important;
  }
}
/* ========================================
   HERO – Stay Informed button: stop full-width
   ======================================== */

/* Target the actual <a> element that WA styles as a button */
#id_VBXo1pm a.stylizedButton,
#id_VBXo1pm a.stylizedButton.buttonStyle002{
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap !important;  /* prevents odd wrapping */
}

/* Optional: control the “pill” size */
#id_VBXo1pm a.stylizedButton.buttonStyle002{
  padding: 10px 26px !important;
}
/* =========================================================
   HOME HERO (id_VBXo1pm) — Mobile button layout fix
   Goal: stack buttons cleanly + center everything
   ========================================================= */

@media (max-width: 768px){

  /* Ensure the hero content is centered */
  #id_VBXo1pm .gadgetStyleBody,
  #id_VBXo1pm .gadgetContentEditableArea{
    text-align: center !important;
  }

  /* Make the red buttons behave consistently on small screens */
  #id_VBXo1pm a.stylizedButton{
    display: inline-block !important;
    float: none !important;
    margin: 10px auto !important;
  }

  /* Specifically: stack the two primary CTAs (Join/Donate) */
  #id_VBXo1pm a.stylizedButton.buttonStyle001,
  #id_VBXo1pm a.stylizedButton.buttonStyle003,
  #id_VBXo1pm a.stylizedButton[href*="join"],
  #id_VBXo1pm a.stylizedButton[href*="donate"]{
    display: block !important;
    width: 78% !important;
    max-width: 320px !important;
  }

  /* Keep "Stay Informed" as a smaller secondary pill */
  #id_VBXo1pm a.stylizedButton.buttonStyle002{
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 8px !important;
  }
}
/* ========================================
   HOME HERO – Reduce "Prefer updates first?" size on mobile
   ======================================== */

@media (max-width: 768px){

  #id_VBXo1pm p:has(font){
    font-size: 0.9rem !important;
    opacity: 0.85;
  }

}
/* =========================================================
   SUBSCRIPTION FORM — FORCE HIDE WA header rows
   ========================================================= */

/* "Subscription form" title */
html body h3.formTitle{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* "* Mandatory fields" / "Update my profile" line */
html body .mandatoryFieldsTitle{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove extra wrapper spacing if it remains */
html body .formTitleOuterContainer,
html body .formTitleContainer{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* =========================================================
   SUBSCRIPTION FORM — force-hide Back + restyle Subscribe
   (targets exact element IDs from your inspector)
   ========================================================= */

/* Hide Back */
a#FunctionalBlock1_ctl00_prev{
  display: none !important;
}

/* Red pill Subscribe button */
input#FunctionalBlock1_ctl00_subscribeButton{
  background-color: #B22234 !important;  /* patriotic red */
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;      /* pill */
  padding: 12px 34px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;
  cursor: pointer !important;

  /* prevent WA theme rules from forcing odd widths */
  width: auto !important;
  max-width: none !important;
}

/* Hover polish */
input#FunctionalBlock1_ctl00_subscribeButton:hover{
  background-color: #9c1c2b !important;
  transform: translateY(-1px);
}
/* =========================================================
   SUBSCRIPTION FORM — center action buttons
   ========================================================= */

div.right{
  float: none !important;
  text-align: center !important;
  width: 100% !important;
}

/* =========================================================
   SUBSCRIPTION FORM — Full width button on mobile
   ========================================================= */

@media (max-width: 600px){

  input#FunctionalBlock1_ctl00_subscribeButton{
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: 30px auto 0 auto !important;
    padding: 14px 20px !important;
    font-size: 1.05rem !important;
  }

}
/* =========================================================
   READY TO GET INVOLVED — keep buttons centered
   ========================================================= */

/* Center anything inside that block */
#idContent .WaLayoutZone p,
#idContent .WaLayoutZone td{
  text-align: center;
}

/* Ensure buttons don't stretch weirdly */
#idContent a.stylizedButton{
  display: inline-block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================================================
   CONTACT US — WA SEND EMAIL FORM + SUCCESS/RESULT (DROP-IN)
   Aiken County GOP branding — single block, stable + scoped
   ========================================================= */

/* =========================================================
   A) CONTACT FORM PAGE (Send Email)
   ========================================================= */

/* Hide WA page header above the system form */
.memberDirectoryDetailsHeaderContainer{
  display: none !important;
}

/* Hide the "Back" link WA injects above the form */
#idSendMailContainerBackToProfile,
#FunctionalBlock1_ctl00_hlBackToProfile{
  display: none !important;
}

/* Center + constrain the main section */
#idSendEmailMainSectionContainer{
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 8px 0 30px !important;
}

/* Hide WA default caption ("Send message") */
#idCaptionSendEmailMainContainer{
  display: none !important;
}

/* Custom headline + helper line */
#idSendEmailMainSectionContainer::before{
  content: "Contact the Aiken County Republican Party";
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  margin: 10px 0 8px;
  color: #B22234;
}

#idSendEmailMainSectionContainer::after{
  content: "We read every message. Please include the best email/phone number to reach you.";
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 22px;
  color: #B22234;
  font-weight: 600;
  opacity: 0.95;
}

/* Ensure the actual form wrapper is centered */
#idSendEmailMainContainer{
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Force the form rows visible (prevents “lost fields”) */
#idMessageSubjectContainer,
#idBodyContainer,
#idReplyNameContainer,
#idReplyEmailContainer,
#idButtonsContainer{
  display: block !important;
}

/* One-column stacked layout */
#idSendEmailMainSectionContainer .fieldSubContainer{
  display: block !important;
}

/* Row spacing */
#idSendEmailMainSectionContainer .fieldContainer{
  margin: 12px 0 !important;
}

/* Labels */
#idSendEmailMainSectionContainer .fieldLabel{
  display: block !important;
  width: auto !important;
  text-align: left !important;
  padding: 0 0 6px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

/* Friendly label text replacements */
#idMessageSubjectContainer .fieldLabel,
#idBodyContainer .fieldLabel,
#idReplyNameContainer .fieldLabel,
#idReplyEmailContainer .fieldLabel{
  font-size: 0 !important; /* hide WA label text */
}

#idMessageSubjectContainer .fieldLabel::after{
  content: "Subject";
  font-size: 16px;
  font-weight: 700;
  color: #1b365d;
}

#idBodyContainer .fieldLabel::after{
  content: "Message";
  font-size: 16px;
  font-weight: 700;
  color: #1b365d;
}

#idReplyNameContainer .fieldLabel::after{
  content: "Your name";
  font-size: 16px;
  font-weight: 700;
  color: #1b365d;
}

#idReplyEmailContainer .fieldLabel::after{
  content: "Your email";
  font-size: 16px;
  font-weight: 700;
  color: #1b365d;
}

/* Required asterisk */
#idSendEmailMainSectionContainer .mandatorySymbol{
  color: #B22234 !important;
  font-weight: 900 !important;
}

/* Field bodies full width */
#idSendEmailMainSectionContainer .fieldBody{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inputs */
#idSendEmailMainSectionContainer input[type="text"],
#idSendEmailMainSectionContainer input[type="email"],
#idSendEmailMainSectionContainer textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #cfd6df !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  transition: box-shadow .15s ease, border-color .15s ease;
}

#idSendEmailMainSectionContainer textarea{
  min-height: 260px !important;
  resize: vertical;
}

/* Focus */
#idSendEmailMainSectionContainer input[type="text"]:focus,
#idSendEmailMainSectionContainer input[type="email"]:focus,
#idSendEmailMainSectionContainer textarea:focus{
  outline: none !important;
  border-color: rgba(27, 54, 93, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.12) !important;
}

/* Optional: remove WA help icon on Subject */
#idMessageSubjectContainer img,
#idMessageSubjectContainer .helpIcon{
  display: none !important;
}

/* Buttons row */
#idButtonsContainer{
  margin-top: 16px !important;
}
#idButtonsContainer .fieldLabel{
  display: none !important;
}
#idButtonsContainer .fieldBody{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Buttons */
#FunctionalBlock1_ctl00_sendButton{
  background: #B22234 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  min-width: 130px;
  appearance: none;
}
#FunctionalBlock1_ctl00_sendButton:hover{
  filter: brightness(0.92);
  transform: translateY(-1px);
}

#FunctionalBlock1_ctl00_cancelButton{
  background: transparent !important;
  color: #B22234 !important;
  border: 2px solid #B22234 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  min-width: 130px;
  appearance: none;
}
#FunctionalBlock1_ctl00_cancelButton:hover{
  background: rgba(178, 34, 52, 0.08) !important;
  transform: translateY(-1px);
}

/* Mobile headline size */
@media (max-width: 768px){
  #idSendEmailMainSectionContainer::before{
    font-size: 30px !important;
  }
}


/* =========================================================
   B) SUCCESS / RESULT PAGE (SendEmailResult) — FIX GREEN + BACK BTN
   ========================================================= */

/* Neutralize WA success wrapper */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindow{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Branded success card (use ID only — don’t rely on classes) */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle{
  background: #ffffff !important;
  border: 2px solid #1b365d !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
  max-width: 860px !important;
  margin: 18px auto 26px !important;
  padding: 16px 20px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Hard-kill any WA green fills/borders inside the success box */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle,
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle *{
  background-image: none !important;
}

/* Specifically override the typical green panel wrappers if present */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle .text,
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle .cww-inner,
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle .cww-co{
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Red accent bar */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle::before{
  content: "";
  display: block;
  height: 4px;
  background: #B22234;
  border-radius: 999px;
  margin: 0 0 12px;
}

/* Put the message ON THE BOX (most reliable) */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle::after{
  content: "✓ Your message has been sent.";
  display: block;
  color: #1b365d;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.35;
}

/* Hide WA’s original sentence (so no “Contact Us” fake member name) */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_messageText{
  display: none !important;
}

/* Hide WA icon + decorative chrome chunks */
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle img,
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle .cw,
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle .cww,
#FunctionalBlock1_ctl00_SendEmailResult_successMessageBox_idConfirmWindowStyle [class^="cw"]{
  display: none !important;
}

/* Result page: style (or hide) the "Message details" header */
#idSendEmailViewMainSectionContainer h1,
#idSendEmailViewMainSectionContainer h2{
  color: #B22234 !important;
}

/* Result page: hide the read-only field dump */
#idSendEmailViewMainSectionContainer .fieldContainer{
  display: none !important;
}

/* Remove Back to profile — button/link/container (broad) */
#idSendMailContainerBackToProfile,
#idSendMailContainerBackToProfile *,
#FunctionalBlock1_ctl00_btnBackToProfile,
#FunctionalBlock1_ctl00_hlBackToProfile,
a[id*="BackToProfile"],
input[id*="BackToProfile"],
button[id*="BackToProfile"],
input[value="Back to profile"],
a[href*="/Sys/PublicProfile/"]{
  display: none !important;
}
/* DONATIONS — fix the inline 150px padding on the disclosure container */
@media (max-width: 768px){
  #idPrimaryContentBlock1Content .gadgetStyleBody.gadgetContentEditableArea{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   DONATION FORM — AIKEN GOP (CLEAN FINAL DROP-IN)
   - Stable card wrapper (form + Donate button)
   - Hide Cancel
   - Donate CTA styled red pill + overlay label "Donate"
   - Amount label centered as header
   - Preset amounts as same-width stacked pill buttons
   - Other amount LAST, label above input, same width as pills
   - Remove required asterisk
   - Light polish: spacing + comment box height
   Requires :has() (modern Chrome/Edge/Safari)
   ========================================================= */


/* -----------------------------
   0) Scope safety
----------------------------- */
#idSectionDonationFormContainer,
#idSectionDonationFormContainer *{
  box-sizing: border-box !important;
}


/* -----------------------------
   1) Card wrapper (wraps form + nav buttons)
----------------------------- */
.inner:has(#idSectionDonationFormContainer):has(input[id$="_donation_ctl00_stepTemplate_next"]){
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 22px 26px 26px !important;

  background: #fff !important;
  border: 1px solid rgba(27,54,93,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.06) !important;
}

/* Ensure the inner container is NOT a second card */
#idSectionDonationFormContainer{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* -----------------------------
   2) Baseline form polish
----------------------------- */
#idSectionDonationFormContainer .fieldContainer{
  margin: 12px 0 !important;
}

#idSectionDonationFormContainer .fieldLabel{
  padding-right: 14px !important;
  min-width: 170px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

#idSectionDonationFormContainer .mandatorySymbol{
  display: none !important; /* removes the red asterisk */
}


/* -----------------------------
   3) Amount section (centered header + centered chooser column)
----------------------------- */
#idAmountEditContainer{
  --pillW: 420px; /* tune: 360–480 */

  padding: 10px 0 18px !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  margin-bottom: 14px !important;
}

/* Collapse WA's label/body 2-col layout for Amount only */
#idAmountEditContainer .fieldSubContainer.radioGroupContainer{
  display: block !important;
}

/* Center the "Amount ($USD)" label as a header */
#idAmountEditContainer .fieldLabel{
  display: block !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  margin: 0 0 12px !important;
}

/* Center the choices area */
#idAmountEditContainer .fieldBody{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* The vertical stack container (fixed column width) */
#idAmountEditContainer div[id*="donationAmountGroupBody"].groupBodyVertical{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;

  width: var(--pillW) !important;
  max-width: 92vw !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Hard reset old “wide band” styling */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
}

/* Reorder: presets first, Other amount last */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem{
  order: 1 !important;
}
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount{
  order: 99 !important;
  margin-top: 6px !important;
}


/* -----------------------------
   4) Preset pills (same width, centered text)
----------------------------- */

/* Hide radio dots but keep functional */
#idAmountEditContainer div[id*="donationAmountGroupBody"] input[type="radio"],
#idAmountEditContainer div[id*="donationAmountGroupBody"] input.typeRadio{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Each preset row fills the column */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem:not(.donationAmount){
  width: 100% !important;
}

/* WA wrapper often controls sizing */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem:not(.donationAmount) > span.label{
  display: block !important;
  width: 100% !important;
}

/* The pill itself */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem:not(.donationAmount) > span.label > label{
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;

  border: 2px solid #B22234 !important;
  background: #fff !important;
  color: #B22234 !important;

  font-weight: 800 !important;
  line-height: 1.15 !important;
  cursor: pointer !important;

  transition: background .15s ease, color .15s ease, transform .10s ease, box-shadow .15s ease !important;
}

#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem:not(.donationAmount) > span.label > label:hover{
  background: rgba(178,34,52,.06) !important;
  transform: translateY(-1px) !important;
}

/* Selected preset = filled red pill */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem:not(.donationAmount):has(input[type="radio"]:checked) > span.label > label{
  background: #B22234 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
}


/* -----------------------------
   5) Other amount (last, label above input, matches width)
----------------------------- */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount{
  width: 100% !important;
  max-width: var(--pillW) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;

  text-align: left !important;
}

/* Hide the radio container visually (still exists for WA logic) */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount > span.typeRadioContainer{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Label above input */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount::before{
  content: "Other amount:" !important;
  font-weight: 800 !important;
  color: #1b365d !important;
  font-size: 16px !important;
}

/* Textbox */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount input.typeTextBox,
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount input[type="text"]{
  width: 100% !important;
  max-width: none !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
}

/* Helper */
#idAmountEditContainer div[id*="donationAmountGroupBody"] > div.fieldItem.donationAmount::after{
  content: "Enter any amount in USD." !important;
  font-size: 13px !important;
  color: rgba(0,0,0,.55) !important;
}


/* -----------------------------
   6) Comment box
----------------------------- */
#idCommentEditContainer textarea{
  min-height: 120px !important;
  font-size: 16px !important;
  padding: 10px 12px !important;
}


/* -----------------------------
   7) Buttons: hide Cancel + style Donate CTA
----------------------------- */
input[id$="_donation_ctl00_stepTemplate_cancel1"],
input[id$="_donation_ctl00_stepTemplate_cancelNoScript"]{
  display: none !important;
}
div.left:has(input[id$="_donation_ctl00_stepTemplate_cancel1"]),
div.left:has(input[id$="_donation_ctl00_stepTemplate_cancelNoScript"]){
  display: none !important;
}

/* Center Donate button inside the card */
.inner:has(#idSectionDonationFormContainer):has(input[id$="_donation_ctl00_stepTemplate_next"])
div.right:has(input[id$="_donation_ctl00_stepTemplate_next"]){
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;
  line-height: 0 !important;
}

/* Style Pay button as red pill and overlay “Donate” */
input[id$="_donation_ctl00_stepTemplate_next"]{
  appearance: none !important;
  -webkit-appearance: none !important;

  display: block !important;
  background: #B22234 !important;
  border: 2px solid #B22234 !important;

  color: transparent !important; /* hide Pay text */
  text-shadow: none !important;

  border-radius: 999px !important;
  padding: 14px 34px !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  line-height: 1 !important;

  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease !important;

  min-width: 180px !important;
}

.inner:has(#idSectionDonationFormContainer):has(input[id$="_donation_ctl00_stepTemplate_next"])
div.right:has(input[id$="_donation_ctl00_stepTemplate_next"])::after{
  content: "Donate" !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(50% - 2px) !important;
  transform: translate(-50%, -50%) !important;

  color: #fff !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

input[id$="_donation_ctl00_stepTemplate_next"]:hover{
  background: #9E1D2C !important;
  border-color: #9E1D2C !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.14) !important;
}


/* -----------------------------
   8) Mobile
----------------------------- */
@media (max-width: 768px){
  .inner:has(#idSectionDonationFormContainer):has(input[id$="_donation_ctl00_stepTemplate_next"]){
    padding: 16px 16px 18px !important;
    border-radius: 12px !important;
  }

  #idAmountEditContainer{
    --pillW: 92vw;
  }

  /* Full-width Donate button on mobile */
  .inner:has(#idSectionDonationFormContainer):has(input[id$="_donation_ctl00_stepTemplate_next"])
  div.right:has(input[id$="_donation_ctl00_stepTemplate_next"]){
    width: 100% !important;
  }

  input[id$="_donation_ctl00_stepTemplate_next"]{
    width: 100% !important;
    max-width: 520px !important;
    padding: 15px 22px !important;
  }
}
/* =========================================================
   SYSTEM PAGE — LOGIN BUTTON (WA) — FORCE PRIMARY CTA STYLE
   Covers multiple WA markup variants + disabled state.
   ========================================================= */

/* Hit the submit control no matter which WA variant is used */
#idLoginForm input[type="submit"],
#idLoginForm input[type="button"],
#idLoginForm button[type="submit"],
#idLoginForm .loginButton,
#idLoginForm .waButton,
.WaGadgetLoginForm input[type="submit"],
.WaGadgetLoginForm input[type="button"],
.WaGadgetLoginForm button[type="submit"] {
  appearance: none;
  -webkit-appearance: none;

  background: #b10f1a !important;   /* your red */
  color: #fff !important;
  border: 0 !important;

  border-radius: 9999px !important;
  padding: 12px 22px !important;
  line-height: 1 !important;

  font-weight: 700 !important;
  font-size: 16px !important;

  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

/* Hover / focus */
#idLoginForm input[type="submit"]:hover,
#idLoginForm input[type="button"]:hover,
#idLoginForm button[type="submit"]:hover,
#idLoginForm .loginButton:hover,
#idLoginForm .waButton:hover,
.WaGadgetLoginForm input[type="submit"]:hover,
.WaGadgetLoginForm button[type="submit"]:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22) !important;
}

#idLoginForm input[type="submit"]:focus,
#idLoginForm input[type="button"]:focus,
#idLoginForm button[type="submit"]:focus,
#idLoginForm .loginButton:focus,
#idLoginForm .waButton:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.25), 0 10px 22px rgba(0,0,0,0.22) !important;
}

/* WA disables the button until fields are filled — keep it "our button" but visually disabled */
#idLoginForm input[disabled],
#idLoginForm button[disabled],
.WaGadgetLoginForm input[disabled],
.WaGadgetLoginForm button[disabled] {
  background: #b10f1a !important; /* force red even when disabled */
  opacity: 0.55 !important;       /* still reads as disabled */
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
/* =========================================================
   SYSTEM PAGE — CHANGE PASSWORD — SAVE/CANCEL BUTTONS
   (Both are type="submit" on this WA system page)
   ========================================================= */

/* SAVE = primary */
#ctl00_ContentArea_SubmitNewPasswordBtn{
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #b10f1a !important;
  color: #fff !important;
  border: 0 !important;

  border-radius: 9999px !important;
  padding: 12px 22px !important;
  line-height: 1 !important;

  font-weight: 700 !important;
  font-size: 16px !important;

  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

#ctl00_ContentArea_SubmitNewPasswordBtn:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22) !important;
}

#ctl00_ContentArea_SubmitNewPasswordBtn:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.25), 0 10px 22px rgba(0,0,0,0.22) !important;
}

/* If WA disables it until valid */
#ctl00_ContentArea_SubmitNewPasswordBtn[disabled]{
  background: #b10f1a !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* CANCEL = secondary (even though it is type="submit") */
#ctl00_ContentArea_CancelBtn{
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #f2f2f2 !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;

  border-radius: 9999px !important;
  padding: 12px 22px !important;
  line-height: 1 !important;

  font-weight: 700 !important;
  font-size: 16px !important;

  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
}

#ctl00_ContentArea_CancelBtn:hover{
  filter: brightness(0.98);
}
/* =========================================================
   SYSTEM PAGE — MEMBERSHIP RENEWAL / BUNDLE SUMMARY
   HIDE PHOTO UPLOADER (WA injected block)
   ========================================================= */

/* Hide by ID (highest reliability) */
body div#idPictureUploaderContainer,
body div#uploadContainer,
body div#upload,
body input#fileUpload {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* In case WA swaps IDs but keeps class */
body div.uploadContainer {
  display: none !important;
}