/* Clerk Modal Container */
#clerk-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Clerk Components */
.cl-rootBox,
.cl-modal,
.cl-card,
.cl-component,
.cl-component-overlay,
.cl-overlay,
.cl-backdrop,
.cl-backdrop-blur,
.cl-auth-form-wrapper {
  z-index: 9999;
  pointer-events: auto;
}

/* Ensure the modal backdrop covers everything */
.cl-backdrop, 
.cl-backdrop-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
}

/* When modal is open */
body.clerk-modal-open {
  overflow: hidden;
}

body.clerk-modal-open #clerk-modal-container {
  pointer-events: auto;
}

/* Lower z-index for page content */
.page-container, 
.container, 
.navbar {
  z-index: 1 !important;
}

/* Fix for modal appearing behind content */
body > .cl-rootBox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
}

/* Ensure modals are visible */
.cl-component-overlay {
  z-index: 9998 !important;
}

/* Special rules when clerk modal is open */
body.clerk-modal-open .page-container,
body.clerk-modal-open .container,
body.clerk-modal-open .navbar {
  z-index: 1 !important;
}

body.clerk-modal-open #clerk-modal-container,
body.clerk-modal-open .cl-rootBox,
body.clerk-modal-open .cl-modal,
body.clerk-modal-open .cl-card,
body.clerk-modal-open .cl-component,
body.clerk-modal-open .cl-component-overlay,
body.clerk-modal-open .cl-overlay,
body.clerk-modal-open .cl-backdrop,
body.clerk-modal-open .cl-backdrop-blur,
body.clerk-modal-open .cl-auth-form-wrapper {
  z-index: 9999 !important;
}