/**
 * CHECKOUT ORDER SUMMARY - DEDICATED STYLING
 * Ensures proper item image sizing and layout in checkout order summary
 * Created: September 15, 2025
 * Purpose: Override any conflicting styles and create clean checkout layout
 */

/* ==================================================
   CHECKOUT ORDER SUMMARY - MAXIMUM SPECIFICITY OVERRIDES
   ================================================== */

/* Target checkout pages with maximum specificity */
body.checkout-page .order-summary-card,
body .modern-checkout-page .order-summary-card,
body .checkout-container .order-summary-card,
body [class*="checkout"] .order-summary-card {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 20px !important;
}

/* Summary Header Styling */
body.checkout-page .summary-header,
body .modern-checkout-page .summary-header,
body .checkout-container .summary-header,
body [class*="checkout"] .summary-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #f3f4f6 !important;
}

body.checkout-page .summary-header h4,
body .modern-checkout-page .summary-header h4,
body .checkout-container .summary-header h4,
body [class*="checkout"] .summary-header h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
}

body.checkout-page .item-count,
body .modern-checkout-page .item-count,
body .checkout-container .item-count,
body [class*="checkout"] .item-count {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ==================================================
   SUMMARY ITEMS CONTAINER
   ================================================== */

body.checkout-page .summary-items,
body .modern-checkout-page .summary-items,
body .checkout-container .summary-items,
body [class*="checkout"] .summary-items {
    max-height: 300px !important;
    overflow-y: auto !important;
    margin-bottom: 20px !important;
    padding-right: 4px !important;
}

/* ==================================================
   INDIVIDUAL SUMMARY ITEM - COMPACT DESIGN
   ================================================== */

body.checkout-page .summary-item,
body .modern-checkout-page .summary-item,
body .checkout-container .summary-item,
body [class*="checkout"] .summary-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #f9fafb !important;
    position: relative !important;
}

body.checkout-page .summary-item:last-child,
body .modern-checkout-page .summary-item:last-child,
body .checkout-container .summary-item:last-child,
body [class*="checkout"] .summary-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

body.checkout-page .summary-item:first-child,
body .modern-checkout-page .summary-item:first-child,
body .checkout-container .summary-item:first-child,
body [class*="checkout"] .summary-item:first-child {
    padding-top: 0 !important;
}

/* ==================================================
   ITEM IMAGE - COMPACT SIZE WITH MAXIMUM OVERRIDE
   ================================================== */

