/* HLRC 2026 - EventsAir Custom Bootstrap CSS v26 - REGISTRATION FORM MOCKUP MATCH */
/* Matches the client's polished registration form mockup (Picture1.jpg):
   navy body copy, navy section headings with a short orange accent bar
   instead of a full-width underline, light-blue info callouts, light-blue
   highlighted selected option cards. */
/* Brand colors: Confident Dark Blue #1F3867 / Orange #FA7828 / Vibrant Blue #278DFF (links) */
/* Font: Barlow (Google Fonts), replacing the previous Source Sans 3 placeholder */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');
/* Includes technical fixes validated during live testing: SlimSelect dropdowns,
   .alert-messages, header banner image cropping. */

/* ---------- 0. COLOR VARIABLES ---------- */
:root {
  --ecw-bg-page: #eef1f5;
  --ecw-navy: #1F3867;
  --ecw-orange: #FA7828;
  --ecw-orange-hover: #d4630f;
  --ecw-link: #1c3462;
  --ecw-link-hover: #12233f;
  --ecw-text: #374151;
  --ecw-text-muted: #6b7280;
  --ecw-border: #e5e7eb;
  --ecw-info-bg: #e7f3fd;
  --ecw-selected-bg: #e7f3fd;
  --ecw-selected-border: #1c3462;
}

/* ---------- 1. BASE & TYPOGRAPHY ---------- */
body {
  background-color: var(--ecw-bg-page) !important;
}

body,
.form-control,
.input-group,
input,
textarea,
select,
button,
.btn,
.modal-content,
.panel,
.card,
.alert,
.badge,
.label,
.nav-tabs,
.nav-pills,
.tab-content,
.dropdown-menu,
.table,
.list-group,
.well,
.help-block,
.form-text,
.small,
.lead {
  font-family: 'Barlow', Helvetica, Arial, sans-serif !important;
}

/* Broad catch-all so Barlow applies to EVERY element in the app (per client
   request "change the font across the entire application"), not just the
   specific classes listed above - some EventsAir elements (e.g.
   div.fee-option-header) weren't covered by that list and stayed on Arial. */
body * {
  font-family: 'Barlow', Helvetica, Arial, sans-serif !important;
}

/* Body copy: navy blue (not gray) per the new mockup */
p, li, td, th,
span:not(.badge):not(.label):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn-text) {
  color: var(--ecw-navy) !important;
}

/* Section headings ("How would you like to attend?", "Personal information",
   "Professional information") - navy bold text with a short orange accent
   bar above, instead of the previous full-width underline. ASSUMPTION: this
   applies uniformly to all of h2/.section-title/.question-title/etc. If the
   very top page title (like "REGISTRATION" in the mockup) needs a different,
   smaller eyebrow-label treatment instead, send a devtools screenshot of it
   and we'll add a more specific selector (e.g. :first-of-type) to split it
   out from the section headings below. */
h1, h2,
.h1, .h2,
.page-title,
.section-title,
.question-title,
.survey-question-title,
.form-section-title,
.modern-heading {
  color: var(--ecw-navy) !important;
  font-family: 'Barlow', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-top: 14px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  /* Confirmed via devtools: EventsAir renders this heading (h2.modern-heading)
     as a flex container, which was pushing our ::before bar beside the text
     instead of above it. Force block layout instead. */
  display: block !important;
}

/* Heading hierarchy: h1 28px / h2 22px / h3 18px, per client feedback that
   all-same-size headings (previous version) looked too flat. */
h1, .h1, .page-title {
  font-size: 28px !important;
}

h2,.h2{
  margin-top: 30px !important;
  margin-bottom: 25px !important;
}

h2, .h2,
.section-title,
.question-title,
.survey-question-title,
.form-section-title,
.modern-heading {
  font-size: 24px !important;
  font-weight: 500 !important;
}

h1::before,
.h1::before,
.page-title::before,
.section-title::before,
.question-title::before,
.survey-question-title::before,
.form-section-title::before{
  content: "" !important;
  display: block !important;
  width: 48px !important;
  height: 6px !important;
  background-color: var(--ecw-orange) !important;
  border-radius: 2px !important;
  margin-bottom: 10px !important;
}

h2::after, .h2::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  margin: 10px 0;
  background-color: var(--ecw-orange) !important;
}

/* h3 (e.g. the centered "Registration" title) - no orange bar, even if it
   also carries a class (like .modern-heading) matched above. The rule below
   needs to beat that class-based ::before on specificity, so it's scoped as
   "h3.modern-heading::before" etc. (element+class) rather than a plain
   "h3::before" which was too low-specificity to win. */
