/* Common */
a:focus {
    color: unset;
    text-decoration: none;
}

a:focus-visible {
    color: unset !important;
    text-decoration: none;
}

a:focus-within {
    color: unset !important;
    text-decoration: none;
}


a:focus {
    color: unset !important;
}

h1 {
    font-family: 'Nexa-Heavy';
    line-height: 64px;
    font-size: 46px;
    color: #333333;
}

h2 {
    font-family: 'Nexa-Heavy';
    line-height: normal;
    font-size: 26px;
    color: #333333;
}

h3 {
    font-family: 'Nexa-Heavy';
    line-height: normal;
    font-size: 18px;
    text-transform: uppercase;
    color: #333333;
}

h4 {
    font-family: 'Nexa-Heavy';
    line-height: normal;
    font-size: 14px;
    text-transform: uppercase;
    color: #333333;
}

/* Keep legacy paragraph sizing but use Inter instead of Nexa */
p {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 24px;
    font-size: 16px;
    color: #000000;
}

button {
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    color: #FFFFFF;
}

/* ------------------------------------------------------------------
   Modern font stack for Admin panel (Inter + Montserrat)
   ------------------------------------------------------------------ */

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1,
h2,
h3,
h4,
.page-title,
.page-subtitle,
.tab-button,
.status-badge,
.order-number,
.customer-name,
.order-total-amount strong,
.pagination-page-btn,
.pagination-nav-btn {
    font-family: 'Montserrat', 'Nexa-Bold', 'Nexa-Heavy', system-ui, sans-serif;
}

.orders-page-container,
.admin-header,
.sidebar-nav,
.sidebar-footer,
.orders-list-container,
.order-card,
.filter-dropdowns,
.filter-date-wrapper,
.pagination-container {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Common */
/* Header */
.fixed-top {
    min-height: 30px;
    background-color: #2a8f38;
    margin-bottom: 15px;
}

.fixed-top ul {
    list-style: none;
    overflow: hidden;
    float: right;
    margin-top: 7px;
}

.fixed-top ul li {
    display: inline;
    font-family: 'Nexa-Regular';
    line-height: 18px;
    font-size: 14px;
    color: #F2F2F2;
    margin: 5px 20px;
}

.fixed-header ul {
    list-style: none;
    overflow: hidden;
    float: right;
}

.fixed-header ul li {
    font-family: 'Nexa-Regular';
    line-height: normal;
    font-size: 14px;
    text-align: center;
    display: inline;
    color: #2a8f38;
    margin: 15px 25px;
}

.button-signup {
    padding: 10px 25px;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 3px;
    color: #FFFFFF !important;
    margin: 10px;
}

.sign-in a {
    margin: 8px;
    color: #2a8f38 !important;
}

.search-header {
    height: 29px;
    width: 29px;
    color: #828282;
    margin-right: 23px;
}

.search-text-header {
    margin-top: 8px;
}

.search-text-header p {
    line-height: 24px;
    font-size: 16px;
    color: #BDBDBD;
}

#search-header {
    width: 92%;
    border: none;
}

/* Header */
/*Index */
.banner-section {
    /*background-image: url('../img/main-back.png'), url('../img/main-back-2.png');
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;*/
    background-image: url('../img/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    min-height: 600px;
    margin-top: 30px;

}

.banner-text h1 {
    font-family: 'Nexa-Bold';
    line-height: 64px;
    font-size: 46px;
    color: #FFFFFF;
    padding: 143px 0px 43px 0px;
    text-align: center;
}

.banner-text p {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 24px;
    font-size: 16px;
    color: #FFFFFF;
    /*padding: 143px 0px 43px 0px;*/
    text-align: center;
    padding: 0 256px;
    margin-bottom: 30px;
}

.button-signup-admin {
    /* padding: 20px 24px; */
    border: 1px solid #2a8f38;
    border-radius: 5px;
    margin: auto;
    display: block;
    width: 270px;
    height: 54px;
}

.button-signin-admin {
    /* padding: 20px 24px; */
    border: 1px solid #fea100;
    border-radius: 5px;
    background: #fea100;
    margin: auto;
    display: block;
    width: 270px;
    height: 54px;
}

.search-text {
    background: #FFFFFF;
    border-radius: 5px;
    height: 54px;
    padding: 17px 0 19px 23px;
    color: #828282;
    font-size: 16px;
    font-family: 'Nexa-Book';
}

.delivery {
    float: right;
    color: #2a8f38 !important;
    padding-right: 14px;
}

.down-arrow {
    padding-left: 11px;
    display: inline-block;
}

#dropdown-content-delivery {
    color: #2a8f38 !important;
    background-color: #FFFFFF;
    padding: 15px;
    text-align: right;
}

#dropdown-content-delivery ul {
    list-style: none;
}

.button-find {
    padding: 20px 25px 18px;
    border-radius: 5px;
    text-align: center;
    font-family: 'nexa-bold';
}

.index-first-content {
    margin-top: -50px;
}

.index-content h2 {
    font-family: 'Nexa-Heavy';
    line-height: normal;
    font-size: 26px;
    color: #000000;
    margin-bottom: 50px;
    text-transform: capitalize;
}

.index-content h3 {
    font-family: 'nexa-bold';
    line-height: normal;
    font-size: 18px;
    color: #333333;
    margin: 5px auto 10px;
    text-transform: capitalize;
}

.index-content p {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 17px;
    font-size: 14px;
    color: #4F4F4F;
}

.index-content img {
    background: #C4C4C4;
    border-radius: 4px;
    width: 100%;
}

.separator {
    margin: 0 10px;
}

.client-rating i {
    color: #F2C94C !important;
}

.button-view-all {
    padding: 20px 25px;
    margin-top: 36px;
    text-align: center;
    border-radius: 5px;
    font-family: 'Nexa-Bold';
}

.index-second-content {
    margin-top: 100px;
}

.index-second-content ul {
    list-style: none;
    margin-left: -69px;
}

.index-second-content ul li {
    display: inline-block;
    margin-left: 28px;
}

.index-second-content ul li img {
    border-radius: 50%;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mobile-app-cta {
    background-image: url('../img/app-back.png');
    min-height: 1111px;
    margin-top: -246px;
}

.ph1 {
    margin-top: 232px;
    margin-left: 31px;
}

.ph2 {
    margin-top: 500px;
    margin-left: -284px;
}

.mobile-app-cta h1 {
    font-family: 'Nexa-Heavy';
    line-height: 64px;
    font-size: 46px;
    color: #FFC301;
    margin-top: 437px;
    text-transform: capitalize;
}

.mobile-app-cta p {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 24px;
    font-size: 16px;
    color: #FFFFFF;
    margin: 50px 0;
    padding-right: 50px;
}

.new-padding {
    padding: 0 184px 100px;
}

.join-us {
    background-image: url(../img/join-us.png);
    min-height: 435px;
}

.join-us h1 {
    font-family: 'Nexa-Heavy';
    line-height: normal;
    font-size: 26px;
    text-align: center;
    color: #FFFFFF;
    padding: 104px 136px 50px;
    text-transform: capitalize;
}

.join-us p {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 24px;
    font-size: 16px;
    text-align: center;
    color: #FFFFFF;
    padding: 0 203px 36px;
}

.join-us button {
    font-family: 'Nexa-Bold';
    padding: 20px 24px;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    display: block;
    margin: auto;
}

/* Index */
/* Footer */
footer {
    background-color: #2a8f38;
}

.footer-image {
    margin-left: -104px;
}

footer h1 {
    padding: 100px 0 37px;
    font-family: 'Nexa-Bold';
    line-height: normal;
    font-size: 14px;
    text-transform: uppercase;
    color: #FFC301;
}

footer ul {
    list-style: none;
    margin-left: -40px;
}

footer ul li {
    padding-bottom: 11px;
}

footer ul li a {
    font-family: 'Inter', system-ui, sans-serif;
    color: #FFFFFF !important;
    text-decoration: none;
    padding-bottom: 11px;
    text-transform: capitalize;
}

.social ul li {
    display: inline-block;
    border-radius: 50%;
    margin-left: 10px;
}

.social ul li a i {
    background-color: #FFC301;
    color: #5A1846 !important;
    font-size: 20px;
    border-radius: 50%;
    margin: 0 3px;
    padding: 7px;
}

/* Footer */
/* Resturant List */
.resturant-list {
    margin-top: 50px;
}

.resturant-list h1 {
    line-height: normal;
    color: #000000;
    font-size: 26px;
    text-transform: capitalize;
}

hr {
    border: 1px solid #BDBDBD;
}

.resturant-list-head {
    line-height: 24px;
    font-size: 16px;
    color: #000000;
    text-transform: capitalize;
}

.text-heighlight {
    color: #2a8f38 !important;
    text-decoration: underline;
}

.sort {
    line-height: 24px;
    font-size: 16px;
    color: #000000;
}

.sorted-list {
    background: #5A1846;
    min-height: 236px;
    padding: 19px;
    margin-top: 12px;
}

.head {
    line-height: normal;
    font-size: 26px;
    color: #FFFFFF;
    padding: 119px 10px 0;
}

.sorted-list p {
    line-height: 18px;
    font-size: 14px;
    color: #FFFFFF;
    padding-left: 10px;
}

.overlay {
    background: rgba(0, 0, 0, 0.3);
    height: 100%;
    min-height: 198px;
}

.sorted-list1 {
    background-repeat: no-repeat;
    background-image: url('../img/burger-offer.png');
    min-height: 197px;
}

.sorted-list2 {
    background-repeat: no-repeat;
    background-image: url('../img/free-delivery.png');
    min-height: 197px;
}

.sorted-list3 {
    background-repeat: no-repeat;
    background-image: url('../img/tea-offer.png');
    min-height: 197px;
}

.resturant-list-detail {
    margin-top: 50px;
    margin-bottom: 35px;
}

.resturant-list-detail h3 {
    /*font-family: Nexa;*/
    line-height: normal;
    font-size: 18px;
    color: #333333;
    margin: 5px auto 10px;
    text-transform: capitalize;
}

.resturant-list-detail p {
    /*font-family: Nexa;*/
    line-height: 17px;
    font-size: 14px;
    color: #4F4F4F;
}

.delivery-selection {
    margin-top: 45px;
}

.delivery-selection-list {
    line-height: normal;
    font-size: 14px;
    color: #333333;
    padding: 3px 10px;
    margin-right: 22px;
    background: #F2F2F2;
    height: 20px;
}

.map-marker {
    margin: 0 22px;
}

.opening-details {
    margin-top: 49px;
}

.gray {
    color: #BDBDBD !important;
}

.map-marker-text {
    text-align: right;
}

.page-number {
    display: block;
    margin: auto;
}

.page-number p {
    text-align: center;
    font-size: 26px;
    color: #828282;
}

.page-back-arrow {
    margin-right: 28px;
}

.page-next-arrow {
    margin-left: 28px;
}

.list-head {
    margin-bottom: 12px;
}

.list-content {
    line-height: 24px;
    font-size: 16px;
    color: #333333;
    margin-top: 22px;
}

.view-more {
    margin-top: 22px;
    margin-bottom: 30px;
    line-height: 24px;
    font-size: 16px;
    color: #828282;
}

.pre-order {
    line-height: 18px;
    font-size: 11px;
    text-align: center;
    color: #F2F2F2;
    background: #5A1846;
    border-radius: 2px;
    padding: 5px 8px;
}

.resturant-list {
    margin-bottom: 100px;
}

.individual-resturant {
    margin-top: 100px;
}

.individual-resturant h1 {
    line-height: 64px;
    font-size: 46px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 25px;
}

.pre-order-head {
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    color: #F2F2F2;
    background: #5A1846;
    border-radius: 2px;
    padding: 5px 8px;
    margin-left: 44px;
}

.favorite {
    margin-left: 35px;
    height: 25px;
    width: 25px;
    margin-top: 32px;
}

.indi-res {
    width: 100%;
    height: 362px;
}

.indi-res-section {
    margin-top: 60px;
    margin-bottom: 40px;
}

.favorite-head {
    margin-top: 60px;
}

.menu ul li {
    list-style: none;
    display: inline-block;
}

.main-list {
    margin-left: -89px;
}

.sub-list {
    margin-left: -69px;
}

.main-list li {
    margin-left: 50px;
    color: #828282;
    font-size: 18px;
    font-family: 'Nexa-Bold';
}

.sub-list li {
    margin-left: 20px;
    color: #BDBDBD;
    font-size: 18px;
    font-family: 'Nexa-Bold';
}

.menu-item-list {
    margin-top: 46px;

}

.menu-item-list h1 {
    margin-top: 20px;
    margin-bottom: 35px;
    line-height: 21px;
    font-size: 16px;
    color: #333333;
    text-transform: capitalize;
    padding-left: 12px;
}

.order-number-kitchen {
    color: #000000;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Montserrat';
    line-height: 28px;
}

.menu-item-list h2 {
    margin-top: 34px;
    line-height: 21px;
    font-size: 16px;
    color: #333333;
    text-transform: capitalize;
    padding-left: 12px;
}

.menu-item-list p {
    padding-left: 12px;
    line-height: 18px;
    font-size: 14px;
    color: #828282;
}

.menu-item-list img {
    width: 100%;
}

.menu-items {
    margin-bottom: 100px;
}

.order-summary-box h3 {
    text-transform: capitalize;
}

.my-booking-redirect {
    color: #828282;
    text-align: center;
}

.text-highlight {
    color: #2a8f38;
}

/* round checkbox */
.round {
    position: relative;
}

.round label {
    background-color: #fff;
    border: 1px solid #2a8f38;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px;
    margin-left: 260px;
    margin-top: 0px !important;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
    background-color: #2a8f38;
    border-color: #2a8f38;
    margin-left: 260px;
}

.round input[type="checkbox"]:checked+label:after {
    opacity: 1;
}

/* round check box */
.order-reservation {
    padding: 35px !important;

}

.order-reservation h3 {
    text-align: left !important;
}

.order-reservation label {
    margin-top: 20px;
    margin-bottom: 20px;
}

.order-reservation select {
    width: 100%;
    border: 1px solid #BDBDBD;
    box-sizing: border-box;
    line-height: 17px;
    font-size: 14px;
    color: #333333;
    padding: 19px 9px 19px 10px;
}

.order-reservation-button {
    padding: 20px 24px;
    text-align: center;
    background: #2a8f38;
    border-radius: 5px;
    border: 1px solid #2a8f38;
    display: block;
    margin: auto;
    margin-top: 37px;
    width: 100%;
}

.order-reservation hr {
    margin-top: 37px;
    border: 1px solid #BDBDBD;
}

.order-reservation textarea {
    padding: 19px 9px;
    border: 1px solid #BDBDBD;
    min-height: 155px;
    width: 100%;
}

.privacy {
    line-height: 14px;
    font-size: 10px;
    color: #828282;
}

.privacy-high {
    color: #051181;
}

.menu-images {
    background: #C4C4C4;
    height: 80px;

    margin-top: 24px;
    margin-left: 42px;
}

.plus img {
    height: 18px;
    width: 18px;
    float: right;
}

.yellow {
    border: 1px solid #FFC301;
    margin: 37px 0;
}

.price-detail {
    margin-top: 30px;
}

.empty-cart-text {
    line-height: normal;
    font-size: 18px;
    color: #000000;
    text-align: center;
}

.empty-cart-img {
    width: 101px;
    height: 73px;
    display: block;
    margin: auto;
    margin-top: 16px;
    margin-bottom: 35px;
}

.empty-cart-des {
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    color: #828282;
}

button:disabled,
button[disabled] {
    border: 1px solid #EAEBEC;
    background-color: #EAEBEC;
    border-radius: 8px;
    ;
    color: #FFFFFF;
    ;
}

.delivery-hr {
    margin-top: -10px !important;
}

.delivery-text {
    line-height: 18px;
    font-size: 14px;
    color: #000000;
    padding: 13px;
    background-color: #FFC301;
}

.cart-details {
    font-size: 15px;
    margin-top: 20px !important;
    margin-bottom: 30px;
}

.cart-details h2 {
    font-size: 16px;
}

.cart-details p {
    font-size: 16px;
}

.cart-details h1 {
    font-size: 26px;
}

.cart-separator {
    margin-top: 15px !important;
    margin-bottom: 36px !important;
}

.over-all-review {
    color: #FFFFFF;
    background: #2a8f38;
    padding: 29px 20px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.over-all-review h1 {
    color: #FFFFFF;
}

.over-all-review p {
    color: #FFFFFF;
}

.review-box {
    background-color: #F2F2F2;
    padding: 30px 14px;
    margin-bottom: 40px;
}

.review-head h1 {
    font-size: 18px;
}

.review-head img {
    width: 18px;
    height: 22px;
}

.review-box h2 {
    line-height: 21px;
    font-size: 16px;
    color: #333333;
}

.review-box h3 {
    line-height: 18px;
    font-size: 14px;
    color: #828282;
    margin-top: 5px;
}

.review-box p {
    line-height: 18px;
    font-size: 14px;
    color: #333333;
    margin-top: 17px;
}

.review-box .client-rating i {
    font-size: 24px;
}

.all-review {
    margin-bottom: 60px;
}

.map {
    margin-top: 50px;
    margin-bottom: 50px;
}

.details-content h2 {
    line-height: 21px;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
}

.details-content p {
    line-height: 24px;
    font-size: 16px;
    color: #828282;
    margin-bottom: 40px;
}

.col-md-15 {
    width: 20%;
    float: left;
}

.col-md-15 img {
    border-radius: 50%;
    width: 100%;
}

.bottom-left {
    position: relative;
    bottom: 110px;
    left: 50px;
    font-family: 'Nexa-Heavy';
    color: #FFFFFF;
    font-size: 26px;
    line-height: 26px;
}

#overlay {
    /* Sit on top of the page content */
    /* Hidden by default */
    width: 85%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    /* Black background with opacity */
    z-index: 2;
    border-radius: 50%;
    display: block;
    margin: auto;
}

.cuisines-main {
    margin-top: 130px;
    margin-bottom: 100px;
}

/* Admin - Modern Sidebar */
.admin-layout-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: #F5F5F5;
}

.admin-sidebar-container {
    width: 240px;
    background-color: #FDFDFD;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #EAEBEC;
}

.admin-content-wrapper {
    margin-left: 240px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: calc(100% - 240px);
}

.admin-main-content {
    flex: 1;
    padding: 0;
    background-color: #F7F7F8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mobile / tablet sidebar behaviour (off–canvas) */
@media (max-width: 1024px) {
    .admin-sidebar-container {
        transform: translateX(-100%);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        width: 260px;
    }

    .admin-layout-wrapper.sidebar-open .admin-sidebar-container {
        transform: translateX(0);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
    }

    .admin-content-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .admin-layout-wrapper.sidebar-open .admin-content-wrapper {
        margin-left: 0;
        width: 100%;
    }
}

.modern-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.close-icon {
    display: none;
    position: absolute;
    top: 24px;
    left: 24px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1000;
}

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

.sidebar-logo {
    padding: 24px 0;
    border-bottom: 1px solid #EAEBEC;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 160px;
    margin: 0 32px;
    position: relative;
}

@media (max-width: 768px) {
    .close-icon {
        display: block;
    }

    .mobile-only-section {
        display: flex;
    }

    .sidebar-logo {
        height: auto;
        padding: 86px 0 24px 0;
        margin-top: 0;
        margin: 0px 16px;
    }
}

.restaurant-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .restaurant-logo {
        padding: 0px 16px;
    }
}

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: #DC2626;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.logo-icon i {
    font-size: 20px;
}

.logo-text {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    color: #333333;
    font-weight: 600;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
    margin: 0 16px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav ul li {
    /* margin: 20px 0; */
    padding: 8px 0px;
}

.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #6B6C6D;
    text-decoration: none;
    font-family: 'Montserrat';
    font-size: 16px;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 600;
    border-radius: 20px;
}

.sidebar-nav ul li a i {
    width: 18px;
    text-align: center;
    font-size: 16px;
    color: #666666;
    transition: color 0.2s ease;
}

