/* Tailwind CSS .hidden utility class - Required for modal functionality */
.hidden {
  display: none !important;
}

/* Gallery modal z-index fixes - Override all conflicting elements */
/* When gallery modal is open, ensure it has absolute priority */
#gallery-modal {
  z-index: 99999 !important;
  position: fixed !important;
}

#gallery-modal .close-button,
#gallery-modal-close {
  z-index: 100000 !important;
}

/* Override carousel navigation z-index when modal is open */
body:has(#gallery-modal:not(.hidden)) .banner-carousel .swiper-button-next,
body:has(#gallery-modal:not(.hidden)) .banner-carousel .swiper-button-prev,
body:has(#gallery-modal:not(.hidden)) #banner-carousel-left,
body:has(#gallery-modal:not(.hidden)) #banner-carousel-right {
  z-index: 1 !important;
}

/* Override scroll-to-top button when any modal is open */
body:has(#gallery-modal:not(.hidden)) .scroll-to-top,
body:has(#gallery-modal:not(.hidden)) #scroll-to-top,
body:has(#product-modal:not(.hidden)) .scroll-to-top,
body:has(#product-modal:not(.hidden)) #scroll-to-top,
body:has(#modal-overlay[style*="display: flex"]) .scroll-to-top,
body:has(#modal-overlay[style*="display: flex"]) #scroll-to-top {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(25px) scale(0.8) !important;
}

/* Override footer z-index when modal is open */
body:has(#gallery-modal:not(.hidden)) .footer-glass,
body:has(#gallery-modal:not(.hidden)) .footer-glass *,
body:has(#gallery-modal:not(.hidden)) footer,
body:has(#gallery-modal:not(.hidden)) footer *,
body:has(#gallery-modal:not(.hidden)) footer div,
body:has(#gallery-modal:not(.hidden)) footer div *,
body:has(#gallery-modal:not(.hidden)) footer p,
body:has(#gallery-modal:not(.hidden)) footer a,
body:has(#gallery-modal:not(.hidden)) .social-icon,
/* Fallback for browsers that don't support :has() */
.modal-open .banner-carousel .swiper-button-next,
.modal-open .banner-carousel .swiper-button-prev,
.modal-open #banner-carousel-left,
.modal-open #banner-carousel-right,
.modal-open .scroll-to-top,
.modal-open #scroll-to-top,
.modal-open .footer-glass,
.modal-open .footer-glass *,
.modal-open footer,
.modal-open footer *,
.modal-open footer div,
.modal-open footer div *,
.modal-open footer p,
.modal-open footer a,
.modal-open .social-icon,
.modal-open .social-icon *,
.modal-open .social-icon img {
  z-index: 1 !important;
  position: relative !important;
}

/* Additional fallback for scroll-to-top button visibility */
.modal-open .scroll-to-top,
.modal-open #scroll-to-top {
  visibility: hidden !important;
  opacity: 0 !important;
}

.modal-open .footer-glass *,
.modal-open footer,
.modal-open footer *,
.modal-open .social-icon,
.modal-open .social-icon * {
  z-index: 1 !important;
}

/* Ensure all other high z-index elements are lowered when modal is open */
body:has(#gallery-modal:not(.hidden)) [class*="z-10"],
body:has(#gallery-modal:not(.hidden)) [class*="z-20"],
body:has(#gallery-modal:not(.hidden)) [class*="z-30"],
body:has(#gallery-modal:not(.hidden)) [class*="z-40"],
body:has(#gallery-modal:not(.hidden)) [class*="z-50"],
body:has(#gallery-modal:not(.hidden)) [class*="relative"],
body:has(#gallery-modal:not(.hidden)) [style*="z-index"],
body:has(#gallery-modal:not(.hidden)) a[href*="facebook"],
body:has(#gallery-modal:not(.hidden)) a[href*="mail"],
body:has(#gallery-modal:not(.hidden)) a[href*="terms"],
body:has(#gallery-modal:not(.hidden)) p:contains("2025"),
body:has(#gallery-modal:not(.hidden)) p:contains("Artsélily"),
body:has(#gallery-modal:not(.hidden)) p:contains("Philippines") {
  z-index: 1 !important;
  position: relative !important;
}

/* Fallback for browsers that don't support :has() */
.modal-open [class*="z-10"],
.modal-open [class*="z-20"],
.modal-open [class*="z-30"],
.modal-open [class*="z-40"],
.modal-open [class*="z-50"],
.modal-open [class*="relative"],
.modal-open [style*="z-index"],
.modal-open a[href*="facebook"],
.modal-open a[href*="mail"],
.modal-open a[href*="terms"],
.modal-open footer p,
.modal-open footer a {
  z-index: 1 !important;
  position: relative !important;
}

/* Gallery modal specific styles */
#gallery-modal-image-preview {
  max-height: 240px !important;
  max-width: 320px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Modal container size control */
#gallery-item-modal .glass-dark {
  max-width: 768px !important;
  max-height: 85vh !important;
}

/* Ensure no overflow */
#gallery-modal-content {
  overflow: auto !important;
}

/* Shop product modal content styling - OPTIMIZED SIZE */
#product-modal .glass-card {
  max-width: 1000px !important; /* Increased width to accommodate larger image */
  width: 95% !important; /* Reduced width percentage */
  flex-shrink: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  
  /* Enhanced scrollbar for better content navigation */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
  scroll-behavior: smooth;
}

  #product-modal #modal-image {
    width: 320px !important; /* Increased image width */
    height: 480px !important; /* Increased image height */
    max-width: 320px !important;
    max-height: 480px !important;
    object-fit: cover !important;
    border-radius: 12px;
    flex-shrink: 0;
    display: block !important;
  }
  
  /* Mobile-specific image stability fixes */
  @media (max-width: 768px) {
    #product-modal #modal-image {
      /* Prevent image positioning issues during scroll */
      position: relative !important;
      transform-origin: center center !important;
      /* Ensure stable positioning */
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      margin: 0 auto !important;
      /* Set max height for mobile to prevent cropping */
      max-height: 50vh !important;
    }
    
    /* Stabilize image container on mobile - CRITICAL FIX */
    #product-modal .image-zoom-container {
      position: relative !important;
      display: flex !important;
      justify-content: center !important;
      align-items: flex-start !important; /* Changed from center to flex-start */
      transform: none !important;
      transform-origin: center !important;
      /* Prevent container from collapsing */
      min-height: auto !important;
      width: 100% !important;
    }
    
    /* Prevent zoom-related positioning issues on mobile scroll */
    #product-modal .image-zoom-container.zooming #modal-image {
      transform-origin: center center !important;
    }
  }/* Fix status badge placement */
#product-modal #modal-status {
  position: static !important; /* Prevent absolute positioning */
  display: inline-block !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}  /* Badge containers styling */
#product-modal .modal-badges {
  display: flex;
  flex-direction: column; /* Stack status/sale and design/type vertically on mobile */
  align-items: center; /* Center items when stacked */
  gap: 0.5rem;
  width: 100%;
}

/* Container for status and sale badges */
#product-modal .status-sale-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center badges */
  gap: 0.3rem;
  /* Removed margin-right, as items are centered */
}

/* Container for design badges */
#product-modal .design-type-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center badges */
  gap: 0.3rem;
  width: 100%; /* Ensure it takes full width for centering */
}
#product-modal #modal-status,
#product-modal #modal-sale-badge {
  margin: 0 !important;
  position: static !important;
  display: inline-flex !important;
  vertical-align: middle;
  float: none !important;
}

/* Ensure hidden class takes precedence for sale badge */
#product-modal #modal-sale-badge.hidden {
  display: none !important;
}
#product-modal #modal-sale-badge {
  margin-left: 0.4rem !important; /* Slightly reduced margin for tight side-by-side */
}

/* Remove margin-bottom from title if present */
#product-modal h2, #product-modal .modal-title {
  margin-bottom: 0 !important;
}

/* Remove any margin-bottom from the badges container to keep it tight below the title */
#product-modal .modal-badges {
  margin-bottom: 0.5rem !important;
}

/* Better formatting for title and status */
#product-modal .flex.flex-wrap.items-start.justify-between {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Optimize content layout for better fit */
#product-modal .p-4.sm\:p-6 {
  padding: 1.25rem !important; /* Slightly more compact padding */
}

/* Better spacing between sections */
#product-modal .mb-4 {
  margin-bottom: 0.75rem !important; /* Reduced from 1rem */
}

/* Shop modal overlay positioning and mobile fixes */
#modal-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Ensure shop modal is properly positioned on mobile */
@media (max-width: 768px) {
  #modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    /* Fix for dynamic viewport height on mobile browsers */
    height: 100dvh !important;
    /* Ensure proper display timing */
    display: flex !important;
    /* Improve mobile scroll behavior */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }
  
  #product-modal {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    /* Prevent modal from being cut off */
    flex-shrink: 0 !important;
    /* Force full display on first click */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  #product-modal .flex.items-center.justify-center.min-h-screen {
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
    /* Ensure immediate display */
    display: flex !important;
    /* Prevent any scrolling artifacts */
    flex-direction: column !important;
  }
  
  /* Additional safety - prevent parent from forcing vertical centering */
  #product-modal > div.flex {
    align-items: flex-start !important;
  }
  
  #product-modal .w-full.max-w-6xl.relative {
    max-width: 100% !important;
    width: 100% !important;
    /* Prevent content from being hidden */
    min-height: auto !important;
  }
  
  /* Fix for modal content visibility */
  #product-modal:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure modal overlay shows correctly on first click */
  #modal-overlay[style*="display: flex"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Fix potential timing issues with modal content */
  #product-modal .flex.flex-col.md\\:flex-row.gap-4.sm\\:gap-6 {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Force immediate visibility on mobile to prevent half-display - modal only */
  #product-modal:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  
  /* Only force overlay visibility when explicitly shown, allow hiding */
  #modal-overlay[style*="display: flex"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure modal content is immediately visible */
  #product-modal:not(.hidden) * {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure close button is properly positioned and clickable on mobile */
  #close-modal {
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 100000 !important;
    padding: 0.5rem !important;
    min-width: 40px !important;
    min-height: 40px !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }
}

/* Reduce modal text and label sizes */
#product-modal,
#product-modal .glass-card {
  font-size: 0.95rem !important;
}
#product-modal h2, #product-modal .modal-title {
  font-size: 1.1rem !important;
}
#product-modal h3, #product-modal label, #product-modal .section-label {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
#product-modal #modal-price {
  font-size: 1.05rem !important;
}
#product-modal .badge-text, #product-modal #modal-status {
  font-size: 0.95rem !important;
}

@media (max-width: 768px) {
  #product-modal, #product-modal .glass-card {
    font-size: 0.8rem !important;
  }
  #product-modal h2, #product-modal .modal-title {
    font-size: 1rem !important; /* Increased from 0.7rem for better readability */
  }
  #product-modal h3, #product-modal label, #product-modal .section-label {
    font-size: 0.7rem !important;
  }
  #product-modal #modal-price {
    font-size: 0.9rem !important; /* Increased from 0.6rem for better readability */
  }
  #product-modal .badge-text, #product-modal #modal-status {
    font-size: 0.7rem !important;
  }/* Reduce badge size on mobile */
  #product-modal #modal-status,
  #product-modal #modal-sale-badge,
  .shop-status-badge-modal,
  .shop-sale-badge-modal {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.75rem !important;
  }
}

