/* ===============================
   ROOT VARIABLES
================================ */
:root{
    --primary:#003366;
    --secondary:#ff6600;
    --accent:#28a745;
    --text-dark:#2d3436;
    --text-light:#636e72;
    --bg-light:#f4f7fa;
    --white:#ffffff;
    --shadow:0 10px 30px rgba(0,51,102,0.08);
    --border-color:#e1e8ef;
}

/* ===============================
   GLOBAL
================================ */
body{
    font-family:'Poppins',sans-serif;
    background:var(--bg-light);
    color:var(--text-dark);
    margin:0;
    overflow-x:hidden;
}

/* ===============================
   HERO SECTION
================================ */
.search-hero{
    background:linear-gradient(135deg,var(--primary) 0%,#001f40 100%);
    padding:60px 20px 100px;
    text-align:center;
    color:#fff;
}

.search-wrapper{
    position:relative;
    max-width:800px;
    margin:-50px auto 0;
    padding:0 20px;
    z-index:100;
}

.search-main{
    background:var(--white);
    padding:8px;
    border-radius:15px;
    display:flex;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
    position:relative;
}

.search-main input{
    flex:1;
    border:none;
    padding:15px 20px;
    font-size:1rem;
    outline:none;
    border-radius:10px;
}

/* ===============================
   AI SEARCH UI
================================ */
.ai-icon{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    color:var(--primary);
    z-index:2;
}

#mainSearch{
    padding-left:50px!important;
}

.mic-btn{
    background:transparent;
    border:none;
    cursor:pointer;
    padding:0 12px;
    font-size:20px;
    color:var(--secondary);
}

.mic-pulse{
    color:#ff4757!important;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.2)}
    100%{transform:scale(1)}
}

.ai-bubble{
    position:absolute;
    top:-65px;
    left:10px;
    background:var(--primary);
    color:#fff;
    padding:8px 18px;
    border-radius:20px;
    font-size:0.8rem;
    display:none;
    z-index:1000;
}

/* ===============================
   MAIN LAYOUT
================================ */
.main-layout{
    max-width:1400px;
    margin:40px auto;
    display:grid;
    grid-template-columns:320px 1fr;
    gap:30px;
    padding:0 20px;
}

/* ===============================
   FILTER SIDEBAR
================================ */
.filter-sidebar{
    background:var(--white);
    padding:25px;
    border-radius:20px;
    height:fit-content;
    box-shadow:var(--shadow);
    border:1px solid var(--border-color);
}

.filter-section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px solid #f0f4f8;
}

.filter-section-title i{
    color:var(--secondary);
    font-size:1rem;
}

.filter-section-title h5{
    margin:0;
    font-size:0.9rem;
    color:var(--primary);
    text-transform:uppercase;
    font-weight:700;
}

.filter-group{
    margin-bottom:25px;
}

.filter-option{
    display:flex;
    align-items:center;
    padding:6px 0;
    font-size:0.9rem;
    color:var(--text-light);
    cursor:pointer;
}

.filter-option input{
    margin-right:12px;
    width:16px;
    height:16px;
    accent-color:var(--secondary);
}


/* ===============================
   APPLY FILTER BUTTON
================================ */
.apply-btn{
    width:100%;
    background:var(--primary);
    color:#fff;
    border:none;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}


/* ===============================
   RESULTS GRID
================================ */
.results-container {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:25px;
}

/* ===============================
   SHARED CARD PROPERTIES
================================ */
.list-card {
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    transition:all 0.3s ease;
    display:flex;
    flex-direction:column;
    position:relative;
    height: 420px; /* Fixed height for uniformity */
}

.list-card:hover {
    transform:translateY(-6px);
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

/* ===============================
   TYPE 1: PROFILE CARD (Circular)
================================ */
.profile-card .card-poster{
    height:80px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    position:relative;
}

/* Badge position like business card */
.profile-card .card-poster .badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:10;
}

/* Avatar */
.card-profile-image{
    width:90px;
    height:90px;
    position:absolute;
    bottom:-45px;
}

.card-profile-image img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

/* Remove old badge style from avatar */
.card-profile-image .badge{
    display:none;
}

.profile-card .card-info{
    padding-top:60px;
    text-align:center;
}

