/* Custom styles for Cekrek Photo Booth */

/* Flash effect animation */
@keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.flash-effect {
    animation: flash 0.3s ease-out;
}

/* Timer pulse animation */
@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.7; }
}

.pulse-animation {
    animation: pulse 1s infinite;
}

/* Grid layouts */
.grid-layout.active {
    border-color: #8b5cf6; /* Purple-500 */
}

.grid-layout .grid {
    min-height: 50px;
}

.grid-layout .grid div {
    min-height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dark .grid-layout .grid div {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Color selectors */
.color-btn.active {
    border-color: #8b5cf6; /* Purple-500 */
    transform: scale(1.1);
}

.color-btn {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    min-width: 25px;
    min-height: 25px;
}

.dark .color-btn {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Filter buttons */
.filter-btn.active, .sticker-btn.active {
    border-color: #8b5cf6; /* Purple-500 */
    background-color: rgba(139, 92, 246, 0.1);
}

/* Sticker styles */
.sticker {
    position: absolute;
    font-size: 2rem;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.2s ease;
    z-index: 30; /* Increase z-index to ensure stickers appear above photos */
    background: transparent !important; /* Ensure no background */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any box shadows */
    padding: 0 !important; /* Remove padding */
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Keep the text shadow */
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); /* Keep the drop shadow */
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    touch-action: none; /* Improve touch handling */
    pointer-events: auto; /* Ensure clickable */
}

.sticker:hover {
    transform: scale(1.2) rotate(5deg);
    z-index: 35; /* Raise above other stickers when hovered */
}

.sticker.animated {
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-10px) scale(1.1); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.sticker-pulse {
    animation: pulse 2s infinite;
}

.sticker-wiggle {
    animation: wiggle 1s infinite;
}

/* Ensure the emoji itself has no background */
.sticker span {
    display: inline-block;
    background: transparent;
    pointer-events: none; /* Let events pass through to parent */
}

/* Remove the ::after pseudo-element completely */
.sticker::after {
  display: none !important;
  content: none !important;
}

/* Remove any references to the sticker::after in hover states too */
.sticker:hover::after {
  display: none !important;
  opacity: 0 !important;
}

.sticker:active {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Photo filter effects */
.filter-grayscale {
    filter: grayscale(100%);
}

.filter-sepia {
    filter: sepia(70%);
}

/* Add more filters */
.filter-brightness {
    filter: brightness(1.2);
}

.filter-contrast {
    filter: contrast(1.2);
}

.filter-vintage {
    filter: sepia(30%) brightness(0.9) contrast(1.1);
}

/* Button effects */
button {
    transition: all 0.2s ease-in-out;
}

#download-btn:hover, #start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#download-btn:active, #start-btn:active {
    transform: translateY(0);
}

/* Camera feed container */
#camera-feed {
    min-height: 300px;
    background-color: #1a1a1a;
}

/* Photo preview borders */
#photo-previews div img {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Bigger photo placeholders */
#photo-previews .fas.fa-camera {
    font-size: 2.5rem !important;
    opacity: 0.7;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.3s ease;
}

/* Loading indicator for download button */
.loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Better sticker interactions */
.sticker-btn:hover {
    transform: scale(1.1);
}

.sticker-btn:active {
    transform: scale(0.95);
}

/* Add photo frame effect */
#final-photo-grid {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 6px 18px -3px rgba(0, 0, 0, 0.15);
    position: relative !important; /* Ensure proper positioning context for stickers */
    overflow: hidden; /* Contain child elements */
    padding: 4px; /* Add padding inside the frame to accommodate the larger gaps */
    border-radius: 16px; /* Match radius with the frame */
    transform: translateZ(0); /* Force hardware acceleration for better rendering */
}

/* Fix the gap issue caused by rounded corners */
#final-photo-grid.grid {
    overflow: hidden;
    gap: 4px !important; /* Reduce gap to eliminate empty spaces */
}

/* Override previous individual photo rounded corners */
#final-photo-grid img,
.photo-item img {
    border-radius: 0; /* Reset all border radius first */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Remove any inline spacing */
    margin: 0;
    padding: 0;
    max-width: 100%;
}

/* Grid cell specific styles */
#final-photo-grid > div {
    overflow: hidden; /* Ensure contents don't leak */
    background-color: inherit; /* Inherit background color from parent */
    position: relative; /* For proper positioning of rounded corners */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* These will be applied by JS dynamically based on the grid layout */
.corner-tl { border-top-left-radius: 10px !important; }
.corner-tr { border-top-right-radius: 10px !important; }
.corner-bl { border-bottom-left-radius: 10px !important; }
.corner-br { border-bottom-right-radius: 10px !important; }

/* Remove sticker drag handle indicator */

/* Remove responsive adjustments for the sticker::after element */
@media (max-width: 768px) {
    #timer-count {
        font-size: 5rem;
    }
    
    .sticker {
        font-size: 1.5rem;
    }
    
    /* Improve mobile touch targets */
    .sticker-btn, .filter-btn, .color-btn, .grid-btn {
        min-height: 44px;
    }
    
    /* Better mobile scrolling */
    #editor-section {
        padding-bottom: 2rem;
    }
    
    /* Remove sticker::after adjustments */
    .sticker::after {
        display: none !important;
    }
}

/* Improved dark mode colors */
.dark .sticker::after {
    display: none !important;
}