/* Modal title responsive sizing */
#product-modal #modal-title {
  font-size: 1.25rem !important; /* Default desktop size */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
}

/* Additional mobile price targeting - ensure all price elements are properly sized */
@media (max-width: 768px) {
  #product-modal #modal-price,
  #product-modal .price,
  #product-modal .price-container,
  #product-modal .price-container span,
  #product-modal [class*="price"] {
    font-size: 0.9rem !important; /* Increased from 0.6rem for better readability */
    line-height: 1.2 !important;
  }
}

/* Ultra-specific mobile price overrides to ensure nothing overrides these */
@media (max-width: 768px) {
  #product-modal #modal-price,
  #product-modal .glass-card #modal-price,
  #product-modal .modal-content #modal-price {
    font-size: 0.9rem !important; /* Increased from 0.6rem for better readability */
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px) {
  #product-modal #modal-price,
  #product-modal .glass-card #modal-price,
  #product-modal .modal-content #modal-price {
    font-size: 0.85rem !important; /* Increased from 0.55rem for better readability */
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
}

/* Enhanced Modal Sale Badge - High Specificity */
body #product-modal #modal-sale-badge,
html #product-modal #modal-sale-badge {
  display: inline-flex !important;
  align-items: center;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%) !important;
  color: #000000 !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
  margin-left: 0.3rem !important;
  animation: sale-badge-glow 1.8s ease-in-out infinite !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important; /* Remove any conflicting box-shadow */
}

/* Enhanced Modal Sale Badge Hover Effect - REMOVED */

/* Ensure hidden class takes precedence for sale badge */
#product-modal #modal-sale-badge.hidden {
  display: none !important;
}


