/*
 * GF type scale (custom_verz.css only; do not rely on html_home/html_page/html_involved copies):
 * Home #2 / Contact #3: labels 16px; descriptions 18px; inputs + placeholders (+ Nice Select on #3) 18→16px
 * (≤1599 & ≤575; design ref 18 down to 16). Submit .custom-button: 18 / 15 / 14px — mirror the
 * theme's default .custom-button scale (main.css line 11645–11655) so the form submit stays in sync
 * with header "Contact Us", CTA "Join Now", "Send My Donation", etc. across breakpoints.
 * --gf-font-size-* beats Orbital.
 * Membership .ostomy-gf-membership: labels & legends & inputs & choices 18→16px; .gfield_description 14→12px.
 * Grid stacks to 1 col at max-width 767.98px (no font overrides there — avoids cascade bugs vs 1599).
 */
.rightCaption .custom-form-holder .gform_wrapper {
  margin: 0;
}

.rightCaption .custom-form-holder .gform_heading {
  display: none;
}

.custom-form-holder #gform_wrapper_2 .gform_fields,
.custom-form-holder #gform_wrapper_3 .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 0 !important;
  margin: 0 !important;
  align-items: start !important;
}

/* contact-us.html: row gutters-8 → 8px padding each side between columns */
.contactForm-container .custom-form-holder #gform_wrapper_3 .gform_fields {
  column-gap: 16px !important;
}

/*
 * Orbital / theme framework often sets .gfield { display: contents } so legend, label, and
 * .ginput_container become grid items of .gform_fields — labels squeeze to one column and inputs
 * collapse (tiny pills, overlap). Each field must be one grid cell.
 */
.custom-form-holder #gform_wrapper_2 .gform_fields > .gfield,
.custom-form-holder #gform_wrapper_3 .gform_fields > .gfield {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 25px !important;
  box-sizing: border-box;
}

/* Contact form vertical rhythm should match static .form-group spacing */
.contactForm-container .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield {
  margin-bottom: 35px !important;
}

@media screen and (max-width: 1199.98px) {
  .contactForm-container .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield {
    margin-bottom: 25px !important;
  }
}

@media screen and (max-width: 575.98px) {
  .contactForm-container .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield {
    margin-bottom: 20px !important;
  }
}

.custom-form-holder #gform_wrapper_2 .ginput_container,
.custom-form-holder #gform_wrapper_3 .ginput_container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.custom-form-holder #gform_wrapper_2 .ginput_container_date,
.custom-form-holder #gform_wrapper_3 .ginput_container_date {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Home (#2): half fields = index.html col-md-6 (1 col <768px); legacy col-6 still supported */
.custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-6,
.custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-md-6,
.custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.gfield--width-half,
.custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.col-md-6,
.custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.gfield--width-half {
  grid-column: span 1 !important;
}

.custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-12,
.custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-md-12 {
  grid-column: 1 / -1 !important;
}

/*
 * Contact form (GF): half-width fields still carry Bootstrap .col-12 for mobile.
 * Do not span full grid row on desktop — only true full-width fields (no .gfield--width-half).
 */
.custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.col-12:not(.gfield--width-half),
.custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.col-md-12 {
  grid-column: 1 / -1 !important;
}

/*
 * Home GF (#2): Orbital overrides + pills (html_home / rightCaption).
 * Scoped to #gform_wrapper_2 only so Contact (#3) is unchanged.
 */
.custom-form-holder #gform_wrapper_2.gform_wrapper {
  margin: 0;
  /* Match rendered field type + main.css .form-control (18px); beat Orbital inline vars */
  --gf-font-size-base: 18px !important;
  --gf-font-size-primary: 18px !important;
  --gf-font-size-secondary: 18px !important;
  --gf-font-size-tertiary: 16px !important;
}

.custom-form-holder #gform_wrapper_2 .gform_heading {
  display: none;
}

.custom-form-holder #gform_wrapper_2 .gfield_label,
.custom-form-holder #gform_wrapper_2 .gform-field-label,
.custom-form-holder #gform_wrapper_2 legend.gfield_label {
  color: #ffffff !important;
  margin-bottom: 8px;
  font-size: 16px !important;
  font-family: "Outfit", sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0.36px;
  gap: 0.1em !important;
  column-gap: 0.1em !important;
}

.custom-form-holder #gform_wrapper_2 .gfield_description {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 18px !important;
}

.custom-form-holder #gform_wrapper_2 .gfield_required_text {
  display: none !important;
}

.custom-form-holder #gform_wrapper_2 .gfield_required {
  margin: 0 !important;
  padding: 0 !important;
}

.custom-form-holder #gform_wrapper_2 .gfield_required::before {
  content: "*";
  color: #ffffff;
  font-weight: 700;
  margin-left: 1px !important;
  margin-right: 0 !important;
}

.custom-form-holder #gform_wrapper_2 .ginput_container input,
.custom-form-holder #gform_wrapper_2 .ginput_container textarea,
.custom-form-holder #gform_wrapper_2 .ginput_container select {
  width: 100%;
  max-width: 100%;
  border: 1px solid #ffffff;
  border-color: #ffffff;
  background: #ffffff;
  color: #002e54;
  font-family: "Urbanist", sans-serif;
  font-size: 18px !important;
  box-sizing: border-box;
}

.custom-form-holder #gform_wrapper_2 .ginput_container input {
  height: 57px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 50px;
  line-height: normal;
}

.custom-form-holder #gform_wrapper_2 .ginput_container textarea {
  min-height: 150px;
  padding: 16px 25px;
  border-radius: 20px;
  line-height: 1.45;
}

.custom-form-holder #gform_wrapper_2 .ginput_container input::placeholder,
.custom-form-holder #gform_wrapper_2 .ginput_container textarea::placeholder {
  color: #a5aeb8;
  font-size: 18px !important;
  font-family: "Urbanist", sans-serif;
  opacity: 1;
}

.custom-form-holder #gform_wrapper_2 .ginput_container input:hover,
.custom-form-holder #gform_wrapper_2 .ginput_container input:focus,
.custom-form-holder #gform_wrapper_2 .ginput_container textarea:hover,
.custom-form-holder #gform_wrapper_2 .ginput_container textarea:focus {
  border-color: #46b3ac;
  outline: none;
  box-shadow: none;
}

