/**
 * File: frontend-product-loop.css
 * Location: /assets/css/frontend-product-loop.css
 * Status: Elite Scoped Layout with 1-Line Clamp & 15px Gap for Status.
 */

/* 1. Scoped Grid Setup */
#daf-marketplace-wrapper.daf-shop-container { 
    width: 100% !important; 
    margin: 20px 0 !important; 
}

#daf-marketplace-wrapper .daf-elite-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 25px !important;
}

/* 2. Elite Card Design */
#daf-marketplace-wrapper .daf-elite-card {
    background: #ffffff !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#daf-marketplace-wrapper .daf-elite-card:hover { 
    box-shadow: 0 0px 8px rgba(0,0,0,0.15) !important; 
}

/* 3. Image Section (16:9 & 20% Zoom) */
#daf-marketplace-wrapper .daf-card-thumb {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
    background: #f1f1f1 !important;
}

#daf-marketplace-wrapper .daf-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: block !important;
}

#daf-marketplace-wrapper .daf-elite-card:hover .daf-main-img {
    transform: scale(1.2) !important;
}

/* 4. Balanced Card Body */
#daf-marketplace-wrapper .daf-card-body { 
    padding: 15px 15px 10px !important; 
    flex-grow: 1 !important; 
    overflow: hidden !important;
}

#daf-marketplace-wrapper .daf-title-wrapper {
    width: 100% !important;
    margin-bottom: 8px !important; 
}

/* 🎯 TITLE CLAMP LOGIC (Strictly 1 Line) */
#daf-marketplace-wrapper .daf-card-title { 
    margin: 0 !important; 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    line-height: 1.3 !important; 
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

#daf-marketplace-wrapper .daf-card-title a { 
    color: #333 !important; 
    text-decoration: none !important; 
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#daf-marketplace-wrapper .daf-card-title a:hover { color: #2271b1 !important; }

/* 🎯 Meta & Status Row */
.daf-meta-status-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; 
    width: 100% !important;
    margin-top: 2px !important;
}

#daf-marketplace-wrapper .daf-card-meta { 
    font-size: 12px !important; 
    color: #888 !important; 
    margin: 0 !important; 
}

#daf-marketplace-wrapper .daf-author { color: #2271b1 !important; font-weight: 500 !important; }

/* 🎯 SALES & RATING INLINE WITH 15PX GAP */
#daf-marketplace-wrapper .daf-status-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important; /* Perfect gap applied */
}

#daf-marketplace-wrapper .daf-sales-text { 
    font-size: 11px !important; 
    color: #888 !important; 
    font-weight: 500 !important;
    margin: 0 !important; /* Removed margin-right so gap works perfectly */
    line-height: 1 !important;
    white-space: nowrap !important;
}

#daf-marketplace-wrapper .daf-rating { 
    color: #ffb900 !important; 
    display: flex !important;
    align-items: center !important;
}

#daf-marketplace-wrapper .daf-rating .dashicons {
    font-size: 14px !important; 
    width: 14px !important;
    height: 14px !important;
}

/* 5. Elite Dual Row Footer */
#daf-marketplace-wrapper .daf-card-footer {
    padding: 10px 15px 15px !important;
    border-top: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#daf-marketplace-wrapper .daf-footer-action-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#daf-marketplace-wrapper .daf-price { 
    font-size: 22px !important; 
    font-weight: 700 !important; 
    color: #333 !important; 
    line-height: 1 !important;
}

#daf-marketplace-wrapper .daf-action-group { display: flex !important; gap: 6px !important; align-items: center !important; }

/* 6. Elite Cart Button & Success Icon Logic */
#daf-marketplace-wrapper .daf-icon-cart-btn {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    height: 34px !important;
    width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#daf-marketplace-wrapper .daf-icon-cart-btn:hover { border-color: #2271b1 !important; background: #f0f6fb !important; }

/* Static Cart Icon */
.daf-cart-icon-svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    background: url('../icons/cart.svg') no-repeat center !important;
    background-size: contain !important;
}

/**
 * 🎯 SUCCESS STATE: TICK ICON
 */
#daf-marketplace-wrapper .daf-add-to-cart-btn.daf-item-added {
    border-color: #8cc63f !important;
    background-color: #f6fbf0 !important;
}

#daf-marketplace-wrapper .daf-cart-icon-svg.daf-icon-tick {
    background: url('../icons/tick.svg') no-repeat center !important;
    background-size: contain !important;
}

#daf-marketplace-wrapper .daf-preview-btn {
    text-decoration: none !important;
    border: 1.5px solid #2271b1 !important;
    color: #2271b1 !important;
    padding: 0 14px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

#daf-marketplace-wrapper .daf-preview-btn:hover { background: #2271b1 !important; color: #ffffff !important; }

/* Mobile Tuning */
@media (max-width: 600px) {
    #daf-marketplace-wrapper .daf-elite-grid { grid-template-columns: 1fr !important; }
}