/* Glass Designer product page launcher: inline expandable tab panel, plus a
   fullscreen overlay used only as a fallback when no tab panel exists. */

:root {
  /* High so themes' own fixed/sticky chrome (e.g. a sticky add-to-cart bar)
     never covers the expanded editor or the overlay fallback. The overlay
     is one above the expanded inline value since both could in principle
     be present in the DOM at once. */
  --gdfw-z-expanded: 100000;
  --gdfw-z-overlay: 100001;
  /* Deliberately theme-independent: the overlay sits over arbitrary iframe
     content, so its close control needs guaranteed contrast rather than
     matching whatever a given WooCommerce theme's .button looks like. */
  --gdfw-overlay-scrim: rgba(15, 23, 42, 0.55);
  --gdfw-overlay-control-bg: rgba(15, 23, 42, 0.65);
  --gdfw-overlay-control-bg-hover: rgba(15, 23, 42, 0.85);
}

.gdfw-launcher {
  margin: 0 0 1em;
}

.gdfw-launcher__button {
  display: inline-block;
}

/* "Design your glass" — or — the quieter "Upload your design" (styled in
   frontend/artwork.css). Stacked full-width on phones. */
.gdfw-launcher__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.75em;
}

.gdfw-launcher__or {
  font-size: 0.875em;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .gdfw-launcher__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gdfw-launcher__or {
    text-align: center;
  }
}

.gdfw-launcher__preview {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.75em;
}

.gdfw-launcher__preview img {
  width: 72px;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
}

.gdfw-launcher__attached {
  font-size: 0.875em;
  opacity: 0.8;
}

.gdfw-launcher__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: auto;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  background: transparent;
  /* 0.7 alpha keeps the icon above the ~3:1 non-text contrast minimum
     against arbitrary theme surfaces; the border also gives the control
     shape regardless of the icon fill contrast. */
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.gdfw-launcher__remove:hover {
  background: rgba(200, 35, 51, 0.08);
  border-color: rgba(200, 35, 51, 0.4);
  color: #c82333;
}

/* Inline editor inside the "Design your glass" product tab. Fills the tab
   panel; the launcher script adds --bleed (viewport-wide) only when the
   panel itself already spans the page, so themes with side tab navs or
   sidebars (e.g. Storefront) are never overlapped. */

.gdfw-inline {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.gdfw-inline--bleed {
  /* Symmetric breakout (both sides pulled out equally) rather than a
     single-sided margin-left hack, so it holds regardless of text
     direction on RTL sites. */
  position: relative;
  left: 50%;
  right: 50%;
  width: auto;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* The expand toggle lives in the editor's own header (it posts `toggle-expand`
   over the postMessage contract) rather than in a bar above the frame: that bar
   cost a full row of the product page for one button, and overlaying it on the
   frame collided with the editor's toolbar at narrow widths. */

.gdfw-inline__slot {
  height: 75vh;
  min-height: 520px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gdfw-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Expanded: resizes the container to full browser width and 100vh, but
   stays in the normal document flow (no position:fixed, no scroll lock, no
   overlay) — the page scrolls normally and the editor simply occupies the
   whole visible window once scrolled into view. This avoids a true
   "fullscreen" takeover, since the WooCommerce tab panel is otherwise much
   shorter than the viewport.
   z-index is needed because themes commonly pin their own fixed/sticky
   elements above normal in-flow content (e.g. Storefront's sticky
   "add to cart" bar) — without it those bars visually and interactively
   cover the top of the expanded editor. */
.gdfw-inline--expanded {
  position: relative;
  z-index: var(--gdfw-z-expanded);
  /* Symmetric breakout — see .gdfw-inline--bleed. */
  left: 50%;
  right: 50%;
  width: auto;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

.gdfw-inline--expanded .gdfw-inline__slot {
  height: 100vh;
  min-height: 100vh;
}

.gdfw-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--gdfw-z-overlay);
  background: var(--gdfw-overlay-scrim);
}

.gdfw-overlay__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.gdfw-overlay__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--gdfw-overlay-control-bg);
  color: #fff;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.gdfw-overlay__close:hover {
  background: var(--gdfw-overlay-control-bg-hover);
}

.gdfw-scroll-lock,
.gdfw-scroll-lock body {
  overflow: hidden;
}

.gdfw-cart-edit {
  margin-top: 0.25em;
  font-size: 0.875em;
}

/* Loading/error state for a freshly-created iframe (applied to its
   container — .gdfw-inline__slot or .gdfw-overlay — by launcher.js). */

.gdfw-inline__slot,
.gdfw-overlay {
  position: relative;
}

.gdfw-frame-state--loading .gdfw-frame,
.gdfw-overlay.gdfw-frame-state--loading .gdfw-overlay__frame {
  opacity: 0;
}

.gdfw-frame-state--loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  animation: gdfw-spin 0.8s linear infinite;
}

.gdfw-overlay.gdfw-frame-state--loading::before {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.9);
}

.gdfw-frame-state--error .gdfw-frame,
.gdfw-overlay.gdfw-frame-state--error .gdfw-overlay__frame {
  display: none;
}

.gdfw-frame-state--error::before {
  content: attr(data-gdfw-error-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  text-align: center;
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.9375em;
}

.gdfw-overlay.gdfw-frame-state--error::before {
  color: #fff;
}

@keyframes gdfw-spin {
  to {
    transform: rotate(360deg);
  }
}