/* 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: use aspect-ratio 3/2 instead of the shared
 * 16/10, which is very close to how real car photography is framed
 * (Unsplash, dealer studio shots, phone cameras in landscape all sit
 * at ~3:2). Matching the frame to the photo's native aspect means
 * `object-fit: cover` barely crops anything — the full car stays
 * visible, horizon line + wheels included.
 *
 * A fixed pixel height (previous attempt) forced a ~4:3 frame on
 * mobile, which cropped the sides of the car noticeably. Using
 * aspect-ratio instead guarantees every card at the same breakpoint
 * is identical in height AND avoids cropping, while still being a
 * bit taller than the default 16:10 used elsewhere.
 */
.mc-home-car-strip .mc-home-card-photo {
    aspect-ratio: 3 / 2;
}

/*
 * Outer card height override.
 *
 * The Tailwind `h-[25rem] sm:h-[25.5rem]` on .mc-home-card-outer is
 * the base value (those arbitrary utilities exist in the compiled
 * tailwind.css, so they're our safe fallback). But 25.5rem was not
 * quite enough once the photo went to 3:2: at lg (320px card width)
 * the photo is ~213px tall, and the title + chips + price rows need
 * ~207px, leaving the price clipped by the content column's
 * overflow-hidden.
 *
 * We bump the card height here in plain CSS (not Tailwind arbitrary
 * values, which would require a rebuild) so the price row always has
 * room to render. ~1.5rem of extra height comfortably accommodates
 * the taller photo on every breakpoint.
 */
.mc-home-car-strip .mc-home-card-outer {
    height: 26.5rem;
}

@media (min-width: 640px) {
    .mc-home-car-strip .mc-home-card-outer {
        height: 27rem;
    }
}

/*
 * 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;
    }
}