body {
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;

}

.bg-gradient-green {
    background-image: linear-gradient(to right, #e0fbf5, #eff2f3);
    border: 2px solid rgb(217, 238, 217) !important;
}

.order-card {
    color: #fff;
}

.pos-top-right {
    position: absolute;
    right: 25px;
    top: 20px;
}

.bg-c-blue {
    background: linear-gradient(45deg, #4099ff, #73b4ff);
}

.bg-sm-white {
    background-color: whitesmoke;
    color: grey !important;
}

.bg-c-green {
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
    color: grey;
}

.bg-c-yellow {
    background: linear-gradient(45deg, #FFB64D, #ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg, #FF5370, #ff869a);
}


.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 10px;
    display: flex;
    justify-content: space-between;

}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}


.order-id {
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
}

.card-block h6 {
    margin-bottom: 20px;
}

.dashboard-right-sidebar {
    max-height: 90vh;
    overflow-y: scroll;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(143, 143, 143);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #757575;
}

@media only screen and (max-width: 480px) {
    .shop-banner-image {
        width: 100%;
        height: 160px !important;
        background-size: contain !important;
        background-repeat: no-repeat;

    }

    .hidden-xs {
        display: none !important;
    }
}

@media only screen and (max-width: 880px) {
    .type-cover {
        border: 1px solid grey;
        height: 50vh;
        width: 90vw !important;
        margin: auto;
        padding: 50px;
        border-radius: 20px;
    }
}

@media only screen and (max-width: 480px) {


    .resto-slider-new {
        width: 100%;
        overflow-x: scroll;
    }

    /* Hide the scrollbar */
    .resto-slider-new::-webkit-scrollbar {
        display: none;
    }


    /* ---06-12-24-- */
    .feature-img {
        width: fit-content;
    }

    .d-flex {
        flex-direction: row !important;
    }

    .resto {
        height: 30vh !important;
    }

    .resto-overlay {
        height: 82vh !important;
    }

    .order-id {
        margin-left: 0px !important;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 0px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(143, 143, 143);
        border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #757575;
    }

}

.btn-close {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    z-index: 9;
    position: absolute;
    right: 15px;
}


.header-nav-middle .profile-box {
    position: relative;
    top: -40px;
}

.header-nav-middle .profile-box .cover-image {
    position: relative;
    overflow: hidden
}

.header-nav-middle .profile-box .cover-image img {
    width: 100%;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 991px) {
    .header-nav-middle .profile-box .cover-image img {
        height: 120px
    }
}

.header-nav-middle .profile-box .cover-image:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #222;
    opacity: .15
}

.header-nav-middle .profile-box .cover-image .cover-icon {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    background-color: #fff;
    border-radius: 100%;
    color: #4a5568
}

.header-nav-middle .profile-box .profile-contain {
    padding: 0 15px
}

.header-nav-middle .profile-box .profile-contain .profile-image {
    margin: 0 auto;
    text-align: center;
    margin-top: -50px;
    z-index: 1;
    position: relative
}

.header-nav-middle .profile-box .profile-contain .profile-image img {
    width: calc(93px + (108 - 93) * ((100vw - 320px) / (1920 - 320)));
    height: calc(93px + (108 - 93) * ((100vw - 320px) / (1920 - 320)));
    -o-object-fit: contain;
    object-fit: contain;
    background-color: #f8f8f8;
    border-radius: 100%;
    padding: 5px;
    border: 1px solid #ececec;
    -webkit-box-shadow: 2px 3px 8px rgba(34, 34, 34, 0.32);
    box-shadow: 2px 3px 8px rgba(34, 34, 34, 0.32)
}

.header-nav-middle .profile-box .profile-contain .profile-image .cover-icon {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 55%;
    z-index: 1;
    background-color: #fff;
    border-radius: 100%;
    color: #4a5568
}

.header-nav-middle .profile-box .profile-contain .profile-image .cover-icon i {
    position: relative
}

.header-nav-middle .profile-box .profile-contain .profile-image .cover-icon i input {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: 0;
    width: 35px
}

.header-nav-middle .profile-box .profile-contain .profile-name {
    margin-top: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320)));
    text-align: center;
    padding-bottom: calc(12px + (18 - 12) * ((100vw - 320px) / (1920 - 320)));
    border-bottom: 1px solid #ddd
}

.header-nav-middle .profile-box .profile-contain .profile-name h3 {
    font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    letter-spacing: 0.7px
}

.header-nav-middle .profile-box .profile-contain .profile-name h6 {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    margin-top: 4px
}

.header-nav-middle .profile-box .profile-contain .profile-name h6 span {
    margin: 0 8px
}

.header-nav-middle .user-nav-pills {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(2px + (7 - 2) * ((100vw - 320px) / (1920 - 320)));
    /* margin: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320))) 0 6px */
}

.header-nav-middle .user-nav-pills .nav-item {
    width: 100%;
    display: block
}

.header-nav-middle .user-nav-pills .nav-item .nav-link {
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    color: #4a5568;
    width: 100%;
    text-align: left;
    padding: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(19px + (23 - 19) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    z-index: 0;
    overflow: hidden;
    border-radius: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header-nav-middle .user-nav-pills .nav-item .nav-link.active,
.header-nav-middle .user-nav-pills .nav-item .nav-link .show>.nav-link {
    border-left: 3px solid var(--theme-color);
    font-weight: 600;
    background-color: transparent;
    color: var(--theme-color)
}

.header-nav-middle .user-nav-pills .nav-item .nav-link.active::before,
.header-nav-middle .user-nav-pills .nav-item .nav-link .show>.nav-link::before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--theme-color2);
    z-index: -1;
    opacity: 0.1
}

.header-nav-middle .user-nav-pills .nav-item .nav-link .feather {
    width: calc(18px + (19 - 18) * ((100vw - 320px) / (1920 - 320)));
    height: auto;
    margin-right: 10px
}

[dir="rtl"] .header-nav-middle .user-nav-pills .nav-item .nav-link .feather {
    margin-right: unset;
    margin-left: 10px
}

@media (max-width: 480px) {
    .car-banner {
        height: 80vh !important;
        background-position: center bottom !important;
    }

    .saloon-banner-mainpage {
        min-height: 34vh !important;
    }

    .mr-50px-mob {
        margin-right: 70px !important;
    }

    .mob-d-none {
        display: none !important;
    }
}

@media (min-width: 480px) {

    .h-50vh {
        height: 50vh !important;
    }

    .h-50vh img {
        border-radius: 20px;
        height: 50vh !important;
    }

    .sln-cat img {
        width: 100%;
        height: 45vh !important;
        border-radius: 20px;
    }
}

.saloon-bn-img img {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.saloon-banner-mainpage {
    border: 1px solid rgb(103, 105, 208);
    background-color: rgb(103, 105, 208);
    border-radius: 20px;
    color: white;
    width: 100%;
    max-height: 100% !important;
    position: relative;
}

.saloon-bn-text {
    padding: 10px 0 0 10px;
}

.saloon-bn-text p {
    font-size: 20px;
    line-height: 24px;
    font-weight: 800;
    margin-bottom: 0.5rem !important;
}

.banner-box-container {
    width: 17% !important;
}

.cl-container {
    width: 95%;
    margin: auto;
}

.title-with-line {
    font: 30px sans-serif;
    margin: 30px 0px;
    text-align: center;
    text-transform: uppercase;
    color: #c55291;
}

h2.title-with-line {
    position: relative;
}

h2.title-with-line:before {
    border-top: 2px solid #dfdfdf;
    content: "";
    margin: 0 auto;
    /* this centers the line to the full width specified */
    position: absolute;
    /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

h2.title-with-line span {
    background: #fff;
    padding: 0 15px;
}

html {
    scroll-behavior: smooth !important;
}

#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

#loader .spinner {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#screen-mute {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1002;
    display: none;
}

.close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
}

