/**
 * 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; }
}

/* ==========================================================================
   🚀 DAF MARKETPLACE: ELITE WISHLIST MODULE (Center Popup Version)
   Match: Center Screen Toasts + 31px Loop Icons + Badge Sync
   ========================================================================== */

/* 💖 1. WISHLIST ICON OVERLAY (Product Loop Image Actions) */
.daf-card-thumb {
    position: relative !important;
}

.daf-wishlist-loop-trigger {
    position: absolute !important;
    bottom: 15px !important; 
    left: 15px !important;
    background: #ffffff !important;
    /* 📉 Perfect Fit: Size reduced to 31px */
    width: 31px !important;
    height: 31px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10 !important;
}

.daf-wishlist-loop-trigger:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.18) !important;
}

/* 🎨 SVG Icons Adjustment */
.daf-wishlist-loop-trigger .daf-wl-svg {
    width: 17px !important;
    height: 17px !important;
    transition: all 0.3s ease !important;
}

.daf-wishlist-loop-trigger .daf-wl-added {
    display: none !important;
}

.daf-wishlist-loop-trigger.active .daf-wl-default {
    display: none !important;
}

.daf-wishlist-loop-trigger.active .daf-wl-added {
    display: block !important;
    animation: dafHeartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes dafHeartPop {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 🍞 2. ELITE CENTER TOAST SYSTEM (Screen-Center Alert) */
#daf-wishlist-toast-container {
    position: fixed !important;
    /* 🎯 Logic: Perfect Screen Center Positioning */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1000000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    pointer-events: none !important;
}

.daf-toast {
    background: #10b981 !important; /* Premium Green */
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 50px !important; /* Pill style */
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-width: 280px !important;
    /* 🚀 Pop-in Animation */
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.daf-toast.daf-toast-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.daf-toast.removed { 
    background: #0f172a !important; /* Sleek Dark for Removal */
}

/* 📈 3. HEADER WISHLIST BADGE (Sync with Cart Style) */
.daf-wl-count-badge {
    position: absolute !important;
    top: -5px !important;
    right: -8px !important;
    background: #ef4444 !important; /* Alert Red */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    line-height: 1 !important;
}