/**
 * 3D Product Card Hover Effects
 * Full-size image with overlay on hover
 */

/* Product Card 3D Hover Effects */
.product-card-3d:hover .product-info-overlay {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.product-card-3d .product-info-overlay {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
}

/* Debug: Show overlay partially on mobile for testing */
@media (max-width: 768px) {
    .product-card-3d .product-info-overlay {
        transform: translateY(70%) !important;
        opacity: 0.8 !important;
    }
    
    .product-card-3d:hover .product-info-overlay {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

.product-card-3d:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 0 #444;
}

/* Image Background Effects */
.product-card-3d .product-image-bg {
    transition: transform var(--transition-normal);
}

.product-card-3d:hover .product-image-bg {
    transform: scale(1.05);
}

/* Badge Hover Effects */
.product-card-3d .badge-3d {
    transition: all var(--transition-normal);
}

.product-card-3d:hover .badge-3d {
    transform: scale(1.1);
    box-shadow: var(--shadow-md) var(--badge-color);
}

/* Button Hover in Overlay */
.product-info-overlay .btn-3d {
    transition: all var(--transition-fast);
}

.product-info-overlay .btn-3d:hover {
    --btn-bg: rgba(255,255,255,0.3);
    backdrop-filter: blur(15px);
    transform: scale(1.05);
}

/* Mobile Responsive - Simple Card Layout */
@media (max-width: 768px) {
    /* Remove hover effects on mobile */
    .product-card-3d:hover {
        transform: none !important;
        box-shadow: var(--shadow-lg) var(--card-color) !important;
    }
    
    .product-card-3d:hover .product-image-bg {
        transform: none !important;
    }
    
    .product-card-3d:hover .product-info-overlay {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    
    /* Simple mobile card layout */
    .product-card-3d {
        height: auto !important;
        min-height: 300px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .product-card-3d .product-image-bg {
        position: relative !important;
        height: 200px !important;
        flex-shrink: 0 !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    }
    
    /* Show overlay always on mobile as bottom section */
    .product-card-3d .product-info-overlay {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        background: white !important;
        padding: var(--space-4) !important;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    /* Force all text elements visible on mobile */
    .product-info-overlay h3,
    .product-info-overlay .product-name,
    .product-info-overlay .product-title {
        color: #111827 !important;
        font-size: var(--font-size-base, 1rem) !important;
        margin: 0 0 var(--space-2, 8px) 0 !important;
        line-height: 1.4 !important;
        text-shadow: none !important;
        font-weight: 600 !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        padding: 0 !important;
    }
    
    /* Force price info visible - Inline layout */
    .product-info-overlay .price-info {
        display: flex !important;
        align-items: center !important;
        gap: var(--space-2, 8px) !important;
        margin: var(--space-2, 8px) 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .product-info-overlay .price-info div {
        color: #dc2626 !important;
        font-weight: 700 !important;
        font-size: var(--font-size-lg, 1.125rem) !important;
        margin: 0 !important;
        text-shadow: none !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    
    /* Original price styling - inline */
    .product-info-overlay .price-info div:first-child {
        color: #6b7280 !important;
        text-decoration: line-through !important;
        font-size: var(--font-size-base, 1rem) !important;
        margin-right: var(--space-2, 8px) !important;
    }
    
    /* Hide buy buttons on mobile to save space */
    .product-info-overlay .btn-3d,
    .product-info-overlay button {
        display: none !important;
    }
    
    .product-info-overlay .price-original {
        color: #6b7280 !important;
        font-size: var(--font-size-base, 1rem) !important;
        text-decoration: line-through !important;
        margin-right: var(--space-2, 8px) !important;
    }
    
    /* Force badges visible */
    .product-card-3d .badge-3d,
    .product-card-3d .discount-badge {
        background: #dc2626 !important;
        color: white !important;
        border: 2px solid #dc2626 !important;
        text-shadow: none !important;
        box-shadow: 2px 2px 0 0 #991b1b !important;
        padding: var(--space-1, 4px) var(--space-2, 8px) !important;
        font-weight: 700 !important;
        font-size: var(--font-size-xs, 0.75rem) !important;
        border-radius: var(--radius-md, 6px) !important;
        position: absolute !important;
        top: var(--space-2, 8px) !important;
        right: var(--space-2, 8px) !important;
        z-index: 20 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* No image state */
    .product-card-3d .product-image-bg .fas.fa-image {
        color: #6b7280 !important;
        font-size: 2rem !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Description if present */
    .product-info-overlay .product-description,
    .product-info-overlay p {
        color: #6b7280 !important;
        font-size: var(--font-size-sm, 0.875rem) !important;
        line-height: 1.4 !important;
        margin: var(--space-2, 8px) 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    .product-info-overlay .btn-3d {
        width: 100% !important;
        justify-content: center !important;
        margin-top: auto !important;
    }
    
    /* Override inline styles with highest specificity */
    .product-card-3d[style] .product-info-overlay[style] h3[style] {
        color: #111827 !important;
        text-shadow: none !important;
    }
    
    .product-card-3d[style] .product-info-overlay[style] .price-info[style] div[style] {
        color: #dc2626 !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .product-card-3d[style] .product-info-overlay[style] button[style] {
        background: #2563eb !important;
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
        backdrop-filter: none !important;
    }
    
    /* Force category text visible */
    .product-card-3d .product-info-overlay p {
        color: #6b7280 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
    }
    
    /* Force quantity info in general to be small and gray */
    .product-card-3d .product-info-overlay div {
        color: #6b7280 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
        font-size: var(--font-size-xs, 0.75rem) !important;
    }
    
    /* Price and button row layout */
    .product-info-overlay div[style*="display: flex"][style*="justify-content: space-between"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: var(--space-3, 12px) 0 !important;
    }
}

/* Extra small screens - Hide extra info to save space */
@media (max-width: 400px) {
    /* Hide quantity and delivery time info on very small screens */
    .product-card-3d .product-info-overlay > div:last-child {
        display: none !important;
    }
    
    /* Hide category info on very small screens */
    .product-card-3d .product-info-overlay p {
        display: none !important;
    }
    
    /* Reduce padding for more space */
    .product-info-overlay {
        padding: var(--space-3, 12px) !important;
    }
    
    /* Make price section more compact */
    .product-info-overlay .price-info {
        margin: var(--space-1, 4px) 0 !important;
        gap: var(--space-1, 4px) !important;
    }
    
    /* Reduce font sizes slightly */
    .product-info-overlay h3 {
        font-size: var(--font-size-sm, 0.875rem) !important;
        line-height: 1.3 !important;
        margin-bottom: var(--space-1, 4px) !important;
    }
    
    .product-info-overlay .price-info div {
        font-size: var(--font-size-base, 1rem) !important;
    }
}

/* ==================== CATEGORY CARDS HOVER EFFECTS ==================== */

/* Category Card 3D Hover Effects */
.category-card-3d:hover .category-info-overlay {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.category-card-3d .category-info-overlay {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
}

.category-card-3d:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 0 #444;
}

/* Category Image Background Effects */
.category-card-3d .category-image-bg {
    transition: transform 0.3s ease;
}

.category-card-3d:hover .category-image-bg {
    transform: scale(1.08);
}

/* Category Card Mobile */
@media (max-width: 768px) {
    .category-card-3d {
        height: 200px !important;
    }
    
    .category-card-3d .category-info-overlay {
        transform: translateY(60%) !important;
        opacity: 0.9 !important;
        padding: 1.5rem 1rem 1rem !important;
    }
    
    .category-card-3d:hover .category-info-overlay {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    
    .category-card-3d:hover .category-image-bg {
        transform: scale(1.05);
    }
}

/* Touch devices - Always show overlay partially */
@media (hover: none) {
    .product-info-overlay {
        transform: translateY(60%) !important;
    }
    
    .product-card-3d:hover .product-info-overlay,
    .product-card-3d:active .product-info-overlay {
        transform: translateY(0) !important;
    }
    
    .category-info-overlay {
        transform: translateY(70%) !important;
        opacity: 0.8 !important;
    }
    
    .category-card-3d:hover .category-info-overlay,
    .category-card-3d:active .category-info-overlay {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}