/* Role colors */
.profile-card.investor .card-poster{ background:#e0f2fe; }
.profile-card.job_seeker .card-poster{ background:#dcfce7; }
.profile-card.ca .card-poster{ background:#ffedd5; }
.profile-card.mentor .card-poster{ background:#ede9fe; }

/* ===============================
   TYPE 2: BUSINESS CARD (Cover + Logo)
================================ */
.business-card .card-cover {
    height:130px;
    position:relative;
    overflow:hidden;
    z-index:1;
}

.business-card .card-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.biz-logo {
    width:75px;
    height:75px;
    border-radius:12px;
    overflow:hidden;
    border:3px solid #fff;
    margin:-40px auto 10px; /* Overlaps cover */
    background:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,0.1);
    position:relative;
    z-index:5;
}

.biz-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-initials {
    width: 80px;
    height: 80px;
    background-color: #001f3f; /* navy blue */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
}

.biz-logo img {
    width:100%;
    height:100%;
    object-fit:contain;
    padding: 5px;
}

/* Badge for Business/Bank */
.business-card .card-cover .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

/* ===============================
   BADGE STYLES
================================ */
.badge {
    padding:6px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
    color:#fff;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.badge.job_creator, .badge.business { background:#ff6600; }
.badge.startup { background:#000000; }
.badge.member { background:#2563eb; }
.badge.mentor { background:#059669; }
.badge.investor { background:#7c3aed; }
.badge.ca { background:#f59e0b; }
.badge.bank { background:#0dcaf0; }

/* ===============================
   CARD INFO & BUTTONS
================================ */
.card-info {
    padding:18px;
    flex: 1;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.card-info h4 {
    font-size:17px;
    font-weight:700;
    color:#1e293b;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.card-info p {
    font-size:13.5px;
    color:#64748b;
    margin:0;
    display:flex;
    align-items:center;
    gap:6px;
}

.card-footer {
    margin-top: auto;
    padding: 18px;
    display:flex;
    gap:10px;
    border-top: 1px solid #f1f5f9;
}

.btn-view, .btn-apply {
    flex:1;
    border:none;
    padding:10px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.25s ease;
}

.btn-view { background:#f1f5f9; color:#1e293b; }
.btn-view:hover { background:#e2e8f0; }

.btn-apply { background:#001f3f; color:#fff; }
.btn-apply:hover { background:#003366; }

/* ===============================
   RESPONSIVE DESIGN
================================ */
@media (max-width:62rem) { /* 992px */
    .main-layout { grid-template-columns:1fr; }
}

@media (max-width:37.5rem) { /* 600px */

    .results-container { 
        grid-template-columns:1fr 1fr; 
        gap:0.75rem; 
    }
    
    .list-card { 
        height:21rem; 
    }

    .profile-card .card-poster { 
        height:6.8rem; 
    }

    .card-profile-image { 
        width:4.5rem; 
        height:4.5rem; 
    }

    .business-card .card-cover { 
        height:5.6rem; 
    }

    .biz-logo { 
        width:3.5rem; 
        height:3.5rem; 
        margin-top:-1.8rem; 
    }

    .card-info { 
        padding:0.65rem; 
    }

    .card-info h4 { 
        font-size:0.95rem; 
    }

    .card-info p { 
        font-size:0.85rem; 
    }

    .card-footer { 
        padding:0.65rem; 
        flex-direction:column; 
        gap:0.4rem; 
    }

    .btn-view,
    .btn-apply { 
        padding:0.5rem; 
        font-size:0.8rem; 
    }
}

/* ===============================
   INDUSTRY DROPDOWN
================================ */

.industry-dropdown{
    margin-bottom:0.5rem;
}

.industry-toggle{
    width:100%;
    background:#f7f7f7;
    border:0.0625rem solid #ddd;
    border-radius:0.375rem;
    padding:0.65rem;
    text-align:left;
    font-weight:600;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.9rem;
}

.industry-dropdown-content{
    display:none;
    padding:0.5rem 0.65rem;
    border:0.0625rem solid #eee;
    border-top:none;
    background:#fafafa;
}

.industry-dropdown-content label{
    display:block;
    font-size:0.9rem;
    margin-bottom:0.3rem;
}

.page-btn.active{
    background:var(--primary);
    color:#fff;
}

/* ===============================
   TABLET RESPONSIVE
================================ */

@media (max-width:62rem){ /* 992px */

.main-layout{
grid-template-columns:1fr;
gap:1.25rem;
}

.filter-sidebar{
padding:1.25rem;
}

}

/* ===============================
   MOBILE CARDS
================================ */

@media (max-width:37.5rem){ /* 600px */

.results-container{
grid-template-columns:1fr 1fr;
gap:0.75rem;
}

.list-card{
height:18rem;
}

.card-poster{
height:7.5rem;
}

.card-info{
padding:0.65rem;
}

.card-info h4{
font-size:0.95rem;
white-space:normal;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
}

.card-info p{
font-size:0.85rem;
height:2rem;
margin-bottom:0.5rem;
}

.card-footer{
flex-direction:column;
gap:0.3rem;
}

.btn-view,
.btn-apply{
padding:0.45rem;
font-size:0.8rem;
width:100%;
}

.business-card .card-cover{
height:5.6rem;
}

.biz-logo{
width:3.5rem;
height:3.5rem;
margin-top:-1.8rem;
}

}

/* ===============================
   MOBILE FILTER
================================ */

.mobile-filter-header{
display:none;
justify-content:space-between;
align-items:center;
margin-bottom:0.95rem;
}

.mobile-filter-btn{
display:none;
background:var(--primary);
color:#fff;
border:none;
width:2.4rem;
height:2.4rem;
border-radius:0.5rem;
cursor:pointer;
align-items:center;
justify-content:center;
box-shadow:0 0.25rem 0.65rem rgba(0,0,0,0.1);
}

.mobile-filter-btn i{
font-size:1rem;
}

.filter-content{
display:block;
}

@media (max-width:48rem){ /* 768px */

.mobile-filter-header{
display:flex;
}

.mobile-filter-btn{
display:flex;
}

.filter-content{
display:none;
}

.filter-content.active{
display:block;
animation:fadeIn 0.3s ease;
}

}

@keyframes fadeIn{
from{opacity:0;transform:translateY(-0.3rem);}
to{opacity:1;transform:translateY(0);}
}