.cs-h-slider-img {
    height: 300px;
}

.saloon-banner-mainpage {
    height: 300px;
}

.my-sidebar .active {
    background: #acf1de;
}

/* Shop Design */
.cs-chip {
    display: inline-block;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background-color: #e4e4e4;
    margin-bottom: 5px;
    margin-right: 5px;
}

.cs-card-title {
    font-weight: 300;
    font-size: 1rem;
    text-shadow: 0 0 2px #000;
    border-top-right-radius: 67.5px;

    background: rgba(0, 0, 0, 0.7);
}

.cs-product-card .card .card-content {
    padding: 10px 10px 0px 10px;
}

.cs-product-card .card .price {
    width: 50px;
    height: 50px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 50px;
    margin: 10px;
    position: absolute;
    top: 0;
    right: 0;
    letter-spacing: 0;
}

.cs-product-card .card .seller_id {
    height: 30px;
    font-weight: 600;
    font-size: 1rem;
    margin: 10px;
    padding: 5px 15px;
    position: absolute;
    border-radius: 30px;
    top: 0;
    line-height: 20px;
    letter-spacing: 0;
}

.cs-product-card ul.card-action-buttons {
    margin: -18px 7px 0 0;
    text-align: right;
}

.cs-product-card ul.card-action-buttons li {
    display: inline-block;
    padding-left: 7px;
}

.cs-product {
    width: 20%;
    padding: 10px;
}

.cs-product .card {
    margin: 0;
}

.cs-product .card .card-content {
    padding: 5px 10px;
}

div.cs-see-more:last-of-type {
    width: 100%;
    text-align: center;
    background-color: #4a5568;
    margin-top: 10px;
}

div.cs-see-more a {
    color: #fff;
}

.btn-floating.btn-large {
    width: 56px;
    height: 56px;
}

.btn-floating.btn-large i {
    line-height: 56px;
}

.waves-effect.waves-light {
    background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    transition: 0.3s ease-out;
}

.brown {
    background-color: #516365 !important;
}

.brown.darken-3 {
    background-color: #516365 !important;
}

.card.small .card-image,
.card.medium .card-image,
.card.large .card-image {
    max-height: 60%;
    overflow: hidden;
}

.card.small .card-image+.card-content,
.card.medium .card-image+.card-content,
.card.large .card-image+.card-content {
    max-height: 40%;
}

.card.small .card-content,
.card.medium .card-content,
.card.large .card-content {
    max-height: 100%;
    overflow: hidden;
}

.card.small .card-action,
.card.medium .card-action,
.card.large .card-action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.card.small {
    height: 300px;
}

.card.medium {
    height: 400px;
}

.card.large {
    height: 500px;
}