h3.modern-heading::before,
h3.page-title::before,
h3.section-title::before,
h3.question-title::before,
h3.survey-question-title::before,
h3.form-section-title::before,
h3::before {
  content: none !important;
  display: none !important;
}

/* Sub-level titles (card/panel headings within a section) - dark navy */
h3, h4, h5, h6,
.h3, .h4, .h5, .h6,
.card-title,
.panel-title {
  color: var(--ecw-navy) !important;
  font-family: 'Barlow', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}

h3, .h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #333 !important;
}

h3.text-center {
  text-align: left !important;
  font-size: 26px !important;
  color: var(--ecw-orange) !important;
  margin-top: -10px !important;
    padding-top: 0 !important;
}

.control-label,
label,
legend {
  color: var(--ecw-navy) !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
}

a {
  color: var(--ecw-link) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

a:hover,
a:focus {
  color: var(--ecw-link-hover) !important;
  text-decoration: underline !important;
}

/* ---------- 2. FORM CONTROLS ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select,
.form-select {
  border: 2px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: var(--ecw-navy) !important;
  background-color: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus,
input:focus:not([type="radio"]):not([type="checkbox"]),
textarea:focus,
select:focus,
.form-select:focus {
  border-color: var(--ecw-orange) !important;
  box-shadow: 0 0 0 3px rgba(250, 120, 40, 0.15) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

.form-group {
  margin-bottom: 20px !important;
}

/* ---------- 2b. RADIO/CHECKBOX OPTION CARDS ---------- */
/* Selectable option cards (e.g. "In person in Geneva" / "Online"). Confirmed
   via devtools: div.callout.fee-option-card.modern-option.radio-marker.
   Default state gets a neutral gray border (overriding EventsAir's default
   purple); checked state gets the light blue fill + blue border. */
.fee-option-card,
.modern-option {
  border-color: var(--ecw-border) !important;
}

/* Confirmed via devtools: div.fee-option-header wraps the option's label
   text, nested inside .fee-option > label.callout-label > .fee-option-header
   > .fee-option-details > .fee-option-details-header > span.label-text.
   Centering just the outer levels wasn't enough - the text still sat above
   the middle line for some users (possibly a Barlow font-metrics quirk,
   since it wasn't happening before the font change). Centering every nested
   flex level so there's no level left uncentered. */
.fee-option-card,
.modern-option,
.fee-option,
.callout-label,
.fee-option-header,
.fee-option-details,
.fee-option-details-header {
  display: flex !important;
  align-items: center !important;
}

.label-text {
  line-height: 1.3 !important;
}

.option-card:has(input:checked),
.radio-card:has(input:checked),
.form-check:has(input:checked),
.answer-option:has(input:checked),
.fee-option-card:has(input:checked),
.modern-option:has(input:checked),
label:has(> input[type="radio"]:checked) {
  background-color: var(--ecw-selected-bg) !important;
  border-color: var(--ecw-selected-border) !important;
}

/* Confirmed via devtools: div.radio-group - the wrapper around a set of
   option cards has EventsAir's default purple accent background at low
   opacity, showing as a lavender halo around our blue selected cards.
   Neutralized to transparent. */
.radio-group {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Confirmed via devtools: div#calendar.row - same purple-accent-at-low-opacity
   wrapper pattern, this time around the "Add this event to your calendar"
   callout. Targeted by ID to stay precise (".row" alone is a common
   Bootstrap grid class used everywhere, too risky to target broadly). */
#calendar {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- 3. CHECKBOXES & RADIO BUTTONS ---------- */
/* Exclude EventsAir's custom-styled radio/checkbox inputs (span.modern-radio-input
   overlay + input.inv-aware.placeholder-input.callout-input) from the generic size
   override below - forcing width/height/margin here breaks the precise negative-margin
   overlay calibration and makes the native input's box poke out ("square" glitch). */
/* Simplified after finding the same glitch on a second, differently-structured
   custom component (toggle switch): EventsAir uses several custom-built
   controls where the real <input> is meant to stay invisible/precisely
   overlaid, and forcing width/height/margin on it breaks that in each case.
   So we no longer force any sizing at all - only a color hint via accent-color,
   which native (non-custom) checkboxes/radios elsewhere will still pick up. */
input[type="radio"],
input[type="checkbox"] {
  accent-color: #1c3462 !important;
}

/* Match the unchecked native radio's size to EventsAir's custom checked-state
   overlay (span.modern-radio-input, 16x16) so the circle doesn't visibly grow
   when selected. */
input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
}

/* Chrome-specific fix: for inputs that have a custom visual overlay right
   after them (span.modern-radio-input, span.slider), stop Chrome from also
   painting its own native control on top - that's the "square" glitch seen
   only in Chrome (Safari doesn't render it there by default). The size above
   still applies for click target sizing; it's just invisible now since the
   native paint is switched off. */
input[type="radio"]:has(+ .modern-radio-input),
input[type="checkbox"]:has(+ .slider) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Chromium (Chrome/Edge/Opera) draws its own default square/dashed focus
   outline on radio/checkbox inputs since we removed them from the custom
   .form-control:focus styling - that square persists across ALL Chromium
   browsers even with appearance:none above, because it's a focus outline,
   not the control's own paint. Safari doesn't show this by default, which
   is why it only appeared on Chromium. Suppress the native outline and
   replace it with a rounded focus ring on the visible overlay instead, so
   keyboard focus is still indicated accessibly. */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

input[type="radio"]:focus-visible + .modern-radio-input {
  box-shadow: 0 0 0 3px rgba(28, 52, 98, 0.4) !important;
  border-radius: 50% !important;
}

 .form-group.has-error .ss-main, .form-group.has-error .form-control {
  background-position: right 4px center!important;
}

.ss-arrow{
  margin-right: 10px !important;
}

#theme-modern .fee-option-details {
  display: flex !important;
  align-self: flex-end!important;
}

