/* ========================================
   WIN OF NHC - WILD APRICOT CUSTOM CSS
   Brand: Prototype D
   Colors: Deep Navy #1B3A6B | Yellow-Green #B8D430 | Deep Plum #7C2177
   Updated: August 2026
   ======================================== */


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=DM+Serif+Display:ital@0;1&display=swap');


/* ========================================
   DESIGN TOKENS (CSS Custom Properties)
   ======================================== */


:root {
  /* Brand colors */
  --ocean:        #1B3A6B;
  --ocean-light:  #C8D6E8;
  --ocean-pale:   #EBF0F8;
  --citrus:       #B8D430;
  --citrus-dark:  #9ab820;
  --citrus-pale:  #F0F6D0;
  --pink:         #7C2177;
  --pink-light:   #a855a0;
  --pink-pale:    #EBF0F8;

  /* Neutrals */
  --warm-white:   #ffffff;
  --cream:        #FDF8F3;
  --white:        #FFFFFF;
  --border:       #E8EDF2;

  /* Text */
  --text-dark:    #1A1A2E;
  --text-mid:     #4A5568;
  --text-light:   #8A97A8;

  /* ── Type scale — Major Third (×1.250) anchored at 16 px ──
     xs   11 px   tiny labels, captions
     sm   13 px   metadata, nav sub-items, table cells
     base 16 px   body copy, button text, links
     md   18 px   section labels, card sub-headings
     lg   22 px   card / event titles
     xl   28 px   page sub-headings
     2xl  36 px   page titles
     3xl  52 px   hero display text                       */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   52px;
}


/* ========================================
   BODY & TYPOGRAPHY
   ======================================== */


body {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--text-dark) !important;
  background-color: var(--warm-white) !important;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--ocean) !important;
  line-height: 1.3 !important;
}


h1 { font-size: 2.2em !important; }
h2 { font-size: 1.8em !important; }
h3 { font-size: 1.4em !important; }


/* ========================================
   HEADER
   ======================================== */


#wa-header,
#wa-header .WaGadgetMenu,
#wa-header .menuInner,
#wa-header .menuOuter,
#wa-header nav,
#wa-header .headerInner,
#wa-header .headerOuter,
.headerContainer,
.siteHeader {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(27, 58, 107, 0.06) !important;
}


[id*="header"],
[class*="header"] {
  background-color: var(--white) !important;
}


/* ========================================
   NAVIGATION LINKS
   ======================================== */


#wa-header a,
[id*="nav"] a,
[class*="nav"] a,
[id*="menu"] a,
[class*="menu"] a,
.WaGadgetNavigationBar a,
.WaGadgetNavigationBar a:visited,
.WaGadgetNavigationBar a:link {
  color: var(--ocean) !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  text-decoration: none !important;
}


#wa-header a:hover,
[id*="nav"] a:hover,
[class*="menu"] a:hover,
.WaGadgetNavigationBar a:hover {
  color: var(--citrus) !important;
  text-decoration: none !important;
}


[id*="nav"],
[class*="nav"],
[id*="menu"],
[class*="menu"] {
  background-color: var(--white) !important;
}


/* ========================================
   BUTTONS
   ======================================== */


.button,
input[type="submit"],
.wa-btn,
a.button,
.wa-button {
  background-color: var(--citrus) !important;
  color: var(--ocean) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 12px 28px !important;
  transition: background-color 0.3s ease !important;
}


.button:hover,
input[type="submit"]:hover,
.wa-btn:hover,
a.button:hover {
  background-color: var(--citrus-dark) !important;
  color: var(--ocean) !important;
}


.stylizedButton,
a.stylizedButton {
  background-color: var(--citrus) !important;
  color: var(--ocean) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 12px 32px !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
}


.stylizedButton:hover,
a.stylizedButton:hover {
  background-color: var(--citrus-dark) !important;
  color: var(--ocean) !important;
  text-decoration: none !important;
}


.stylizedButton:hover span,
a.stylizedButton:hover span,
a:hover span {
  text-decoration: none !important;
}


/* ========================================
   GENERAL LINKS
   ======================================== */


a {
  color: var(--ocean) !important;
  text-decoration: none !important;
}


a:hover {
  color: var(--pink) !important;
  text-decoration: none !important;
}


/* ========================================
   FULL WIDTH CONTENT FIX
   ======================================== */


#wa-content,
.contentWrapper,
.pageWrapper,
.WaPlaceHolderContent,
.zoneContent {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ========================================
   FOOTER
   ======================================== */


#wa-footer {
  padding: 40px 40px 20px !important;
}


#wa-footer * {
  color: var(--white) !important;
}


#wa-footer strong,
#wa-footer b,
#wa-footer p strong,
#wa-footer p b {
  color: var(--citrus) !important;
}


#wa-footer a {
  color: var(--citrus-pale) !important;
}


#wa-footer a:hover {
  color: var(--citrus) !important;
  text-decoration: none !important;
}


#wa-footer .WaGadgetSocialProfile a {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.5) !important;
}


#wa-footer .WaGadgetSocialProfile a:hover {
  border-color: var(--citrus) !important;
  color: var(--citrus) !important;
}


.wa-copyright,
.waPoweredBy {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 12px 0 !important;
}


/* ========================================
   FORMS
   ======================================== */


input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  color: var(--text-dark) !important;
  padding: 8px 12px !important;
  background-color: var(--white) !important;
}


input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--ocean) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(27, 58, 107, 0.15) !important;
}


/* ========================================
   MEMBER DIRECTORY
   ======================================== */


.WaGadgetMemberDirectory h2,
.WaGadgetMemberDirectory h3 {
  text-align: center !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  color: var(--ocean) !important;
  font-size: 1.8em !important;
  margin-bottom: 8px !important;
}


.WaGadgetMemberDirectory table,
.WaGadgetMemberDirectory tbody {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  border: none !important;
}


.WaGadgetMemberDirectory tr {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--ocean) !important;
  border-radius: 12px !important;
  padding: 24px 16px 20px !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(27, 58, 107, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}


