/* =========================
   GLOBAL RESET
========================= */
body{
    margin:0;
    padding:0;
    font-family:Arial,sans-serif;
}

/* =========================
   TOP NAVBAR
========================= */
.main-navbar{
    background:#fff;
    padding:8px 0;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.main-navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* =========================
   LOGO
========================= */
.navbar-brand{
    display:flex;
    align-items:center;
}

.navbar-brand img{
    height:42px;
    object-fit:contain;
}

/* =========================
   SEARCH
========================= */
.search-box{
    flex:1;
    max-width:300px;
    display:flex;
    align-items:center;
    position:relative;
    margin:0 20px;
}

.search-input{
    width:100%;
    height:44px;
    border-radius:25px;
    border:1px solid #ddd;
    padding:0 45px 0 15px;
    font-size:14px;
}

.search-input:focus{
    outline:none;
    border-color:#1877f2;
    box-shadow:0 0 0 2px rgba(24,119,242,0.15);
}

.search-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:#1877f2;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   NAV MENU
========================= */
.navbar-nav{
    display:flex;
    align-items:center;
    gap:10px;
}

.nav-link{
    color:#333 !important;
    font-weight:500;
}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu{
    min-width:280px;
    border:none;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    border-radius:10px;
    padding:10px 0;
}

.dropdown-item{
    padding:10px 15px;
    font-size:14px;
}

.dropdown-item:hover{
    background:#f5f5f5;
}

.dropdown-menu-end{
    right:0 !important;
    left:auto !important;
}

























/* =====================================================
   MOBILE BOTTOM NAV
===================================================== */



/* =====================================================
   MOBILE BOTTOM NAV
===================================================== */

.mobile-bottom-nav {
    display: none;
}




.mobile-home-logo {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
}
@media (max-width: 767px) {


    /* =================================================
       MAIN BOTTOM NAV
    ================================================== */

    .mobile-bottom-nav {

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 65px;

        background: #ffffff;

        border-top: 1px solid #dddddd;

        display: flex;

        align-items: center;

        justify-content: space-around;

        z-index: 99999;

        box-shadow:
            0 -3px 15px rgba(0, 0, 0, 0.10);

        padding: 4px;

        box-sizing: border-box;

    }


    /* =================================================
       NORMAL ITEM
    ================================================== */

    .mobile-bottom-nav .mb-item {

        position: relative;

        flex: 1;

        height: 57px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        text-decoration: none !important;

        color: #555555;

        border: none;

        background: transparent;

        padding: 0;

        margin: 0;

    }


    .mobile-bottom-nav .mb-item > i {

        font-size: 21px;

        line-height: 1;

    }


    .mobile-bottom-nav .mb-item small {

        font-size: 10px;

        line-height: 1;

        color: #555555;

        white-space: nowrap;

    }


    .mobile-bottom-nav .mb-item:hover {

        color: #72b70f;

    }


    .mobile-bottom-nav .mb-item:hover small {

        color: #72b70f;

    }


    /* =================================================
       NOTIFICATION / MESSAGE BUTTON
    ================================================== */

    .mobile-nav-button {

        position: relative;

        width: 100%;
        height: 57px;

        border: none;

        background: transparent;

        padding: 0;
        margin: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        color: #555555;

        cursor: pointer;

    }


    .mobile-nav-button small {

        font-size: 10px;

        line-height: 1;

        color: #555555;

    }


    .mobile-nav-button:hover,
    .mobile-nav-button:focus {

        color: #72b70f;

        outline: none;

        box-shadow: none;

    }


    .mobile-nav-button:hover small {

        color: #72b70f;

    }


    /* =================================================
       ICON WRAPPER
    ================================================== */

    .mobile-nav-icon-wrapper {

        position: relative;

        width: 25px;
        height: 25px;

        display: flex;

        align-items: center;
        justify-content: center;

    }


    .mobile-nav-icon-wrapper i {

        font-size: 21px;

        line-height: 1;

    }


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

    .mobile-nav-badge {

        position: absolute;

        top: -6px;
        right: -9px;

        min-width: 16px;
        height: 16px;

        padding: 0 4px;

        display: flex;

        align-items: center;
        justify-content: center;

        background: #dc3545;

        color: #ffffff;

        border-radius: 20px;

        font-size: 9px;

        font-weight: 700;

        line-height: 1;

        border: 1px solid #ffffff;

        z-index: 10;

    }


    /* =================================================
       POPUP WRAPPER
    ================================================== */

    .mobile-popup-wrapper {

        position: relative;

    }


    /* =================================================
       NOTIFICATION / MESSAGE POPUP
    ================================================== */

    .mobile-bottom-popup {

        position: fixed;

        left: 10px;
        right: 10px;

        bottom: 73px;

        width: auto;

        max-height: 60vh;

        background: #ffffff;

        border: 1px solid #dddddd;

        border-radius: 12px;

        box-shadow:
            0 8px 30px rgba(0, 0, 0, 0.18);

        overflow: hidden;

        z-index: 100000;

        display: none;

    }


    .mobile-bottom-popup.show {

        display: block;

    }


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

    .mobile-popup-header {

        height: 48px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0 15px;

        border-bottom: 1px solid #eeeeee;

        background: #ffffff;

    }


    .mobile-popup-header strong {

        font-size: 15px;

        color: #333333;

    }


    .mobile-popup-close {

        width: 30px;
        height: 30px;

        border: none;

        background: transparent;

        color: #777777;

        font-size: 24px;

        line-height: 1;

        cursor: pointer;

        padding: 0;

    }


    .mobile-popup-close:hover {

        color: #dc3545;

    }


    /* =================================================
       POPUP LIST
    ================================================== */

    .mobile-popup-list {

        max-height: calc(60vh - 48px);

        overflow-y: auto;

        background: #ffffff;

    }


    /* =================================================
       NOTIFICATION ITEM
    ================================================== */

    .mobile-notification-item {

        display: block;

        padding: 12px 15px;

        border-bottom: 1px solid #eeeeee;

        text-decoration: none !important;

        color: #333333;

        background: #ffffff;

    }


    .mobile-notification-item:hover {

        background: #f7f7f7;

        color: #333333;

    }


    .mobile-notification-item strong {

        display: block;

        font-size: 13px;

        margin-bottom: 3px;

    }


    .mobile-notification-item small {

        display: block;

        font-size: 12px;

        line-height: 1.5;

        color: #777777;

    }


    /* =================================================
       MESSAGE ITEM
    ================================================== */

    .mobile-message-item {

        position: relative;

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 10px 12px;

        border-bottom: 1px solid #eeeeee;

        text-decoration: none !important;

        color: #333333;

        background: #ffffff;

    }


    .mobile-message-item:hover {

        background: #f7f7f7;

        color: #333333;

    }


    .mobile-message-icon img {

        width: 45px;
        height: 45px;

        border-radius: 8px;

        object-fit: cover;

    }


    .mobile-message-content {

        min-width: 0;

        flex: 1;

        display: flex;

        flex-direction: column;

    }


    .mobile-message-content strong {

        font-size: 13px;

        color: #333333;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    .mobile-message-content span {

        font-size: 12px;

        color: #555555;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    .mobile-message-content small {

        font-size: 11px;

        color: #888888;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    .mobile-message-count {

        min-width: 19px;

        height: 19px;

        padding: 0 5px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: #dc3545;

        color: #ffffff;

        border-radius: 20px;

        font-size: 9px;

        font-weight: bold;

    }


    /* =================================================
       EMPTY POPUP
    ================================================== */

    .mobile-popup-empty {

        min-height: 100px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 6px;

        color: #888888;

        font-size: 13px;

    }


    .mobile-popup-empty i {

        font-size: 25px;

        color: #aaaaaa;

    }


    /* =================================================
       SEE ALL
    ================================================== */

    .mobile-popup-see-all {

        display: block;

        padding: 12px;

        text-align: center;

        background: #fafafa;

        border-top: 1px solid #eeeeee;

        color: #72b70f !important;

        font-size: 13px;

        font-weight: 600;

        text-decoration: none !important;

    }


    .mobile-popup-see-all:hover {

        color: #198754 !important;

        background: #f5f5f5;

    }


    /* =================================================
       MOBILE PROFILE BUTTON
    ================================================== */

    .mobile-profile-wrapper {

        position: relative;

    }


    .mobile-profile-button {

        position: relative;

        width: 100%;

        height: 57px;

        border: none;

        background: transparent;

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        color: #555555;

        cursor: pointer;

    }


    .mobile-profile-button small {

        font-size: 10px;

        line-height: 1;

        color: #555555;

    }


    .mobile-profile-button:hover,
    .mobile-profile-button:focus,
    .mobile-profile-button.active {

        color: #72b70f;

        outline: none;

        box-shadow: none;

    }


    .mobile-profile-button.active small {

        color: #72b70f;

    }


    /* =================================================
       PROFILE IMAGE
    ================================================== */

    .mobile-profile-img {

        width: 25px;

        height: 25px;

        border-radius: 50%;

        object-fit: cover;

        border: 1px solid #dddddd;

    }


    /* =================================================
       PROFILE ARROW
    ================================================== */

    .mobile-profile-arrow {

        position: absolute;

        top: 5px;

        right: 18px;

        font-size: 8px;

        transition: 0.2s;

    }


    .mobile-profile-button.active
    .mobile-profile-arrow {

        transform: rotate(180deg);

    }


    /* =================================================
       PROFILE DROPDOWN
    ================================================== */

    .mobile-profile-dropdown {

        position: fixed;

        left: 10px;
        right: 10px;

        bottom: 73px;

        max-height: 70vh;

        background: #ffffff;

        border: 1px solid #dddddd;

        border-radius: 12px;

        box-shadow:
            0 8px 30px rgba(0, 0, 0, 0.18);

        overflow: hidden;

        z-index: 100001;

        display: none;

    }


    .mobile-profile-dropdown.show {

        display: block;

    }


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

    .mobile-profile-header {

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 15px;

        border-bottom: 1px solid #eeeeee;

        background: #ffffff;

    }


    .mobile-profile-large-img {

        width: 48px;

        height: 48px;

        border-radius: 50%;

        object-fit: cover;

        border: 1px solid #dddddd;

    }


    .mobile-profile-header > div {

        min-width: 0;

        display: flex;

        flex-direction: column;

    }


    .mobile-profile-header strong {

        font-size: 14px;

        color: #333333;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    .mobile-profile-header small {

        margin-top: 3px;

        font-size: 11px;

        color: #888888;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    /* =================================================
       PROFILE MENU
    ================================================== */

    .mobile-profile-menu {

        max-height: calc(70vh - 80px);

        overflow-y: auto;

        padding: 5px 0;

    }


    .mobile-profile-menu a,
    .mobile-profile-menu form button {

        width: 100%;

        min-height: 44px;

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 9px 16px;

        border: none;

        background: #ffffff;

        color: #444444;

        text-decoration: none !important;

        font-size: 13px;

        text-align: left;

        cursor: pointer;

        box-sizing: border-box;

    }


    .mobile-profile-menu a:hover,
    .mobile-profile-menu form button:hover {

        background: #f7f7f7;

        color: #72b70f;

    }


    .mobile-profile-menu a i,
    .mobile-profile-menu form button i {

        width: 20px;

        text-align: center;

        font-size: 17px;

    }


    .mobile-profile-menu form {

        margin: 0;

        padding: 0;

    }


    .mobile-profile-menu form button {

        color: #dc3545;

    }


    .mobile-profile-menu form button:hover {

        color: #dc3545;

        background: #fff5f5;

    }


    /* =================================================
       BODY SPACE
    ================================================== */

    body {

        padding-bottom: 65px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {


    .mobile-bottom-nav {

        height: 62px;

    }


    .mobile-bottom-nav .mb-item {

        height: 54px;

    }


    .mobile-nav-button,
    .mobile-profile-button {

        height: 54px;

    }


    .mobile-bottom-popup,
    .mobile-profile-dropdown {

        left: 7px;

        right: 7px;

        bottom: 69px;

        border-radius: 10px;

    }


    .mobile-profile-arrow {

        right: 14px;

    }


    body {

        padding-bottom: 62px;

    }

}


















@media(max-width:991px){

    .main-navbar{
        display:none !important;
    }

  
}



















/* =====================================================
   LOGIN PAGE / MAIN WRAPPER
===================================================== */

#loginpop {
    width: 100%;
    padding: 40px 15px;
    box-sizing: border-box;
}


/* =====================================================
   MAIN LOGIN BOX
===================================================== */

#loginpop .modal-dialog {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

#loginpop .modal-content {
    width: 100%;
    background: #ffffff;

    border: 1px solid #d8d8d8 !important;
    border-radius: 12px !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;

    overflow: hidden;

    box-sizing: border-box;
}


/* =====================================================
   ROW
===================================================== */

#loginpop .row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}


/* =====================================================
   LEFT LOGIN SECTION
===================================================== */

#loginpop .login {
    width: 50%;
    padding: 35px;

    background: #ffffff;

    border-right: 1px solid #dedede;

    box-sizing: border-box;
}


/* =====================================================
   RIGHT SIGNUP SECTION
===================================================== */

#loginpop .row > .col-sm-6:not(.login) {
    width: 50%;
    padding: 35px;

    background: #fafafa;

    box-sizing: border-box;
}


