/*!
 * Meowgic photo grid customizer - theme integration styles.
 *
 * Keeps the module's mobile CTA and the shop's own floating controls apart.
 * Nothing here depends on global scroll locks: only `html.meowgic-pgc-modal-open`,
 * which the module's UI script sets while THIS app's window is open.
 */

/* ---------------------------------------------------------------------------
 * Mobile floating CTA
 * The block can be a direct child of the product info column, or wrapped by the
 * theme's block container. Both shapes must drop the theme's 15px vertical margin
 * (`.product-detail__info.product-detail__col > * { margin: 15px 0; }`).
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .product-detail__info.product-detail__col > meowgic-photo-grid-customizer-block,
  .product-detail__info.product-detail__col > :has(> meowgic-photo-grid-customizer-block) {
    margin-block: 0;
  }

  meowgic-photo-grid-customizer-block {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: #ffffff;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
  }

  /* Reserve the bar height so it never covers the last product content. */
  theme-product-detail:has(meowgic-photo-grid-customizer-block) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* This app's window owns the screen while it is open. */
  html.meowgic-pgc-modal-open meowgic-photo-grid-customizer-block {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Window stacking
 * The shop header (`theme-sticky-header`) sits at z-index 1009 and the app ships
 * its own layers at 50, so the window used to fall behind the page header.
 * Layers are identified by their own `[data-meowgic-pgc-layer]` marker:
 *   overlay 1200, its content 1210 -> next window 1220 / 1230 -> ...
 * Every content layer stays above its own overlay and every child overlay stays
 * above the parent content. `meowgic-photo-grid-customizer-ui.js` writes the same
 * numbers inline for stacked windows; these rules are the no-JS baseline.
 * ------------------------------------------------------------------------- */
body [data-meowgic-pgc-layer="overlay"] {
  z-index: 1200;
}

body [data-meowgic-pgc-layer="dialog"] {
  z-index: 1210;
}

/* ---------------------------------------------------------------------------
 * Shop floating controls (customer service chat, back to top)
 * While this app's window is open (song picking, preview, cropping), they step
 * aside so they never sit on the bottom add-to-cart button or the "Use this crop"
 * action; they come back when the last window closes. The live chat widget is a
 * Shadow DOM child of #hello-jekka-chat-box (host z-index 9999), so the host is
 * hidden as a whole.
 * ------------------------------------------------------------------------- */
html.meowgic-pgc-modal-open #hello-jekka-chat-box,
html.meowgic-pgc-modal-open #totop,
html.meowgic-pgc-modal-open iframe[src*="botchat"],
html.meowgic-pgc-modal-open [id*="botchat"],
html.meowgic-pgc-modal-open [class*="botchat"] {
  visibility: hidden;
  pointer-events: none;
}

/* Desktop: keep the module in the normal product info flow. */
@media (min-width: 768px) {
  meowgic-photo-grid-customizer-block {
    display: block;
    width: 100%;
  }
}