/* AR Product Preview - Full-screen overlay styles */

/* CSS Variables for maintainability */
:root {
  --ar-overlay-z-index: 999999;
  --ar-overlay-bg: rgba(0, 0, 0, 0.9);
  --ar-inner-bg: #000;
  --ar-text-color: #fff;
  --ar-text-muted: rgba(255, 255, 255, 0.7);
  --ar-border-color: rgba(255, 255, 255, 0.2);
  --ar-border-color-strong: rgba(255, 255, 255, 0.3);
  --ar-toolbar-bg: rgba(0, 0, 0, 0.8);
  --ar-select-bg: rgba(255, 255, 255, 0.1);
  --ar-select-input-bg: rgba(0, 0, 0, 0.6);
  --ar-close-bg: rgba(0, 0, 0, 0.6);
  --ar-close-bg-hover: rgba(0, 0, 0, 0.8);
  --ar-distance-bg: rgba(0, 0, 0, 0.4);
  --ar-distance-btn-bg: rgba(255, 255, 255, 0.2);
  --ar-distance-btn-bg-hover: rgba(255, 255, 255, 0.3);
  --ar-distance-btn-bg-active: rgba(255, 255, 255, 0.4);
  --ar-shadow: rgba(0, 0, 0, 0.5);
  --ar-shadow-strong: rgba(0, 0, 0, 0.7);
  --ar-transition: 0.2s;
  --ar-border-radius: 8px;
  --ar-border-radius-small: 4px;
  --ar-border-radius-round: 50%;
}

/* CRITICAL: Hide overlay by default - !important needed for specificity */
.ar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--ar-overlay-bg);
  z-index: var(--ar-overlay-z-index);
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Show overlay only when opened */
.ar-overlay[aria-hidden="false"] {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Overlay inner container */
.ar-overlay-inner {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ar-inner-bg);
  color: var(--ar-text-color);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(var(--ar-vh, 1vh) * 100);
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 60px);
  box-sizing: border-box;
}

/* Close button */
/* Row 1: Hide/Show button (left) and Close button (right) */
.ar-controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: var(--ar-toolbar-bg);
  border-bottom: 1px solid var(--ar-border-color);
  flex: 0 0 auto;
  z-index: 10;
}

.ar-controls-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.ar-controls-close {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Hide/Show toggle button */
.ar-controls-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ar-text-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  transition: background var(--ar-transition), color var(--ar-transition);
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--ar-border-color);
  cursor: pointer;
  min-height: 36px;
}

.ar-controls-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--ar-border-color-strong);
}

.ar-close {
  position: static;
  font-size: 32px;
  background: var(--ar-close-bg);
  color: var(--ar-text-color);
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--ar-border-radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ar-transition);
}

.ar-close:hover {
  background: var(--ar-close-bg-hover);
}

/* Toolbar - Row 2: Print Type, Size, Distance */
.ar-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px;
  padding-bottom: 32px; /* Extra space for swipe hint */
  background: var(--ar-toolbar-bg);
  border-bottom: 1px solid var(--ar-border-color);
  z-index: 5;
  flex-shrink: 0;
  margin: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  overflow: visible;
  position: relative;
}
 
#ar-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

/* Swipe hint - positioned at the bottom of toolbar */
.ar-swipe-hint {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  animation: pulse-hint 2s ease-in-out infinite;
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Show swipe hint only when there's content to scroll to the right */
.ar-toolbar.show-swipe-hint .ar-swipe-hint {
  display: block;
  opacity: 0.9;
}

.ar-toolbar.ar-toolbar-hidden {
  max-height: 0;
  padding: 0 14px;
  opacity: 0;
  border-bottom: none;
}

@media (min-width: 1024px) {
  .ar-toolbar {
    justify-content: center;
  }
}

/* Category/Size selectors */
.ar-catsizes {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  padding-bottom: 28px; /* Space for swipe hint */
  margin-bottom: -28px; /* Compensate for padding */
  width: 100%;
  flex: 1;
  min-width: 0;
}

.ar-catsizes::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.ar-select {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ar-select-bg);
  padding: 8px 12px;
  border-radius: var(--ar-border-radius);
  border: 1px solid var(--ar-border-color);
  color: var(--ar-text-color);
  flex-shrink: 0;
  white-space: nowrap;
}