/* =====================================================
   HEADINGS
===================================================== */

#loginpop h4 {
    margin-top: 0;
    margin-bottom: 25px;

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

    color: #333333;
}


/* =====================================================
   PARAGRAPH
===================================================== */

#loginpop p {
    margin-top: 0;
    margin-bottom: 22px;

    font-size: 14px;
    line-height: 1.7;

    color: #666666;
}


/* =====================================================
   FORM GROUP
===================================================== */

#loginpop .form-group {
    margin-bottom: 18px;
}


/* =====================================================
   INPUT
===================================================== */

#loginpop .form-control {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border: 1px solid #d8d8d8;
    border-radius: 7px;

    background: #ffffff;

    color: #333333;

    font-size: 14px;

    outline: none;
    box-shadow: none;

    box-sizing: border-box;

    transition: all 0.25s ease;
}


/* Placeholder */

#loginpop .form-control::placeholder {
    color: #999999;
}


/* Focus */

#loginpop .form-control:focus {
    border-color: #72b70f;

    box-shadow:
        0 0 0 3px rgba(114, 183, 15, 0.12);
}


/* =====================================================
   REMEMBER CHECKBOX
===================================================== */

#loginpop .checkbox {
    margin-top: 5px;
    margin-bottom: 20px;
}

#loginpop .checkbox label {
    color: #666666;

    font-size: 14px;

    cursor: pointer;
}

#loginpop .checkbox input {
    margin-right: 5px;
}


/* =====================================================
   ALL BUTTONS
===================================================== */

#loginpop .btn {
    background: #72b70f !important;

    border: 1px solid #72b70f !important;

    color: #ffffff !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =====================================================
   ALL BUTTONS HOVER / FOCUS
===================================================== */

#loginpop .btn:hover,
#loginpop .btn:focus {
    background: #198754 !important;

    border-color: #198754 !important;

    color: #ffffff !important;

    outline: none;
}


/* =====================================================
   SIGN IN BUTTON
===================================================== */

#loginpop .login form > .btn {
    min-width: 110px;
    min-height: 44px;

    padding: 8px 20px;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 600;
}

#loginpop .login form > .btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(25, 135, 84, 0.20);
}


/* =====================================================
   JOIN NOW BUTTON
===================================================== */

#loginpop .row > .col-sm-6:not(.login) > a {
    width: 100%;

    min-height: 44px;

    padding: 10px 15px;

    margin-bottom: 12px;

    border-radius: 7px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;

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

    background: #72b70f !important;

    border: 1px solid #72b70f !important;

    color: #ffffff !important;
}

#loginpop .row > .col-sm-6:not(.login) > a:hover {
    background: #198754 !important;

    border-color: #198754 !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(25, 135, 84, 0.20);
}


/* =====================================================
   SOCIAL LOGIN WRAPPER
===================================================== */

#loginpop .logfbgoogleicon {
    width: 100%;

    padding: 0;

    margin: 0;
}


/* =====================================================
   SOCIAL BUTTONS
===================================================== */

#loginpop .logfbgoogleicon a {
    width: 100%;

    min-height: 44px;

    padding: 8px 15px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 7px;

    box-sizing: border-box;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 500;

    background: #72b70f !important;

    border: 1px solid #72b70f !important;

    color: #ffffff !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Social Hover */

#loginpop .logfbgoogleicon a:hover {
    background: #198754 !important;

    border-color: #198754 !important;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* =====================================================
   SOCIAL ICON
===================================================== */

#loginpop .logfbgoogleicon img {
    width: 20px;
    height: 20px;

    object-fit: contain;

    flex-shrink: 0;
}


