/*!
 * PointAI Try-On Bridge — styles  v1.2.0
 * 1. The shop's Try Now buttons.
 * 2. One drawer size and position for all three try-ons (apparel, eyewear, makeup):
 *    375 × 667 px, docked to the right edge, centred vertically (shorter on small windows),
 *    slides in from the right; full screen on phones and small tablets. Each drawer keeps its
 *    own content and header.
 *    Change the size for all three at once:   :root { --pai-drawer-width: 400px; --pai-drawer-height: 700px; }
 *
 * State hooks the bridge sets on the clicked button:
 *   [data-pai-state="loading"]  SDK is loading (first click of that type)
 *   [data-pai-state="active"]   this product is the one being tried on
 *   [data-pai-state="error"]    the try-on could not load (cleared after 4 s)
 */

[data-pai-tryon] {
  cursor: pointer;
}

/* Optional ready-made look: add class="pai-tryon-btn" to a button. Theme with the variables. */
.pai-tryon-btn {
  --pai-btn-bg: #111;
  --pai-btn-fg: #fff;
  --pai-btn-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 40px;
  padding: .55em 1.2em;
  border: 1px solid var(--pai-btn-bg);
  border-radius: var(--pai-btn-radius);
  background: var(--pai-btn-bg);
  color: var(--pai-btn-fg);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  transition: background-color .2s, color .2s, opacity .2s;
}
.pai-tryon-btn:hover,
.pai-tryon-btn:focus-visible {
  background: var(--pai-btn-fg);
  color: var(--pai-btn-bg);
}
.pai-tryon-btn:focus-visible {
  outline: 2px solid var(--pai-btn-bg);
  outline-offset: 2px;
}

/* Loading: small spinner after the label, clicks ignored until the SDK is ready */
[data-pai-tryon][data-pai-state="loading"] {
  pointer-events: none;
  opacity: .75;
}
[data-pai-tryon][data-pai-state="loading"]::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .5em;
  vertical-align: -.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pai-bridge-spin .7s linear infinite;
}
.pai-tryon-btn[data-pai-state="loading"]::after {
  margin-left: 0;
}

/* Active: the product currently in the try-on */
.pai-tryon-btn[data-pai-state="active"] {
  background: var(--pai-btn-fg);
  color: var(--pai-btn-bg);
}

/* Error: could not load */
[data-pai-tryon][data-pai-state="error"] {
  opacity: .5;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-pai-tryon][data-pai-state="loading"]::after { animation-duration: 2s; }
  .pai-tryon-btn { transition: none; }
}

/* ======================================================================================
 * Shared drawer geometry — applies only when the bridge is on the page (html.pai-bridge),
 * so each SDK used on its own keeps its original layout.
 * ====================================================================================== */
:root {
  --pai-drawer-width: 375px;
  --pai-drawer-height: 667px;
  --pai-drawer-z: 2147483000;
  --pai-drawer-shadow: -12px 0 48px rgba(0, 0, 0, .14);
  --pai-drawer-speed: .35s;
}

/* ---- Apparel (VTR, vtr.js v2 built drawer) ---- */
html.pai-bridge .iframe-container.vtr-managed {
  top: 0; right: 0; bottom: 0; left: auto;
  height: 100%;
  align-items: center;
  z-index: var(--pai-drawer-z);
}
html.pai-bridge .iframe-container.vtr-managed .iframe-wrapper {
  width: var(--pai-drawer-width);
  max-width: 100vw;
  height: min(var(--pai-drawer-height), 100vh);
  height: min(var(--pai-drawer-height), 100dvh);
  max-height: none;
  border-radius: 0;
  box-shadow: var(--pai-drawer-shadow);
  transform: translateX(105%);
  transition: transform var(--pai-drawer-speed) ease;
}
html.pai-bridge .iframe-container.vtr-managed.active .iframe-wrapper { transform: none; }

/* ---- Eyewear (goggles pointai-tryon.js v3.1, .paig-*) ---- */
html.pai-bridge .paig-panel {
  top: 0; right: 0; bottom: 0; left: auto;
  margin: auto 0;                       /* top + bottom 0 with a fixed height = centred vertically */
  width: var(--pai-drawer-width);
  max-width: 100vw;
  height: min(var(--pai-drawer-height), 100vh);
  height: min(var(--pai-drawer-height), 100dvh);
  max-height: none;
  border-radius: 0;
  box-shadow: var(--pai-drawer-shadow);
  z-index: var(--pai-drawer-z);
  opacity: 1;
  visibility: hidden;
  transform: translateX(105%);
  transition: transform var(--pai-drawer-speed) ease, visibility 0s linear var(--pai-drawer-speed);
}
html.pai-bridge .paig-panel.paig-open {
  visibility: visible;
  transform: none;
  transition: transform var(--pai-drawer-speed) ease, visibility 0s;
}
/* Same behaviour as the other drawers: no centre / minimise modes, no floating re-open button */
html.pai-bridge .paig-dock,
html.pai-bridge .paig-min,
html.pai-bridge .paig-fab { display: none !important; }

/* ---- Makeup (pointai-makeup.js, drawer mode) ---- */
html.pai-bridge .pai-root.pai-mode-drawer {
  --pai-width: var(--pai-drawer-width);
  --pai-z: var(--pai-drawer-z);
  --pai-shadow: var(--pai-drawer-shadow);
}
html.pai-bridge .pai-root.pai-mode-drawer .pai-panel {
  top: 0; bottom: 0;
  margin: auto 0;
  height: min(var(--pai-drawer-height), 100vh);
  height: min(var(--pai-drawer-height), 100dvh);
  transition: transform var(--pai-drawer-speed) ease, visibility 0s linear var(--pai-drawer-speed);
}
html.pai-bridge .pai-root.pai-mode-drawer.pai-open .pai-panel {
  transition: transform var(--pai-drawer-speed) ease, visibility 0s;
}

/* ---- Phones and small tablets: every drawer is full screen ---- */
@media (max-width: 768px) {
  :root { --pai-drawer-width: 100vw; --pai-drawer-height: 100dvh; }
  html.pai-bridge .iframe-container.vtr-managed { width: 100%; background: transparent; }
  html.pai-bridge .iframe-container.vtr-managed .iframe-wrapper { transform: translateX(105%) !important; }
  html.pai-bridge .iframe-container.vtr-managed.active .iframe-wrapper { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pai-drawer-speed: 0s; }
}