/* Enhanced Badge Animations */
@keyframes sale-badge-glow {
  0% { 
    box-shadow: 
      0 0 5px rgba(251,191,36,0.3),
      0 0 10px rgba(251,191,36,0.2),
      0 0 15px rgba(251,191,36,0.1),
      0 4px 15px rgba(251,191,36,0.1),
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 -1px 0 rgba(0,0,0,0.05);
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    box-shadow: 
      0 0 15px 3px rgba(251,191,36,0.8),
      0 0 25px 5px rgba(251,191,36,0.6),
      0 0 35px 7px rgba(251,191,36,0.4),
      0 0 45px 9px rgba(251,191,36,0.3),
      0 0 55px 11px rgba(251,191,36,0.2),
      0 8px 35px rgba(251,191,36,0.4),
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -1px 0 rgba(0,0,0,0.1);
    transform: scale(1.03);
    filter: brightness(1.2);
  }
  100% { 
    box-shadow: 
      0 0 5px rgba(251,191,36,0.3),
      0 0 10px rgba(251,191,36,0.2),
      0 0 15px rgba(251,191,36,0.1),
      0 4px 15px rgba(251,191,36,0.1),
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 -1px 0 rgba(0,0,0,0.05);
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes badge-glow-green {
  0% { box-shadow: 0 0 8px rgba(34,197,94,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
  100% { box-shadow: 0 0 16px rgba(34,197,94,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
}

@keyframes badge-glow-blue {
  0% { box-shadow: 0 0 8px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
  100% { box-shadow: 0 0 16px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
}

@keyframes badge-glow-red {
  0% { box-shadow: 0 0 8px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
  100% { box-shadow: 0 0 16px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
}

@keyframes badge-glow-purple {
  0% { box-shadow: 0 0 8px rgba(168,85,247,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
  100% { box-shadow: 0 0 16px rgba(168,85,247,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
}

/* Remove old badge background if present */
#product-modal #modal-status,
#product-modal #modal-sale-badge {
  background-clip: padding-box !important;
}

/* Enhanced Shop Page Sale Badge - High Specificity */
body .shop-sale-badge-modal,
html .shop-sale-badge-modal {
  display: inline-flex !important;
  align-items: center;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, rgba(251,191,36,0.65) 0%, rgba(251,191,36,0.5) 50%, rgba(251,191,36,0.4) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
  margin-left: 0 !important;
  animation: sale-badge-glow 1.8s ease-in-out infinite !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important; /* Remove any conflicting box-shadow */
}

/* Enhanced Sale Badge Hover Effect - REMOVED */

/* Ensure hidden class takes precedence for sale badge */
.shop-sale-badge-modal.hidden {
  display: none !important;
}

/* Enhanced Available/Sold Badge for Modal */
#product-modal #modal-status {
  display: inline-flex !important;
  align-items: center;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  margin-right: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: relative;
  overflow: hidden;
}

/* Enhanced Available Badge */
#product-modal #modal-status.available {
  background: linear-gradient(135deg, rgba(34,197,94,0.5) 0%, rgba(34,197,94,0.35) 50%, rgba(34,197,94,0.25) 100%);
  color: #ffffff !important;
  border: 1.5px solid rgba(34,197,94,0.4);
  box-shadow: 
    0 0 0 1px rgba(34,197,94,0.2),
    0 4px 16px rgba(34,197,94,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-green 3s ease-in-out infinite alternate;
}

/* Enhanced Available Badge Hover Effect - REMOVED */

/* Enhanced Sold Badge */
#product-modal #modal-status.sold {
  background: linear-gradient(135deg, rgba(239,68,68,0.5) 0%, rgba(239,68,68,0.35) 50%, rgba(239,68,68,0.25) 100%);
  color: #ffffff !important;
  border: 1.5px solid rgba(239,68,68,0.4);
  box-shadow: 
    0 0 0 1px rgba(239,68,68,0.2),
    0 4px 16px rgba(239,68,68,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-red 3s ease-in-out infinite alternate;
}

/* Enhanced Sold Badge Hover Effect - REMOVED */

/* Enhanced Reserved Badge for Modal */
#product-modal #modal-status.reserved {
  background: linear-gradient(135deg, rgba(59,130,246,0.5) 0%, rgba(59,130,246,0.35) 50%, rgba(59,130,246,0.25) 100%);
  color: #ffffff !important;
  border: 1.5px solid rgba(59,130,246,0.4);
  box-shadow: 
    0 0 0 1px rgba(59,130,246,0.2),
    0 4px 16px rgba(59,130,246,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-blue 3s ease-in-out infinite alternate;
  text-transform: capitalize !important;
}

/* Enhanced Reserved Badge Hover Effect - REMOVED */

/* Enhanced On-hold Badge for Modal */
#product-modal #modal-status.on-hold {
  background: linear-gradient(135deg, rgba(168,85,247,0.5) 0%, rgba(168,85,247,0.35) 50%, rgba(168,85,247,0.25) 100%);
  color: #ffffff !important;
  border: 1.5px solid rgba(168,85,247,0.4);
  box-shadow: 
    0 0 0 1px rgba(168,85,247,0.2),
    0 4px 16px rgba(168,85,247,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-purple 3s ease-in-out infinite alternate;
  text-transform: capitalize !important;
}

/* Enhanced On-hold Badge Hover Effect - REMOVED */

/* Enhanced Shop Page Status Badges */
.shop-status-badge-modal {
  display: inline-flex !important;
  align-items: center;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  margin-left: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important; /* Remove any conflicting box-shadow */
}

/* Enhanced Available Badge for Shop */
.shop-status-badge-modal.available {
  background: linear-gradient(135deg, rgba(34,197,94,0.65) 0%, rgba(34,197,94,0.5) 50%, rgba(34,197,94,0.4) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(34,197,94,0.4);
  box-shadow: 
    0 0 0 1px rgba(34,197,94,0.2),
    0 4px 16px rgba(34,197,94,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-green 3s ease-in-out infinite alternate;
}

/* Enhanced Available Badge Hover Effect for Shop - REMOVED */

/* Enhanced Reserved Badge */
.shop-status-badge-modal.reserved {
  background: linear-gradient(135deg, rgba(59,130,246,0.65) 0%, rgba(59,130,246,0.5) 50%, rgba(59,130,246,0.4) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(59,130,246,0.4);
  box-shadow: 
    0 0 0 1px rgba(59,130,246,0.2),
    0 4px 16px rgba(59,130,246,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-blue 3s ease-in-out infinite alternate;
  text-transform: capitalize !important;
}

/* Enhanced Reserved Badge Hover Effect for Shop - REMOVED */

/* Enhanced Sold Badge for Shop */
.shop-status-badge-modal.sold {
  background: linear-gradient(135deg, rgba(239,68,68,0.65) 0%, rgba(239,68,68,0.5) 50%, rgba(239,68,68,0.4) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(239,68,68,0.4);
  box-shadow: 
    0 0 0 1px rgba(239,68,68,0.2),
    0 4px 16px rgba(239,68,68,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-red 3s ease-in-out infinite alternate;
}

/* Enhanced Sold Badge Hover Effect for Shop - REMOVED */

/* Enhanced On-hold Badge for Shop */
.shop-status-badge-modal.on-hold {
  background: linear-gradient(135deg, rgba(168,85,247,0.65) 0%, rgba(168,85,247,0.5) 50%, rgba(168,85,247,0.4) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(168,85,247,0.4);
  box-shadow: 
    0 0 0 1px rgba(168,85,247,0.2),
    0 4px 16px rgba(168,85,247,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  animation: badge-glow-purple 3s ease-in-out infinite alternate;
}

/* Enhanced On-hold Badge Hover Effect for Shop - REMOVED */

/* Image Zoom Container - Fit exactly around image */
#product-modal .image-zoom-container {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important; /* Align to top to prevent cropping */
  cursor: zoom-in !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: fit-content !important;
  line-height: 0 !important; /* Remove inline spacing */
}

/* Magnifying Glass Icon - Position relative to image, not container */
#product-modal .zoom-icon {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  pointer-events: none !important;
  /* Ensure icon is positioned relative to the actual image */
  transform: translateX(-8px) translateY(8px) !important;
}

#product-modal .zoom-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: white !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}

#product-modal .zoom-icon:hover {
  opacity: 0.8 !important;
}

/* Zoom Effect */
#product-modal .image-zoom-container #modal-image {
  transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: zoom-in !important;
  display: block !important;
  border-radius: 12px !important;
  /* Remove the fixed transform-origin so JS can control it */
  will-change: transform, transform-origin !important; /* Optimize for smoother animations */
  backface-visibility: hidden !important; /* Hardware acceleration */
  perspective: 1000px !important; /* Hardware acceleration */
}

/* Interactive Zoom on Mouse Move - Remove fixed scale so JS can control it */
#product-modal .image-zoom-container.zooming #modal-image {
  cursor: zoom-out !important;
}

/* Ensure zoom stays within container bounds */
#product-modal .image-zoom-container.zooming {
  position: relative !important;
  overflow: hidden !important; /* Keep hidden to respect container boundaries */
}

/* Mobile zoom adjustments */
@media (max-width: 768px) {
  #product-modal .zoom-icon {
    width: 20px !important;
    height: 20px !important;
    top: 6px !important;
    right: 6px !important;
    /* Adjust transform for mobile */
    transform: translateX(-6px) translateY(6px) !important;
  }
  
  #product-modal .zoom-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  #product-modal .image-zoom-container.zooming #modal-image {
    transform: scale(2.2) !important;
  }
}

@media (max-width: 480px) {
  #product-modal .image-zoom-container.zooming #modal-image {
    transform: scale(2) !important;
  }
}

/* Shop modal responsive fixes */
#product-modal {
  transition: all 0.3s ease;
}

/* Mobile-specific modal fixes */
@media (max-width: 768px) {
  #product-modal .glass-card {
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    margin: 0;
  }
  
  #product-modal .flex.flex-col.md\:flex-row {
    flex-direction: column;
  }
    #product-modal #modal-image {
    max-width: 220px !important;
    max-height: 320px !important;
    margin: 0 auto;
  }
  
  /* Note: This block's modal-overlay rule is moved to the main mobile block below for consistency */
}

/* Modal: stack image on top, content below */
@media (max-width: 768px) {  #product-modal .glass-card {
    display: flex !important;
    flex-direction: column !important;    padding: 0.5rem 0 0 0 !important;
    margin: 0.5rem !important;
  }
  
  /* Enhanced scrollbar for glass-card */
  #product-modal .glass-card::-webkit-scrollbar {
    width: 8px !important;
  }
  
  #product-modal .glass-card::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
  }
  
  #product-modal .glass-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
  }
  
  #product-modal .glass-card::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6) !important;
  }
  
  #product-modal .flex.flex-col.md\:flex-row {
    flex-direction: column !important;
    gap: 0 !important;
    height: 100%;
  }  #product-modal .image-zoom-container {
    width: 100% !important; /* Full width on mobile */
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Prevent vertical centering */
    margin: 0 auto 0.5rem auto !important;
    flex-shrink: 0 !important;
    line-height: 0 !important; /* Remove inline spacing */
    /* Prevent any inherited positioning */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
  }  #product-modal #modal-image {
    width: auto !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: 40vh !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    /* Ensure no extra spacing around image */
    line-height: 0 !important;  }  #product-modal .flex-1.flex.flex-col {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 1rem 0.5rem 1rem !important; /* Reduced bottom padding */
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Use full available height */
    
    /* Enhanced scrollbar visibility */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Webkit scrollbar styling for better visibility */
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar {
    width: 8px !important;
  }
  
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
  }
  
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
  }
  
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6) !important;
  }

  /* Mobile layout: Title, Price, Badges, Description/Details, Purchase Button */
  #product-modal #modal-title-wrapper {
    order: 1;
    text-align: center !important;
    margin-bottom: 0.25rem !important; /* Reduced margin */
  }

  #product-modal #modal-price {
    order: 2;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    margin-bottom: 0.5rem !important;
  }

  /* Center the content of the price display div (used for sale prices) */
  /* This ensures the 'before' and 'current' price spans are centered within this div */
  #product-modal #modal-price > div.flex.items-center.gap-2 {
    justify-content: center;
    width: 100%; /* Allow this div to take width for its own content centering */
  }

  /* Center the Design Style and Type badges within their container */
  /* This container is dynamically added by JS as a child of #modal-price */
  #product-modal #modal-price > div.flex.flex-wrap.gap-2.mt-2 {
    justify-content: center;
  }

  #product-modal .modal-badges {
    order: 3;
    display: flex;
    flex-direction: column; /* Stack badge groups */
    align-items: center; /* Center items in the column */
    gap: 0.5rem; /* Space between badge groups */
    margin-bottom: 0.75rem !important; /* Space before description */
    width: 100%;
  }

  #product-modal .status-sale-container,
  #product-modal .design-type-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    width: 100%; /* Ensure full width for centering */
  }
  #product-modal #modal-action {
    order: 4; /* Purchase button comes after badges, before description */
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0; /* Remove fixed margin-top, rely on margin from element above */
    margin-bottom: 1rem; /* Add margin below purchase button */
  }
  #product-modal #modal-description-details-area {
    order: 5; /* Description/details comes after purchase button */
    margin-bottom: 1rem; /* Add margin below description/details */
    padding-bottom: 1rem; /* Add padding at the very bottom of the modal content */
    /* Description/details will take available space and scroll if needed */
  }

  /* Make the mobile purchase button smaller */
  #product-modal #modal-action .btn-primary {
    padding-top: 0.5rem; /* Adjust vertical padding */
    padding-bottom: 0.5rem; /* Adjust vertical padding */
    font-size: 0.875rem; /* Adjust font size */
  }

  #product-modal #modal-action .btn-primary svg {
    width: 0.875rem; /* Adjust icon size */
    height: 0.875rem; /* Adjust icon size */
  }

  /* Remove centering from individual title/price if they are inside a centered wrapper */
  #product-modal #modal-title,
  #product-modal #modal-price {
    text-align: inherit !important; /* Inherit from parent for centering */
    margin-left: 0 !important; /* Remove auto margins if parent handles centering */
    margin-right: 0 !important;
  }
}

