/*
 * page-layout.css
 * Layout overrides for full_form.html and welcome-back.html
 * Loaded LAST — overrides form.css and site CSS
 */

/* ── Reset body to vertical column, no center-squishing ── */
html {
  height: 100%;
}
body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* key: children fill full width */
  text-align: left !important;
  background: #09a8e2 !important;
  font-family: "Open Sans", "Lato", Arial, sans-serif !important;
}

/* ── Header: full width white bar ── */
.main-header {
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  padding: 12px 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  /* Reset any flex child centering */
  align-self: auto !important;
}
.main-header__container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.main-header__nav-item a,
.main-header__nav-item a:visited {
  color: #333 !important;
  text-decoration: none !important;
}
.main-header__nav-item a:hover {
  color: #fa5c07 !important;
}

/* ── Teal pattern background area ── */
.bh-page-bg {
  flex: 1 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #09a8e2 !important;
  background-image: url("static/imgs/hero.da859c18.jpg") !important;
  background-position: 50% 50% !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  padding: 40px 16px 60px !important;
  /* Centre the form wrapper horizontally */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ── Form wrapper: limit width, DO NOT inherit body centering ── */
.bh-page-bg .form-wrapper {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  align-self: auto !important;
}

/* ── Form buttons: restore form.css styles overridden by site CSS ── */
.form-wrapper .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
  text-transform: uppercase !important;
  font-family: "Lato", Arial, sans-serif !important;
  text-decoration: none !important;
}
.form-wrapper .btn-amount {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  padding: 0 20px !important;
  border-radius: var(--bh-radius-pill, 1000px) !important;
  background: var(--bh-orange, #ff8a0b) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255,138,11,0.3) !important;
}
.form-wrapper .btn-amount:hover {
  background: var(--bh-orange-hover, #e07a00) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.form-wrapper .btn-next,
.form-wrapper .btn-continue {
  background: var(--bh-orange, #ff8a0b) !important;
  color: #fff !important;
  border-radius: var(--bh-radius, 5px) !important;
}
.form-wrapper .btn-next:hover,
.form-wrapper .btn-continue:hover {
  background: var(--bh-orange-hover, #e07a00) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.form-wrapper .btn-back {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: var(--bh-radius, 5px) !important;
}
.form-wrapper .btn-choice.selected,
.form-wrapper .btn-choice.active {
  background: var(--bh-orange, #ff8a0b) !important;
  color: #fff !important;
  border-color: var(--bh-orange, #ff8a0b) !important;
}
.form-wrapper .btn-submit {
  background: var(--bh-green, #27ae60) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bh-radius, 5px) !important;
}
.form-wrapper .btn-submit:hover {
  background: #219a52 !important;
  color: #fff !important;
}

/* ── Select fields: restore form.css height overridden by site CSS ── */
/* Exclude flatpickr internal selects (.flatpickr-monthDropdown-months) */
.form-wrapper select:not(.flatpickr-monthDropdown-months),
.form-wrapper .select-field {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 32px 0 10px !important;
  font-size: 14px !important;
  border-radius: var(--bh-radius, 5px) !important;
  border: 1px solid var(--bh-border, #ddd) !important;
  background-color: #fff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  color: var(--bh-dark, #292d32) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  outline: none !important;
}
.form-wrapper select:focus,
.form-wrapper .select-field:focus {
  border-color: var(--bh-teal, #5dc4d6) !important;
  box-shadow: none !important;
}
/* Restore select arrow from form.css */
.form-wrapper .select-field {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23565d63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

/* ── Choice buttons (.btn-choice): fix height/border-radius overridden by site CSS ── */
.form-wrapper .btn-choice,
.form-wrapper .choice-btn {
  flex: 1 !important;
  min-height: 44px !important;
  height: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bh-orange, #ff8a0b) !important;
  background: #fff !important;
  border: 2px solid var(--bh-border, #ddd) !important;
  border-radius: var(--bh-radius, 5px) !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  text-transform: none !important;
  transition: border-color 0.2s, background 0.2s !important;
  box-sizing: border-box !important;
}
.form-wrapper .btn-choice:hover,
.form-wrapper .choice-btn:hover {
  border-color: var(--bh-orange, #ff8a0b) !important;
  background: #fff8f0 !important;
  color: var(--bh-orange, #ff8a0b) !important;
  text-decoration: none !important;
}
.form-wrapper .btn-choice.selected,
.form-wrapper .btn-choice.active,
.form-wrapper .choice-btn.selected,
.form-wrapper .choice-btn.active {
  background: var(--bh-orange, #ff8a0b) !important;
  border-color: var(--bh-orange, #ff8a0b) !important;
  color: #fff !important;
}

/* ── Flatpickr: site CSS sets .flatpickr-input {height:0;width:0;opacity:0} — fix it ── */
.form-wrapper .flatpickr-input,
.flatpickr-input.input-field {
  height: 40px !important;
  min-height: 40px !important;
  width: 100% !important;
  border: 1px solid var(--bh-border, #ddd) !important;
  outline: none !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  padding: 0 38px 0 10px !important;
  font-size: 14px !important;
  color: var(--bh-dark, #292d32) !important;
  background: #fff !important;
  border-radius: var(--bh-radius, 5px) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
.form-wrapper .flatpickr-input:focus {
  border-color: var(--bh-teal, #5dc4d6) !important;
}
/* Calendar popup */
.flatpickr-calendar {
  position: absolute !important;
  z-index: 99999 !important;
  font-family: "Lato", Arial, sans-serif !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.flatpickr-calendar.open {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Fix month header shifted down by site CSS (padding:10px 0 0 override) */
.flatpickr-current-month {
  padding: 7.48px 0 0 !important;
  font-size: 135% !important;
}
/* Restore flatpickr internal select — must NOT inherit our 40px min-height fix */
.flatpickr-monthDropdown-months {
  height: auto !important;
  min-height: unset !important;
  padding: 0 0 0 0.5ch !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: inherit !important;
  cursor: pointer !important;
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
}
/* Restore prev/next arrow position shifted by site CSS (top:-5px override) */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 0 !important;
  padding: 10px !important;
}

/* ── Popup card buttons (Helpful Suggestion popups) ── */
/* .btn-next inside popup = orange pill CTA */
.popup-card .btn-next,
.popup-card [id^="btn-change"],
.popup-card [id^="btn-change-to"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  background: var(--bh-orange, #ff8a0b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bh-radius-pill, 1000px) !important;
  height: 50px !important;
  min-height: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: "Lato", Arial, sans-serif !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
  padding: 0 20px !important;
  transition: background 0.15s !important;
  text-transform: none !important;
}
.popup-card .btn-next:hover,
.popup-card [id^="btn-change"]:hover {
  background: var(--bh-orange-hover, #e07a00) !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* .btn-back inside popup = ghost keep button */
.popup-card .btn-back,
.popup-card [id^="btn-keep"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  color: var(--bh-gray, #565d63) !important;
  font-size: 14px !important;
  font-family: "Lato", Arial, sans-serif !important;
  cursor: pointer !important;
  padding: 8px 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  opacity: 1 !important;
}
.popup-card .btn-back:hover,
.popup-card [id^="btn-keep"]:hover {
  text-decoration: underline !important;
  background: none !important;
  color: var(--bh-gray, #565d63) !important;
}

/* ── Disclaimers: full width, light bg ── */
.disclaimers {
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  background: #f5f7fa !important;
  text-align: left !important;
}
.disclaimers__header {
  text-align: center !important;
}
.disclaimers__content p,
.disclaimers__content strong {
  text-align: left !important;
}