@media screen and (max-width: 1599.98px) {
  .custom-form-holder #gform_wrapper_2 .ginput_container input {
    height: 55px;
  }

  .custom-form-holder #gform_wrapper_2 .gfield_label,
  .custom-form-holder #gform_wrapper_2 .gform-field-label,
  .custom-form-holder #gform_wrapper_2 legend.gfield_label {
    font-size: 16px !important;
  }

  .custom-form-holder #gform_wrapper_2 .gfield_description {
    font-size: 18px !important;
  }

  .custom-form-holder #gform_wrapper_2 .ginput_container input,
  .custom-form-holder #gform_wrapper_2 .ginput_container textarea,
  .custom-form-holder #gform_wrapper_2 .ginput_container select {
    font-size: 16px !important;
  }

  .custom-form-holder #gform_wrapper_2 .ginput_container input::placeholder,
  .custom-form-holder #gform_wrapper_2 .ginput_container textarea::placeholder {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 575.98px) {
  .custom-form-holder #gform_wrapper_2 .ginput_container input {
    height: 52px;
  }

  .custom-form-holder #gform_wrapper_2 .ginput_container input::placeholder,
  .custom-form-holder #gform_wrapper_2 .ginput_container textarea::placeholder {
    font-size: 16px !important;
  }

  .custom-form-holder #gform_wrapper_2 .ginput_container input,
  .custom-form-holder #gform_wrapper_2 .ginput_container textarea,
  .custom-form-holder #gform_wrapper_2 .ginput_container select {
    font-size: 16px !important;
  }

  .custom-form-holder #gform_wrapper_2 .gfield_label,
  .custom-form-holder #gform_wrapper_2 .gform-field-label,
  .custom-form-holder #gform_wrapper_2 legend.gfield_label {
    font-size: 16px !important;
  }

  .custom-form-holder #gform_wrapper_2 .gfield_description {
    font-size: 18px !important;
  }
}