.sidebar-icon {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sidebar-nav ul li a:hover i {
    color: #333333;
}

.sidebar-nav ul li a:hover .sidebar-icon {
    filter: brightness(0) saturate(100%) invert(21%) sepia(91%) saturate(1800%) hue-rotate(346deg) brightness(94%) contrast(101%);
    opacity: 0.8;
}

.sidebar-nav ul li a:hover {
    background-color: #FFD8D3;
    color: #C9331F;
    border-radius: 20px;
}

.sidebar-nav ul li.active a {
    background-color: #C9331F;
    /* Active tab background */
    color: #FDFDFD;
    /* Active tab text color */
    font-weight: 600;
    border-radius: 20px;
    /* Rounded pill shape */
}

.sidebar-nav ul li.active a i {
    color: #FDFDFD;
}

.sidebar-nav ul li.active a .sidebar-icon {
    filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(247%) hue-rotate(179deg) brightness(106%) contrast(97%);
    opacity: 0.8 !important;
    /* Keep same tinted (hover) color when selected - do not revert to default/white */
}

.sidebar-nav ul li.active a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.sidebar-nav ul li.active a:active,
.sidebar-nav ul li.active a:focus,
.sidebar-nav ul li.active a:focus-visible {
    background-color: #C9331F;
    color: #FDFDFD !important;
}

.sidebar-nav ul li.active a:active i,
.sidebar-nav ul li.active a:focus i,
.sidebar-nav ul li.active a:focus-visible i,
.sidebar-nav ul li.active a:active .sidebar-icon,
.sidebar-nav ul li.active a:focus .sidebar-icon,
.sidebar-nav ul li.active a:focus-visible .sidebar-icon {
    filter: brightness(0) saturate(100%) invert(21%) sepia(91%) saturate(1800%) hue-rotate(346deg) brightness(94%) contrast(101%) !important;
    opacity: 0.8 !important;
    /* Keep tint on click/focus so icon does not revert to default */
}

.sidebar-nav ul li:not(.active) a:active,
.sidebar-nav ul li:not(.active) a:focus,
.sidebar-nav ul li:not(.active) a:focus-visible {
    background-color: transparent;
    color: #6B6C6D !important;
}

.sidebar-nav ul li:not(.active) a:active i,
.sidebar-nav ul li:not(.active) a:focus i,
.sidebar-nav ul li:not(.active) a:focus-visible i {
    color: #666666 !important;
}

.sidebar-nav ul li:not(.active) a:active .sidebar-icon,
.sidebar-nav ul li:not(.active) a:focus .sidebar-icon,
.sidebar-nav ul li:not(.active) a:focus-visible .sidebar-icon {
    opacity: 1;
    color: #6B6C6D !important;
    filter: none;
}

.sidebar-nav ul li:not(.active) a:hover:active,
.sidebar-nav ul li:not(.active) a:hover:focus,
.sidebar-nav ul li:not(.active) a:hover:focus-visible {
    background-color: #FFD8D3;
    color: #C9331F !important;
}

.sidebar-nav ul li:not(.active) a:hover:active i,
.sidebar-nav ul li:not(.active) a:hover:focus i,
.sidebar-nav ul li:not(.active) a:hover:focus-visible i,
.sidebar-nav ul li:not(.active) a:hover:active .sidebar-icon,
.sidebar-nav ul li:not(.active) a:hover:focus .sidebar-icon,
.sidebar-nav ul li:not(.active) a:hover:focus-visible .sidebar-icon {
    color: #C9331F !important;
    opacity: 0.8;
    filter: brightness(0) saturate(100%) invert(21%) sepia(91%) saturate(1800%) hue-rotate(346deg) brightness(94%) contrast(101%);
    /* Same as hover – icon stays tinted on click like text */
}

.sidebar-footer {
    padding: 16px 0;
    border-top: 1px solid #EAEBEC;
    margin: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-footer .settings-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #6B6C6D;
    text-decoration: none;
    font-family: 'Montserrat';
    font-size: 16px;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 600;
    border-radius: 20px;
}

.sidebar-footer .settings-link i {
    width: 18px;
    text-align: center;
    font-size: 16px;
    color: #666666;
    transition: color 0.2s ease;
}

.sidebar-footer .settings-link:hover {
    background-color: #FFD8D3;
    color: #C9331F;
}

.sidebar-footer .settings-link:hover .sidebar-icon {
    filter: brightness(0) saturate(100%) invert(21%) sepia(91%) saturate(1800%) hue-rotate(346deg) brightness(94%) contrast(101%);
    opacity: 0.8;
}

.sidebar-footer .settings-link.active {
    background-color: #C9331F;
    /* Active tab background */
    color: #FDFDFD;
    /* Active tab text color */
    font-weight: 600;
    border-radius: 20px;
    /* Rounded pill shape */
}

.sidebar-footer .settings-link.active .sidebar-icon {
    filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(247%) hue-rotate(179deg) brightness(106%) contrast(97%);
    opacity: 0.8 !important;
    /* Same tint as hover when selected */
}

.sidebar-footer .settings-link.active:active,
.sidebar-footer .settings-link.active:focus,
.sidebar-footer .settings-link.active:focus-visible {
    background-color: #C9331F;
    color: #FDFDFD !important;
}

.sidebar-footer .settings-link.active:active .sidebar-icon,
.sidebar-footer .settings-link.active:focus .sidebar-icon,
.sidebar-footer .settings-link.active:focus-visible .sidebar-icon {
    filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(247%) hue-rotate(179deg) brightness(106%) contrast(97%);
    opacity: 0.8 !important;
}

.sidebar-footer .settings-link:not(.active):active,
.sidebar-footer .settings-link:not(.active):focus,
.sidebar-footer .settings-link:not(.active):focus-visible {
    background-color: transparent;
    color: #6B6C6D !important;
}

.sidebar-footer .settings-link:not(.active):hover:active,
.sidebar-footer .settings-link:not(.active):hover:focus,
.sidebar-footer .settings-link:not(.active):hover:focus-visible {
    background-color: #FFD8D3;
    color: #C9331F !important;
}

.sidebar-footer .settings-link:not(.active):hover:active i,
.sidebar-footer .settings-link:not(.active):hover:focus i,
.sidebar-footer .settings-link:not(.active):hover:focus-visible i,
.sidebar-footer .settings-link:not(.active):hover:active .sidebar-icon,
.sidebar-footer .settings-link:not(.active):hover:focus .sidebar-icon,
.sidebar-footer .settings-link:not(.active):hover:focus-visible .sidebar-icon {
    color: #C9331F !important;
    opacity: 0.8;
    filter: brightness(0) saturate(100%) invert(21%) sepia(91%) saturate(1800%) hue-rotate(346deg) brightness(94%) contrast(101%);
    /* Same as nav: text and icon stay tinted on click */
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.start-date:hover,
.daterangepicker td.end-date,
.daterangepicker td.end-date:hover,
.daterangepicker td.start-date.end-date,
.daterangepicker td.start-date.end-date:hover {
    background-color: #C9331F !important;
    border-color: transparent;
    color: #fff !important;
}


.notification-count {
    margin-left: auto;
    background-color: #DC2626;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    float: right;
}

/* Sidebar User Profile - Mobile Only */
.sidebar-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-top: 10px;
}

.user-avatar-wrapper {
    flex-shrink: 0;
}

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

.user-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B6C6D;
}

.user-avatar-placeholder i {
    font-size: 24px;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sidebar-user-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    line-height: 1.2;
}

.sidebar-user-role {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6B6C6D;
    line-height: 1.2;
}

/* Admin Header */
.admin-header {
    background-color: #FDFDFD;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #E5E5E5;
    min-height: 104px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-search {
    flex: 1;
    max-width: 500px;
    position: relative;
    display: flex;
    align-items: center;
}

.header-search .Magnifer-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-search .Magnifer-svg {
    width: 24px;
    height: 24px;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .header-search .Magnifer-svg {
        width: 16px;
        height: 16px;
    }
}

.header-search i {
    position: absolute;
    left: 14px;
    color: #999999;
    font-size: 15px;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 10px 14px 10px 44px;
    border: none;
    border-radius: 20px;
    font-family: 'Inter';
    font-size: 14px;
    color: #8E8F91;
    background-color: #F1F2F3;
    transition: all 0.2s ease;
    height: 50px;
}

@media (max-width: 765px) {
    .search-input {
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
    }
}

.search-input:focus {
    outline: none;

}

.search-input {
    padding: 16px 32px 16px 48px;
}

.search-input::placeholder {
    color: #8E8F91 !important;

}

.header-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: auto;
    border-left: 1px solid #EAEBEC;
    padding-left:24px;
}

.sidebar-toggle-btn {
    display: none;
    border: none;
    background: transparent;
    padding: 0;
    margin-right: 12px;
    cursor: pointer;
}

.sidebar-toggle-icon {
    width: 24px;
    height: 24px;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.notification-svg {
    width: 24px;
    height: 24px;
    display: block;
    color: #8E8F91;
    transition: all 0.2s ease;
}

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

.user-avatar {
    width: 45px;
    height: 45px;
    background-color: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 16px;
}

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

.user-name {
    font-family: 'Inter';
    font-size: 14px;
    color: #140001;
    font-weight: 500;
    line-height: 22px;
}

.user-role {
    font-family: 'Inter';
    font-size: 12px;
    color: #6B6C6D;
    font-weight: 400;
    line-height: 20px;
}

/* Button Styles with Red Accent */
.btn-primary,
button[type="submit"],
input[type="submit"],
.add-new,
.view-order-btn,
.order-accept-btn,
.order-cancel-btn {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.add-new:hover,
.view-order-btn:hover {
    background-color: #B91C1C;
    border-color: #B91C1C;
}

/* Create Order Button */
.btn-create-order {
    background-color: #FFD8D3;
    border: none !important;
    color: #C9331F;
    padding: 12px 24px;
    border-radius: 20px;
    font-family: 'Inter';
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;

}

.btn-create-order:hover {
    border: none !important;
    text-decoration: none;
    color: #C9331F;
}

.btn-create-order:focus-visible {
    outline: none;
    box-shadow: none;
    text-decoration: none;

}

.btn-create-order:focus-within {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    color: #C9331F !important;
}


.btn-create-order i {
    font-size: 16px;
}

.btn-create-order-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: block;
}




.btn-create-order::focus {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    color: unset;
}

/* Orders Page Container */
.orders-page-container {
    background-color: #F5F5F5;
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---------------------------------------------
   Responsive layout for Orders / Kitchen pages
   --------------------------------------------- */

@media (max-width: 1024px) {
    .admin-header {
        padding: 16px;
    }

    .sidebar-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-search {
        max-width: none;
    }

    .page-header-section {
        padding: 16px;
    }

    .orders-tabs-section {
        padding: 0 16px;
    }

    .filter-bar-section {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 2px 0 !important;
    }

    .filter-bar-content {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .order-card-content {
        padding: 24px;
    }

    .order-top-section {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 0px;
    }

    .order-top-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .order-title-row {
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .order-meta-info {
        width: 100%;
        margin-top: 0;
    }

    .order-top-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    .order-bottom-section {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .order-bottom-left {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
        flex: 1;
    }

    .order-bottom-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .order-actions {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    .pagination-container {
        padding: 12px 16px 24px;
    }
}

@media (max-width: 768px) {
    .admin-layout-wrapper {
        flex-direction: column;
    }

    .order-actions {
        height: 30px;
    }

    /* Sidebar off-canvas for mobile */
    .admin-sidebar-container {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 240px;
    }

    .admin-sidebar-container.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 900;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .page-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .orders-tabs {
        overflow-x: visible;
        /* prevent horizontal scroll on tabs */
    }

    .orders-list-container {
        padding: 16px 0px !important;
    }

    .order-meta-info {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .order-card {
        margin-bottom: 16px;
    }

    .order-top-left {
        flex: 1;
    }

    .order-customer-info,
    .order-location-info {
        gap: 12px;
    }

    .order-total-amount {
        font-size: 14px;
    }

    .order-total-amount strong {
        font-size: 20px;
    }

    .btn-reject,
    .btn-accept {
        width: auto;
        min-width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
    }

    /* Keep Order# and badges on one line on mobile */
    .order-title-row {
        gap: 8px;
    }

    .order-number {
        font-size: 18px;
    }

    .order-type-badge {
        font-size: 12px;
        padding: 4px 10px;
        white-space: nowrap;
    }
}

/* Page Header Section */
.page-header-section {
    padding: 32px 24px;
    background-color: #F7F7F8;
    margin-bottom: 0;
    position: sticky;
    z-index: 99;
    flex-shrink: 0;
}

.page-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.page-header-top-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header-top-row-reservation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    font-family: 'Montserrat';
    font-size: 32px;
    color: #140001;
    margin: 0 0 0 0;
    font-weight: 600;
    line-height: unset;
}

.page-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    color: #6B6C6D;
    margin: 0;
}

.page-header-content-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 768px) {
    .page-header-section {
        padding: 0px;
    }

    .page-title {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .page-subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .btn-create-order {
        font-size: 14px;
        padding: 8px 16px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .btn-create-order-icon {
        width: 18px;
        height: 18px;
    }
}





/* Tabs Section */
.orders-tabs-section {

    padding: 0 30px;

    margin-bottom: 0;
}

.orders-tabs {
    display: flex;
    gap: 32px;

}

.tab-button {
    background: none;
    border: none;
    padding: 8px 0px;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 600;
    color: #140001;
    line-height: 24px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.tab-button:hover {
    color: #333333;
}

.tab-button.active {
    color: #B71B2D;
    font-weight: 600;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #C9331F;
}

.tab-button.active i {
    color: #B71B2D;
}

.tab-badge {
    background-color: #FFF1EF;
    /* soft red background */
    color: #C9331F;
    /* red text like label */
    border-radius: 12px;
    /* fully rounded pill */
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Filters Section */
.orders-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    flex-wrap: wrap;
}

.filter-label {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 14px;
    color: #333333;
    margin-right: 8px;
}

.filter-btn {
    background-color: #F3F4F6;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background-color: #E5E7EB;
    color: #333333;
}

.filter-btn.active {
    background-color: #DC2626;
    color: #FFFFFF;
}

.filter-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    position: relative;
}

.filter-date i {
    color: #6B7280;
    font-size: 16px;
    position: absolute;
    left: 12px;
    z-index: 1;
}

.filter-date select {
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 8px 32px 8px 36px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #333333;
    background-color: #FFFFFF;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 8px);
    background-position-y: center;
}

.filter-more-btn {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.filter-more-btn:hover {
    background-color: #F9F9F9;
    border-color: #DC2626;
}

/* Filter Bar Section */
.filter-bar-section {
    background-color: #F7F7F8;
    padding: 0px 24px;
    position: sticky;
    z-index: 98;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    .filter-bar-section {
        padding: 8px 16px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .orders-tabs-section {
        padding: 0 16px;
    }

    .filter-bar-content {
        justify-content: flex-start;
        gap: 12px;
    }

    .filter-dropdowns {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
    }

    /* .status-dropdown,
    .filter-date-wrapper {
        flex: 1 1 0;
    } */

    .status-dropdown-trigger,
    .filter-select-date {
        /* width: 100%; */
    }
}

.orders-tabs-section {
    padding: 0;
    background-color: transparent;
}

.filter-bar-content {
    padding: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 20px;
}

.filter-dropdowns {
    display: flex;
    gap: 16px;
    align-items: center;
}

@media (max-width: 768px) {
    .filter-dropdowns {
        gap: 8px;
    }
}

.status-dropdown {
    position: relative;
}

.status-dropdown-trigger {
    border: 1px solid #EAEBEC;
    border-radius: 20px;
    padding: 12px 24px;
    width: 231px;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #6B6C6D;
    background-color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: all 0.2s ease;
    gap: 8px;
    min-height: unset !important;
    height: unset !important;
}

@media (max-width: 768px) {
    .status-dropdown-trigger {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
}

.status-dropdown-trigger:hover {
    border-color: #D1D5DB;
}

.status-dropdown-trigger:focus {
    outline: none;
    border-color: #EAEBEC;


}

.status-dropdown-chevron {
    width: 17px;
    height: 9px;
    margin-left: 0px;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .status-dropdown-chevron {
        width: 13px;
        height: 7px;
    }
}

.status-dropdown-menu {
    position: absolute;
    top: 110%;
    right: 1px;
    background-color: #FDFDFD;
    border: 1px solid #EAEBEC;
    border-radius: 16px;
    padding: 8px;
    width: 231px;
    box-sizing: border-box;
    z-index: 50;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .status-dropdown-menu {
        width: 145px;
        right: 0px;
        left: 1px;
    }
}

.status-dropdown-item {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #6B6C6D;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .status-dropdown-item {
        border-radius: 16px;
        padding: 8px 16px;
        font-size: 14px;
    }
}

.status-dropdown-item:hover {
    background-color: #F3F4F6;
}

.status-dropdown-item.active {
    background-color: #F1F2F3;
    padding: 8px 16px;
}

.status-dropdown-item-checkbox {
    cursor: default;
    border-radius: 16px;
}

.status-dropdown-item-checkbox input[type="checkbox"] {
    margin-top: 0px !important;
}

.status-dropdown-item-checkbox:hover {
    background-color: #F3F4F6;
}

.status-dropdown-item-checkbox:has(input:checked) {
    background-color: #F1F2F3;
}

.status-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #6B6C6D;
}

.status-checkbox-label input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("../svg/unCheck%20Square.svg");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    outline: none;
    margin: 0;
}

.status-checkbox-label input[type="checkbox"]:focus {
    outline: none;
}

/* Checked: use Figma Check Square SVG */
.status-checkbox-label input[type="checkbox"]:checked {
    background-image: url("../svg/Check%20Square.svg");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Mobile: smaller checkbox and text for history dropdown */
@media (max-width: 768px) {
    .status-checkbox-label {
        font-size: 14px;
        line-height: 22px;
        gap: 8px;
    }
    
    .status-checkbox-label input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        background-image: url("../svg/unCheck%20Square.svg") !important;
        background-size: 20px 20px !important;
        outline: none !important;
    }
    
    .status-checkbox-label input[type="checkbox"]:focus {
        outline: none !important;
    }
    
    .status-checkbox-label input[type="checkbox"]:checked {
        background-image: url("../svg/Check%20Square.svg") !important;
    }
}

.filter-select {
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    padding: 10px 36px 10px 16px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #1F2937;
    background-color: #FFFFFF;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%231F2937' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 12px);
    background-position-y: center;
    min-width: 140px;
    box-shadow: none;
    transition: all 0.2s ease;
}

.filter-select:hover {
    border-color: #D1D5DB;
}

.filter-select:focus {
    outline: none;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.filter-select option {
    padding: 8px;
    background-color: #FFFFFF;
}

.order-count-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #4B5563;
    display: flex;
    align-items: center;
}

.order-count-number {
    color: #DC2626;
    font-weight: 700;
    font-family: 'Nexa-Bold';
    margin-right: 4px;
}

.filter-date-wrapper {
    display: inline-block;
}

/* Align date range input height with order type (status) dropdown in filter bar */
.filter-bar-section .status-dropdown-trigger {
    height: 48px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 12px 24px;
    display: flex;
    align-items: center;
}

.filter-bar-section .date-range-wrapper {
    box-sizing: border-box;
    color: #6B6C6D;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    font-family: 'Inter';
}

.date-range-wrapper::placeholder {
    color: #6B6C6D;

}

/* Single date input for Active Orders */
.date-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.date-input-wrapper .calendar-icon {

    width: 26px;
    height: 26px;

}

.date-input-wrapper .filter-select-date {

    position: relative;
    padding: 12px 24px;
    padding-left: 44px;
    width: 215px;
}






.date-clear-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .date-dropdown-icon {
        width: 20px;
        height: 20px;
    }
}

.date-range-separator {
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6B7280;
    padding: 0 4px;
}

@-moz-document url-prefix() {
    .filter-select-date {
        -moz-appearance: textfield;
        appearance: textfield;
    }
}

.date-range-input {
    border: none;
    background: none;
    /* Default: grow with content but never smaller than single-date width */
    min-width: 120px;
    width: auto;
    padding: 0px;
}

/* Width for "Select Date" placeholder (initial state) */
.date-range-input.placeholder-width {
    width: 200px;
}

/* Width for single date selection */
.date-range-input.single-date-width {
    width: 200px;
}

@media (max-width: 768px) {
    .date-range-input {
        font-size: 14px;
        width: 100%;
        min-width: 105px;
    }
}

.date-range-input:focus {
    outline: none;
    border: none;
    background: none;
}


/* .filter-select-date {
    padding-left: 44px;
    padding-right: 44px;
    border: 1px solid #EAEBEC;
    border-radius: 20px;
    font-size: 18px;
    font-family: "Inter";
    color: #1F2937;
    background-color: #FFFFFF;
    cursor: pointer;
    min-width: 160px;
    height: 40px;
    transition: all 0.2s ease;
    position: relative;
} */

.filter-select-date-date {
    border: 1px solid #EAEBEC;
    border-radius: 20px;
    font-size: 18px;
    font-family: "Inter";
    color: #6B6C6D;
    padding: 12px 24px;
    cursor: pointer;
    min-width: 160px;
    transition: all 0.2s ease;
    position: relative;
}

.filter-select-date::placeholder {
    color: #6B6C6D;
    font-size: 18px;
}

@media (max-width: 768px) {
    .filter-select-date::placeholder {
        font-size: 14px;
    }
}

.date-picker-input {
    cursor: pointer;
    background-color: #FFFFFF;
}

/* 
.date-picker-input:focus {
    outline: none;
    border-color: #C9331F;
    box-shadow: 0 0 0 3px rgba(201, 51, 31, 0.1);
} */

/* Hide native date picker icon (second calendar icon) - More aggressive approach */
input[type="date"].filter-select-date::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    position: absolute;
    right: -9999px;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    visibility: hidden !important;
}

input[type="date"].filter-select-date::-webkit-inner-spin-button,
input[type="date"].filter-select-date::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Firefox specific - hide calendar icon */
input[type="date"].filter-select-date::-moz-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
    right: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    background: none !important;
    cursor: default !important;
}

/* Firefox - make date input look like text field to hide native UI */
@-moz-document url-prefix() {
    input[type="date"].filter-select-date {
        -moz-appearance: textfield !important;
        background-image: none !important;
    }

    input[type="date"].filter-select-date::-moz-calendar-picker-indicator {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

input[type="date"].filter-select-date::-ms-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    position: absolute;
    right: -9999px;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

input[type="date"].filter-select-date::-ms-clear {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.filter-select-date:hover {
    border-color: #D1D5DB;
}



.filter-date-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-date-icon {
    color: #4B5563;
    font-size: 16px;
    flex-shrink: 0;
}

.filter-date-text {
    flex: 1;
    text-align: left;
}

.filter-date-arrow {
    position: absolute;
    right: 12px;
    color: #4B5563;
    font-size: 12px;
    pointer-events: none;
}

.filter-date-input-hidden {
    display: none;
}

/* Pagination Container */
.pagination-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 16px 24px 32px 24px;
    background-color: #F5F5F5;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10;
}

.create-order-pagination {
    background-color: unset !important;
    padding-top: 24px !important;
    padding-bottom: 0px !important;
}

.order-card:last-child {
    margin-bottom: 0;
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-nav-btn {
    background-color: #FDFDFD;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 14px;
    color: #474849;
    cursor: pointer;
    font-family: "Inter";
    line-height: 22px;
    transition: all 0.2s ease;
    border: 1px solid #EAEBEC;
}

.pagination-nav-btn:hover:not(.disabled) {
    background-color: #FDFDFD;
    color: #DCDEE0;
}

.pagination-nav-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #FDFDFD;
    color: #DCDEE0;
    border: 1px solid #EAEBEC;
}

.pagination-nav-icon img {
    display: block;
    width: 16px;
    height: 16px;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: inline;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

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

    .order-mobile-actions {
        margin-top: 12px;
        width: 100%;
        display: block !important;
    }

    .order-mobile-actions .btn-cancel-order {
        width: auto;
        display: inline-flex;
        align-items: center;
        margin-left: 0;
    }
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-page-btn {
    background: none;
    border: none;
    padding: 8px;
    font-family: 'Inter';
    font-size: 14px;
    color: #474849;
    line-height: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.pagination-page-btn:hover {
    color: #495057;
}

.pagination-page-btn.active {
    background-color: #474849;
    color: #FFFFFF;
    font-weight: 600;
    border: 1px solid #474849;
}

.pagination-ellipsis {
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6C757D;
    padding: 0 4px;
}

.date-range-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #EAEBEC;
    border-radius: 20px;
    background: #FDFDFD;
}

@media (max-width: 768px) {
    .date-range-wrapper {
        padding: 8px 16px;
        font-size: 14px;
        height: 38px;
    }
}

.filter-select-date:focus {
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
}

/* Hide native date picker icon (second calendar icon) - More aggressive approach */
input[type="date"].filter-select-date::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    position: absolute;
    right: -9999px;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    visibility: hidden !important;
}

input[type="date"].filter-select-date::-webkit-inner-spin-button,
input[type="date"].filter-select-date::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Firefox specific - hide calendar icon */
input[type="date"].filter-select-date::-moz-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
    right: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    background: none !important;
    cursor: default !important;
}

/* Firefox - make date input look like text field to hide native UI */
@-moz-document url-prefix() {
    input[type="date"].filter-select-date {
        -moz-appearance: textfield !important;
        background-image: none !important;
    }

    input[type="date"].filter-select-date::-moz-calendar-picker-indicator {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

input[type="date"].filter-select-date::-ms-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    position: absolute;
    right: -9999px;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

input[type="date"].filter-select-date::-ms-clear {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.filter-select-date:hover {
    border-color: #D1D5DB;
}


/* Orders List Container */
.orders-list-container {
    padding: 32px 24px;
    background-color: #F7F7F8;
    min-height: 400px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 0;
}

/* Loading Spinner */
.orders-loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 60px 20px;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #E5E5E5;
    border-top: 4px solid #C9331F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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

.loading-text {
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

/* Kitchen Order Card Styles */
.order-card {
    background-color: #FDFDFD;
    border-radius: 16px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    overflow: hidden;
    cursor: pointer;
    padding: 24px;
    border-radius: 16px;
    gap: 24px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .order-card {
        padding: 0px;
    }
}

.order-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* .order-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
     gap: 24px; 
} */

/* Kitchen Order Header */
.order-card-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EAEBEC;
}

@media (max-width: 768px) {
    .order-header-left {
        gap: 8px;
    }
}

.order-number-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-number {
    font-family: 'Montserrat', 'Nexa-Heavy', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.2;
}

.order-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.order-type-badge.pickup {
    background-color: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
}

.order-type-badge.delivery {
    background-color: #FEF3C7;
    color: #D97706;
}

.order-type-badge i {
    font-size: 12px;
}

/* Kitchen Order Info Row - Date, Time, Customer on one line */
.order-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-time-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #6B6C6D;
    line-height: 22px;
    font-weight: 500;
}

.order-time-text i {
    font-size: 14px;
    color: #9CA3AF;
    width: 16px;
    text-align: center;
    margin-right: 4px;
}

.order-time-text strong {
    font-weight: 500;
    color: #374151;
}

/* Kitchen Order Body */
.order-body-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-body-left {
    display: flex;
    flex-direction: column;

}

/* Items Section - Kitchen Style */
.order-items-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-items-title {
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0;
}

.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Inter';
    font-size: 14px;
    line-height: 24px;
}

@media (max-width: 768px) {
    .order-item {
        font-size: 14px;
        line-height: 22px;
    }
}

.order-item-2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Inter';
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 16px;
}

.order-item-2:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .order-item-2 {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 12px;
    }
}

.item-quantity {
    color: #1F2937;
    font-weight: 600;
    min-width: auto;
    font-family: 'Inter';
}

.item-name {
    flex: 1;
    color: #1F2937;
    font-weight: 400;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Special Instructions - Kitchen Style */
.order-special-instructions {
    background-color: #F1F2F3;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.order-special-instructions {
    background-color: #F1F2F3;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    font-family: 'Inter';
    font-size: 14px;
    line-height: 24px;
    color: #140001 !important;
    font-weight: 500;
}

@media (max-width: 768px) {
    .order-special-instructions {
        line-height: 22px;
        margin-top: 16px;
    }
}

.order-special-title {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 600;
    color: #6B6C6D;
    text-transform: none;
    line-height: 24px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .order-special-title {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 4px;
    }
}

.order-special-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    color: #140001;
    line-height: 1.5;
    font-style: italic;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.delivery-instructions-text-2 {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Kitchen Order Footer Actions */
.order-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 16px !important;
    padding-top: 0px;
}

.order-footer-actions .btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
    line-height: 22px;
}

.order-footer-actions .btn-success {
    background-color: #3C850F;
    color: #FDFDFD;
}


.order-footer-actions .btn-primary {
    background-color: #0B44B7;
    color: #FDFDFD;
}

.order-footer-actions .btn i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .order-card-content {
        padding: 16px;
    }

    .order-number {
        font-size: 20px;
    }

    .order-footer-actions {
        justify-content: flex-end;
    }

    .order-footer-actions .btn {
        /* width: 100%; */
    }
}

/* Top Section */
.order-top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 16px;
    margin-bottom: 0px;
    border-bottom: 1px solid #EAEBEC;
}

