/* Homepage Specific Styles */

/* Hero main search field: solid white (not frosted glass) for contrast on dark hero */
.hero-search-bar {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    border-color: #e5eaf0 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 28px rgba(2, 8, 23, 0.1);
}

/* Subtle extra depth on homepage strip (body.mc-app already sets base mesh) */
.homepage-bg {
    background:
        radial-gradient(1000px 420px at 15% 10%, rgba(239, 68, 68, 0.05), transparent 55%),
        radial-gradient(800px 360px at 90% 60%, rgba(249, 115, 22, 0.04), transparent 58%),
        transparent;
}

.homepage-bg > * {
    position: relative;
    z-index: 1;
}

/* Professional Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out;
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}

.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

.animate-slide-left {
    animation: slide-left 0.3s ease-out;
}

/* Ensure search dropdown is not clipped and appears above all content */
#searchDropdown {
    position: absolute !important;
    z-index: 9999 !important;
}

/* Ensure parent containers don't clip the dropdown */
.relative.overflow-visible {
    overflow: visible !important;
}

/* Fix models list scrolling */
#searchModelsList {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* Professional Scrollbar Styling */
.brands-scroll {
    scrollbar-width: thin;
    scrollbar-color: #dc2626 #f3f4f6;
}

.brands-scroll::-webkit-scrollbar {
    width: 10px;
}

.brands-scroll::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 10px;
}

.brands-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #dc2626, #b91c1c);
    border-radius: 10px;
    border: 2px solid #f9fafb;
}

.brands-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #b91c1c, #991b1b);
}

/* Professional Search Result Items */
#searchBrandList a,
#searchBrandListDesktop a {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

#searchBrandList a:hover,
#searchBrandListDesktop a:hover {
    background: linear-gradient(to right, #fef2f2, #ffffff);
    border-left-color: #dc2626;
    transform: translateX(2px);
}

#searchModelsList a,
#searchModelsListDesktop a {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

#searchModelsList a:hover,
#searchModelsListDesktop a:hover {
    background: linear-gradient(to right, #fef2f2, #ffffff);
    border-left-color: #dc2626;
    transform: translateX(2px);
}

/* Custom border-left utility */
.border-l-3 {
    border-left-width: 3px;
}

/* Professional Loading States */
.loading-spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #dc2626;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* This file loads on the home page only — limit `transition` properties (avoid `all`) */
body.mc-app button,
body.mc-app a,
body.mc-app input {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Enhanced Shadow Effects */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Professional Backdrop Blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Featured / All cars horizontal strips — reliable touch scroll + layout on iOS */
.mc-home-car-strip {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    /*
     * Allow BOTH horizontal (strip) and vertical (page) panning.
     * Using only `pan-x` previously hijacked the gesture on mobile:
     * once the finger landed on the strip, the page could not be
     * scrolled vertically, so scrolling felt "stuck" at Featured /
     * All cars. Declaring both axes lets the browser pick the
     * dominant direction after a few pixels of movement.
     */
    touch-action: pan-x pan-y;
}

/*
 * Home strip photo frame.
 * - Desktop / tablet: 4:3, taller hero-style framing that matches the
 *   car-details main-photo crop.
 * - Mobile: 3:2. The card is nearly full-width on phones, so 4:3
 *   makes the photo disproportionately tall and pushes the details
 *   too far down. 3:2 keeps the photo present but the card compact.
 */
.mc-home-car-strip .mc-home-card-photo {
    aspect-ratio: 4 / 3;
}

@media (max-width: 639px) {
    .mc-home-car-strip .mc-home-card-photo {
        aspect-ratio: 3 / 2;
    }
}

/*
 * Outer card: content-sized height, never stretched by the strip's
 * flex container. The explicit `align-self: flex-start` is insurance
 * against any parent using `align-items: stretch`; combined with
 * `height: auto`, cards always end exactly at the price row.
 */
.mc-home-car-strip .mc-home-card-outer {
    height: auto !important;
    min-height: 0;
    align-self: flex-start;
}

/*
 * Softer hover zoom. The old `scale-[1.03]` grew the image by 3%,
 * which visibly shaved the left/right edges of the car off the
 * frame. 1.5% keeps the "lift" feel without losing any part of the
 * photo on hover or touch.
 */
.mc-home-car-strip .mc-home-card-img {
    will-change: transform;
}
.mc-home-car-strip .mc-vehicle-card-shell:hover .mc-home-card-img,
.mc-home-car-strip .mc-vehicle-card-shell:focus-visible .mc-home-card-img {
    transform: scale(1.015);
}

/* On touch devices ignore sticky :hover and disable the scale entirely
   so a tapped card doesn't show half the car while the router loads. */
@media (hover: none) and (pointer: coarse) {
    .mc-home-car-strip .mc-vehicle-card-shell:hover .mc-home-card-img,
    .mc-home-car-strip .mc-vehicle-card-shell:focus-visible .mc-home-card-img {
        transform: none;
    }
}

/* Fix intermittent blank / stuck-shimmer thumbnails on Featured & All cars (mobile/tablet).
   premium-ui applies `content-visibility: auto` to `.homepage-bg > *` and `.mc-home-car-strip`
   for scroll perf — combined with lazy-loaded photos inside horizontally clipped cards,
   some browsers postpone image decode until a later scroll/paint cycle. Force normal
   visibility for the home strips + their ancestor wrapper (homepage.css loads after premium-ui). */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .homepage-bg > * {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }

    #recent-activity-section,
    .mc-home-car-strip {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }
}