/* Dr. Mark Bowers | EmailMeForm Modern Theme V5
   Apply only to the duplicated test theme.
   Visual styling only: no form fields, validation, consent or submission changes.
   Based on the official EmailMeForm Theme Kit supplied Nov 2026.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --mb-navy: #0c2b4d;
  --mb-teal: #59c9d2;
  --mb-text: #173b57;
  --mb-muted: #526b7c;
  --mb-line: #cfdee6;
  --mb-pale: #f1f7f9;
}

body#emf-container-wrap,
body.form {
  background: #eef5f8 !important;
  color: var(--mb-text) !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

#emf-container-outer { max-width: 740px !important; width: calc(100% - 24px) !important; margin: 34px auto !important; }

#emf-container {
  width: 100% !important;
  max-width: 740px !important;
  background: #ffffff !important;
  border: 1px solid #d6e6ec !important;
  border-top: 5px solid var(--mb-teal) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 55px rgba(12,43,77,.11) !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

#emf-container, #emf-container * { box-sizing: border-box; }
#emf-container #emf-logo { background: #ffffff !important; border-radius: 0 !important; }
#emf-container #emf-logo a { max-width: 100%; }

#emf-container #emf-form-title {
  font-family: 'Inter', Arial, sans-serif !important;
  color: var(--mb-navy) !important;
  font-size: clamp(27px, 4vw, 36px) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1.16 !important;
  letter-spacing: -.035em;
}

#emf-container #emf-form-description {
  font-family: 'Inter', Arial, sans-serif !important;
  color: var(--mb-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-style: normal !important;
  overflow-wrap: anywhere;
}

#emf-container #emf-form-instruction,
#emf-container .emf-head-widget { border-color: #e0ebef !important; }

#emf-container label.emf-label-desc,
#emf-container .emf-label-desc,
#emf-container li.emf-field-section_break h3 {
  font-family: 'Inter', Arial, sans-serif !important;
  color: var(--mb-navy) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

#emf-container #emf-form ul li.emf-li-field { padding-top: 13px !important; padding-bottom: 15px !important; }
#emf-container #emf-form ul li.highlight-field { background: #eef9fa !important; border-radius: 9px !important; }

#emf-container div.emf-div-field input[type='text'],
#emf-container div.emf-div-field input[type='email'],
#emf-container div.emf-div-field input[type='tel'],
#emf-container div.emf-div-field input[type='number'],
#emf-container div.emf-div-field textarea,
#emf-container div.emf-div-field select {
  background: #fbfdfe !important;
  color: var(--mb-text) !important;
  border: 1px solid #bfd3de !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  min-height: 43px !important;
  font: 500 15px/1.45 'Inter', Arial, sans-serif !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

#emf-container div.emf-div-field textarea { min-height: 150px !important; width: 100% !important; resize: vertical; }
#emf-container li.emf-field-email div.emf-div-field input,
#emf-container li.emf-field-textarea div.emf-div-field textarea { width: 100% !important; }

#emf-container div.emf-div-field input:focus,
#emf-container div.emf-div-field textarea:focus,
#emf-container div.emf-div-field select:focus {
  outline: 2px solid rgba(8,151,164,.35) !important;
  outline-offset: 1px;
  border-color: #138f9b !important;
  background: #ffffff !important;
}

/* Preserve EmailMeForm's split name and phone structures. */
#emf-container li.emf-field-name input,
#emf-container li.emf-field-phone input { width: auto; }

#emf-container li .emf-div-instruction,
#emf-container li .emf-div-field label,
#emf-container li.emf-field-section_break .emf-section-text {
  color: var(--mb-muted) !important;
  background: transparent !important;
  font: 400 12px/1.6 'Inter', Arial, sans-serif !important;
}

#emf-container .emf-head-widget,
#emf-container li .emf-section-separator { border-color: #d9e8ed !important; border-bottom-style: solid !important; }

#emf-container #submit_form,
#emf-container .emf-action-next,
#emf-container .emf-action-previous {
  appearance: none;
  background: var(--mb-navy) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--mb-teal) !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 12px rgba(89,201,210,.25) !important;
  font: 700 15px/1.3 'Inter', Arial, sans-serif !important;
  min-height: 46px !important;
  padding: 12px 26px !important;
  cursor: pointer;
  text-transform: none !important;
}

#emf-container #submit_form:hover,
#emf-container .emf-action-next:hover,
#emf-container .emf-action-previous:hover {
  background: #194967 !important;
  box-shadow: 0 6px 17px rgba(89,201,210,.4) !important;
}

#emf-container .emf-error-message { border: 1px solid #d57a83 !important; border-radius: 7px !important; background: #fff1f2 !important; color: #8c2533 !important; }

/* Leave security challenge internals alone. */
#emf-container-outer #emf-form-shadows { display: none !important; }

@media (max-width: 600px) {
  #emf-container-outer { width: calc(100% - 16px) !important; margin: 12px auto !important; }
  #emf-container { border-radius: 12px !important; }
  #emf-container #emf-form-title { font-size: 27px !important; }
  #emf-container #emf-form ul li.emf-li-field { padding-top: 11px !important; padding-bottom: 12px !important; }
  #emf-container div.emf-div-field textarea { min-height: 140px !important; }
}