.order-top-left {
    flex: 1;
}

.order-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .order-title-row {
        margin-bottom: 0px;
    }
}

.order-number {
    font-size: 20px;
    color: #1F2937;
    font-weight: 700;
}

.order-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
}

.order-type-badge.pickup {
    background-color: #D0EBFF;
    color: #105CDB;
}

.order-type-badge.pickup .pickup-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.order-type-badge.delivery {
    background-color: #FDF2CC;
    color: #C97605 !important;
}

.order-type-badge.delivery .delivery-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.order-meta-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Desktop: Display Date and Time together inline */
@media (min-width: 766px) {
    .order-meta-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .order-meta-info .order-meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Combine Date and Time on same line on desktop */
    .order-meta-info .order-meta-item:nth-child(2) {
        display: flex;
        margin-left: 0;
    }

}

.order-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #6B6C6D;
}

/* 12px between Date block and Time block when both are in one row */
.order-meta-item .time-icon {
    margin-left: 8px;
}

.order-meta-item i {
    font-size: 14px;
    color: #9CA3AF;
}

.order-meta-item .order-meta-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.order-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Hide mobile status badge on desktop */
.order-title-status-mobile {
    display: none;
}

.order-status-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;
    line-height: unset;
}

.status-badge.pending {
    background-color: #FDF2CC;
    color: #C97605;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
}

.status-badge.pending i {
    color: #D97706;
    font-size: 12px;
}

.status-badge.accepted {
    background-color: #EEFBD1;
    color: #529F16;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .status-badge.accepted {
        border-radius: 12px;
    }
}

.status-badge.accepted i {
    color: #529F16;
    font-size: 12px;
}

.status-badge.rejected {
    background-color: #FBDBD0;
    color: #9D1330;
    display: inline-flex;
    align-items: center;
    font-family: "Inter";
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.status-icon {
    width: 16px;
    height: 16px;
    align-self: inherit;
}

.status-badge.rejected .status-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: inherit;
}

.status-badge.Cancelled {
    background-color: #EAEBEC;
    color: #6B6C6D;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.status-badge.Cancelled .status-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: inherit;
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.status-badge.completed {
    background-color: #3C850F;
    color: #EEFBD1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
}

.status-badge.completed .status-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-self: inherit;
}

.status-badge.status-badge-picked-up {
    background-color: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-badge.status-badge-picked-up i {
    color: #fff;
    font-size: 12px;
}

/* Order Status Dropdown */
.order-status-dropdown {
    position: relative;
}

.order-status-dropdown-trigger {
    border: 1px solid #E5E5E5;
    border-radius: 9999px;
    padding: 12px 24px !important;
    font-family: 'Inter';
    font-size: 14px;
    color: #1F2937;
    background-color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    min-width: 140px;
}

.order-status-dropdown-trigger:hover {
    border-color: #D1D5DB;
}

.order-status-chevron {
    position: absolute;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6B7280;
    transition: transform 0.2s ease;
}

.order-status-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 100;
    padding: 4px;
}

.order-status-dropdown-item {
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border: none;
    background: none;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #1F2937;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.order-status-dropdown-item:hover {
    background-color: #F3F4F6;
}

.order-status-dropdown-item.active {
    background-color: #F3F4F6;
    color: #1F2937;
    font-weight: 600;
}

.order-actions {
    display: flex;
    gap: 4px;
}

.btn-reject {
    border: 1px solid #6B6C6D;
    color: #6B6C6D;
    font-family: 'Inter';
    font-size: 14px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.2s ease;
    width: 96px;
    background-color: #FDFDFD;
}

.btn-reject:hover {
    background-color: #F9FAFB;
    border-color: #9CA3AF;
}

.btn-accept {
    background-color: #3C850F;
    border: none;
    color: #FDFDFD;
    font-family: 'Inter';
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    width: 96px;
}

/* Ready status actions on order card (Mark as Picked Up / Mark as Out for Delivery) - same width as .btn-accept */
.order-actions-ready {
    display: flex;
    gap: 8px;
}

.order-actions-ready .delivery-btn-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
}


/* Bottom Section */
.order-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.order-bottom-left {
    display: flex;
    align-items: center;
    gap: 64px;
    flex: 1;
    margin-top: 24px;
}

/* @media (max-width: 768px) {
    .order-bottom-left {
        margin-top: 0px;
    }
} */

.order-customer-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.order-customer-info i {
    font-size: 16px;
    color: #9CA3AF;
}

.order-customer-info .user-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex-shrink: 0;
}

.customer-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.customer-name {
    font-size: 16px;
    color: #140001;
    font-weight: 600;
}

.customer-phone {
    font-family: 'Inter';
    font-size: 14px;
    color: #6B6C6D;
}

.address-line-2 {
    font-weight: 600;
}

.order-location-info {
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6B6C6D;
}

.order-address .address-line-1 {
    color: #140001;
    font-weight: 600;
    font-family: 'Montserrat';
}

.order-address .address-line-2 {
    color: #6B6C6D;
}

.order-location-info i {
    font-size: 16px;
    color: #9CA3AF;
}

.order-location-info .location-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex-shrink: 0;
}

.order-bottom-right {
    flex-shrink: 0;
    display: flex;
    gap: 64px;
    justify-content: center;
    align-items: flex-end;
}

.order-total-amount {
    font-size: 16px;
    color: #6B6C6D;
    font-weight: 500;
    margin-top: 15px;
}

.order-total-amount.is-rejected,
.order-total-amount.is-cancelled {
    color: #8E8F91 !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.order-total-amount strong {
    font-size: 24px;
    font-weight: 600;
    color: #140001 !important;
    font-family: "Montserrat";
    line-height: 32px;
}

.address-line-1 {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    color: #1F2937;
    font-weight: 600;
}

.address-line-2 {
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6B7280;
}

.order-items-section {
    flex: 0 0 auto;
    background-color: #F7F7F8;
    padding: 24px;
    border-radius: 12px;
    margin-top: 24px;
}

.order-items-title {
    font-family: 'Inter';
    font-size: 16px;
    color: #6B6C6D;
    font-weight: 500;
    line-height: 24px;
}

@media (max-width: 768px) {
    .order-items-title {
        font-size: 14px;
        line-height: 22px;
    }
}

.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter';
    font-size: 14px;
}

@media (max-width: 768px) {
    .order-item {
        gap: 12px;
    }
}

.order-item:last-child {
    margin-bottom: 0;
}

.item-quantity {
    color: #140001;
    /* min-width: 35px; */
    font-weight: 500;
    font-size: 16px;
    font-family: 'Inter';
    background-color: #F7F7F8 !important;
    line-height: 22px;
}

.item-quantity-2 {
    color: #140001;
    font-weight: 500;
    font-size: 16px;
    font-family: 'Inter';
    background-color: #FFFFFF !important;
    line-height: 22px;
}

@media (max-width: 768px) {
    .item-quantity {
        font-size: 14px;
        line-height: 22px;
    }
}

.item-name {
    flex: 1;
    color: #140001;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Inter';
    line-height: 24px;
}

@media (max-width: 768px) {
    .item-name {
        font-size: 14px;
        line-height: 22px;
    }
}

.item-price {
    color: #1F2937;
    font-weight: 400;
    text-align: right;
    min-width: 70px;
    font-family: 'Nexa-Book';
}

.order-total-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 160px;
    flex: 0 0 auto;
}

.order-total-label {
    font-family: 'Nexa-Bold';
    font-size: 11px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.order-total-value {
    font-family: 'Nexa-Bold';
    font-size: 28px;
    color: #1F2937;
    font-weight: 700;
    line-height: 1.2;
}

.order-total-value.pending-total {
    color: #DC2626;
}

.order-total-value.accepted-total {
    color: #1F2937;
}

.order-status-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.order-status-icon i {
    font-size: 24px;
}

.order-status-icon .fa-check-circle {
    color: #10B981 !important;
}

.order-status-icon .fa-times-circle {
    font-size: 24px;
}

.order-info {
    flex: 1;
    min-width: 0;
    margin-left: 16px;
}

.order-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.order-number {
    font-family: 'Inter';
    font-size: 20px;
    color: #140001;
    font-weight: 600;
    line-height: 28px;
}

.order-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Nexa-Bold';
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-badge.completed {
    background-color: #D1FAE5;
    color: #10B981;
    border: none;
}

.order-badge.rejected {
    background-color: #FEE2E2;
    color: #DC2626;
    border: none;
}

.order-badge.cancelled {
    background-color: #F3F4F6;
    color: #6B7280;
    border: none;
}

.order-customer {
    font-family: 'Nexa-Bold';
    font-size: 15px;
    color: #1F2937;
    margin: 8px 0 6px 0;
}

.order-meta {
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-meta span {
    color: #6B7280;
}

.order-meta span:nth-child(2),
.order-meta span:nth-child(4) {
    color: #9CA3AF;
    margin: 0 4px;
}

.order-reason {
    font-family: 'Nexa-Book';
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-reason i {
    font-size: 14px;
}

.order-amount-section {
    text-align: right;
    flex-shrink: 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.order-amount-label {
    font-family: 'Nexa-Bold';
    font-size: 12px;
    color: #6B7280;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.order-amount-value {
    font-family: 'Nexa-Heavy';
    font-size: 20px;
    color: #1F2937;
    font-weight: 700;
    margin-bottom: 12px;
}

.order-details-link {
    color: #DC2626;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: 4px;
}

.order-details-link:hover {
    color: #B91C1C;
    text-decoration: underline;
}

/* Load More Button */
.load-more-container {
    text-align: center;
    padding: 30px;
    background-color: #F5F5F5;
}

.load-more-btn {
    background-color: #F3F4F6;
    border: none;
    color: #6B7280;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    background-color: #E5E7EB;
    color: #333333;
}

/* Content Container */
.admin-main-content>div>section {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
}

.admin-main-content .container,
.admin-main-content .container-fluid {
    padding: 0;
}

.admin-main-content .row {
    margin: 0;
}

.admin-main-content .col-md-10,
.admin-main-content .col-md-12 {
    padding: 0;
    background-color: #F5F5F5;
}

/* Filter Box Updates */
.filter-greybox {
    background-color: #F9F9F9 !important;
    border-radius: 0;
    padding: 16px 24px;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid #E5E5E5;
}

.delivery-box {
    margin: 0;
    padding: 20px 30px;
}

/* Legacy Order Cards - Hidden for new design */
.order-detail-box {
    display: none;
}

/* Order Count Text */
.order-count-text {
    color: #DC2626;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    margin-bottom: 20px;
}

/* Legacy sidebar styles for backward compatibility */
.side-bar-ad {
    display: none;
}

a {
    color: #828282;
}

/* Hide old navbar styles */
.first-navbar,
.second-navbar {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admin-sidebar-container {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 240px;
    }

    .admin-sidebar-container.mobile-open {
        transform: translateX(0);
    }

    .admin-content-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .admin-header {
        padding: 12px 16px;
    }

    .header-search {
        max-width: 100%;
    }

    .admin-main-content {
        padding: 32px 16px;
    }
}

.filter-greybox.report {
    height: auto;
}

.filter-greybox {
    height: 77px;
    background-color: #e0e0e0;
}

.filter-greybox a {
    color: #2b2b2b;
}

.select-box {
    margin: 0;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.select-box input[type="date"] {
    padding: 10px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    color: #333333;
    background-color: #FFFFFF;
    min-width: 160px;
}

.select-box input[type="date"]:focus {
    outline: none;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.select-box select {
    padding: 19px 61px 19px 9px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #828282;
    border: 1px solid #4F4F4F;
    background-color: #BDBDBD;

    display: inline-block;
    position: relative;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 17px;
}

.sort {
    float: none;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort select {
    padding: 10px 32px 10px 12px;
    color: #DC2626;
    border: 1px solid #E5E5E5 !important;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-family: 'Nexa-Book';
    font-size: 14px;
    display: inline-block;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23DC2626' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 8px);
    background-position-y: center;
    cursor: pointer;
}

.sort select:focus {
    outline: none;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.select-box input {
    padding: 19px 25px 19px 9px;
    color: #2a8f38;
    border: none !important;
    display: inline-block;
    position: relative;
}

.filter-greybox.report select {
    padding: 5px 30px 5px 5px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #828282;
    border: 1px solid #4F4F4F;
    background-color: #BDBDBD;

    display: inline-block;
    position: relative;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 0;
}

.filter-greybox.report input {
    padding: 5px;
    color: #2a8f38;
    border: none !important;
    display: inline-block;
    position: relative;
}

.report .table>tbody>tr>th {
    padding: 5px;
    line-height: 1;
    vertical-align: middle;
    border: none;
}

.report .table {
    border: none;
}

.report .table>tbody>tr>td {
    padding: 5px;
    line-height: 1;
    vertical-align: middle;
    border: none;
}


.num-order {
    font-family: 'Nexa-Book';
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #000000;
    text-decoration: underline;
    padding: 20px 0 0 22px;
}

/* Order detail box styles moved above */

.order-name {
    padding: 20px;
}

.order-name h4 {
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #333333;
}

.order-name p {
    /* margin-top: 26px; */
    font-family: 'Nexa-Book';
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

.order-price {
    margin-left: -25px;
}

.order-price h3 {
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    margin-top: 51px;
}

.order-status {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 21px;
    color: #4F4F4F;
    margin-top: 49px;
    margin-left: -25px;
}

.order-date {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 21px;
    color: #4F4F4F;
    margin-top: 49px;
    margin-bottom: 58px;
}

.or-ad-status h3 {
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    margin-top: 46px;
    text-transform: capitalize;
}

.confirm h3 {
    color: #219653;
}

.pending h3 {
    color: #F2C94C;
}

.declined h3 {
    color: #FB3C3C;
}

.paid p {
    color: #219653;
    margin-top: 8px;
}

.un-paid p {
    color: #FF0000;
    margin-top: 8px;
}

.star-admin {
    margin-left: 19px;
}

.order-detail-box:last-child {
    margin-bottom: 100px;
}

/* toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 22px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cd1159;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    left: 0px;
    bottom: -3px;
    background-color: #2a8f38;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #6FCF97;
}

input:checked+.slider:before {
    background-color: #3c7757;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Toggle Switch */
/* Modal popup */
/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 101%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content-new-order {
    background-color: #2a8f38;
    margin: auto;
    /*padding: 50px 151px;*/
    /*border: 3px solid #FFFFFF;*/
    width: 100%;
}

#new-delivery .modal-content {
    background: #2a8f38;
}

#new-delivery .close {
    color: #ffffff;
}

#new-delivery .modal-header {
    border: none;
    color: #ffffff;
}

#new-takeaway .modal-content {
    background: #2a8f38;
}

#new-takeaway .close {
    color: #ffffff;
}

#new-takeaway .modal-header {
    border: none;
    color: #ffffff;
}

#new-reservation .modal-content {
    background: #2a8f38;
}

#new-reservation .close {
    color: #ffffff;
}

#new-reservation .modal-header {
    border: none;
    color: #ffffff;
}

