/**
 * TPB QuickView Modal — Specific Overrides (context-aware stacking)
 * Base styling lives in modal-template.css; this file provides targeted overrides only.
 *
 * Goals:
 * - Keep overlay INTERACTIVE by default (clicks do NOT leak to the page)
 * - Lift header/cart above the overlay ONLY while a TPB modal is open
 * - Neutralize stacking-context traps (transform/filter/perspective) on header chain
 * - Lock page scroll while modal is open
 * - Align keys with handlers: flower-station, category-station, quickcheckout-station, menu-board, branded-station
 */

/* ==========================================================================
   Layer variables (optional; falls back to numbers if root vars are absent)
   ========================================================================== */
:root {
  --tpb-overlay-z: 2147483600;  /* baseline for overlay backdrop */
  --tpb-dialog-z:  2147483601;  /* dialog sits above its overlay */
  --tpb-header-z:  2147483646;  /* header/base lift while modal open */
  --tpb-cart-z:    2147483647;  /* cart overlay/toggle while modal open */
}

/* ==========================================================================
   Scroll lock while any TPB modal is open
   ========================================================================== */
html.tpb-modal-open,
body.tpb-modal-open {
  overflow: hidden !important;
}

/* Also raise/click-enable common header/cart wrappers while open */
body.tpb-modal-open .site-header,
body.tpb-modal-open header,
body.tpb-modal-open [data-elementor-type="header"],
body.tpb-modal-open .elementor-location-header,
body.tpb-modal-open .elementor-sticky--active,
body.tpb-modal-open .elementor-menu-cart__toggle_button,
body.tpb-modal-open .elementor-menu-cart__container,
body.tpb-modal-open .elementor-menu-cart--shown {
  position: relative;
  z-index: var(--tpb-header-z);   /* header/base lift; cart specifics below */
  pointer-events: auto;           /* ensure clickable */
  /* neutralize stacking-context traps on the header chain */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  mix-blend-mode: normal !important;
}

/* ==========================================================================
   Overlay behavior (INTERACTIVE by default)
   ========================================================================== */

/* Hidden by default; shown only in canonical open states */
.tpb-qv-overlay { 
  display: none !important; 
  /* ensure we always cover the viewport & sit above page content */
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--tpb-overlay-z) !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.6) !important;
  pointer-events: auto !important; /* overlay captures background clicks */
  /* Remove opacity: 0 and visibility: hidden - let display: none handle it */
  transition: opacity 0.3s ease-out;
}

/* Canonical open classes (JS adds .tpb-qv-visible; .is-open is legacy) */
.tpb-qv-overlay.is-open,
.tpb-qv-overlay.show,
.tpb-qv-overlay.tpb-qv-visible { 
  display: flex !important; 
  opacity: 1 !important;
  visibility: visible !important;
  animation: overlayFadeIn 0.3s ease-out forwards;
}

.tpb-qv-overlay.closing {
  opacity: 0 !important;
}

/* Dialog should always sit above its own overlay and accept clicks */
.tpb-qv-overlay .tpb-qv-modal {
  position: relative !important;
  z-index: var(--tpb-dialog-z) !important;
  pointer-events: auto !important;
}

/* When Elementor cart is shown, yield clicks to its own overlay */
body.elementor-menu-cart--shown .tpb-qv-overlay {
  pointer-events: none !important;
}

/* Cosmetic fade */
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Lift Elementor cart pieces above the TPB overlay (only while modal is open)
   ========================================================================== */

/* CRITICAL: Lift the entire header sections that contain the cart
   These Elementor sections have position:fixed with z-index:9000 creating
   stacking contexts. We must lift THEM, not just the cart inside them. */
body.tpb-modal-open .elementor-element-d17a0b3,
body.tpb-modal-open .elementor-element-94cf9e0,
body.tpb-qv-open .elementor-element-d17a0b3,
body.tpb-qv-open .elementor-element-94cf9e0 {
  z-index: var(--tpb-cart-z) !important; /* Must be above overlay */
}

/* CRITICAL FIX: Lift .elementor-3995 (contains cart) above overlay */
/* Keep existing position (likely fixed) to prevent position jump */
body.tpb-modal-open .elementor-3995,
body.tpb-qv-open .elementor-3995 {
  position: fixed !important; /* Preserve fixed position if Elementor uses it */
  z-index: var(--tpb-cart-z) !important;
  /* Ensure stacking context is lifted */
  transform: none !important;
  filter: none !important;
}

/* Lower page content below overlay (except header/cart sections) */
body.tpb-modal-open .elementor:not(.elementor-location-header):not(.elementor-3995) {
  position: relative !important;
  z-index: 1 !important;
}

/* Generic fallback for other Elementor headers */
body.tpb-qv-open .elementor-menu-cart__toggle_wrapper,
body.tpb-qv-open .elementor-menu-cart__container,
body.tpb-qv-open .elementor-menu-cart__main,
body.tpb-qv-open .elementor-menu-cart__overlay,
.tpb-modal-open .elementor-menu-cart__toggle_wrapper,
.tpb-modal-open .elementor-menu-cart__container,
.tpb-modal-open .elementor-menu-cart__main,
.tpb-modal-open .elementor-menu-cart__overlay {
  position: relative !important;         /* escape transformed ancestors */
  z-index: var(--tpb-cart-z) !important; /* sits above TPB overlay/dialog */
}

/* Enhanced cart button rules with body.tpb-modal-open prefix for maximum specificity */
body.tpb-modal-open .elementor-menu-cart__toggle_wrapper,
body.tpb-modal-open .elementor-menu-cart__toggle_button,
body.tpb-qv-open .elementor-menu-cart__toggle_wrapper,
body.tpb-qv-open .elementor-menu-cart__toggle_button {
  z-index: var(--tpb-cart-z) !important;
  pointer-events: auto !important;
}

/* Ensure cart drawer stays visible when modal is open */
/* Prevent cart drawer from being affected by overlay opacity/visibility states */
body.tpb-modal-open .elementor-menu-cart__container,
body.tpb-modal-open .elementor-menu-cart__main,
body.tpb-modal-open .elementor-menu-cart__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  /* Display will be handled by Elementor, just ensure visibility */
}

/* If a theme still traps the toggle with a transformed ancestor,
   you may pin ONLY the toggle as a last resort. Keep commented until needed. */
/*
body.tpb-qv-open .elementor-menu-cart__toggle_wrapper,
.tpb-modal-open .elementor-menu-cart__toggle_wrapper {
  position: fixed !important;
  top: 20px; right: 20px;
  z-index: var(--tpb-cart-z) !important;
}
*/

/* ==========================================================================
   Variant hooks (no visual changes; useful for future tweaks)
   ========================================================================== */
.tpb-qv-modal[data-modal-type="flower-station"]        { --tpb-variant: flower; }
.tpb-qv-modal[data-modal-type="category-station"]      { --tpb-variant: category; }
.tpb-qv-modal[data-modal-type="branded-station"]       { --tpb-variant: branded; }
.tpb-qv-modal[data-modal-type="menu-board"]            { --tpb-variant: menu; }
.tpb-qv-modal[data-modal-type="quickcheckout-station"] { --tpb-variant: quick; }

/* ==========================================================================
   Safety: do NOT globally force Elementor/lightbox layers at max z.
   We only raise them while a TPB modal is open (above).
   ========================================================================== */

/* ==========================================================================
   Legacy cleanup area (intentionally empty)
   Keep one-off rules here temporarily; migrate or delete after verification.
   ========================================================================== */