.WaGadgetMemberDirectory tr:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(27, 58, 107, 0.12) !important;
}


.WaGadgetMemberDirectory td {
  display: block !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
}


.WaGadgetMemberDirectory img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--citrus) !important;
  margin: 0 auto 14px !important;
  display: block !important;
}


.WaGadgetMemberDirectory .memberName,
.WaGadgetMemberDirectory b,
.WaGadgetMemberDirectory strong {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  color: var(--ocean) !important;
  display: block !important;
  margin-bottom: 4px !important;
}


/* ========================================
   EVENTS GADGET
   ======================================== */


.WaGadgetEventList .eventList,
.WaGadgetUpcomingEvents .eventList {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}


.WaGadgetEventList .eventItem,
.WaGadgetUpcomingEvents .eventItem {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}


.WaGadgetEventList .eventItem:hover,
.WaGadgetUpcomingEvents .eventItem:hover {
  box-shadow: 0 8px 24px rgba(27, 58, 107, 0.1) !important;
  transform: translateY(-2px) !important;
}


.WaGadgetEventList .eventTitle a,
.WaGadgetUpcomingEvents .eventTitle a {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ocean) !important;
}


.WaGadgetEventList .eventTitle a:hover,
.WaGadgetUpcomingEvents .eventTitle a:hover {
  color: var(--pink) !important;
}


/* ========================================
   LOGIN LINK
   ======================================== */


a#id_SFSDjBD_loginLink.loginLink {
  color: var(--ocean) !important;
}


/* ========================================
   LOGO
   ======================================== */


.WaGadgetLogo img,
.WaGadgetLogo a img {
  max-height: 70px !important;
  width: auto !important;
}


#wa-header,
.headerInner,
.headerOuter {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  min-height: 0 !important;
}


/* ========================================
   FULL WIDTH CONTENT FIX (extended)
   ======================================== */


#wa-content,
.contentWrapper,
.pageWrapper,
.WaPlaceHolderContent,
.zoneContent,
.gadgetContainerCell,
.gadgetContainer,
.WaGadgetBanner,
.bannerContainer,
#wa-header .headerInner,
#wa-header .headerOuter,
.headerInner,
.headerOuter {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}


.contStyleExcSimpleTable {
  width: 100% !important;
  max-width: 100% !important;
}


/* ========================================
   NAVIGATION DROPDOWN SUBMENU
   ======================================== */


.WaGadgetMenu ul ul,
.WaGadgetMenu li ul,
.WaGadgetMenu .sub-menu,
.WaGadgetMenu .dropdown-menu,
[class*="menu"] ul ul,
[class*="menu"] li ul {
  background-color: #1B3A6B !important;
  border: none !important;
  border-top: 3px solid #B8D430 !important;
  box-shadow: 0 8px 24px rgba(27, 58, 107, 0.25) !important;
  border-radius: 0 0 8px 8px !important;
}


.WaGadgetMenu ul ul a,
.WaGadgetMenu li ul li a,
.WaGadgetMenu .sub-menu a,
.WaGadgetMenu .dropdown-menu a,
[class*="menu"] li ul li a {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  display: block !important;
  background-color: transparent !important;
}