/* Preview borders in dark mode */
.dark #photo-previews div img {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Add a nice glow effect to buttons in dark mode */
.dark #download-btn:hover {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* Improve visibility of stickers on different backgrounds */
.sticker {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Tailwind dark mode fix */
.dark #final-photo-grid {
    background-color: #1f2937; /* This will be overridden by JS but provides a default */
}

/* Improve dark mode contrast */
.dark #welcome-screen h2 {
    color: #f3f4f6 !important;
}

.dark .bg-white {
    background-color: #1f2937;
}

.dark .text-gray-800 {
    color: #f3f4f6;
}

/* Additional styles for Cekrek Photo Booth */

/* Make the active button selections more obvious */
.grid-btn.active, .filter-btn.active, .sticker-btn.active, .color-btn.active {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* Individual photo styling in the grid */
.photo-item {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Flash animation for the camera */
@keyframes flash {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.flash-animation {
  animation: flash 0.5s ease-out;
}

/* Hover effects */
.feature-card:hover {
  transform: translateY(-5px);
}

/* Adjusting rounded corners for images inside previews */
#photo-previews img {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Improved responsive design */
@media (max-width: 640px) {
  .photo-frame {
    border-width: 12px !important; /* Still thicker than before but better for mobile */
  }
  
  #timer-count {
    font-size: 4rem !important; /* Smaller timer on mobile */
  }
}

/* Additional styles for rounded image corners and placeholders */

/* Ensure all images in the final grid have rounded corners */
#final-photo-grid img,
.photo-item img {
  border-radius: 8px;
  overflow: hidden;
}

/* Ensure the photo frame and grid items properly respect rounded corners */
.photo-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* Specific placeholder size */
.photo-placeholder {
  width: 156px;
  height: 117px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #e5e7eb;
  overflow: hidden;
}

.dark .photo-placeholder {
  background-color: #4b5563;
}

/* Make sure images in preview maintain aspect ratio while filling container */
#photo-previews img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Handle images inside the final photo grid */
#final-photo-grid .photo-container {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

/* Handle the case where JS adds images directly */
#final-photo-grid img.rounded-image {
  border-radius: 8px !important;
  overflow: hidden;
}

/* Ensure stickers work properly with the rounded corners */
.sticker {
  pointer-events: auto;
  cursor: move;
  z-index: 20; /* Make sure stickers stay above rounded images */
  position: absolute;
}

/* Fix preview items to show proper rounded corners */
.photo-preview-item {
  overflow: hidden;
  border-radius: 8px;
}

/* Make the photo frame much thicker */

/* Increase the border width for the photo frame */
.photo-frame {
  border-width: 16px !important; /* Double the previous width */
  border-style: solid;
  border-radius: 16px; /* Match this radius with the container */
  overflow: hidden; /* Critical to prevent content overflow */
}

/* Add styles for enhanced customization features */

/* Overlay styles */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  opacity: 0.7;
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
}

.overlay-hearts {
  background-image: url('../static/overlays/hearts.png');
  mix-blend-mode: screen;
}

.overlay-confetti {
  background-image: url('../static/overlays/confetti.png');
  opacity: 0.6;
}

.overlay-stars {
  background-image: url('../static/overlays/stars.png');
  mix-blend-mode: screen;
}

.overlay-bubbles {
  background-image: url('../static/overlays/bubbles.png');
  mix-blend-mode: soft-light;
}

/* Frames styles */
.frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.frame-polaroid {
  background-image: url('../static/frames/polaroid.png');
}

.frame-vintage {
  background-image: url('../static/frames/vintage.png');
}

.frame-film {
  background-image: url('../static/frames/film.png');
}

/* New section tabs */
.customization-nav {
  display: flex;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(156, 163, 175, 0.2);
}

.customization-tab {
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.customization-tab.active {
  border-bottom-color: #8b5cf6;
  color: #8b5cf6;
}

.dark .customization-tab.active {
  color: #a78bfa;
}

.customization-section {
  display: none;
}

.customization-section.active {
  display: block;
}

/* Emoji picker */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.emoji-category {
  margin-bottom: 0.5rem;
}

.emoji-category-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.dark .emoji-category-title {
  color: #9ca3af;
}

/* Text overlay styles */
.text-overlay {
  position: absolute;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  cursor: move;
  z-index: 25;
  font-weight: bold;
  min-width: 50px;
  text-align: center;
}

.dark .text-overlay {
  background-color: rgba(30, 41, 59, 0.7);
  color: #fff;
}

/* Text styles */
.text-style-normal {
  font-family: Arial, sans-serif;
}

.text-style-funky {
  font-family: 'Comic Sans MS', cursive;
  text-shadow: 1px 1px 0 #ff00ff, -1px -1px 0 #00ffff;
}

.text-style-bold {
  font-family: Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.text-style-elegant {
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

/* Better sticker button appearance */
.sticker-btn {
    background: transparent !important;
    font-size: 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem !important;
}

/* Improve download output quality */
.html2canvas-container {
  background-color: transparent !important;
}

/* Fix download rendering issues */
#final-photo-grid {
  transform: translateZ(0); /* Force hardware acceleration for better rendering */
}

/* Ensure images in the grid stay properly contained */
#final-photo-grid img {
  display: block; /* Remove inline spacing */
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Ensure grid items have no internal spacing that could cause gaps */
#final-photo-grid > div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reset corner styles specifically for download to prevent empty spaces */
#final-photo-grid.download-mode,
#final-photo-grid.download-mode > div {
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Ensure proper rendering during download */
#final-photo-grid.download-mode img {
  border-radius: 0 !important;
}

/* Improve HTML2Canvas rendering */
.html2canvas-canvas {
  background-color: transparent !important;
}