body.checkout-page .summary-item .item-image,
body .modern-checkout-page .summary-item .item-image,
body .checkout-container .summary-item .item-image,
body [class*="checkout"] .summary-item .item-image,
body.checkout-page .order-summary-card .item-image,
body .modern-checkout-page .order-summary-card .item-image,
body .checkout-container .order-summary-card .item-image,
body [class*="checkout"] .order-summary-card .item-image {
    /* FORCE COMPACT SIZE */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;

    /* Image styling */
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;

    /* Reset any padding/margin */
    padding: 0 !important;
    margin: 0 !important;

    /* Proper display */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Item Image - IMG tag with maximum specificity */
body.checkout-page .summary-item .item-image img,
body .modern-checkout-page .summary-item .item-image img,
body .checkout-container .summary-item .item-image img,
body [class*="checkout"] .summary-item .item-image img,
body.checkout-page .order-summary-card .item-image img,
body .modern-checkout-page .order-summary-card .item-image img,
body .checkout-container .order-summary-card .item-image img,
body [class*="checkout"] .order-summary-card .item-image img {
    /* FORCE EXACT SIZE */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;

    /* Image fit and positioning */
    object-fit: cover !important;
    object-position: center !important;

    /* Reset all spacing */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;

    /* Display settings */
    display: block !important;
    flex-shrink: 0 !important;

    /* Border radius */
    border-radius: 8px !important;
}

/* ==================================================
   QUANTITY BADGE - REDESIGNED
   ================================================== */

body.checkout-page .summary-item .item-quantity,
body .modern-checkout-page .summary-item .item-quantity,
body .checkout-container .summary-item .item-quantity,
body [class*="checkout"] .summary-item .item-quantity,
body.checkout-page .order-summary-card .item-quantity,
body .modern-checkout-page .order-summary-card .item-quantity,
body .checkout-container .order-summary-card .item-quantity,
body [class*="checkout"] .order-summary-card .item-quantity {
    /* Positioning */
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    z-index: 10 !important;

    /* Size and shape */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;

    /* ARGUN brand colors */
    background: #dc2626 !important;
    color: white !important;
    border: 2px solid white !important;

    /* Typography */
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;

    /* Reset spacing */
    padding: 0 !important;
    margin: 0 !important;
}

/* ==================================================
   ITEM DETAILS - OPTIMIZED LAYOUT
   ================================================== */

body.checkout-page .summary-item .item-details,
body .modern-checkout-page .summary-item .item-details,
body .checkout-container .summary-item .item-details,
body [class*="checkout"] .summary-item .item-details,
body.checkout-page .order-summary-card .item-details,
body .modern-checkout-page .order-summary-card .item-details,
body .checkout-container .order-summary-card .item-details,
body [class*="checkout"] .order-summary-card .item-details {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Product Name */
body.checkout-page .summary-item .item-details h6,
body .modern-checkout-page .summary-item .item-details h6,
body .checkout-container .summary-item .item-details h6,
body [class*="checkout"] .summary-item .item-details h6,
body.checkout-page .order-summary-card .item-details h6,
body .modern-checkout-page .order-summary-card .item-details h6,
body .checkout-container .order-summary-card .item-details h6,
body [class*="checkout"] .order-summary-card .item-details h6 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.4 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    /* Text overflow handling */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
}

/* Variant info or additional details */
body.checkout-page .summary-item .item-details .text-muted,
body .modern-checkout-page .summary-item .item-details .text-muted,
body .checkout-container .summary-item .item-details .text-muted,
body [class*="checkout"] .summary-item .item-details .text-muted {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================================================
   ITEM PRICE - CLEAN STYLING
   ================================================== */

body.checkout-page .summary-item .item-price,
body .modern-checkout-page .summary-item .item-price,
body .checkout-container .summary-item .item-price,
body [class*="checkout"] .summary-item .item-price,
body.checkout-page .order-summary-card .item-price,
body .modern-checkout-page .order-summary-card .item-price,
body .checkout-container .order-summary-card .item-price,
body [class*="checkout"] .order-summary-card .item-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: fit-content !important;
}

/* ==================================================
   MOBILE RESPONSIVE - SMALLER SIZES
   ================================================== */

@media (max-width: 768px) {
    body.checkout-page .summary-item,
    body .modern-checkout-page .summary-item,
    body .checkout-container .summary-item,
    body [class*="checkout"] .summary-item {
        gap: 10px !important;
        padding: 12px 0 !important;
    }

    body.checkout-page .summary-item .item-image,
    body .modern-checkout-page .summary-item .item-image,
    body .checkout-container .summary-item .item-image,
    body [class*="checkout"] .summary-item .item-image,
    body.checkout-page .order-summary-card .item-image,
    body .modern-checkout-page .order-summary-card .item-image,
    body .checkout-container .order-summary-card .item-image,
    body [class*="checkout"] .order-summary-card .item-image {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    body.checkout-page .summary-item .item-image img,
    body .modern-checkout-page .summary-item .item-image img,
    body .checkout-container .summary-item .item-image img,
    body [class*="checkout"] .summary-item .item-image img,
    body.checkout-page .order-summary-card .item-image img,
    body .modern-checkout-page .order-summary-card .item-image img,
    body .checkout-container .order-summary-card .item-image img,
    body [class*="checkout"] .order-summary-card .item-image img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    body.checkout-page .summary-item .item-quantity,
    body .modern-checkout-page .summary-item .item-quantity,
    body .checkout-container .summary-item .item-quantity,
    body [class*="checkout"] .summary-item .item-quantity {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        font-size: 10px !important;
        top: -6px !important;
        right: -6px !important;
    }

    body.checkout-page .summary-item .item-details h6,
    body .modern-checkout-page .summary-item .item-details h6,
    body .checkout-container .summary-item .item-details h6,
    body [class*="checkout"] .summary-item .item-details h6 {
        font-size: 13px !important;
    }

    body.checkout-page .summary-item .item-price,
    body .modern-checkout-page .summary-item .item-price,
    body .checkout-container .summary-item .item-price,
    body [class*="checkout"] .summary-item .item-price {
        font-size: 14px !important;
    }
}

@media (max-width: 576px) {
    body.checkout-page .order-summary-card,
    body .modern-checkout-page .order-summary-card,
    body .checkout-container .order-summary-card,
    body [class*="checkout"] .order-summary-card {
        padding: 15px !important;
    }

    body.checkout-page .summary-item .item-image,
    body .modern-checkout-page .summary-item .item-image,
    body .checkout-container .summary-item .item-image,
    body [class*="checkout"] .summary-item .item-image,
    body.checkout-page .order-summary-card .item-image,
    body .modern-checkout-page .order-summary-card .item-image,
    body .checkout-container .order-summary-card .item-image,
    body [class*="checkout"] .order-summary-card .item-image {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    body.checkout-page .summary-item .item-image img,
    body .modern-checkout-page .summary-item .item-image img,
    body .checkout-container .summary-item .item-image img,
    body [class*="checkout"] .summary-item .item-image img,
    body.checkout-page .order-summary-card .item-image img,
    body .modern-checkout-page .order-summary-card .item-image img,
    body .checkout-container .order-summary-card .item-image img,
    body [class*="checkout"] .order-summary-card .item-image img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    body.checkout-page .summary-item .item-quantity,
    body .modern-checkout-page .summary-item .item-quantity,
    body .checkout-container .summary-item .item-quantity,
    body [class*="checkout"] .summary-item .item-quantity {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 9px !important;
    }
}

/* ==================================================
   NUCLEAR OVERRIDES - ABSOLUTE MAXIMUM SPECIFICITY
   ================================================== */

/* Override any possible conflicting styles with attribute selectors */
[class*="checkout"] .summary-item .item-image[style],
[class*="checkout"] .summary-item .item-image img[style] {
    width: 48px !important;
    height: 48px !important;
}

[class*="order-summary"] .item-image[style],
[class*="order-summary"] .item-image img[style] {
    width: 48px !important;
    height: 48px !important;
}

/* Override inline styles with attribute targeting */
img[src*="storage/products/"][style*="width"],
img[src*="storage/products/"][style*="height"] {
    width: 48px !important;
    height: 48px !important;
}

/* Target by parent context */
.checkout-page img[alt*="ARGUN"],
.order-summary-card img[alt*="ARGUN"],
.summary-item img[loading="lazy"] {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
}

/* ==================================================
   FINAL DOCUMENTATION
   ================================================== */

/*
 * CHECKOUT ORDER SUMMARY REDESIGN - September 15, 2025
 *
 * Features:
 * ✓ Compact 48px x 48px item images (42px mobile, 38px small mobile)
 * ✓ Professional quantity badges with ARGUN red branding
 * ✓ Clean, readable typography
 * ✓ Proper spacing and alignment
 * ✓ Maximum specificity overrides to prevent conflicts
 * ✓ Fully responsive design
 * ✓ Nuclear overrides for inline styles
 *
 * This file ensures checkout item images remain compact regardless
 * of any other CSS files affecting product images elsewhere.
 */