.modal-content-new-order h3 {
    font-family: 'Nexa-Heavy';
    color: #FFFFFF;
    font-size: 26px;
    line-height: 26px;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 44px;
}

.modal-content-new-order p {
    font-family: 'Nexa-Bold';
    color: #FFFFFF;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 33px;
    text-align: center;
}

.view-order-btn {
    padding: 20px 24px;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    text-align: center;
    display: block;
    margin: auto;
    font-family: 'Nexa-Bold';
    color: #FFFFFF;
    font-size: 16px;
    line-height: 16px;
}

.view-order-btn:hover {
    background-color: #FFFFFF;
    border: 1px solid #2a8f38;
    color: #2a8f38;

}

.view-order-modal .modal-dialog {
    width: 885px;
}

.view-order-modal h3 {
    font-family: 'Montserrat';
    color: #140001;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-transform: none;
}

.printer {
    /*margin-left: 222px;
    margin-right: 29px;*/
    margin-left: 350px;
    margin-right: 10px;
}

.update-order-modal-btn {
    padding: 20px 24px;
    font-family: 'Nexa-Bold';
    color: #FFFFFF;
    font-size: 16px;
    line-height: 16px;
    margin: auto;
    text-align: center;
}

.view-order-modal hr {
    color: #BDBDBD;
}

.view-order-modal h4 {
    font-family: 'Nexa-Bold';
    color: #333333;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.view-order-modal p {
    font-family: 'Inter';
    color: #6B6C6D;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 24px;
    font-weight: 500;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .view-order-modal p {
        margin-bottom: 16px;
    }
}

.order-item-modal {
    margin-bottom: 10px;
}

.order-items-section-modal {
    /* margin-bottom: 24px; */
    background-color: #FFFFFF;
}

.order-item-modal h4 {
    font-family: 'Nexa-Book';
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
}

.order-item-modal p {
    font-family: 'Nexa-Book';
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
}

.sub-total-modal h5 {
    font-family: 'Nexa-Bold';
    color: #000000;
    font-size: 16px;
    line-height: 21px;
}

.sub-total-modal p {
    font-family: 'Nexa-Book';
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
}

.total-modal {
    margin-top: 40px;
}

.total-modal h5 {
    font-family: 'Nexa-Heavy';
    color: #333333;
    font-size: 26px;
    line-height: 26px;
}

.payment-status h3 {
    font-family: 'Nexa-Bold';
    color: #333333;
    font-size: 14px;
    line-height: 17px;
    margin-top: 35px;
    margin-bottom: 20px;
}

.payment-status p {
    font-family: 'Nexa-Book';
    color: #4F4F4F;
    font-size: 14px;
    line-height: 17px;
    text-align: right;
}

.order-accept-btn {
    padding: 12px;
    margin: auto;
    color: #FFFFFF;
    background-color: #219653;
    border: 1px solid #219653;
    border-radius: 3px;
}

.order-cancel-btn {
    padding: 12px;
    margin: auto;

    color: #ffffff;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 3px;
}

.order-status-modal .row {
    margin-bottom: 50px;
}

.order-status-modal h3 {
    font-family: 'Nexa-Bold';
    color: #333333;
    font-size: 18px;
    line-height: 18px;
    text-transform: capitalize;
}

.order-status-modal-first h3 {
    margin-top: 15px;
}

.rejected-modal p {
    color: #EB5757;
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    margin-top: 141px;
}

/* Check Box */
/* The container */
.container-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 2px solid #2a8f38;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked~.checkmark {
    background-color: #2a8f38;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Check Box */
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-backdrop {
    display: none;
}

/* new order alert */
.new-order-alert {}

/* new order alert */
/* Modal popup */
.add-new-field {
    margin: 20px auto;
}

.add-new {
    padding: 10px 6px;
    color: #FFFFFF;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 14px;
    /* margin-left: 26px; */
    background-color: #fea100;
    border: 1px solid #fea100;
    border-radius: 3px;
}

.item-list {
    padding: 30px 22px;
}

.item-list h3 {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 21px;
    color: #333333;
    text-transform: capitalize;
    /*padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 30px; */
    margin-bottom: 22px;
}

.item-list p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'Nexa-Book';
    color: #828282;
}

.item-cost {
    margin: 18px -15px;
    border-bottom: 1px solid #828282;
}

.item-cost h5 {
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 21px;
    text-align: right;
    color: #333333;
    padding-bottom: 35px;
}

.item-cost p {
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    color: #333333;
    margin-left: -15px;
}

.text-red {
    font-family: 'Nexa-Book' !important;
    font-size: 14px;
    color: #2a8f38;
    text-transform: lowercase;
    margin-top: 18px;
}

.on-off {
    margin: auto 21px auto 62px;
}

/* Small toggle switch */
/* toggle switch */
.switch1 {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.switch1 input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider1 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6FCF97;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider1:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: -13px;
    bottom: -1px;
    background-color: #219653;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider1 {
    background-color: #AAAAAA;
}

input:focus+.slider1 {
    box-shadow: 0 0 1px #2196F3;
}

input+.slider1:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

input:checked+.slider1:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

/* Rounded sliders */
.slider1.round {
    border-radius: 34px;
}

.slider1.round:before {
    border-radius: 50%;
}

/* Toggle Switch */
/* Small toggle switch */
.img-box {
    width: 80px;
    height: 80px;
    background-color: #C4C4C4;
}

.img-box img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Add new item modal */
.add-new-item-modal .modal-dialog {
    /*width: 475px;*/
}

.add-new-item-modal {
    padding: 50px 44px;
}