.card.horizontal {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.card.horizontal.small .card-image,
.card.horizontal.medium .card-image,
.card.horizontal.large .card-image {
    height: 100%;
    max-height: none;
    overflow: visible;
}

.card.horizontal.small .card-image img,
.card.horizontal.medium .card-image img,
.card.horizontal.large .card-image img {
    height: 100%;
}

.card.horizontal .card-image {
    max-width: 50%;
}

.card.horizontal .card-image img {
    border-radius: 2px 0 0 2px;
    max-width: 100%;
    width: auto;
}

.card.horizontal .card-stacked {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

.card.horizontal .card-stacked .card-content {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.card.sticky-action .card-action {
    z-index: 2;
}

.card.sticky-action .card-reveal {
    z-index: 1;
    padding-bottom: 64px;
}

.card .card-image {
    position: relative;
}

.card .card-image img {
    display: block;
    border-radius: 20px 20px 0px 0px;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}

.card .card-image .cs-card-title {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 100%;
    padding: 24px;
}

.card {
    position: relative;
    background-color: #fff;
    transition: box-shadow 0.25s;
    border-radius: 20px;
}

.btn-floating,
.btn-large {
    outline: 0;
}

.btn-floating i,
.btn-large i {
    font-size: 1.3rem;
    line-height: inherit;
}

.btn-large:focus,
.btn-floating:focus {
    background-color: #1d7d74;
}

.btn-large {
    text-decoration: none;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    letter-spacing: 0.5px;
    transition: 0.2s ease-out;
    cursor: pointer;
}

.btn-large:hover {
    background-color: #2bbbad;
}

.btn-floating {
    display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    background-color: #26a69a;
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
    vertical-align: middle;
}

.btn-floating:hover {
    background-color: #26a69a;
}

.btn-floating:before {
    border-radius: 0;
}

.btn-floating.btn-large {
    width: 56px;
    height: 56px;
}

.btn-floating.btn-large i {
    line-height: 56px;
}

.btn-floating i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    line-height: 40px;
}

button.btn-floating {
    border: none;
}

.white {
    background-color: #fff !important;
}

.red.accent-2 {
    background-color: #ff5252 !important;
}

.blue {
    background-color: #2196f3 !important;
}

.card .card-image .cs-card-title {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 100%;
    padding: 15px 60px;
}

.card .cs-card-title {
    font-size: 22px;
    font-weight: 300;
}

.card-content div p {
    margin-bottom: 0px !important;
}

.justify-between {
    justify-content: space-between !important;
}

.overflow-y {
    overflow-y: scroll !important;
}

.h-150vh {
    height: 130vh;
}

.h-140vh {
    height: 170vh !important;
}

.h-160vh {
    min-height: 150vh !important;
    max-height: 160vh !important;
}

.order-details-ul {
    display: grid;
}

@media only screen and (max-width: 480px) {
    .sm-d-block {
        display: block !important;
    }

    .table>:not(:first-child) {
        border-top: 0px solid currentColor !important;
    }

    .cart-table {
        padding: 0px 10px;
    }
}

.order-details-table th,
.order-details-table td {
    border: 1px solid #ddd;
    text-align: left;
}

.order-details-table tr {
    background: #fff;
}

/* Mobile view */
@media screen and (max-width: 768px) {

    .order-details-table table,
    .order-details-table thead,
    .order-details-table tbody,
    .order-details-table th,
    .order-details-table td,
    .order-details-table tr {
        display: block;
    }

    .order-details-table tr {
        margin-bottom: 15px;
        background: #fff;
    }

    .order-details-table th,
    .order-details-table td {
        text-align: left;
        display: flex;
        justify-content: space-between;
    }

    .order-details-table th {
        display: none;
        /* Hide headers */
    }

    .order-details-table td::before {
        content: attr(data-label);
        /* Add a label for each cell */
        font-weight: bold;
        text-transform: capitalize;
    }

    .order-details-table td.sm-title::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: capitalize;
        background: #0da487;
        color: #fff;
        padding: 0px 15px;
        display: block;
        text-align: center;
    }

    .sm-d-block .badge {
        position: absolute;
        font-size: x-large;
        right: 10px;
    }

    .xs-hidden {
        border: none !important;
    }

    .content-padding {
        padding: 15px 0px 25px 0px;
    }
}

.content-padding {
    padding: 15px 0px 50px 0px;
}

.select2-search__field {
    width: 100% !important;
}


.removeBtn {
    width: 20%;
    margin: auto;
    border: 3px solid red;
    color: red;
}

.-data {
    margin-left: 10% !important;
    color: red !important;
}

.top-seller-box {
    border: 1px solid #e7f8f4;
    width: 97%;
    margin: auto !important;
    border-radius: 10px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    background-color: #cbf0e673;
}

/* footer {
    display: none;
} */

.w-20 {
    width: 6% !important;
    margin-left: 2%;
}

/* .w-80 {
    width: 89% !important;
} */

.d-flex {
    display: flex !important;
}



label {
    color: #333 !important;
}

.tabcontent {
    height: auto !important;
}

.tab {
    /* width: 40%; */
    margin: auto;
    display: flex;
    justify-content: space-around !important;
}

.tablinks {
    padding: 5px;
    color: rgb(248, 250, 246);
    background: #e4597a;
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 10px;
    border: none;
}

@media screen and (max-width: 480px) {
    .removeBtn {
        width: 30%;
    }

    .tablinks {
        border: 1px solid #e4597a;
        font-size: 12px;
        width: 30%;
        color: rgb(248, 250, 246);
        background: #e4597a;
        padding: 10px 5px !important;
        border-radius: 10px;
    }

    .tab {
        width: 100% !important;
    }

    #addBtn {
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .tab {
        width: 60%;
    }

    .w-20 {
        width: 10% !important;
        margin-left: 2%;
    }

    .w-80 {
        width: 50% !important;
    }

    .btn-seller-registration {
        width: 100%;
    }

}

.step-indicators {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.step-button {
    background-color: #0da487;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: #fff;
    width: 33.2% !important;
}

.step-button.active {
    background-color: #4CAF50;
    color: white;
}

.step-button.success {
    background-color: #28a745;
    color: white;
}

.step {
    display: none;
}

.step.active {
    display: block;
}

.vscomp-ele {
    max-width: 100% !important;
    border: none;
    font-size: 16px;
}

.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button {
    /* padding: 10px !important; */
    border-radius: 0px 10px 10px 0px;
    box-shadow: none;
}

.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-toggle-button {
    padding-bottom: 2px;

}

/* retsurant-css */

.resto {
    position: relative;
}

.resto-overlay {
    position: absolute;
    width: 100vw;
    height: 70vh;
    top: 0;
    background-color: #080505;
    opacity: 0.5;
    border-radius: 20px !important;
}


.resto {
    height: 70vh;

}

.resto img {
    border-radius: 20px;
}

@media(min-width:641px) {
    .d-lg-none {
        display: none;
    }
}

@media(max-width:640px) {
    .cat-card-header a p {
        font-size: 10px;
        line-height: 1.25;
        text-decoration: none;
        color: #4a5568;
        text-align: center;
        will-change: transform;
        padding: 0px 5px;
        margin-bottom: 5px;
    }

    .cat-card-image img {
        width: 100% !important;
        height: 75px !important;
    }

    .cat-card-header {
        padding-bottom: 0px !important;
    }

    figure {
        margin: 0 0 10px;
    }
}

li svg {
    fill: rgba(254, 254, 254, 0) !important;
}

/* Cat Card */
.cat-card-list {
    width: 100%;
    max-width: 400px;
}

.cat-card {
    background-color: #FFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 50px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    /* padding: 15px; */
    position: relative;
    transition: 0.15s ease-in;
}

.cat-card:hover,
.cat-card:focus-within {
    box-shadow: 0 0 0 1px #ffa53b, 0 10px 60px 0 rgba(0, 0, 0, 0.1);
    transform: translatey(-5px);
}

.cat-card-image {
    overflow: hidden;
}

.cat-card-header {
    /* display: flex;
    align-items: center;
    justify-content: space-between; */
    text-align: center;
    padding: 10px;
}

@media(min-width:641px) {
    .cat-card-header a p {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.25;
        text-decoration: none;
        color: #4a5568;
        text-align: center;
        will-change: transform;
        padding: 0px 15px;
        /* white-space: nowrap;
        overflow: hidden; */
        margin-bottom: 5px;
    }
}


/* .overflow-ellipsis {
    text-overflow: ellipsis;
  } */

.cat-card-header a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.icon-button {
    border: 0;
    background-color: #fff;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    transition: 0.25s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
    z-index: 1;
    cursor: pointer;
    color: #565656;
}

.icon-button svg {
    width: 1em;
    height: 1em;
}

.icon-button:hover,
.icon-button:focus {
    background-color: #EC4646;
    color: #FFF;
}

@media (max-width: 575.98px) {}

@media (max-width: 767.98px) {}

@media (max-width: 991.98px) {}

@media (max-width: 1199.98px) {
    .cat-card-image img {
        width: 100%;
        height: 150px;
    }
}

@media (max-width: 1399.98px) {
    .cat-card-image img {
        width: 100%;
        height: 150px;
    }
}



.position-relative {
    position: relative;
}


.change-address {
    position: absolute;
    right: 10px;
    top: 10px;
    /* border:1px solid #f35221; */
    padding: 0 5px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 18px;
    color: #2159f3;
}

.card-body .btn {
    width: fit-content !important;
}


.fit-content .btn {
    width: fit-content !important;
    float: right;

}

.fit-content {
    padding: 10px;
}

.modal-title {
    font-size: 20px !important;
}


.text-black {
    color: #080505;
}


.payment-btn {
    background-color: #28a745 !important;
    color: white !important;

}


.border-dotted {
    border: 1px dotted lightgray;

}


.box-shadow:hover {
    box-shadow: 0 2px 8px #d4d5d9;
}


.btn-green {
    color: #28a745 !important;
    border: 1px solid #28a745 !important;
}


.bg-lightgrey {
    background-color: rgb(238, 236, 236);
}

/* ---------------cars--------cuystom-----page-------- */
.cars-btn {
    border: 1px solid grey;
    border-radius: 10px;
    padding: 10px;
}


.car-banner {
    padding: 20px;

}

.car-banner {
    width: 100%;
    height: 80vh;
    background-position: center right;
}

.car-btn {
    border: 2px solid orange !important;
    color: orange !important;
}

.car-btn:hover {
    border: none !important;
    color: white !important;
    padding: 8px !important;
}

.black-btn {
    background-color: white !important;
    border: 1px solid rgb(49, 49, 49);
    font-weight: 600 !important;
    font-size: 17px;
    padding: 12px;

    border-radius: 10px;
}

.black-btn:hover {
    background-color: orange !important;
    border: none;
    color: white !important;
    padding: 10px;
}


.form-wrapper {
    width: 80%;
    margin: auto;
    border: 1px solid white2123;
    padding: 20px;
    border-radius: 20px;
    margin-top: -20px;
    background-color: white;
}

.card-img-top {
    background-color: white;
}

.card {
    background: white;
    border-radius: 0.25rem;
    /* box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25); */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card_content {
    padding: 1rem;
    background: white;
}

.card_title {
    color: #555252;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize;

}

.card_text {
    color: #333232;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    font-weight: 400;
}


.card_btn {
    color: #f8f7f7 !important;
    background-color: #2b2a2a !important;
    padding: 0.8rem;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 400;
    display: block;
    width: 100%;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
}

.card_btn:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #000 !important;
    border: 2px solid black;
}


.heading-text {
    text-align: center;
    margin-bottom: 50px !important;

}

.heading-text h1 {
    font-size: 35px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
}


.card_image {
    padding: 20px;
}


.card {
    border-radius: 5px;
}



.bg-lightblue {
    background-color: rgb(246, 253, 255);
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}


.filter-car-btn {
    /* border:1px solid rgb(54, 54, 54); */
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 400;
    font-size: 16px;
    background-color: white !important;
}

.filter-car-btn:hover {
    background-color: #127384 !important;
    border: none;
    color: white !important;
}

.slect-cars {

    text-align: center;
    margin-bottom: 20px;

}

.car-bnner-text {
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 62px !important;
    color: #201F1D;
    margin-top: 20px;
    margin-bottom: 20px;
}

.orange-text {
    color: orange;
    font-weight: 800 !important;
    margin-top: 30px;
    line-height: 50px;

}

.top-subline {
    padding: 10px;
    border-radius: 20px;
    background-color: white;
    font-size: 18px;
}

.car-banner-text {
    font-size: 18px !important;
    word-spacing: 2px;
    line-height: 25px;
    margin-top: 50px;
}

.mx-2 img {
    width: 17px;
}

.listing-details-group {
    background: whitesmoke;
    padding: 10px;
    border-radius: 10px;
}

.card_image img {
    border-radius: 20px !important;
}


.feature-img {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid rgb(202, 202, 202);
    border-radius: 5px;
}

.bg-lightgray {
    background-color: rgb(243, 241, 241);
}

.mt-0 {
    margin-top: 0px !important;
}


.car-slider-img {
    border: 1px solid rgb(211, 208, 208);
    padding: 10px;
    border-radius: 20px;
}

.car-slider-img img {
    /* padding: 10px; */
    border-radius: 20px !important;
}


.bg-blue {
    background-color: rgb(214, 242, 252);
    border-radius: 10px;
}

.nav-tabs .nav-item {
    margin-bottom: 10px !important;
}

.text-underline {
    border-bottom: 4px solid rgb(54, 196, 113);
    margin-bottom: 30px !important;
}


.card-type-resto {
    border: 1px solid grey;
    padding: 10px;
    border-radius: 20px;
}


.dine-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 40%;
}

.dine-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


.pt-mid {
    border: 2px solid #ca548d;
    border-radius: 20px;
    color: #d65685;
    padding-top: 10px;
    width: 50%;
    text-align: center;

}


/* restaurant */


.resto-top-category {
    border: 1px solid black;
    padding: 5px 10px;
    color: white;
    background-color: #1d7d74;
    border-radius: 10px;
    width: 90%;
    text-align: center;
    font-size: 16px;
}

/* ---NEW---STYLE--06-12-24-- */

.type-cover {
    border: 1px solid grey;
    height: 50vh;
    width: 20vw;
    padding: 50px;
    border-radius: 20px;
}


.ordder-image-box img {
    border-radius: 20px 20px 0 0;
}





.svr-btn {
    border: 1px solid rgb(13 164 135);
    background-color: rgb(13 164 135);
    color: #000;
    border-radius: 10px;

}

.btn-cart {
    border: 2px solid black;
    color: white;
    background-color: black;
    border-radius: 20px;
    width: 100%;
}

.border-bottom {
    border-bottom: 1px solid rgb(15, 15, 15);
    margin-top: 5px;
    margin-bottom: 5px;
}

.fw-600 {
    font-weight: 600;
}

.counter {
    background-color: white !important;
}

/* Position the modal at the bottom for small screens (mobile) */
@media (max-width: 600px) {
    .w-xs-100 {
        width: 100vw;
        height: 50vh;
    }

    .modal-dialog-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    .modal.show .modal-dialog-bottom {
        transform: translateY(0);
    }
}

/* Position the modal at the right for medium and large screens */
@media (min-width: 600px) {
    .w-md-80 {
        width: 60% !important;
    }

    .mx-auto {
        margin: auto;
    }

    .h-md-100vh {
        height: 100vh;
        width: 50vw;
    }

    .modal-dialog-right {
        background-color: rgb(230, 232, 233);
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .modal.show .modal-dialog-right {
        transform: translateX(0);
    }
}

.slider-auto {
    width: 100%;
    overflow-x: auto;
}

.fit-content {
    max-width: fit-content;
    padding: 0 5px;
}


.pb-60 {
    padding-bottom: 60px;
}

.brd-dark {
    border: 1px solid #3b3b3b !important;
    border-radius: 10px;

}

.brd-lightgreen {
    border: 1px solid #06705b !important;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    background-color: #0a9e81;
}

.w-fit-cnt {
    width: fit-content !important;
    padding: 10px;
    margin: auto;
}

.brds-10 {
    border-radius: 10px;
}


.mrt-2 {
    margin-top: -10px;
    font-size: 12px !important;
}

.bg-yellow {
    background: #ffd200;
}

.btn-orange {
    background-color: rgb(247, 90, 90);
    border-radius: 20px;

}

.btn-orange:hover {
    background-color: rgb(231, 32, 32);
    border-radius: 20px;

}

.btn-product {
    color: white !important;
    background-color: #0da487 !important;
}

.bg-lightcoral {
    background-color: rgba(209, 244, 252, 0.404);
    padding-top: 20px;
    padding-bottom: 20px;
}

img,
video {
    max-width: none !important;
}

.sticky-sidebar {
    top: 0;
    height: 90vh;
}


.calender-box {
    border: 2px solid #eb7c89;
    border-radius: 10px;
}

.calendar-container {
    overflow-x: auto !important;
    white-space: nowrap;
}

.day-labels {
    display: inline-block;
}

.day-labels div,
.col-16 {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    text-wrap: balance !important;
    white-space: nowrap;
    background: #0baf9a;
}

.col-16:hover {
    background-color: #ffc107;
    color: #222;
}

.col-16.active {
    border-color: #ffc107;
    background-color: #ffc107;
    color: #222;
}

.col-16.appointment {
    border-color: #dc3545;
    background-color: #dc3545;
    color: white;
}

.col-16.booking {
    border-color: #dc3545;
    background-color: green;
    color: white;
}

.profile-box {
    height: 120px;
    width: 100%;
    margin: 0 auto 0px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.3s ease all;
    box-shadow: 0 6px 7px rgba(0, 0, 0, 0.5)
}

.profile-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    border-radius: 4px;
    transition: 1s ease all;
}


.profile-box .box-content {
    color: white;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 5px 20px 0px;
    background: rgba(0, 0, 0, 0.7);
    transition: 0.3s ease all;
}

.profile-box .box-content h3 {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.profile-box .social-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-box .social-links li {
    width: 15px;
    height: 15px;
    background: #efefef;
    display: inline-block;
    margin-right: 4px;
    border-radius: 50%;
    transition: 0.3s ease all;
    transform: translateY(100px);
}

.profile-box .social-links li:nth-child(2) {
    transition-delay: 0.15s;
}

.profile-box .social-links li:last-child {
    transition-delay: 0.25s;
}

.profile-box:hover .social-links li {
    transform: none;
}

.profile-box .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #222;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
}

.profile-box.active {
    border: 1px solid #0baf9a;
}

.profile-box.active .box-content {
    background-color: #0baf9a;
}

.tag-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tag-container::-webkit-scrollbar {
    display: none;
}

/* Tag design */
.tag {
    display: inline-flex;
    align-items: center;
    background-color: #0baf9a;
    color: white;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag.active {
    background-color: #ffc107;
    color: #000;
}

.tag:hover {
    background-color: #097c6d;
}

/* Close button */
.tag-close {
    margin-left: 10px;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

.tag-close:hover {
    color: #ff5e57;
}

.light-black-bg {
    background-color: rgb(0 0 0 / 19%);
}

.light-yellow-color {
    color: rgb(253 255 0);
}



/* ------------coaching-----page----------- */
.about-heading {
    color: #000;
    font-size: 28px;
    font-weight: 700;
    line-height: normal;

}

.count-box {
    background: #fff;
    border-radius: 6px;
    padding: 20px 15px;
    margin-bottom: 30px;
    text-align: center;
}

.w-fit {
    width: fit-content !important;
}

.w-10 {
    width: 20%;
}

.pos-rel {
    position: relative;
}

.shop-open-btn {
    /* position:absolute;
  bottom:10px;
  left:35%; */
    width: 110px;
    border: 1px solid green;
    background-color: rgb(214, 252, 214);
    color: rgb(3, 68, 3);
    font-size: 16px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
}

.shop-close-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    border: 1px solid rgb(104, 8, 8);
    background-color: rgb(184, 247, 184);
    color: rgb(179, 16, 16);
    font-size: 16px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
}

.do {
    height: 10px;
    width: 10px;
    border-radius: 20px;
    background-color: green;
    z-index: 10;
}

.nav-tab,
.nav-tab2 {
    overflow-x: auto !important;
}


/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.nav-tab::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar */
}

/* Hide scrollbar for Firefox */
.nav-tab {
    scrollbar-width: none;
    /* Hide the scrollbar */
}

/* Optional: Add smooth scrolling */
.nav-tab {
    scroll-behavior: smooth;
}




/* ------------------------------------------------ */





.card-codepen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;

    background: linear-gradient(#f5aa54, #FDE8C9);

    border-radius: 8px;
}

.content-codepen {
    display: flex;
    flex-direction: column;
    height: 88%;
    width: 88%;
    background-color: white;
    border-radius: 8px;
}

.top-codepen {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20%;
    background-color: white;
}

.color-codepen {
    height: 20px;
    width: 20px;
    margin-left: 5px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: orange;
}


.middle-codepen {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: linear-gradient(#F9BC61, #FDE8C9 75%);

}

.bottom-codepen {
    height: fit-content !important;
    padding-bottom: 10px;
}

/* -------chadawa---card---- */



.a-box {
    display: inline-block;
    width: 100%;
    text-align: center;
}






.text-container {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 120px 20px 20px 20px;
    border-radius: 20px;
    background: #fff;
    margin: -120px 0px 0px 0px;

}







.puja-items li {
    font-size: 18px !important;
}



/* ----book-----cards----design---- */
.card-code {
    position: relative;
    padding: 1rem;

    border-radius: 0.9rem;

    color: var(--text);
    border: 1px solid grey;
    cursor: pointer;
}

.card-blue-code {
    background: var(--blue-card);
}

.product-image-code {
    height: auto;
    width: 100%;
    /* transform: translate(0, -1.5rem); */
    /* transition: transform 500ms ease-in-out; */
    filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4));
    margin-bottom: 20px;
}

