/* =========================================================
 * PREMIUM LIVE PREVIEW V3 (Square-Optimized & Perfectly Locked)
 * ========================================================= */

/* ---------- 1. SLIDER ---------- */
#pv-slider-wrapper {
  position: relative;
  width: 90%;
  height: 58px;
  margin: 20px auto !important;
  border-radius: 100px;
  overflow: hidden;
  user-select: none;
  cursor: grab;
  clear: both;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: 0.35s ease;
}

#pv-slider-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

#pv-slider-wrapper:active {
  cursor: grabbing;
}

.pv-slider-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  line-height: 58px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.pv-slider-handle {
  position: absolute;
  left: 0;
  top: 4px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(145deg, #ffffff, #ece7dd);
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  transition: 0.3s ease;
}

#pv-slider-wrapper:hover .pv-slider-handle {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 25px rgba(255, 255, 255, 0.12);
}

#pv-slider-wrapper:active .pv-slider-handle {
  transform: scale(0.96);
}

/* ---------- 2. ONBOARDING SHAKE ---------- */
.pv-shake {
  animation: pv-tutorial-shake 0.4s ease-in-out infinite alternate;
}

@keyframes pv-tutorial-shake {
  0% { transform: translateX(0); }
  100% { transform: translateX(8px); }
}

/* ---------- 3. MODAL SKELETON ---------- */
.pv-modal {
  z-index: 10000;
  position: fixed;
  inset: 0;
  display: none;
}

.pv-modal .pv-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pv-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 550px; /* Tightened to match a beautifully sized desktop square */
  max-width: 92vw;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);
  animation: pvModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pvModalIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ---------- 4. HEADER & UNIFORM TABS ---------- */
.pv-header-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#pv-dynamic-tabs {
  display: flex;
  gap: 8px;
  flex: 1;
}

.pv-tab {
  flex: 1; /* Forces tabs to share space equally */
  text-align: center;
  padding: 10px 0; /* Vertically matching, fluid horizontal width */
  border-radius: 12px; /* Uniform squircle corners */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.04);
  color: #666;
  white-space: nowrap;
  transition: 0.2s ease;
}

.pv-tab:hover {
  background: #ffffff;
  color: #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.pv-tab.active {
  background: linear-gradient(135deg, #111, #2f2f2f);
  color: white;
  border-color: #111;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Rounded, structural close button that stays strictly inside the alignment grid */
.pv-close {
  background: rgba(0, 0, 0, 0.04);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #555;
  margin-left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.pv-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #111;
}

/* ---------- 5. BODY WORKSPACE ---------- */
.pv-body {
  padding: 20px; /* Clean, balanced framing border */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fafafa, #f2f2f2);
}

/* ---------- 6. PERFECT SQUARE CANVAS CONTAINER ---------- */
.pv-canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* LOCKS container to an absolute flawless square */
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

  /* Inner Flex Center Engines */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Locks Fabric's container structure to fill our exact square viewport */
.pv-canvas-container .canvas-container {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#pv-canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* Keeps customer uploads unwarped and centered */
  display: block;
  border: none;
}

/* Acrylic Moving Shine Across the Square Viewport */
.pv-canvas-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-25deg);
  animation: pvShine 6s infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes pvShine {
  100% { left: 200%; }
}

/* ---------- 7. FOOTER & ALIGNED ACTION ---------- */
.pv-footer {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pv-note {
  font-size: 12px;
  color: #888;
}

/* Aligned, completely flush action button */
.pv-use {
  background: linear-gradient(135deg, #111, #333);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px; /* Matches tab corners for aesthetic harmony */
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.pv-use:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.pv-use:active {
  transform: scale(0.98);
}

/* =========================================================
 * 8. ANTI-BLEED FIX & NEW FOOTER BUTTONS
 * ========================================================= */

/* This mathematically prevents ANY element from bleeding outside the modal */
.pv-dialog * {
  box-sizing: border-box !important;
}

.pv-footer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Premium styling for secondary buttons (Reset & 3D) */
.pv-reset, .pv-3d-btn {
  background: rgba(0, 0, 0, 0.04);
  color: #555;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 16px;
  border-radius: 12px; /* Matches uniform squircle aesthetic */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
}

.pv-reset:hover, .pv-3d-btn:hover {
  background: #ffffff;
  color: #111;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

.pv-reset:active, .pv-3d-btn:active {
  transform: scale(0.96);
}

/* =========================================================
 * 9. RESTORED TEXT & FONT CONTROLS
 * ========================================================= */
#pv-font-controls {
  display: flex !important;
  flex-direction: column;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  margin-top: 15px;
}

#pv-modal .pv-font-select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  pointer-events: auto !important;

  /* Premium Glass/Light luxury styling for the dropdown */
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition: all 0.2s ease !important;
}

#pv-modal .pv-font-select:focus {
  outline: none !important;
  border-color: #111 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* =========================================================
 * 10. EMPTY HEADER GRACEFUL FALLBACK
 * ========================================================= */

/* Detects if the tab container has no tabs inside it */
#pv-dynamic-tabs:not(:has(.pv-tab))::before {
  content: "Live Preview"; /* Change this to whatever fits your brand! */
  display: block;
  color: #888;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 4px;

  /* Adds a subtle fade-in so it doesn't instantly snap */
  animation: pvFadeInText 0.3s ease forwards;
}

@keyframes pvFadeInText {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}