.add-new-item-modal h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.add-new-item-modal p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.add-new-item-modal select {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.add-new-item-modal input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.add-new-item-modal textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.img-upload-box {
    background-color: #E0E0E0;
    color: #828282;
    height: 180px;
    width: 100%;
    padding: 36px 35px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.add-item-varient-btn {
    margin: 20px auto;
    padding: 10px 6px;
    background-color: #5A1846;
    border: 1px solid #5A1846;
    color: #FFFFFF;
    text-align: center;
    display: block;
}

.checkbox-modal {
    font-family: 'Nexa-Book' !important;
    font-size: 14px;
    line-height: 18px;
    color: #333333;
    text-align: center !important;
}

.checkbox-modal input[type="checkbox"] {
    width: 10%;
}

input[type="submit"] {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF !important;
    padding: 20px 24px;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
}

/* Add new item modal */
/* Report Admin */
.select-box1 {
    /*margin: 8px auto 7px 22px;*/
    margin: 8px 8px 7px 22px;
    position: absolute;
}

.select-box1 select {
    /*padding: 19px 61px 19px 9px;*/
    padding: 19px 21px 19px 9px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #2b2b2b;
    border: 1px solid #2b2b2b;
    background-color: #BDBDBD;

    display: inline-block;
    position: relative;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 17px;
    /*margin-left: 20px;*/
    margin-left: 0px;
}

.select-box1 input {
    padding: 19px 61px 19px 9px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #2b2b2b;
    border: 1px solid #2b2b2b;
    /*background-color: #BDBDBD;*/

    display: inline-block;
    position: relative;
    margin-left: 20px;
    max-width: 220px;
}

.select-box1 .sort {
    float: right;
    margin-left: 0;
    margin-top: -56px;
}

table {
    width: 100%;
    border: 1px solid #BDBDBD;
    /*margin: 20px 22px;*/
    margin: 20px 0;
}

th {
    padding: 22px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    color: #333333;
    border-bottom: 1px solid #BDBDBD;
    vertical-align: top;
    white-space: nowrap;
}

td {
    padding: 22px;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    color: #828282;
    text-align: left;

}

.print-report {
    padding: 10px 25px;
    background-color: #2a8f38;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Nexa-Bold';
    margin: auto 20px;
}

/* Report Admin */
/*review */
.select-box1 h4 {
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #2b2b2b;
    text-transform: capitalize;
}

.select-box1 .p {
    color: #2b2b2b !important;
    margin-left: 40px;
    margin-right: 328px;
}

.fa-star {
    color: #F2C94C;
}

/*review */
/* review response modal*/
.review-response-modal .modal-dialog {
    width: 475px;
}

.review-response-modal {
    padding: 50px 44px;
}

.review-response-modal h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.review-response-modal p {
    font-family: 'Nexa-Book';
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-top: 34px;
}

.review-response-modal input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.review-response-modal textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.detail {
    color: #828282 !important;
}

/* review response modal*/
.select-box1 .p1 {
    margin-left: 40px;
    margin-right: 146px;
}

.ticket-checkbox input[type="checkbox"] {
    width: 10%;
    margin-left: 10px;
}

.billing {
    padding: 20px 24px 50px;
}

.billing h4 {
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    text-transform: capitalize;
}

.billing table {
    width: 90%;
    margin: 30px 0 50px;
}

/*.billing table, th, td {
    border: 1px solid #BDBDBD;
}*/

.button-add-card {
    padding: 20px 24px;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    /*margin: auto;
    display: block;*/
    margin-right: 20px;
}

.add-card-class {
    padding-bottom: 50px;
}

.profile-head {
    margin: 27px auto 27px 22px;
    position: absolute;
}

.profile-head h4 {
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    text-transform: capitalize;
}

.profile-head span {
    margin-right: 35px;
}

.profile_class {
    padding: 20px 22px 100px;
}

.profile_class h4 {
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    text-transform: capitalize;
}

.profile_class-section {
    margin: 16px 0 50px;
}

.profile_class .col-md-6,
.col-md-12,
.col-md-4 {
    /* padding-left: 0px; */
}

.profile_class p {
    margin-top: 20px;
    margin-bottom: 14px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.profile_class input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.profile_class textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.profile_class form .form-control {
    height: 50px;
    border: 1px solid #BDBDBD;
    box-sizing: border-box;
    border-radius: 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: #BDBDBD;
    font-family: 'Nexa-Book';
}

.profile_class-section .switch {
    margin-top: 77px;
}

/*.profile_class-section .slider{
    background-color: #EB5757;
}
.slider::before {background-color: #2a8f38;}*/
.profile_admin_btn {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF;
    padding: 20px 24px;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    background-color: #2a8f38;
    margin-left: 16px;
}

.delivery_admin {
    padding: 22px;
}

.delivery_admin h4 {
    font-family: 'Nexa-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    text-transform: capitalize;
    /*margin-bottom: 30px;*/
}

.delivery_admin p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.delivery_admin select {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.delivery_admin input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.delivery_admin textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.rect {
    background-color: #2a8f38;
    height: 4px;
    width: 12px;
    margin-top: 30px;
}

.delivery_admin-section1 {
    margin-bottom: 15px;
}

.delivery_admin-section {
    margin-top: 20px;
}

.delivery_admin-section input[type="checkbox"] {
    width: 10%;
}

.delivery_admin-section .switch {
    margin-top: 21px;
}

.admin_submit {
    margin-top: 50px;
}

.switch_promotion {
    margin-left: 150px;
}

.admin_save {
    margin-top: 36px;
    margin-bottom: 50px;
}

.switch_promotion1 {
    margin-left: 79px;
}

.delivery_admin h5 {
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    color: #828282;
    margin-top: 37px;
    margin-bottom: 42px;
}

.switch_promotion2 {
    margin-left: 215px;
}

.admin_new_promo {
    margin-bottom: 20px;
    display: block;
}

.text-success {

    color: #219653 !important;
}

.text-warning {

    color: #F2C94C !important;

}

.padding {
    padding-left: 15px;
}

.delivery_admin-section1 {
    margin-left: 15px;
}

.modal-header {
    padding: 0;
    border-bottom: none;
}

.sub-radio-text {
    height: 10px;
}

#promotions th {
    padding: 17px;
}


/* Override jquery-confirm: remove padding-bottom from buttons */
.jconfirm .jconfirm-box .jconfirm-buttons {
    padding-bottom: 0 !important;
}

.jconfirm.jconfirm-error .jconfirm-bg {
    background: rgba(0, 0, 0, 0.5);
}

.jconfirm.jconfirm-error .jconfirm-box {
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    border-radius: 0;

}

.jconfirm.jconfirm-error .jconfirm-box.loading {}

.jconfirm.jconfirm-error .jconfirm-box.loading:before {}

.jconfirm.jconfirm-error .jconfirm-box.loading:after {}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-closeIcon {}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-title-c {
    font-weight: 600;
    color: #ff0a22;
    font-size: 20px;
}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-content-pane {}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-content {
    list-style: none;
    font-size: 16px;
}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-content ul {
    list-style: none;
}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-content li::before {
    content: "\e088";
    color: #ff0a22;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-family: 'Glyphicons Halflings';
    font-size: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-buttons {}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-buttons button.btn-default {
    background: #ff0a22;
    color: #ffffff;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 16px;
    padding: 0px 20px;
}

.jconfirm.jconfirm-error .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background: #ffffff;
    color: #ff0a22;
    border: 1px solid #ff0a22;
}

/*=========================================================================*/
/* Success popup: #FDFDFD bg, admin/check.svg icon, #EEFBD1 icon bg, #3C850F button */

.jconfirm.jconfirm-success .jconfirm-bg {
    background: rgba(0, 0, 0, 0.5);
}

.jconfirm.jconfirm-success .jconfirm-box {
    background: #FDFDFD;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.jconfirm.jconfirm-success .jconfirm-box.loading {}

.jconfirm.jconfirm-success .jconfirm-box.loading:before {}

.jconfirm.jconfirm-success .jconfirm-box.loading:after {}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-closeIcon {}

/* Success icon: admin/check.svg inside circular #EEFBD1 bg. Desktop: icon–heading 16px, heading–para 8px */
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-title-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 0px;
    padding: 0px;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-icon-c {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #EEFBD1 !important;
    border: none !important;
    font-size: 0;
    margin: 0 !important;
    order: -1;
    position: relative;
}

/* Hide default Font Awesome icon */
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-icon-c .fa-check,
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-icon-c [class*="check"],
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-icon-c i {
    display: none !important;
}

/* Use admin/check.svg via mask for #3C850F checkmark */
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-icon-c::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: #3C850F;
    -webkit-mask-image: url('../svg/Check.svg');
    mask-image: url('../svg/Check.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-title-c .jconfirm-title {
    color: #140001;
    font-size: 24px !important;
    margin: 0;
    font-family: 'Montserrat';
    font-weight: 600;
    line-height: 32px;
}

@media (max-width: 768px) {
    .jconfirm.jconfirm-success .jconfirm-box .jconfirm-title-c .jconfirm-title {
        font-size: 16px !important;
        line-height: 24px;
    }
}

/* Para to button: 24px desktop */
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-content-pane {
    text-align: center;
    margin: 0 0 24px 0;
    padding: 0;
    width: 100%;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-content {
    list-style: none;
    font-size: 16px;
    color: #6B6C6D;
    text-align: center;
    line-height: 24px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .jconfirm.jconfirm-success .jconfirm-box .jconfirm-content {
        line-height: 22px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .jconfirm.jconfirm-success .jconfirm-box .jconfirm-buttons button.btn-default {
        font-size: 14px;
        line-height: 22px;
    }
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-content p {
    margin: 0;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-content ul {
    list-style: none;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-content li::before {
    content: none;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-buttons {
    margin: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .jconfirm.jconfirm-success .jconfirm-box .jconfirm-title-c {
        gap: 12px;
        margin-bottom: 4px;
    }
    .jconfirm.jconfirm-success .jconfirm-box .jconfirm-content-pane {
        margin-bottom: 16px;
    }
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-buttons button.btn-default {
    background: #3C850F;
    color: #FFFFFF;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    padding: 12px 24px;
    width: 100%;
    max-width: none;
    line-height: 1;
    font-weight: 500;
    margin: 0 !important;
}

.jconfirm.jconfirm-success .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background: #347a0d;
    color: #FFFFFF;
    border: none;
}

.cuisine .bootstrap-select>.dropdown-toggle {
    height: 100%;
    border-radius: 0;
}

.requests-table tbody {
    overflow-y: auto;
}

.requests-table thead,
.requests-table tbody {
    display: block;
    width: 100%;
    position: relative;
}

.navbar-inverse .navbar-brand:hover {
    color: #DB6D13;
}

.navbar-inverse .navbar-brand {
    font-family: Nexa-Bold;
    font-size: 34px;
    line-height: 34px;

    /* NI-Orange */

    color: #DB6D13;
}

.navbar-inverse .navbar-brand span {
    color: #2a8f38;
}


.summery-table {
    border: none;
}

.summery-table tr td {
    font-size: 15px;
    font-weight: 600;
    color: #2a8f38;
}

.totals>.table>tbody>tr>th {
    font-size: 13px;
    font-weight: 600;
    color: #2a8f38;
    border-left: 1px solid;
    padding: 5px 0 5px 5px;
}

.totals>.table>tbody>tr>td {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 5px 5px 0;
}


.sk-cube-grid {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    /* bottom: 0; */
    top: calc(50% - 20px);
}

.sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: white;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {

    0%,
    70%,
    100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay {

    0%,
    70%,
    100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

.loader.show {
    display: block;
}

.loader {
    background: #FF5733;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999999;
    display: none;
}

#print-element .modal-dialog {
    width: 885px;
}

#print-element h3 {
    font-family: 'Nexa-Bold';
    color: #000000;
    font-size: 18px;
    line-height: 18px;
    text-transform: capitalize;
}

#print-element hr {
    color: #BDBDBD;
}

#print-element h4 {
    font-family: 'Nexa-Bold';
    color: #333333;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

#print-element p {
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 20px;
    color: #4F4F4F;
    word-break: break-all;
}


.add-new-item-modal table input {
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.notification-count {
    float: right;
    width: 43px;
    height: 20px;
    background: #EB5757;
    line-height: normal;
    font-size: 14px;
    font-family: 'Nexa-Bold';
    color: #FFFFFF;
    border-radius: 20px;
    padding: 3px 0px;
    text-align: center;
}

.setting-header-title {
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    text-transform: capitalize;
    font-weight: bold;
    margin-bottom: 15px;
    background: #eee;
    border-radius: 4px;
    padding: 15px;
}

.lbl-setting {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

/* Reservation Config Card */
.res-config-card {
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    margin-bottom: 24px;
    margin-right: 30px;
    overflow: hidden;
    max-width: 850px;
    margin-left: 16px;
}

.res-config-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    background: #FFF8F7;
    border-bottom: 1px solid #F0E0DD;
}

.res-config-title {
    font-family: 'Nexa-Bold', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0;
    letter-spacing: 0.2px;
}

.res-config-body {
    padding: 22px;
}

.res-config-field-group {
    margin-bottom: 4px;
}

.res-config-label {
    font-family: 'Nexa-Bold', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

.res-config-hint {
    font-family: 'Inter', 'Nexa-Book', sans-serif;
    font-size: 13px;
    color: #888;
    margin-top: 0;
    margin-bottom: 12px;
}

.res-config-input-wrap {
    max-width: 280px;
}

.res-config-input {
    height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    font-size: 14px;
    padding: 8px 14px !important;
    transition: border-color 0.2s ease;
}

.res-config-input:focus {
    border-color: #C9331F !important;
    box-shadow: 0 0 0 3px rgba(201, 51, 31, 0.08) !important;
    outline: none;
}

.res-config-divider {
    height: 1px;
    background: #F0F0F0;
    margin: 20px 0;
}

/* Meal Ranges Table */
.meal-ranges-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-bottom: 14px;
}

.meal-ranges-table thead th {
    font-family: 'Nexa-Bold', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 0 10px 8px;
    border: none;
    background: transparent;
}

.meal-ranges-table tbody tr {
    background: #F9FAFB;
    border-radius: 8px;
}

.meal-ranges-table tbody td {
    padding: 8px 10px;
    border: none;
    vertical-align: middle;
}

.meal-ranges-table tbody td:first-child {
    border-radius: 8px 0 0 8px;
}

.meal-ranges-table tbody td:last-child {
    border-radius: 0 8px 8px 0;
}

.meal-ranges-table .form-control {
    height: 40px !important;
    margin-bottom: 0 !important;
    font-size: 14px;
    color: #333 !important;
    border-radius: 6px !important;
    border: 1px solid #E0E0E0 !important;
    background: #fff !important;
    transition: border-color 0.2s ease;
}

.meal-ranges-table .form-control:focus {
    border-color: #C9331F !important;
    box-shadow: 0 0 0 2px rgba(201, 51, 31, 0.08) !important;
}

.meal-ranges-table .meal-range-name {
    min-width: 140px;
}

.meal-ranges-table .meal-range-slots {
    width: 80px;
    text-align: center;
}

.meal-range-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #C9331F;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-range-remove-btn:hover {
    background: #FFF0EE;
}

.meal-range-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    background: #fff;
    font-family: 'Inter', 'Nexa-Book', sans-serif;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-range-add-btn:hover {
    border-color: #C9331F;
    color: #C9331F;
    background: #FFF8F7;
}

@media (max-width: 768px) {
    .res-config-body {
        padding: 16px;
    }
    .res-config-input-wrap {
        max-width: 100%;
    }
    .meal-ranges-table .meal-range-name {
        min-width: 100px;
    }
    .meal-ranges-table .form-control {
        font-size: 13px;
    }
}

/*global settings panel*/

.setting-switch {
    margin-top: 37px;
    margin-right: -140px;
}

.setting-switch>input[type="checkbox"] {
    display: none;
}

.setting-switch>label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 200px;
}

.setting-switch>label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.setting-switch>label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.setting-switch>input[type="checkbox"]:checked+label::before {
    background: inherit;
    opacity: 0.5;
}

.setting-switch>input[type="checkbox"]:checked+label::after {
    background: inherit;
    left: 20px;
}

.setting-switch label.label-success {
    background-color: #219653;
}

.setting-switch>label::before {
    background-color: #C7003B;
}

.setting-switch>label::after {
    background-color: #C7003B;
}

.setting-switch {
    display: block;
    margin: 0;
    position: relative;
}

.mb-15 {
    margin-bottom: 15px;
}

.deals-new {
    margin-top: 12px;
    margin-left: 0 !important;
}

.pagination {
    width: 100%;
    padding-left: 10px;
}

.menu-items-multi-select {
    display: flex;
}

.menu-items-multi-select>* {
    align-self: center;
}

.available-items {
    width: 40% !important;
    float: left !important;
}

.selected-items {
    width: 40% !important;
    float: right !important;
}

.multi-select-button {
    padding: 6px 10px;
    font-size: 21px;
    font-weight: bold;
}

.btn-multi-select {
    width: 20%;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #FFDD15;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #FFDD15;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #FFDD15;
}

.rating-star .fa-star {
    color: #ccc;
}

.rating-star .active {
    color: #fce703 !important;
}

.requests-table tbody {
    overflow-x: scroll;
}

.faq-add {
    margin-top: 10rem;
    margin-left: 35px;
    padding: 10px;
    width: 160px;
    height: 46px;
    margin-bottom: 20px;
}

.faq-table-container {
    overflow-y: auto;
    margin-left: 3.5rem;
}

.faq-table {
    width: 91.5rem;
}

.faq-model {
    margin-top: -30px;
}

.faq-add-content {
    width: 450px;
    height: 600px;
    border-radius: 6px !important;
    margin-left: 50px;
}

.faq-add-content h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
    margin-top: 35px;
}

.faq-add-content textarea {
    height: 100px;
}

.faq-submit {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF !important;
    padding: 20px 24px;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
}

.faq-submit:hover {
    background-color: #2a8f38;
}

.faq-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline;
}

.faq-table th {
    font-weight: bold;
    border-bottom: none;
}

.faq-edit-content {
    width: 450px;
    height: 560px;
    border-radius: 6px !important;
    margin-left: 50px;
}

.faq-edit-content h4 {}

@media(min-width:768)and(max-width:860) {
    .faq-add {
        margin-left: 3rem !important;

    }
}

@media (max-width:375px) {
    .faq-table-container {
        padding: 10px;
        padding-left: 8px;
        margin-left: 0;
        padding-bottom: 50px;
    }

    .faq-table-body td {

        padding: 15px;
    }

    .faq-table {
        width: 38rem;
        height: 16rem;
    }

    .faq-add {
        margin-left: 18rem;
        margin-top: 5rem;
    }

    .faq-model {
        margin-left: -40px;
    }

    .delete-icon {
        margin-left: 35px !important;
    }

    .faq-model .help-block {
        color: red;
    }

}

@media (min-width:412px)and (max-width:414px) {
    .faq-add {
        margin-left: -19rem !important;
        margin-top: 18rem !important;
    }
}

@media(min-width:428px)and (max-width:430px) {
    .faq-add {
        margin-left: -17rem !important;
        margin-top: 18rem !important;
    }
}

@media (max-width:414px) {
    .faq-table-container {
        padding: 10px;
        padding-left: 8px;
        margin-left: 0;
        padding-bottom: 50px;
    }

    .faq-table {
        width: 38rem;
        height: 16rem;


    }

    .faq-add {
        margin-left: 0.5rem;
        margin-top: 15rem;
    }

    .faq-model {
        margin-left: -40px;
    }

    .delete-icon {
        margin-left: 35px !important;
    }
}

/* responsive */
@media (min-width: 1900px) {
    .faq-add {
        margin-left: 3rem !important;

    }

    .select-box select {
        padding: 9px 61px 9px 9px;
        background-position-y: 5px;
    }

    .sort-deals {
        margin-top: 11px;
    }

    .side-bar-ad ul {
        list-style: none;
    }

    .side-bar-ad h1 {
        /* margin-left: 40px; */
    }

    .order-name p {
        margin-top: 26px;
    }
}

@media (max-width: 1600px) {
    .checkmark {
        top: -5px;
        left: 0;
    }

    .order-name p {
        margin-top: 26px;
    }

    .sort-deals {
        margin-top: 12px;
    }

    .select-box select {
        padding: 9px 61px 9px 9px;
        background-position-y: 4px;
    }

    .sort select {

        background-position-y: 5px;
    }

    .add-new {
        margin-left: 4px;
        width: 17%;
    }

    .offers-new,
    .offers-sorted {
        margin-top: 15px;
    }

    .requests-table {
        margin-left: 1.5rem;
        width: 98%;

    }

    .side-bar-ad ul {
        margin-left: -39px;
    }

    .download {
        padding-left: 42px;
    }

    .select-box1 input {
        margin-left: 34px;
    }

}

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

@media (max-width: 1200px) {
    .filter-greybox {
        height: 130px;
    }

    .sort {
        margin-right: 16px;
        margin-top: 20px;
    }

    .add-new {
        width: 21%;
    }

    .select-deals {
        width: 100%;
    }

    .sort-deals {
        margin-top: 13px;
    }

    .apply-branches {
        margin-right: 5px;
    }

    .offers-box {
        height: 115px;
    }

    .second-date {
        margin-left: 74px !important;
    }

    .side-bar-ad ul {
        margin-left: -80px;
    }

    .side-bar-ad h1 {
        /* width: max-content; */
        margin-left: -40px;
    }

    .select-box1 input {
        padding: 19px 38px 19px 9px;
    }

    .setting-box {
        height: 93px;
    }
}

@media (max-width: 1025px) and (min-width: 992px) {
    .select-box select {
        padding: 9px 61px 9px 9px !important;
    }

    /* .filter-greybox .sort{
        margin-top: 0;
    } */
    .offers-box div {
        width: 100%;
    }

    .first-date,
    .second-date {
        padding: 9px 2px 9px;
    }

    .side-bar-ad ul {
        margin-left: -28px;
    }

    .side-bar-ad h1 {
        /* width: max-content; */
        margin-left: 14px;
    }

    .setting-box {
        min-height: 91px;
    }

    .order-status {
        width: max-content;
        padding-left: 5px;
    }

    .text-warning {

        /* margin-left: -6px; */
    }

    .order-name p {
        margin-top: 16px;
    }
}

@media (max-width: 992px) {

    .sub-total-modal,
    .sub-total-modal,
    .total-modal,
    .deliver-popup {
        display: flex;
    }

    #print-element h3 {
        margin-left: 15px;
    }

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

    .select-box select {

        padding: 9px 25px 9px 9px !important;

    }

    .add-new {

        width: auto;
    }

    .pagination li a {
        z-index: 1 !important;
    }

    .offers-box {
        min-height: 90px !important;
    }

    .side-bar-ad ul {
        margin-left: 0px;
    }

    .side-bar-ad h1 {
        /* width: max-content; */
        margin-left: 40px;
    }

    .first-date,
    .second-date {
        padding: 5px 0px 5px !important;
        width: 20%;
    }

    .select-box1 {
        margin-top: 17px;
    }

    .order-name p {
        margin-top: 14px;
    }

    .order-price h3 {
        font-size: 18px !important;
    }

}

@media (max-width: 768px) {
    .view-order-modal h3 {
        text-align: left !important;
        margin-left: 0px !important;
    }

    .checkmark {
        top: -21px;
        left: 93%;
    }

    /* Only show the order modal full-width on mobile when it is actually open (.in) */
    .view-order-modal.in {
        width: 100%;
        display: flex !important;
        justify-content: center;
    }

    .takeaway-section div {
        display: flex;

    }

    .takeaway-section div .col-md-5 {
        justify-content: end;
    }

    #print-element div div .col-md-6 {
        /* display: flex;     */
        width: 50%;
    }

    #menus .filter-greybox {
        height: 135px !important;
    }

    #menus .sort {
        margin-left: 0px !important;
    }

    #menus .sort {
        margin-top: 2rem;
    }

    #menus .add-new {
        margin-right: 3px;
    }

    #menus .add-new {
        /* width: 25%; */
    }

    #menus .sort select {
        background-position-y: 6px !important;
    }

    #menus .select-box select {
        padding: 10px 20px !important;
    }

    .modal-content {
        width: 98%;
    }

    .sort-deals {
        margin-top: 15px;
    }

    .deals-new {
        margin-top: 14px;
    }

    .sort select {
        background-position-y: 5px;
        background-position-x: 106%;
    }

    .select-box select {
        padding: 9px 20px !important;
    }

    .checkbox-modal input[type="checkbox"] {
        width: 5%;
    }

    .side-bar-ad h1 {
        /* width: max-content; */
        margin-left: 0px;
    }

    .download {
        padding-left: 42px;
    }

    .table tbody {
        overflow-x: scroll;
    }

    .customer-selection {
        background-color: none !important;
        left: 5%;
        bottom: 86%;
    }

    .first-date,
    .second-date {
        padding: 9px 0px 9px 9px;

    }

    .profile-head h4 {
        font-size: 18px;
        display: flex;
        flex-direction: column;

    }

    .profile-head span {
        margin-bottom: 1rem;
    }


}


@media (max-width: 576px) {
    .view-order-modal .modal-dialog {
        width: 94% !important;
    }

    .view-order-modal {
        width: 100%;
        /* Let Bootstrap control visibility; only style layout here */
        justify-content: center;
    }

    .add-new {
        margin-left: 0px;
    }

    #menus .add-new {
        margin-right: 0px;
    }

    .order-payment {
        margin-left: 15px;
    }

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

    .takeaway-section div {
        display: flex;

    }

    .takeaway-section div div h4 {
        width: max-content;
    }

    .checkmark {
        left: 92%;
    }

    #menus .add-new {
        width: 31%;
    }

    #menus .select-box select,
    #menus .add-new {
        width: 100%;
    }

    #menus .add-new {
        margin-top: 0.6rem;
    }

    #menus .filter-greybox {
        height: 264px !important;
    }

    .select-box {
        margin: 0;
    }

    #menus .sort {
        margin-top: 1rem;
    }

    .modal-content {
        width: 98%;
    }

    .modal-dialog,
    .offer-modal .modal-dialog {
        display: flex;
        justify-content: center;
    }

    td {
        padding: 19px 4px;
    }

    .profile-head span {
        margin-right: 14px;
    }

    .profile-head h4 {
        font-size: 14px;

    }

    .order-name {
        padding: 14px;
    }

    .order-name p {
        margin-top: 14px;
    }

    .delivery-popup {
        height: max-content;
    }

    #print-element h4 {
        margin-bottom: 5px !important;
    }

    #print-element p {
        margin-bottom: 11px !important;
    }

    .order-status-modal .row {
        margin-bottom: 38px !important;
    }
}


@media (max-width: 425px) {
    .order-payment {
        margin-left: 15px !important;
    }

    .sort {
        margin-top: 0;
    }

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

    .total-modal h5 {
        font-size: 22px;
    }

    .order-cancel-btn {
        margin-top: 0.5rem;
    }

    .sort-deals select {
        background-position-x: 109%;
    }

    .deals-box {
        height: 95px !important;
    }

    input[type="checkbox"] {
        width: 9% !important;
    }

    .img-upload-box {
        height: 220px !important;
    }

    td {

        padding: 10px 3px;

    }

    .modal-content {
        height: max-content;
    }

    .print-report {
        padding: 0.5rem;
        margin: auto;
    }

    .delivery-sorted {
        margin-top: -15px !important;
    }

    .checkmark {
        left: 70%;
        top: 1.5%;
    }

    .delivery-popup .accept-order {
        font-size: 12px !important;
    }

    .order-date {
        margin: 0 20px !important;
    }

    .or-ad-status h3 {
        margin-top: 0 !important;
        padding-bottom: 1rem !important;
        margin-left: 20px;
    }
}

/*Career*/
.no-careers-message {
    font-family: "Nexa-Book";
    font-size: 18px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: center;
    color: #333333;
    margin-top: 20px;
}

.careers-new,
.careers-sorted {
    margin-top: 15px;
}

.career-item {
    margin-bottom: 15px;
    padding: 0 5% 5% 10%;
}

.career-modal {
    justify-content: center;
}


.scrollable-area {
    max-height: 15em;
    overflow-y: auto;
    border: #BDBDBD solid 1px;
    padding: 5%;
    margin: 5% 0 10% 0;
}

.publish-button {
    font-family: "Nexa-Book";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;
    background-color: #286090;
}

.edit-post {
    font-family: "Nexa-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #2A8F38;
    text-transform: capitalize;
    cursor: pointer;
}

.publish-button:hover {
    background-color: #3576af;
    color: #FFFFFF;
}

.delete-button {
    font-family: "Nexa-Book";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;
    margin-left: 10px;
}

.modal-dialog {
    margin-left: 30%;
    margin-right: 20%;
}

.editCareerModal {
    padding: 5% 5%;
}

