/* =========================================================
   Soultenders – 2026 Mixer
   FULL CSS: Image overlay + Tribe Tickets Commerce dialog
   ========================================================= */
/* =========================================================
   GLOBAL FIX: Prevent page shift when Tribe modal opens
   Cross-browser (Chrome, Edge, Safari)
   ========================================================= */

/* Always reserve scrollbar space */
html {
  overflow-y: scroll;
}

/* =========================
   1) TICKET OVERLAY ON IMAGE
   ========================= */

.tribe-image-ticket-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.tribe-image-ticket-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay container (dark box) */
.tribe-ticket-overlay {
  position: absolute;
  top: 600px;
  left: 650px;
  width: 44%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  z-index: 5;
}



/* Remove unwanted vertical gaps inside overlay tickets UI */
.tribe-ticket-overlay .tribe-tickets__form,
.tribe-ticket-overlay p {
  margin-bottom: 0 !important;
}

/* =========================================================
   FORCE CENTER: Tribe dialog modal
   Uses your hook: .tribe-dialog__overlay.tribe-modal__overlay
   ========================================================= */

/* Prevent sideways shift (reserve scrollbar gutter) */
html { overflow-y: scroll !important; }

/* When overlay exists, force the dialog to be fixed and centered */
.tribe-dialog__overlay.tribe-modal__overlay ~ .tribe-dialog,
.tribe-dialog__overlay.tribe-modal__overlay ~ * .tribe-dialog,
.tribe-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;

  /* Slightly higher than true center looks better */
  transform: translate(-50%, -75%) !important;

  width: min(860px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 180px) !important;

  margin: 0 !important;
  overflow: hidden !important;
  z-index: 1000000 !important;
  box-sizing: border-box !important;
}

/* Make the inside scroll, not the page */
.tribe-dialog__content {
  max-height: calc(100vh - 80px) !important;
  overflow: hidden !important;
}

.tribe-dialog__body {
  max-height: calc(100vh - 420px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Stop wide internals from forcing width */
.tribe-dialog *,
.tribe-dialog table,
.tribe-dialog form {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Cross-browser: stop page shift when Tribe modal opens
   without breaking theme centering
   ========================================================= */

/* Keep scrollbar gutter consistent */
html { overflow-y: scroll; }

/* Tribe (or the theme) often injects inline padding-right to compensate for scrollbar.
   Remove ONLY when it appears, so normal layout stays centered. */
body[style*="padding-right"] { padding-right: 0 !important; }
html[style*="padding-right"] { padding-right: 0 !important; }

/* Some implementations also inject margin-right */
body[style*="margin-right"] { margin-right: 0 !important; }
html[style*="margin-right"] { margin-right: 0 !important; }