.elementor-843 .elementor-element.elementor-element-8525a4b{--display:flex;}.elementor-843 .elementor-element.elementor-element-aaa6df6{--display:flex;}#elementor-popup-modal-843{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-843 .dialog-message{width:800px;height:auto;}#elementor-popup-modal-843 .dialog-close-button{display:flex;}#elementor-popup-modal-843 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for stepbooking, class: .elementor-element-575ffcf *//*************************************************
 JSA — Consultation popup (Elementor template ID 843)
 CSS for Overlay Close Button approach
**************************************************/

/* 1) Hide Employee & Location steps/fields */
#elementor-popup-modal-843 .elementor .am-step-booking [data-step="employee"],
#elementor-popup-modal-843 .elementor .am-step-booking [data-step="location"],
#elementor-popup-modal-843 .elementor .am-select-employee,
#elementor-popup-modal-843 .elementor .am-select-location,
#elementor-popup-modal-843 .elementor .am-employee,
#elementor-popup-modal-843 .elementor .am-location { display: none !important; }

/* Hide the left stepper bullets */
#elementor-popup-modal-843 .elementor .am-steps .am-step-employee,
#elementor-popup-modal-843 .elementor .am-steps .am-step-location { display: none !important; }

/* 2) Keep a sensible minimum height */
#elementor-popup-modal-843 .elementor .am-body,
#elementor-popup-modal-843 .elementor .am-step-booking { min-height: 320px !important; }

/* 3) Keep the Elementor shell transparent (your design) */
.elementor-popup-modal .dialog-widget-content:has(.elementor[data-elementor-id="843"]),
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]),
.consult-popup-clean .dialog-widget-content,
.consult-popup-clean .dialog-message {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Optional: center the Amelia widget */
.elementor-popup-modal .dialog-widget-content:has(.elementor[data-elementor-id="843"]) .elementor,
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) .elementor,
.consult-popup-clean .elementor {
  display: flex; justify-content: center; align-items: center;
}

/* Hide Elementor’s native close button wrapper for this popup (defense-in-depth;
   the Overlay script also hides it via JS) */
#elementor-popup-modal-843 .dialog-type-buttons { display: none !important; }

/* (Optional / harmless) Make Amelia panel(s) a positioning + stacking context.
   Overlay doesn’t require this, but it doesn’t hurt. */
#elementor-popup-modal-843 .am-fs_main,
#elementor-popup-modal-843 .am-fs_main-inner,
#elementor-popup-modal-843 .am-step-booking {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 10 !important;
}

/* No extra top gap on the Amelia card */
#elementor-popup-modal-843 .amelia-app-booking,
#elementor-popup-modal-843 .am-step-booking {
  padding-top: 0 !important; position: static !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8525a4b *//* visual proof that our scope is hooked */
.elementor-popup-modal .consult-scope { outline: 3px solid magenta !important; }

/* hide Employee/Location (covers multiple Amelia skins/markup) */
.elementor-popup-modal .consult-scope .am-step-booking [data-step*="employee" i],
.elementor-popup-modal .consult-scope .am-step-booking [data-step*="location" i],
.elementor-popup-modal .consult-scope [class*="am-select-employee" i],
.elementor-popup-modal .consult-scope [class*="am-select-location" i],
.elementor-popup-modal .consult-scope [class*="am-employee" i],
.elementor-popup-modal .consult-scope [class*="am-location" i] {
  display: none !important;
}

/* hide bullets in the left stepper if they appear */
.elementor-popup-modal .consult-scope .am-steps [class*="step-employee" i],
.elementor-popup-modal .consult-scope .am-steps [class*="step-location" i] {
  display: none !important;
}

/* if a whole form row contains employee/location, hide the row (modern browsers) */
.elementor-popup-modal .consult-scope .am-form-group:has([class*="employee" i]),
.elementor-popup-modal .consult-scope .am-form-group:has([class*="location" i]) {
  display: none !important;
}/* End custom CSS */
/* Start custom CSS *//*************************************************
 JSA — Consultation popup (Elementor template ID 843)
 1) Hide EMPLOYEE + LOCATION + their step bullets
 2) Keep sensible min-height for Amelia wizard
 3) Remove Elementor white shell for this popup only
 4) Restyle the native close button to match Amelia
**************************************************/

/* 1) Hide Employee & Location steps/fields */
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-step-booking [data-step="employee"],
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-step-booking [data-step="location"],
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-select-employee,
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-select-location,
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-employee,
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-location {
  display: none !important;
}

/* Hide the left stepper bullets for Employee/Location */
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-steps .am-step-employee,
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-steps .am-step-location {
  display: none !important;
}

/* 2) Keep a sensible minimum height so the wizard doesn’t collapse */
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-body,
.elementor-popup-modal .elementor[data-elementor-id="843"] .am-step-booking {
  min-height: 320px !important;
}

/* 3) Strip Elementor popup shell background ONLY for this popup
      (use :has() to scope to the canvas with ID 843) */
.elementor-popup-modal .dialog-widget-content:has(.elementor[data-elementor-id="843"]),
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Also ensure the inner Elementor template is transparent */
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) .elementor-section,
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) .elementor-container,
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) .elementor-column,
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) .elementor-widget-container {
  background: transparent !important;
  box-shadow: none !important;
}

/* Optional nicety: center the Amelia widget in the now-transparent shell */
.elementor-popup-modal .dialog-widget-content:has(.elementor[data-elementor-id="843"]) .elementor,
.elementor-popup-modal .dialog-message:has(.elementor[data-elementor-id="843"]) .elementor {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 4) Restyle the NATIVE Elementor close button for popup 843
      (smaller, closer, JSA navy, square-ish to echo Amelia’s card) */
.elementor-popup-modal[data-elementor-id="843"] .dialog-close-button {
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;

  border-radius: 8px !important;          /* match Amelia card radius */
  background: #20354a !important;         /* JSA navy */
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;

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

  opacity: 1 !important;
  z-index: 99999 !important;

  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  transition: transform .15s ease-in-out, background .15s ease-in-out;
}

.elementor-popup-modal[data-elementor-id="843"] .dialog-close-button:hover,
.elementor-popup-modal[data-elementor-id="843"] .dialog-close-button:focus {
  background: #36587a !important;         /* lighter navy on hover */
  transform: scale(1.08);
  outline: none !important;
}/* End custom CSS */