/* =====================================================
   VALIDATION ERROR
===================================================== */

#loginpop .text-danger,
#loginpop .invalid-feedback {
    display: block;

    margin-top: 5px;

    font-size: 13px;

    color: #dc3545;
}


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

@media (max-width: 767px) {

    #loginpop {
        padding: 30px 15px;
    }

    #loginpop .modal-dialog {
        max-width: 650px;
    }

    #loginpop .login,
    #loginpop .row > .col-sm-6:not(.login) {
        padding: 28px;
    }

    #loginpop h4 {
        font-size: 22px;
    }

}


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

@media (max-width: 600px) {

    #loginpop {
        padding: 20px 12px;
    }


    /* Main box */

    #loginpop .modal-dialog {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;
    }


    #loginpop .modal-content {
        border: 1px solid #d8d8d8 !important;

        border-radius: 10px !important;

        overflow: hidden;
    }


    /* Row */

    #loginpop .row {
        display: block;
    }


    /* Login section */

    #loginpop .login {
        width: 100%;

        padding: 25px 20px;

        border-right: none;

        border-bottom: 1px solid #dedede;
    }


    /* Signup section */

    #loginpop .row > .col-sm-6:not(.login) {
        width: 100%;

        padding: 25px 20px;
    }


    /* Heading */

    #loginpop h4 {
        font-size: 21px;

        margin-bottom: 20px;
    }


    /* Paragraph */

    #loginpop p {
        font-size: 14px;

        line-height: 1.6;
    }


    /* Input */

    #loginpop .form-control {
        height: 45px;

        font-size: 14px;
    }


    /* Buttons */

    #loginpop .login form > .btn,
    #loginpop .row > .col-sm-6:not(.login) > a,
    #loginpop .logfbgoogleicon a {
        min-height: 44px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    #loginpop {
        padding: 15px 8px;
    }


    #loginpop .modal-content {
        border-radius: 8px !important;
    }


    #loginpop .login,
    #loginpop .row > .col-sm-6:not(.login) {
        padding: 22px 15px;
    }


    #loginpop h4 {
        font-size: 19px;

        margin-bottom: 18px;
    }


    #loginpop p {
        font-size: 13px;
    }


    #loginpop .form-control {
        height: 43px;

        font-size: 13px;
    }


    #loginpop .checkbox label {
        font-size: 13px;
    }


    #loginpop .logfbgoogleicon a {
        min-height: 43px;

        font-size: 13px;
    }

}









/* =========================================================
   REGISTER PAGE
========================================================= */

.register-page {
    min-height: calc(100vh - 100px);
    padding: 55px 15px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
}

.register-wrapper {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.register-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 35px 38px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eeeeee;
}

.register-title {
    text-align: center;
    margin-bottom: 28px;
}

.register-title h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #198754;
}

.register-title p {
    margin: 8px 0 0;
    color: #777;
    font-size: 14px;
}

/* Form group */

.register-group {
    margin-bottom: 18px;
}

.register-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.register-input {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 15px;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.register-input::placeholder {
    color: #aaa;
}

.register-input:focus {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.10);
}

/* Register button */

.register-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #198754;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 5px;
}

.register-btn:hover {
    background: #157347;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(25, 135, 84, 0.20);
}

.register-btn:active {
    transform: translateY(0);
}

/* Login text */

.login-text {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    color: #777;
}

.login-text a {
    color: #198754;
    font-weight: 600;
    text-decoration: none;
}

.login-text a:hover {
    text-decoration: underline;
}

/* Error */

.register-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 5px;
}

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

@media (max-width: 768px) {

    .register-page {
        padding: 40px 15px;
        min-height: auto;
    }

    .register-card {
        padding: 30px 25px;
    }

    .register-title h3 {
        font-size: 25px;
    }
}

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

@media (max-width: 480px) {

    .register-page {
        padding: 25px 12px;
    }

    .register-card {
        padding: 25px 18px;
        border-radius: 10px;
    }

    .register-title {
        margin-bottom: 22px;
    }

    .register-title h3 {
        font-size: 23px;
    }

    .register-title p {
        font-size: 13px;
    }

    .register-group {
        margin-bottom: 15px;
    }

    .register-input {
        height: 46px;
        font-size: 14px;
        padding: 0 13px;
    }

    .register-btn {
        height: 46px;
        font-size: 15px;
    }
}








/* =========================================================
   MESSAGE NOTIFICATION POPUP
========================================================= */

.message-notification-popup {
    width: 370px;
    max-width: calc(100vw - 20px);

    padding: 0;

    overflow: hidden;
}


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

.message-popup-header {
    padding: 14px 16px;

    border-bottom: 1px solid #eee;

    font-size: 16px;
}


/* =========================================================
   LIST
========================================================= */

.message-popup-list {
    max-height: 420px;

    overflow-y: auto;
}


/* =========================================================
   SINGLE CONVERSATION
========================================================= */

.message-notification-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px 14px;

    text-decoration: none;

    color: inherit;

    border-bottom: 1px solid #f1f1f1;

    transition: background 0.2s ease;
}


.message-notification-item:hover {
    background: #f6f6f6;

    color: inherit;
}


/* =========================================================
   PROPERTY IMAGE
========================================================= */

.message-notification-avatar {
    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #f1f1f1;

    font-size: 20px;
}


.message-notification-avatar img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================================
   CONTENT
========================================================= */

.message-notification-content {
    min-width: 0;

    flex: 1;
}


/* =========================================================
   PROPERTY TITLE
========================================================= */

.message-notification-property {
    font-size: 14px;

    font-weight: 600;

    line-height: 20px;

    margin-bottom: 2px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   USER + COUNT
========================================================= */

.message-user-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;
}


/* =========================================================
   SENDER
========================================================= */

.message-notification-sender {
    font-size: 13px;

    font-weight: 600;

    line-height: 18px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   UNREAD COUNT
========================================================= */

.message-group-count {
    min-width: 22px;

    height: 22px;

    padding: 2px 7px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #dc3545;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    flex-shrink: 0;
}


/* =========================================================
   LATEST MESSAGE
========================================================= */

.message-notification-text {
    margin-top: 2px;

    font-size: 12px;

    line-height: 18px;

    color: #777;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.message-empty {
    padding: 35px 15px;

    text-align: center;

    color: #999;

    font-size: 14px;
}


.message-empty i {
    display: block;

    margin-bottom: 8px;

    font-size: 28px;
}


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

@media (max-width: 576px) {

    .message-notification-popup {
        width: 320px;

        max-width: calc(100vw - 20px);
    }

}












/* =========================================================
   MESSAGE NOTIFICATION USER ROW
========================================================= */

.message-notification-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}


/* =========================================================
   USER NAME
========================================================= */

.message-notification-sender {
    display: block;
    min-width: 0;
    flex: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 14px;
    font-weight: 500;
}


/* =========================================================
   UNREAD COUNT
   NAME-এর একদম RIGHT SIDE
========================================================= */

.message-notification-user
.message-notification-count {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   যদি count user row-এর বাইরে থাকে
========================================================= */

.message-group-count {
    flex: 0 0 auto;
}


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

@media (max-width: 768px) {

    .message-notification-user {
        gap: 6px;
    }

    .message-notification-sender {
        font-size: 13px;
    }

    .message-notification-user
    .message-notification-count {

        min-width: 20px;
        height: 20px;

        padding: 0 5px;

        font-size: 10px;
    }
}






























.chat-footer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;

    border-top: 1px solid #e5e7eb;
    background: #fff;

    box-sizing: border-box;
}


/* =========================================================
   LEFT ACTIONS
========================================================= */

.chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;
}

.chat-btn {
    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: #f3f4f6 !important;
    color: #0d6efd !important;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 20px;
    line-height: 1;

    flex-shrink: 0;
    box-sizing: border-box;
}

.chat-btn:hover {
    background: #e9ecef !important;
    color: #0a58ca !important;
}




/* =========================================================
   INPUT WRAPPER
========================================================= */




.chat-input-wrapper {
 position: relative !important;
 flex: 1 1 auto; 
  height: auto !important; 
  box-sizing: border-box; 
  display: flex; 
  flex-direction: column; 
  border: 1px solid #ced4da;
   border-radius: 30px;
    background: #fff; 
    overflow: hidden; 

      position: relative !important;

    flex: 1 1 auto;
    min-width: 0;

    min-height: 48px;
    height: auto !important;

    box-sizing: border-box;
}

.chat-input-row { 
    position: relative !important;;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;


    }


