/* --- GLOBAL SETTINGS --- */

    body {

        font-family: 'Open Sans', sans-serif;

        background-color: #f8fafc;

        margin: 0; padding: 0; color: #334155; overflow-x: hidden;

    }

   

    h1, h2, h3 { font-family: 'Roboto', sans-serif; }

    a { text-decoration: none; }

    button, input, select, a { -webkit-tap-highlight-color: transparent; }



    /* --- HERO SECTION --- */

    #business-hero {

        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

        padding: 80px 20px 100px;

        text-align: center;

        color: white;

    }

    #business-hero h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 15px; color: #ffffff; }

    #business-hero p { font-size: 1.1rem; color: #cbd5e1; margin-bottom: 40px; }



    /* --- UNIFIED SEARCH BAR (DESKTOP) --- */

    .unified-search-bar {

        background: white; max-width: 900px; margin: 0 auto 30px;

        border-radius: 50px; display: flex; align-items: center;

        padding: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.25); border: 1px solid #334155;

    }

    .search-group { display: flex; align-items: center; padding: 0 20px; position: relative; height: 45px; flex: 1; }

    .grow-2 { flex: 2; }

    .border-left { border-left: 1px solid #e2e8f0; }

    .search-group i { color: #2563eb; font-size: 1.1rem; margin-right: 12px; }

    .unified-search-bar input, .unified-search-bar select { border: none; outline: none; font-size: 1rem; color: #334155; width: 100%; background: transparent; font-weight: 500; cursor: pointer; }

    .unified-search-bar button { background: #2563eb; color: white; border: none; padding: 14px 40px; border-radius: 40px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.2s; margin-left: auto; }

    .unified-search-bar button:hover { background: #1d4ed8; }



    /* --- HERO TAGS --- */

    .hero-tags span { color: #94a3b8; margin-right: 10px; font-size: 0.9rem; }

    .hero-tags .tag { background: transparent; border: 1px solid #475569; color: #e2e8f0; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; margin: 0 4px; cursor: pointer; transition: all 0.2s; }

    .hero-tags .tag:hover { border-color: white; color: white; background: rgba(255,255,255,0.1); }

    .btn-marketplace-hero { display: inline-block; color: #94a3b8; text-decoration: none; font-size: 0.9rem; border-bottom: 1px dotted #94a3b8; padding-bottom: 2px; transition: color 0.2s; }

    .btn-marketplace-hero:hover { color: #fff; border-bottom-color: #fff; }



    /* --- DIRECTORY SECTION --- */

    .section-padding { padding: 50px 5%; max-width: 1200px; margin: 0 auto; }

    .section-header { margin-bottom: 30px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }

    .section-header h2 { color: #1e293b; font-size: 1.6rem; margin: 0; }



    /* --- BUSINESS GRID (FIXED DESKTOP) --- */

    .business-grid {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

        gap: 25px;

        align-items: start; /* Ensures cards don't stretch unnecessarily */

    }



    /* --- BUSINESS CARD --- */

    .business-card {

        background: white; border: 1px solid #e2e8f0; border-radius: 12px;

        padding: 25px; position: relative; transition: transform 0.2s, box-shadow 0.2s;

        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

        display: flex; flex-direction: column;

    }

    .business-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1); border-color: #bfdbfe; }

   

    /* --- LOGO UPDATE: INCREASED SIZE --- */

    .biz-logo {

        height: 120px; /* Increased from 80px */

        display: flex;

        align-items: center;

        justify-content: flex-start; /* Aligns logo to the left */

        margin-bottom: 15px;

    }

    .biz-logo img {

        max-height: 100px; /* Increased from 70px */

        width: auto;

        max-width: 100%;

        display: block;

    }



    .biz-info { display: flex; flex-direction: column; }



    .business-card h3 { font-size: 1.25rem; margin-bottom: 5px; color: #1e293b; font-weight: 700; margin-top: 0; }

   

    /* DESKTOP: Normal inline text */

    .business-card .biz-cat { color: #64748b; font-size: 0.85rem; margin-bottom: 12px; display: block; }

    .biz-cat .biz-divider { margin: 0 5px; color: #cbd5e1; }

    .biz-cat .biz-loc { color: #64748b; }



    .business-card .biz-desc {

        color: #475569; font-size: 0.95rem; line-height: 1.5; margin-bottom: 10px;

        display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

    }

   

    /* Actions (Buttons) */

    .biz-actions { margin-top: 15px; display: flex; gap: 10px; }



    /* 1. Base Badge Style (Positioning & Font) */
/* Base Badge Position */
.biz-badge { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    font-size: 0.7rem; 
    padding: 4px 10px; 
    border-radius: 20px; 
    transition: all 0.3s ease; /* Smooth transition */
}

/* --- PRO PACKAGE (Original Gold) --- */
/* Use commas to apply the style to any of these three types */
.business-card.featured-pro, 
.business-card.featured-premium, 
.business-card.featured-basic { 
    border: 1px solid #fbbf24; 
    transition: all 0.3s ease;
    position: relative; /* Ensures badge stays inside the card */
}

/* Apply the gold badge style to all three types */
.business-card.featured-pro .biz-badge,
.business-card.featured-premium .biz-badge,
.business-card.featured-basic .biz-badge { 
    background: #fffbeb; 
    color: #92400e; 
    border: 1px solid #fcd34d; 
}

/* --- HOVER EFFECT (Works for all packages) --- */
.business-card.featured-pro:hover,
.business-card.featured-premium:hover,
.business-card.featured-basic:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.business-card.featured-pro:hover .biz-badge,
.business-card.featured-premium:hover .biz-badge,
.business-card.featured-basic:hover .biz-badge {
    background: #eff6ff; 
    color: #2563eb; 
    border: 1px solid #bfdbfe;
}


/* 4. Remove the old .featured-gold rule to prevent conflicts */



    /* This targets the 'Get Found • Get Customers' text */
.call-to-action-card .biz-cat {
    color: #1e3a8a !important; /* Matches your navy h3 for a clean, high-contrast look */
    font-weight: 600; 
}

/* Ensure the button text is also highly legible */
.btn-biz-join {
    background-color: #1e3a8a; /* Dark blue background */
    color: #ffffff; /* Pure white text */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

    .biz-logo-placeholder { font-size: 50px; color: #3b82f6; margin-bottom: 15px; display: block; margin: 0 auto 15px; }



    .btn-biz-view { flex: 1; text-align: center; background: #f1f5f9; color: #334155; padding: 10px; border-radius: 6px; font-weight: 600; transition: 0.2s; }

    .btn-biz-view:hover { background: #2563eb; color: white; }

    .btn-biz-chat { background: #22c55e; color: white; padding: 10px 15px; border-radius: 6px; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }

    .btn-biz-chat:hover { background: #16a34a; transform: scale(1.05); }

    .btn-biz-join { display: block; width: 100%; text-align: center; background: #2563eb; color: white; padding: 10px; border-radius: 6px; font-weight: 700; }



    .marketplace-banner { background-color: #fff; padding: 40px 20px; text-align: center; border-top: 1px solid #e2e8f0; margin-top: 60px; }

    .btn-marketplace-secondary { display: inline-block; border: 2px solid #334155; color: #334155; padding: 10px 24px; border-radius: 30px; font-weight: 600; transition: all 0.2s; }
    
    /* This hides the label from the eyes but keeps it for the screen reader/Google */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Ensure the filter container aligns everything to the center */
.filter-item {
    display: flex;
    align-items: center; /* This is the key for vertical alignment */
    gap: 8px;
}



    /* =========================================

       MOBILE RESPONSIVENESS (Max 768px)

       ========================================= */

    @media (max-width: 768px) {

        #business-hero { padding: 40px 15px 50px; }

        #business-hero h1 { font-size: 1.8rem; }

       

        .unified-search-bar { flex-direction: column; border-radius: 16px; padding: 15px; gap: 0; align-items: stretch; height: auto; }

        .search-group { width: 100%; border-left: none; border-bottom: 1px solid #f1f5f9; padding: 12px 5px; height: auto; }

        .search-group:nth-last-of-type(2) { border-bottom: none; }

        .unified-search-bar button { width: 100%; margin-left: 0; margin-top: 5px; border-radius: 12px; padding: 15px; }

        .hero-tags { display: none; }



        /* GRID: Force 2 Columns */

        .business-grid { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; } /* Mobile can stretch for neatness */



        .business-card { padding: 12px; height: 100%; }

       

        /* Keep Mobile Logos slightly smaller to fit 2-column grid */

        .biz-logo { height: 70px; margin-bottom: 8px; justify-content: center; }

        .biz-logo img { max-height: 65px; }

       

        .business-card h3 { font-size: 0.95rem; text-align: center; margin-bottom: 2px; }

       

        .business-card .biz-cat {
    display: flex;
    flex-direction: column; /* Stacks the children vertically */
    align-items: center;    /* Centers the items horizontally */
    text-align: center;     /* Ensures text alignment follows suit */
    font-size: 0.75rem; 
    margin-bottom: 5px;
}

/* Hide the divider since items are now on separate lines */
.biz-cat .biz-divider { 
    display: none; 
}

/* Style the location (Nairobi) specifically */
.biz-cat .biz-loc {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
}

       

        .business-card .biz-desc { display: none; }



        .biz-actions { gap: 5px; margin-top: auto; }

        .btn-biz-view { padding: 8px 4px; font-size: 0.8rem; }

        .btn-biz-chat { padding: 8px 10px; font-size: 1rem; }

        .biz-badge { font-size: 0.6rem; padding: 2px 6px; top: 8px; right: 8px; }

    }



    /* 2. MICRO PHONES (Max 360px) -> 1 COLUMN */

    @media (max-width: 360px) {

        .business-grid { grid-template-columns: 1fr; }

        .business-card .biz-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: block; text-align: center; }

    }