.product-info-code {
    text-align: center;
}



.product-info-code h2 {
    font-size: 1.4rem;
    font-weight: 600;
}

.product-info-code p {
    margin: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-code {
    font-size: 1.2rem;
    font-weight: 500;
}

.btn-code {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 0.8rem;
}

.buy-btn-code {
    background-color: var(--btn);
    padding: 0.6rem 3.5rem;
    font-weight: 600;
    font-size: 1rem;
    transition: 300ms ease;
}

.buy-btn-code:hover {
    background-color: var(--btn-hover);
}

.fav-code {
    box-sizing: border-box;
    background: #fff;
    padding: 0.5rem 0.5rem;
    border: 1px solid#000;
    display: grid;
    place-items: center;
}

.svg-code {
    height: 25px;
    width: 25px;
    fill: #fff;
    transition: all 500ms ease;
}

.fav-code:hover .svg-code {
    fill: #000;
}


.ps-10 {
    -webkit-padding-start: 2.5rem !important;
    padding-inline-start: 2.5rem !important;
}

.start-3 {
    width: 18px;
    height: 18px !important;
    top: 10px !important;
    inset-inline-start: 0.75rem !important;
}



/* ----------------------------------------------------------------------- */


.radius-10 {
    border-radius: 10px !important;
}

.border-info {
    border-left: 5px solid #0dcaf0 !important;
}

.border-danger {
    border-left: 5px solid #fd3550 !important;
}

/* .border-success {
    border-left: 5px solid  #15ca20 !important;
} */
.border-warning {
    border-left: 5px solid #ffc107 !important;
}


.card-recharge {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
}

.bg-gradient-scooter {
    background: #17ead9;
    background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
    background: linear-gradient(45deg, #17ead9, #6078ea) !important;
}

.widgets-icons-2 {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 27px;
    border-radius: 10px;
}

.rounded-circle {
    border-radius: 50% !important;
}


/* --------- */

.nav-tabs:not(.flex-column, .flex-sm-column, .flex-md-column, .flex-lg-column, .flex-xl-column) {
    border-bottom: 1px solid #d7dee3;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs.style-3 .nav-item .nav-link {
    color: #8298af;
    margin: 0 10px;
    padding: 0.6rem 0.9375rem;
    text-align: center;
    font-size: 13px;
    font-size: 0.8125rem;
}

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


/* WebKit Browsers (Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
    width: 12px;
    /* Width of the scrollbar */
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #e0dfdf !important;
    /* Color of the thumb */
    border-radius: 10px;
    /* Round the corners of the thumb */
    opacity: 0.7 !important;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #b4b2b2 !important;
    /* Darker thumb when hovered */
    opacity: 0.8 !important;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Color of the track */
    border-radius: 10px;
    /* Round the corners of the track */
}

/* Firefox */
.scroll-container {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1;
    /* Thumb and track colors */
}

.btn-green {
    background: #0baf9a;
    color: white !important;
}

.text-green {

    color: #0baf9a !important;
}

.master-cart-seller {
    background-color: rgb(239, 248, 247);
    border: 1px;

}

.btn-outline-danger {
    border: 1px solid #0a9e81
}

.icn-white {
    color: white;
}

.bg-green {
    border: 1px solid #0a9e81;
    background-color: #0baf9a;
    padding: 5px;
    border-radius: 10px;
}

.brds-5 {
    border-radius: 10px;
}

.product-rv {
    position: absolute;
    bottom: 10px;
    left: 10px;
    border: 1px solid #0a9e81;
    background-color: #0a9e81;
    color: white;
    border-radius: 5px;
    padding: 5px;
}

.product-rv p {
    color: white;
}

.product-list a img {
    margin-bottom: 30px;
}


.w-90 {
    width: 90% !important;
}


.mb-50 {
    margin-bottom: 80px;
    margin-top: 15px;
}


.h-icon {
    height: 30px;
}


/* ---------------------------------------------------------- */
.h-badge {
    background-color: #0a9e81;
    width: fit-content;
    font-weight: 600;
    position: absolute;
    z-index: 2;
}

.h-badge p {
    color: white;
    padding: 7px 15px;

}

.relative {
    position: relative;

}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    color: white;
    font-size: 16px;
    font-weight: 600;

}