/* Tablet and small desktop optimization */
@media (min-width: 768px) and (max-width: 1023px) {  #product-modal .glass-card {
    max-width: 800px !important;
    width: 95% !important;
  }
  
  #product-modal #modal-image {
    width: 280px !important;
    height: 420px !important;
    max-width: 280px !important;
    max-height: 420px !important;
  }
  
  /* Adjust gap for tablet */
  #product-modal .md\:flex-row {
    gap: 1rem !important;
  }
}

/* Medium-large screens (laptops) specific optimizations */
@media (min-width: 1200px) and (max-width: 1439px) {
  #product-modal .glass-card {
    max-width: 850px !important;
    width: 85% !important;
  }
  
  #product-modal #modal-image {
    width: 290px !important;
    height: 440px !important;
    max-width: 290px !important;
    max-height: 440px !important;
  }
}
/* Desktop Modal Content */
@media (min-width: 1024px) {
  /* Optimized modal sizing for desktop */
  #product-modal .glass-card  /* Optimized modal sizing for desktop */
  #product-modal .glass-card {
    max-width: 800px !important; /* Further reduced for better desktop fit */
    width: 90% !important;
  } /* Optimized image size for desktop */
  #product-modal #modal-image {
    width: 300px !important;
    height: 450px !important;
    max-width: 300px !important;
    max-height: 450px !important;
  }
  
  /* Two-column layout for desktop modal content */
  #product-modal .lg\:flex-row {
    gap: 1.5rem !important; /* Slightly reduced gap */
  }
  
  #product-modal .lg\:w-1\/2 {
    width: 50% !important;
    flex: 1 !important;
  }
  
  /* Ensure columns have equal heights and proper alignment */
  #product-modal .lg\:flex-row > div {
    align-self: flex-start;
  }
  
  /* Optimize padding for desktop */
  #product-modal .p-4.sm\:p-6 {
    padding: 1.5rem !important;
  }
  
  /* Optimize content spacing for reduced modal size */
  #product-modal .mb-4 {
    margin-bottom: 0.75rem !important;
  }
  
  #product-modal .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  
  /* Optimize text sizing for desktop */
  #product-modal h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Ensure content remains readable */
  #product-modal .text-gray-300 {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
  
  /* Optimize column content */
  #product-modal .lg\:w-1\/2 .mb-4:last-child {
    margin-bottom: 0 !important;
  }
}