#theme-modern .modern-input-label-container label{
  font-weight: 500 !important;
  margin-bottom: 2px !important;
}

#theme-modern .modern-option {
  height: 100% !important;
}

#theme-modern .radio-group form, #theme-modern .radio-group form .fee-option{
  height: 100% !important;
}

#theme-modern .radio-group  {
  height: 100% !important;
  gap: 32px !important;
  padding: 0 !important;
}

#theme-modern .radio-group .label-text {
  font-weight: 500 !important;
}


#theme-modern form.modern-panel {
  flex-direction: row!important;
  flex-wrap: wrap!important;
  gap: 0px 28px !important;
  padding: 0 !important;
}

#theme-modern .modern-panel {
  padding: 0 !important;
}

#theme-modern .modern-input-label-container {
  max-width: 100% !important;
}

#theme-modern .modern-page-content {
  padding: 30px 30px 0 30px !important;
  margin: 30px 0 80px 0;
    border-radius: 20px;
  background-color: white !important;
}

#calendar{
  padding-top: 0!important;
  margin-top: -14px!important;
}

.modern-dots-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  margin: 0 auto;
}

#theme-modern .header {
  height: auto !important;
}

.required .ss-placeholder{
  font-weight: 400 !important;
  color: var(--ecw-navy) !important;
  padding-left: 10px !important;
}

.required .ss-single{
  font-weight: 400 !important;
}



/* Connecting line */
.modern-dots-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 36px;
  right: 36px;
  height: 2px;
  background: #01b5ab !important;
  transform: translateY(-50%);
  z-index: 0;
}

/* Both dots */
.modern-progress-main-dot,
.modern-progress-dot {
  position: relative;
  z-index: 1;

  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

/* ACTIVE — filled teal */
.modern-progress-main-dot {
  background-color: #01b5ab !important;
  border: 2px solid #01b5ab !important;
}

/* INACTIVE — outline instead of grey */
.modern-progress-dot {
  opacity: 1 !important;
  background-color: #fff !important;
  border: 2px solid #01b5ab !important;
}

/* Shared text styling */
.modern-progress-main-dot::after,
.modern-progress-dot::after {
  font-size: 15px;
  font-weight: 600;
}

.modern-progress-main-dot::after {
  color: #ffffff;
  /* white number on filled dot */
}

.modern-progress-dot::after {
  color: #01b5ab;
  /* teal number on outline dot */
}

/* Numbers tied to POSITION, not class */
.modern-dots-container>div:nth-child(1)::after {
  content: "1";
}

.modern-dots-container>div:nth-child(2)::after {
  content: "2";
}


#theme-modern .modern-input-label-container.radio-group-label { 
  margin-top: 0 !important;
}

#theme-modern .has-error {
  color: #d92d20 !important;
  font-style: italic !important;
}


#theme-modern .modern-progress {
  padding: 0 30px !important;
  background-color: #f2f2f2 !important;
  width: 100vw;
    background: white;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 40px !important;
}