.overlay-property {
    background-color: #000000de;
    opacity: 0.4;
    width: 100%;
    height: 105px;
    position: absolute;
    top: 0;
}




:root {
    --switches-bg-color: #f0f3f2;
    --switches-label-color: white;
    --switch-bg-color: white;
    --switch-text-color: #030303;
}


.switches-container {
    width: 16rem;
    position: relative;
    display: flex;
    padding: 0;
    position: relative;
    background: var(--switches-bg-color);
    line-height: 3rem;
    border-radius: 3rem;
    margin-left: auto;
    margin-right: auto;
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: var(--switches-label-color);
}

/* switch highlighters wrapper (sliding left / right)
    - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0.15rem;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
    /* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
    border-radius: 3rem;
    background: var(--switch-bg-color);
    height: 100%;
}

/* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status
*/
.switch div {
    width: 100%;
    text-align: center;
    opacity: 0;
    display: block;
    color: var(--switch-text-color);
    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
    transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
    transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
    opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
    opacity: 1;
}



/* ----------------------------------------------------- */


.justify-between {
    justify-content: space-between !important;
}


.boxed label {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 2px 9px;
    border: solid 2px #ccc;
    transition: all 0.3s;
}

.boxed input[type="radio"] {
    display: none;
}

.boxed input[type="radio"]:checked+label {
    border: solid 2px green;
}



