/* ==========================================================================
   JJ Bridge CSS (APF-gated)
   - Requires JS to add: html.jj-bridge-active when APF exists on the page
   - Prevents bridge.css from affecting “FPD-only” products (no APF)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FPD wrapper visibility (DEFAULT = normal, not hidden)
   -------------------------------------------------------------------------- */

/* Default: behave like normal FPD (do not hide anything) */
/* #jj-fpd-wrapper{
  width: 100%;
  position: relative;
  z-index: 10;
  float:left;
  overflow:visible;
} */

/* Only when the bridge is active do we hide it until .is-visible is applied */
html.jj-bridge-active #jj-fpd-wrapper{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  height: 0;
  transition: opacity 0.3s ease, height 0.3s ease;
}

html.jj-bridge-active #jj-fpd-wrapper.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  overflow: visible;
  margin-bottom: 2em;
}

/* --------------------------------------------------------------------------
   APF / Bridge styling (gate these so they don’t affect non-APF products)
   -------------------------------------------------------------------------- */

html.jj-bridge-active .wapf-swatch-label{
  font-size: 10px;
}

html.jj-bridge-active #jj-fpd-wrapper .fpd-label{
  font-size: 10px;
}

html.jj-bridge-active .wapf-wrapper .label-above .wapf-field-label label{
  margin-bottom: 0;
}

/* Disable the Curved Text Button (bridge-only) */
html.jj-bridge-active body > fpd-element-toolbar > div.fpd-tools-nav.fpd-scroll-area > div.fpd-secondary-tools.fpd-scroll-area > div.fpd-tool-curved-text{
  display: none;
}

/* APF totals formatting (bridge-only) */
html.jj-bridge-active .wapf-product-totals div div{
  display: none;
}

html.jj-bridge-active .wapf-product-totals div div:last-child{
  font-weight: 700;
  text-align: right;
  width: 100%;
  display: block;
}

html.jj-bridge-active .wapf-product-totals div div:last-child span{
  display: block;
}

/* If you truly only want this button layout when bridge is active, gate it.
   If you want it sitewide, remove the html.jj-bridge-active prefix. */
html.jj-bridge-active .woocommerce div.product .summary form.cart .button{
  vertical-align: middle;
  float: right;
  clear: both;
}

/* Hide built-in FPD views nav (bridge-only) */
html.jj-bridge-active #jj-fpd-wrapper fpd-views-nav{
  display: none;
}

/* Hide the pricing hint (bridge-only) */
html.jj-bridge-active .hide-hint .wapf-pricing-hint,
html.jj-bridge-active .wapf-swatch-label .wapf-pricing-hint{
  display: none;
}

/* --------------------------------------------------------------------------
   Layout tweaks on desktop (gate wrapper float/width so it won’t affect FPD-only)
   -------------------------------------------------------------------------- */

@media (min-width: 768px){
  html.jj-bridge-active #jj-fpd-wrapper{
    float: left;
    width: 48%;
    padding-right: 20px;
    z-index: 10;
    position: relative;
  }
  #jj-fpd-wrapper{
    float: left;
    width: 48%;
    padding-right: 20px;
    z-index: 10;
    position: relative;
  }
}

/* Hide the gallery ONLY when the bridge is active AND FPD is being shown */
html.jj-bridge-active.fpd-visible .woocommerce-product-gallery{
  display: none !important;
}

/* This one impacts ALL products. Gate it if it’s only intended for bridge pages. */
@media (min-width: 768px){
  html.jj-bridge-active .woocommerce div.product div.images,
  html.jj-bridge-active .woocommerce-page div.product div.images{
    padding-right: 20px;
  }
}

/* --------------------------------------------------------------------------
   Per-product overrides (leave as-is; already scoped by postid)
   -------------------------------------------------------------------------- */

body.postid-5369 div.product form.cart div.quantity,
.woocommerce-page body.postid-5369 div.product form.cart div.quantity{
  /* display: none !important; */
}

/* --------------------------------------------------------------------------
   “Order By Size” / APF field tweaks (gate so non-APF products aren’t touched)
   -------------------------------------------------------------------------- */

html.jj-bridge-active .wapf-field-label .wapf-pricing-hint{
  display: none;
}

html.jj-bridge-active .order-by-size img{
  display: none;
}

html.jj-bridge-active .wapf-field-input textarea{
  height: 150px;
}

/* Optional image sizing (keep commented unless needed)
html.jj-bridge-active .woocommerce .wapf-swatch--image img{
  height: 75px;
  width: 75px;
}
*/

/* ==========================================================================
   Fullscreen Modal (Bridge-only)
   ========================================================================== */

html.jj-bridge-active .jj-fpd-modal-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.72);
}

html.jj-bridge-active.jj-fpd-modal-open .jj-fpd-modal-overlay{
  display: block;
}

html.jj-bridge-active .jj-fpd-modal{
  position: absolute;
  inset: 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html.jj-bridge-active .jj-fpd-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e6e6e6;
}

html.jj-bridge-active .jj-fpd-modal-title{
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

html.jj-bridge-active .jj-fpd-modal-actions{
  display: flex;
  gap: 8px;
  align-items: center;
}

html.jj-bridge-active .jj-fpd-btn{
  display:inline-flex;
  appearance: none;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

html.jj-bridge-active .jj-fpd-btn.jj-fpd-btn--ghost{
  background: #fff;
  color: #111;
}

html.jj-bridge-active .jj-fpd-modal-body{
  flex: 1;
  overflow: auto;
  padding: 12px;
}

/* When wrapper is inside the modal, force it to full width */
/* Fullscreen mode (no DOM moving) */
html.jj-bridge-active.jj-fpd-modal-open #jj-fpd-wrapper{
  position: fixed !important;
  inset: 12px !important;
  z-index: 999999 !important;

  float: none !important;
  width: auto !important;
  padding-right: 0 !important;

  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;

  /* Make sure wrapper is visible in fullscreen */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
}

/* Dark backdrop */
html.jj-bridge-active.jj-fpd-modal-open .jj-fpd-backdrop{
  display: block;
}
html.jj-bridge-active .jj-fpd-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 999998;
}

/* Close button inside wrapper */
html.jj-bridge-active #jj-fpd-wrapper .jj-fpd-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000000;

  border: 1px solid #111;
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}

/* Hide close button by default (bridge pages) */
html.jj-bridge-active #jj-fpd-wrapper .jj-fpd-close{
  display: none;
}

/* Only show it while fullscreen is open */
html.jj-bridge-active.jj-fpd-modal-open #jj-fpd-wrapper .jj-fpd-close{
  display: inline-flex;
}

/* Fullscreen button when placed after the custom nav */
html.jj-bridge-active #jj-fpd-custom-nav + #jj-fpd-fullscreen-toggle{
  display: inline-flex;
  margin: 8px 0 12px 0;
}

/* If you want it centered under the pills */
html.jj-bridge-active #jj-fpd-wrapper{
  /* no change required unless you want centering rules */
}

html.jj-bridge-active #jj-fpd-fullscreen-toggle{
  /* optional button styling */
  align-self: center;
  margin-bottom:10px;
}
/* Hide the fullscreen-toggle button while fullscreen is open */
html.jj-bridge-active.jj-fpd-modal-open #jj-fpd-fullscreen-toggle{
  display: none !important;
}
html.jj-bridge-active .hide-qty-img img{display:none;}
html.jj-bridge-active .jj-fpd-map-key{display:none;}