footer .navbar {
  background-color: transparent !important;
  border-top: none !important;
}

footer .navbar .navbar-buttons {
  padding: 0px 30px 14px 30px !important;
}

#theme-modern header {
  background-color: #1e3868 !important;
}

#theme-modern .alert.alert-danger .alert-icon  {
  border-radius: 50% !important;
  align-items: center !important;
  align-self: flex-start !important;
}

#theme-modern .alert button {
  color: var(--ecw-orange) !important;
  width: auto !important;
}

#theme-modern .input-container {
  flex-direction: column !important;
}

#theme-modern .form-control {
  max-width: 100% !important;
}

.modern-panel .row {
  width: 47% !important;
}

#page_1 .modern-panel .row {
  width: 100% !important;
}

#page_1 .emphasized-switch {
  margin-top: -37px !important;
}

#page_3 form .row:first-of-type{
  width: 100% !important;
}

.modern-panel .radio-group {
  flex-direction: row !important;
}

.modern-panel .radio-group .modern-component {
  flex: 1 !important;
}

.input-container .radio-group-label{
  display: none !important;
}

@media (max-width: 413px) {
  #theme-modern .radio-group .label-text{
    font-size: 13px !important;
  }
}

@media (max-width: 767px) {
  /* Hide the desktop image */
    .header .header-image {
      display: none!important;
    }
  
    h3, .h3 {
      font-size: 17px !important;
      font-weight: 600 !important;
    }

    /* Show the mobile banner as a background on the wrapper instead */
    .header {
      background-image: url('https://www.educationcannotwait.org/sites/default/files/2026-09/ecw-banner-mobile_0.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 750 / 300;
      /* matches the mobile image ratio */
      width: 100%;
      height: auto !important;
      margin-top: -30px;
    }

    .cookieMessage button{
      width: auto !important;
      margin: 8px 8px 0 9px!important;
    }

   #theme-modern div.form-group .ss-main {
    max-width: 99% !important;
  }
  
  #theme-modern .body-content {
    padding: 0 !important;
  }

  .modern-panel .row {
    width: 100% !important;
  }


  #theme-modern .radio-group{
    gap: 15px !important;
  }

  #theme-modern .modern-page-content {
    padding: 30px 15px 0 15px !important;
  }

    #theme-modern .callout{
     padding: 10px 8px !important;
  }

    #theme-modern .modern-progress{
      margin-top: 28px !important;
    }
}

input[type="checkbox"]:focus-visible + .slider {
  box-shadow: 0 0 0 3px rgba(28, 52, 98, 0.4) !important;
}

/* EventsAir applies a "pop"/scale animation on the checked state, making the
   circle look like it grows when selected. Neutralize it so the circle stays
   a consistent size whether checked or not. */
input[type="radio"],
input[type="radio"]:checked,
input[type="radio"] + .modern-radio-input,
input[type="radio"]:checked + .modern-radio-input,
.modern-radio-input {
  transform: none !important;
}

/* Toggle switch (span.slider, e.g. "I give consent") - recolor the ON state
   from EventsAir's default purple to brand light blue */
input:checked + .slider,
.toggle-switch input:checked + .slider {
  background-color: #1c3462 !important;
}

/* Best-effort targeting of the visual overlay for the checked state of the
   custom radio design - class name for "checked" not confirmed yet, adjust
   once verified via devtools if this doesn't take effect */
input[type="radio"]:checked ~ .modern-radio-input,
input[type="radio"]:checked + .modern-radio-input,
.modern-radio-input.checked,
.modern-radio-input.selected {
  background-color: #1c3462 !important;
  border-color: #1c3462 !important;
}

