body { -webkit-font-smoothing: antialiased; }
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
@media (prefers-color-scheme: dark) {
    .glass {
        background: rgba(29, 29, 31, 0.7);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Horizontal carousel touch stability (mobile) */
#product-grid,
#reviews-container,
#category-filters,
#recently-viewed-list {
    -webkit-overflow-scrolling: touch;
    /* Allow both horizontal and vertical panning so vertical page scroll isn't trapped
       while still enabling smooth horizontal scrolling for carousels */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

/* Smooth reveal animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* GPU Acceleration Helpers */
#product-page {
    will-change: transform;
    /* Optimize paint performance */
    contain: content; 
}
/* When hidden (off-screen), use 3D transform for GPU */
#product-page.translate-y-full {
    transform: translate3d(0, 100%, 0) !important;
}
/* When visible (on-screen), use 3D transform for GPU */
#product-page:not(.translate-y-full) {
    transform: translate3d(0, 0, 0) !important;
}

.transform-gpu { transform: translate3d(0,0,0); }
.backface-hidden { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Subtle Gradient Overlay for Dark Mode */
.dark-gradient {
    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 50%, #0a0e16 100%);
}

/* Custom Radio Button Styles */
input[type="radio"]:checked + div {
    border-color: #0071e3;
    background-color: rgba(0, 113, 227, 0.05);
}
@media (prefers-color-scheme: dark) {
    input[type="radio"]:checked + div {
        border-color: #0071e3;
        background-color: rgba(0, 113, 227, 0.15);
    }
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; margin: 0; 
}

/* Tracker Specific Styles */
.text-gradient {
    background: linear-gradient(135deg, var(--apple-blue), #af52de);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glass-card {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    border-radius: 24px;
}

/* Force copied text to be legible when pasted into white documents */
::selection {
    background: #0071e3; /* Apple Blue - Solid, vivid blue */
    color: #ffffff; /* Stark white text */
    text-shadow: none;
}

/* Ensure text color defaults to system color when copied if possible, though browser support varies */
@media print {
    body { color: black !important; background: white !important; }
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 300px;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show {
    transform: translateX(0);
    opacity: 1;
}
@media (prefers-color-scheme: dark) {
    .toast {
        background: rgba(29, 29, 31, 0.9);
        border: 1px solid rgba(255,255,255,0.1);
        color: white;
    }
}

/* Scroll Lock helper */
body.scroll-lock { overflow: hidden; }

/* Floating Animation for Hero Images */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-shimmer {
    animation: shimmer 1.5s infinite;
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* Fluid Ambient Background Animation */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
    animation: blob 8s infinite;
    will-change: transform; 
    transform: translateZ(0); /* Hardware Acceleration Trigger */
}
.animation-delay-2000 {
    animation-delay: 2s;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

/* Schedule Pill Checked States */
input[name="checkoutPickupSlot"]:checked + label .sched-radio-ring {
    border-color: #0071e3;
    background-color: #0071e310;
}
input[name="checkoutPickupSlot"]:checked + label .sched-radio-dot {
    transform: scale(1);
}

/* New Inline Summary Smooth Entry */
#checkout-summary-view:not(.hidden) {
    animation: summarySlideIn 0.6s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@keyframes summarySlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skeleton Loading Specifics */
.skeleton-box {
    background: #e2e8f0;
    position: relative;
    overflow: hidden;
}

.dark .skeleton-box {
    background: #2d2d2d;
}

.skeleton-box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}

.dark .skeleton-box::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0)
    );
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes scan {
    0%, 100% { top: 0%; opacity: 0; }
    5%, 95% { opacity: 1; }
    50% { top: 100%; }
}

.animate-scan {
    animation: scan 4s ease-in-out infinite;
}

.shadow-inner-lg {
    box-shadow: inset 0 2px 10px 0 rgba(0, 0, 0, 0.06);
}

/* Apple-style Select Customization */
#checkout-location-dropdown {
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#checkout-location-dropdown option {
    background: #ffffff;
    color: #1d1d1f;
}

@media (prefers-color-scheme: dark) {
    #checkout-location-dropdown option {
        background: #1c1c1e;
        color: #ffffff;
    }
}

.schedule-row-enter {
    animation: fadeInSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}