/* Validation readability on red background */
.rightCaption .custom-form-holder .gform_validation_errors,
.rightCaption .custom-form-holder .validation_error,
.contactForm-container .custom-form-holder .gform_validation_errors,
.contactForm-container .custom-form-holder .validation_error {
  background: rgba(0, 46, 84, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
}

.rightCaption .custom-form-holder .gform_validation_errors h2,
.rightCaption .custom-form-holder .gform_validation_errors .gform_submission_error,
.rightCaption .custom-form-holder .gform_validation_errors .gform-icon,
.rightCaption .custom-form-holder .gform_validation_errors .gform-icon--circle-error,
.contactForm-container .custom-form-holder .gform_validation_errors h2,
.contactForm-container .custom-form-holder .gform_validation_errors .gform_submission_error,
.contactForm-container .custom-form-holder .gform_validation_errors .gform-icon,
.contactForm-container .custom-form-holder .gform_validation_errors .gform-icon--circle-error {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.rightCaption .custom-form-holder .gfield_validation_message,
.rightCaption .custom-form-holder .validation_message,
.contactForm-container .custom-form-holder .gfield_validation_message,
.contactForm-container .custom-form-holder .validation_message {
  color: #ffd7d7 !important;
  font-weight: 500;
  opacity: 1 !important;
  font-size: 18px !important;
}

@media screen and (max-width: 1599.98px) {
  .rightCaption .custom-form-holder .gfield_validation_message,
  .rightCaption .custom-form-holder .validation_message,
  .contactForm-container .custom-form-holder .gfield_validation_message,
  .contactForm-container .custom-form-holder .validation_message {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 575.98px) {
  .rightCaption .custom-form-holder .gfield_validation_message,
  .rightCaption .custom-form-holder .validation_message,
  .contactForm-container .custom-form-holder .gfield_validation_message,
  .contactForm-container .custom-form-holder .validation_message {
    font-size: 16px !important;
  }
}

/* Post-submit messages (confirmation / generic response) */
.rightCaption .custom-form-holder .gform_confirmation_wrapper,
.rightCaption .custom-form-holder .gform_confirmation_message,
.rightCaption .custom-form-holder .gform_confirmation_message_2,
.contactForm-container .custom-form-holder .gform_confirmation_wrapper,
.contactForm-container .custom-form-holder .gform_confirmation_message,
.contactForm-container .custom-form-holder .gform_confirmation_message_3 {
  color: #ffffff !important;
}

.rightCaption .custom-form-holder .gform_confirmation_message,
.rightCaption .custom-form-holder .gform_confirmation_message_2,
.contactForm-container .custom-form-holder .gform_confirmation_message,
.contactForm-container .custom-form-holder .gform_confirmation_message_3 {
  background: rgba(0, 46, 84, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
}

.contactForm-container .custom-form-holder .gform_confirmation_message,
.contactForm-container .custom-form-holder .gform_confirmation_message_3 {
  font-size: 20px !important;
}

.rightCaption .custom-form-holder .gform_confirmation_message,
.rightCaption .custom-form-holder .gform_confirmation_message_2 {
  font-size: 20px !important;
}

.rightCaption .custom-form-holder .gform_footer,
.contactForm-container .custom-form-holder .gform_footer {
  margin-top: 0;
  padding-top: 0;
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0;
}

.contactForm-container .custom-form-holder .gform_footer {
  margin-top: 8px;
}

/* Contact page GF (#3): same block as contact-us.html — red box, labels white, * .secondary, inputs height-65 */
.contactForm-container .custom-form-holder #gform_wrapper_3.gform_wrapper {
  margin: 0;
  /* Match .form-control (18px) + main.css breakpoints; !important beats GF inline */
  --gf-font-size-base: 18px !important;
  --gf-font-size-primary: 18px !important;
  --gf-font-size-secondary: 18px !important;
  --gf-font-size-tertiary: 16px !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .gform_heading {
  display: none;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_label,
.contactForm-container .custom-form-holder #gform_wrapper_3 .gform-field-label,
.contactForm-container .custom-form-holder #gform_wrapper_3 legend.gfield_label {
  color: #ffffff !important;
  margin-bottom: 8px;
  font-size: 18px !important;
  font-family: "Outfit", sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0.36px;
  gap: 0.1em !important;
  column-gap: 0.1em !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_description {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 18px !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_required_text {
  display: none !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_required {
  margin: 0 !important;
  padding: 0 !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_required::before {
  content: "*";
  color: #fff;
  font-weight: 700;
  margin-left: 1px !important;
  margin-right: 0 !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container select {
  width: 100%;
  max-width: 100%;
  border: 1px solid #ffffff;
  border-color: #ffffff;
  background: #ffffff;
  color: #002e54;
  font-family: "Urbanist", sans-serif;
  font-size: 18px !important;
  box-sizing: border-box;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input {
  height: 65px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 50px;
  line-height: normal;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea {
  min-height: 150px;
  padding: 16px 25px;
  border-radius: 20px;
  line-height: 1.45;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input::placeholder,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea::placeholder {
  color: #a5aeb8;
  font-size: 18px !important;
  font-family: "Urbanist", sans-serif;
  opacity: 1;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input:hover,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input:focus,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea:hover,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea:focus {
  border-color: #46b3ac;
  outline: none;
  box-shadow: none;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select {
  display: block;
}

/* Nice Select dropdown: Orbital / parents can force overflow or static .list — list then flows after the whole form */
.contactForm-container .custom-form-holder,
.contactForm-container .custom-form-holder #gform_wrapper_3,
.contactForm-container .custom-form-holder #gform_wrapper_3 .gform_body,
.contactForm-container .custom-form-holder #gform_wrapper_3 .gform_fields,
.contactForm-container .custom-form-holder #gform_wrapper_3 .gfield--type-select,
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select.NiceSelect {
  overflow: visible !important;
}

.contactForm-container {
  overflow: visible !important;
}

/* jQuery Nice Select (main-script ostomyInitGformContactNiceSelect) — match pill inputs */
.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select.NiceSelect .nice-select {
  position: relative !important;
  z-index: 4;
  float: none;
  width: 100%;
  height: 65px;
  line-height: 63px;
  padding-left: 25px !important;
  padding-right: 42px !important;
  border: 1px solid #ffffff;
  border-radius: 50px;
  background-color: #ffffff;
  color: #002e54;
  font-family: "Urbanist", sans-serif;
  font-size: 18px !important;
  font-weight: 500;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select.NiceSelect .nice-select.open {
  z-index: 300;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .current {
  line-height: 63px;
  color: #002e54;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-selected .nice-select .current {
  color: #002e54;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select::after {
  color: #002e54 !important;
  right: 22px;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select:hover::after,
.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select.open::after {
  color: #005ba9 !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select.open,
.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select:focus {
  border-color: #46b3ac !important;
  outline: none;
  box-shadow: none;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  margin-top: 0 !important;
  z-index: 301 !important;
  transform: none !important;
  transform-origin: top center !important;
  font-size: 18px !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .option {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select.open .list {
  transform: none !important;
}

@media screen and (max-width: 1599.98px) {
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input {
    height: 55px;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select.NiceSelect .nice-select {
    height: 55px;
    line-height: 53px;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .current {
    line-height: 53px;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_label,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .gform-field-label,
  .contactForm-container .custom-form-holder #gform_wrapper_3 legend.gfield_label {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_description {
    font-size: 18px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container select {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input::placeholder,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea::placeholder {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select.NiceSelect .nice-select,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .current {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .list,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .option {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 575.98px) {
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input {
    height: 52px;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container_select.NiceSelect .nice-select {
    height: 52px;
    line-height: 50px;
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .current {
    line-height: 50px;
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input::placeholder,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea::placeholder {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container input,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container textarea,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .ginput_container select {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .list {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .nice-select .option {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_label,
  .contactForm-container .custom-form-holder #gform_wrapper_3 .gform-field-label,
  .contactForm-container .custom-form-holder #gform_wrapper_3 legend.gfield_label {
    font-size: 16px !important;
  }

  .contactForm-container .custom-form-holder #gform_wrapper_3 .gfield_description {
    font-size: 18px !important;
  }
}

/* Home / Contact / Get Involved GF submit — same pill, navy icon disc, Urbanist 600 (beats Orbital defaults) */
.custom-form-holder .gform_footer button.home-contact-submit.custom-button,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button {
  width: auto !important;
  max-width: 100%;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  min-height: 51px !important;
  height: 51px !important;
  padding: 0 40px 0 2px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50px !important;
  outline: none !important;
  color: #ffffff !important;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #ee2850 0 50%, #005ba9 50% 100%) !important;
  background-size: 200% 100% !important;
  background-position: 100% 0 !important;
  background-repeat: no-repeat !important;
  transition: background-position 0.5s ease !important;
  font-family: "Urbanist", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.36px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: center !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  vertical-align: middle !important;
}

.contactForm-container .custom-form-holder .gform_footer button.contact-page-submit.custom-button,
.contactForm-container .custom-form-holder .gform-footer button.contact-page-submit.custom-button {
  font-size: 18px !important;
}

.rightCaption .custom-form-holder .gform_footer button.home-contact-submit.custom-button,
.rightCaption .custom-form-holder .gform-footer button.home-contact-submit.custom-button,
.custom-form-holder .gform_footer button.home-contact-submit.custom-button,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button {
  font-size: 18px !important;
}

/*
 * Home / Contact / Get Involved submit icon: match ref — navy disc almost full pill height,
 * lion ~32–36% of disc (small graphic, large circle). Neutralize .icon-left margin-top from main.css.
 */
.custom-form-holder .gform_footer button.home-contact-submit.custom-button.has-icon.icon-left,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button.has-icon.icon-left,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button.has-icon.icon-left,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button.has-icon.icon-left,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button.has-icon.icon-left,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button.has-icon.icon-left {
  margin-top: 0 !important;
}

.custom-form-holder .gform_footer button.home-contact-submit.custom-button.has-icon::after,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button.has-icon::after,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button.has-icon::after,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button.has-icon::after,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button.has-icon::after,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button.has-icon::after {
  content: "" !important;
  /* 51px pill − 2px inset top/bottom (match design ref) */
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 5px 0 4px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: #002e54 !important;
  background-image: url("../images/btn-icon.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  /* % of disc → small lion, large navy ring; scales with disc at breakpoints */
  background-size: 34% auto !important;
}

.custom-form-holder .gform_footer button.home-contact-submit.custom-button:hover,
.custom-form-holder .gform_footer button.home-contact-submit.custom-button:focus,
.custom-form-holder .gform_footer button.home-contact-submit.custom-button:focus-visible,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button:hover,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button:focus,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button:focus-visible,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button:hover,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button:focus,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button:focus-visible,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button:hover,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button:focus,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button:focus-visible,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button:hover,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button:focus,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button:focus-visible,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button:hover,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button:focus,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button:focus-visible {
  background-position: 0 0 !important;
  color: #ffffff !important;
  border: 0 !important;
  outline: none !important;
}

/* Keyboard focus: ring outside pill (no inner border that clips the curve) */
.custom-form-holder .gform_footer button.home-contact-submit.custom-button:focus-visible,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button:focus-visible,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button:focus-visible,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button:focus-visible,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button:focus-visible,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95) !important;
  outline-offset: 3px !important;
}

.custom-form-holder .gform_footer button.home-contact-submit.custom-button:hover::after,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button:hover::after,
.custom-form-holder .gform_footer button.home-contact-submit.custom-button:focus-visible::after,
.custom-form-holder .gform-footer button.home-contact-submit.custom-button:focus-visible::after,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button:hover::after,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button:hover::after,
.custom-form-holder .gform_footer button.contact-page-submit.custom-button:focus-visible::after,
.custom-form-holder .gform-footer button.contact-page-submit.custom-button:focus-visible::after,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button:hover::after,
.custom-form-holder .gform_footer button.involved-form-submit.custom-button:focus-visible::after,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button:hover::after,
.custom-form-holder .gform-footer button.involved-form-submit.custom-button:focus-visible::after {
  background-color: #a90022 !important;
}

@media (prefers-reduced-motion: reduce) {
  .custom-form-holder .gform_footer button.home-contact-submit.custom-button,
  .custom-form-holder .gform-footer button.home-contact-submit.custom-button,
  .custom-form-holder .gform_footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform-footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform_footer button.involved-form-submit.custom-button,
  .custom-form-holder .gform-footer button.involved-form-submit.custom-button {
    transition: none !important;
  }
}

div#gform_confirmation_message_2 {
    color: #fff;
}

@media screen and (max-width: 1599.98px) {
  /*
   * NOTE on selectors: base rules above include scoped duplicates with
   * `.contactForm-container` (contact-page-submit, line ~677) and `.rightCaption`
   * (home-contact-submit, line ~682) that bump specificity to (0,5,2). To beat
   * those at smaller breakpoints we must list the same prefixed variants here so
   * the MQ rule matches their specificity and wins by source order.
   */
  .rightCaption .custom-form-holder .gform_footer button.home-contact-submit.custom-button,
  .rightCaption .custom-form-holder .gform-footer button.home-contact-submit.custom-button,
  .contactForm-container .custom-form-holder .gform_footer button.contact-page-submit.custom-button,
  .contactForm-container .custom-form-holder .gform-footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform_footer button.home-contact-submit.custom-button,
  .custom-form-holder .gform-footer button.home-contact-submit.custom-button,
  .custom-form-holder .gform_footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform-footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform_footer button.involved-form-submit.custom-button,
  .custom-form-holder .gform-footer button.involved-form-submit.custom-button {
    min-height: 45px !important;
    height: 45px !important;
    padding: 0 32px 0 2px !important;
    font-size: 15px !important;
  }

  .custom-form-holder .gform_footer button.home-contact-submit.custom-button.has-icon.icon-left,
  .custom-form-holder .gform-footer button.home-contact-submit.custom-button.has-icon.icon-left,
  .custom-form-holder .gform_footer button.contact-page-submit.custom-button.has-icon.icon-left,
  .custom-form-holder .gform-footer button.contact-page-submit.custom-button.has-icon.icon-left,
  .custom-form-holder .gform_footer button.involved-form-submit.custom-button.has-icon.icon-left,
  .custom-form-holder .gform-footer button.involved-form-submit.custom-button.has-icon.icon-left {
    margin-top: 0 !important;
  }

  .custom-form-holder .gform_footer button.home-contact-submit.custom-button.has-icon::after,
  .custom-form-holder .gform-footer button.home-contact-submit.custom-button.has-icon::after,
  .custom-form-holder .gform_footer button.contact-page-submit.custom-button.has-icon::after,
  .custom-form-holder .gform-footer button.contact-page-submit.custom-button.has-icon::after,
  .custom-form-holder .gform_footer button.involved-form-submit.custom-button.has-icon::after,
  .custom-form-holder .gform-footer button.involved-form-submit.custom-button.has-icon::after {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    margin-right: 12px !important;
    background-size: 38% auto !important;
  }
}

@media screen and (max-width: 575.98px) {
  /* Same specificity-matching rationale as the ≤1599.98px block above. */
  .rightCaption .custom-form-holder .gform_footer button.home-contact-submit.custom-button,
  .rightCaption .custom-form-holder .gform-footer button.home-contact-submit.custom-button,
  .contactForm-container .custom-form-holder .gform_footer button.contact-page-submit.custom-button,
  .contactForm-container .custom-form-holder .gform-footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform_footer button.home-contact-submit.custom-button,
  .custom-form-holder .gform-footer button.home-contact-submit.custom-button,
  .custom-form-holder .gform_footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform-footer button.contact-page-submit.custom-button,
  .custom-form-holder .gform_footer button.involved-form-submit.custom-button,
  .custom-form-holder .gform-footer button.involved-form-submit.custom-button {
    font-size: 14px !important;
  }
}

@media (max-width: 767.98px) {
  .custom-form-holder #gform_wrapper_2 .gform_fields,
  .custom-form-holder #gform_wrapper_3 .gform_fields,
  .custom-form-holder.ostomy-gf-membership .gform_fields {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-6,
  .custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-md-6,
  .custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.gfield--width-half,
  .custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-12,
  .custom-form-holder #gform_wrapper_2 .gform_fields > .gfield.col-md-12,
  .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.col-md-6,
  .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.gfield--width-half,
  .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.col-12,
  .custom-form-holder #gform_wrapper_3 .gform_fields > .gfield.col-md-12,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield,
  .custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield {
    grid-column: 1 / -1 !important;
  }

  /*
   * No font-size here: this MQ is listed after max-width 1599.98px rules, so it was forcing
   * Home/Contact fields to 20px on tablet. Use #gform_wrapper_2 / _3 @1599 + @575 only.
   * Membership typography: .ostomy-gf-membership @1599 + @575 only.
   */
}


/* Membership choices: compact spacing (match reference density — not “wide” tokens) */
.ostomy-gf-membership {
  --ostomy-gf-control-label-gap: 10px;
  --ostomy-gf-choice-row-gap: 18px;
  --ostomy-gf-choice-col-gap: 24px;
  --ostomy-gf-choice-section-spacing: 32px;
}

/*
 * Involved / membership GF: 2-column grid + one cell per field (fixes Orbital display:contents).
 * Horizontal gap matches static get-involved.html row gutters-12 (12px + 12px padding = 24px).
 * Form ID in WP may differ; wrapper class ostomy-gf-membership is stable.
 */
.custom-form-holder.ostomy-gf-membership .gform_wrapper {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  --gf-font-size-base: 18px !important;
  --gf-font-size-primary: 18px !important;
  --gf-font-size-secondary: 18px !important;
  --gf-font-size-tertiary: 14px !important;
}

.custom-form-holder.ostomy-gf-membership .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 0 !important;
  margin: 0 !important;
  align-items: start !important;
}

.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield,
.custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 25px !important;
  box-sizing: border-box;
}

/*
 * GF conditional logic fix: when a field is hidden by conditional logic, GF sets
 * inline `display:none` + adds `disabled` to inputs. The `display: block !important`
 * above masks the inline `display:none`, so jQuery `:hidden` no longer matches
 * the inputs — `gf_do_action("show")` then fails to clear `disabled` when the
 * field is shown again (e.g. checking "Others"). Honor data-conditional-logic so
 * the hidden state truly hides the field and conditional_logic.min.js works.
 */
.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield[data-conditional-logic="hidden"],
.custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield[data-conditional-logic="hidden"] {
  display: none !important;
}

.custom-form-holder.ostomy-gf-membership .ginput_container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.gfield--width-half,
.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-md-6,
.custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield.gfield--width-half {
  grid-column: span 1 !important;
}

.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-12:not(.gfield--width-half),
.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-md-12,
.custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield.col-12,
.custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield.col-md-12,
.custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.gfield--width-full {
  grid-column: 1 / -1 !important;
}

@media (max-width: 991.98px) {
  .custom-form-holder.ostomy-gf-membership .gform_fields {
    column-gap: 16px !important;
  }

  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield,
  .custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield {
    margin-bottom: 22px !important;
  }
}

/*
 * Mobile stack: force every membership field to full width on small screens.
 * NOTE: a similar @media block exists earlier in this file (~line 838) but it sits
 * BEFORE the base 2-column rule above, so with both rules carrying !important the
 * later (base) declaration wins by source order. Re-declare the 1-column override
 * here so it actually takes effect on phones/small tablets.
 */
@media (max-width: 767.98px) {
  .custom-form-holder.ostomy-gf-membership .gform_fields {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.gfield--width-half,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-md-6,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-6,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-12,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.col-md-12,
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield.gfield--width-full,
  .custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield,
  .custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield.gfield--width-half,
  .custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield.col-md-6 {
    grid-column: 1 / -1 !important;
  }
}

@media screen and (max-width: 1599.98px) {
  .ostomy-gf-membership .ginput_container.ginput_container_text input,
  .ostomy-gf-membership .ginput_container.ginput_container_email input,
  .ostomy-gf-membership .ginput_container.ginput_container_phone input {
    height: 55px !important;
    line-height: 53px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"] {
    height: 55px !important;
    line-height: 53px !important;
  }

  .ostomy-gf-membership .gfield_label.gform-field-label,
  .ostomy-gf-membership legend.gfield_label {
    font-size: 16px !important;
  }

  .ostomy-gf-membership .gfield_description {
    font-size: 12px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_text input,
  .ostomy-gf-membership .ginput_container.ginput_container_email input,
  .ostomy-gf-membership .ginput_container.ginput_container_phone input,
  .ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"],
  .ostomy-gf-membership .ginput_container.ginput_container_textarea textarea {
    font-size: 16px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_text input::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_email input::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_phone input::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"]::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_textarea textarea::placeholder {
    font-size: 16px !important;
  }

  .ostomy-gf-membership .gfield_radio .gchoice .gform-field-label,
  .ostomy-gf-membership .gfield_checkbox .gchoice .gform-field-label {
    font-size: 16px !important;
  }

  .ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gform-field-label,
  .ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gform-field-label {
    font-size: 16px !important;
  }

  .ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input,
  .ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input {
    margin-top: calc((16px * 1.55 - 22px) / 2) !important;
  }
}

.ostomy-gf-membership .gfield_label.gform-field-label,
.ostomy-gf-membership legend.gfield_label {
  font-weight: 700 !important;
  margin-bottom: 15px;
  display: block;
  color: #002e54;
  font-size: 18px !important;
  letter-spacing: 0.36px;
  font-family: "Outfit", sans-serif;
}

.ostomy-gf-membership .gfield_description {
  font-size: 14px !important;
  color: #002e54;
  font-family: "Urbanist", "Outfit", sans-serif;
  line-height: 1.45;
}

.ostomy-gf-membership fieldset.gfield.gfield--type-choice > legend.gfield_label {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

.ostomy-gf-membership fieldset.gfield.gfield--type-choice {
  margin-top: 0 !important;
  margin-bottom: var(--ostomy-gf-choice-section-spacing) !important;
  padding-bottom: 0 !important;
}

/* Consent stack: strip GF field padding/margin-y so gaps = only our margin-bottom */
.ostomy-gf-membership fieldset#field_4_30.gfield.gfield--type-choice,
.ostomy-gf-membership fieldset#field_4_31.gfield.gfield--type-choice {
  padding: 0 !important;
  border: none !important;
  min-inline-size: 0;
}

.ostomy-gf-membership .gform_fields > #field_4_33.gfield,
.ostomy-gf-membership .gform_fields > #field_4_34.gfield,
.ostomy-gf-membership .gform_fields > fieldset#field_4_30,
.ostomy-gf-membership .gform_fields > fieldset#field_4_31 {
  margin-block-start: 0 !important;
  margin-inline: 0 !important;
  padding-block-start: 0 !important;
  padding-inline: 0 !important;
}

.ostomy-gf-membership #field_4_33.gfield.gfield_html {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}

.ostomy-gf-membership #field_4_33.gfield.gfield_html img {
  display: block;
  margin: 0 !important;
}

.ostomy-gf-membership #field_4_34.gfield.gfield_html {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}

.ostomy-gf-membership #field_4_34.gfield.gfield_html .form-group,
.ostomy-gf-membership #field_4_34.gfield.gfield_html p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Membership helper note: "If not applicable, please state 'NA'." */
.ostomy-gf-membership .shortWarning,
.ostomy-gf-membership .shortWarning i {
  color: #8a95a3 !important;
  font-style: italic !important;
}

.ostomy-gf-membership fieldset#field_4_30.gfield.gfield--type-choice {
  margin-top: 0 !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

.ostomy-gf-membership fieldset#field_4_31.gfield.gfield--type-choice {
  margin-top: 20px !important;
  margin-bottom: 24px !important;
}

/* Orbital sometimes adds space under hidden consent legends */
.ostomy-gf-membership fieldset#field_4_30 > .ginput_container,
.ostomy-gf-membership fieldset#field_4_31 > .ginput_container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tránh padding GF làm lệch khoảng quanh lưới lựa chọn */
.ostomy-gf-membership .ginput_container.ginput_container_radio,
.ostomy-gf-membership .ginput_container.ginput_container_checkbox {
  padding: 0 !important;
  margin: 0 !important;
}

.ostomy-gf-membership .gfield_required_text {
  display: none !important;
}

.ostomy-gf-membership .gfield_required {
  margin: 0 !important;
  padding: 0 !important;
}

.ostomy-gf-membership .gfield_required::before {
  content: "*";
  color: #ee2850;
  font-weight: 700;
  margin-left: 1px !important;
  margin-right: 0 !important;
}

.ostomy-gf-membership .ginput_container.ginput_container_text input,
.ostomy-gf-membership .ginput_container.ginput_container_email input,
.ostomy-gf-membership .ginput_container.ginput_container_phone input {
  line-height: 62px !important;
  transition: all 0.2s linear;
  width: 100%;
  border: 1px solid #DADADA;
  color: #002E54;
  box-shadow: none !important;
  border-radius: 50px;
  padding: 0px 30px;
  background: #FDFDFD;
  text-transform: none;
  outline: none !important;
  font-size: 18px !important;
  font-family: "Urbanist", "Outfit", sans-serif;
  height: 65px;
}

/* Membership: Gravity Forms datepicker inputs match pill text fields */
.ostomy-gf-membership .ginput_container.ginput_container_date {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  max-width: 100% !important;
}

.ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box !important;
  line-height: 62px !important;
  transition: all 0.2s linear;
  border: 1px solid #DADADA !important;
  color: #002e54;
  box-shadow: none !important;
  border-radius: 50px !important;
  padding: 0 30px !important;
  background: #FDFDFD !important;
  text-transform: none;
  outline: none !important;
  font-size: 18px !important;
  font-family: "Urbanist", "Outfit", sans-serif !important;
  height: 65px !important;
}

/* One placeholder size across text / email / phone / date / textarea (GF Orbital defaults differ per type) */
.ostomy-gf-membership .ginput_container.ginput_container_text input::placeholder,
.ostomy-gf-membership .ginput_container.ginput_container_email input::placeholder,
.ostomy-gf-membership .ginput_container.ginput_container_phone input::placeholder,
.ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"]::placeholder,
.ostomy-gf-membership .ginput_container.ginput_container_textarea textarea::placeholder {
  font-size: 18px !important;
  font-family: "Urbanist", "Outfit", sans-serif !important;
  color: #a5aeb8 !important;
  opacity: 1 !important;
}

.ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"]:focus {
  border-color: #46b3ac !important;
  outline: none !important;
}

.ostomy-gf-membership .ginput_container.ginput_container_date .ui-datepicker-trigger {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  object-fit: contain;
}

.ginput_container.ginput_container_textarea textarea {
  padding-top: 25px;
  padding-bottom: 20px;
  min-height: 140px;
  resize: none;
  line-height: 1.3;
  border-radius: 20px;
}

.ostomy-gf-membership .ginput_container.ginput_container_textarea textarea {
  font-size: 18px !important;
  font-family: "Urbanist", "Outfit", sans-serif !important;
  color: #002e54 !important;
  padding-top: 25px;
  padding-bottom: 20px;
  min-height: 140px;
}

/*
 * Membership / involved GF: one row for choices.
 * GF theme sets flex on .gfield_radio but flex-direction: column and/or .gchoice { width: 100% },
 * which keeps items stacked — override both.
 */
/*
 * 5 equal columns on every choice row so options line up vertically across Gender / Marital /
 * Race (reference screenshot). Flex + max-content cannot align column 2 across sections.
 */
.ostomy-gf-membership .gfield_radio,
.ostomy-gf-membership .gfield_checkbox {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--ostomy-gf-choice-col-gap) !important;
  row-gap: var(--ostomy-gf-choice-row-gap) !important;
  align-items: center;
  justify-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Each cell: control + label; fills track so columns share one ruler */
.ostomy-gf-membership .gfield_radio .gchoice,
.ostomy-gf-membership .gfield_checkbox .gchoice {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--ostomy-gf-control-label-gap) !important;
  row-gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.ostomy-gf-membership .gfield_radio .gchoice .gfield-choice-input,
.ostomy-gf-membership .gfield_checkbox .gchoice .gfield-choice-input {
  justify-self: start;
  align-self: center;
}

.ostomy-gf-membership .gfield_description {
  font-style: italic !important;
  color: #606060 !important;
  padding-left: 30px !important;
}
.ostomy-gf-membership .gfield_description.validation_message  {
  font-style: normal !important;
  color: red !important;
}

.ostomy-gf-membership .gfield_radio .gchoice .gform-field-label,
.ostomy-gf-membership .gfield_checkbox .gchoice .gform-field-label {
  justify-self: start;
  min-width: 0;
  margin: 0 !important;
  padding-inline-start: 0 !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: 0.02em;
  color: #002e54 !important;
  font-family: "Outfit", sans-serif;
}

/* Consent blocks: single column */
.ostomy-gf-membership #field_4_30 .gfield_checkbox,
.ostomy-gf-membership #field_4_31 .gfield_checkbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-start !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Surgery type: 4-col grid for layout; same row/column gap px as flex rows */
.ostomy-gf-membership #field_4_5 .gfield_checkbox {
  display: grid !important;
  flex-direction: unset;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: var(--ostomy-gf-choice-row-gap) !important;
  column-gap: var(--ostomy-gf-choice-col-gap) !important;
  align-items: center;
  justify-items: start;
}

.ostomy-gf-membership #field_4_5 .gfield_checkbox .gchoice {
  width: 100% !important;
  max-width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
}

@media (max-width: 575.98px) {
  .ostomy-gf-membership {
    --ostomy-gf-control-label-gap: 10px;
    --ostomy-gf-choice-col-gap: 16px;
    --ostomy-gf-choice-row-gap: 14px;
    --ostomy-gf-choice-section-spacing: 26px;
  }

  .ostomy-gf-membership fieldset.gfield.gfield--type-choice > legend.gfield_label {
    margin-bottom: 10px !important;
  }

  .ostomy-gf-membership .gfield_radio,
  .ostomy-gf-membership .gfield_checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ostomy-gf-membership #field_4_30 .gfield_checkbox,
  .ostomy-gf-membership #field_4_31 .gfield_checkbox {
    display: flex !important;
  }

  .ostomy-gf-membership #field_4_5 .gfield_checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ostomy-gf-membership #field_4_33.gfield.gfield_html {
    margin-bottom: 4px !important;
  }

  .ostomy-gf-membership #field_4_34.gfield.gfield_html {
    margin-bottom: 6px !important;
  }

  .ostomy-gf-membership fieldset#field_4_30.gfield.gfield--type-choice {
    margin-bottom: 4px !important;
  }

  .ostomy-gf-membership fieldset#field_4_31.gfield.gfield--type-choice {
    margin-bottom: 22px !important;
  }

  .ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice,
  .ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice {
    gap: 12px !important;
  }

  /* Full form: tighter fields + full-width submit on small phones */
  .custom-form-holder.ostomy-gf-membership .gform_fields > .gfield,
  .custom-form-holder.ostomy-gf-membership .gform_fields > fieldset.gfield {
    margin-bottom: 18px !important;
  }

  .ostomy-gf-membership .gfield_label.gform-field-label,
  .ostomy-gf-membership legend.gfield_label {
    font-size: 16px !important;
    letter-spacing: 0.28px !important;
    margin-bottom: 10px !important;
  }

  .ostomy-gf-membership .gfield_description {
    font-size: 12px !important;
  }

  .ostomy-gf-membership .gfield_radio .gchoice .gform-field-label,
  .ostomy-gf-membership .gfield_checkbox .gchoice .gform-field-label {
    font-size: 16px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_text input,
  .ostomy-gf-membership .ginput_container.ginput_container_email input,
  .ostomy-gf-membership .ginput_container.ginput_container_phone input {
    height: 52px !important;
    line-height: 50px !important;
    padding: 0 22px !important;
    font-size: 16px !important;
    border-radius: 50px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"] {
    height: 52px !important;
    line-height: 50px !important;
    padding: 0 22px !important;
    font-size: 16px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_text input::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_email input::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_phone input::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_date input[type="text"]::placeholder,
  .ostomy-gf-membership .ginput_container.ginput_container_textarea textarea::placeholder {
    font-size: 16px !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_date {
    gap: 10px !important;
  }

  .ostomy-gf-membership #field_4_33.gfield.gfield_html img {
    max-width: 100% !important;
    height: auto !important;
  }

  .ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gform-field-label,
  .ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gform-field-label {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input,
  .ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input {
    margin-top: calc((16px * 1.55 - 22px) / 2) !important;
  }

  .custom-form-holder.ostomy-gf-membership .gform_footer,
  .custom-form-holder.ostomy-gf-membership .gform-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .custom-form-holder.ostomy-gf-membership .gform_footer .involved-form-submit.custom-button,
  .custom-form-holder.ostomy-gf-membership .gform-footer .involved-form-submit.custom-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /*
   * Mobile: button stretches to 100% width but parent rules use asymmetric padding
   * (left 2px / right 32px) for the desktop "icon as pill-cap" look. With
   * justify-content: center the icon+text shifts left and the icon stops looking
   * docked to the pill edge. Position the icon absolutely so the text can be
   * truly centered in the full button width while the icon stays as a left cap.
   * Icon is 35×35 with 5px inset on all sides (matches the Contact Us header
   * button proportions: ~78% of the 45px pill height).
   */
  .custom-form-holder.ostomy-gf-membership .gform_footer .involved-form-submit.custom-button.has-icon,
  .custom-form-holder.ostomy-gf-membership .gform-footer .involved-form-submit.custom-button.has-icon {
    position: relative !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  .custom-form-holder.ostomy-gf-membership .gform_footer .involved-form-submit.custom-button.has-icon::after,
  .custom-form-holder.ostomy-gf-membership .gform-footer .involved-form-submit.custom-button.has-icon::after {
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  .ostomy-gf-membership .ginput_container.ginput_container_textarea textarea {
    min-height: 120px !important;
    padding: 18px 22px !important;
    font-size: 16px !important;
  }

}

/*
 * Consent long labels: use flex so Orbital/GF global .gchoice input { align-self: center } does not
 * vertically center the box against multi-line text (that was breaking the ref. layout).
 */
.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Consent checkboxes: optical align to first text line (18px × 1.55 lh vs 22px box; 16px in MQs) */
.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input {
  align-self: flex-start !important;
  flex-shrink: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  margin: 0 !important;
  margin-top: calc((18px * 1.55 - 22px) / 2) !important;
  border: 2px solid #002e54 !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 12px 10px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:hover,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:hover {
  border-color: #005ba9 !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 169, 0.12) !important;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:focus-visible,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:focus-visible {
  outline: none !important;
  border-color: #005ba9 !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 169, 0.28) !important;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:checked,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:checked {
  background-color: #005ba9 !important;
  border-color: #005ba9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3 3 7-7'/%3E%3C/svg%3E") !important;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:checked:hover,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:checked:hover {
  background-color: #004a90 !important;
  border-color: #004a90 !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 169, 0.18) !important;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gform-field-label,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gform-field-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: flex-start !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.015em;
  color: #00213d !important;
  font-family: "Outfit", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * Mobile: consent labels (field_4_30 + field_4_31) shrink to 16px.
 * Earlier MQ blocks (~line 1044 and ~line 1461) already try to do this, but the
 * base 18px rule above sits AFTER them in the cascade with the same specificity,
 * so it wins at every breakpoint. Re-declare the override here (later in source)
 * to actually take effect on phones.
 */
@media (max-width: 575.98px) {
  .ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gform-field-label,
  .ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gform-field-label {
    font-size: 16px !important;
  }
}

.ostomy-gf-membership .gform_footer,
.ostomy-gf-membership .gform-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ostomy-gf-membership .gform_footer .involved-form-submit,
.ostomy-gf-membership .gform-footer .involved-form-submit {
  margin-top: 0 !important;
}

/* Keep NA helper notes consistently gray + italic on Get Involved (CF7/GF wrappers) */
.involved-form .shortWarning,
.involved-form .shortWarning i,
.custom-form-holder.ostomy-gf-membership .shortWarning,
.custom-form-holder.ostomy-gf-membership .shortWarning i {
  color: #8a95a3 !important;
  font-style: italic !important;
}

/* Consent checkboxes: match simple checkbox style used above (Email/Mobile Phone) */
.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  border: 1px solid #DADADA !important;
  border-radius: 4px !important;
  background-color: #F7F7F7 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 10px 8px !important;
  box-shadow: none !important;
  margin-top: 6px !important;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:hover,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:hover,
.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:focus-visible,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:focus-visible {
  border-color: #7f93a8 !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:checked,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:checked,
.ostomy-gf-membership fieldset#field_4_30 .gfield_checkbox .gchoice .gfield-choice-input:checked:hover,
.ostomy-gf-membership fieldset#field_4_31 .gfield_checkbox .gchoice .gfield-choice-input:checked:hover {
  border-color: #7f93a8 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%23005ba9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3 3 7-7'/%3E%3C/svg%3E") !important;
}

.involved-form .ui-datepicker-trigger, .involved-form h2.gform_title {
  display: none;
}

fieldset#field_4_30 legend.gfield_label.gform-field-label,
fieldset#field_4_31 legend.gfield_label.gform-field-label {
  display: none !important;
}

/* Quick search modal: hide browser-native clear/cancel "X" icon */
#quickSearch #ostomy-quick-search-input::-webkit-search-decoration,
#quickSearch #ostomy-quick-search-input::-webkit-search-cancel-button,
#quickSearch #ostomy-quick-search-input::-webkit-search-results-button,
#quickSearch #ostomy-quick-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

#quickSearch #ostomy-quick-search-input::-ms-clear,
#quickSearch #ostomy-quick-search-input::-ms-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/*
 * Single product quantity pill: bỏ viền/nền bo trên input .qty (đè .woocommerce .quantity .qty trong main.css).
 * Chỉ .single-product … để cart/checkout không đổi.
 */
.single-product .product-detail-cart__row .add-qty .qty {
  height: auto;
  min-height: 0;
  line-height: 1.2;
  align-self: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.single-product .product-detail-cart__row .add-qty .qty:focus,
.single-product .product-detail-cart__row .add-qty .qty:hover {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/*
 * Cart (shortcode) + Cart block: số lượng + Proceed — đè main.css / wc-blocks.
 */
body.woocommerce-cart table.shop_table .quantity .qty,
body.woocommerce-cart .woocommerce .quantity .qty,
body.woocommerce-page.woocommerce-cart .woocommerce .quantity .qty {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

body.woocommerce-cart table.shop_table .quantity .qty:hover,
body.woocommerce-cart table.shop_table .quantity .qty:focus,
body.woocommerce-cart .woocommerce .quantity .qty:hover,
body.woocommerce-cart .woocommerce .quantity .qty:focus {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

body.woocommerce-cart .quantity input[type="number"]::-webkit-outer-spin-button,
body.woocommerce-cart .quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce .wc-block-components-quantity-selector input::-webkit-outer-spin-button,
.woocommerce .wc-block-components-quantity-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

body.woocommerce-cart .quantity input[type="number"],
.woocommerce .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Block cart: bỏ viền ngoài ô ± (wc-block-components-quantity-selector) */
.woocommerce .wc-block-components-quantity-selector {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.woocommerce .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/*
 * Cart: Proceed to checkout (classic) + Cart block.
 * Cart block không bọc trong .woocommerce — không được prefix .woocommerce cho nút block.
 * custom_verz phải enqueue sau wc-blocks-style (functions.php priority 99).
 */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-page.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-page.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.wp-element-button,
body.woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button,
body.woocommerce-cart .wc-block-cart__submit-container a.wc-block-components-button,
body.woocommerce-page.woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a.wc-block-components-button.contained,
.wc-block-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button.wc-block-components-button,
a.wc-block-components-button.wc-block-cart__submit-button.contained,
.woocommerce .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.woocommerce .wc-block-cart__submit-button .wc-block-components-button,
.woocommerce a.wc-block-cart__submit-button.wc-block-components-button,
.woocommerce .wc-block-cart__submit-container a.wc-block-cart__submit-button {
  border: 2px solid #002e54 !important;
  background: #005ba9 !important;
  background-color: #005ba9 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 0.6em 1.25em !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus,
body.woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button:hover,
body.woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button:focus,
body.woocommerce-page.woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button:focus,
.wc-block-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button:hover,
a.wc-block-components-button.wc-block-cart__submit-button.contained:hover,
a.wc-block-components-button.wc-block-cart__submit-button.contained:focus,
.woocommerce .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.woocommerce .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:focus,
.woocommerce .wc-block-cart__submit-button .wc-block-components-button:hover,
.woocommerce .wc-block-cart__submit-button .wc-block-components-button:focus,
.woocommerce a.wc-block-cart__submit-button.wc-block-components-button:hover,
.woocommerce a.wc-block-cart__submit-button.wc-block-components-button:focus,
.woocommerce .wc-block-cart__submit-container a.wc-block-cart__submit-button:hover,
.woocommerce .wc-block-cart__submit-container a.wc-block-cart__submit-button:focus {
  background: #002e54 !important;
  background-color: #002e54 !important;
  color: #ffffff !important;
  border-color: #001f3c !important;
  box-shadow: none !important;
}

/*
 * Checkout: Place order — mẫu: nền xám nhạt, viền đen 1px, chữ đen, góc vuông.
 * Chỉ #place_order / block place-order, không đụng nút coupon hay link khác.
 */
body.woocommerce-checkout #place_order,
body.woocommerce-page.woocommerce-checkout #place_order,
.woocommerce-checkout #place_order {
  background: #e6e6e6 !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus,
body.woocommerce-page.woocommerce-checkout #place_order:hover,
body.woocommerce-page.woocommerce-checkout #place_order:focus,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
  background: #d4d4d4 !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

/* Checkout block: cùng kiểu với nút Place order */
.woocommerce .wc-block-components-checkout-place-order-button .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button {
  background: #e6e6e6 !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.woocommerce .wc-block-components-checkout-place-order-button .wc-block-components-button:hover,
.woocommerce .wc-block-components-checkout-place-order-button .wc-block-components-button:focus,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button:focus {
  background: #d4d4d4 !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

.woocommerce .wc-block-components-checkout-place-order-button .wc-block-components-button svg,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button svg {
  fill: currentColor !important;
}

/*
 * Shop & Donate – Payment Method tiles.
 * Base rule in css/scss/custom.css renders 4 tiles (Credit/Debit Card, Bank Transfer,
 * Cheque, Paynow) as a 2-column grid. On phones that cramps the labels, so stack
 * to a single full-width column below 576px.
 */
@media (max-width: 575.98px) {
  .donation-payment-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1599.98px) {
  .ostomy-gf-membership .gfield_description { padding-left: 20px !important; }
}