.WaGadgetMenu ul ul a:hover,
.WaGadgetMenu li ul li a:hover,
.WaGadgetMenu .sub-menu a:hover,
[class*="menu"] li ul li a:hover {
  color: #B8D430 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}


/* ========================================
   WIN UPCOMING EVENTS GADGET
   ======================================== */


.WaGadgetUpcomingEvents.win-events,
.win-events {
  background-color: #ffffff !important;
  padding: 0 40px 80px !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 760px !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li {
  background: #ffffff !important;
  border: 1px solid #E8EDF2 !important;
  border-left: 4px solid #B8D430 !important;
  border-radius: 10px !important;
  padding: 28px 32px !important;
  margin: 0 0 20px 0 !important;
  transition: box-shadow 0.2s ease, border-left-color 0.2s ease !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li:hover {
  box-shadow: 0 4px 16px rgba(27, 58, 107, 0.10) !important;
  border-left-color: #7C2177 !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li.last {
  margin-bottom: 0 !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody * {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #555555 !important;
  font-family: Arial, sans-serif !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li a,
.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li .eventTitle a,
body .WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li a {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #1B3A6B !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li a:hover,
body .WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li a:hover {
  color: #7C2177 !important;
  text-decoration: none !important;
}


/* ========================================
   HERO JUMP-NAV & CUSTOM BUTTON CLASSES
   ======================================== */


.win-hero-nav a,
.win-hero-nav a:visited,
.win-hero-nav a:link {
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: transparent !important;
  background-color: transparent !important;
}
.win-hero-nav a:hover { color: #B8D430 !important; }
.win-hero-nav { background: transparent !important; }

.win-btn-ocean,
.win-btn-ocean:visited,
.win-btn-ocean:link {
  color: #ffffff !important;
  text-decoration: none !important;
  background-color: #1B3A6B !important;
}
.win-btn-ocean:hover {
  background-color: #0f2347 !important;
  color: #ffffff !important;
}

.win-btn-donate,
.win-btn-donate:visited,
.win-btn-donate:link {
  color: #1B3A6B !important;
  text-decoration: none !important;
  background-color: #ffffff !important;
  border: 2px solid #1B3A6B !important;
}
.win-btn-donate:hover {
  background-color: #1B3A6B !important;
  color: #ffffff !important;
}

.win-btn-join,
.win-btn-join:visited,
.win-btn-join:link {
  color: #1B3A6B !important;
  text-decoration: none !important;
  background-color: #B8D430 !important;
}
.win-btn-join:hover {
  background-color: #9ab820 !important;
  color: #1B3A6B !important;
}


/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */


@media (max-width: 768px) {
  .WaGadgetMemberDirectory table,
  .WaGadgetMemberDirectory tbody {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .WaGadgetLogin {
    display: none !important;
  }

  h1 { font-size: 1.8em !important; }
  h2 { font-size: 1.5em !important; }

  .stylizedButton,
  a.stylizedButton {
    font-size: 16px !important;
    padding: 12px 24px !important;
    width: auto !important;
    display: inline-block !important;
    white-space: normal !important;
    max-width: 280px !important;
  }

  .WaGadgetUpcomingEvents.win-events {
    padding: 0 20px 60px !important;
  }
  .WaGadgetUpcomingEvents.win-events .gadgetStyleBody * {
    font-size: 16px !important;
  }
  .WaGadgetUpcomingEvents.win-events .gadgetStyleBody ul li a {
    font-size: 18px !important;
  }

  #wa-header img,
  #wa-header .WaGadgetLogo img,
  .WaGadgetLogo img,
  [id*="logo"] img,
  [class*="logo"] img,
  img[src*="Logo"],
  img[src*="logo"] {
    max-height: 52px !important;
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
  }

  .WaGadgetLogin,
  [class*="LoginLink"],
  [class*="loginLink"],
  [id*="login"],
  a[href*="login"],
  a[href*="Login"] {
    display: none !important;
  }

  #wa-header,
  [id*="header"],
  [class*="header"] {
    padding: 8px 16px !important;
    min-height: 0 !important;
  }

  .WaGadgetAccountLogo,
  .WaGadgetOnly.WaGadgetAccountLogo,
  div[style*="height:130px"],
  div[style*="height: 130px"] {
    height: auto !important;
    min-height: 0 !important;
  }

  .WaGadgetAccountLogo img,
  img[src*="Branding/Logo"],
  img[src*="branding/logo"] {
    max-height: 52px !important;
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
  }

  .WaGadgetAccountLogo .gadgetStyleBody,
  .WaGadgetAccountLogo .gadgetContentEditableArea {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .zonePlace.zoneHeader1,
  #id_Header,
  .WaPlaceHolderHeader {
    padding: 0 !important;
    margin: 0 !important;
  }

  .WaGadgetMenu,
  [class*="WaGadgetMenu"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .zonePlace,
  [class*="zonePlace"],
  .WaLayoutRow,
  [class*="WaLayoutRow"],
  .LayoutContainerOnly,
  [class*="LayoutContainer"],
  .WaPlaceHolder,
  .WaPlaceHolderHeader {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .gadgetStyleBody,
  .gadgetContentEditableArea,
  [class*="gadgetStyle"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


@media (max-width: 480px) {
  .WaGadgetMemberDirectory table,
  .WaGadgetMemberDirectory tbody {
    grid-template-columns: 1fr !important;
  }

  h1 { font-size: 1.6em !important; }
}

/* ========================================
   HEADER IMPROVEMENTS — August 2026
   ======================================== */

/* 1. Vertical alignment */
#wa-header table, #wa-header tr, #wa-header td, #wa-header th {
  vertical-align: middle !important;
}
.headerInner, .headerOuter, #wa-header .headerInner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 2. Nav font size — 15px final value */
#wa-header a,
[id*="nav"] a, [class*="nav"] a,
[id*="menu"] a, [class*="menu"] a {
  font-size: 15px !important;
}

/* 3. Login icon — separator + gap */
.WaGadgetLogin {
  margin-left: 20px !important;
  padding-left: 20px !important;
  border-left: 1px solid #D0D5DB !important;
}

/* 4. Bigger Donate / Join WIN buttons */
#wa-header .stylizedButton,
#wa-header a.stylizedButton,
#wa-header .button,
#wa-header a.button,
#wa-header a[href*="Join"],
#wa-header a[href*="join"],
#wa-header a[href*="donate"],
#wa-header a[href*="Donate"] {
  font-size: 15px !important;
  padding: 13px 28px !important;
  font-weight: 700 !important;
}
/* Make header full-width */
#wa-header,
#wa-header .headerOuter,
#wa-header .headerInner,
#wa-header .headerContainer,
#wa-header table,
#wa-header > div,
.headerOuter,
.headerInner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Add horizontal breathing room inside the header */
#wa-header .headerInner,
.headerInner {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
/* ========================================
   EVENTS SYSTEM PAGE — Corrected
   Real WA class: WaGadgetEventsStateList
   Updated: August 2026
   ======================================== */

/* ── Outer gadget wrapper — constrained width to match other pages ── */
.WaGadgetEventsStateList {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 40px 72px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* ── Section headings ("Upcoming events" / "Past events") ── */
.WaGadgetEventsStateList h3.sectionTitle {
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #7C2177 !important;
  padding-top: 52px !important;
  padding-bottom: 0 !important;
  margin-bottom: 28px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  line-height: 1 !important;
}

.WaGadgetEventsStateList h3.sectionTitle::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #C8D6E8 !important;
}

/* ── Page title / RSS link area ── */
.WaGadgetEventsStateList h1.pageTitle {
  display: none !important;
}

/* ── Event list ── */
.WaGadgetEventsStateList ul.boxesList {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Individual event items ── */
.WaGadgetEventsStateList li.boxesListItem {
  list-style: none !important;
  border-left: 4px solid #B8D430 !important;
  border-bottom: 1px solid #EBF0F8 !important;
  border-top: none !important;
  border-right: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  transition: background-color 0.2s ease, border-left-color 0.2s ease !important;
}

.WaGadgetEventsStateList li.boxesListItem:first-child {
  border-top: 1px solid #EBF0F8 !important;
}

.WaGadgetEventsStateList li.boxesListItem:hover {
  background: #F8FAFF !important;
  border-left-color: #1B3A6B !important;
}

/* ── Strip WA's default box/card decoration ── */
.WaGadgetEventsStateList .boxViewOutline,
.WaGadgetEventsStateList .boxOuterContainer,
.WaGadgetEventsStateList .boxContainer,
.WaGadgetEventsStateList .boxHeaderOuterContainer,
.WaGadgetEventsStateList .boxHeaderContainer {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Inner content padding */
.WaGadgetEventsStateList li.boxesListItem > .boxOuterContainer > .boxContainer > .d1 > .d2 > .d3 > .d4 > .d5 > .d6 > .d7 > .d8 > .d9 > .inner {
  padding: 32px 36px !important;
}

/* ── Event title ── */
.WaGadgetEventsStateList h4.boxHeaderTitle {
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  border: none !important;
  background: transparent !important;
}

.WaGadgetEventsStateList a.eventDetailsLink {
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  text-decoration: none !important;
}

.WaGadgetEventsStateList a.eventDetailsLink:hover {
  color: #7C2177 !important;
}


/* ── "Show details" / "Register" links ── */
.WaGadgetEventsStateList li.boxesListItem a:not(.eventDetailsLink) {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  text-decoration: none !important;
}

/* Register button — plum background, white text */
.WaGadgetEventsStateList a.registrationLink,
.WaGadgetEventsStateList a[class*="egister"],
.WaGadgetEventsStateList a[class*="Registration"],
.WaGadgetEventsStateList .registrationButton a,
.WaGadgetEventsStateList .registrationAction a,
.WaGadgetEventsStateList [class*="egistration"] a,
.WaGadgetEventsStateList .boxInfoContainer a,
.WaGadgetEventsStateList li.boxesListItem .inner a[class*="btn"],
.WaGadgetEventsStateList li.boxesListItem .inner a[class*="button"] {
  display: inline-block !important;
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
}

.WaGadgetEventsStateList a.registrationLink:hover,
.WaGadgetEventsStateList a[class*="egister"]:hover,
.WaGadgetEventsStateList input[type="submit"]:hover,
.WaGadgetEventsStateList input[type="button"]:hover,
.WaGadgetEventsStateList button[class*="egist"]:hover,
.WaGadgetEventsStateList li.boxesListItem button:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}

/* Same styles for button/input elements */
.WaGadgetEventsStateList input[type="submit"],
.WaGadgetEventsStateList input[type="button"],
.WaGadgetEventsStateList button[class*="egist"],
.WaGadgetEventsStateList li.boxesListItem button {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 0 !important;
}

/* ── No events message ── */
.WaGadgetEventsStateList .noEventMessage,
.WaGadgetEventsStateList .noEvents {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  color: #888888 !important;
  padding: 40px 0 !important;
  font-style: italic !important;
}

/* ── Past events compact list ── */
.WaGadgetEventsStateList .pastEventsContainer ul,
.WaGadgetEventsStateList .pastEventsContainer ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.WaGadgetEventsStateList .pastEventsContainer li {
  padding: 14px 0 !important;
  border-bottom: 1px solid #EBF0F8 !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
}

.WaGadgetEventsStateList .pastEventsContainer a {
  color: #1B3A6B !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.WaGadgetEventsStateList .pastEventsContainer a:hover {
  color: #7C2177 !important;
}

/* ══════════════════════════════════════════
   CALENDAR VIEW  —  WaGadgetEventsStateCalendar
   ══════════════════════════════════════════ */

/* ── Month title "MONTH: NOVEMBER 2026" ── */
.WaGadgetEventsStateCalendar .calMonthTitle,
.WaGadgetEventsStateCalendar h2,
.WaGadgetEventsStateCalendar .pageTitle {
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ── Navigation buttons (WEEK / MONTH / YEAR / PREV / TODAY / NEXT) ── */
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] a,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] span {
  background: #1B3A6B !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
}

/* Hover on nav buttons */
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] a:hover,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] span:hover {
  background: #7C2177 !important;
  color: #ffffff !important;
}

/* Active/selected tab (MONTH when in month view) */
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button].activeButton a,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button].activeButton span,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button].selected a,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button].selected span,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button].active a,
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button].active span {
  background: #B8D430 !important;
  color: #1B3A6B !important;
}

/* ── Day-of-week headers (Sunday … Saturday) ── */
.WaGadgetEventsStateCalendar .calHeader th,
.WaGadgetEventsStateCalendar table th {
  background: #1B3A6B !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 10px 8px !important;
  text-align: center !important;
  border: none !important;
}

/* ── Calendar cells ── */
.WaGadgetEventsStateCalendar table td {
  background: #ffffff !important;
  border: 1px solid #EBF0F8 !important;
  vertical-align: top !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  color: #1B3A6B !important;
  padding: 8px 10px !important;
}

/* Today highlight */
.WaGadgetEventsStateCalendar table td.today,
.WaGadgetEventsStateCalendar table td.calToday {
  background: #EBF0F8 !important;
}

/* Out-of-month days */
.WaGadgetEventsStateCalendar table td.calNotCurrentMonth,
.WaGadgetEventsStateCalendar table td.otherMonth {
  background: #f8f9fb !important;
  color: #aaaaaa !important;
}

/* ── Date number links — plain text, no pill ── */
.WaGadgetEventsStateCalendar table td a {
  display: inline !important;
  background: none !important;
  background-color: transparent !important;
  color: #1B3A6B !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.WaGadgetEventsStateCalendar table td a:hover {
  background: none !important;
  background-color: transparent !important;
  color: #7C2177 !important;
  text-decoration: underline !important;
}

/* ── Event pills — target the actual container div ── */
.WaGadgetEventsStateCalendar div.eventDivItem {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  border-radius: 4px !important;
  padding: 3px 7px !important;
  margin-bottom: 3px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.WaGadgetEventsStateCalendar div.eventDivItem:hover {
  background: #1B3A6B !important;
  background-color: #1B3A6B !important;
}

/* Text inside event pill */
.WaGadgetEventsStateCalendar div.eventDivItem .eventTime,
.WaGadgetEventsStateCalendar div.eventDivItem div,
.WaGadgetEventsStateCalendar div.eventDivItem a {
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: none !important;
  background-color: transparent !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}


/* ══════════════════════════════════════════
   EVENT DETAIL PAGE  —  WaGadgetEventsStateDetails
   (page user lands on after clicking "Show Details")
   ══════════════════════════════════════════ */

/* ── Outer gadget wrapper — constrain width ── */
.WaGadgetEventsStateDetails {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 40px 72px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* Target every likely inner wrapper WA uses */
.WaGadgetEventsStateDetails .gadgetBody,
.WaGadgetEventsStateDetails .viewOuterContainer,
.WaGadgetEventsStateDetails .eventViewOuter,
.WaGadgetEventsStateDetails .eventViewBody,
.WaGadgetEventsStateDetails .boxOuterContainer,
.WaGadgetEventsStateDetails .boxContainer {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Page / event title ── */
.WaGadgetEventsStateDetails h1,
.WaGadgetEventsStateDetails h1.pageTitle,
.WaGadgetEventsStateDetails .eventTitle {
  font-family: Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  margin: 32px 0 24px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  border: none !important;
  background: transparent !important;
}

/* ── Section sub-headings inside detail (e.g. "Event Details") ── */
.WaGadgetEventsStateDetails h2,
.WaGadgetEventsStateDetails h3 {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #7C2177 !important;
  border: none !important;
  background: transparent !important;
}

/* ── Nuclear reset: strip ALL blue box styling inside the gadget ── */
.WaGadgetEventsStateDetails div,
.WaGadgetEventsStateDetails table,
.WaGadgetEventsStateDetails td,
.WaGadgetEventsStateDetails tr,
.WaGadgetEventsStateDetails th,
.WaGadgetEventsStateDetails span,
.WaGadgetEventsStateDetails ul,
.WaGadgetEventsStateDetails li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── WHEN / LOCATION labels — plum uppercase ── */
.WaGadgetEventsStateDetails .boxInfoContainer ul.boxInfo li label,
.WaGadgetEventsStateDetails ul.boxInfo li label,
.WaGadgetEventsStateDetails .eventAttribute label,
.WaGadgetEventsStateDetails table.eventInfoTable td.eventAttributeLabel,
.WaGadgetEventsStateDetails td.label,
.WaGadgetEventsStateDetails .fieldLabel {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7C2177 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
  border: none !important;
}

/* ── WHEN / LOCATION values — navy body text ── */
.WaGadgetEventsStateDetails .boxInfoContainer ul.boxInfo li div,
.WaGadgetEventsStateDetails ul.boxInfo li div,
.WaGadgetEventsStateDetails .eventAttribute .value,
.WaGadgetEventsStateDetails table.eventInfoTable td.eventAttributeValue,
.WaGadgetEventsStateDetails td.value,
.WaGadgetEventsStateDetails .fieldValue {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1B3A6B !important;
  background: transparent !important;
  border: none !important;
}

/* ── General links in body ── */
.WaGadgetEventsStateDetails a {
  color: #1B3A6B !important;
  text-decoration: none !important;
}

.WaGadgetEventsStateDetails a:hover {
  color: #7C2177 !important;
  text-decoration: underline !important;
}

/* ── Register / action button — plum ── */
/* Must come AFTER the nuclear reset to override transparent bg */
.WaGadgetEventsStateDetails input.typeButton,
.WaGadgetEventsStateDetails input[type="submit"],
.WaGadgetEventsStateDetails input[type="button"],
.WaGadgetEventsStateDetails button.typeButton,
.WaGadgetEventsStateDetails .boxActionContainer input,
.WaGadgetEventsStateDetails .registrationAction input,
.WaGadgetEventsStateDetails a.registrationLink,
.WaGadgetEventsStateDetails a[class*="egister"],
.WaGadgetEventsStateDetails a[class*="Registration"] {
  display: inline-block !important;
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin-top: 20px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.WaGadgetEventsStateDetails input.typeButton:hover,
.WaGadgetEventsStateDetails input[type="submit"]:hover,
.WaGadgetEventsStateDetails input[type="button"]:hover,
.WaGadgetEventsStateDetails a.registrationLink:hover,
.WaGadgetEventsStateDetails a[class*="egister"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}

/* ── Event description body text ── */
.WaGadgetEventsStateDetails .boxDescription,
.WaGadgetEventsStateDetails .eventDescription {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  color: #1A1A2E !important;
  line-height: 1.65 !important;
  margin-top: 28px !important;
}

/* ── "Back to events list" link ── */
.WaGadgetEventsStateDetails .backLink,
.WaGadgetEventsStateDetails a[href*="events"] {
  font-size: 13px !important;
  color: #1B3A6B !important;
  font-weight: 600 !important;
}


/* ══════════════════════════════════════════
   EVENTS LIST PAGE — MISSING FIX BLOCKS
   (added separately so they override base styles above)
   ══════════════════════════════════════════ */

/* ── 1. Nuclear reset: strip ALL blue box styling inside each event card ──
   WA wraps the When/Location table in nested divs with blue backgrounds.
   Wipe everything, then restore colours below.                           */
.WaGadgetEventsStateList li.boxesListItem div,
.WaGadgetEventsStateList li.boxesListItem table,
.WaGadgetEventsStateList li.boxesListItem td,
.WaGadgetEventsStateList li.boxesListItem tr,
.WaGadgetEventsStateList li.boxesListItem th,
.WaGadgetEventsStateList li.boxesListItem span,
.WaGadgetEventsStateList li.boxesListItem ul,
.WaGadgetEventsStateList li.boxesListItem li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── 2. WHEN / LOCATION labels — plum uppercase ── */
.WaGadgetEventsStateList .boxInfoContainer ul.boxInfo li label,
.WaGadgetEventsStateList ul.boxInfo li label {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7C2177 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
  border: none !important;
}

/* ── 3. WHEN / LOCATION values — navy ── */
.WaGadgetEventsStateList .boxInfoContainer ul.boxInfo li div,
.WaGadgetEventsStateList ul.boxInfo li div {
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  color: #1B3A6B !important;
  background: transparent !important;
  border: none !important;
}

/* ── 4. Register button — the real WA class is input.typeButton ──
   Must come AFTER nuclear reset to restore background.             */
.WaGadgetEventsStateList input.typeButton,
.WaGadgetEventsStateList input[type="submit"],
.WaGadgetEventsStateList input[type="button"] {
  display: block !important;
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  margin-left: 0 !important;
}

.WaGadgetEventsStateList input.typeButton:hover,
.WaGadgetEventsStateList input[type="submit"]:hover,
.WaGadgetEventsStateList input[type="button"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}

/* ── 5. Button container — clear float so button sits left-aligned ── */
.WaGadgetEventsStateList .boxActionContainer {
  clear: both !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  border: none !important;
}


/* ══════════════════════════════════════════
   EVENT DETAIL PAGE — ADDITIONAL FIXES
   (supplements the WaGadgetEventsStateDetails block above)
   ══════════════════════════════════════════ */

/* ── Title: prevent left-clip from WA's negative margin ── */
.WaGadgetEventsStateDetails h1,
.WaGadgetEventsStateDetails h1.pageTitle {
  padding-left: 0 !important;
  margin-left: 0 !important;
  overflow: visible !important;
}

/* ── WHEN / LOCATION labels on detail page ──
   WA uses a table-based layout on the detail page:
   table.eventInfo td (label column) + td (value column)            */
.WaGadgetEventsStateDetails table td:first-child,
.WaGadgetEventsStateDetails .boxInfoContainer label,
.WaGadgetEventsStateDetails ul.boxInfo li label,
.WaGadgetEventsStateDetails .eventAttribute > span:first-child,
.WaGadgetEventsStateDetails td.fieldLabel,
.WaGadgetEventsStateDetails .fieldName {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7C2177 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  padding-right: 16px !important;
}

/* ── Register button on detail page — high-specificity override ── */
body .WaGadgetEventsStateDetails input.typeButton,
body .WaGadgetEventsStateDetails input[type="submit"],
body .WaGadgetEventsStateDetails input[type="button"],
body .WaGadgetEventsStateDetails button[type="submit"],
body .WaGadgetEventsStateDetails .registrationButton input,
body .WaGadgetEventsStateDetails .boxActionContainer input {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-block !important;
}

body .WaGadgetEventsStateDetails input.typeButton:hover,
body .WaGadgetEventsStateDetails input[type="submit"]:hover,
body .WaGadgetEventsStateDetails input[type="button"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}


/* ══════════════════════════════════════════
   EVENT DETAIL PAGE — CONFIRMED SELECTORS
   (verified via DevTools on /event-6804228)
   Real gadget class: WaGadgetEventsStateDetails
   Label class: eventInfoBoxLabel
   Button classes: typeButton registerButton
   ══════════════════════════════════════════ */

/* WHEN / LOCATION labels — confirmed class: eventInfoBoxLabel */
.WaGadgetEventsStateDetails label.eventInfoBoxLabel {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7C2177 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
}

/* Ticket type label */
.WaGadgetEventsStateDetails label.regTypeLiLabel {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  color: #1B3A6B !important;
  font-weight: 600 !important;
}

/* Register button — confirmed classes: typeButton registerButton, type: button */
.WaGadgetEventsStateDetails input.typeButton,
.WaGadgetEventsStateDetails input.registerButton,
body .WaGadgetEventsStateDetails input[value="Register"],
body .WaGadgetEventsStateDetails input[type="button"] {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-block !important;
}

body .WaGadgetEventsStateDetails input.typeButton:hover,
body .WaGadgetEventsStateDetails input.registerButton:hover,
body .WaGadgetEventsStateDetails input[type="button"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}


/* ══════════════════════════════════════════
   REGISTRATION PAGE — WaGadgetEventsStateRegistration
   Confirmed via DevTools on /event-6804228
   Buttons: input.nextButton (value="Next" / value="Cancel")
   Email: input.typeText
   Info box: .infoOuterContainer
   ══════════════════════════════════════════ */

/* ── Gadget wrapper ── */
.WaGadgetEventsStateRegistration {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 40px 72px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* ── Event info summary box — strip blue, add brand strip ── */
.WaGadgetEventsStateRegistration .infoOuterContainer {
  background: #EBF0F8 !important;
  background-color: #EBF0F8 !important;
  border: none !important;
  border-left: 4px solid #1B3A6B !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 20px 24px !important;
  margin-bottom: 32px !important;
  box-shadow: none !important;
}

/* ── Info box — all child divs/tds transparent ── */
.WaGadgetEventsStateRegistration .infoOuterContainer div,
.WaGadgetEventsStateRegistration .infoOuterContainer td,
.WaGadgetEventsStateRegistration .infoOuterContainer tr,
.WaGadgetEventsStateRegistration .infoOuterContainer table,
.WaGadgetEventsStateRegistration .infoOuterContainer span {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: #1B3A6B !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
}

/* ── Info box label column (e.g. "Event") ── */
.WaGadgetEventsStateRegistration .infoOuterContainer td:first-child,
.WaGadgetEventsStateRegistration .infoOuterContainer .infoLabel,
.WaGadgetEventsStateRegistration .infoOuterContainer label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7C2177 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
  padding-right: 16px !important;
  vertical-align: top !important;
}

/* ── Step/section headers (e.g. "Enter registrant email") ── */
.WaGadgetEventsStateRegistration h2,
.WaGadgetEventsStateRegistration h3,
.WaGadgetEventsStateRegistration .sectionTitle,
.WaGadgetEventsStateRegistration .stepTitle,
.WaGadgetEventsStateRegistration .wizardStep h2 {
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Asterisk on mandatory field labels (WA renders as strong.mandatoryLabel) ── */
.WaGadgetEventsStateRegistration strong.mandatoryLabel::after {
  content: " *";
  color: #C0392B !important;
  font-weight: 700;
}

/* ── Remove separator line below section heading ── */
.WaGadgetEventsStateRegistration hr,
.WaGadgetEventsStateRegistration .sectionSeparator,
.WaGadgetEventsStateRegistration .divider {
  display: none !important;
  border: none !important;
}
/* Kill border-top on element immediately after any heading */
.WaGadgetEventsStateRegistration h2 + *,
.WaGadgetEventsStateRegistration h3 + * {
  border-top: none !important;
}
/* Nuclear: kill all top/bottom borders on direct children of the gadget that look like separators */
.WaGadgetEventsStateRegistration > div > hr,
.WaGadgetEventsStateRegistration > table > tbody > tr > td > hr,
.WaGadgetEventsStateRegistration tbody > tr:first-child > td {
  border-top: none !important;
}
/* And any bottom border WA applies to the heading itself */
.WaGadgetEventsStateRegistration h2,
.WaGadgetEventsStateRegistration h3 {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── Email / text inputs (exclude read-only — WA uses readonly inputs for display text) ── */
.WaGadgetEventsStateRegistration input.typeText:not([readonly]),
.WaGadgetEventsStateRegistration input[type="text"]:not([readonly]),
.WaGadgetEventsStateRegistration input[type="email"]:not([readonly]) {
  border: 1.5px solid #C8D6E8 !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  color: #1A1A2E !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
/* Read-only display inputs — transparent, no border */
.WaGadgetEventsStateRegistration input[readonly] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.WaGadgetEventsStateRegistration input.typeText:focus,
.WaGadgetEventsStateRegistration input[type="text"]:focus,
.WaGadgetEventsStateRegistration input[type="email"]:focus {
  border-color: #1B3A6B !important;
  outline: none !important;
}

/* ── NEXT button — plum ── */
.WaGadgetEventsStateRegistration input.nextButton[value="Next"],
.WaGadgetEventsStateRegistration input.nextButton[value="NEXT"] {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.WaGadgetEventsStateRegistration input.nextButton[value="Next"]:hover,
.WaGadgetEventsStateRegistration input.nextButton[value="NEXT"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}

/* ── CANCEL / BACK buttons — navy outline ── */
.WaGadgetEventsStateRegistration input.nextButton[value="Cancel"],
.WaGadgetEventsStateRegistration input.nextButton[value="CANCEL"],
.WaGadgetEventsStateRegistration input.nextButton[value="Back"],
.WaGadgetEventsStateRegistration input.nextButton[value="BACK"],
.WaGadgetEventsStateRegistration input.nextButton.hidden[value="Cancel"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #1B3A6B !important;
  border: 2px solid #1B3A6B !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.WaGadgetEventsStateRegistration input.nextButton[value="Cancel"]:hover,
.WaGadgetEventsStateRegistration input.nextButton[value="CANCEL"]:hover,
.WaGadgetEventsStateRegistration input.nextButton[value="Back"]:hover,
.WaGadgetEventsStateRegistration input.nextButton[value="BACK"]:hover {
  background: #1B3A6B !important;
  background-color: #1B3A6B !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   REGISTRATION — REVIEW / CONFIRM PAGE
   ════════════════════════════════════════════════════════════════ */

/* ── "Review and confirm" box — leave WA cornersContainer default styling ── */
/* ── Review box: real class names found via DevTools ──
   Outer: div.confirmWindowInfo.messageBox / inner: .cww > .cww-inner > .cww-co
   White strip = div.header getting var(--white) from our own global [class*="header"] rule ── */

/* Override the white from our own header rule — make it transparent */
.WaGadgetEventsStateRegistration .cww-co .header,
.WaGadgetEventsStateRegistration .commonMessageBox .header {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
}

/* Style the whole review box */
.WaGadgetEventsStateRegistration .confirmWindowInfo,
.WaGadgetEventsStateRegistration .commonMessageBox {
  border: none !important;
  border-left: 4px solid #1B3A6B !important;
  box-shadow: none !important;
  border-radius: 0 6px 6px 0 !important;
}

/* Wipe borders from cww inner structure */
.WaGadgetEventsStateRegistration .cww,
.WaGadgetEventsStateRegistration .cww-inner,
.WaGadgetEventsStateRegistration .cww-co {
  border: none !important;
  box-shadow: none !important;
}

/* ── CONFIRM button — plum (class is nextButtonAutoWidth, not nextButton) ── */
.WaGadgetEventsStateRegistration input.nextButtonAutoWidth[value="Confirm"],
body .WaGadgetEventsStateRegistration input.nextButtonAutoWidth {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
.WaGadgetEventsStateRegistration input.nextButtonAutoWidth:hover {
  background: #5a1857 !important;
  background-color: #5a1857 !important;
  border-color: #5a1857 !important;
}
/* ══════════════════════════════════════════
   MEMBERSHIP APPLICATION — WaGadgetMembershipApplication
   ══════════════════════════════════════════ */

/* ── Outer wrapper ── */
.WaGadgetMembershipApplication {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 40px 72px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* ── Nuclear reset: strip all WA blue box styling ── */
.WaGadgetMembershipApplication div,
.WaGadgetMembershipApplication table,
.WaGadgetMembershipApplication td,
.WaGadgetMembershipApplication tr,
.WaGadgetMembershipApplication th,
.WaGadgetMembershipApplication span,
.WaGadgetMembershipApplication ul,
.WaGadgetMembershipApplication li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Step headings ("Select membership level" / "Fill in application form") ── */
.WaGadgetMembershipApplication h2,
.WaGadgetMembershipApplication h3,
.WaGadgetMembershipApplication .sectionTitle,
.WaGadgetMembershipApplication .stepTitle {
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── "Mandatory fields" label ── */
.WaGadgetMembershipApplication .mandatoryNote,
.WaGadgetMembershipApplication .mandatoryLabel {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  color: #888888 !important;
}

/* ── Field labels (First name, Last name, etc.) ── */
.WaGadgetMembershipApplication label,
.WaGadgetMembershipApplication .fieldLabel,
.WaGadgetMembershipApplication td.fieldLabel {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7C2177 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
}

/* ── Membership level radio button labels ── */
.WaGadgetMembershipApplication .membershipLevelLabel,
.WaGadgetMembershipApplication label.regTypeLiLabel,
.WaGadgetMembershipApplication .levelName {
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Level description text (subscription period, pricing) ── */
.WaGadgetMembershipApplication .levelDescription,
.WaGadgetMembershipApplication .membershipLevelDescription {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  color: #666666 !important;
}

/* ── Text / email / phone inputs ── */
.WaGadgetMembershipApplication input[type="text"]:not([readonly]),
.WaGadgetMembershipApplication input[type="email"]:not([readonly]),
.WaGadgetMembershipApplication input[type="tel"]:not([readonly]),
.WaGadgetMembershipApplication input.typeText:not([readonly]),
.WaGadgetMembershipApplication textarea {
  border: 1.5px solid #C8D6E8 !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  color: #1A1A2E !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.WaGadgetMembershipApplication input[type="text"]:focus,
.WaGadgetMembershipApplication input[type="email"]:focus,
.WaGadgetMembershipApplication input[type="tel"]:focus,
.WaGadgetMembershipApplication textarea:focus {
  border-color: #1B3A6B !important;
  outline: none !important;
}

/* ── Read-only display inputs — no border ── */
.WaGadgetMembershipApplication input[readonly] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── NEXT button — plum ── */
.WaGadgetMembershipApplication input.nextButton[value="Next"],
.WaGadgetMembershipApplication input.nextButton[value="NEXT"],
body .WaGadgetMembershipApplication .nextButton {
  background: #7C2177 !important;
  background-color: #7C2177 !important;
  color: #ffffff !important;
  border: 2px solid #7C2177 !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.WaGadgetMembershipApplication input.nextButton[value="Next"]:hover,
.WaGadgetMembershipApplication input.nextButton[value="NEXT"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #7C2177 !important;
  border-color: #7C2177 !important;
}

/* ── BACK / CANCEL buttons — navy outline ── */
.WaGadgetMembershipApplication input.nextButton[value="Cancel"],
.WaGadgetMembershipApplication input.nextButton[value="CANCEL"],
.WaGadgetMembershipApplication input.nextButton[value="Back"],
.WaGadgetMembershipApplication input.nextButton[value="BACK"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #1B3A6B !important;
  border: 2px solid #1B3A6B !important;
  padding: 14px 30px !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.WaGadgetMembershipApplication input.nextButton[value="Cancel"]:hover,
.WaGadgetMembershipApplication input.nextButton[value="Back"]:hover {
  background: #1B3A6B !important;
  background-color: #1B3A6B !important;
  color: #ffffff !important;
}

/* ── Separators — remove ── */
.WaGadgetMembershipApplication hr,
.WaGadgetMembershipApplication .sectionSeparator {
  display: none !important;
}
/* ══════════════════════════════════════════
   MEMBERSHIP APPLICATION — VISUAL ENHANCEMENTS
   ══════════════════════════════════════════ */

/* ── Fix: level names should NOT be all-caps — override the label rule ── */
.WaGadgetMembershipApplication input[type="radio"] + label,
.WaGadgetMembershipApplication input[type="radio"] ~ label,
.WaGadgetMembershipApplication .membershipLevelLabel,
.WaGadgetMembershipApplication label.regTypeLiLabel {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
}

/* ── Level picker container — add a light background panel ── */
.WaGadgetMembershipApplication .fieldset-container,
.WaGadgetMembershipApplication .membershipLevelsList,
.WaGadgetMembershipApplication ul[class*="level"],
.WaGadgetMembershipApplication .fieldsContainer {
  background: #EBF0F8 !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin-bottom: 32px !important;
}

/* ── Each level row — card style with hover ── */
.WaGadgetMembershipApplication .membershipLevelItem,
.WaGadgetMembershipApplication ul[class*="level"] > li,
.WaGadgetMembershipApplication .levelListItem,
.WaGadgetMembershipApplication .regTypeItem {
  background: #ffffff !important;
  border-radius: 8px !important;
  border-left: 4px solid #C8D6E8 !important;
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
  transition: border-left-color 0.2s ease, background 0.2s ease !important;
  cursor: pointer !important;
}

.WaGadgetMembershipApplication .membershipLevelItem:hover,
.WaGadgetMembershipApplication ul[class*="level"] > li:hover,
.WaGadgetMembershipApplication .regTypeItem:hover {
  border-left-color: #1B3A6B !important;
  background: #f8faff !important;
}

/* ── "Select membership level" heading — match other page section headers ── */
.WaGadgetMembershipApplication h2:first-of-type,
.WaGadgetMembershipApplication .pageTitle {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #7C2177 !important;
  margin-bottom: 8px !important;
}

/* ── Price text inside level label — make it pop ── */
.WaGadgetMembershipApplication .membershipFee,
.WaGadgetMembershipApplication .levelPrice,
.WaGadgetMembershipApplication [class*="price"],
.WaGadgetMembershipApplication [class*="fee"] {
  color: #B8D430 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* ── Description text under each level (subscription period etc.) ── */
.WaGadgetMembershipApplication .membershipLevelDescription,
.WaGadgetMembershipApplication .levelDescription,
.WaGadgetMembershipApplication .regTypeDescription {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  color: #888888 !important;
  margin-top: 4px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* ── NEXT button — larger, full-width-ish ── */
.WaGadgetMembershipApplication input.nextButton[value="Next"] {
  margin-top: 8px !important;
  padding: 16px 48px !important;
  font-size: 17px !important;
}
/* ── VARIATION 3: Bold navy cards (fixed readability) ───────────────── */

.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) {
  display: flex !important;
  align-items: center !important;
  border: 2px solid #1B3A6B !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 0 0 10px !important;
  background: #1B3A6B !important;
  cursor: pointer !important;
}

.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties):hover {
  border-color: #B8D430 !important;
  background: #243f72 !important;
}

.WaGadgetMembershipApplication .fieldItem:has(input:checked) {
  border-color: #B8D430 !important;
  border-left: 5px solid #B8D430 !important;
  background: #243f72 !important;
}

.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) input[type="radio"] {
  accent-color: #B8D430 !important;
}

.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) strong.labelTitle {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  display: block !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) strong.labelSubTitle {
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #B8D430 !important;
  display: block !important;
  margin: 0 0 8px !important;
}

.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) .textLine.typeInstruction {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.8) !important;
  display: block !important;
  line-height: 1.6 !important;
}
.WaGadgetMembershipApplication .radioGroupContainer strong.labelSubTitle {
  color: #B8D430 !important;
}
.WaGadgetMembershipApplication .radioGroupContainer label.levelProperties strong.labelSubTitle {
  color: #B8D430 !important;
}
.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) [class*="fee"],
.WaGadgetMembershipApplication .fieldItem:has(label.levelProperties) [class*="price"] {
  color: #B8D430 !important;
}