.ar-select span {
  color: var(--ar-text-color);
  font-weight: 600;
  white-space: nowrap;
  font-size: 14px;
}

.ar-select select {
  background: var(--ar-select-input-bg);
  color: var(--ar-text-color);
  border: 1px solid var(--ar-border-color-strong);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  min-width: 120px;
  max-width: 200px;
}

.ar-select div {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.ar-select div select {
  flex: 1;
}

.ar-unit-toggle {
  background: var(--ar-select-input-bg);
  border: 1px solid var(--ar-border-color-strong);
  color: var(--ar-text-color);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all var(--ar-transition);
  flex-shrink: 0;
}

.ar-unit-toggle:hover {
  background: var(--ar-distance-btn-bg-hover);
  border-color: var(--ar-border-color-strong);
  transform: rotate(90deg);
}

.ar-unit-toggle:active {
  background: var(--ar-distance-btn-bg-active);
}

.ar-unit-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.ar-size-select option[disabled] {
  color: #666;
}

/* Distance controls */
.ar-distance {
  min-width: 140px;
}

.ar-distance-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ar-distance-bg);
  border-radius: 6px;
  padding: 4px 8px;
}

.ar-distance-btn {
  background: var(--ar-distance-btn-bg);
  color: var(--ar-text-color);
  border: 1px solid var(--ar-border-color-strong);
  border-radius: var(--ar-border-radius-small);
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ar-transition);
}

.ar-distance-btn:hover {
  background: var(--ar-distance-btn-bg-hover);
}

.ar-distance-btn:active {
  background: var(--ar-distance-btn-bg-active);
}

.ar-distance-value {
  color: var(--ar-text-color);
  font-weight: 600;
  font-size: 14px;
  min-width: 32px;
  text-align: center;
}

.ar-distance-unit {
  color: var(--ar-text-muted);
  font-size: 12px;
}

/* Camera stage - viewport coordinate system for overlay */
.ar-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.ar-camera-wrap {
  position: absolute;
  inset: 0;
  background: var(--ar-inner-bg);
  overflow: hidden;
}

/* Camera video - !important needed to override browser defaults */
.ar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Hide native video controls - !important needed for browser overrides */
.ar-video::-webkit-media-controls,
.ar-video::-webkit-media-controls-enclosure,
.ar-video::-webkit-media-controls-panel,
.ar-video::-webkit-media-controls-play-button,
.ar-video::-webkit-media-controls-start-playback-button,
.ar-video::-webkit-media-controls-timeline,
.ar-video::-webkit-media-controls-current-time-display,
.ar-video::-webkit-media-controls-time-remaining-display,
.ar-video::-webkit-media-controls-mute-button,
.ar-video::-webkit-media-controls-toggle-closed-captions-button,
.ar-video::-webkit-media-controls-volume-slider,
.ar-video::-webkit-media-controls-fullscreen-button,
.ar-video::-webkit-media-controls-overlay-play-button,
.ar-video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Additional mobile browser overrides */
.ar-video {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hide controls on iOS Safari */
@supports (-webkit-touch-callout: none) {
  .ar-video {
    -webkit-tap-highlight-color: transparent;
  }
  
  .ar-video::-webkit-media-controls {
    display: none !important;
  }
  
  .ar-video::-webkit-media-controls-enclosure {
    display: none !important;
  }
}

/* Product artwork overlay - CRITICAL: Anchored to .ar-stage, NOT .ar-camera-wrap */
.ar-art {
  position: absolute;       /* CRITICAL: Positioned relative to .ar-stage */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Width is set dynamically by JavaScript based on real-world size */
  width: auto;
  height: auto;
  /* Removed max-width/max-height constraints - JS sets these dynamically */
  /* max-width and max-height are set inline by JavaScript with !important */
  cursor: grab;
  z-index: 3;               /* Above video (z-index: 0) */
  border-radius: var(--ar-border-radius-small);
  box-shadow: 0 8px 24px var(--ar-shadow);
  transition: box-shadow var(--ar-transition);
  /* Prevent wrapper cropping from affecting art visibility */
  pointer-events: auto;
  touch-action: none;       /* Prevent default touch gestures during drag */
  /* No object-fit - let image display at natural aspect ratio */
  display: block;
}

.ar-art:active {
  cursor: grabbing;
  box-shadow: 0 12px 32px var(--ar-shadow-strong);
}

/* AR Preview button */
.ar-button-wrap {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.ar-button-wrap .button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
}

/* Preview buttons wrapper - side by side layout */
/* Make both containers display inline so they appear side-by-side */
.wap-buttons-wrap,
.ar-button-wrap {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  vertical-align: top !important;
}

/* Ensure buttons inside both wrappers have consistent styling */
.wap-buttons-wrap .button,
.ar-button-wrap .button {
  margin: 0 !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
}

/* Ensure buttons look good on mobile */
@media (max-width: 480px) {
  .wap-buttons-wrap,
  .ar-button-wrap {
    gap: 6px !important;
    display: flex !important; /* Stack on very small screens if needed */
    flex-wrap: wrap !important;
  }
  
  .wap-buttons-wrap .button,
  .ar-button-wrap .button {
    padding: 10px 18px !important;
    font-size: 14px !important;
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
}

/* Spacing for variable products - Add margin-top to Add to Cart button */
/* Target variable products specifically (prints) - not originals or limited editions */
/* Primary solution: Direct button targeting by ID (Printful plugin compatibility) */
#pfm-add-to-cart,
button#pfm-add-to-cart.single_add_to_cart_button {
  margin-top: 20px !important;
}

/* Fallback: Target button by class for standard WooCommerce */
.woocommerce div.product form.variations_form .single_add_to_cart_button,
.woocommerce div.product .variations_button .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
  margin-top: 20px !important;
}