/* Extra large desktop screens */
@media (min-width: 1440px) {
  /* Keep modal reasonably sized on very large screens */
  #product-modal .glass-card {
    max-width: 850px !important;
    width: 70% !important;
  }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
  #product-modal .glass-card {
    max-width: 900px !important;
    width: 60% !important;
  }
}

/* Desktop purchase button positioning */
#modal-action-desktop {
  /* Ensure proper z-index and positioning */
  position: absolute !important;
  top: 12px !important;
  right: 64px !important;
  z-index: 15 !important;
  /* Force visibility on desktop */
  display: block !important;
}

#modal-action-desktop button {
  /* Enhance button styling for upper right position */
  white-space: nowrap;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Ensure button visibility */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure close button has higher z-index than purchase button */
#product-modal #close-modal {
  z-index: 20 !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
}

/* Gallery modal navigation buttons - Enhanced styling */
#gallery-modal-prev,
#gallery-modal-next {
  z-index: 100001 !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  /* Ensure buttons are always clickable */
  pointer-events: auto !important;
  user-select: none !important;
}

#gallery-modal-prev:hover,
#gallery-modal-next:hover {
  background: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Gallery modal navigation button styles */
#gallery-modal-prev,
#gallery-modal-next {
  transition: all 0.2s ease;
  /* Position buttons closer to the image area */
  position: fixed !important;
  top: 50vh !important;
  transform: translateY(-50%) !important;
  z-index: 100001 !important;
  /* Ensure buttons are always visible and clickable */
  pointer-events: auto !important;
  user-select: none !important;
}

#gallery-modal-prev {
  left: calc(50vw - 320px) !important; /* Positioned with more spacing from image area */
}

#gallery-modal-next {
  right: calc(50vw - 320px) !important; /* Positioned with more spacing from image area */
}

#gallery-modal-prev:hover,
#gallery-modal-next:hover {
  transform: translateY(-50%) scale(1.05) !important;
}

/* Fine-tuning for navigation button positioning closer to image */
@media (max-width: 768px) {
  #gallery-modal-prev {
    left: calc(50vw - 180px) !important; /* More spacing from center for better accessibility */
  }
  
  #gallery-modal-next {
    right: calc(50vw - 180px) !important; /* More spacing from center for better accessibility */
  }
}

/* Ensure buttons don't overlap with image on very wide screens */
@media (min-width: 1600px) {
  #gallery-modal-prev {
    left: calc(50vw - 400px) !important;
  }
  
  #gallery-modal-next {
    right: calc(50vw - 400px) !important;
  }
}

/* Enhanced mobile positioning for very small screens */
@media (max-width: 360px) {
  #gallery-modal-prev {
    left: calc(50vw - 120px) !important; /* Comfortable spacing for very small screens */
  }
  
  #gallery-modal-next {
    right: calc(50vw - 120px) !important; /* Comfortable spacing for very small screens */
  }
  
  /* Make buttons appropriately sized for very small screens while maintaining accessibility */
  #gallery-modal-prev,
  #gallery-modal-next {
    padding: 0.5rem !important;
    min-width: 40px !important; /* Minimum accessible size */
    min-height: 40px !important;
  }
  
  #gallery-modal-prev svg,
  #gallery-modal-next svg {
    width: 1rem !important;
    height: 1rem !important;
  }
}

/* Mobile responsive adjustments for gallery modal */
@media (max-width: 640px) {
  /* Position buttons with comfortable distance from image on mobile */
  #gallery-modal-prev {
    left: calc(50vw - 160px) !important; /* Increased spacing for better mobile experience */
  }
  
  #gallery-modal-next {
    right: calc(50vw - 160px) !important; /* Increased spacing for better mobile experience */
  }
  
  /* Make navigation buttons appropriately sized for mobile touch */
  #gallery-modal-prev,
  #gallery-modal-next {
    padding: 0.6rem !important; /* Slightly larger for better touch target */
    min-width: 44px !important; /* Ensure minimum touch target size */
    min-height: 44px !important; /* Ensure minimum touch target size */
  }
  
  #gallery-modal-prev svg,
  #gallery-modal-next svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  /* For small screens, position buttons with comfortable spacing */
  #gallery-modal-prev {
    left: calc(50vw - 140px) !important; /* Adequate spacing for small screens */
  }
  
  #gallery-modal-next {
    right: calc(50vw - 140px) !important; /* Adequate spacing for small screens */
  }
  
  /* Ensure proper button sizing for small screens */
  #gallery-modal-prev,
  #gallery-modal-next {
    padding: 0.55rem !important;
    min-width: 42px !important; /* Slightly smaller but still accessible */
    min-height: 42px !important;
  }
}

/* Desktop-specific rules */
@media (min-width: 1024px) {
  /* Hide mobile purchase button on desktop */
  #product-modal #modal-action {
    display: none !important;
  }
  
  /* Show desktop purchase button on desktop */
  #modal-action-desktop {
    display: block !important;
    position: absolute !important;
    top: 16px !important; /* Updated position */
    right: 60px !important; /* Updated position */
    z-index: 15 !important;
  }
  
  /* Adjust close button position */
  #product-modal #close-modal {
    top: 16px !important; /* Updated position */
    right: 16px !important; /* Updated position */
  }
}

/* Mobile-specific rules */
@media (max-width: 1023px) {
  /* Hide desktop purchase button on mobile */
  #product-modal #modal-action-desktop {
    display: none !important;
  }
  
  /* Show mobile purchase button on mobile */
  #product-modal #modal-action {
    display: block !important;
  }
}

/* Fine-tune modal title and pricing for reduced size */
@media (min-width: 768px) {
  #product-modal #modal-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
    #product-modal #modal-price {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.1rem !important; /* Reduced from 0.75rem to remove padding below price */
  }
  /* Optimize badge spacing */
  #product-modal .modal-badges {
    margin-bottom: 1rem !important;
    gap: 0.5rem !important;
  }
}

/* Smooth transition for modal sizing changes - desktop only */
@media (min-width: 769px) {
  #product-modal .glass-card {
    transition: max-width 0.3s ease, max-height 0.3s ease, width 0.3s ease !important;
  }

  #product-modal #modal-image {
    transition: width 0.3s ease, height 0.3s ease !important;
  }
}

