.elementor-37949 .elementor-element.elementor-element-669f9c6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================================
   THEME OVERRIDE GUARD

   This file is embedded in a WordPress page, so the theme's own
   button, form and layout rules cascade straight into it. That is
   why the navigation drifts after a theme or builder update.

   Everything below is pinned hard: the id is repeated so it counts
   twice, prefixed with html body, and marked !important. That beats
   anything a theme or page builder can reasonably throw at a button.
   Nothing here changes the design — it restates the intended values
   so they cannot be overwritten from outside. Keep this block LAST
   in the stylesheet.
   ============================================================ */

html body #actionbar#actionbar{
  position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:100% !important;margin:0 !important;
  z-index:99990 !important;
  box-sizing:border-box !important;
  background:rgba(251,248,243,.93) !important;
  border-top:1px solid var(--line) !important;
  padding:11px 20px calc(11px + env(safe-area-inset-bottom,0px)) !important
}
html body.q-on #actionbar#actionbar{display:block !important}

html body #actionbar#actionbar .actionbar-inner{
  display:flex !important;flex-direction:row !important;
  align-items:center !important;justify-content:center !important;
  gap:11px !important;max-width:720px !important;margin:0 auto !important;
  padding:0 !important;width:100% !important;box-sizing:border-box !important
}

html body #actionbar#actionbar #q-back,
html body #actionbar#actionbar #q-next{
  box-sizing:border-box !important;
  flex:1 1 0 !important;
  width:auto !important;min-width:0 !important;max-width:170px !important;
  height:auto !important;min-height:50px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  margin:0 !important;padding:14px 18px !important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:15px !important;font-weight:600 !important;line-height:1.2 !important;
  letter-spacing:.02em !important;text-transform:none !important;text-decoration:none !important;
  text-align:center !important;white-space:nowrap !important;
  border-radius:11px !important;border-width:1.5px !important;border-style:solid !important;
  cursor:pointer !important;
  transition:background .18s,transform .12s,box-shadow .18s !important
}

html body #actionbar#actionbar #q-back{
  background:#fff !important;color:var(--plum) !important;
  border-color:var(--line) !important;
  box-shadow:0 1px 3px rgba(51,19,45,.05) !important
}
html body #actionbar#actionbar #q-back:hover{background:var(--lilac) !important;border-color:var(--plum-soft) !important}

html body #actionbar#actionbar #q-next{
  background:var(--plum) !important;color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 2px 10px rgba(74,29,66,.2) !important
}
html body #actionbar#actionbar #q-next:hover{background:var(--plum-deep) !important}
html body #actionbar#actionbar #q-next:disabled{
  background:#CFC4CD !important;color:#fff !important;
  box-shadow:none !important;cursor:not-allowed !important
}

html body #actionbar#actionbar #q-back:active,
html body #actionbar#actionbar #q-next:active{transform:translateY(1px) !important}

html body #actionbar#actionbar #q-back:focus-visible,
html body #actionbar#actionbar #q-next:focus-visible{
  outline:2.5px solid var(--gold) !important;outline-offset:2px !important
}

/* Themes often park a scroll to top button in the bottom right corner,
   which lands on top of Next. This keeps the bar clear of it. */
html body.q-on .wrap{padding-bottom:120px !important}

/* The answer options are <button> elements too, so a theme button rule
   flattens all six of them on every question. Same treatment. */
html body #q-opts#q-opts{
  display:flex !important;flex-direction:column !important;gap:9px !important;
  margin:0 !important;padding:0 !important;list-style:none !important
}

html body #q-opts#q-opts .opt{
  box-sizing:border-box !important;
  display:flex !important;flex-direction:row !important;
  gap:13px !important;align-items:flex-start !important;
  width:100% !important;max-width:none !important;min-width:0 !important;
  height:auto !important;min-height:0 !important;
  margin:0 !important;padding:15px 16px !important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:15px !important;font-weight:400 !important;line-height:1.5 !important;
  letter-spacing:normal !important;text-transform:none !important;text-align:left !important;
  white-space:normal !important;text-decoration:none !important;
  color:var(--ink) !important;background:#fff !important;
  border:1.5px solid var(--line) !important;border-radius:12px !important;
  box-shadow:none !important;cursor:pointer !important;
  transition:border-color .16s,background .16s,box-shadow .16s !important
}
html body #q-opts#q-opts .opt:hover{
  border-color:var(--plum-soft) !important;background:#FEFCFE !important
}
html body #q-opts#q-opts .opt.sel{
  border-color:var(--plum) !important;background:#FAF4F9 !important;
  box-shadow:0 2px 10px rgba(74,29,66,.09) !important
}
html body #q-opts#q-opts .opt.none{
  margin-top:5px !important;color:var(--ink-soft) !important;font-style:italic !important
}
html body #q-opts#q-opts .opt.dim{opacity:.5 !important}
html body #q-opts#q-opts .opt.locked{cursor:not-allowed !important}

html body #q-opts#q-opts .opt .tick{
  box-sizing:border-box !important;
  flex:0 0 21px !important;width:21px !important;height:21px !important;
  margin:1px 0 0 !important;padding:0 !important;
  border:1.5px solid #CDBFCA !important;border-radius:6px !important;
  background:#fff !important;position:relative !important;
  transition:all .16s !important
}
html body #q-opts#q-opts .opt.sel .tick{
  background:var(--plum) !important;border-color:var(--plum) !important
}
html body #q-opts#q-opts .opt .tick:after{
  content:'' !important;position:absolute !important;
  left:6.5px !important;top:2.5px !important;width:5px !important;height:10px !important;
  background:none !important;
  border:solid #fff !important;border-width:0 2.2px 2.2px 0 !important;
  border-radius:0 !important;
  transform:rotate(45deg) scale(0) !important;transition:transform .16s !important
}
html body #q-opts#q-opts .opt.sel .tick:after{transform:rotate(45deg) scale(1) !important}/* End custom CSS */