.custom-range-slider {
    width: 300px;
    margin: auto;
    text-align: center;
    position: relative;
    height: 6em;
}

.custom-range-slider svg,
.custom-range-slider input[type=range] {
    position: absolute;
    left: 0;
    bottom: 0;
}

input.slider-input-start,
input.slider-input-end {
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1.6em;
    -moz-appearance: textfield;
}

input.slider-input-start::-webkit-outer-spin-button,
input.slider-input-end::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input.slider-input-start:invalid,
input.slider-input-end:invalid,
input.slider-input-start:out-of-range,
input.slider-input-end:out-of-range {
    border: 2px solid #ff6347;
}

input.slider-range-start,
input.slider-range-end {
    -webkit-appearance: none;
    width: 100%;
}

input.slider-range-start:focus,
input.slider-range-end:focus {
    outline: none;
}

input.slider-range-start:focus::-webkit-slider-runnable-track,
input.slider-range-end:focus::-webkit-slider-runnable-track {
    background: #2497e3;
}

input.slider-range-start:focus::-ms-fill-lower,
input.slider-range-end:focus::-ms-fill-lower {
    background: #2497e3;
}

input.slider-range-start:focus::-ms-fill-upper,
input.slider-range-end:focus::-ms-fill-upper {
    background: #2497e3;
}

input.slider-range-start::-webkit-slider-runnable-track,
input.slider-range-end::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: #2497e3;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input.slider-range-start::-webkit-slider-thumb,
input.slider-range-end::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}

input.slider-range-start::-moz-range-track,
input.slider-range-end::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: #2497e3;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input.slider-range-start::-moz-range-thumb,
input.slider-range-end::-moz-range-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
}

input.slider-range-start::-ms-track,
input.slider-range-end::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input.slider-range-start::-ms-fill-lower,
input.slider-range-end::-ms-fill-lower,
input.slider-range-start::-ms-fill-upper,
input.slider-range-end::-ms-fill-upper {
    background: #2497e3;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input.slider-range-start::-ms-thumb,
input.slider-range-end::-ms-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
}



.mx-auto {
    width: 95%;
    margin: auto;
}

.btn-green {
    background-color: #0baf9a;
}

.text-green {
    color: #0baf9a;

}



