/* ============================================================
   CheapestSupply Portal - Main Stylesheet
   assets/css/style.css
   ============================================================ */

/* -------------------------------------------------------
   PRODUCT CARD IMAGES
   Fixed height with object-fit to:
   1. Fix Cumulative Layout Shift (CLS) - reserves space before image loads
   2. Ensure all card images are same height regardless of original dimensions
   3. Reduce vertical scrolling on mobile
   ------------------------------------------------------- */
.card-img-top {
    width: 100%;
    height: 220px;              /* Mobile default - compact for less scrolling */
    object-fit: cover;          /* Crops to fill without stretching */
    object-position: center;    /* Centers the crop */
    background-color: #f8f9fa;  /* Light grey placeholder while image loads */
    display: block;
}

@media (min-width: 768px) {
    .card-img-top {
        height: 260px;          /* Slightly taller on desktop where space isn't as precious */
    }
}

/* -------------------------------------------------------
   PRODUCT CARDS
   ------------------------------------------------------- */
.product-card {
    transition: box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.product-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* -------------------------------------------------------
   CART ICON
   ------------------------------------------------------- */
.cart-icon {
    color: inherit;
}

.cart-count {
    font-size: 0.65rem;
}

/* -------------------------------------------------------
   SITE HEADER
   ------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid #e9ecef;
    background-color: #ffffff;
}

/* -------------------------------------------------------
   SITE FOOTER
   Contrast fix: #6c757d on #f8f9fa fails WCAG AA.
   #444444 on #f8f9fa passes WCAG AA (6.1:1 ratio).
   ------------------------------------------------------- */
.site-footer {
    border-top: 1px solid #e9ecef;
    color: #555555;
    font-size: 0.875rem;
}

.site-footer a,
.site-footer a:visited,
.footer-links a,
.footer-links a:visited {
    color: #444444;
}

.site-footer a:hover,
.footer-links a:hover {
    color: #212529;
    text-decoration: underline !important;
}

.site-footer p {
    color: #555555;
}

/* -------------------------------------------------------
   HERO SECTION
   ------------------------------------------------------- */
.hero-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 2rem;
}

/* -------------------------------------------------------
   QUANTITY CONTROLS
   ------------------------------------------------------- */
.quantity-input {
    max-width: 60px;
}

/* -------------------------------------------------------
   CHECKOUT SECTION
   ------------------------------------------------------- */
.checkout-section {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 1rem 0;
    border-top: 1px solid #e9ecef;
    z-index: 10;
}

/* -------------------------------------------------------
   EMPTY CART MESSAGE
   ------------------------------------------------------- */
.empty-cart-message {
    color: #6c757d;
    text-align: center;
    padding: 2rem 0;
}