/* =========================================================
   TEXTAREA INPUT
========================================================= */




.chat-input-row .attachment-preview {
    position: absolute !important;

    left: 12px !important;
    right: 55px !important;

    top: 4px !important;

    width: auto !important;
    max-width: calc(100% - 67px) !important;

    height: 42px !important;

    display: none;

    align-items: center;

    gap: 6px;

    padding: 0 !important;
    margin: 0 !important;

    flex-wrap: nowrap;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    z-index: 2 !important;

    background: transparent !important;

    border: none !important;
}


/* Individual attachment */

.chat-input-row .attachment-preview .attachment-item {
    position: relative !important;

    flex: 0 0 auto !important;

    max-width: 150px !important;

    min-height: 36px !important;
}


/* Textarea stays above/below correctly */

.chat-input-row .chat-input {
    position: relative !important;

    z-index: 1 !important;
}


.chat-input:focus {
    box-shadow: none !important;

    

    outline: none !important;
}
/* =========================================================
   MIC / SEND BUTTON
========================================================= */

.chat-send {
    position: absolute !important;

    top: 50% !important;
    right: 7px !important;

    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #0084ff !important;
    color: #ffffff !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer;

    z-index: 99999 !important;

    /*box-sizing: border-box;*/

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   ICON
========================================================= */

.chat-send i {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-style: normal !important;
}

.chat-send i::before {
    display: inline-block !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   MIC
========================================================= */

#voiceBtn {
    display: flex !important;

    background: #0084ff !important;
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}

#voiceBtn i,
#voiceBtn i::before {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   SEND
========================================================= */

/*
   এখানে !important ব্যবহার করছি না।
   JavaScript input অনুযায়ী display পরিবর্তন করবে।
*/

#sendBtn {
    display: none;

    background: #0084ff !important;
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}

#sendBtn i,
#sendBtn i::before {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   HOVER
========================================================= */

#voiceBtn:hover,
#sendBtn:hover {
    background: #006fda !important;
    color: #ffffff !important;
}

#voiceBtn:hover i,
#voiceBtn:hover i::before,
#sendBtn:hover i,
#sendBtn:hover i::before {
    color: #ffffff !important;
}


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

@media (max-width: 768px) {

    .chat-footer {
        gap: 6px;
        padding: 8px;
    }

    .chat-actions {
        gap: 5px;
    }

    .chat-btn {
        width: 36px;
        height: 36px;

        font-size: 17px;
    }

    .chat-input-wrapper {
       min-height: 44px;

    height: auto !important;
    }

    .chat-input {
         min-height: 44px !important;

    height: 44px !important;

    max-height: 100px !important;

    padding-left: 15px !important;
    padding-right: 52px !important;

    padding-top: 11px !important;
    padding-bottom: 11px !important;

    font-size: 14px !important;
    }

    .chat-send {
        width: 34px !important;
        height: 34px !important;

        right: 5px !important;
    }

    .chat-send i,
    .chat-send i::before {
        font-size: 16px !important;
    }


    /* Mobile focus */

    .chat-footer.focused .chat-actions {
        width: 0;

        margin: 0;

        opacity: 0;

        overflow: hidden;

        pointer-events: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .chat-input-wrapper {
        min-height: 42px;

        height: auto !important;
        margin-bottom: 20px;
    }

    .chat-input {
        min-height: 42px !important;

        height: 42px !important;

        max-height: 90px !important;
    }

    .chat-send {
        width: 32px !important;
        height: 32px !important;

        right: 5px !important;
    }
}






/* =========================
   ATTACHMENT PREVIEW
========================= */

.attachment-preview {
    display: none;
    align-items: center;
    padding: 6px 8px;
    gap: 8px;
    width: 100%;




   








}


/* =========================
   ATTACHMENT ITEM
========================= */

.attachment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;

    max-width: 280px;
    min-height: 54px;

    padding: 5px 32px 5px 5px;

    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
}


/* =========================
   IMAGE THUMBNAIL
========================= */

.attachment-thumb {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    border-radius: 6px;
    overflow: hidden;
    background: #eee;
}


.attachment-thumb img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================
   FILE ICON
========================= */

.attachment-file-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e9ecef;
    border-radius: 6px;
}


.attachment-file-icon i {
    font-size: 26px;
}


/* =========================
   FILE NAME
========================= */

.attachment-info {
    min-width: 0;
    max-width: 180px;
}


.attachment-file-name {
    display: block;

    font-size: 13px;
    color: #333;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================
   REMOVE BUTTON
========================= */

.attachment-remove {
    position: absolute;

    top: 4px;
    right: 4px;

    width: 22px;
    height: 22px;

    border: none;
    border-radius: 50%;

    background: #dc3545;
    color: #fff;

    font-size: 18px;
    line-height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    padding: 0;
}


.attachment-remove:hover {
    background: #bb2d3b;
}










/* =========================================================
   ATTACHMENT MOBILE / RESPONSIVE FIX
   Keep your existing icon + input CSS unchanged
========================================================= */


/* Attachment preview */

#attachmentPreview {
    display: none;

    width: 100%;

    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    box-sizing: border-box;

    /*
       একাধিক attachment হলে এক লাইনে থাকবে
       এবং horizontal scroll হবে
    */
    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    max-width: 100%;

    scrollbar-width: thin;
}


/* সব attachment এক লাইনে */

#attachmentPreview .attachment-item {
    flex: 0 0 auto;

    position: relative;

    box-sizing: border-box;
}



#attachmentPreview {
    width: 100% !important;

    max-width: 100% !important;

    display: none;

    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    box-sizing: border-box;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: thin;
}

/* =========================================================
   REMOVE BUTTON
   Always visible
========================================================= */

#attachmentPreview .attachment-remove {
    position: absolute !important;

    top: 3px !important;

    right: 3px !important;

    width: 20px !important;

    height: 20px !important;

    min-width: 20px !important;

    min-height: 20px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: #dc3545 !important;

    color: #fff !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 15px !important;

    line-height: 20px !important;

    opacity: 1 !important;

    visibility: visible !important;

    z-index: 999 !important;

    cursor: pointer !important;
}


#attachmentPreview .attachment-remove:hover {
    background: #bb2d3b !important;
}


/* =========================================================
   IMAGE
========================================================= */

#attachmentPreview .attachment-image {
    width: 55px !important;

    height: 55px !important;

    min-width: 55px !important;

    max-width: 55px !important;

    padding: 0 !important;

    overflow: hidden !important;

    position: relative !important;
}


#attachmentPreview .attachment-image .attachment-thumb {
    width: 100% !important;

    height: 100% !important;

    overflow: hidden !important;
}


#attachmentPreview .attachment-image img {
    width: 100% !important;

    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
}


/* =========================================================
   FILE
========================================================= */

#attachmentPreview .attachment-file {
    width: 180px !important;

    min-width: 180px !important;

    max-width: 180px !important;

    height: 50px !important;

    position: relative !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* File name যাতে বড় না হয় */

#attachmentPreview .attachment-info {
    min-width: 0 !important;

    max-width: 115px !important;

    overflow: hidden !important;
}


#attachmentPreview .attachment-file-name {
    display: block !important;

    width: 100% !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


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

@media (max-width: 768px) {

    #attachmentPreview {
        width: 100% !important;

        max-width: 100% !important;

        padding: 4px 5px !important;

        gap: 5px !important;

        /*
           বেশি attachment হলেও footer
           screen-এর বাইরে যাবে না
        */
        overflow-x: auto !important;

        overflow-y: hidden !important;

        flex-wrap: nowrap !important;

        box-sizing: border-box !important;
    }


    #attachmentPreview .attachment-image {
        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        max-width: 48px !important;
    }


    #attachmentPreview .attachment-file {
        width: 145px !important;

        min-width: 145px !important;

        max-width: 145px !important;

        height: 44px !important;
    }


    #attachmentPreview .attachment-file-icon {
        width: 34px !important;

        height: 34px !important;

        min-width: 34px !important;

        max-width: 34px !important;
    }


    #attachmentPreview .attachment-info {
        max-width: 90px !important;
    }


    #attachmentPreview .attachment-file-name {
        font-size: 11px !important;
    }


    #attachmentPreview .attachment-remove {
        width: 19px !important;

        height: 19px !important;

        min-width: 19px !important;

        min-height: 19px !important;

        font-size: 14px !important;

        line-height: 19px !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    #attachmentPreview {
        gap: 4px !important;

        padding: 4px !important;
    }


    #attachmentPreview .attachment-image {
        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        max-width: 44px !important;
    }


    #attachmentPreview .attachment-file {
        width: 125px !important;

        min-width: 125px !important;

        max-width: 125px !important;

        height: 42px !important;
    }


    #attachmentPreview .attachment-file-icon {
        width: 31px !important;

        height: 31px !important;

        min-width: 31px !important;

        max-width: 31px !important;
    }


    #attachmentPreview .attachment-info {
        max-width: 75px !important;
    }


    #attachmentPreview .attachment-remove {
        width: 18px !important;

        height: 18px !important;

        min-width: 18px !important;

        min-height: 18px !important;

        font-size: 13px !important;

        line-height: 18px !important;
    }
}



