// Quick View Modal - Final 100% Perfect Centered Version: Content aligned top + horizontal centering fully fixed
// Core: Absolute positioning + flex fallback to ensure perfect center on screen

// 1. Overlay layer (no changes)
.shpgl-quickview-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 99998;
  overflow: hidden;

  &.shpgl-active {
    opacity: 1;
    visibility: visible;
    display: block !important;
  }
}

// 2. Modal container (enhanced centering, eliminates calculation errors)
.shpgl-quickview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: visible; // Remove conflicting overflow:auto
  pointer-events: none;
  width: 100vw !important;
  height: 100vh !important;

  &.shpgl-active {
    pointer-events: auto;
  }
}

// 3. Modal content (absolute perfect center: flex + absolute positioning fallback)
.shpgl-quickview-content {
  background: if(variable-exists(color-bg), $color-bg, #fff);
  border-radius: if(variable-exists(border-radius), $border-radius, 8px);
  max-width: 90%;
  width: auto;
  min-width: 300px; // Mobile fallback width
  max-width: calc(100vw - 40px); // Prevent padding overflow
  padding: if(variable-exists(spacing-lg), $spacing-lg, 24px);
  box-shadow: if(variable-exists(shadow-md), $shadow-md, 0 4px 12px rgba(0,0,0,0.1));
  transform: scale(0.9) translate(-50%, -50%); // Initial scale + translate
  opacity: 0.01;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
  max-height: 90vh;
  pointer-events: auto;
  // ✅ Force absolute perfect center
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  margin: 0; // Disable margin:auto to avoid conflicts

  &.shpgl-active {
    transform: scale(1) translate(-50%, -50%); // Perfect center when active
    opacity: 1;
  }

  @media (max-width: if(variable-exists(breakpoint-mobile), $breakpoint-mobile, 767px)) {
    padding: if(variable-exists(spacing-sm), $spacing-sm, 16px);
    max-height: 85vh;
    width: auto;
    min-width: 280px;
  }
}

// 4. Close button (no changes)
.shpgl-quickview-close {
  cursor: pointer;
  position: absolute;
  top: if(variable-exists(spacing-lg), $spacing-lg, 24px);
  right: if(variable-exists(spacing-lg), $spacing-lg, 24px);
  background: if(variable-exists(color-bg), $color-bg, #fff);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: if(variable-exists(shadow-sm), $shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
  transition: background-color 0.2s ease;
  z-index: 10000;
  color: if(variable-exists(color-text), $color-text, #333);
  font-size: 20px;
  padding: 0;
  margin: 0;

  &:hover {
    background-color: if(variable-exists(color-bg-light), $color-bg-light, #f5f5f5);
  }

  i {
    font-size: inherit;
    color: inherit;
  }

  @media (max-width: if(variable-exists(breakpoint-mobile), $breakpoint-mobile, 767px)) {
    top: if(variable-exists(spacing-md), $spacing-md, 16px);
    right: if(variable-exists(spacing-md), $spacing-md, 16px);
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  @media (max-width: 374px) {
    top: if(variable-exists(spacing-sm), $spacing-sm, 12px);
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

// 5. Title style (no changes)
.shpgl-quickview-title {
  margin: 0 0 (if(variable-exists(spacing-md), $spacing-md, 16px));
  font-size: 1.5rem;
  text-align: center;
  color: if(variable-exists(color-text), $color-text, #333);
}

// 6. Image container + image (no changes)
.shpgl-quickview-image-container {
  width: 100%;
  height: 60vh;
  min-height: 200px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: if(variable-exists(spacing-lg), $spacing-lg, 24px);
  box-sizing: border-box;
  position: relative;
  top: auto;
  left: auto;

  @media (max-width: if(variable-exists(breakpoint-mobile), $breakpoint-mobile, 767px)) {
    height: 50vh;
    padding: if(variable-exists(spacing-md), $spacing-md, 16px);
  }
}

.shpgl-quickview-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: if(variable-exists(border-radius-sm), $border-radius-sm, 4px);
  transition: transform 0.3s ease;
  display: block;
  margin: 0 auto;

  &:hover {
    transform: scale(1.02);
  }
}

// 7. Responsive adjustments (added width:auto fallback)
@media (min-width: 768px) and (max-width: 1023px) {
  .shpgl-quickview-content {
    max-width: 85%;
    width: auto;
    padding: (if(variable-exists(spacing-md), $spacing-md, 16px)) (if(variable-exists(spacing-lg), $spacing-lg, 24px));
  }
  .shpgl-quickview-image-container {
    max-height: 55vh;
  }
  .shpgl-quickview-title {
    font-size: 1.4rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .shpgl-quickview-content {
    max-width: 80%;
    width: auto;
    max-height: 85vh;
  }
}

@media (min-width: 1280px) {
  .shpgl-quickview-content {
    max-width: 1200px;
    width: auto;
  }
  .shpgl-quickview-image-container {
    max-height: 65vh;
  }
  .shpgl-quickview-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .shpgl-quickview-content {
    max-height: 90vh;
    width: auto;
  }
  .shpgl-quickview-image-container {
    max-height: 60vh;
  }
}

@media (max-width: 374px) {
  .shpgl-quickview-content {
    padding: if(variable-exists(spacing-xs), $spacing-xs, 8px);
    width: auto;
  }
  .shpgl-quickview-image-container {
    min-height: 180px;
    padding: if(variable-exists(spacing-xs), $spacing-xs, 8px);
  }
}