/* Fallback: Flexbox gap on form container for additional spacing control */
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart,
.woocommerce div.product .variations_button,
.woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart.variations_form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* Responsive spacing adjustments */
@media (min-width: 769px) {
  /* Desktop/Tablet - More generous spacing */
  #pfm-add-to-cart,
  button#pfm-add-to-cart.single_add_to_cart_button {
    margin-top: 20px !important;
  }
  
  .woocommerce div.product form.variations_form .single_add_to_cart_button,
  .woocommerce div.product .variations_button .single_add_to_cart_button,
  .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    margin-top: 20px !important;
  }
  
  .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart,
  .woocommerce div.product .variations_button,
  .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart.variations_form {
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Mobile - Slightly less spacing to save space */
  #pfm-add-to-cart,
  button#pfm-add-to-cart.single_add_to_cart_button {
    margin-top: 16px !important;
  }
  
  .woocommerce div.product form.variations_form .single_add_to_cart_button,
  .woocommerce div.product .variations_button .single_add_to_cart_button,
  .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    margin-top: 16px !important;
  }
  
  .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart,
  .woocommerce div.product .variations_button,
  .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart.variations_form {
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  /* Small mobile - Compact but still comfortable */
  #pfm-add-to-cart,
  button#pfm-add-to-cart.single_add_to_cart_button {
    margin-top: 14px !important;
  }
  
  .woocommerce div.product form.variations_form .single_add_to_cart_button,
  .woocommerce div.product .variations_button .single_add_to_cart_button,
  .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    margin-top: 14px !important;
  }
  
  .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart,
  .woocommerce div.product .variations_button,
  .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart.variations_form {
    gap: 14px !important;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ar-controls-header {
    padding: 10px 12px;
  }

  .ar-controls-toggle {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
  }

  .ar-toolbar {
    padding: 10px;
    gap: 8px;
  }

  .ar-select {
    padding: 6px 10px;
  }

  .ar-select span {
    font-size: 13px;
  }

  .ar-close {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }

  /* Width is set dynamically by JavaScript, no default percentage needed */
}

@media (max-width: 480px) {
  .ar-controls-header {
    padding: 10px 12px;
  }

  .ar-controls-toggle {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
  }

  .ar-close {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }

  .ar-toolbar {
    padding: 10px;
    gap: 8px;
  }

  .ar-catsizes {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Clamp indicator — shown when art is scaled down to fit the screen */
.ar-clamp-indicator {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: ar-clamp-fade-in 0.3s ease-out;
}

@keyframes ar-clamp-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}