.chat-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.chat-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}





@media (max-width: 768px) {

    .chat-footer.focused .chat-actions {
        width: 0 !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;

        overflow: hidden !important;

        pointer-events: none !important;

        gap: 0 !important;
    }

}

@media (max-width: 768px) {

    .chat-footer {
        width: 100% !important;
        max-width: 100vw !important;

        overflow: hidden !important;
    }

    .chat-input-wrapper {
        flex: 1 1 0 !important;
        width: 0 !important;
        max-width: 100% !important;
    }

    .chat-input-wrapper .attachment-preview {
        max-width: calc(100% - 56px) !important;
    }
}

















.notification-item.unread-noti {
    background-color: #e7f3ff;
    border-left: 4px solid #1877f2;
    font-weight: 600;
}

.notification-item:hover {
    background-color: #f0f2f5;
}

.city-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    height:260px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.4s;
}

.city-card:hover{
    transform:translateY(-8px);
}

.city-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.city-card:hover img{
    transform:scale(1.1);
}

.city-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    color:#fff;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15)
    );
}

.city-overlay h4{
    font-weight:700;
    margin-bottom:5px;
}

.city-overlay span{
    font-size:14px;
    background:rgba(255,255,255,.2);
    width:fit-content;
    padding:6px 12px;
    border-radius:30px;
    backdrop-filter:blur(5px);
}



















/* HERO (same) */
.hero-slider{
    position:relative;
    width:100%;
    height:70vh;
    overflow:hidden;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.05);
    transition:1s ease;
}

.hero-slide.active{
    opacity:1;
    transform:scale(1);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

.hero-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-align:center;
}

.hero-content h1{
    font-size:42px;
}

.hero-search{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    background:#fff;
    padding:10px;
    border-radius:12px;
}

.hero-search input,
.hero-search select{
    padding:10px;
    border:none;
    outline:none;
    min-width:160px;
}

.hero-search button{
    background:#ff385c;
    color:#fff;
    border:none;
    padding:10px 20px;
}


/* ================= FEATURE CARD (NEW MODEL) ================= */

.feature-card{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    transition:0.4s;
}

.feature-card:hover{
    transform:translateY(-8px);
}

.feature-img{
    height:260px;
    object-fit:cover;
    transition:0.5s;
}

.feature-card:hover .feature-img{
    transform:scale(1.08);
}


.agent-info{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.agent-info img{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #eee;
}

.agent-name{
    margin:0;
    font-size:14px;
    font-weight:600;
}

/* TOP TAG */
.top-tag{
    position:absolute;
    top:12px;
    left:12px;
    background:#ff385c;
    color:#fff;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
}

/* PRICE TAG */
.price-tag{
    position:absolute;
    top:12px;
    right:12px;
    background:rgba(0,0,0,0.7);
    color:#fff;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
}

/* BODY */
.feature-body{
    padding:15px;
}

.feature-body h4{
    font-size:18px;
    margin-bottom:5px;
}

.location{
    font-size:13px;
    color:#666;
    margin-bottom:10px;
}

.info-box{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#444;
    margin-bottom:10px;
}

.view-btn{
    display:block;
    text-align:center;
    background:#111;
    color:#fff;
    padding:10px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.view-btn:hover{
    background:#ff385c;
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero-content h1{
        font-size:26px;
    }
}

/* CARD */
.latest-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    transition:0.3s;
}

.latest-card:hover{
    transform:translateY(-5px);
}

/* IMAGE WRAPPER (MAIN FIX) */
.latest-img-box{
    width:100%;
    height:180px;      /* fixed height */
    overflow:hidden;   /* important */
}

/* IMAGE FIX */
.latest-img-box img{
    width:100%;
    height:100%;
    object-fit:cover;  /* THIS FIXES IMAGE BREAK ISSUE */
    display:block;
}

/* BODY */
.latest-body{
    padding:12px;
}

.latest-body h6{
    font-size:14px;
    font-weight:600;
    margin-bottom:5px;
}

.latest-body p{
    margin:0;
    font-weight:700;
    color:#333;
}

.latest-body a{
    display:inline-block;
    margin-top:8px;
    font-size:13px;
    color:#ff385c;
    text-decoration:none;
    font-weight:600;
}

.image-count{
    position:absolute;
    top:50px;
    right:12px;
    background:rgba(255,255,255,0.9);
    color:#111;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    z-index:99;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}


.property-counter{
    font-size:20px;
    margin-top:10px;
}

.property-counter span{
    background:#198754;
    color:#fff;
    padding:8px 15px;
    border-radius:8px;
    font-weight:bold;
}



.empty-box{
    padding:60px 20px;
}

/* Slider Buttons */



/* =========================
   PROPERTY GALLERY
========================= */

.property-gallery{
    width:100%;
}

.main-image-wrapper{
    width:100%;
    overflow:hidden;
    border-radius:10px;
    margin-bottom:12px;
}

.main-property-image{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    border:1px solid #ddd;
    transition:.3s;
}

.main-property-image:hover{
    opacity:.95;
}

/* =========================
   THUMBNAIL SLIDER
========================= */

.thumb-slider{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-behavior:smooth;
}

.thumb-slider::-webkit-scrollbar{
    height:6px;
}

.thumb-slider::-webkit-scrollbar-thumb{
    background:#cfcfcf;
    border-radius:20px;
}

.thumb-slider::-webkit-scrollbar-track{
    background:#f5f5f5;
}

.property-thumb{
    width:90px;
    height:70px;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
    flex-shrink:0;
    border:2px solid #ddd;
    transition:all .3s ease;
}

.property-thumb:hover{
    transform:scale(1.05);
    border-color:#007bff;
}

/* =========================
   POPUP MODAL
========================= */

.gallery-modal{
    display:none;
    position:fixed;
    z-index:999999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.95);
}

/* Popup Image */

.gallery-modal-image{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    max-width:90%;
    max-height:85%;
    border-radius:8px;
}

/* Close Button */

.gallery-close{
    position:absolute;
    top:15px;
    right:30px;
    color:#fff;
    font-size:45px;
    font-weight:bold;
    cursor:pointer;
    z-index:9999999;
}

.gallery-close:hover{
    color:#ddd;
}

/* Prev Next Buttons */

.gallery-prev,
.gallery-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:50px;
    font-weight:bold;
    cursor:pointer;
    padding:10px 18px;
    background:rgba(0,0,0,.4);
    border-radius:6px;
    user-select:none;
    transition:.3s;
}

.gallery-prev{
    left:20px;
}

.gallery-next{
    right:20px;
}

.gallery-prev:hover,
.gallery-next:hover{
    background:rgba(255,255,255,.2);
}

/* =========================
   PROPERTY INFO
========================= */

.property-info-box{
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    padding:15px;
    margin-bottom:20px;
}

.property-info-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.property-info-box ul li{
    padding:8px 0;
    border-bottom:1px solid #eee;
}

.property-info-box ul li:last-child{
    border-bottom:none;
}

/* =========================
   AGENT CARD
========================= */

.agent-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    padding:20px;
    text-align:center;
}

.agent-card img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #eee;
}

/* =========================
   MESSAGE BOX
========================= */

.message-box{
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    padding:20px;
    margin-top:20px;
}

.message-box textarea{
    resize:none;
}

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

@media(max-width:768px){

    .main-property-image{
        height:250px;
    }

    .property-thumb{
        width:70px;
        height:55px;
    }

    .gallery-prev,
    .gallery-next{
        font-size:35px;
        padding:8px 12px;
    }

    .gallery-close{
        font-size:35px;
        right:15px;
    }

}

@media(max-width:768px){

 

    .property-title{
        font-size:16px;
    }


}




/* Messenger style message icon */
.message-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0 !important;
    transition: all 0.2s ease;
}

.message-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.message-icon {
    font-size: 23px;
    line-height: 1;
}