/*---------- image-gallery-codepen -------------------*/
.pure-slider {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.pure-slider .slides {
    overflow: hidden;
    overflow: hidden;
    width: 100%;
    height: 70vmin;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pure-slider .slides>li {
    width: 100%;
    height: 70vmin;
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.pure-slider .slides>li>img {
    width: 100%;
    height: auto;
}

/*
.pure-slider .slides > li:first-child:not(:target) {
	z-index: 1;
	-webkit-transform: translateY(0%);
	        transform: translateY(0%);
}
*/
.pure-slider .thumbnails {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pure-slider .thumbnails>li {
    float: left;
    width: 20%;
}

.pure-slider .thumbnails>li>a {
    display: block;
}

.pure-slider .thumbnails>li>a>img {
    width: 100%;
    height: auto;
}

.pure-slider .slides li:target {
    z-index: 3;
    -webkit-animation: slide 1s 1;
}

.pure-slider .slides li:not(:target) {
    -webkit-animation: hidden 1s 1;
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes slide {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes hidden {
    0% {
        z-index: 2;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    100% {
        z-index: 2;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes hidden {
    0% {
        z-index: 2;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    100% {
        z-index: 2;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}


/* ------------------------------------------------------------- */

.location-rounded {
    padding: 15px;
    padding-left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.doctor-img {
    width: 100%;
    background-image: url('../images/pathology/doctor.jpg');
    height: 150px;
    background-position: center;
    border-radius: 20px;
}


.price-tag {

    background-color: #994efc;
    padding: 5px 10px;
    border-radius: 20px;
}

.price-tag .p {
    color: lightgray;

}

.grey-card {
    background-color: rgb(245, 244, 244);
}

/*  */


.arow-btn {
    width: 60px;
    height: 60px;
    padding-left: 13px;
    padding-top: 13px;
    border-radius: 50%;
    border: 1px solid black;
    background-color: black;
}


.arow-btn i {
    font-size: 30px;
}

.border-dotted {
    /* padding: 5px; */
    border: none;
    border-bottom: 2px dotted rgb(128, 127, 127) !important;
    width: 100%;
    margin: auto;
}

.bottom-0 {
    position: absolute;
    bottom: 0px;
    margin-bottom: 10px;
    right: 20px;
}

.p-relative {
    position: relative;
}



/* Style for the specific checkbox with class 'circle-checkbox' */
input.circle-checkbox {
    -webkit-appearance: none;
    /* Remove default checkbox appearance */
    -moz-appearance: none;
    /* Remove default checkbox appearance */
    appearance: none;
    /* Remove default checkbox appearance */
    width: 20px;
    /* Set the width of the checkbox */
    height: 20px;
    /* Set the height of the checkbox */
    border-radius: 50%;
    /* Make it circular */
    border: 2px solid #333;
    /* Set the border color */
    position: relative;
    /* Position the checkmark inside */
    cursor: pointer;
    /* Change the cursor to pointer */
    transition: all 0.3s ease;
    /* Smooth transition */
}

/* Style when checkbox is checked */
input.circle-checkbox:checked {
    background-color: black;
    /* Set background color when checked */
    border-color: black;
    /* Change border color when checked */
}

/* Add checkmark when the checkbox is checked */
input.circle-checkbox:checked::before {
    content: '\2713';
    /* Unicode for checkmark symbol */
    font-size: 16px;
    /* Adjust checkmark size */
    color: white;
    /* Change the color of the checkmark */
    position: absolute;
    /* Position the checkmark in the center */
    top: 50%;
    /* Center the checkmark vertically */
    left: 50%;
    /* Center the checkmark horizontally */
    transform: translate(-50%, -50%);
}



/* Customize inactive tabs */
.nav-pills .nav-link {
    color: black;
    /* Inactive text color */
    background-color: white;
    /* Inactive tab background */
    border: 1px solid #ccc;
    /* Border color for inactive tabs */
    border: 1px solid grey;
    border-radius: 15px;
    font-weight: 700;
}

/* Customize active tab */
.nav-pills .nav-link.active {
    color: #fff;
    /* Active text color */
    background-color: #050505;
    /* Active tab background color */
    border-color: #030303;
    /* Border color for active tab */
}


.border-dark {
    border: 1px solid rgb(37, 37, 37);

}

.border-dark:hover {
    background-color: #000;
    color: white;
}



/* report detail page */
.pathology-span {
    background: #0c8f75;
    color: white;
    border-radius: 30px;
    padding: 6px 12px;
}


.bg-gray {
    background-color: rgb(243, 243, 243);
    padding: 20px
}

.shop-icon {
    width: 30px;
    margin-right: 5px;
}


.seller-address span {
    font-size: 16px;
}


.shop-banner-image {
    width: 100%;
    height: 220px;
    background-image: url(../images/banner/shop-closed.png);
    background-size: cover;

}


.border-top-success {
    border-top: 4px solid #0a9e81;
    border-radius: 20px;
}

/* .slick-track{
    width: 100% !important;
} */



/* ----------------------------//////////////////////////-------------------------- */

/* --------------- */
.search-box .clear-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2rem;
    color: #888;
}

.item {
    min-width: 90px !important;
    text-align: center !important;
}

.item a {
    text-align: center !important;
}

.item {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Hide the tooltip text by default */
.tooltip-text {
    visibility: hidden;
    width: max-content;
    max-width: 200px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    /* position above the item */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 14px;
    white-space: nowrap;
}

/* Tooltip arrow */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    /* arrow at the bottom of tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}

/* Show tooltip on hover */
.item:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.blinking-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #b1b1b1;
    animation: blink 1.2s infinite;
    color: #b1b1b1;
    font-size: 40px;
    line-height: 1;
}

.blinking-circle i {
    display: block;
    margin: 0;
}

.no-scrollbar {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* =========================
   Active category indicator
   (teal #0baf9a)
========================= */

.category-wrap.category-active {
    position: relative;
    border-radius: 14px;
    padding: 6px;

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px dashed rgba(0, 0, 0, 0.06);

    transition: transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    transform: translateY(-3px);

    /* important: ring should not be clipped */
    overflow: visible;
}

/* hover lift */
.category-wrap.category-active:hover {
    transform: translateY(-7px);
    box-shadow: 0 14px 32px rgba(11, 175, 154, 0.25);
}

/* focus accessibility */
.category-wrap.category-active:focus,
.category-wrap.category-active:focus-visible {
    outline: 2px solid rgba(11, 175, 154, 0.18);
    outline-offset: 4px;
}

/* =========================
   Small static active dot
========================= */
.category-wrap.category-active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;

    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0baf9a;

    /* soft constant glow */
    /* box-shadow:
        0 0 4px rgba(11, 175, 154, 0.9),
        0 0 8px rgba(11, 175, 154, 0.45); */
    box-shadow:
        0 0 6px rgba(11, 175, 154, 1),
        0 0 14px rgba(11, 175, 154, 0.75),
        0 0 22px rgba(11, 175, 154, 0.45);


    z-index: 2;
}

/* =========================
   Pulse ring (outer)
========================= */
.category-wrap.category-active::before {
    content: "";
    position: absolute;

    /* perfectly centered with dot */
    top: 6px;
    right: 6px;

    width: 9px;
    height: 9px;
    border-radius: 50%;

    border: 2px solid rgba(11, 175, 154, 0.5);
    pointer-events: none;

    animation: activeRingPulse 3.8s infinite cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;

    z-index: 1;
}

/* =========================
   Ring animation
========================= */
@keyframes activeRingPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    65% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* =========================
   Process category indicator
   (amber #ffc107)
========================= */

.category-wrap.category-process {
    position: relative;
    border-radius: 14px;
    padding: 6px;

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px dashed rgba(0, 0, 0, 0.06);

    transition: transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    transform: translateY(-3px);
    overflow: visible;
}

/* hover lift */
.category-wrap.category-process:hover {
    transform: translateY(-7px);
    box-shadow: 0 16px 38px rgba(255, 143, 0, 0.35);
}

/* focus accessibility */
.category-wrap.category-process:focus,
.category-wrap.category-process:focus-visible {
    outline: 2px solid rgba(255, 143, 0, 0.25);
    outline-offset: 4px;
}

/* small static dot */
.category-wrap.category-process::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;

    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff8f00;

    box-shadow:
        0 0 6px rgba(255, 143, 0, 1),
        0 0 14px rgba(255, 143, 0, 0.75),
        0 0 24px rgba(255, 143, 0, 0.45);

    z-index: 2;
}

/* pulse ring */
.category-wrap.category-process::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;

    width: 9px;
    height: 9px;
    border-radius: 50%;

    border: 2.5px solid rgba(255, 143, 0, 0.65);
    pointer-events: none;

    animation: processRingPulse 3.8s infinite cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;

    z-index: 1;
}

/* Ring animation */
@keyframes processRingPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    65% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* =========================
   Pending category indicator
   (premium red #ff3b30)
========================= */

.category-wrap.category-pending {
    position: relative;
    border-radius: 14px;
    padding: 6px;

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px dashed rgba(0, 0, 0, 0.06);

    transition: transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    transform: translateY(-3px);
    overflow: visible;
}

.category-wrap.category-pending:hover {
    transform: translateY(-7px);
    /* box-shadow: 0 14px 32px rgba(255, 59, 48, 0.25); */
    box-shadow: 0 16px 38px rgba(154, 160, 166, 0.25);
}

.category-wrap.category-pending:focus,
.category-wrap.category-pending:focus-visible {
    /* outline: 2px solid rgba(255, 59, 48, 0.18); */
    outline: 2px solid rgba(154, 160, 166, 0.25);
    outline-offset: 4px;
}

.category-wrap.category-pending::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;

    width: 5px;
    height: 5px;
    border-radius: 50%;
    /* background: #ff3b30; */
    background: #9aa0a6;

    /* box-shadow:
        0 0 4px rgba(255,59,48,0.9),
        0 0 8px rgba(255,59,48,0.45); */
    /*  box-shadow:
    0 0 4px rgba(154,160,166,0.9),
    0 0 10px rgba(154,160,166,0.55); */

    box-shadow:
        0 0 6px rgba(154, 160, 166, 1),
        0 0 14px rgba(154, 160, 166, 0.75),
        0 0 26px rgba(154, 160, 166, 0.45);

    z-index: 2;
}

.category-wrap.category-pending::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;

    width: 9px;
    height: 9px;
    border-radius: 50%;

    /* border: 2px solid rgba(255,59,48,0.5); */
    border: 2px solid rgba(154, 160, 166, 0.55);
    pointer-events: none;

    /* animation: pendingRingPulse 2.2s infinite cubic-bezier(.4,0,.2,1); */
    animation: pendingRingPulse 3.8s infinite cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;

    z-index: 1;
}

@keyframes pendingRingPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    65% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ------------------restaurant map---------------------- */

.direction-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border: 2px solid #0baf9a;
    color: #0baf9a;
    font-size: 18px;
    text-decoration: none;
}

.direction-btn:hover {
    background: #0baf9a;
    color: white;
}

.restaurant-details .card {
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

/* ------------------------ */

/* FORCE restaurant list to be normal document flow (not absolute overlay) */
#restaurantList {
    position: static !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* ----------------------------------------- */


.leaflet-control-fitse {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    font-size: 42px;
    padding-bottom: 10px;
}

.leaflet-control-fitse:hover {
    background: #f3f7ff;
}

.leaflet-control-fitse i {
    font-size: 16px;
    color: #1b6eff;
}

@keyframes shakeX {

    10%,
    90% {
        transform: translateX(-1px);
    }

    20%,
    80% {
        transform: translateX(2px);
    }

    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }

    40%,
    60% {
        transform: translateX(4px);
    }
}

.leaflet-control-fitse.shake {
    animation: shakeX 0.6s ease;
}


/* ------------------------------------------ */

/* Container for restaurant cards */
.restaurant-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #eef3f7;
    padding: 12px 14px;
    margin-bottom: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    /* Ensures left and right columns are spaced correctly */
}

/* Left column: Restaurant name, address, timing */
.left-col {
    flex: 1;
    /* Ensures left column takes up available space */
    padding-right: 12px;
    /* Adds some space between the two columns */
}

.left-col h6 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f1724;
}

.address {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 8px;
    line-height: 1.25;
}

.restaurant-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
}

.restaurant-info-row i {
    font-size: 14px;
    color: #0f1724;
    /* Dark color for icons */
}

/* Right column: Distance, ETA, and highway distance */
.right-col {
    text-align: right;
}

.distance-pill {

    color: #0560d6;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.restaurant-info-row small {
    color: #556070;
    /* Muted color for small text */
}

/* Small muted text for info rows */
.small-muted {
    color: #556070;
    font-size: 12px;
}

/* FontAwesome Icon adjustments */
.restaurant-info-row i {
    font-size: 14px;
    color: #0f1724;
}

/* Scrollbar styles */
#restaurantList::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

#restaurantList::-webkit-scrollbar-thumb {
    background: rgba(45, 55, 72, 0.18);
    border-radius: 6px;
}

#restaurantList::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .restaurant-card {
        flex-direction: column;
        /* Stack the columns for mobile */
        padding: 12px;
    }

    .left-col,
    .right-col {
        text-align: left;
        margin-bottom: 12px;
    }

    .right-col {
        text-align: left;
    }
}

.route-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 420px;
    margin: auto;
}

.form-label-modern {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
}

.modern-input {
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.modern-input:focus {
    border-color: #0baf9a;
    box-shadow: 0 0 0 0.15rem rgba(11, 175, 154, 0.25);
}

.suggest-box {
    position: absolute;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 2000;
    display: none;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn-search-modern,
.btn-reset-modern {
    padding: 8px 14px;
    /* height reduced */
    font-size: 14px;
    border-radius: 24px;
}

/* Search Button */
.btn-search-modern {
    background: #0baf9a;
    color: #fff;
    border: none;
}

.btn-search-modern:hover {
    background: #099a87;
}

/* Reset Button */
.btn-reset-modern {
    background: #f3f3f3;
    color: #444;
    border: none;
}

.btn-reset-modern:hover {
    background: #e6e6e6;
}



/* ----------------------User Dashboard-------------------------- */

.account-page {
    background: #f1f3f6;
    padding-bottom: 30px;
}

.account-header {
    background: #fff;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.user-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.user-text {
    display: flex;
    flex-direction: column;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-pencil {
    color: #0aa38f;
    display: inline-flex;
}

.edit-pencil i {
    width: 12px !important;
    height: 12px !important;
}

.rv-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f1f8ff;
    border-radius: 8px;
    color: #0aa38f;
    min-width: 70px;
    justify-content: center;
}

.rv-box i {
    font-size: 20px;
}

.rv-label {
    font-size: 11px;
    color: #666;
}

.rv-amount {
    font-weight: 600;
    font-size: 14px;
}

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

.edit-btn {
    font-size: 13px;
    color: #0aa38f;
    font-weight: 500;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
    padding-bottom: 6px;
    background: #f1f3f6;
}

.quick-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #333;
}

.quick-card i {
    font-size: 18px;
    color: #0aa38f;
}

.quick-card span {
    font-weight: 500;
}

.acc-section {
    background: #fff;
    margin-top: 10px;
}

.acc-section-title {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: #666;
    border-bottom: 1px solid #eee;
}

.acc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acc-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: #222;
    border-bottom: 1px solid #eee;
}

.acc-list li a i:last-child {
    margin-left: auto;
    color: #3f3e3ede;
}

.logout-wrap {
    padding: 16px;
}

.logout-btn {
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    padding: 12px;
    font-weight: 500;
    color: #d32f2f;
    border-radius: 6px;
}

.rv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 8px;
    background: #f1f8ff;
    color: #0aa38f;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
}

.rv-badge i {
    font-size: 14px;
}

/* SECTION GRID */
.wallet-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 15px;
}

