/* public/assets/css/style.css */

/* We are using Tailwind CSS via CDN for rapid, modern, responsive UI.
   You can add your own custom, overriding styles here if needed. */

body {
    font-family: 'Inter', sans-serif; /* A nice modern font, fallback in main.php */
}

/* Custom class for a smooth transition */
.transition-all {
    transition: all 0.3s ease-in-out;
}
/* Handle empty product images */
.product-image img:not([src]),
.product-image img[src=""],
.product-image img:not([src=""]) {
    background-color: #f3f4f6; /* gray-100 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img:not([src])::after,
.product-image img[src=""]::after {
    content: "No Image";
    color: #9ca3af; /* gray-400 */
    font-size: 0.875rem;
}

/* Product Image Alignment Fix */
.product-img-container {
    height: 200px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb; /* Light gray background */
    overflow: hidden;
    border-radius: 8px 8px 0 0; /* Match card rounding */
}

.product-img-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Ensures image doesn't stretch */
    padding: 8px; /* Small padding around images */
}

/* Ensure consistent card heights */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card .product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card .product-content .mt-auto {
    margin-top: auto;
}