/* Disable transitions on mobile to prevent display issues */
@media (max-width: 768px) {
  #product-modal .glass-card,
  #product-modal #modal-image,
  #product-modal,
  #modal-overlay {
    transition: none !important;
    animation: none !important;
  }
  
  /* Ensure modal overlay can be properly hidden on mobile */
  #modal-overlay[style*="display: none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Optimize purchase button positioning for reduced modal */
@media (min-width: 1024px) {
  #modal-action-desktop {
    top: 16px !important;
    right: 60px !important;
  }
  
  #modal-action-desktop button {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  #product-modal #close-modal {
    top: 16px !important;
    right: 16px !important;
  }
}

/* Optimize image container for reduced modal */
@media (min-width: 1024px) {
  #product-modal .image-zoom-container {
    flex-shrink: 0 !important;
    margin-right: 1rem !important;
  }
  
  /* Adjust zoom scale for smaller image */
  #product-modal .image-zoom-container.zooming #modal-image {
    transform: scale(2.2) !important; /* Slightly reduced zoom for smaller image */
  }
  
  /* Optimize flex layout for desktop */
  #product-modal .flex.flex-col.md\:flex-row {
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
}

/* Optimize content scrolling for reduced modal size */
@media (min-width: 1024px) {
  #product-modal .flex-1.flex.flex-col {
    padding-right: 1rem !important;
  }
  
  /* Enhanced scrollbar for desktop */
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar {
    width: 6px !important;
  }
  
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 3px !important;
  }
  
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
  }
  
  #product-modal .flex-1.flex.flex-col::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
  }
}

/* Message modal optimizations for maximum space efficiency */
#message-modal .glass-card {
  max-width: 650px !important; /* More compact width for desktop */
  max-height: 80vh !important; /* Reduced height for better space usage */
  width: 90% !important; /* Responsive width */
  min-height: 400px !important; /* Minimum height for usability */
}

#message-modal #message-modal-content {
  max-height: calc(80vh - 160px) !important; /* Account for header and footer */
  overflow-y: auto !important; /* Allow scrolling for long messages */
  padding: 1rem !important; /* Reduced padding for more compact layout */
}

/* Compact message list table styling */
#admin-contact-messages .grid {
  min-height: 48px !important; /* Ensure consistent row height */
  gap: 0.5rem !important; /* Reduced gap for more compact layout */
}

#admin-contact-messages .col-span-5 .line-clamp-2 {
  min-height: 2.5rem !important; /* Consistent message preview height */
  max-height: 2.5rem !important;
}

/* Optimize column spacing in compact modal */
#message-modal #admin-contact-messages .grid {
  grid-template-columns: 24px 1fr 0.8fr 80px !important; /* Optimized column widths */
  padding: 0.5rem 0.75rem !important; /* Reduced padding */
}

#message-modal #admin-contact-messages .text-sm {
  font-size: 0.8rem !important; /* Slightly smaller text for compact layout */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #message-modal .glass-card {
    max-width: 95% !important;
    max-height: 90vh !important;
    margin: 0 !important;
    padding: 0.5rem !important; /* Reduced padding on mobile */
  }
  
  #message-modal #message-modal-content {
    padding: 0.5rem !important; /* Reduced padding for mobile */
  }
  
  /* Simplified mobile layout for message list */
  #admin-contact-messages .grid {
    grid-template-columns: auto 1fr !important; /* Simplified 2-column layout */
    gap: 0.5rem !important;
    padding: 0.5rem !important; /* Reduced padding */
  }
  
  #admin-contact-messages .col-span-1 {
    grid-column: 1 / 1 !important;
    grid-row: 1 / 3 !important; /* Status dot spans two rows */
  }
  
  #admin-contact-messages .col-span-4,
  #admin-contact-messages .col-span-5,
  #admin-contact-messages .col-span-2 {
    grid-column: 2 / -1 !important;
  }
  
  /* Hide some elements on very small screens */
  @media (max-width: 480px) {
    .text-xs {
      font-size: 0.6rem !important;
    }
    
    #admin-contact-messages .text-gray-500 {
      display: none !important; /* Hide time on very small screens */
    }
  }
}

/* Enhanced scrollbar for message modal */
#message-modal .glass-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

#message-modal .glass-card::-webkit-scrollbar {
  width: 6px;
}

#message-modal .glass-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

#message-modal .glass-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#message-modal .glass-card::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Enhanced table header responsiveness */
.glass-dark .grid.grid-cols-12 {
  align-items: center !important;
  min-height: 40px !important;
}

/* Message list performance optimizations */
#admin-contact-messages {
  contain: layout style !important; /* CSS containment for better performance */
  will-change: contents !important; /* Optimize for dynamic content changes */
}

#admin-contact-messages > div {
  contain: layout !important;
  transition: background-color 0.15s ease !important; /* Smooth hover transitions */
}

/* Shop Notes Mobile Responsiveness - Smaller gap and text on mobile */
@media (max-width: 640px) {
  .shop-note-container {
    gap: 0.125rem !important; /* Even smaller gap on mobile (gap-0.5) */
  }
  
  .shop-note-text {
    font-size: 0.8rem !important; /* Smaller text on mobile */
    line-height: 0.875rem !important;
  }
  
  .shop-note-container svg {
    width: 0.4rem !important; /* Smaller icon on mobile */
    height: 0.4rem !important;
    margin-top: 0.125rem !important;
  }
}

/* Fine-tune for very small screens */
@media (max-width: 480px) {
  .shop-note-container {
    gap: 0.0625rem !important; /* Ultra-tight gap on very small screens */
  }
  
  .shop-note-text {
    font-size: 0.7rem !important; /* Even smaller text on very small screens */
    line-height: 0.75rem !important;
  }
}

/* Gallery and Shop Subtitle Mobile Responsiveness */
@media (max-width: 640px) {
  /* Gallery subtitle mobile adjustments */
  #gallery-subtitle {
    font-size: 0.75rem !important; /* Smaller than default text-sm */
    line-height: 0.5rem !important;
    margin-bottom: 1rem !important; /* Reduce bottom margin on mobile */
    padding: 0 1rem !important; /* Add side padding for better mobile layout */
  }
  
  /* Shop subtitle mobile adjustments */
  #shop-subtitle {
    font-size: 0.9em !important; /* Smaller than default text size */
    line-height: 1rem !important;
    margin-bottom: 1rem !important; /* Reduce bottom margin on mobile */
    padding: 0 1rem !important; /* Add side padding for better mobile layout */
  }
}

/* Ultra-fine adjustments for very small screens */
@media (max-width: 480px) {
  #gallery-subtitle,
  #shop-subtitle {
    font-size: 0.85rem !important; /* Even smaller on very small screens (11px) */
    line-height: 1.0rem !important;
    margin-bottom: 0.75rem !important; /* Further reduce bottom margin */
    padding: 0 0.75rem !important; /* Tighter side padding */
  }
}

/* Gallery subtitle padding below for search/filter section */
#gallery-subtitle {
  padding-bottom: 1.5rem !important; /* Add padding below subtitle for desktop */
}

@media (max-width: 768px) {
  #gallery-subtitle {
    padding-bottom: 1rem !important; /* Reduced padding on mobile */
  }
}

@media (max-width: 480px) {
  #gallery-subtitle {
    padding-bottom: 0.75rem !important; /* Even less padding on very small screens */
  }
}

