/* Hide scrollbar for a cinematic look */
::-webkit-scrollbar {
    display: none;
}
html {
    scrollbar-width: none;
    scroll-behavior: smooth;
}

/* Custom date picker icon color for dark mode */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}
::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}

/* Animation Delays */
.delay-100 {
    animation-delay: 100ms;
}
.delay-200 {
    animation-delay: 200ms;
}
.delay-300 {
    animation-delay: 300ms;
}
.delay-400 {
    animation-delay: 400ms;
}

/* Image Comparison Slider */
.comparison-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y; /* Prevent scrolling when swiping horizontally */
}

.comparison-slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.comparison-slider .before-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Initial state */
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

.comparison-slider .before-image img {
    /* Critical: Force image to match container width regardless of crop width */
    width: 100vw; 
    max-width: none;
}

/* We'll handle the exact width dynamically via JS for the inner image */

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: white;
    cursor: ew-resize;
    z-index: 20;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.slider-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    backdrop-filter: blur(4px);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l-3 3 3 3m8-6l3 3-3 3"></path></svg>');
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Remove all browser/Tailwind default focus rings globally for a cleaner aesthetic */
input:focus, select:focus, textarea:focus, button:focus {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
}

/* Force dark background for autofilled inputs to prevent the default white/blue Safari/Chrome behavior */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}