/* V2: contain segmented name and telephone controls without changing fields. */
#emf-container li.emf-field-name .emf-div-field input[type='text'] {
  width: 145px !important;
  min-width: 0 !important;
  max-width: calc(50vw - 35px) !important;
}
#emf-container li.emf-field-phone .emf-div-field {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#emf-container li.emf-field-phone .emf-div-field > span:not(.emf-sep) {
  display: inline-block !important;
  vertical-align: top !important;
  width: auto !important;
  max-width: none !important;
}
#emf-container li.emf-field-phone .emf-div-field input[type='text'] {
  width: 62px !important;
  min-width: 0 !important;
  max-width: 62px !important;
  padding: 9px 7px !important;
  text-align: center !important;
}
#emf-container li.emf-field-phone .emf-div-field > span:last-child input[type='text'] {
  width: 78px !important;
  max-width: 78px !important;
}
#emf-container li.emf-field-phone .emf-div-field .emf-sep {
  display: inline-block !important;
  width: auto !important;
  padding: 10px 4px 0 !important;
  vertical-align: top !important;
}
#emf-container li.emf-field-phone .emf-div-field label.emf-block {
  display: block !important;
  text-align: center !important;
}
#emf-container li.emf-field-phone .emf-div-field p,
#emf-container li.emf-field-phone .emf-div-field div,
#emf-container li.emf-field-phone .emf-div-field .emf-div-instruction {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}
#emf-container #emf-form ul li.emf-li-field,
#emf-container #emf-form ul li.emf-li-field .emf-div-field {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* V2: override theme-builder button imagery as well as its color. */
#emf-container #emf-form input[type='submit'],
#emf-container #emf-form button[type='submit'],
#emf-container input#submit_form,
#emf-container .emf-action-next,
#emf-container .emf-action-previous {
  background-color: #0c2b4d !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #59c9d2 !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 12px rgba(89,201,210,.28) !important;
  font: 700 15px/1.3 'Inter',Arial,sans-serif !important;
  text-shadow: none !important;
  padding: 12px 25px !important;
  min-width: 132px !important;
  min-height: 45px !important;
}
#emf-container #emf-form input[type='submit']:hover,
#emf-container #emf-form button[type='submit']:hover {
  background-color: #1a4865 !important;
  box-shadow: 0 6px 18px rgba(89,201,210,.4) !important;
}

@media(max-width:420px) {
  #emf-container li.emf-field-name .emf-div-field input[type='text'] { width: 118px !important; }
  #emf-container li.emf-field-phone .emf-div-field input[type='text'] { width: 54px !important; max-width: 54px !important; }
  #emf-container li.emf-field-phone .emf-div-field > span:last-child input[type='text'] { width: 68px !important; max-width: 68px !important; }
}

/* V4: clearer, equal-width name inputs. */
#emf-container #emf-form li.emf-field-name .emf-div-field input[type='text'] {
  width: 175px !important;
  max-width: min(175px, 38vw) !important;
  min-width: 0 !important;
}

/* V4: remove decorative rules around the clinical-guidance Section Break. */
#emf-container #emf-form-instruction,
#emf-container #emf-form .emf-head-widget {
  border-bottom: 0 !important;
}
#emf-container #emf-form li.emf-field-section_break .emf-section-separator,
#emf-container #emf-form li.emf-field-section_break .emf-div-field-section .emf-section-separator {
  display: none !important;
  border: 0 !important;
}
#emf-container #emf-form li.emf-field-section_break {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
@media(max-width:420px) {
  #emf-container #emf-form li.emf-field-name .emf-div-field input[type='text'] {
    width: 126px !important;
    max-width: 38vw !important;
  }
}

/* V5 selectors verified against the actual public test form on Nov 4, 2026.
   Modern EmailMeForm Name field is emf-field-new_name, not emf-field-name.
   Its two immediate spans carry inline widths of 60px and 100px. */
#emf-container #emf-form li.emf-field-new_name .emf-div-field > span {
  display: inline-block !important;
  width: 175px !important;
  max-width: min(175px, 39vw) !important;
  vertical-align: top !important;
  margin-right: 8px !important;
}
#emf-container #emf-form li.emf-field-new_name .emf-div-field > span > input[type='text'] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide the two empty placeholder Section Breaks found in this test form. */
#emf-container #emf-li-7,
#emf-container #emf-li-10 { display: none !important; }

/* Remove the divider above the Dr. Bowers Direct link and tighten its gap. */
#emf-container #emf-li-0 .emf-section-separator { display: none !important; }
#emf-container #emf-li-0 { padding-bottom: 0 !important; margin-bottom: 0 !important; }
#emf-container #emf-li-1 { padding-top: 8px !important; }

@media(max-width:460px) {
  #emf-container #emf-form li.emf-field-new_name .emf-div-field > span {
    width: 125px !important;
    max-width: calc(50% - 8px) !important;
    margin-right: 5px !important;
  }
}