/* Additional comprehensive footer element targeting */
/* Hide all footer text and links when modal is open */
body:has(#gallery-modal:not(.hidden)) footer.footer-glass p,
body:has(#gallery-modal:not(.hidden)) footer.footer-glass a,
body:has(#gallery-modal:not(.hidden)) footer.footer-glass div,
body:has(#gallery-modal:not(.hidden)) footer.footer-glass *[class*="text-"],
body:has(#gallery-modal:not(.hidden)) footer.footer-glass *[class*="sm:text-"],
body:has(#gallery-modal:not(.hidden)) footer.footer-glass *[class*="hover:"],
.modal-open footer.footer-glass p,
.modal-open footer.footer-glass a,
.modal-open footer.footer-glass div,
.modal-open footer.footer-glass *[class*="text-"],
.modal-open footer.footer-glass *[class*="sm:text-"],
.modal-open footer.footer-glass *[class*="hover:"] {
  z-index: 1 !important;
  position: relative !important;
  opacity: 0.1 !important; /* Make them barely visible if z-index fails */
}

/* Force all footer child elements to be behind modal */
body:has(#gallery-modal:not(.hidden)) footer *,
.modal-open footer * {
  z-index: 1 !important;
  position: relative !important;
}

/* Specific targeting for social media icons and copyright text */
body:has(#gallery-modal:not(.hidden)) a[aria-label="Facebook"],
body:has(#gallery-modal:not(.hidden)) a[aria-label="Email"],
body:has(#gallery-modal:not(.hidden)) p:contains("©"),
body:has(#gallery-modal:not(.hidden)) a:contains("Terms"),
.modal-open a[aria-label="Facebook"],
.modal-open a[aria-label="Email"],
.modal-open footer p,
.modal-open footer a {
  z-index: 1 !important;
  position: relative !important;
  opacity: 0.1 !important;
}

/* Additional gallery modal navigation button enhancements */
#gallery-modal {
  /* Ensure modal container allows fixed positioning */
  contain: layout !important;
}

/* Force navigation buttons to be independent of image size and content */
#gallery-modal-prev,
#gallery-modal-next {
  /* Override any conflicting styles */
  margin: 0 !important;
  /* Ensure buttons don't interfere with image layout */
  will-change: transform !important;
  /* Prevent any layout shifts */
  backface-visibility: hidden !important;
}

/* Ensure navigation buttons stay above everything */
#gallery-modal-prev,
#gallery-modal-next {
  /* Additional visual enhancements */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Prevent buttons from being affected by image dimensions */
#gallery-modal .flex.items-center.justify-center {
  /* Ensure content container doesn't affect button positioning */
  position: relative !important;
  z-index: 1 !important;
}

/* Make sure navigation buttons work on all screen orientations */
@media (orientation: portrait) {
  #gallery-modal-prev,
  #gallery-modal-next {
    /* Maintain position in portrait mode */
    position: fixed !important;
    top: 50vh !important;
  }
  /* Adjust positioning for portrait mode based on screen width */
  @media (max-width: 640px) {
    #gallery-modal-prev {
      left: calc(50vw - 150px) !important; /* Increased spacing for portrait mobile */
    }
    
    #gallery-modal-next {
      right: calc(50vw - 150px) !important; /* Increased spacing for portrait mobile */
    }
  }
  
  @media (min-width: 641px) {
    #gallery-modal-prev {
      left: calc(50vw - 200px) !important; /* More spacing for larger portrait screens */
    }
    
    #gallery-modal-next {
      right: calc(50vw - 200px) !important; /* More spacing for larger portrait screens */
    }
  }
}

@media (orientation: landscape) {
  #gallery-modal-prev,
  #gallery-modal-next {
    /* Maintain position in landscape mode */
    position: fixed !important;
    top: 50vh !important;
  }
  
  /* Specific adjustments for mobile landscape */
  @media (max-width: 768px) and (max-height: 450px) {
    #gallery-modal-prev {
      left: calc(50vw - 200px) !important; /* Further out in mobile landscape for better accessibility */
    }
    
    #gallery-modal-next {
      right: calc(50vw - 200px) !important; /* Further out in mobile landscape for better accessibility */
    }
  }
}

/* Ensure buttons work with different image aspect ratios */
@media (min-width: 1200px) {
  #gallery-modal-prev {
    left: calc(50vw - 320px) !important; /* Further from center on larger screens for better UX */
  }
  
  #gallery-modal-next {
    right: calc(50vw - 320px) !important; /* Further from center on larger screens for better UX */
  }
}

/* Additional Badge Enhancements */

/* Badge Container Spacing */
.badge-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Subtle Badge Shine Effect */
.shop-sale-badge-modal::before,
.shop-status-badge-modal::before,
#product-modal #modal-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
  border-radius: inherit;
}

/* Badge Hover Shine Effect - REMOVED */

/* Improved Badge Focus States for Accessibility */
.shop-sale-badge-modal:focus,
.shop-status-badge-modal:focus,
#product-modal #modal-status:focus {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .shop-sale-badge-modal,
  .shop-status-badge-modal,
  #product-modal #modal-status,
  #product-modal #modal-sale-badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.75rem !important;
    letter-spacing: 0.02em;
  }
  
  /* Reduce badge container spacing */
  #product-modal .modal-badges {
    gap: 0.2rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Reduce animation intensity on mobile for better performance */
  .shop-sale-badge-modal,
  .shop-status-badge-modal.available,
  .shop-status-badge-modal.reserved,
  .shop-status-badge-modal.sold,
  #product-modal #modal-status.available,
  #product-modal #modal-status.sold {
    animation-duration: 4s;
  }
}

/* Dark mode badge adjustments */
@media (prefers-color-scheme: dark) {
  .shop-sale-badge-modal,
  .shop-status-badge-modal,
  #product-modal #modal-status {
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .shop-sale-badge-modal,
  .shop-status-badge-modal,
  #product-modal #modal-status {
    border-width: 2px;
    font-weight: 800;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .shop-sale-badge-modal,
  .shop-status-badge-modal.available,
  .shop-status-badge-modal.reserved,
  .shop-status-badge-modal.sold,
  #product-modal #modal-status.available,
  #product-modal #modal-status.sold {
    animation: none;
  }
  
  .shop-sale-badge-modal::before,
  .shop-status-badge-modal::before,
  #product-modal #modal-status::before {
    display: none;
  }
}

/* Force Sale Badge Animation - Final Override */
.shop-sale-badge-modal,
#product-modal #modal-sale-badge {
  animation: sale-badge-glow 1.8s ease-in-out infinite !important;
  box-shadow: 0 0 5px rgba(251,191,36,0.3) !important;
}

/* Shop Modal Details Section - Smaller Font Size */
#details-content {
  font-size: 0.875rem !important; /* 14px - smaller than default */
  line-height: 1.5 !important;
}

/* Target the individual detail divs created by JavaScript */
#details-content div,
#details-content .text-sm {
  font-size: 0.8rem !important; /* 12.8px - even smaller for details */
  line-height: 1.4 !important;
}

