/* ---- Toast Notifications ---- */
#vse-toast-wrap {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.vse-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 280px;
    max-width: 380px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: all;
}
.vse-toast.vse-toast-show {
    opacity: 1;
    transform: translateX(0);
}
.vse-toast.vse-toast-success { background: #51a351; }
.vse-toast.vse-toast-error   { background: #bd362f; }
.vse-toast-msg { flex: 1; line-height: 1.4; }
.vse-toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    flex-shrink: 0;
}
.vse-toast-close:hover { opacity: 1; }

/* ---- Delete Endorsement Modal ---- */
#vp-endorse-delete-modal .vse-modal-header {
    background-color: #ffd700;
    border-bottom: none;
}
#vp-endorse-delete-modal .vse-modal-header .modal-title {
    color: #000;
    font-weight: 700;
}
#vp-endorse-delete-modal .vse-modal-header .close {
    color: #000;
    opacity: 1;
    text-shadow: none;
}
#vp-endorse-delete-modal .modal-footer {
    justify-content: space-between;
    padding: 10px 16px;
}
#vp-endorse-delete-modal .vse-btn-close {
    background: #ffd700;
    color: #000;
    border: 1px solid #000;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 3px;
}
#vp-endorse-delete-modal .vse-btn-close:hover {
    background: #000;
    color: #ffd700;
}
#vp-endorse-delete-modal .vse-btn-delete {
    background: #007bff;
    color: #fff;
    border: 1px solid #007bff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 3px;
}
#vp-endorse-delete-modal .vse-btn-delete:hover {
    background: #0056b3;
    border-color: #0056b3;
    color: #fff;
}

.endorsement_section .card-block h3{
    font-size: 20px;
}
.endorsement_section .options{
    width: 100%;
    text-align: center;
}

.endorsement_section .options p{
    font-size: 13px;
    margin: 0;
    padding-bottom: 10px;
}

.endorsement_section .form-header h3{
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

.endorsement_section .form-header h3 span{
    display: block;
    margin-top: -64px;
}

.endorsement_section .form-header h3 span i{
    font-size: 30px;
    border-radius: 50%;
    background: #ffd700 !important;
    width: 75px;
    height: 75px;
}

.endorsement_section .card{
    box-shadow: none !important;
    margin: 70px 0;
    border-radius: 0;
    min-height: 600px;
}

.endorsement_section .md-form .form-control:focus{
    border-bottom: #ffd700 1px solid;
}

.endorsement_section .card .md-form{
    margin-bottom: 0;
    margin-top: 10px;
}

.endorsement_section .card .md-form label{
    position: relative;
    padding-bottom: 10px;
    margin: 0;
}

/* Scoped inner wrapper — replaces .container to avoid conflicts with other plugins */
.endorsement_section .vse-inner-wrap {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/********** search section ***************/
.endorsement_section .search_section{
    width: 100%;
}

/* Row that holds the search input + button — use flex so they align perfectly */
.endorsement_section .search_select .row {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
}

/* Input group wrapper — grey background, fixed height, no rogue borders */
.endorsement_section .search_select .search_div.input-group {
    background: rgb(238, 238, 238) !important;
    height: 48px;
    flex-wrap: nowrap;
    border: none !important;
    box-shadow: none !important;
}

/* Search icon prepend */
.endorsement_section .search_select .input-group-text {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    height: 48px;
    padding: 0 10px;
    line-height: 48px;
}

/* The text input itself */
.endorsement_section .search_select .search_div .form-control {
    background: rgb(238, 238, 238) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    height: 48px !important;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    /* Suppress any theme floating-label / MDB behaviour */
    position: static !important;
    transform: none !important;
}
.endorsement_section .search_select .search_div .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    background: rgb(238, 238, 238) !important;
}
/* Hide any floating placeholder/label injected by theme CSS */
.endorsement_section .search_select .search_div .form-control ~ label,
.endorsement_section .search_select .search_div .form-control ~ span.placeholder,
.endorsement_section .search_select .input_form ~ .form-notch,
.endorsement_section .search_select .input_form ~ .form-label {
    display: none !important;
}

/* Add Vendor button column */
.endorsement_section .search-but {
    padding: 0;
    display: flex;
    align-items: stretch;
    height: 48px;
}
.endorsement_section .search-but button {
    width: 100%;
    height: 48px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0 4px 4px 0;
    padding: 0 16px;
    background: #ffd700 !important;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.endorsement_section .search_head{
    text-align: center;
}

.endorsement_section .search_head h2{
    color: #ffffff;
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 20px;
}

.rel_desk{
    position: static !important;
    padding-right: 0;
}

/******** vendor_box *********/
/* Override profile-page.css .vp-page-wrap p { margin-top: 16px } inside listing cards */
.vp-page-wrap .endorsement_section .listing_box p {
    margin-top: 0 !important;
    margin-bottom: 0;
}

/* Override profile-page.css .vp-page-wrap .listing_box (171px) for endorsements */
.vp-page-wrap .endorsement_section .listing_box {
    width: 100% !important;
    border: 1px solid #ddd;
    padding: 5px;
    position: relative;
}
/* Override profile-page.css .vp-page-wrap .listing_box img height (120px) */
.vp-page-wrap .endorsement_section .listing_box .img-fluid {
    height: 146px !important;
    width: 100% !important;
    object-fit: cover;
}
.endorsement_section .listing_box h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}
/* Override profile-page.css .vp-page-wrap .btn.btn-yellow (border-radius: 5px) */
.vp-page-wrap .endorsement_section .btn.btn-yellow,
.endorsement_section .btn.btn-yellow {
    background: #ffd700 !important;
    color: #000000 !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 17px;
    display: block;
    box-shadow: none !important;
    width: 100%;
    margin: 0;
    border-radius: 0 !important;
    transition: 0.7s;
}
.vp-page-wrap .endorsement_section .btn.btn-yellow:hover,
.endorsement_section .btn.btn-yellow:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