/* ---------- 4. BUTTONS ---------- */
.btn,
.btn-primary,
.btn-default,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.action-button,
.next-button,
.back-button,
.submit-button,
.register-button,
.add-button {
  background-color: var(--ecw-orange) !important;
  border-color: var(--ecw-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-transform: none !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
}

.btn:hover,
.btn-primary:hover,
.btn-default:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.action-button:hover {
  background-color: var(--ecw-orange-hover) !important;
  border-color: var(--ecw-orange-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn:active,
.btn-primary:active,
.btn-default:active {
  transform: translateY(0) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark,
.btn-light,
.btn-outline-light {
  background-color: transparent !important;
  color: var(--ecw-navy) !important;
  border: 2px solid var(--ecw-navy) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-dark:hover,
.btn-light:hover,
.btn-outline-light:hover {
  background-color: var(--ecw-navy) !important;
  color: #fff !important;
  border-color: var(--ecw-navy) !important;
}

.btn.disabled,
.btn:disabled,
.btn-primary.disabled,
.btn-primary:disabled,
input[type="submit"]:disabled {
  background-color: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #fff !important;
  opacity: 0.65 !important;
}

/* Confirmed via devtools: span.btn-text carries its own navy color that was
   overriding our white button text. Targeting it directly (previous version
   required a ".btn" ancestor class we never actually confirmed exists). */
.btn-text {
  color: #fff !important;
}

.btn-outline-primary .btn-text,
.btn-outline-secondary .btn-text,
.btn-outline-dark .btn-text,
.btn-light .btn-text {
  color: var(--ecw-navy) !important;
}

/* Extra-high-specificity fallback in case something in EventsAir's own
   stylesheet is winning the specificity/order battle against the simpler
   rule above */
html body span.btn-text,
html body .btn-text {
  color: #ffffff !important;
}

/* Arrow icon fill is drawn via background-color (likely a CSS mask), not
   text color - only this one needs background-color changed, not btn-text */
html body span.arrow-icon,
html body .arrow-icon {
  background-color: #ffffff !important;
}

/* Back button's arrow icon - confirmed via devtools that the classes belong
   to the whole button (109x42, "Back", role=button), not a separate nested
   element - so the icon must be a ::before/::after pseudo-element of this
   same button. Targeting the pseudo-element specifically instead of the
   button itself, so its own orange background stays untouched. */
button.page-backward.back-button.icon-button::before,
.page-backward.back-button.icon-button::before,
button.page-backward.back-button.icon-button::after,
.page-backward.back-button.icon-button::after {
  background-color: #ffffff !important;
}

/* ---------- 5. SPECIFIC FIXES: CONTINUE BUTTON ---------- */
/* Distinct navy tone so it doesn't compete visually with the primary orange CTA */
input.btn.btn-default.continue-button,
input.btn.continue-button,
.btn.btn-default.continue-button,
.btn.continue-button,
.continue-button,
input[type="submit"].continue-button,
input[type="button"].continue-button,
button.continue-button {
  background-color: var(--ecw-navy) !important;
  border-color: var(--ecw-navy) !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

input.btn.btn-default.continue-button:hover,
input.btn.continue-button:hover,
.btn.btn-default.continue-button:hover,
.btn.continue-button:hover,
.continue-button:hover,
button.continue-button:hover {
  background-color: #16294d !important;
  border-color: #16294d !important;
  color: #fff !important;
}

/* ---------- 6. HEADER / BANNER IMAGE ---------- */
/* Confirmed via devtools: img.img-responsive.header-image.center-block.
   FIXED width (not responsive/percentage) per request, so it never
   recalculates/shrinks/crops depending on viewport - always renders at the
   same size, centered. --ecw-banner-width is a guess (900px) pending the
   exact form panel width - update it once known so the banner lines up
   exactly with the form below it. */
:root {
  --ecw-banner-width: 800px;
}

img.header-image,
.header-image {
  width: var(--ecw-banner-width) !important;
  max-width: var(--ecw-banner-width) !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[class*="header-image"],
.page-header,
.header-banner,
.banner-container,
.header-container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Progress dots indicator between banner and form (div.modern-progress) had
   32px top/bottom padding, creating a large visual gap. Reduced to tighten
   the space. */
.modern-progress {
  padding: 8px 0 !important;
}

/* ---------- 7. WORD COUNT / STATUS BADGES ---------- */
.word-count,
.word-count-badge,
.wordcount,
.wordcount-badge,
span.word-count,
span.wordcount,
span.word-count-badge,
span.wordcount-badge,
.badge.word-count,
.badge.wordcount,
.label.word-count,
.label.wordcount,
.paper-indicator,
.submitted-indicator,
.word-count-indicator,
span.paper-indicator.submitted,
span.submitted,
span.indicator.submitted,
.badge.submitted,
.label.submitted,
.word-count-label,
.word-count-pill,
.pill.word-count,
.word-count-status,
.submitted-word-count {
  background-color: var(--ecw-navy) !important;
  border-color: var(--ecw-navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- 8. GREEN SUCCESS / INFO OVERRIDES ---------- */
.text-success,
.text-info,
.text-primary,
.has-success .control-label,
.has-success .form-control-feedback,
.has-success .help-block,
.form-group.has-success label,
.form-group.has-success .control-label,
.text-success .glyphicon,
.text-success .fa,
.fa-check,
.glyphicon-ok,
.success-text,
.info-text {
  color: var(--ecw-navy) !important;
}

.has-success .form-control,
.has-success input,
.has-success select,
.has-success textarea {
  border-color: var(--ecw-navy) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px rgba(31, 56, 103, 0.3) !important;
}

.has-success .input-group-addon,
.has-success .input-group-append .input-group-text,
.has-success .input-group-prepend .input-group-text {
  background-color: #e7f3fd !important;
  border-color: var(--ecw-navy) !important;
  color: var(--ecw-navy) !important;
}

.btn-success,
.btn-info,
.btn-primary-green,
.btn-green,
button.btn-success,
input[type="submit"].btn-success,
input[type="button"].btn-success,
.btn.btn-success,
.btn.btn-info,
.btn-success:active,
.btn-success:focus,
.btn-success.active,
.btn-info:active,
.btn-info:focus,
.btn-info.active,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-info {
  background-color: var(--ecw-navy) !important;
  border-color: var(--ecw-navy) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-info:hover,
.btn-green:hover,
.btn-success:focus:hover,
.btn-info:focus:hover {
  background-color: #16294d !important;
  border-color: #16294d !important;
  color: #fff !important;
}

.alert-success,
.alert-info,
.panel-success,
.panel-info,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.list-group-item-success,
.list-group-item-info,
.bg-success,
.bg-info,
.badge-success,
.badge-info,
.label-success,
.label-info,
.label-primary,
.progress-bar-success,
.progress-bar-info,
.progress-bar-primary,
.callout-success,
.callout-info,
.toast-success,
.toast-info,
.notification-success,
.notification-info,
.status-success,
.status-info,
.tag-success,
.tag-info,
.pill-success,
.pill-info,
.chip-success,
.chip-info,
.submitted-label,
.submitted-badge,
.success-pill,
.info-pill,
.success-chip,
.info-chip {
  background-color: var(--ecw-navy) !important;
  border-color: var(--ecw-navy) !important;
  color: #fff !important;
}

.alert-success .alert-link,
.alert-info .alert-link,
.panel-success .panel-title,
.panel-info .panel-title {
  color: #fff !important;
}

/* ---------- 9. CARDS / PANELS / WELLS ---------- */
/* Plain white cards, subtle border - the orange bottom accent from the
   "Join the movement" website cards doesn't fit this form-focused mockup */
.card,
.panel,
.panel-default,
.well,
.content-block,
.form-section,
.registration-section,
.survey-section,
.question-block,
.section-card,
.info-box {
  border: 1px solid var(--ecw-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background-color: #fff !important;
  margin-bottom: 24px !important;
}

.card-header,
.panel-heading,
.panel-default > .panel-heading,
.well-header,
.section-header,
.form-section-header {
  background-color: #fff !important;
  color: var(--ecw-navy) !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.card-header h2,
.card-header h3,
.card-header h4,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-title,
.card-title {
  color: var(--ecw-navy) !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.card-body,
.panel-body,
.well-body,
.section-body,
.form-section-body {
  padding: 18px !important;
}

/* ---------- 10. TABLES ---------- */
.table,
.table-striped,
.table-bordered,
.table-hover,
.dataTable,
.registration-table,
.summary-table,
.pricing-table,
.agenda-table {
  border: 1px solid var(--ecw-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.table thead th,
.table thead td,
.table > thead > tr > th,
.dataTable thead th,
.table-dark th {
  background-color: var(--ecw-navy) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
}

.table tbody tr:nth-child(even),
.table-striped tbody tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #f8fafc !important;
}

.table tbody tr:hover,
.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover {
  background-color: #e7f3fd !important;
}

.table td,
.table th,
.table > tbody > tr > td,
.table > tbody > tr > th {
  padding: 12px 16px !important;
  border-color: var(--ecw-border) !important;
}

/* ---------- 11. TABS / NAV ---------- */
.nav-tabs,
.nav-pills,
.nav-tabs-custom,
.nav-wizard,
.registration-tabs,
.form-tabs {
  border-bottom: 2px solid var(--ecw-border) !important;
  margin-bottom: 24px !important;
}

.nav-tabs > li > a,
.nav-pills > li > a,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.nav-item .nav-link,
.nav-tabs-custom > li > a,
.registration-tabs > li > a,
.form-tabs > li > a {
  color: var(--ecw-navy) !important;
  font-weight: 600 !important;
  border-radius: 6px 6px 0 0 !important;
  padding: 12px 18px !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active,
.nav-pills > li.active > a,
.nav-pills .nav-link.active,
.nav-tabs-custom > li.active > a,
.registration-tabs > li.active > a,
.form-tabs > li.active > a,
.nav-tabs > li > a.active {
  background-color: var(--ecw-navy) !important;
  color: #fff !important;
  border-color: var(--ecw-navy) !important;
  font-weight: 700 !important;
}

.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover,
.nav-pills > li > a:hover,
.nav-pills .nav-link:hover,
.nav-tabs-custom > li > a:hover,
.registration-tabs > li > a:hover,
.form-tabs > li > a:hover {
  background-color: #e7f3fd !important;
  color: var(--ecw-navy) !important;
  border-color: #e7f3fd !important;
}

/* ---------- 12. MODALS ---------- */
.modal-content,
.modal-dialog .modal-content,
.modal-body,
.modal-header,
.modal-footer {
  border-radius: 8px !important;
  border: none !important;
}

.modal-header {
  background-color: var(--ecw-navy) !important;
  color: #fff !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  padding: 16px 20px !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h3,
.modal-header h2 {
  color: #fff !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal-header .close,
.modal-header button.close,
.modal-content .close,
.modal-content button.close {
  color: #fff !important;
  opacity: 0.8 !important;
  text-shadow: none !important;
}

.modal-header .close:hover,
.modal-content .close:hover {
  opacity: 1 !important;
}

.modal-footer {
  border-top: 1px solid var(--ecw-border) !important;
  padding: 16px 20px !important;
}

/* ---------- 13. ALERTS / MESSAGES ---------- */
.alert,
.alert-warning,
.alert-danger,
.alert-primary,
.alert-secondary,
.alert-dark,
.alert-light,
.alert-messages,
.notification,
.message,
.form-message,
.registration-message,
.validation-message,
.help-message,
.info-message {
  border-radius: 6px !important;
  border: none !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
}

.alert-warning,
.alert-danger,
.alert-messages,
.alert-messages p,
.alert-messages span,
.message-warning,
.message-danger,
.notification-warning,
.notification-danger,
.validation-error,
.form-error,
.error-message,
.text-danger {
  background-color: #fff2ea !important;
  color: #9a3f0f !important;
}

.alert-container .alert-messages{
  margin-bottom: 0 !important;
    border-left: none !important;
}

.alert-messages li {
  background-color: transparent !important;
  border-left: none !important;
}

.alert-warning .alert-link,
.alert-danger .alert-link,
.text-danger {
  color: var(--ecw-orange) !important;
}

/* Confirmed via devtools: div.alert-messages renders as flex by default,
   putting its multiple <ul> message lists side by side instead of stacked,
   which broke the layout. Force it back to a normal stacked block, and give
   the <ul>/<li> inside proper list styling and spacing. */
.alert-messages {
  display: block !important;
}

.alert-messages ul {
  display: block !important;
  margin: 0 0 8px 0 !important;
  padding-left: 20px !important;
  list-style: disc !important;
}

.alert-messages li {
  display: list-item !important;
  margin-bottom: 4px !important;
}

/* Confirmed via devtools: the alert's dismiss "X" button is a plain
   <button class="close">, which our broad button styling (section 4) was
   turning into a small orange pill - it should stay a plain, unstyled
   dismiss icon instead. */
button.close,
.alert .close,
.alert-dismissable .close {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px !important;
  box-shadow: none !important;
}

/* Keep the icon + message columns aligned side by side, with the icon not
   getting squeezed by the message text next to it. */
.alert[role="alert"],
.alert-dismissable {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.alert-icon {
  flex-shrink: 0 !important;
}

.alert-primary,
.alert-secondary,
.alert-light,
.message-info,
.notification-info,
.info-message,
.form-info,
.callout,
.callout-box {
  background-color: var(--ecw-info-bg) !important;
  color: var(--ecw-navy) !important;
  border-radius: 8px !important;
}

/* ---------- 14. DROPDOWNS / SELECT MENUS ---------- */
.dropdown-menu,
.select2-dropdown,
.select2-results__options,
.chosen-container .chosen-drop,
.chosen-container-active .chosen-drop {
  border: 1px solid var(--ecw-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  background-color: #fff !important;
}

.dropdown-menu > li > a,
.dropdown-item,
.select2-results__option,
.chosen-container .chosen-results li {
  color: var(--ecw-text) !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
}

.dropdown-menu > li > a:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.select2-results__option--highlighted,
.select2-results__option:hover,
.chosen-container .chosen-results li.highlighted,
.chosen-container .chosen-results li:hover {
  background-color: #e7f3fd !important;
  color: var(--ecw-navy) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-item.active,
.select2-results__option[aria-selected="true"] {
  background-color: var(--ecw-navy) !important;
  color: #fff !important;
}

/* SlimSelect dropdowns (class prefix "ss-") - validated during testing */
.ss-main,
.ss-single-selected,
.ss-single,
.ss-content,
.ss-list,
.ss-search input {
  background-color: #fff !important;
  color: var(--ecw-navy) !important;
  border-color: #d1d5db !important;
}

.ss-main {
  max-height: 44px !important;
  max-width: 100% !important;
}

.ss-option {
  background-color: #fff !important;
  color: var(--ecw-text) !important;
}

.ss-option.ss-highlighted,
.ss-option:hover {
  background-color: #e7f3fd !important;
  color: var(--ecw-navy) !important;
}

.ss-option.ss-disabled {
  color: var(--ecw-text-muted) !important;
}

/* Confirmed via devtools: our fill rule was applying (not overridden) but
   the icon still looked wrong-colored, so the chevron shape is likely drawn
   via stroke rather than fill - covering both. */
svg.ss-arrow,
.ss-arrow,
.ss-arrow path {
  fill: var(--ecw-navy) !important;
  stroke: var(--ecw-navy) !important;
}

/* ---------- 15. PROGRESS / WIZARD STEPS ---------- */
.progress,
.progress-bar,
.wizard-steps,
.registration-progress,
.form-progress {
  background-color: var(--ecw-border) !important;
  border-radius: 6px !important;
  height: 10px !important;
}

.progress-bar,
.progress-bar-primary,
.progress-bar-success,
.progress-bar-info,
.wizard-steps .active,
.registration-progress .active,
.form-progress .active {
  background-color: var(--ecw-orange) !important;
}

.wizard-step.active,
.wizard-step.complete,
.step.active,
.step.complete,
.registration-step.active,
.registration-step.complete,
.form-step.active,
.form-step.complete {
  background-color: var(--ecw-orange) !important;
  color: #fff !important;
  border-color: var(--ecw-orange) !important;
}

/* ---------- 16. EMAIL-SPECIFIC OVERRIDES ---------- */
.email-body,
.email-content,
.email-wrapper,
.email-template,
.invitation-email,
.confirmation-email,
.notification-email,
.reminder-email,
.email-body table,
.email-content table,
.email-template table {
  font-family: 'Barlow', Helvetica, Arial, sans-serif !important;
}

.email-body h1,
.email-body h2,
.email-body h3,
.email-content h1,
.email-content h2,
.email-content h3,
.email-template h1,
.email-template h2,
.email-template h3 {
  color: var(--ecw-orange) !important;
  font-weight: 700 !important;
}

.email-body a,
.email-content a,
.email-template a,
.email-body a.button,
.email-content a.button,
.email-template a.button {
  color: #fff !important;
  background-color: var(--ecw-orange) !important;
  border: 2px solid var(--ecw-orange) !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.email-body a:hover,
.email-content a:hover,
.email-template a:hover {
  background-color: var(--ecw-orange-hover) !important;
  border-color: var(--ecw-orange-hover) !important;
}

/* ---------- 17. RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 768px) {
  h2, .h2, .section-title,
  .question-title,
  .survey-question-title {
    font-size: 20px !important;
    margin-bottom: 18px !important;
  }

  .btn,
  .btn-primary,
  .btn-default,
  button,
  input[type="submit"],
  input[type="button"],
  .continue-button,
  .action-button {
    padding: 12px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }

  .card-header,
  .panel-heading,
  .modal-header {
    padding: 12px 16px !important;
  }

  .card-body,
  .panel-body,
  .modal-body,
  .modal-footer {
    padding: 14px !important;
  }
}

/* ---------- 18. UTILITY / MISC ---------- */
.text-muted,
.help-block,
.form-text,
.small,
.hint,
.optional,
.required-field-hint,
.field-hint {
  color: var(--ecw-text-muted) !important;
}

.required,
.required-field,
.asterisk,
.form-required,
label .required,
abbr[title="required"],
span.required {
  color: var(--ecw-orange) !important;
  font-weight: 700 !important;
}

hr,
.divider,
.section-divider {
  border-top: 1px solid var(--ecw-border) !important;
  margin: 24px 0 !important;
}

.has-success .form-control:focus {
  box-shadow: 0 0 0 3px rgba(31, 56, 103, 0.15) !important;
}

*:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ecw-orange) !important;
  outline-offset: 2px !important;
}