/* Unread count */
.message-unread-badge {
    position: absolute;
    top: 1px;
    right: -2px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e41e3f;
    color: #fff;

    border: 2px solid #fff;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.message-unread-badge:empty {
    display: none;
}

@media (max-width: 768px) {
    .message-icon-btn {
        width: 40px;
        height: 40px;
    }

    .message-icon {
        font-size: 22px;
    }
}





.container-fluid  h2 {
    font-size: 32px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .container-fluid  h2 {
        font-size: 24px;
    }
}





















/* =========================================================
   CHAT CONTAINER
========================================================= */

.chat-container {
    width: 100%;
    height: 100%;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-sizing: border-box;
}


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

.chat-container > .card-header {
    flex: 0 0 auto;
}


/* =========================================================
   CHAT BOX
   ONLY MESSAGE AREA WILL SCROLL
========================================================= */

#chat-box {
    flex: 1 1 0 !important;

    width: 100%;

    min-height: 300 !important;
    height: auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 15px;

    background: #f5f5f5;

    box-sizing: border-box;

    scroll-behavior: smooth;

    scrollbar-width: thin;
    scrollbar-color: #c7c7c7 transparent;
}


/* Chrome / Edge / Safari */

#chat-box::-webkit-scrollbar {
    width: 6px;
}

#chat-box::-webkit-scrollbar-track {
    background: transparent;
}

#chat-box::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 10px;
}

#chat-box::-webkit-scrollbar-thumb:hover {
    background: #999;
}


/* =========================================================
   MESSAGE ROW
========================================================= */

#chat-box > .d-flex {
    width: 100%;

    box-sizing: border-box;

    min-width: 0;
}


/* =========================================================
   CHAT MESSAGE
========================================================= */

.chat-message {
    font-size: 15px;
    line-height: 1.5;
    padding: 12px 15px;
    max-width: min(70%, 600px);
    min-width: 60px;
    border-radius: 12px;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: normal;


}









/* =========================================================
   MESSAGE SENDER
========================================================= */

.chat-message-sender {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    min-width: 300px;
    max-width: 300px;
    overflow-wrap: anywhere;
}


/* =========================================================
   MESSAGE TIME
========================================================= */

.chat-message-time {
    display: inline-block;

    font-size: 11px;

    line-height: 1;

    margin-top: 6px;

    /*
     * TIME NEVER BREAK
     */
    white-space: nowrap !important;

    word-break: keep-all !important;

    overflow-wrap: normal !important;

    flex-shrink: 0;
}


/* =========================================================
   REPLY PREVIEW
========================================================= */

.reply-preview {
    display: flex;
    align-items: center;
    width: 300px;
    max-width: 300px;
    min-width: 0;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #f0f2f5;
    border-left: 3px solid #0d6efd;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   REPLY CONTENT
========================================================= */

.reply-preview-content {
    flex: 1 1 auto;

    min-width: 0;

    max-width: 70%;

    overflow: hidden;

}


/* =========================================================
   REPLY SENDER
========================================================= */




.reply-preview-title {
    display: block;

    min-width: 200px;
    max-width: 300px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;

    margin-bottom: 2px;

    white-space: nowrap;

    overflow: visible;

    text-overflow: clip;
}

/* =========================================================
   REPLY MESSAGE
========================================================= */

.reply-preview-message {
    display: block;

    width: 70%;

    max-width: 70%;

    font-size: 12px;

    color: #555;

    line-height: 1.4;

    /*
     * Textarea-তে পুরো reply message দেখাবে না
     */
    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    word-break: normal;

    overflow-wrap: normal;
}





/* =========================================================
   CANCEL REPLY
========================================================= */

.reply-cancel {
    flex: 0 0 auto;

    width: 30px;

    height: 30px;

    padding: 0;

    margin-left: 8px;

    border: 0;

    background: transparent;

    font-size: 22px;

    line-height: 28px;

    text-align: center;

    cursor: pointer;

    color: red;
}

.reply-cancel:hover {
    color: #000;
}


/* =========================================================
   CHAT FOOTER
========================================================= */

.chat-footer {
    flex: 0 0 auto;

    width: 100%;

    background: #fff;

    border-top: 1px solid #ddd;

    box-sizing: border-box;

    z-index: 20;
}


/* =========================================================
   CHAT INPUT WRAPPER
========================================================= */

.chat-input-wrapper {
    position: relative;

    width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   CHAT INPUT
========================================================= */

.chat-input {
    display: block;

    width: 100%;

    min-height: 42px;

    max-height: 120px;

    resize: none;

    overflow-y: auto;

    font-size: 15px;

    line-height: 1.5;

    padding: 10px 50px 10px 12px;

    box-sizing: border-box;
}


/* =========================================================
   SEND / MIC
========================================================= */

.chat-send {
    position: absolute;

    right: 8px;

    bottom: 7px;

    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    padding: 0;

    z-index: 10;

    flex-shrink: 0;
}


.chat-send i {
    font-size: 16px;
}


/* =========================================================
   ATTACHMENT PREVIEW
========================================================= */

.attachment-preview {
    display: none;

    align-items: center;

    gap: 8px;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    padding: 6px 8px;

    margin-bottom: 5px;

    box-sizing: border-box;

    overflow-x: auto;

    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: thin;
}


/* =========================================================
   ATTACHMENT ITEM
========================================================= */

.attachment-item {
    position: relative;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 120px;

    max-width: 180px;

    padding: 5px 28px 5px 6px;

    background: #f1f3f5;

    border: 1px solid #ddd;

    border-radius: 7px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   IMAGE
========================================================= */

.attachment-thumb {
    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    border-radius: 5px;

    overflow: hidden;

    background: #ddd;
}


.attachment-thumb img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =========================================================
   FILE ICON
========================================================= */

.attachment-file-icon {
    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e9ecef;

    border-radius: 5px;
}


.attachment-file-icon i {
    font-size: 22px;
}


/* =========================================================
   ATTACHMENT INFO
========================================================= */

.attachment-info {
    min-width: 0;

    flex: 1 1 auto;

    overflow: hidden;
}


.attachment-file-name {
    display: block;

    width: 100%;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   REMOVE ATTACHMENT
========================================================= */

.attachment-remove {
    position: absolute;

    top: 3px;

    right: 3px;

    width: 22px;

    height: 22px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);

    color: #fff;

    font-size: 16px;

    line-height: 20px;

    text-align: center;

    cursor: pointer;

    z-index: 2;
}


.attachment-remove:hover {
    background: rgba(0, 0, 0, 0.75);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 769px) {

    .chat-message {
        max-width: min(70%, 600px);
        font-size: 15px;

        padding: 12px 15px;
    }

    .chat-message-sender {
        font-size: 14px;
    }

    .chat-message-time {
        font-size: 11px;
    }

    .reply-preview-message {
        font-size: 12px;
    }
}


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

@media (max-width: 768px) {

        #chat-box {
        height: calc(100vh - 200px) !important;
        max-height: calc(100vh - 200px) !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding: 8px !important;
    }

    .chat-message {
        max-width: 78%;

        font-size: 14px;

        padding: 10px 13px;
    }

    .chat-message-sender {
        font-size: 13px;
    }

    .chat-message-time {
        font-size: 10px;
    }

    .reply-preview {
        padding: 8px 10px;
    }

    .reply-preview-title {
        font-size: 12px;
    }

    .reply-preview-message {
        font-size: 12px;
    }

    .attachment-item {
        min-width: 115px;

        max-width: 160px;
    }
}


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

@media (max-width: 480px) {

    #chat-box {
        padding: 10px;
    }

    .chat-message {
        max-width: 84%;

        font-size: 14px;

        line-height: 1.5;

        padding: 9px 12px;

        border-radius: 10px;
    }

    .chat-message-sender {
        font-size: 12px;

        margin-bottom: 3px;
    }

    .chat-message-time {
        font-size: 10px;

        margin-top: 5px;

        white-space: nowrap !important;
    }


    /* Reply */

    .reply-preview {
        width: 100%;

        padding: 7px 9px;

        margin-bottom: 5px;

        border-left-width: 3px;
    }

    .reply-preview-title {
        font-size: 12px;

        line-height: 1.3;
    }

    .reply-preview-message {
        font-size: 11px;

        line-height: 1.4;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }

    .reply-cancel {
        width: 26px;

        height: 26px;

        margin-left: 5px;

        font-size: 20px;

        line-height: 26px;
    }


    /* Input */

    .chat-input {
        font-size: 14px;

        min-height: 42px;

        padding: 9px 48px 9px 11px;
    }

    .chat-send {
        width: 32px;

        height: 32px;

        right: 7px;

        bottom: 6px;
    }

    .chat-send i {
        font-size: 15px;
    }


    /* Attachments */

    .attachment-preview {
        gap: 6px;

        padding: 5px 6px;

        overflow-x: auto;

        max-width: 100%;
    }

    .attachment-item {
        min-width: 110px;

        max-width: 150px;

        padding-right: 26px;
    }

    .attachment-thumb {
        width: 38px;

        height: 38px;

        flex-basis: 38px;
    }

    .attachment-file-icon {
        width: 36px;

        height: 36px;

        flex-basis: 36px;
    }

    .attachment-file-icon i {
        font-size: 19px;
    }

    .attachment-file-name {
        font-size: 11px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    #chat-box {
        padding: 8px;
    }

    .chat-message {
        max-width: 88%;

        font-size: 13px;

        padding: 8px 10px;
    }

    .chat-message-sender {
        font-size: 12px;
    }

    .chat-message-time {
        font-size: 9px;

        white-space: nowrap !important;
    }

    .reply-preview-title {
        font-size: 11px;
    }

    .reply-preview-message {
        font-size: 11px;
    }

    .reply-cancel {
        width: 24px;

        height: 24px;

        font-size: 18px;

        line-height: 24px;
    }

    .chat-input {
        font-size: 13px;
    }
}






/* =========================================================
   REPLY BUTTON - NEVER SHRINK / NEVER BREAK
========================================================= */

.chat-message .reply-btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 68px !important;

    height: 30px;

    padding: 4px 9px !important;

    white-space: nowrap !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;

    flex-shrink: 0 !important;

    font-size: 12px;
    line-height: 1;

    box-sizing: border-box;
}


