/* Product Logo Placeholders for Coming Soon Products */

.product-placeholder {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
}

.product-placeholder-text {
    font-weight: 600;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    z-index: 10;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.product-placeholder-finance {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
}

.product-placeholder-health {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
}

.product-placeholder-retail {
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
}

.product-placeholder-cms {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
}

.product-placeholder-analytics {
    background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

/* Product logo display enhancement */
.product-logo {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.product-logo:hover {
    transform: scale(1.05);
}

/* Status badge styles */
.status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-available {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.status-coming-soon {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.status-in-development {
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}