.editCareerModal h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.editCareerModal p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.editCareerModal select {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.editCareerModal input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.editCareerModal textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.editCareerModal table input {
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.addNewCareerModal {
    padding: 5% 5%;
}

.addNewCareerModal h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.addNewCareerModal p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.addNewCareerModal select {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.addNewCareerModal input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.addNewCareerModal textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.addNewCareerModal table input {
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.career-list {
    padding: 30px 22px;
}

.career-list h3 {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 21px;
    color: #333333;
    text-transform: capitalize;
    margin-bottom: 22px;
}

.career-list p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'Nexa-Book';
    color: #828282;
}

.error-message {
    font-family: "Nexa-Book";
    font-size: 12px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #BC040B;
    display: none;
}

.career-form-submit {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF !important;
    padding: 20px 24px;
    background-color: #2a8f38;
    border: 1px solid #2a8f38;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
}

.career-form-submit:hover {
    background-color: #2a8f38;
}

.career-item h5 {
    color: #000000;
    font-family: Nexa-Book;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 10px;
}

.career-item p {
    color: #828282;
    font-family: Nexa-Book;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 15px;
    margin-left: 15px;
    text-align: justify;
}

@media (max-width: 768px) {
    .modal-dialog {
        margin-left: 10%;
        margin-right: 5%;
    }

    .addNewCareerModal textarea {
        height: 100px;
    }

    .editCareerModal textarea {
        height: 100px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .modal-dialog {
        margin-left: 15%;
        margin-right: 20%;
    }
}

/*Blog*/

.no-blogs-message {
    font-family: "Nexa-Book";
    font-size: 18px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: center;
    color: #333333;
    margin-top: 20px;
}

.blogs-new,
.blogs-sorted {
    margin-top: 15px;
}

.blog-item {
    margin-bottom: 15px;
    padding: 0 5% 5% 10%;
}

.blog-modal {
    justify-content: center;
}

.blog-title {
    height: 70px;
    margin-bottom: 10px;
}

.blog-item .img-box {
    margin-bottom: 10px;
    object-fit: cover;
}


.scrollable-area {
    max-height: 15em;
    overflow-y: auto;
    border: #BDBDBD solid 1px;
    padding: 5%;
    margin: 5% 0 10% 0;
}

.publish-button {
    font-family: "Nexa-Book";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;
    background-color: #286090;
}

.edit-post {
    font-family: "Nexa-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #2A8F38;
    text-transform: capitalize;
    cursor: pointer;
}

.publish-button:hover {
    background-color: #3576af;
    color: #FFFFFF;
}

.delete-button {
    font-family: "Nexa-Book";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: right;
    color: #FFFFFF;
    margin-left: 1px;
}

.modal-dialog {
    margin-left: 30%;
    margin-right: 20%;
}

.editBlogModal {
    padding: 5% 5%;
}

.editBlogModal h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.editBlogModal p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.editBlogModal select {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.editBlogModal input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.editBlogModal textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.editBlogModal table input {
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.addNewBlogModal {
    padding: 5% 5%;
}

.addNewBlogModal h4 {
    text-align: center;
    font-family: 'Nexa-Heavy';
    font-size: 26px;
    line-height: 26px;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.addNewBlogModal p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'Nexa-Bold';
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #333333;
}

.addNewBlogModal select {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #BDBDBD;
    border: 1px solid #BDBDBD;
}

.addNewBlogModal input {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.addNewBlogModal textarea {
    width: 100%;
    font-family: 'Nexa-Book';
    font-size: 14px;
    line-height: 17px;
    padding: 20px 10px;
    color: #000000;
    border: 1px solid #BDBDBD;
}

.addNewBlogModal table input {
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.blog-list {
    padding: 30px 22px;
}

.blog-list h3 {
    font-family: 'Nexa-Bold';
    font-size: 16px;
    line-height: 21px;
    color: #333333;
    text-transform: capitalize;
    margin-bottom: 22px;
}

.blog-list p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'Nexa-Book';
    color: #828282;
}

.error-message {
    font-family: "Nexa-Book";
    font-size: 12px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #BC040B;
    display: none;
}


.blog-item h5 {
    color: #000000;
    font-family: Nexa-Book;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 10px;
}

.blog-item p {
    color: #828282;
    font-family: Nexa-Book;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 15px;
    margin-left: 15px;
    text-align: justify;
}

@media (max-width: 768px) {
    .modal-dialog {
        margin-left: 10%;
        margin-right: 5%;
    }

    .addNewBlogModal textarea {
        height: 100px;
    }

    .editBlogModal textarea {
        height: 100px;
    }

    .blog-item .img-box {
        margin-bottom: 10px;
        object-fit: cover;
        margin-left: 30%;
        margin-top: 5%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .modal-dialog {
        margin-left: 15%;
        margin-right: 20%;
    }

}

.auth-user {
    color: #fff;
    top: 38px;
    font-weight: bold;
    line-height: 30px;
}

.project-version {
    font-size: 12px;
    color: #333333;
    padding-top: 60px;
    vertical-align: middle;
    font-weight: bold;
}

/* Empty State Styles */
.empty-state-container {
    padding: 64px 20px;
    background: #FDFDFD;
    border-radius: 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .empty-state-container {
        padding: 32px;
    }
}

.empty-state-icon-wrapper {
    width: 62px;
    height: 62px;
    background: #EAEBEC;
    border-radius: 50%;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .empty-state-icon-wrapper {
        margin-bottom: 16px;
    }
}

.empty-state-icon {
    font-size: 24px;
    color: #9ca3af;
}

.empty-state-icon-wrapper img.empty-state-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.empty-state-title {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #140001;
    margin-bottom: 8px;
    line-height: 32px;
}

@media (max-width: 768px) {
    .empty-state-title {
        font-size: 16px;
    }
}

.empty-state-description {
    color: #6B6C6D;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    margin-bottom: 0px;
    font-weight: 400;
    line-height: 24px;
}


@media (max-width: 768px) {
    .empty-state-description {
        font-size: 12px;
        line-height: 20px;
    }
}

.empty-state-action-btn {
    background: #C9331F;
    color: #FDFDFD;
    border: none;
    padding: 12px 24px;
    border-radius: 20px;
    font-weight: 500;
    line-height: 26px;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-family: "Inter";
    gap: 8px;
    transition: all 0.2s ease;
    margin-top: 32px;
}

@media (max-width: 1024px) {
    .empty-state-action-btn {
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .empty-state-action-btn {
        font-size: 14px;
        padding: 8px 16px;
        border-radius: 20px;
        gap: 4px;
    }
}

.empty-state-action-btn:hover {
    color: #FDFDFD;
    text-decoration: none;
}

.empty-state-action-btn i {
    color: #FDFDFD;
    background: transparent;
    font-size: 18px;
}

.back-button {
    background-color: #F7F7F8;
    padding: 32px 0px 0px 24px;
}

@media (max-width: 768px) {
    .back-button {
        padding: 0px 0px 0px 0px;
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 1500px;
    }
}

.takeaway-overview-modal .modal-dialog {
    /* max-width: 680px; */
    margin: 30px auto;
}

.takeaway-overview-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0px 0px;
}

.takeaway-overview-modal .modal-body {
    padding: 0;
    background: #FAFAFA;
}

/* Order card container */
.takeaway-order-card {
    background: #FFFFFF;
    border-radius: 12px;
    /* margin: 20px; */
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Order header section */
.takeaway-order-header {
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
}

.takeaway-order-number {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 4px 0;
}

.takeaway-order-timestamp {
    font-size: 13px;
    color: #828282;
    margin: 0;
}

.takeaway-status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter';
    letter-spacing: 0.5px;
    margin-left: 12px;
}

.takeaway-status-badge.status-pickup {
    background: #FFE8E8;
    color: #EB5757;
}

.takeaway-status-badge.status-ready {
    background: #D4F4DD;
    color: #27AE60;
}

.takeaway-status-badge.status-preparing {
    background: #FFF4E6;
    color: #FF8A00;
}

.takeaway-status-badge.status-accepted {
    background: #D4F4DD;
    color: #27AE60;
}

/* Header action buttons */
.takeaway-header-actions {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    gap: 10px;
}

.takeaway-btn-cancel {
    background: transparent;
    border: 1px solid #E0E0E0;
    color: #828282;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.takeaway-btn-cancel:hover {
    border-color: #EB5757;
    color: #EB5757;
}

.takeaway-btn-status {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.takeaway-btn-status.btn-ready {
    background: #27AE60;
    color: #FFFFFF;
}

.takeaway-btn-status.btn-preparing {
    background: #FF8A00;
    color: #FFFFFF;
}

.takeaway-btn-status.btn-accepted {
    background: red;
    color: #FFFFFF;
}

.takeaway-btn-status:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Two column layout */
.takeaway-content-wrapper {
    display: flex;
    gap: 0;
}

.takeaway-left-column {
    flex: 1;
    padding: 24px;
    background: #F5F5F5;
    border-right: 1px solid #F0F0F0;
}

.takeaway-right-column {
    width: 370px;
    padding: 24px 20px;
    background: #F5F5F5;
}

/* Info sections */
.takeaway-info-section {
    background: #FFFFFF;
    border-radius: 20px;
    border-top: 4px solid red;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.takeaway-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.takeaway-section-icon {
    width: 18px;
    height: 18px;
    color: #333333;
}

.takeaway-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 0;
    text-transform: none;
}

/* Customer info grid */
.takeaway-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.takeaway-info-item {
    display: flex;
    flex-direction: column;
}

.takeaway-info-label {
    font-size: 11px;
    color: #828282;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.takeaway-info-value {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    margin: 0;
}

.takeaway-info-value.phone-number {
    color: #EB5757;
}

/* Pickup information */
.takeaway-pickup-time {
    display: flex;
    align-items: center;
    gap: 8px;
}

.takeaway-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #FFF4E6;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #FF8A00;
}

.takeaway-time-badge.asap {
    background: #FFE8E8;
    color: #EB5757;
}

/* Order items section */
.takeaway-items-section {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.takeaway-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
}

.takeaway-items-count {
    font-size: 12px;
    color: #828282;
}

.takeaway-items-list {
    margin-top: 16px;
}

.takeaway-item-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.takeaway-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #FFE8E8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.takeaway-item-avatar.item-2 {
    background: #FFF4E6;
}

.takeaway-item-avatar.item-3 {
    background: #E8F5E9;
}

.takeaway-item-avatar-text {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
}

.takeaway-item-details {
    flex: 1;
}

.takeaway-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 2px 0;
}

.takeaway-item-category {
    font-size: 12px;
    color: #828282;
    margin: 0;
}

.takeaway-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin: 0;
}

/* Special instructions section */
.takeaway-special-instructions {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.takeaway-instructions-box {
    background: #F8F8F8;
    border-left: 3px solid #EB5757;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 12px;
}

.takeaway-instructions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #EB5757;
    border-radius: 50%;
    margin-right: 8px;
}

.takeaway-instructions-text {
    font-size: 13px;
    color: #333333;
    line-height: 1.5;
    margin: 0;
}

/* Payment summary sidebar */
.takeaway-payment-summary {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.takeaway-summary-title {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 16px 0;
}

.takeaway-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.takeaway-summary-label {
    font-size: 13px;
    color: #828282;
}

.takeaway-summary-value {
    font-size: 13px;
    color: #333333;
    font-weight: 500;
}

.takeaway-summary-total {
    border-top: 1px solid #F0F0F0;
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.takeaway-total-label {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
}

.takeaway-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #EB5757;
}

/* Payment status indicator */
.payment-status-title {
    font-size: 16px !important;
}

.payment-summary-group {
    gap: 24px;
    display: flex;
    flex-direction: column;
}

.takeaway-payment-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #E8F5E9;
    border-radius: 6px;
    margin-top: 12px;
}

.takeaway-payment-icon {
    width: 16px;
    height: 16px;
    color: #27AE60;
}

.takeaway-payment-text {
    font-size: 12px;
    color: #27AE60;
    font-weight: 600;
    margin: 0;
}

/* Update status section */
.takeaway-update-status {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
}

.takeaway-update-title {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 12px 0;
}

.takeaway-update-text {
    font-size: 11px;
    color: #828282;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Action buttons section */
.takeaway-actions-section {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.takeaway-actions-title {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 16px 0;
}

.takeaway-actions-description {
    font-size: 12px;
    color: #828282;
    margin-bottom: 16px;
    line-height: 1.4;
}

.takeaway-btn-primary {
    width: 100%;
    padding: 14px 20px;
    background: #EB5757;
    color: #FFFFFF;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.takeaway-btn-primary:hover {
    background: #D64545;
    transform: translateY(-1px);
}

.takeaway-btn-primary.btn-accept {
    background: red;
}

.takeaway-btn-primary.btn-accept:hover {
    background: #229A55;
}

.takeaway-btn-secondary-group {
    display: flex;
    gap: 10px;
}

.takeaway-btn-secondary {
    flex: 1;
    padding: 12px 16px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    color: #333333;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.takeaway-btn-secondary:hover {
    border-color: #333333;
}

.takeaway-btn-secondary.btn-reject {
    color: #EB5757;
    border-color: #EB5757;
}

.takeaway-btn-secondary.btn-reject:hover {
    background: #FFF5F5;
}

.takeaway-note-text {
    font-size: 11px;
    color: #BDBDBD;
    text-align: center;
    margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .takeaway-content-wrapper {
        flex-direction: column;
    }

    .takeaway-left-column {
        border-right: none;
        border-bottom: 1px solid #F0F0F0;
    }

    .takeaway-right-column {
        width: 100%;
    }

    .takeaway-header-actions {
        position: static;
        margin-top: 12px;
    }
}

/* ========================================
   Delivery Overview Modal Styles
   ======================================== */

/* Main modal container */
.delivery-overview-modal .modal-dialog {
    margin: 30px auto;
}

.delivery-overview-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0px 0px;
}

.delivery-overview-modal .modal-body {
    padding: 0;
    background: #FAFAFA;
}

/* Order card container */
.delivery-order-card {
    background: #F7F7F8;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Order header section */
.delivery-order-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 765px) {
    .delivery-order-header {
        gap: 8px;
    }
}

.delivery-order-number {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Montserrat';
    color: #140001;
    margin: 0;
    text-transform: none;
    display: flex;
    gap: 12px;
    line-height: 24px;
}

@media (max-width: 765px) {
    .delivery-order-number {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        gap: 8px;
        white-space: nowrap;
    }
}

.delivery-order-timestamp {
    font-family: "Inter";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    color: #6B6C6D;
    margin: 0;
    line-height: 1;
}

.delivery-order-timestamp-2 {
    font-family: "Inter";
    font-size: var(--Typeface-Size-Small, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    color: #140001;
    margin: 0;
    line-height: 1;
}

.delivery-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 12px;
    gap: 5px;
    font-size: 14px;
    font-family: "Inter";
    font-weight: 500;
    line-height: 22px;
    max-width: 100%;
}

.delivery-status-badge.status-pending {
    background: #FFE8E8;
    color: #EB5757;
}

.delivery-status-badge.status-delivered {
    background: #D0EBFF;
    color: #105CDB;
}

.delivery-status-badge.status-preparing {
    background: #D0EBFF;
    color: #105CDB;
    align-items: center;
    justify-content: center;
}

.delivery-status-badge.status-accepted {
    background: #EEFBD1;
    color: #529F16;
}

.delivery-status-badge.status-dispatched {
    background: #E3F2FD;
    color: #2196F3;
}

/* Two column layout */
.delivery-content-wrapper {
    display: flex;
}

.delivery-left-column {
    flex: 1;
    padding-left: 24px;
    padding-right: 16px;
    background: #F7F7F8;
}

.delivery-right-column {
    width: 42.5%;
    padding-right: 24px;
    padding-bottom: 24px;
    background: #F5F5F5;
}

.delivery-right-column-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.delivery-right-column .delivery-right-box {
    margin-bottom: 0;
}

@media (max-width: 765px) {
    .delivery-right-column {
        padding-right: 0px;
        padding-left: 0px;
    }
}

/* Info sections */
.delivery-info-section {
    background: #FDFDFD;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}

.delivery-right-column-inner .delivery-right-box:last-child {
    margin-bottom: 0;
}

.delivery-action-block {
    margin-top: 16px;
}

.delivery-action-block:first-child {
    margin-top: 0;
}

.delivery-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EAEBEC;
    margin-bottom: 16px;
}

@media (max-width: 765px) {
    .delivery-section-header {
        gap: 8px;
    }
}

.delivery-section-header-reservation {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EAEBEC;
    margin-bottom: 16px;
}

@media (max-width: 765px) {
    .delivery-section-header-reservation {
        gap: 12px;
    }
}

.delivery-section-icon {
    width: 18px;
    height: 18px;
    color: #333333;
}


@media (max-width: 768px) {
    .section-icon {
        width: 24px !important;
        height: 24px !important;
    }
}

@media (max-width: 765px) {
    .delivery-section-icon {
        width: 17.5px;
        height: 21.5px;
    }
}

@media (max-width: 765px) {
    .order-items-svg {
        width: 21.5px;
        height: 21.5px;
    }
}

.delivery-section-title {
    font-size: 20px;
    font-family: "Montserrat";
    font-weight: 600;
    color: #140001;
    margin: 0;
    text-transform: none;
    line-height: 28px;
}

@media (max-width: 765px) {
    .delivery-section-title {
        font-size: 16px;
    }
}

/* Customer info grid */
.delivery-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
}

.delivery-info-grid-2 {
    display: block;
    gap: 24px;
    align-items: flex-start;
}

.delivery-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delivery-info-label {
    font-size: 16px;
    font-weight: 500;
    color: #6B6C6D;
    font-family: "Inter";
    line-height: 24px;
    margin: 0;
}

@media (max-width: 765px) {
    .delivery-info-label {
        font-size: 14px;
    }
}

.delivery-info-label-address {
    font-size: 16px;
    font-weight: 500;
    color: #6B6C6D;
    font-family: "Inter";
    line-height: 24px;
    margin: 0;
    padding-top: 16px;
}

@media (max-width: 765px) {
    .delivery-info-label-address {
        font-size: 14px;
    }
}

.delivery-info-value {
    font-size: 18px;
    font-weight: 500;
    color: #140001;
    font-family: "Inter";
    line-height: 26px;
    margin: 0;
}

.delivery-info-value-reservation {
    font-size: 18px;
    font-weight: 500;
    color: #140001;
    font-family: "Inter";
    line-height: 26px;
    margin: 0;
    margin-bottom: 16px;
}



@media (max-width: 765px) {
    .delivery-info-value {
        font-size: 16px;
        white-space: nowrap;
    }
}

@media (max-width: 765px) {
    .delivery-info-value-reservation {
        font-size: 16px;
        line-height: 24px;
    }
}

.delivery-info-value-address {
    font-size: 18px;
    font-weight: 500;
    color: #140001;
    font-family: "Inter";
    line-height: 26px;
}

.delivery-info-value-address .second-line {
    display: block;
    color: #6B6C6D;
    font-size: 14px;
    font-family: "Inter";
    font-weight: 400;
}


.delivery-info-value.phone-number {
    color: #EB5757;
}

/* Delivery time information */
.delivery-time-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-time-info-2 {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.delivery-time-badge {
    font-size: 16px;

}

/* Order items section */
.delivery-items-section {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.delivery-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 16px 0;
}

.delivery-summary-description {
    font-style: normal;
    color: #6B6C6D;
    font-family: "Inter";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: -8px;
    margin-bottom: 24px;
}

@media (max-width: 765px) {
    .delivery-summary-description {
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
    }
}

.delivery-items-count {
    font-family: Inter;
    font-size: var(--Typeface-Size-Medium, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #6B6C6D;
    align-items: center;
    margin-left: auto;
}

.delivery-items-list {
    margin-top: 16px;
}

.delivery-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.delivery-item-row:last-child {
    margin-bottom: 0;
}

/* 
.delivery-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #FFE8E8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
} */
/* 
.delivery-item-avatar.item-2 {
    background: #FFF4E6;
}

.delivery-item-avatar.item-3 {
    background: #E8F5E9;
}*/

.delivery-item-avatar-text {
    font-size: 14px;
    font-family: "Inter";
    font-weight: 500;
    line-height: 22px;
    color: #140001;
}

.delivery-item-avatar-text {
    display: inline-flex;
    align-items: center;
    /* vertical centering */
    gap: 4px;
    /* space between number and X icon */
    line-height: 1;
    /* prevents baseline issues */
}


.delivery-item-details {
    flex: 1;
}

.delivery-item-name {
    color: #140001;
    font-size: var(--Typeface-Size-Medium, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    font-family: "Inter";
    margin-bottom: 4px;
}

@media (max-width: 765px) {
    .delivery-item-name {
        font-size: 14px;
        line-height: 22px;
    }
}

.delivery-item-category {
    color: #6B6C6D;
    font-size: var(--Typeface-Size-Small, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin: 0px;
    font-family: "Inter";
}

@media (max-width: 765px) {
    .delivery-item-category {
        font-size: 12px;
        line-height: 20px;
    }
}

.delivery-item-price {
    color: #6B6C6D;
    font-size: var(--Typeface-Size-Medium, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    font-family: "Inter";
}

@media (max-width: 765px) {
    .delivery-item-price {
        font-size: 14px;
        line-height: 22px;
    }
}

/* Special instructions section */
.special-instructions {
    margin-top: 24px;
    border: unset !important;
    padding: 0 !important;
}

.special-instructions-form-group {
    padding-top: 8px !important;
}

.delivery-special-instructions {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.delivery-instructions-box {
    background: #D0EBFF;
    padding: 16px;
    border-radius: 16px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.delivery-instructions-text-content{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
}

.delivery-instructions-text-content strong{
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: 600;
    color: #0B44B7;
}

.delivery-instructions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #EB5757;
    border-radius: 50%;
    margin-right: 8px;
}

@media (max-width: 765px) {
    .delivery-instructions-icon {
        width: 24px;
        height: 24px;
    }
}

.delivery-instructions-text {
    color: #0B44B7;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    border-radius: 16px;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    display: flex;
    gap: 8px;
}

@media (max-width: 765px) {
    .delivery-instructions-text {
        font-size: 14px;
        line-height: 22px;
    }
}

/* Payment summary sidebar */
.delivery-payment-summary {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.delivery-summary-title {
    font-size: 20px;
    font-family: "Montserrat";
    font-weight: 600;
    color: #140001;
    text-transform: none;
    line-height: 28px;
    margin: 0 0 24px 0;
}

.delivery-summary-title-action {
    font-size: 20px;
    font-family: "Montserrat";
    font-weight: 600;
    color: #140001;
    text-transform: none;
    line-height: 28px;
    margin: 0 0 8px 0;
}

.delivery-summary-title-action-reservation {
    font-size: 20px;
    font-family: "Montserrat";
    font-weight: 600;
    color: #140001;
    text-transform: none;
    line-height: 28px;
    margin: 0 0 24px 0;
}

@media (max-width: 765px) {
    .delivery-summary-title-action {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 765px) {
    .delivery-summary-title {
        font-size: 16px;
        line-height: 24px;
    }
}

.delivery-summary-title-update {
    font-size: 20px;
    font-family: "Montserrat";
    font-weight: 600;
    color: #140001;
    text-transform: none;
    line-height: 28px;
    margin: 0 0 8px 0;
}

@media (max-width: 765px) {
    .delivery-summary-title-update {
        font-size: 16px;
        line-height: 24px;
    }
}

.delivery-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .delivery-summary-row {
        margin-bottom: 8px;
    }
}

.delivery-summary-label {
    font-size: 16px;
    font-weight: 400;
    color: #6B6C6D;
    font-family: "Inter";
    line-height: 24px;
}

@media (max-width: 765px) {
    .delivery-summary-label {
        font-size: 14px;
        line-height: 22px;
    }
}

.delivery-summary-value {
    font-size: 16px;
    font-weight: 500;
    color: #6B6C6D;
    font-family: "Inter";
    line-height: 24px;
}

@media (max-width: 765px) {
    .delivery-summary-value {
        font-size: 14px;
        line-height: 22px;
    }
}

.delivery-summary-value-discount {
    color: #3C850F;
}

.delivery-summary-total {
    border-top: 1px solid #F0F0F0;
    padding-top: 16px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delivery-total-label {
    font-size: 16px;
    font-weight: 500;
    color: #6B6C6D;
    font-family: "Inter";
    line-height: 24px;
}

.delivery-total-value {
    font-family: var(--Typeface-Family-display, Montserrat);
    font-size: var(--Typeface-Size-Heading-4, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    color: #140001;
}


.delivery-summary-total.total-crossed-out .delivery-total-value {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: #8E8F91;
}

@media (max-width: 765px) {
    .delivery-total-value {
        font-size: 20px;
        line-height: 28px;
    }
}

/* Payment status indicator */
.delivery-payment-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 8px;
    padding: 16px;
    background: #FDFDFD;
    border-radius: 16px;
    margin-top: 24px;
    border: 1px solid var(--Neutral-300, #EAEBEC);
}

.delivery-payment-icon {
    width: 16px;
    height: 16px;
    color: #0B44B7;
}

@media (max-width: 765px) {
    .delivery-payment-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 765px) {
    .section-svg-btn {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 765px) {
    .section2-svg-btn {
        width: 24px;
        height: 24px;
    }
}

.delivery-payment-text {
    font-size: 18px;
    color: #0B44B7;
    font-weight: 500;
    font-family: "Inter";
    line-height: 22px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-payment-badge {
    display: inline-flex;
    padding: 4px 8px;
    align-items: center;
    border-radius: 12px;
    background: #FBDBD0;
    color: #C9331F;
    font-size: 12px;
    font-weight: 500;
    font-family: "Inter";
    line-height: 20px;
}

.delivery-payment-badge.delivery-payment-partially {
    background: #D0EBFF;
    color: #105CDB;
}

.delivery-payment-badge.delivery-payment-fully {
    background: #EEFBD1;
    color: #3C850F;
}

.delivery-payment-status .delivery-partial-breakdown {
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    border-top: none;
}

.delivery-partial-breakdown {
    padding-top: 8px;
    border-top: unset;
    margin-top: 0px;
}

.delivery-partial-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 8px;
}

.delivery-partial-row:last-child {
    margin-bottom: 0;
}

.delivery-partial-label {
    color: #6B6C6D;
    font-weight: 400;
    font-family: "Inter";
}

.delivery-partial-value {
    color: #6B6C6D;
    font-weight: 500;
    font-family: "Inter";
}

/* Update status section */
.delivery-update-status {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
}

.delivery-update-title {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 12px 0;
}

.delivery-update-text {
    display: flex;
    align-items: flex-start;
    color: var(--Neutral-700, #6B6C6D);
    font-family: var(--Typeface-Family-text, Inter);
    font-size: var(--Typeface-Size-Medium, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 24px;
}

.delivery-update-text-action {
    font-size: 11px;
    color: #828282;
    display: flex;
    gap: 8px;
    padding-top: 24px;
}

@media (max-width: 765px) {
    .delivery-update-text-action {
        font-size: 14px;
        line-height: 22px;
        gap: 2px;
    }
}

.delivery-update-text-action-text {
    display: flex;
    align-items: flex-start;
    color: var(--Neutral-700, #8E8F91);
    font-family: var(--Typeface-Family-text, Inter);
    font-size: var(--Typeface-Size-Medium, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

@media (max-width: 765px) {
    .delivery-update-text-action-text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 0px;
        white-space: pre-line;
    }
}

@media (max-width: 765px) {
    .payment-svg-btn {
        width: 20px;
        height: 20px;
    }
}

.delivery-update-text-action svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@media (max-width: 765px) {
    .delivery-update-text-action svg {
        width: 20px;
        height: 20px;
    }
}

/* Accept + Reject row */
.delivery-btn-primary-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
}

.delivery-actions-section {
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--Neutral-300, #EAEBEC);
    overflow: hidden;
}

.delivery-actions-section-reservation {
    gap: 16px;
    overflow: hidden;
}

/* Accept button */
.delivery-btn-primary.btn-accept {
    flex: 1;
    min-width: 0;
    font-family: "Inter";
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3C850F;
    color: #FDFDFD;
    font-size: 18px;
    font-weight: 500;
    border: none;
    border-radius: 20px;
    gap: 8px;
    cursor: pointer;
    padding: 12px 24px;
    white-space: nowrap;
}

@media (max-width: 765px) {
    .delivery-btn-primary.btn-accept {
        padding: 8px 16px;
        font-size: 14px;
        line-height: 22px;
        gap: 4px;
        font-weight: 500;
    }
}

.delivery-btn-primary.btn-accept svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

@media (max-width: 765px) {
    .delivery-btn-primary.btn-accept svg {
        width: 22px;
        height: 22px;
    }
}

/* Reject button */
.delivery-btn-secondary.btn-reject {
    flex: 1;
    min-width: 0;
    border: 1px solid #B71B2D;
    color: #B71B2D;
    border-radius: 20px;
    font-size: 18px;
    display: flex;
    font-family: "Inter";
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    background: #ffffff;
    cursor: pointer;
    padding: 12px 24px;
    white-space: nowrap;
}

@media (max-width: 765px) {
    .delivery-btn-secondary.btn-reject {
        padding: 8px 16px;
        font-size: 14px;
        line-height: 22px;
        gap: 4px;
    }
}

@media (max-width: 765px) {
    .delivery-btn-secondary.btn-reject svg {
        width: 22px;
        height: 22px;
    }
}

.delivery-btn-secondary.btn-reject svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Complete Reservation: same design as Accept (green primary) */
.delivery-btn-primary.btn-complete {
    flex: 1;
    min-width: 0;
    font-family: "Inter";
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3C850F;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    border: none;
    border-radius: 20px;
    gap: 8px;
    cursor: pointer;
    padding: 12px 24px;
    white-space: nowrap;
}

@media (max-width: 765px) {
    .delivery-btn-primary.btn-complete {
        padding: 8px 16px;
        font-size: 14px;
        line-height: 22px;
        gap: 4px;
        font-weight: 500;
    }
}

/* Cancel Reservation: same design as Reject (red outline) */
.delivery-btn-secondary.btn-cancel {
    flex: 1;
    min-width: 0;
    border: 1px solid #B71B2D;
    color: #B71B2D;
    border-radius: 20px;
    font-size: 18px;
    display: flex;
    font-family: "Inter";
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    background: #ffffff;
    cursor: pointer;
    padding: 12px 24px;
    white-space: nowrap;
}

@media (max-width: 765px) {
    .delivery-btn-secondary.btn-cancel {
        padding: 8px 16px;
        font-size: 14px;
        line-height: 22px;
        gap: 4px;
    }
}

/* Modify full width */
.delivery-btn-secondary.btn-modify {
    width: 100%;
    font-family: "Inter";
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #6B6C6D;
    border-radius: 20px;
    border: 1px solid #6B6C6D;
    padding: 12px 24px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 765px) {
    .delivery-btn-secondary.btn-modify {
        padding: 8px 16px;
        font-size: 16px;
        line-height: 22px;
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .delivery-btn-icon-modify {
        width: 22px;
        height: 22px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .delivery-content-wrapper {
        flex-direction: column;
    }

    .delivery-order-card {
        box-shadow: unset !important;
    }

    .delivery-left-column {
        border-right: none;
        /* padding-left: 24px;
        padding-right: 16px; */
        padding: 0px;
        background: #F7F7F8 !important;
    }

    .delivery-right-column {
        width: 100%;
        padding-top: 0px;
    }
}

/* Reject modal styling */
.reject-modal .modal-dialog {
    max-width: 499px;
}

.reject-modal .modal-content {
    border: none;
    border-radius: 18px;
    padding: 24px 24px 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    position: relative;
    width: 499px;
    background-color: #FDFDFD;
}


.reject-modal .reject-close {
    display: none !important;
}

.reject-modal .reject-body {
    padding: 0;
    text-align: center;
}

.reject-modal .reject-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFF1EF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.reject-modal .reject-icon-circle img {
    width: 24px;
    height: 24px;
}

.reject-modal .reject-title {
    font-family: 'Montserrat';
    font-size: 24px;
    color: #140001;
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .reject-modal .reject-title {
        font-size: 16px;
    }
}

.reject-modal .reject-subtitle {
    font-size: 16px;
    color: #6B6C6D;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .reject-modal .reject-subtitle {
        font-size: 14px;
    }
}

.reject-modal .reject-form-group {
    text-align: left;
    margin-bottom: 24px;
}

.reject-modal .reject-label {
    font-weight: 600;
    font-size: 16px;
    font-family: 'Montserrat';
    color: #140001;
    margin-bottom: 8px;
}

/* @media (max-width: 768px) {
    .reject-modal .reject-label {
        font-size: 14px;
    }
} */

.reject-modal .optional-text {
    font-weight: 400;
    color: #8A8A8A;
}

.reject-modal .reject-textarea {
    width: 100%;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 12px 20px;
    resize: vertical;
    background: #FDFDFD;
    font-size: 14px;
    min-height: 110px;
}

.reject-modal .reject-textarea::placeholder {
    color: #B1B3B6 !important;
    font-weight: 500;
    font-size: 14px;
}

.reject-modal .reject-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
}

.reject-modal .reject-btn {
    width: 100%;
    height: 48px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 24px;
}

@media (max-width: 765px) {
    .reject-modal .reject-btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
}

.reject-modal .reject-btn-secondary {
    background: #FFFFFF;
    color: #6B6C6D;
    border: 1px solid #6B6C6D;
}

.reject-modal .reject-btn-secondary:hover {
    border-color: #AFAFAF;
    color: #6B6C6D;
}

.reject-modal .reject-btn-primary {
    background: #C9331F;
    color: #FDFDFD;
    border: 1.5px solid #C9331F;
    box-shadow: 0 8px 20px rgba(201, 51, 31, 0.25);
}

.reject-modal .reject-btn-primary:hover {
    background: #b12d1b;
    border-color: #b12d1b;
}

/* Date Range Picker - Single Calendar Style */
.daterangepicker {
    width: auto !important;
    max-width: 340px !important;
}

/* Hide second calendar completely */
.daterangepicker .drp-calendar.right,
.daterangepicker .calendar.right,
.daterangepicker>.drp-calendar.right,
.daterangepicker>.calendar.right,
.daterangepicker .drp-calendar:last-child:not(.left),
.daterangepicker .calendar:last-child:not(.left),
.daterangepicker .drp-calendar:not(.left),
.daterangepicker .calendar:not(.left) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Show only left calendar */
.daterangepicker .drp-calendar.left {
    border-right: none !important;
    padding-right: 8px !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
}

.daterangepicker .calendar.left {
    margin-right: 0 !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
}

/* Ensure calendar container shows only one */
.daterangepicker .drp-calendars {
    width: 100% !important;
}

.daterangepicker .drp-calendars .drp-calendar.left {
    width: 100% !important;
    float: none !important;
}

/* Show only Clear button at bottom – no Apply; range selection auto-applies filter */
.daterangepicker .drp-buttons {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #eee;
}

.daterangepicker .drp-buttons .applyBtn {
    display: none !important;
}

.daterangepicker .drp-buttons .btn {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.daterangepicker .drp-buttons .btn-default {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.daterangepicker .drp-buttons .btn-default:hover {
    background: #f5f5f5;
}

.daterangepicker .drp-selected {
    display: none !important;
}

/* Selected date(s) active color - single date and range (order/kitchen overview) */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.start-date:hover,
.daterangepicker td.end-date,
.daterangepicker td.end-date:hover,
.daterangepicker td.start-date.end-date,
.daterangepicker td.start-date.end-date:hover {
    background-color: #C9331F !important;
    border-color: transparent;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background-color: #FBDBD0 !important;
    border-color: transparent;
    color: #333;
}

/* Hide datepicker when daterangepicker calendar is visible */
.daterangepicker:not([style*="display: none"])~.datepicker,
.daterangepicker:not([style*="display: none"])+.datepicker,
.daterangepicker:visible~.datepicker,
.daterangepicker:visible+.datepicker {
    display: none !important;
}

/* Hide datepicker when drp-calendar is displayed (flex or block) */
.daterangepicker .drp-calendar.left[style*="display: flex"]~.datepicker,
.daterangepicker .drp-calendar.left[style*="display: block"]~.datepicker,
.daterangepicker .drp-calendar[style*="display: flex"]~.datepicker,
.daterangepicker .drp-calendar[style*="display: block"]~.datepicker {
    display: none !important;
}

/* Hide datepicker when daterangepicker is visible using :has selector (modern browsers) */
body:has(.daterangepicker:not([style*="display: none"])) .datepicker,
body:has(.daterangepicker .drp-calendar.left[style*="display: flex"]) .datepicker,
body:has(.daterangepicker .drp-calendar.left[style*="display: block"]) .datepicker {
    display: none !important;
}

/* Fallback: Hide datepicker when daterangepicker exists and is visible */
.daterangepicker .datepicker {
    display: none !important;
}

/* Rejection Reason Display Styles */
.rejection-reason-box {
    /* Default: REJECTION styling */
    background-color: #FBDBD0;
    border-radius: 16px;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: none;
}

.rejection-reason-header {
    display: flex;
    gap: 8px;
}

/* Rejection / Cancellation section heading row (title + close icon) */
.rejection-section-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}



.rejection-section-label {
    font-size: 20px;
    font-weight: 600;
    color: #140001;
}


.rejection-section-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.rejection-section-divider {
    margin-top: 16px;
    border-bottom: 1px solid #EAEBEC;
}

.rejection-info-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    margin-top: 3px;
}

.rejection-reason-label {
    font-family: 'Nexa-Bold', sans-serif;
    font-size: 16px;
    font-weight: 600;
    /* Rejection heading color */
    color: #B71B2D;
}

.order-overview-rjection {
    color: #D34C4F !important;
    font-style: normal;
}

.rejection-reason-text {
    font-size: 14px;
    /* Rejection content color */
    color: #D34C4F;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

/* Cancellation-specific reason box */
.rejection-reason-box.cancellation-box {
    /* Neutral styling for CANCELLATION */
    background-color: #EAEBEC;
}

.rejection-reason-box.cancellation-box .rejection-reason-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #6B6C6D;
}

.rejection-reason-box.cancellation-box .rejection-reason-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #6B6C6D;
}

.rejection-reason-box.cancellation-box .rejection-info-icon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Rejection reason in order card */
.order-rejection-reason {

    margin-top: 16px;

}

.order-rejection-reason .rejection-reason-box {
    margin-top: 0;
}

@media (max-width: 765px) {

    /* Keep modal overlay full viewport so modal-dialog centering works correctly */
    .modal {
        top: 0 !important;
    }

    .date-input-wrapper {
        width: unset !important;
    }

    .status-dropdown-trigger {
        padding: 8px 16px !important;
    }

    /* Orders meta info on mobile: Date + Time in first row, Items on second row */
    .order-card .order-meta-info .order-meta-item:nth-child(3) {
        flex-basis: 100%;
    }

    /* Mobile order card: place total above buttons, buttons on separate row */
    .order-card .order-bottom-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 0px;
    }

    .order-card .order-bottom-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .order-card .order-customer-info {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        width: 100%;
    }

    .order-card .order-customer-info .user-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        align-self: center;
    }

    .order-card .customer-details {
        display: flex;
        flex-direction: column;
        gap: 0px;
        flex: 1;
    }

    .order-card .customer-name {
        font-size: 16px;
        font-weight: 600;
        color: #140001;
    }

    .order-card .customer-phone {
        font-size: 14px;
        color: #6B6C6D;
    }

    .order-card .order-location-info {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        width: 100%;
    }

    .order-card .order-location-info .location-icon {
        width: 18px;
        height: 22px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .order-card .order-address {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
    }

    .order-card .order-address .address-line-1 {
        font-size: 16px;
        font-weight: 700;
        color: #140001;
    }

    .order-card .order-address .address-line-2 {
        font-size: 14px;
        color: #6B6C6D;
    }

    .order-card .order-bottom-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .order-card .order-total-amount {
        font-size: 16px;
        color: #6B6C6D;
        display: flex;
        font-weight: 500;
        width: 100%;
        white-space: nowrap;
        align-items: center;
    }

    .order-card .order-total-amount strong {
        font-size: 20px;
        font-weight: 600;
        color: #140001;
        display: block;
        margin-top: 0px;
        margin-left: 4px;
    }

    .order-card .order-total-amount strong.is-rejected,
    .order-card .order-total-amount strong.is-cancelled {
        color: #8E8F91 !important;
        text-decoration: line-through;
        text-decoration-thickness: 1px;
    }

    .order-card .order-actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 4px;
    }

    .order-meta-item span {
        white-space: nowrap;
    }

    .tab-button {
        padding: 4px 0px;
    }

    .orders-tabs {
        margin-top: 24px;
        gap: 24px;
    }

    /* Mobile: Order top section layout */
    .order-card {
        overflow: hidden;
        background-color: #F5F5F5;
        border-radius: 12px;
    }

    .order-card .order-card-content {
        padding: 16px;
        overflow-x: visible;
        overflow-y: hidden;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-radius: 16px;
    }

    .order-card .order-top-section {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 22px;
        overflow: visible;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #EAEBEC;
        padding-bottom: 16px;
        margin-bottom: 0px;
    }

    .order-top-left {
        flex: 1;
        box-sizing: border-box;
    }

    /* Mobile: Order title row - Order ID, Type badge, Status badge in one row */
    .order-card .order-top-section {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .order-header-row {
        display: flex;
        gap: 8px;
    }

    .order-card .order-top-left {
        flex: 1;
        min-width: 100px;
        width: auto;
        padding-bottom: 0;
        border-bottom: none;
        overflow: visible;
    }

    .order-card .order-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        /* margin-bottom: 16px; */
        position: relative;
        min-width: 0;
    }

    .order-card .order-number {
        font-size: 20px;
        font-weight: 700;
        color: #140001;
        flex-shrink: 1;
        min-width: 0;
        overflow: visible;
    }

    .order-card .order-type-badge {
        flex-shrink: 0;
        padding: 4px 8px;
        font-size: 14px;
        height: 30px;
    }

    /* Show status badge in title row on mobile */
    .order-card .order-title-status-mobile {
        display: flex;
        margin-left: auto;
    }

    .order-card .order-title-status-mobile .status-badge {
        flex-shrink: 0;
    }

    /* Style order-top-right for mobile */
    .order-card .order-top-right {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex-shrink: 0;
        flex-wrap: nowrap;
        width: auto;
        min-width: fit-content;
        margin-top: 0;
        overflow: visible;
        visibility: visible;
    }

    .order-card .order-top-right .order-type-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 14px;
    }

    .order-card .order-top-right .order-type-badge.pickup .pickup-icon {
        width: 16px;
        height: 16px;
    }

    .order-card .order-top-right .status-badge {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
        white-space: nowrap;
        height: 30px;
    }

    .order-card .order-top-right .status-badge.pending {
        background-color: #FEF3C7;
        color: #D97706;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
    }

    .order-card .order-top-right .status-badge.pending i {
        color: #D97706;
        font-size: 14px;
    }

    .order-card .order-top-right .status-badge.pending .status-icon {
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        align-self: inherit;
    }

    /* Mobile: Order meta info - each item on separate line */
    .order-card .order-meta-info {
        display: flex;
        flex-direction: column;
        /* gap: 8px; */
        width: 100%;
        margin-top: 0;
    }

    .order-card .order-meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #6B6C6D;
        width: 100%;
    }

    .order-card .order-meta-item .order-meta-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Ensure mobile actions show below date/time */
    .order-top-left .order-mobile-actions {
        display: block !important;
        width: 100%;
        margin-top: 12px;
    }

    .order-top-right .btn-cancel-order {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 8px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 1;
        flex-basis: 100%;
        box-sizing: border-box;
        order: 999;
    }

    .pagination-nav-icon {
        width: 16px;
        height: 16px;
    }

    .pagination-container {
        padding: 0px 16px;
    }
}

@media (max-width: 480px) {
    .order-card .order-card-content {
        padding: 24px;
    }

    .order-top-left {
        flex: 1;
        width: auto;
    }

    .order-top-right {
        width: auto;
        flex-shrink: 0;
        gap: 8px;
    }

    .order-top-right .status-badge {
        font-size: 14px;
        padding: 4px 8px;
        font-weight: 500;
        line-height: unset;
        font-family: 'Inter';
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .order-top-right .btn-cancel-order {
        padding: 8px 16px;
        font-size: 12px;
        width: 100% !important;
        max-width: 100%;
        justify-content: center;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    .order-top-right .btn-cancel-order svg {
        width: 18px;
        height: 18px;
    }
}

/* Preparing Status Badge */
.status-badge.preparing {
    background: var(--Warning-300, #F8CC67);
    color: #874402;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter';
}

@media (max-width: 768px) {
    .status-badge.preparing {
        border-radius: 12px;
    }
}

.status-badge.ready {
    background: #3C850F;
    color: #EEFBD1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter';
}

@media (max-width: 768px) {
    .status-badge.ready {
        border-radius: 12px;
    }
}

.status-badge.ready .status-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    align-self: center;
}

.status-badge.preparing svg {
    width: 16px;
    height: 16px;
}

/* Out for delivery - same style as .delivery-status-badge-out-for-delivery */
.status-badge.out-for-delivery {
    background: #1677FF;
    color: #EEFBD1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Inter';
}

@media (max-width: 768px) {
    .status-badge.out-for-delivery {
        padding: 4px 12px;
        width: 122px;
        white-space: nowrap;
    }

    /* Out for delivery badge: show below status row on mobile only */
    .order-card .order-status-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .order-card .order-status-row .status-badge.out-for-delivery {
        flex-basis: 100%;
        width: 100%;
        margin-top: 4px;
        box-sizing: border-box;
    }

    /* Delivery show page: out for delivery badge below on mobile only */
    .delivery-order-header .delivery-order-number {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .delivery-order-header .delivery-order-number .delivery-status-badge.delivery-status-badge-out-for-delivery {
        flex-basis: 100%;
        width: 100%;
        box-sizing: border-box;
    }
}

.status-badge.out-for-delivery svg,
.status-badge.out-for-delivery svg path {
    fill: #EEFBD1;
}

.modal-high-z-index {
    z-index: 9999 !important;
}

.text-red {
    color: red;
}

.text-red-required {
    color: red;
}

.cancellation-error {
    color: red;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.modal-title-left {
    float: left;
    font-weight: bold;
}

.modal-body-no-padding {
    padding: 0%;
}

.modal-content {
    padding: 24px !important;
    border-radius: 16px !important;
}

.modal-body {
    padding: 0px !important;
}

.back-to-orders-link {
    color: #6B6C6D;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 600;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

@media (max-width: 768px) {
    .back-to-orders-link {
        margin-bottom: 24px;
    }
}

.back-to-orders-link:hover {
    color: #6B6C6D;
    text-decoration: none;
}

@media (max-width: 768px) {
    .delivery-order-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .header-actions-wrapper {
        align-self: flex-start;
        margin-top: 4px;
        width: 100%;
        justify-content: flex-start;
    }

    .header-actions-inner {
        width: 100%;
        justify-content: flex-start;
    }

    .btn-cancel-order {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

.delivery-order-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.delivery-status-badge.delivery-status-badge-delivery {
    background: #FDF2CC !important;
    color: #C97605 !important;
}

.delivery-status-badge.delivery-status-badge-delivery svg,
.delivery-status-badge.delivery-status-badge-delivery svg path {
    fill: #C97605 !important;
}

.delivery-status-badge.delivery-status-badge-takeaway {
    background: #D0EBFF !important;
    color: #105CDB !important;
}

.delivery-status-badge.delivery-status-badge-takeaway svg,
.delivery-status-badge.delivery-status-badge-takeaway svg path {
    fill: #105CDB !important;
}

.delivery-status-badge.delivery-status-badge-picked-up {
    margin-left: 8px;
    background: #2563EB !important;
    color: #fff !important;
}

.delivery-status-badge.delivery-status-badge-picked-up svg,
.delivery-status-badge.delivery-status-badge-picked-up svg path {
    fill: #fff !important;
}

.badge-icon-wrapper {
    display: flex;
    gap: 5px;
    align-items: center;
}

.delivery-status-badge-preparing {
    background: #F8CC67;
    color: #874402;
}

.delivery-status-badge-ready {
    background: #3C850F;
    color: #EEFBD1;
}

.delivery-status-badge-ready .status-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.delivery-status-badge-out-for-delivery {
    margin-left: 8px;
    background: #1677FF;
    color: #EEFBD1;
}

.delivery-status-badge-delivered {
    background: #3C850F;
    color: #EEFBD1;
}

.delivery-status-badge-collected {
    margin-left: 8px;
    background: #3C850F;
    color: #EEFBD1;
}

.delivery-order-timestamp-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    line-height: 22px;
    font-size: 14px;
    font-weight: 500;
    font-family: Inter;
}

.timestamp-item {
    display: flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}

.header-actions-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-actions-inner {
    display: flex;
    gap: 10px;
}

.delivery-status-badge-pending-header {
    background: #FDF2CC;
    color: #C97605;
}

.btn-cancel-order {
    border-radius: 20px;
    border: 1px solid #B71B2D;
    color: #B71B2D;
    background: white;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    line-height: 22px;
    font-size: 14px;
    font-family: 'Inter';
    gap: 4px;
}

.btn-cancel-order:hover {
    color: #B71B2D;
}

.delivery-payment-status-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-payment-text-cash {
    color: #3C850F;
}

.delivery-payment-text-online {
    color: #C97605;
}

.payment-svg-online {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.delivery-actions-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delivery-btn-update {
    background: #3C850F;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    font-family: Inter;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

.delivery-btn-update-2 {
    background: #3C850F;
    color: #FDFDFD;
    border: none;
    padding: 12px 24px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 18px;
    font-family: Inter;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

@media (max-width: 768px) {
    .delivery-btn-update {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .delivery-btn-update-2 {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .delivery-btn-svg {
        width: 22px;
        height: 22px;
    }
}

.delivery-btn-update:hover {
    background: #2d6a0b;
}

.delivery-btn-update-2:hover {
    background: #2d6a0b;
}

/* Mark as Out for Delivery button – blue background (#1677FF) on Order Overview (index + show) */
.delivery-btn-update.delivery-btn-out-for-delivery,
.order-actions-ready .delivery-btn-update.delivery-btn-out-for-delivery {
    background: #3C850F;
    color: #FDFDFD;
}

.delivery-btn-update.delivery-btn-out-for-delivery:hover,
.order-actions-ready .delivery-btn-update.delivery-btn-out-for-delivery:hover {
    background: #3C850F;
    color: #FDFDFD
}

.delivery-btn-update-2.delivery-btn-out-for-delivery,
.order-actions-ready .delivery-btn-update-2.delivery-btn-out-for-delivery {
    background: #3C850F;
    color: #FDFDFD;
}

.delivery-btn-update-2.delivery-btn-out-for-delivery:hover,
.order-actions-ready .delivery-btn-update-2.delivery-btn-out-for-delivery:hover {
    background: #0d5dd9;
}

.secound-line {
    font-size: 14px;
    color: #6B6C6D;
    font-family: "Inter";
    font-weight: 400;
    line-height: 22px;
}

/* Kitchen Filters Section */
/* Kitchen filter bar: count left, filters right, same height */
.kitchen-filter-bar {
    width: 100%;
}

.kitchen-filter-bar .kitchen-filter-bar-content,
.kitchen-filter-bar-content {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.kitchen-filter-bar .filter-dropdowns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.kitchen-filter-bar .status-dropdown-trigger,
.kitchen-filter-bar .date-input-wrapper .filter-select-date,
.kitchen-filter-bar .date-input-wrapper {
    height: 50px;
    min-height: 50px;
    padding: 12px 24px;
    background: #FDFDFD;
    border: 1px solid #EAEBEC;
    border-radius: 20px;
    display: flex;
    gap: 8px;
}

.kitchen-filter-bar .status-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .kitchen-filter-bar .status-dropdown-trigger {
        padding: 8px 16px !important;
    }
}

.kitchen-filter-bar .date-input-wrapper .filter-select-date {
    padding-top: 0;
    padding-bottom: 0;
    /* 20px (icon left) + 18px (icon width) + 4px gap = 42px */
    padding: 0px !important;
    line-height: 0px;
    height: unset;
    min-height: unset !important;
    border: none;
    background: none;
    width: 7.5vw;
}

.kitchen-complete-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 9999px;
    background-color: #3C850F;
    color: #FFFFFF;
    font-family: "Inter";
    font-size: 16px;
    font-weight: 500;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kitchen-complete-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kitchen-complete-text {
    flex: 1;
}

.kitchen-complete-toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.85;
}

.kitchen-complete-toast-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* Neutral/cancelled variant of kitchen toast (used for cancelled/rejected orders) */
.kitchen-complete-toast--muted {
    background-color: #6B6C6D;
}

.kitchen-filters-section {
    padding: 10px 24px 0px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.filters-header-left {
    display: flex;
    align-items: center;
    gap: 3px;
}

.orders-count-label {
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 600;
    color: #140001;
}

@media (max-width: 765px) {
    .orders-count-label {
        font-size: 14px;
        font-family: 'Inter';
    }
}

.orders-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0px 8px;
    background-color: #FFF1EF;
    color: #C9331F;
    border-radius: 12px;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

.filters-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 8px;
}

.filter-group label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin: 0;
}

.filter-select,
.filter-input {
    padding: 10px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #FFFFFF;
    min-width: 180px;
    transition: border-color 0.2s ease;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: #C9331F;
    box-shadow: 0 0 0 3px rgba(201, 51, 31, 0.1);
}

.filter-select:hover,
.filter-input:hover {
    border-color: #9CA3AF;
}

.btn-clear-filters {
    background-color: #F3F4F6;
    border: 1px solid #D1D5DB;
    color: #6B7280;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-clear-filters:hover {
    background-color: #E5E7EB;
    border-color: #9CA3AF;
    color: #333333;
}

/* Kitchen Pagination */
.kitchen-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 30px;
    background-color: #F7F7F8;
    border-top: 1px solid #EAEBEC;
}

.btn-pagination {
    padding: 10px 20px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-pagination:hover:not(.disabled) {
    background-color: #F3F4F6;
    border-color: #9CA3AF;
}

.btn-pagination.disabled,
.btn-pagination:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #F9FAFB;
    color: #9CA3AF;
}

.pagination-info {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

@media (max-width: 768px) {
    .kitchen-filter-bar .kitchen-filter-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .kitchen-filter-bar .filter-dropdowns {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .kitchen-filters-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .filters-header-left {
        width: 100%;
    }

    .filters-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .filter-dropdowns,
    .filter-date-wrapper {
        flex: 1 1 0;
    }

    .kitchen-filter-bar .status-dropdown-trigger {
        font-size: 14px;
    }

    .date-input-wrapper {
        width: 100%;
    }

    .filter-select,
    .filter-input {
        width: 100%;
        min-width: auto;
    }

    .kitchen-pagination {
        flex-direction: column;
        gap: 12px;
    }

    .btn-pagination {
        width: 100%;
    }
}

.more-items-count {
    color: #C97605;
    font-weight: 400;
    margin-left: 12px;
    font-size: 14px;
    font-family: "Inter";
    line-height: 22px;
}

.kitchen-close-button {
    background: none;
    opacity: unset !important;
}

.kitchen-close-button img {}

.mobile-only-section {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only-section {
        display: flex !important;
    }

    /* Sidebar User Profile Styling */
    .sidebar-user-profile {
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
    }

    .user-avatar-wrapper {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #f0f0f0;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .user-avatar-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        font-size: 18px;
    }

    .sidebar-user-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sidebar-user-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .sidebar-user-name {
        color: #140001;
        font-family: 'Inter';
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
    }

    .sidebar-user-role {
        color: #6B6C6D;
        font-family: 'Inter';
        font-size: 12px;
        font-weight: 400;
    }
}

/* Global Modal Centering - Center all modals vertically and horizontally on any display */
.modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Ensure modals work properly on mobile devices */
@media (max-width: 768px) {
    .modal-dialog {
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
}

/* Shared auth-style error popup (reused from admin-login.css) */
.auth-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 24px;
}

.auth-error-popup {
    background: #FDFDFD;
    border-radius: 16px;
    padding: 24px;
    max-width: 499px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.auth-error-popup__icon {
    flex-shrink: 0;
    border-radius: 50%;
    background: #FFF1EF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-bottom: 16px;
}

.auth-error-popup__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #140001;
    margin: 0 0 8px 0;
    text-align: center;
    text-transform: none;
}

.auth-error-popup__message {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
    margin: 0 0 24px 0;
    text-align: center;
}

.auth-error-popup__btn {
    width: 100%;
    max-width: 451px;
    height: 50px;
    padding: 12px 24px;
    background: #C9331F;
    border: none;
    border-radius: 12px;
    color: #FDFDFD;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.auth-error-popup__btn:hover {
    background: #C9331F;
}

  /* Shared calendar card look (orders + reservations) */
  .daterangepicker {
    background-color: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px 12px 10px;
    font-family: inherit;
}

.daterangepicker .drp-calendar {
    padding: 4px 4px 0;
}

.daterangepicker .calendar-table {
    margin: 0;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 999px;
    border: none;
    font-size: 12px;
}

/* Month / year header */
.daterangepicker .calendar-table thead tr:first-child th {
    border: none;
    padding-bottom: 6px;
}

.daterangepicker .calendar-table th.month {
    font-weight: 600;
    font-size: 14px;
    color: #1C1C1E;
}

.daterangepicker .drp-calendar .prev,
.daterangepicker .drp-calendar .next {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    color: #3A3A3C;
    background: transparent;
}

/* Weekday labels */
.daterangepicker .calendar-table thead tr:nth-child(2) th {
    font-weight: 500;
    color: #140001 !important;
    
}

.daterangepicker .calendar-table td.available {
    color: #3A3A3C;
    background-color: #F3F3F4;
}

.daterangepicker .calendar-table td.off {
    color: #C4C4C4;
    background-color: transparent;
}

/* Range background: slightly darker grey circles */
.daterangepicker td.in-range {
    background-color: #E1E2E5 !important;
    border-color: transparent !important;
    color: #3A3A3C !important;
}

/* Selected/start/end dates: solid accent circle */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.start-date:hover,
.daterangepicker td.end-date,
.daterangepicker td.end-date:hover,
.daterangepicker td.start-date.end-date,
.daterangepicker td.start-date.end-date:hover,
.daterangepicker td.start-date.in-range,
.daterangepicker td.end-date.in-range {
    background-color: #C9331F !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* Today: outlined circle when not selected */
.daterangepicker td.today:not(.active):not(.start-date):not(.end-date):not(.in-range) {
    border: 1px solid #C9331F;
    background-color: #FFFFFF;
    color: #C9331F;
}

/* Hide footer buttons to match clean design */
.daterangepicker .drp-buttons {
    display: none;
}

/* Header selects styled as plain text (hide native dropdown look) */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding-right: 0;
    font-weight: 600;
    font-size: 14px;
    color: #1C1C1E;
    cursor: default;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    outline: none;
    box-shadow: none;
}

/* Input chip style similar to design */
.date-range-wrapper .date-range-input {
    border-radius: 999px;
    border: none;
    padding: 0px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto !important;
}

.daterangepicker .calendar-table table{
border:unset !important;
}

.daterangepicker {
    background-color: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px 12px 10px;
    font-family: inherit;
}

.daterangepicker .drp-calendar {
    padding: 4px 4px 0;
}

.daterangepicker .calendar-table {
    margin: 0;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 999px;
    border: none;
    font-size: 12px;
}

/* Month / year header */
.daterangepicker .calendar-table thead tr:first-child th {
    border: none;
    padding-bottom: 6px;
}

.daterangepicker .calendar-table th.month {
    font-weight: 600;
    font-size: 14px;
    color: #1C1C1E;
}

.daterangepicker .drp-calendar .prev,
.daterangepicker .drp-calendar .next {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    color: #3A3A3C;
    background: transparent;
}

/* Weekday labels */
.daterangepicker .calendar-table thead tr:nth-child(2) th {
    font-weight: 500;
    color: #8E8F91;
    padding-bottom: 4px;
}

.daterangepicker .calendar-table td.available {
    color: #3A3A3C;
    background-color: #F3F3F4;
}

.daterangepicker .calendar-table td.off {
    color: #C4C4C4;
    background-color: transparent;
}

/* Range background: slightly darker grey circles */
.daterangepicker td.in-range {
    background-color: #E1E2E5 !important;
    border-color: transparent !important;
    color: #3A3A3C !important;
}

/* Selected/start/end dates: solid accent circle */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.start-date:hover,
.daterangepicker td.end-date,
.daterangepicker td.end-date:hover,
.daterangepicker td.start-date.end-date,
.daterangepicker td.start-date.end-date:hover,
.daterangepicker td.start-date.in-range,
.daterangepicker td.end-date.in-range {
    background-color: #C9331F !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* Today: outlined circle when not selected */
.daterangepicker td.today:not(.active):not(.start-date):not(.end-date):not(.in-range) {
    border: 1px solid #C9331F;
    background-color: #FFFFFF;
    color: #C9331F;
}

/* Header selects styled as plain text (hide native dropdown look) */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding-right: 0;
    font-weight: 600;
    font-size: 14px;
    color: #1C1C1E;
    cursor: default;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    outline: none;
    box-shadow: none;
}

/* Hide footer buttons to match clean design */
.daterangepicker .drp-buttons {
    display: none;
}

/* Input chip style similar to design */
.date-range-wrapper .date-range-input {
    border-radius: 999px;
    border: none;
    padding: 0px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto !important;
}

.daterangepicker .drp-calendar.left{
    padding: 8px 16px !important;
}

::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }


  @media (min-width: 564px) {
    .daterangepicker .drp-calendar.left .calendar-table {
      padding-right: 0px !important;
    }
  }

  .table-condensed tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;

  }

  .daterangepicker .calendar-table thead tr:first-child{
    border-bottom: 1px solid #E5E5E5 !important;
    padding-bottom: 8px !important;
  }

  .daterangepicker .calendar-table thead tr:first-child th{
    padding: 0px !important;

  }

  .daterangepicker select.yearselect{
    width: unset !important;
  }

  .daterangepicker{
    border-radius: 16px !important;
  }

  .daterangepicker .calendar-table .prev span ,.daterangepicker .calendar-table .next span{
    border-width: 0 0.5px 0.5px 0 !important;
    border-color: #140001 !important;
  }

/* Reservation show page: left = header + 2 cols (Customer Details | Reservation Info), right = Action Needed; header only in left column */
.reservation-show-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reservation-show-wrapper .reservation-show-body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 0;
}

.reservation-show-wrapper .reservation-show-left {
  flex: 1;
  padding-left: 24px;
  padding-right: 16px;
  padding-bottom: 24px;
  background: #F7F7F8;
  min-width: 0;
}

.reservation-show-wrapper .reservation-show-left .reservation-show-header {
  width: 100%;
  margin-bottom: 16px;
}

.reservation-show-header-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.reservation-show-header-layout .reservation-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.reservation-show-wrapper .reservation-show-header .header-actions-wrapper {
  align-self: center;
  margin-left: auto;
  margin-top: 0px;
}

.reservation-show-wrapper .reservation-show-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  align-items: stretch;
  margin-bottom: 16px;
}

.reservation-show-wrapper .reservation-show-left .delivery-info-section:not(.reservation-card) {
  margin-bottom: 16px;
}

.notes-box {
  background: #F1F2F3 !important;
}

.notes-box .delivery-instructions-text {
  color: #140001 !important;
  font-style: italic;
}

.reservation-show-wrapper .reservation-show-two-cols .reservation-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
}

/* Reservation show: Action Needed buttons same width */
.reservation-action-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delivery-actions-section-reservation .reservation-action-button {
  display: block;
  width: 100%;
  text-align: center;
}

.delivery-actions-section-reservation .delivery-btn-secondary.btn-modify {
  margin-top: 10px;
}

.reservation-show-wrapper .reservation-action-button .reservation-btn-text-mobile {
  display: none;
}
.reservation-show-wrapper .reservation-action-button .reservation-btn-text-desktop {
  display: inline;
}

.reservation-show-wrapper .reservation-show-right {
  width: 42.5%;
  max-width: 400px;
  /* padding-right: 24px; */
  /* padding-bottom: 24px; */
  background: #F5F5F5;
  flex-shrink: 0;
}

.reservation-show-wrapper .reservation-show-right .delivery-right-box {
  margin-bottom: 0;
}

@media (max-width: 765px) {
  .reservation-show-wrapper .reservation-show-body {
    flex-direction: column;
  }

  .reservation-show-wrapper .reservation-show-left {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .reservation-show-wrapper .reservation-show-header .header-actions-wrapper {
    width: auto;
  }

  .reservation-show-wrapper .reservation-show-two-cols {
    grid-template-columns: 1fr;
  }

  .reservation-show-wrapper .reservation-show-right {
    width: 100%;
    max-width: none;
    /* padding-left: 24px;
    padding-right: 24px; */
  }

  .delivery-info-item-reservation-2 {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
  .delivery-info-item-reservation-2 .delivery-info-item:first-child {
    min-width: 120px;
  }
  .reservation-action-buttons-row{
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .reservation-show-wrapper .reservation-action-button .reservation-btn-text-desktop {
    display: none;
  }
  .reservation-show-wrapper .reservation-action-button .reservation-btn-text-mobile {
    display: inline;
  }
}

.last-info-item{
    margin-bottom: 0 !important;
}

.reservation-note-icon {
  width: 30px;
  height: 30px;
  align-items: flex-start;
}