/* MOBILE */
@media (max-width: 768px) {
    .wallet-section {
        grid-template-columns: 1fr;
    }
}

/* CARD BASE */
.wallet-card {
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: 0.25s ease;
}

/* HOVER EFFECT */
.wallet-card:hover {
    transform: translateY(-3px);
}

/* PRIMARY CARD */
.wallet-card.primary {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
}

/* EARNING CARD */
.wallet-card.earning {
    background: linear-gradient(135deg, #6bc37a, #4caf50);
    color: #fff;
}

/* HEADER */
.wallet-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    opacity: 0.9;
}

/* BADGE */
.badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.25);
}

.badge.light {
    background: rgba(255, 255, 255, 0.3);
}

/* ICON */
.wallet-icon {
    margin-top: 10px;
    font-size: 20px;
}

/* AMOUNT */
.wallet-amount {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.wallet-amount.dark {
    color: #fff;
}

/* INFO TEXT */
.wallet-info {
    margin-top: 10px;
    font-size: 12px;
}

/* GREEN TEXT */
.wallet-info.green {
    opacity: 0.9;
}

/* POSITIVE BADGE */
.wallet-info.positive {
    background: rgba(34, 197, 94, 0.25);
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
}

.order-status-strip {
    margin: 8px 0 10px;
    padding: 9px 8px 7px;
    border-radius: 11px;
    background: linear-gradient(180deg, #f6fffb 0%, #effbf7 100%);
    /* border: 1px solid #d8f1e7; */
    border: 1px solid rgba(11, 175, 154, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.order-status-strip.danger {
    background: linear-gradient(180deg, #fff8f8 0%, #fff0f0 100%);
    border-color: #ffcaca;
}

.order-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
    align-items: start;
    padding: 0;
}

.order-progress-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    text-align: center;
}

.order-progress-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(50% + 10px);
    width: calc(100% - 20px);
    height: 3px;
    background: #dfe5e2;
    border-radius: 999px;
    z-index: -1;
}

.order-progress-step.line-done:not(:last-child)::after {
    background: linear-gradient(90deg, #1fbf7a, #20c5a6);
    box-shadow: 0 1px 4px rgba(11, 175, 154, 0.18);
}

.order-progress-dot {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: #edf2f0;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #cfdad5;
}

.order-progress-step.done .order-progress-dot {
    background: linear-gradient(135deg, #23bd72, #0baf9a);
    box-shadow: 0 3px 8px rgba(11, 175, 154, 0.28);
}

.order-progress-step.done .order-progress-dot::after {
    content: "✓";
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.order-progress-label {
    display: block;
    font-size: 9.5px;
    line-height: 1.1;
    color: #718087;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-progress-step.done .order-progress-label {
    color: #24764d;
    font-weight: 800;
}

.order-progress-time {
    display: block;
    margin-top: 2px;
    font-size: 7.8px;
    line-height: 1.05;
    color: #839197;
    font-weight: 600;
    white-space: normal;
}

.order-progress-step.done .order-progress-time {
    color: #3e7f55;
}

.order-terminal-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    color: #d92d20;
    font-size: 11px;
    font-weight: 800;
}

.order-terminal-status::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    background: #ef4444;
    font-size: 11px;
    font-weight: 900;
}

.order-terminal-time {
    color: #9b1c13;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 380px) {
    .order-status-strip {
        padding: 8px 6px 6px;
    }

    .order-progress-label {
        font-size: 9px;
    }

    .order-progress-time {
        font-size: 7.5px;
    }

    .order-progress-step:not(:last-child)::after {
        left: calc(50% + 9px);
        width: calc(100% - 18px);
    }
}