/* MSAC WooCommerce Product Try-On — static stylesheet
   Dynamic values (colors/z-index/transform) are injected as CSS variables via wp_add_inline_style in PHP. */

:root{
  --msac-primary:#111111;
  --msac-primary-text:#ffffff;
  --msac-popup-bg:#ffffff;
  --msac-popup-text:#111111;
  --msac-border-color:#000000;
  --msac-border-style:solid;
  --msac-border-width:1px;
  --msac-radius:999px;
  --msac-modal-z:500;
  --msac-transform:inherit;

  /* Typography variables (optionally set from PHP / overlay to match ATC) */
  --msac-font-family: inherit;
  --msac-font-size: inherit;
}

/* Root container */
#msacVtoRoot { font-family: inherit !important; }
#msacVtoRoot[data-pos^="overlay_"],
#msacVtoRoot[data-pos="overlay_gallery"]{
  position: fixed;
  top:-9999px; left:-9999px;
  visibility:hidden;
}
#msacVtoRoot.msac-open{ visibility:visible !important; }

/* Trigger badge */
#msacVtoRoot .msac-vto-badge{
  position:static;
  display:inline-flex; align-items:center; gap:8px;
  background: var(--msac-primary) !important;
  color: var(--msac-primary-text) !important;
  padding:.55rem .9rem;
  border-radius: var(--msac-radius) !important;
  border: var(--msac-border-width) var(--msac-border-style) var(--msac-border-color) !important;
  cursor:pointer;
  z-index:1;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .18s ease, opacity .18s ease;
  opacity:.96; line-height:1.1;
  font-family: var(--msac-font-family, inherit) !important;
  font-size: var(--msac-font-size, inherit) !important;
  text-transform: var(--msac-transform) !important;
}
#msacVtoRoot .msac-vto-badge:hover{ transform:translateY(-1px); opacity:1 }
#msacVtoRoot .msac-vto-badge img{ width:18px; height:18px; display:block; }

/* Placement helpers */
#msacVtoRoot[data-pos="above_gallery_left"],
#msacVtoRoot[data-pos="above_gallery_right"]{
  display:flex; margin-bottom:8px; visibility:visible;
}
#msacVtoRoot[data-pos="above_gallery_left"]{ justify-content:flex-start; }
#msacVtoRoot[data-pos="above_gallery_right"]{ justify-content:flex-end; }
#msacVtoRoot[data-pos="below_gallery"]{ display:block; margin-top:8px; visibility:visible; }

/* Modal (root) */
#msacVtoRoot #msacVtoModal{
  position:fixed!important; inset:0!important; display:none;
  z-index:var(--msac-modal-z);
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
}
/* Modal (portal container) */
#msacVtoPortal{ position:fixed; inset:0; z-index:var(--msac-modal-z); pointer-events:auto; display:none; }
#msacVtoPortal #msacVtoModal{
  position:fixed!important; inset:0!important; display:none;
  z-index:var(--msac-modal-z);
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
}

/* Dialog box */
#msacVtoRoot #msacVtoModal .box,
#msacVtoPortal #msacVtoModal .box{
  position:absolute; inset:0; margin:24px auto;                 /* add top/bottom margin from edges */
  width:min(96vw,960px); max-height:calc(100vh - 48px);          /* account for margins */
  background: var(--msac-popup-bg) !important;
  color: var(--msac-popup-text) !important;
  border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

/* Header / Footer */
#msacVtoRoot #msacVtoModal header,
#msacVtoRoot #msacVtoModal footer,
#msacVtoPortal #msacVtoModal header,
#msacVtoPortal #msacVtoModal footer{
  background: var(--msac-popup-bg) !important;
  color: var(--msac-popup-text) !important;
  display:flex !important; align-items:center !important;
  padding:14px 16px !important;
}
#msacVtoRoot #msacVtoModal header,
#msacVtoPortal #msacVtoModal header{
  justify-content:space-between !important;
  border-bottom:1px solid #eee;
  gap:12px;
}
#msacVtoRoot #msacVtoModal header .btn,
#msacVtoPortal #msacVtoModal header .btn{
  margin-left:auto !important; float:none !important;
}
#msacVtoRoot #msacVtoModal header strong,
#msacVtoPortal #msacVtoModal header strong{
  text-transform: var(--msac-transform) !important;
}

/* Main area */
#msacVtoRoot #msacVtoModal main,
#msacVtoPortal #msacVtoModal main{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px !important; background:#f7f7f7; overflow:auto;
}

/* Stage (image/video area) */
.msacVtoStage{
  width:min(100%,860px);
  height:var(--msac-stage-h,520px);
  background:#fff; border-radius:12px;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
@media (max-width:767px){ .msacVtoStage{ --msac-stage-h:360px; } }
@media (min-width:768px) and (max-width:1024px){ .msacVtoStage{ --msac-stage-h:420px; } }
@media (min-width:1025px){ .msacVtoStage{ --msac-stage-h:520px; } }

/* Busy overlay + spinner */
.msacVtoBusy{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.65); z-index:3;
}
.msacVtoBusy.show{ display:flex; }
.msacVtoSpinner{
  width:42px;height:42px;border-radius:50%;
  border:4px solid #ddd; border-top-color:var(--msac-primary) !important;
  animation:msac_vto_spin 1s linear infinite;
}
@keyframes msac_vto_spin{ to{ transform:rotate(360deg); } }

/* Media elements */
#msacVtoRoot #msacVtoVideo,
#msacVtoRoot #msacVtoCanvas,
#msacVtoRoot #msacVtoResult,
#msacVtoPortal #msacVtoVideo,
#msacVtoPortal #msacVtoCanvas,
#msacVtoPortal #msacVtoResult{
  width:auto!important; height:auto!important;
  max-width:100%!important; max-height:100%!important;
  object-fit:contain!important; display:block; transform:none!important;
  z-index:1; margin:0 auto;
}

/* Footer buttons */
#msacVtoRoot #msacVtoModal footer,
#msacVtoPortal #msacVtoModal footer{
  flex:0 0 auto; justify-content:flex-end !important;
  gap:10px; border-top:1px solid #eee; flex-wrap:wrap;
}
#msacVtoRoot #msacVtoModal .btn,
#msacVtoPortal #msacVtoModal .btn,
#msacVtoRoot #msacVtoModal label.btn,
#msacVtoPortal #msacVtoModal label.btn{
  display:inline-flex !important; align-items:center; justify-content:center;
  background:transparent;
  color: var(--msac-popup-text) !important;
  border:1px solid rgba(0,0,0,.1) !important;
  padding:.5rem .9rem; border-radius:10px !important;
  cursor:pointer; line-height:1.1; white-space:nowrap; float:none !important;
}
#msacVtoRoot #msacVtoModal .btn.primary,
#msacVtoPortal #msacVtoModal .btn.primary{
  background: var(--msac-primary) !important;
  color: var(--msac-primary-text) !important;
  border-color: var(--msac-primary) !important;
}

/* Lock page scroll when modal open */
html.msacVtoLock, html.msacVtoLock body{ overflow:hidden!important; }