/* Reply icon */
.chat-message .reply-btn i {
    flex-shrink: 0;

    font-size: 13px;

    margin-right: 4px;

    white-space: nowrap;
}


/* =========================================================
   VERY SMALL MESSAGE
========================================================= */

.chat-message {
     min-width: 300px;
    
}








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

@media (max-width: 768px) {

    .chat-message {
        min-width: 300px;
    }

    .chat-message .reply-btn {
        min-width: 64px !important;

        height: 28px;

        padding: 4px 8px !important;

        font-size: 11px;
    }

    .chat-message .reply-btn i {
        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .chat-message {
        min-width: 300px;
    }

    .chat-message .reply-btn {
        min-width: 60px !important;

        font-size: 10px;

        padding: 4px 7px !important;
    }

    .chat-message .reply-btn i {
        font-size: 11px;
    }
}



    .property-responsive-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
    }

    @media (max-width: 768px) {
        .property-responsive-image {
            width: 100%;
            height: 100px;
            object-fit: cover;
        }
    }

    @media (max-width: 480px) {
        .property-responsive-image {
            width: 100%;
            height: 50px;
            object-fit: cover;
        }
    }




/* =========================================================
   CHAT INPUT FIX: 769px - 991px
========================================================= */




@media (min-width: 769px) and (max-width: 991px) {

    .chat-footer {
        width: 100% !important;
        max-width: 100vw !important;

        overflow: hidden !important;
    }

    .chat-input-wrapper {
        flex: 1 1 0 !important;
        width: 0 !important;
        max-width: 100% !important;
    }

    .chat-input-wrapper .attachment-preview {
        max-width: calc(100% - 56px) !important;
    }
}



























/* =========================================================
   DESKTOP PROPERTY
========================================================= */

.desktop-property-info {
    display: block;
    width: 100%;
}

.desktop-property-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 12px;
}

.desktop-property-title {
    display: block;
    margin: 0 0 5px 0;
    font-size: 15px;
}

.desktop-property-location {
    display: block;
    font-size: 12px;
}


/* =========================================================
   MOBILE PROPERTY HIDDEN ON DESKTOP
========================================================= */

.mobile-property-section {
    display: none;
}


/* =========================================================
   DESKTOP PARTICIPANTS
========================================================= */

.desktop-participants {
    display: block;
}

.participants-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.participant-item {
    display: flex;
    align-items: center;
    width: 100%;
}

.participant-avatar {
    width: 45px;
    height: 45px;
    min-width: 45px;
    object-fit: cover;
    border-radius: 50%;
}

.participant-details {
    margin-left: 12px;
}

.participant-name {
    display: block;
    font-size: 14px;
}

.participant-role {
    display: block;
    font-size: 12px;
    color: #777;
}


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