/* Image Quality Tooltip Styling */
.image-quality-tooltip {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.5rem; /* Even smaller text - 10px */
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  max-width: 180px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* Show tooltip on hover */
.image-zoom-container:hover .image-quality-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Mobile modal image container */
@media (max-width: 768px) {  #product-modal .image-zoom-container {
    width: 100% !important;
    max-width: 240px !important; /* Reduced from 280px */
    aspect-ratio: 2/3 !important; /* Force consistent aspect ratio */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Changed from center to flex-start to prevent top cropping */
    margin: 0 auto 0.5rem auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #product-modal #modal-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 12px !important;
  }
}

/* Ultra-small screens */
@media (max-width: 320px) {
    #product-modal .image-zoom-container {
      max-width: 200px !important; /* Reduced from 220px */
    }
  }  /* Mobile badge ordering */
@media (max-width: 768px) {
  #product-modal .modal-badges {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
  }

  #product-modal .status-sale-container {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom:  0.3rem !important;
  }
}

/* Badge size adjustments for mobile */
.shop-sale-badge-modal,
.shop-status-badge-modal,
#product-modal #modal-status,
#product-modal #modal-sale-badge {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.75rem !important;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  #product-modal .flex-1.flex.flex-col {
    /* Remove forced scrolling, let content flow */
    overflow-y: visible !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  #product-modal .glass-card {
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
    padding-bottom: 0 !important;
  }

  #product-modal {
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
    padding: 0 !important;
  }
}

/* Desktop badge positioning and alignment */
@media (min-width: 769px) {
  /* Design Style and Type badges below price section - left aligned in desktop */
  #product-modal .design-type-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* Left align badges in desktop */    gap: 0.3rem !important;
    width: 100% !important;
    margin-top: 0.05rem !important; /* Further reduced to bring badges even closer to price */
  }
  
  /* Ensure design/type badges have consistent styling with status badges */
  #product-modal .design-type-container > div > div {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
  }
  
  /* Status and Sale badges container next to title in desktop */
  #product-modal .status-sale-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.3rem !important;
    align-items: center !important;
  }
}

/* Mobile badge positioning - centered */
@media (max-width: 768px) {
  #product-modal .design-type-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Center badges on mobile */
    gap: 0.3rem !important;
    width: 100% !important;
  }
  
  #product-modal .status-sale-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Center badges on mobile */
    gap: 0.3rem !important;
    width: 100% !important;
  }
}

/* Shop Modal Pagination Controls - Remove custom styles from arrows and number indicator, move further to right/bottom */
#product-modal .modal-pagination-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  min-height: unset;
  min-width: unset;
}

/* Mobile Pagination Controls - Below Image */
#product-modal .modal-pagination-controls-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  min-height: unset;
  min-width: unset;
}

#product-modal .modal-pagination-btn svg {
  color: #fff;
  stroke: #fff;
}

/* Desktop: Show original pagination, hide mobile */
@media (min-width: 769px) {
  #product-modal .modal-pagination-controls {
    display: flex;
  }
  #product-modal .modal-pagination-controls-mobile {
    display: none !important;
  }
}

/* Mobile: Hide original pagination, show mobile version below image */
@media (max-width: 768px) {
  #product-modal .modal-pagination-controls {
    display: none !important;
  }
  #product-modal .modal-pagination-controls-mobile {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  #product-modal .modal-pagination-controls {
    bottom: 0;
    right: 0;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  }
  #product-modal .modal-pagination-controls-mobile {
    padding: 0.5rem 0;
  }
}

/* Gallery modal mobile adjustments */
@media (max-width: 768px) {
  #gallery-modal-title {
    font-size: 1rem !important; /* Reduced from the default size */
  }
  
  #product-modal #modal-action button,
  #gallery-modal .modal-action button {
    font-size: 0.875rem !important; /* Smaller font size for buttons */
    padding: 0.5rem 1rem !important; /* Slightly reduced padding */
  }
}

/* Further size reduction for very small screens */
@media (max-width: 480px) {
  #gallery-modal-title {
    font-size: 0.875rem !important; /* Even smaller on very small screens */
  }
  
  #product-modal #modal-action button,
  #gallery-modal .modal-action button {
    font-size: 0.75rem !important; /* Further reduced font size */
    padding: 0.4rem 0.875rem !important; /* Even more compact padding */
  }
}

/* Admin Status Badge Styles */
.admin-status-badge {
  display: inline-flex !important;
  align-items: center;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 
    0 4px 16px rgba(0,0,0,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.05) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-status-badge.available {
  background: linear-gradient(135deg, rgba(34,197,94,0.65) 0%, rgba(34,197,94,0.5) 50%, rgba(34,197,94,0.4) 100%) !important;
  border: 1px solid rgba(34,197,94,0.4) !important;
  animation: badge-glow-green 3s ease-in-out infinite alternate;
}

.admin-status-badge.sold {
  background: linear-gradient(135deg, rgba(239,68,68,0.65) 0%, rgba(239,68,68,0.5) 50%, rgba(239,68,68,0.4) 100%) !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  animation: badge-glow-red 3s ease-in-out infinite alternate;
}

.admin-status-badge.reserved {
  background: linear-gradient(135deg, rgba(59,130,246,0.65) 0%, rgba(59,130,246,0.5) 50%, rgba(59,130,246,0.4) 100%) !important;
  border: 1px solid rgba(59,130,246,0.4) !important;
  animation: badge-glow-blue 3s ease-in-out infinite alternate;
}

.admin-status-badge.on-hold {
  background: linear-gradient(135deg, rgba(168,85,247,0.65) 0%, rgba(168,85,247,0.5) 50%, rgba(168,85,247,0.4) 100%) !important;
  border: 1px solid rgba(168,85,247,0.4) !important;
  animation: badge-glow-purple 3s ease-in-out infinite alternate;
}

/* Enhanced gallery-style-badge for on-hold status - Additional specificity */
#product-modal .gallery-style-badge.on-hold,
.gallery-style-badge.on-hold {
  background: linear-gradient(to right, #a855f7, #7c3aed) !important;
  color: white !important;
  border: 1px solid rgba(168,85,247,0.4) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 9999px !important;
  animation: badge-glow-purple 3s ease-in-out infinite alternate;
}

/* Gallery item status badges - Shop page items */
.gallery-style-badge.available {
  background: linear-gradient(to right, #16a34a, #15803d) !important;
  color: white !important;
  border: 1px solid rgba(34,197,94,0.4) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 9999px !important;
  animation: badge-glow-green 3s ease-in-out infinite alternate;
}

.gallery-style-badge.sold {
  background: linear-gradient(to right, #dc2626, #b91c1c) !important;
  color: white !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 9999px !important;
  animation: badge-glow-red 3s ease-in-out infinite alternate;
}

.gallery-style-badge.reserved {
  background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
  color: white !important;
  border: 1px solid rgba(59,130,246,0.4) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 9999px !important;
  animation: badge-glow-blue 3s ease-in-out infinite alternate;
}

/* Sale badge style for gallery-style-badge system */
.gallery-style-badge.sale-badge-glow {
  background: linear-gradient(to right, #facc15, #eab308) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  font-size: 11px !important;
  padding: 5px 9px !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 20px rgba(255, 215, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  z-index: 20 !important;
  transition: all 0.2s ease !important;
  animation: sale-badge-glow 1.8s ease-in-out infinite !important;
}