/**
 * Dresium Try-On — CSS zoom
 *
 * File estratto dal monolitico tryon.css nel M34 (2026-09-03).
 * Contiene solo le regole applicative del componente zoom.
 * Caricato dal blocks/tryon.liquid via stylesheet_tag.
 *
 * NON aggiungere qui regole di altre modali — se serve, crea un file dedicato.
 */

.dresium-result-modal [hidden],
.dresium-zoom-modal [hidden] {
  display: none !important;
}

.dresium-zoom-modal {
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  overflow: hidden;
  color: var(--dresium-tryon-white, #ffffff);
}

.dresium-zoom-modal::backdrop {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dresium-zoom-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dresium-result-fade-in 0.25s ease-out;
}

.dresium-zoom-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: var(--dresium-tryon-white, #ffffff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dresium-zoom-modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.dresium-zoom-modal__container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  touch-action: pinch-zoom;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

.dresium-zoom-modal__image {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  background: transparent;
}

.dresium-zoom-modal__image.is-zoomed {
  transform: scale(2);
  cursor: zoom-out;
}


/* ============================================================
   M47 (2026-09-04): Video slot nella zoom modal.
   Mostrato quando l'utente clicca la badge play su una tile
   gallery con has_video=true (openGenerationVideoLightweight).
   Dimensioni: full container, contain per rispettare aspect ratio.
   ============================================================ */
.dresium-zoom-modal__video {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #000;
}

.dresium-zoom-modal__video[hidden] {
  display: none !important;
}