/**************** search_result *******************/
.endorsement_section .search_result{
    list-style: none;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 7px 0px #d5d5d5;
    position: absolute;
    width: 100%;
    z-index: 9;
    background: #fff;
    left: 0;
    padding: 0;
    margin: 0;
}

.endorsement_section ul.search_result li{
    padding: 5px 8px;
    cursor: pointer;
}
.endorsement_section ul.search_result li:hover{
    background: #e8e8e8;
}

.vendor_area p.name{
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 0;
}
.vendor_area p.address{
    font-size: 14px;
    margin-bottom: 10px;
    height: 56px;
}

.listing_box .img-fluid{
    height: 146px;
    width: 100%;
    object-fit: cover;
}

.form-header p{
    margin: 0;
}

/******** add-vendor-save button *********/
.endorsement_section .add-vendor-save{
    gap: 4px;
}
.endorsement_section .add-vendor-save textarea.comment{
    font-size: 12px;
    height: 60px;
    resize: none;
}
.endorsement_section .add-vendor-save .btn{
    background: #ffd700;
    padding: 4px 8px;
    border-radius: 0;
    flex-shrink: 0;
}
.endorsement_section .add-vendor-save .btn:hover{
    background: #000;
    color: #fff;
}

/*------ Responsive section start here ------*/
@media (min-width:980px) and (max-width:1199px){
    .endorsement_section .search_select .col-sm-2{
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media (min-width:768px) and (max-width:979px){
    .endorsement_section .search_select .col-sm-6{
        margin-left: 0;
        margin-bottom: 20px;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .endorsement_section .search_select .col-sm-2{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .vendor_box .col-sm-3{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}
@media only screen and (max-width:767px){
    .endorsement_section .search_select .col-sm-6{
        margin-left: 0;
        margin-bottom: 20px;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .endorsement_section .search_select .col-sm-2{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .listing_box {
        display: block;
    }
    .listing_box .img-fluid {
        height: auto;
        width: 100%;
    }
}
@media only screen and (min-width:576px) and (max-width:767px){
    .vendor_box .col-sm-3{
        flex: 0 0 50%;
        max-width: 50%;
    }
}