/* ==========================================================================
   XENTRA SHARED COMPONENTS
   Overlay, sheet, backdrop, buttons, stepper — reusable across all pages
   Pixel-perfect match with production app.mybangjo.com
   ========================================================================== */


/* ── Backdrop ── */
.x-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--x-z-backdrop);
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--x-duration-normal) ease;
  touch-action: none;
}

.x-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ── Bottom Sheet ── */
.x-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--x-page-max, 480px);
  margin: 0 auto;
  z-index: var(--x-z-sheet);
  background: var(--x-white);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
  transform: translateY(105%);
  transition: transform var(--x-duration-sheet) var(--x-ease-sheet);
  max-height: 84vh;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding-top: 12px;
}

.x-sheet.open {
  transform: translateY(0);
}

.x-sheet-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #d5d5d5;
  flex-shrink: 0;
  display: block;
}

.x-sheet-content {
  padding: 0 18px max(24px, calc(16px + var(--x-safe-bottom, 0px)));
  max-height: calc(84vh - 45px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.x-sheet-content h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--x-charcoal, #222) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.2px;
}


/* ── Dynamic Overlay (full-screen backdrop + sheet) ── */
.x-overlay,
.xentra-dynamic-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: var(--x-z-overlay) !important;
  display: flex !important;
  align-items: flex-end;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  isolation: isolate;
}

.x-overlay.open,
.xentra-dynamic-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ── Lime Primary Button ── */
.x-btn-lime {
  border: 0;
  border-radius: var(--x-radius-pill);
  background: var(--x-lime);
  color: var(--x-black);
  font-family: var(--x-font);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.x-btn-lime:active {
  opacity: 0.85;
}

/* ── Dark Button ── */
.x-btn-dark {
  border: 0;
  border-radius: var(--x-radius-sm);
  background: var(--x-black);
  color: var(--x-white);
  font-family: var(--x-font);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.x-btn-dark:active {
  opacity: 0.85;
}


/* ── Delete Confirmation Sheet ── */
.x-delete-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 3000;
}

.x-delete-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--x-white);
  border-radius: var(--x-radius-lg) var(--x-radius-lg) 0 0;
  padding: 22px 16px 20px;
  z-index: 3001;
  text-align: center;
}

.x-delete-close {
  position: absolute;
  right: 16px;
  top: -42px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--x-white);
  font-size: 22px;
}

.x-delete-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  margin-bottom: 18px;
}

.x-delete-btn {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: var(--x-radius-xl);
  background: var(--x-lime);
  font-weight: 700;
}