@media (max-width: 768px) {

    /* Desktop property hide */

    .desktop-property-info {
        display: none !important;
    }


    /* Desktop participants hide */

    .desktop-participants {
        display: none !important;
    }


    /* =====================================================
       MOBILE PROPERTY SECTION
    ====================================================== */

    .mobile-property-section {
        display: block !important;
        width: 100%;
    }


    /* =====================================================
       IMAGE + PARTICIPANTS SAME ROW
    ====================================================== */

    .mobile-property-top {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }


    /* =====================================================
       PROPERTY IMAGE
    ====================================================== */

    .mobile-property-image {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        max-width: 50px !important;

        min-height: 50px !important;
        max-height: 50px !important;

        object-fit: cover !important;

        border-radius: 7px !important;

        display: block !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       PARTICIPANTS
    ====================================================== */

    .mobile-participants {
        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: flex-start !important;

        gap: 10px !important;

        flex: 1 !important;

        min-width: 0 !important;

        overflow: hidden !important;
    }


    /* =====================================================
       SINGLE PARTICIPANT
    ====================================================== */

    .mobile-participant {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        width: 40px !important;

        min-width: 40px !important;

        max-width: 40px !important;

        flex: 0 0 40px !important;
    }


    /* =====================================================
       PARTICIPANT IMAGE
    ====================================================== */

    .mobile-participant-avatar {
        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        max-width: 30px !important;

        min-height: 30px !important;
        max-height: 30px !important;

        object-fit: cover !important;

        border-radius: 50% !important;

        display: block !important;
    }


    /* =====================================================
       PARTICIPANT NAME
    ====================================================== */

    .mobile-participant-name {
        display: block !important;

        width: 52px !important;
        max-width: 52px !important;

        margin-top: 3px !important;

        font-size: 9px !important;

        line-height: 11px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* =====================================================
       PARTICIPANT ROLE
    ====================================================== */

    .mobile-participant-role {
        display: block !important;

        width: 52px !important;

        max-width: 52px !important;

        font-size: 8px !important;

        line-height: 10px !important;

        color: #777 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* =====================================================
       MOBILE PROPERTY NAME
    ====================================================== */

    .mobile-property-title {
        display: block !important;

        width: 100% !important;

        margin-top: 7px !important;

        text-align: center !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        line-height: 18px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* =====================================================
       MOBILE PROPERTY LOCATION
    ====================================================== */

    .mobile-property-location {
        display: block !important;

        width: 100% !important;

        text-align: center !important;

        margin-top: 1px !important;

        font-size: 10px !important;

        line-height: 15px !important;

        color: #777 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .mobile-property-image {
        width: 55px !important;
        height: 55px !important;

        min-width: 55px !important;
        max-width: 55px !important;

        min-height: 55px !important;
        max-height: 55px !important;
    }


    .mobile-property-top {
        gap: 7px !important;
    }


    .mobile-participants {
        gap: 7px !important;
    }


    .mobile-participant {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        flex-basis: 45px !important;
    }


    .mobile-participant-avatar {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        max-width: 34px !important;

        min-height: 34px !important;
        max-height: 34px !important;
    }


    .mobile-participant-name {
        width: 45px !important;
        max-width: 45px !important;
        font-size: 8px !important;
    }


    .mobile-participant-role {
        width: 45px !important;
        max-width: 45px !important;
        font-size: 7px !important;
    }


    .mobile-property-title {
        font-size: 12px !important;
    }


    .mobile-property-location {
        font-size: 9px !important;
    }

}































/* =====================================================
   MAIN CHAT PAGE

/* =========================================================
   CHAT PAGE ONLY
   সব CSS শুধু .chat-page-wrapper-এর ভিতরে কাজ করবে
========================================================= */


/* =========================================================
   MAIN CHAT PAGE
========================================================= */

.chat-page-wrapper {
    height: calc(100vh - 70px);
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   MAIN ROW
========================================================= */

.chat-page-wrapper > .row {
    height: 100%;
}


/* =========================================================
   LEFT + RIGHT COLUMN
========================================================= */

.chat-page-wrapper > .row > .col-lg-3,
.chat-page-wrapper > .row > .col-lg-9 {
    height: 100%;
}


/* =========================================================
   LEFT CARD
========================================================= */

.chat-page-wrapper .chat-card {
    height: 100%;
}


/* =========================================================
   RIGHT CHAT CARD
========================================================= */

.chat-page-wrapper .col-lg-9 > .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


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

.chat-page-wrapper .card-header {
    flex-shrink: 0;
}


/* =========================================================
   MESSAGE AREA
========================================================= */

.chat-page-wrapper #chat-box {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 10px;
}


/* =========================================================
   CHAT FOOTER
========================================================= */

.chat-page-wrapper .chat-footer {
    flex-shrink: 0;

    background: #fff;

    position: relative;
    z-index: 10;
}


/* =========================================================
   CHAT INPUT WRAPPER
========================================================= */

.chat-page-wrapper .chat-input-wrapper {
    position: relative;
    width: 100%;
}


/* =========================================================
   MESSAGE BUBBLE
========================================================= */

/*
   যদি আপনার message-এর actual class অন্য কিছু হয়,
   তাহলে সেই class-এর সাথে এই properties ব্যবহার করবেন।
*/

.chat-page-wrapper .message-bubble,
.chat-page-wrapper .chat-message,
.chat-page-wrapper .message-content {
    color: #212529;
}


/* =========================================================
   MESSAGE TEXT
========================================================= */

.chat-page-wrapper .message-text {
    color: #212529 !important;

    font-size: 14px;
    line-height: 1.5;

    white-space: pre-wrap;
    word-break: break-word;

    display: block;
}


/* =========================================================
   সাধারণ paragraph / span-এর text যেন সাদা হয়ে না যায়
========================================================= */

.chat-page-wrapper #chat-box p,
.chat-page-wrapper #chat-box span {
    color: #212529;
}


/* =========================================================
   MESSAGE LINK
========================================================= */

.chat-page-wrapper #chat-box a {
    color: #0d6efd;
}


/* =========================================================
   নিজের message হলে text
========================================================= */

.chat-page-wrapper .message-sent,
.chat-page-wrapper .sent-message {
    color: #212529;
}


/* =========================================================
   অন্য user-এর message হলে text
========================================================= */

.chat-page-wrapper .message-received,
.chat-page-wrapper .received-message {
    color: #212529;
}


/* =========================================================
   CHAT ATTACHMENTS
========================================================= */

.chat-page-wrapper .chat-attachments {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 8px;

    margin-top: 8px;

    width: 100%;
}


/* =========================================================
   IMAGE ATTACHMENT WRAPPER
========================================================= */

.chat-page-wrapper .chat-image-link,
.chat-page-wrapper .chat-image-attachment {

    display: block;

    flex: 0 0 auto;

    width: auto;

    max-width: 220px;

    padding: 0;

    margin: 0;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    text-decoration: none;
}


/* =========================================================
   IMAGE
========================================================= */

.chat-page-wrapper .chat-attachment-image,
.chat-page-wrapper .chat-message-image {

    display: block;

    width: 220px;

    max-width: 220px;

    height: auto;

    max-height: 250px;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    padding: 0;

    margin: 0;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   FILE ATTACHMENT
========================================================= */

.chat-page-wrapper .chat-file-attachment {

    display: flex;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

    max-width: 280px;

    min-height: 40px;

    padding: 8px 12px;

    margin: 0;

    /*
       Background একদম transparent
    */
    background: transparent !important;

    /*
       unwanted border নেই
    */
    border: none !important;

    box-shadow: none !important;

    border-radius: 0;

    color: #212529 !important;

    text-decoration: none;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   FILE ICON
========================================================= */

.chat-page-wrapper .chat-file-attachment i {

    flex: 0 0 auto;

    font-size: 22px;

    color: #495057 !important;
}


/* =========================================================
   FILE NAME
========================================================= */

.chat-page-wrapper .chat-file-attachment span {

    display: block;

    color: #212529 !important;

    max-width: 220px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   FILE HOVER
========================================================= */

.chat-page-wrapper .chat-file-attachment:hover {

    background: transparent !important;

    color: #212529 !important;

    text-decoration: none;

    border: none !important;
}


/* =========================================================
   FILE LINK TEXT
========================================================= */

.chat-page-wrapper .chat-file-attachment:hover span {

    color: #212529 !important;
}


/* =========================================================
   ATTACHMENT IMAGE HOVER
========================================================= */

.chat-page-wrapper .chat-image-link:hover,
.chat-page-wrapper .chat-image-attachment:hover {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   MESSAGE ATTACHMENT AREA
========================================================= */

.chat-page-wrapper .message-attachments {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 8px;

    margin-top: 8px;
}


/* =========================================================
   IMAGE + FILE একই লাইনে রাখবে
========================================================= */

.chat-page-wrapper .message-attachments .chat-attachments {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 8px;

    width: 100%;
}


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

@media (max-width: 768px) {

    /* -----------------------------------------------------
       MAIN
    ----------------------------------------------------- */

    .chat-page-wrapper {

        height: calc(100vh - 60px);

        min-height: 0;

        padding: 5px !important;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       ROW
    ----------------------------------------------------- */

    .chat-page-wrapper > .row {

        height: 100%;

        margin: 0;
    }


    /* -----------------------------------------------------
       LEFT COLUMN
    ----------------------------------------------------- */

    .chat-page-wrapper > .row > .col-lg-3 {

        height: auto;

        width: 100%;

        flex: 0 0 auto;
    }


    /* -----------------------------------------------------
       RIGHT COLUMN
    ----------------------------------------------------- */

    .chat-page-wrapper > .row > .col-lg-9 {

        height: calc(100% - 150px);

        width: 100%;

        flex: 1 1 auto;

        min-height: 0;

        padding: 0;
    }


    /* -----------------------------------------------------
       LEFT CARD
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-card {

        height: auto;

        max-height: 145px;

        overflow: hidden;

        margin-bottom: 5px;
    }


    /* -----------------------------------------------------
       LEFT CARD BODY
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-card .card-body {

        padding: 8px;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       RIGHT CHAT CARD
    ----------------------------------------------------- */

    .chat-page-wrapper .col-lg-9 > .card {

        height: 100%;

        min-height: 0;
    }


    /* -----------------------------------------------------
       MESSAGE AREA
    ----------------------------------------------------- */

    .chat-page-wrapper #chat-box {

        flex: 1 1 auto;

        min-height: 0;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        padding: 8px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-footer {

        flex-shrink: 0;

        padding-bottom: env(safe-area-inset-bottom);
    }


    /* -----------------------------------------------------
       INPUT
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-input {

        max-height: 120px;

        overflow-y: auto;
    }


    /* -----------------------------------------------------
       MOBILE IMAGE
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-attachment-image,
    .chat-page-wrapper .chat-message-image {

        width: 160px;

        max-width: 160px;

        max-height: 180px;

        border-radius: 9px;
    }


    /* -----------------------------------------------------
       MOBILE IMAGE WRAPPER
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-image-link,
    .chat-page-wrapper .chat-image-attachment {

        max-width: 160px;

        flex: 0 0 auto;
    }


    /* -----------------------------------------------------
       MOBILE FILE
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-file-attachment {

        max-width: 220px;

        padding: 8px 10px;

        font-size: 13px;

        background: transparent !important;

        border: none !important;
    }


    /* -----------------------------------------------------
       MOBILE FILE TEXT
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-file-attachment span {

        max-width: 170px;

        color: #212529 !important;
    }


    /* -----------------------------------------------------
       MOBILE ATTACHMENTS
    ----------------------------------------------------- */

    .chat-page-wrapper .chat-attachments {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: flex-start;

        gap: 6px;

        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .chat-page-wrapper {

        height: calc(100vh - 100px);
    }


    .chat-page-wrapper > .row > .col-lg-9 {

        height: calc(100% - 180px);
    }


    .chat-page-wrapper .chat-card {

        max-height: 140px;
    }


    .chat-page-wrapper .chat-attachment-image,
    .chat-page-wrapper .chat-message-image {

        width: 140px;

        max-width: 140px;

        max-height: 160px;
    }


    .chat-page-wrapper .chat-image-link,
    .chat-page-wrapper .chat-image-attachment {

        max-width: 140px;
    }


    .chat-page-wrapper .chat-file-attachment {

        max-width: 200px;
    }

}