/* ==========================================================
   TEMI PROPERTY AGENT CARD
========================================================== */

.temi-agent-card{
    background:#00173C;
    border-radius:16px;
    padding:25px;
    color:#ffffff;
    font-family:'Figtree',sans-serif;
}




/* ===========================
   HEADER
=========================== */

.temi-agent-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
}

.temi-agent-avatar{
    flex-shrink:0;
}

.temi-agent-avatar img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #E8B838;
}

.temi-agent-info{
    flex:1;
    min-width:0;
}

.temi-agent-name-row{
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}
.temi-agent-name{
    margin:0;
    font-family:'Figtree',sans-serif;
    font-size:16px;
    font-weight:400;
    color:#ffffff;
    line-height:1.4;
}

.temi-agent-position{
    margin-top:4px;
    font-family:'Figtree',sans-serif;
    font-size:14px;
    color:#FFFFFFB8;
    line-height:1.5;
}

.temi-agent-position span{
    color:#FFFFFFB8;
}

/* ===========================
   VERIFIED BADGE
=========================== */

.temi-agent-verified{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:#FEF6E4;
    color:#E8B838;
    padding:0px 7px;
    border-radius:50px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    font-family:'Figtree',sans-serif;
}

.temi-agent-verified i{
    color:#E8B838;
}

/* ===========================
   CONTACT ROWS
=========================== */

.temi-agent-row{
    display:grid;
    grid-template-columns:110px 1fr;
    align-items:center;
    padding:14px 0;
    border-top:1px solid #5A6474D9;
}

.temi-agent-row span{
    color:#ffffff;
    font-size:15px;
    font-weight:500;
    font-family:'Figtree',sans-serif;
}

.temi-agent-row a{
    justify-self:end;
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
    font-weight:400;
    font-family:'Figtree',sans-serif;
    transition:.3s;
}

.temi-agent-row a:hover{
    color:#E8B838;
}

/* ===========================
   WHATSAPP
=========================== */

.temi-agent-whatsapp{
    align-items:center;
}

.temi-whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:7px 13px;

    background:#25D366;
    border:2px solid transparent;

    color:#ffffff !important;

    text-decoration:none;

    border-radius:50px;

    font-family:'Figtree',sans-serif;

    font-size:13px;
    font-weight:600;

    transition:
        background .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        transform .25s ease;
}

/* Glass Hover */

.temi-whatsapp-btn:hover{

    background:rgba(37,211,102,.18);

    border-color:#25D366;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    color:#ffffff !important;

    transform:translateY(-2px);

    box-shadow:0 8px 24px rgba(37,211,102,.20);

}

/* WhatsApp Icon */

.temi-whatsapp-btn i{

    font-size:16px;

}

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

@media(max-width:767px){

    .temi-agent-card{

        padding:22px;

    }

    .temi-agent-header{

        align-items:flex-start;

    }

    .temi-agent-avatar img{

        width:60px;
        height:60px;

    }

    .temi-agent-name{

        font-size:15px;

    }

    .temi-agent-position{

        font-size:13px;

    }

    .temi-agent-row{

        grid-template-columns:90px 1fr;

        gap:10px;

    }

    .temi-agent-row span{

        font-size:13px;

    }

    .temi-agent-row a{

        font-size:13px;

        word-break:break-word;

    }

    .temi-whatsapp-btn{

        width:100%;

        justify-content:center;

        margin-top:5px;

    }

}

@media(max-width:480px){

    .temi-agent-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .temi-agent-name-row{

        flex-wrap:wrap;

    }

    .temi-agent-row{

        grid-template-columns:1fr;

    }

    .temi-agent-row a{

        justify-self:start;

        margin-top:6px;

    }

}