/* File: public/css/components/featured-account-card.css */
/* These are the dedicated styles for the "pro" featured card on the banking hub. */


    .featured-title-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 0 1rem;
        text-align: center;
    }
    .featured-product-title {
        font-size: 1.1rem;
        color: #212529;
        margin-bottom: 0.1rem !important; /* Override Bootstrap margin */
    }

    /* --- Base Card & Image Layout (Your Preferred Design) --- */
    .featured-card {
        border-radius: 12px;
        border: 1px solid #e9ecef;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .featured-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    .featured-card-image-container {
        position: relative;
        height: 80px; /* Reduced height, no product image */
    }
    .featured-card .placeholder-bg {
        width: 100%;
        height: 100%;
        background-color: #f8f9fa; /* The top grey area */
        border-radius: 11px 11px 0 0;
    }

    /*
    .featured-card .provider-logo-overlay {
        position: absolute;
        bottom: -18px; 
        left: 50%;
        transform: translateX(-50%);
        
        
        height: 36px;   
        width: auto;
        max-width: 90px; 
        object-fit: contain;

        
        background-color: transparent;
        border: none;
        padding: 0;
        
        
        filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.16)); 
    }   
    */ 


    /* logo without container box 
    .featured-card .provider-logo-overlay {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        height: 40px;
        width: auto;
        max-width: 110px;
        object-fit: contain;

        
        background-color: transparent;
        border: none;
        padding: 0;
        box-shadow: none; 

        
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
    }
    */

    .featured-card .provider-logo-overlay {
        position: absolute;
        bottom: -20px; 
        left: 50%;
        transform: translateX(-50%);
        height: 40px;   
        width: auto;    
        max-width: 110px; 
        object-fit: contain;
        background-color: #fff;
        border-radius: 8px;
        padding: 5px 10px;  
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
        border: 1px solid #e9ecef;
    } 


    .featured-card .featured-badge {
        position: absolute;
        top: 12px;         /* Position from the top */
        right: 15px;        /* Position on the right corner */
        background-color: transparent; /* Remove the background box */
        color: #6c757d;     /* A subtle, muted grey color */
        padding: 0;         /* Remove padding */
        font-size: 0.75rem; /* Small font size */
        font-weight: 500;   /* Make it less bold */
        text-transform: lowercase; /* Force the text to be lowercase */
        border-radius: 0;   /* Ensure no rounded corners are inherited */
    }

    /*
    .featured-card .featured-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 0.2rem 0.5rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
    }
    */




    .featured-card .card-body {
        padding-top: 35px; /* Creates space for the overlaid logo */
    }

    /* --- Styling for New Data-Rich Sections --- */
    .featured-card .key-data {
        font-size: 0.85rem;
        text-align: center;
    }
    .featured-card .promo-section,
    .featured-card .features-section {
        border-top: 1px solid #f1f3f5;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }
    .featured-card .promo-item,
    .featured-card .features-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        margin-bottom: 0.3rem;
        font-size: 0.8rem;
        color: #495057;
    }
    .featured-card .promo-item::before,
    .featured-card .features-list li::before {
        content: '•';
        color: #0d6efd;
        font-weight: bold;
        line-height: 1.4;
    }
    .featured-card .features-title {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }
    .featured-card .features-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }