/* Auto Universe Inc. - Custom Styles */
@import "tailwindcss";
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* White background */
    color: #1a202c; /* Dark text */
}

.hero-bg {
    background-image: url('../images/image.webp');
    background-size: cover;
    background-position: center;
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.btn-primary, .btn-search {
    background-color: #dc2626; /* Red-600 */
    border: 2px solid #b91c1c; /* Red-700 for border */
    transition: background-color 0.3s ease;
}

.btn-primary:hover, .btn-search:hover {
    background-color: #b91c1c; /* Red-700 on hover */
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6; /* Light gray */
}

::-webkit-scrollbar-thumb {
    background: #dc2626; /* Red */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b91c1c; /* Darker red */
}

.filter-group label {
    color: #374151; /* Gray-700 */
}

.filter-group input, .filter-group select {
    background-color: #ffffff; /* White background */
    border-color: #d1d5db; /* Gray-300 border */
    color: #1f2937; /* Gray-800 text */
}

.filter-group input::placeholder {
    color: #6b7280; /* Gray-500 */
}

.car-card {
    background-color: #ffffff; /* White background */
    border: 1px solid #d1d5db; /* Light gray border */
}

.heart-icon {
    cursor: pointer;
}

.heart-icon.favorited svg {
    fill: #dc2626; /* Red-600 */
    stroke: #dc2626;
}

.heart-icon svg {
    stroke: #6b7280; /* Gray-500 */
    fill: none;
}

/* Logo override for about page */
.logo-large {
    height: 128px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
}

header img.logo-large {
    height: 128px !important;
    width: auto !important;
}

/* Responsive Avatar Image Styling */
.avatar-image-container {
    width: 120px;
    height: 90px;
    margin: 0 auto;
}

.avatar-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile and tablet sizes */
@media (min-width: 640px) {
    .avatar-image-container {
        width: 160px;
        height: 120px;
    }
}

@media (min-width: 768px) {
    .avatar-image-container {
        width: 200px;
        height: 150px;
    }
}

@media (min-width: 1024px) {
    .avatar-image-container {
        width: 250px;
        height: 190px;
    }
}

/* Large desktop monitors - 300px max height */
@media (min-width: 1280px) {
    .avatar-image-container {
        width: 400px;
        height: 300px;
    }
}

/* For contact page side-by-side layout */
@media (min-width: 1024px) {
    .avatar-contact-layout .avatar-image-container {
        width: 100%;
        height: 190px;
    }
}

@media (min-width: 1280px) {
    .avatar-contact-layout .avatar-image-container {
        width: 100%;
        height: 300px;
    }
}