/* Vazirmatn Black */
@font-face {
    font-family: 'Vazirmatn Black';
    src: url('../foot/Vazirmatn-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Vazirmatn Bold */
@font-face {
    font-family: 'Vazirmatn Bold';
    src: url('../foot/Vazirmatn-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Vazirmatn Light */
@font-face {
    font-family: 'Vazirmatn Light';
    src: url('../foot/Vazirmatn-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Vazirmatn Medium */
@font-face {
    font-family: 'Vazirmatn Medium';
    src: url('../foot/Vazirmatn-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Vazirmatn Regular */
@font-face {
    font-family: 'Vazirmatn Regular';
    src: url('../foot/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Vazirmatn Thin */
@font-face {
    font-family: 'Vazirmatn Thin';
    src: url('../foot/Vazirmatn-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: var(--font-family);
}

:root {
    --var-color-orenge: #eb5e28;
    --var-color-black-1: #252422;
    --var-color-black-1-100: #25242277;
    --var-color-black-2: #403d39;
    --var-color-black-3: #ccc5b9;
    --var-color-black-3-700: #ccc5b9a7;
    --var-color-white: #fffcf2;
    --var-color-red: #d62828;
    --font-family: 'Vazirmatn Medium',
}

html {
    direction: rtl;
}

body {
    background-color: #f8f8f8;
    font-size: 15px;
    font-family: 'Vazirmatn Regular', sans-serif;
}

header {
    background-color: var(--var-color-orenge);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

    header .image img {
        width: 100px;
    }

    header .nav-menu {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

.ol-viewport canvas {
    //transform: none !important;
}

.nav-menu a {
    color: #fffcf2;
    margin: 0 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: color .3s;
}

    .nav-menu a.active {
        color: var(--var-color-black-2);
        position: relative;
    }

        .nav-menu a.active::after {
            position: absolute;
            top: 8px;
            right: -15px;
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--var-color-black-2);
        }

        .nav-menu a.active .underline-design {
            visibility: hidden;
        }

    .nav-menu a:first-child {
        margin-right: 0;
    }

    .nav-menu a:hover .underline-design {
        width: 100%;
        height: 3px;
        background-color: #403d39;
        margin-top: 5px;
    }

    .nav-menu a:hover {
        color: #403d39;
    }

.underline-design {
    width: 0%;
    height: 3px;
    background-color: transparent;
    margin-top: 5px;
    transition: width .7s;
    border-radius: 7px;
}

header .profile ul {
    display: flex;
    align-items: center;
    list-style: none;
}

    header .profile ul li {
        display: inline-block;
        margin-right: 15px;
    }

        header .profile ul li a.icons {
            /*background-color: #ccc5b9;*/
            color: #ffffff;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: .3s;
            position: relative;
            font-size: 1.2rem;
        }

            header .profile ul li a.icons span {
                position: absolute;
                top: -4px;
                right: -4px;
                background-color: #252422;
                color: #fffcf2;
                padding: 2px 7px 0 7px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .8rem;
            }

            header .profile ul li a.icons:hover {
                /*background-color: #403d39;*/
                color: var(--var-color-black-1);
            }

        header .profile ul li a.btn-singup {
            /*background-color: #252422;*/
            color: #fffcf2;
            /*border: 2px solid #252422;*/
            /*padding: 10px 15px;*/
            border-radius: 14px;
            transition: .3s;
        }

            header .profile ul li a.btn-singup:hover {
                /*background-color: transparent;*/
                /*border: 2px solid #fffcf2;*/
            }

/* banner-search */
section.banner-search {
    width: 100%;
    height: 600px;
    /*background-image: url("../images/slider-back\ copy.png");*/
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    section.banner-search .search-box {
        background-color: var(--var-color-black-3-700);
        padding: 30px 40px;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        section.banner-search .search-box h4 {
            font-size: 2rem;
            color: var(--var-color-black-1);
            margin: 20px 0 30px 0;
        }

        section.banner-search .search-box form {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }

            section.banner-search .search-box form .search-inputs {
                display: flex;
            }

            section.banner-search .search-box form input {
                height: 27px;
                border-radius: 4px;
                border: 1px solid #aaaaaa;
                font-family: 'Vazirmatn Regular', sans-serif;
                padding: 4px;
                font-size: .8rem;
            }

                section.banner-search .search-box form input:focus {
                    outline: 0;
                }

            section.banner-search .search-box form .selection {
                height: 30px;
                display: block;
            }

.select2-selection .select2-selection--single {
    border: 1px solid var(--var-color-black-3);
    border-radius: 7px !important;
}

.select2 {
    width: 100% !important;
    height: 30px;
}

section.banner-search .search-box form .input-item:first-child {
    border-radius: 0 14px 14px 0;
}

section.banner-search .search-box form .input-item:last-child {
    border-radius: 14px 0 0 14px;
}

.btn-search-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

section.banner-search .search-box form .input-item {
    background-color: var(--var-color-white);
    display: flex;
    align-items: center;
    padding: 15px 20px;
    /* border-radius: 0 14px 14px 0; */
}

    section.banner-search .search-box form .input-item input {
        border: 1px solid var(--var-color-black-3-700);
        background-color: transparent;
        font-family: 'Vazirmatn Regular', sans-serif;
        font-size: .8rem;
        padding: 14px 7px;
    }

    section.banner-search .search-box form .input-item select {
        background-color: transparent;
        font-size: 1rem;
        color: #444;
        max-width: 150px;
        border: 0;
    }

        section.banner-search .search-box form .input-item select option {
            font-size: .9rem;
        }

        section.banner-search .search-box form .input-item select:focus {
            outline: 0;
        }

.select2-selection__arrow {
    left: 0;
    margin: 5px;
}

.select2-selection__rendered {
    padding-right: 10px !important;
    margin-left: 15px;
    font-size: 1rem;
}

.select2-selection {
    background-color: var(--var-color-white) !important;
    border: 0 !important;
}

.submit-btn {
    padding: 0 10px 0 20px;
    border-radius: 14px 0 0 14px;
    border: 0;
    background-color: var(--var-color-white);
    cursor: pointer;
}

.select2-dropdown {
    background-color: var(--var-color-white) !important;
    border: 0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 4px;
}

    .select2-container--default .select2-search--dropdown .select2-search__field:focus {
        outline: 0;
    }

.select2-results {
    direction: rtl;
}

section.kitchen-type {
    padding: 20px 70px;
}

.swiper-slide {
    display: inline-flex !important;
    flex-direction: column;
    gap: 5px;
    user-select: none;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid var(--var-color-black-3) !important;
}

    .swiper-slide svg {
        font-size: 3rem !important;
        color: var(--var-color-orenge);
    }

.swiper-wrapper {
    height: auto !important;
}

section.kitchen-type h3 {
    margin: 15px 0 20px 0;
    font-size: 1.5rem;
    color: var(--var-color-black-2);
}
.best-kitchen {
    margin: 50px 0;
    padding: 0 50px;
}

    .best-kitchen .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px;
    }

        .best-kitchen .title a {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--var-color-orenge);
            text-decoration: none;
            transition: color 0.3s ease;
        }

            .best-kitchen .title a:hover {
                color: var(--var-color-black-2);
            }

        .best-kitchen .title h3 {
            font-size: 1.3rem;
            color: var(--var-color-black-2);
        }

    .best-kitchen .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

/* Switch Styles */
.switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

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

.slider {
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        background-color: white;
        border-radius: 50%;
        transition: .4s;
        left: 2px;
        bottom: 2px;
    }

input:checked + .slider {
    background-color: var(--var-color-orenge);
}

    input:checked + .slider:before {
        transform: translateX(20px);
    }

.switch-container {
    display: flex;
    flex-wrap: wrap;
}

.switch-text {
    font-size: 0.9rem;
    color: var(--var-color-black-2);
    margin-left: 10px;
}

/* Responsive Design */
@media (max-width: 653px) {
    .modal-body .food-detail {
        flex-direction: column; 
    }
}
@media (max-width: 768px) {
    
    .best-kitchen {
        padding: 0 20px;
    }

        .best-kitchen .title {
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

    .switch-container {
        justify-content: flex-start;
    }

    .best-kitchen .filters {
        flex-direction: column;
        gap: 10px;
    }

    .best-kitchen .title a {
        margin-top: 10px;
    }
}
@media (max-width: 1020px) {
    .best-kitchen {
        margin: 50px 0;
        padding: 0 10px;
    }
}


.card {
    position: relative;
    flex-basis: 23%;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    /* border: 1px solid var(--var-color-black-3-700); */
    color: var(--var-color-black-1);
    transition: .3s;
}

    .card .is-close {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: var(--var-color-black-1-100);
        backdrop-filter: blur(.5px);
        z-index: 2;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--var-color-white);
        font-size: 1.5rem;
        transition: .3s;
        flex-direction: column;
    }

    .card:hover {
        transform: scale(1.02);
    }

    .card .header-card {
        flex: 1;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        background-color: #ffffff;
        border-radius: 14px;
    }

        .card .header-card .is-open-alert {
            position: absolute;
            top: 35px;
            right: -15px;
            background-color: var(--var-color-orenge);
            color: var(--var-color-white);
            padding: 7px;
            border-radius: 4px 0 0 4px;
            font-size: .8rem;
            transition: .3s;
        }

    .card:hover .header-card .is-open-alert {
        font-size: .85rem;
    }

    .card .header-card .is-open-alert::after {
        content: "";
        position: absolute;
        top: -10px;
        right: 1px;
        background-color: #9c3e19;
        width: 25px;
        height: 15px;
        display: block;
        transform: rotate(45deg);
        z-index: -1;
    }

    .card:hover .header-card .is-open-alert::after {
        top: -11px;
    }

    .card .header-card img {
        width: 100%;
        border-radius: 14px 14px 0 0;
        height: 100%;
        object-fit: cover;
    }

    .card .header-card .tools {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 14px;
    }

        .card .header-card .tools .logo {
            position: absolute;
            bottom: -30px;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 10px;
        }

            .card .header-card .tools .logo img {
                width: 100%;
                border-radius: 0;
            }

            .card .header-card .tools .logo .logo-bottom {
                width: 35%;
                background-color: var(--var-color-white);
                padding: 7px;
                border-radius: 7px;
            }

    .card .body-card {
        padding: 20px;
        padding-bottom: 5px;
        text-align: center;
        border: 2px solid var(--var-color-black-3-700);
        border-top: 0;
        border-radius: 0 0 14px 14px;
    }

        .card .body-card h3 {
            font-size: 1.5rem;
            color: var(--var-color-black-1);
        }

        .card .body-card span {
            display: block;
            font-size: .8rem;
            color: var(--var-color-black-2);
            margin: 10px 0;
        }

        .card .body-card p {
            font-size: .9rem;
            margin-bottom: 15px;
        }

        .card .body-card span.is-open {
            display: inline-block;
            font-size: 1rem;
            border: 1px solid var(--var-color-black-3);
            padding: 10px 30px;
            margin-top: 10px;
            border-radius: 14px;
            color: var(--var-color-black-1);
        }


    .card .header-card .overflow-hidden {
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 7px;
        transform: rotate(-90deg);
    }

    .card .header-card .resturan-sale {
        width: 70px;
        height: 100px;
        animation: saleIcon 1s forwards ease-in;
    }

@keyframes saleIcon {
    0% {
        transform: translateX(-80px);
    }

    100% {
        transform: translateX(0px);
    }
}

.card .header-card .resturan-sale .sale-text {
    font-weight: 900;
    color: var(--var-color-white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 10px;
    display: flex;
    transform: rotate(90deg);
}

.card .header-card .resturan-sale img {
    width: 100%;
}

.card:hover .body-card h3 img {
    transform: rotate(-45deg);
}

.card .body-card h3 img {
    transition: .3s;
}

.card .body-card h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 1.5rem;
    color: var(--var-color-black-1);
}

    .card .body-card h3 img {
        width: 40px;
    }

.card .body-card span.is-close {
    display: inline-block;
    font-size: 1rem;
    background-color: var(--var-color-orenge);
    padding: 10px 30px;
    margin-top: 10px;
    border-radius: 14px;
    color: var(--var-color-white);
}

footer {
    width: 100%;
    background-color: var(--var-color-black-1);
    display: flex;
    gap: 100px;
    padding: 50px 70px 50px 70px;
    position: relative;
    z-index: 1;
}

    footer .footer-col {
        flex: 1;
        color: var(--var-color-black-3);
    }

        footer .footer-col img {
            /*width: 60%;*/
            border-radius: 7px;
            margin-bottom: 15px;
        }

        footer .footer-col p {
            margin: 10px 0;
        }

        footer .footer-col ul.contact-us {
            list-style: none;
            margin: 15px 0;
        }

            footer .footer-col ul.contact-us li {
                margin: 15px 0;
            }

            footer .footer-col ul.contact-us a {
                color: var(--var-color-black-3);
                margin: 15px 0;
            }

                footer .footer-col ul.contact-us a.enamad {
                    display: flex;
                    justify-content: end;
                }

                    footer .footer-col ul.contact-us a.enamad img {
                        margin-left: 20px;
                        background-color: var(--var-color-white);
                        border-radius: 7px;
                    }

        footer .footer-col h3 {
            margin-bottom: 15px;
            color: var(--var-color-white);
            font-size: 1.3 rem;
        }

        footer .footer-col ul.footer-manu {
            list-style: none;
        }

            footer .footer-col ul.footer-manu a {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                color: var(--var-color-black-3);
                margin-bottom: 15px;
                transition: .3s;
            }

                footer .footer-col ul.footer-manu a:hover {
                    margin-right: 10px;
                    color: var(--var-color-white);
                }

.downlod-app {
    display: flex;
    justify-content: end;
}

.copyright {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    padding: 15px;
    color: #5c5956;
    border-top: 1px solid var(--var-color-black-2);
    font-size: .7rem;
}


/* resturan page style */

section.resturan-container {
    width: 100%;
    padding: 100px;
}

    section.resturan-container .flex-container {
        padding: 20px;
        width: 100%;
        display: flex;
        gap: 20px;
    }

        section.resturan-container .flex-container .col-flex-1 {
            flex: 1;
        }

        section.resturan-container .flex-container .col-flex-2 {
            flex: 1.5;
        }

        section.resturan-container .flex-container .col-flex-1 form {
            display: flex;
            align-items: center;
            gap: 5px;
        }

            section.resturan-container .flex-container .col-flex-1 form input {
                padding: 7px;
                border-radius: 7px;
                border: 1px solid var(--var-color-black-3);
                font-family: 'Vazirmatn Regular', sans-serif;
                width: 100%;
            }

                section.resturan-container .flex-container .col-flex-1 form input:focus {
                    outline: 0;
                    box-shadow: 0 4px 10px #5881574e;
                }

            section.resturan-container .flex-container .col-flex-1 form button {
                height: 100%;
                padding: 9px;
                background-color: #588157;
                color: var(--var-color-white);
                border: 0;
                border-radius: 7px;
                cursor: pointer;
            }

form.mobil-search {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
}

    form.mobil-search input {
        padding: 7px;
        border-radius: 7px;
        border: 1px solid var(--var-color-black-3);
        font-family: 'Vazirmatn Regular', sans-serif;
        width: 100%;
    }

        form.mobil-search input:focus {
            outline: 0;
            box-shadow: 0 4px 10px #5881574e;
        }

    form.mobil-search button {
        height: 100%;
        padding: 9px;
        background-color: #588157;
        color: var(--var-color-white);
        border: 0;
        border-radius: 7px;
        cursor: pointer;
    }

section.resturan-container .flex-container .resturan-detail {
    display: flex;
    align-items: center;
    gap: 10px;
}

    section.resturan-container .flex-container .resturan-detail .image {
        flex-basis: 30%;
    }

        section.resturan-container .flex-container .resturan-detail .image img {
            width: 100%;
        }

    section.resturan-container .flex-container .resturan-detail .detail p {
        font-size: .9rem;
        color: var(--var-color-black-1-100);
    }

section.resturan-container .flex-container a.btn-see-comment {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--var-color-orenge);
    margin: 25px 10px;
    padding: 7px;
    border: 1px solid var(--var-color-orenge);
    border-radius: 24px;
    transition: .3s;
    cursor: pointer;
}

    section.resturan-container .flex-container a.btn-see-comment:hover {
        font-size: 1.05rem;
    }

section.resturan-container .flex-container .col-flex-3 {
    flex: 3;
    background-color: #ffffff;
    border-radius: 14px;
}

.tablinks {
    display: block;
    margin-right: auto;
    margin-bottom: 10px;
    font-family: 'Vazirmatn Regular', sans-serif;
    background-color: transparent;
    border: 0;
    padding: 15px;
    cursor: pointer;
    transition: padding .3s;
}

    .tablinks.active {
        border-left: 3px solid var(--var-color-black-1);
    }

    .tablinks:hover {
        padding-left: 25px;
    }

.tabcontent.active {
    display: block;
}

.tabcontent {
    display: none;
}
.tabs {
    position: sticky;
    top: 0;
    padding: 10px;
    transition: background-color 0.3s ease;
}

    .tabcontent h2 {
        text-align: center;
        padding: 10px;
    }

    .tabcontent .food {
        display: flex;
        gap: 20px;
        padding: 20px;
        border-bottom: 1px solid var(--var-color-black-1-100);
    }

.mp-pagination-nav {
    display: none !important;
}

.tabcontent .food .image {
    position: relative;
    flex: 1;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
}

    .tabcontent .food .image span {
        position: absolute;
        top: 0;
        right: 0;
        padding: 7px;
        background-color: var(--var-color-orenge);
        font-size: .8rem;
        color: var(--var-color-white);
        border-radius: 0 0 0 14px;
    }

    .tabcontent .food .image img {
        width: 100%;
        border-radius: 7px;
        object-fit: cover;
    }

.tabcontent .image-mobile {
    position: relative;
}

    .tabcontent .image-mobile span {
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--var-color-orenge);
        color: var(--var-color-white);
        padding: 5px 10px;
        font-size: .8rem;
        border-radius: 14px 0 14px 14px;
    }

.tabcontent .food-mobile .image-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tabcontent .food .image-mobile {
    display: none;
}

    .tabcontent .food .image-mobile img {
        width: 100%;
        height: 100%;
        border-radius: 14px;
        object-fit: cover;
    }


.tabcontent .food .detail {
    flex: 2;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .tabcontent .food .detail h3 {
        color: var(--var-color-black-1);
    }

    .tabcontent .food .detail p {
        color: var(--var-color-black-2);
        font-size: .9rem;
    }

    .tabcontent .food .detail .price-add-to-cart {
        margin: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--var-color-black-1-100);
    }

        .tabcontent .food .detail .price-add-to-cart > span {
            font-weight: 700;
            color: var(--var-color-black-1);
        }

        .tabcontent .food .detail .price-add-to-cart .was-add-to-cart {
            display: none;
            align-items: center;
            gap: 10px;
        }

            .tabcontent .food .detail .price-add-to-cart .was-add-to-cart button {
                background-color: transparent;
                cursor: pointer;
                font-size: .7rem;
                padding: 5px 6px 1px 6px;
                border: 1px solid var(--var-color-orenge);
                border-radius: 50%;
                color: var(--var-color-orenge);
            }

            .tabcontent .food .detail .price-add-to-cart .was-add-to-cart span {
                color: var(--var-color-black-1);
            }

        .tabcontent .food .detail .price-add-to-cart .add-to-cart {
            background-color: transparent;
            cursor: pointer;
            color: var(--var-color-orenge);
            border: 1px solid var(--var-color-orenge);
            padding: 7px 10px;
            border-radius: 14px;
            transition: .3s;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: .8rem;
        }

            .tabcontent .food .detail .price-add-to-cart .add-to-cart:hover {
                background-color: var(--var-color-orenge);
                color: var(--var-color-white);
            }

        .tabcontent .food .detail .price-add-to-cart p {
            color: var(--var-color-orenge);
            font-size: .9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }


.tabcontent .food-mobile {
    display: none;
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid var(--var-color-black-1-100);
}

    .tabcontent .food-mobile .row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

        .tabcontent .food-mobile .row .image-mobile {
            max-height: 150px;
        }

    .tabcontent .food-mobile:last-child {
        border: 0;
    }

    .tabcontent .food-mobile .image {
        flex: 1;
        background-size: cover;
        background-position: center;
        border-radius: 14px;
    }

        .tabcontent .food-mobile .image img {
            width: 100%;
            border-radius: 7px;
        }

    .tabcontent .food-mobile .detail {
        flex: 2;
        padding-left: 20px;
    }

        .tabcontent .food-mobile .detail h3 {
            color: var(--var-color-black-1);
        }

        .tabcontent .food-mobile .detail p {
            color: var(--var-color-black-3);
            font-size: .85rem;
        }

    .tabcontent .food-mobile .price-add-to-cart {
        padding-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: var(--var-color-black-1-100);
    }

        .tabcontent .food-mobile .price-add-to-cart .was-add-to-cart {
            display: none;
            align-items: center;
            gap: 10px;
        }

            .tabcontent .food-mobile .price-add-to-cart .was-add-to-cart button {
                background-color: transparent;
                cursor: pointer;
                font-size: .7rem;
                padding: 5px 6px 1px 6px;
                border: 1px solid var(--var-color-orenge);
                border-radius: 50%;
                color: var(--var-color-orenge);
            }

        .tabcontent .food-mobile .price-add-to-cart > span {
            font-size: 1.2rem;
            color: var(--var-color-black-1);
            font-weight: 700;
        }

        .tabcontent .food-mobile .price-add-to-cart .was-add-to-cart {
            display: none;
            align-items: center;
            gap: 20px;
        }

            .tabcontent .food-mobile .price-add-to-cart .was-add-to-cart a {
                font-size: 1rem;
                padding: 5px;
                border: 1px solid var(--var-color-orenge);
                border-radius: 50%;
                color: var(--var-color-orenge);
            }

            .tabcontent .food-mobile .price-add-to-cart .was-add-to-cart span {
                color: var(--var-color-black-1);
                font-size: 1.2rem;
                user-select: none;
            }

        .tabcontent .food-mobile .price-add-to-cart .add-to-cart {
            background-color: transparent;
            cursor: pointer;
            color: var(--var-color-orenge);
            border: 1px solid var(--var-color-orenge);
            padding: 7px 10px;
            border-radius: 14px;
            transition: .3s;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: .8rem;
        }

            .tabcontent .food-mobile .price-add-to-cart .add-to-cart:hover {
                background-color: var(--var-color-orenge);
                color: var(--var-color-white);
            }

        .tabcontent .food-mobile .price-add-to-cart p {
            color: var(--var-color-orenge);
            font-size: .9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    z-index: 1000;
    display: none;
    text-align: center;
    width: 55%;
    border-radius: 14px;
    overflow-y: auto;
    max-height: 90vh;
}

    .modal .row-flex {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px;
        padding-top: 0;
    }

        /* .modal .row .resturan-image {
    width: 100%;
    height: 200px;
    background-image: url('../images/resturan-image-1.avif');
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    border-radius: 7px;
} */

        .modal .row-flex .image-logo {
            flex: 1;
        }

            .modal .row-flex .image-logo img {
                width: 100%;
            }

        .modal .row-flex .detial {
            flex: 3;
            text-align: start;
        }

            .modal .row-flex .detial p {
                color: var(--var-color-black-1-100);
                font-size: .9rem;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 5px;
            }

                .modal .row-flex .detial p.location {
                    color: var(--var-color-black-1);
                    font-size: 1rem;
                    margin-top: 10px;
                }

                .modal .row-flex .detial p i {
                    color: var(--var-color-orenge);
                }

        .modal .row-flex .map-div {
            flex: 2;
            width: 100%;
            background-color: #588157;
        }

        .modal .row-flex .raite {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-basis: 20%;
        }

            .modal .row-flex .raite p {
                color: var(--var-color-black-1-100);
                font-size: .7rem;
            }

        .modal .row-flex .raite-star {
            margin-right: 20px;
            text-align: start;
            color: var(--var-color-black-2);
            flex-basis: 80%;
        }

            .modal .row-flex .raite-star .case {
                display: flex;
                width: 100%;
                align-items: center;
                gap: 10px;
                margin-bottom: 7px;
            }

                .modal .row-flex .raite-star .case > span {
                    flex-basis: 20%;
                }

                .modal .row-flex .raite-star .case .function {
                    flex-basis: 80%;
                    height: 7px;
                    border-radius: 7px;
                    background-color: var(--var-color-black-3-700);
                }

                    .modal .row-flex .raite-star .case .function .progress {
                        height: 100%;
                        background-color: #3a86ff;
                        border-radius: 7px;
                    }

.hidden {
    display: none;
}

.modal .close {
    display: flex;
    justify-content: start;
}

.btn-close {
    border: 0;
    background-color: transparent;
    font-size: 1.5rem;
    color: #d62828;
    cursor: pointer;
}

.modal .row h4 {
    text-align: start;
    font-size: 1.2rem;
    color: var(--var-color-black-1);
}

.modal .row .comment {
    width: 100%;
    text-align: start;
    padding: 15px;
    border: 1px solid var(--var-color-black-3);
    border-radius: 14px;
}

    .modal .row .comment .user-portofio {
        display: flex;
        align-items: center;
        gap: 15px;
    }

        .modal .row .comment .user-portofio img {
            width: 10%;
        }

        .modal .row .comment .user-portofio .detail p {
            font-size: .8rem;
            color: var(--var-color-black-1-100);
        }

        .modal .row .comment .user-portofio .detail span {
            color: var(--var-color-black-2);
            display: flex;
            align-items: center;
            gap: 10px;
        }

    .modal .row .comment .message {
        padding: 15px 30px;
        color: var(--var-color-black-1);
    }

    .modal .row .comment .answer {
        margin-right: 70px;
        margin-top: 10px;
    }

        .modal .row .comment .answer h4 {
            color: var(--var-color-orenge);
        }

.modal-search-form .input-item input {
    border: 1px solid var(--var-color-black-3);
    border-radius: 7px;
    padding: 7px;
    margin: 10px 0;
    width: 100%;
    font-size: .8rem;
    font-family: 'Vazirmatn Regular', sans-serif;
}

.modal-search-form .input-item .select2-selection {
    background-color: transparent !important;
    border: 1px solid var(--var-color-black-3) !important;
}

.modal-search-form .input-item .select2-selection {
    padding: 5px;
    height: auto;
}

.modal-search h4 {
    margin-bottom: 7px;
}

.modal-search-form .submit-btn {
    width: 100%;
    font-family: 'Vazirmatn Regular', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: transparent;
    /*border: 1px solid var(--var-color-black-3);*/
    border-radius: 7px;
    padding: 10px !important;
    background-color: var(--var-color-orenge);
}

.modal-search .select2-selection__arrow {
    margin: 5px;
}

.modal-search-form .input-item input {
    margin: 0;
    margin-top: 0;
}

.modal-search-form .input-item {
    margin-bottom: 10px;
}

    .modal-search-form .input-item .select2-container {
        margin-bottom: 15px;
    }

    .modal-search-form .input-item select {
        width: 100%;
        padding: 5px;
        border: 1px solid var(--var-color-black-3);
        border-radius: 7px;
    }

        .modal-search-form .input-item select option {
            max-width: 100%;
        }

.mobil-manu-btn {
    background-color: transparent;
    padding: 10px;
    padding-bottom: 5px;
    border: 1px solid var(--var-color-white);
    border-radius: 7px;
    color: var(--var-color-white);
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.mobil-manu {
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--var-color-white);
    z-index: 1000;
    height: 100%;
    transition: .3s;
    overflow: hidden;
}

    .mobil-manu .mobile-nav-menu a {
        display: block;
        padding: 10px;
        color: var(--var-color-black-1);
        transition: .3s;
        min-width: 100px !important;
    }

        .mobil-manu .mobile-nav-menu a:hover {
            background-color: var(--var-color-black-1-100);
        }

        .mobil-manu .mobile-nav-menu a.active {
            background-color: var(--var-color-black-1);
            color: var(--var-color-white);
        }

    .mobil-manu .profile-mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
    }

        .mobil-manu .profile-mobile-menu img {
            width: 50%;
        }

.mobile-menu-tools {
    margin: 20px;
}

.mobil-manu-btn-singup {
    background-color: var(--var-color-orenge);
    color: var(--var-color-white);
    padding: 15px;
    display: inline-block;
    border-radius: 14px;
}

.mobil-manu-add-to-cart {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--var-color-black-1);
    transition: .3s;
}

    .mobil-manu-add-to-cart span {
        background-color: var(--var-color-orenge);
        color: var(--var-color-white);
        padding: 3px 7px 0px 7px;
        border-radius: 50%;
        font-size: .8rem;
    }

    .mobil-manu-add-to-cart:hover {
        margin-right: 10px;
    }

.mobile-menu-btn-close {
    color: #d62828;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    font-family: 'Vazirmatn Regular', sans-serif;
}

.mobil-manu-button {
    display: none;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

.search-modal-laptop {
    display: none;
    color: var(--var-color-white);
}

.banner-search .mobile-search-box {
    width: 80%;
    padding: 20px;
    background-color: var(--var-color-black-1-100);
    border-radius: 14px;
    display: none;
}

    .banner-search .mobile-search-box h4 {
        color: var(--var-color-white);
        font-size: 1.5rem;
        text-align: center;
    }

    .banner-search .mobile-search-box a, .btn-search {
        background-color: var(--var-color-orenge);
        color: var(--var-color-white);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin: 15px 0;
        font-family: "Vazirmatn Medium";
        padding: 15px 20px;
        border-radius: 14px;
    }

/* start login page style */

section.main {
    width: 100%;
    min-height: 700px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    section.main .container {
        min-width: 25%;
        padding: 20px;
        border: 1px solid var(--var-color-black-3-700);
        border-radius: 14px;
        background-color: #ffffff;
    }

        section.main .container h3 {
            font-size: 1.5rem;
        }

        section.main .container span {
            color: var(--var-color-orenge);
            margin-top: 10px;
            display: inline-block;
        }

        section.main .container form label {
            display: block;
            color: var(--var-color-black-2);
            font-size: .8rem;
            margin-top: 5px;
            margin-bottom: 10px;
        }

        section.main .container form input {
            width: 100%;
            padding: 10px;
            border-radius: 14px;
            border: 2px solid var(--var-color-black-1-100);
        }

            section.main .container form input:focus {
                outline: 0;
                border: 2px solid var(--var-color-orenge);
            }

        section.main .container form button[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: var(--var-color-orenge);
            margin-top: 15px;
            border-radius: 14px;
            color: var(--var-color-white);
            border: 0;
            font-family: "Vazirmatn medium";
            cursor: pointer;
        }

        section.main .container form p.allready-have-account {
            margin: 10px;
            margin-top: 25px;
            font-size: .9rem;
            text-align: center;
        }

            section.main .container form p.allready-have-account a {
                color: var(--var-color-orenge);
            }

                section.main .container form p.allready-have-account a:hover {
                    text-decoration: underline;
                }
/* ul.error-message{
    position: fixed;
    top: 10px;
    right: 0;
} */
.error-message ul li {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    border-radius: 14px;
    padding: 20px;
    color: #ffffff;
    background-color: #d00000;
    overflow: hidden;
    list-style: none;
}

    .error-message ul li .underline {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 7px;
        background-color: #ff7878;
        /* animation: underlineerror 7s forwards ease-in-out; */
    }
/* @keyframes underlineerror {
    0%{
        width: 100%;
    }
    100%{
        width: 0;
    }
} */
.password-input {
    height: 40px;
    display: flex;
    border: 2px solid var(--var-color-black-1-100);
    border-radius: 14px;
}

    .password-input input {
        border: 0 !important;
    }

    .password-input button {
        background-color: transparent;
        border: 0;
        /* margin-left:px; */
        padding: 10px;
        padding-top: 6px;
        font-size: 1.1rem;
        color: var(--var-color-black-2);
        cursor: pointer;
    }

section.main .container form a.forget-password {
    display: block;
    text-align: center;
    font-size: .8rem;
    color: var(--var-color-black-2);
    cursor: pointer;
}

    section.main .container form a.forget-password:hover {
        color: var(--var-color-orenge);
        text-decoration: underline;
    }

.back-to-login-page {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    color: var(--var-color-black-2);
    font-size: .9rem;
}

    .back-to-login-page:hover {
        color: var(--var-color-orenge);
        text-decoration: underline;
    }

/* section.main .image{
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url("../images/restaurant-interior.jpg");
    background-position: center;
    background-size: cover;
    
}
section.main .image img{
    width: 80%;
}
section.main .container{
    flex: 1;
    padding: 50px;
}
section.main .container .title h2{
    font-size: 2rem;
    margin-bottom: 50px;
}
section.main .container form.login-form .input-item{
    border-bottom: 2px solid var(--var-color-black-1-100);
    height: 35px;
    display: flex;
    align-items: center;
}
section.main .container form.login-form .input-item input{
    height: 30px;
    padding: 10px 15px;
    border: 0;
    width: 100%;
    font-family: 'Vazirmatn Regular';
}
section.main .container form.login-form .input-item input:focus{
    outline: 0;
}
section.main .container form.login-form .input-item label{
    padding: 10px;
} */



/* start cart page style */
section.cart-main {
    padding: 20px;
    min-height: 70vh;
}

.steps {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .steps .step {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 15px;
        font-weight: 600;
    }

section.cart-main .cart-detail {
    width: 100%;
    display: flex;
    padding: 20px 30px;
    /* color: var(--var-color-black-1-100); */
}

    section.cart-main .cart-detail .cart-items {
        flex: 3;
        margin: 0 20px;
        border: 1px solid var(--var-color-black-3-700);
        border-radius: 14px;
        padding: 15px 20px;
    }

        section.cart-main .cart-detail .cart-items .header button {
            background-color: transparent;
            color: #d62828;
            border: 0;
            cursor: pointer;
        }

        section.cart-main .cart-detail .cart-items .item {
            display: flex;
            align-items: center;
            gap: 15px;
            border-top: 1px solid var(--var-color-black-3-700);
            padding: 15px 0;
        }

            section.cart-main .cart-detail .cart-items .item .image {
                flex: 1;
            }

                section.cart-main .cart-detail .cart-items .item .image img {
                    width: 100%;
                }

            section.cart-main .cart-detail .cart-items .item .detail {
                flex: 6;
            }

                section.cart-main .cart-detail .cart-items .item .detail .row {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    align-items: center;
                }

                    section.cart-main .cart-detail .cart-items .item .detail .row .tools {
                        display: flex;
                        gap: 10px;
                    }

                    section.cart-main .cart-detail .cart-items .item .detail .row .name {
                        max-width: 80%;
                    }

                        section.cart-main .cart-detail .cart-items .item .detail .row .name div {
                            margin-top: 10px;
                        }

                        section.cart-main .cart-detail .cart-items .item .detail .row .name h3 {
                            font-size: 1.2rem;
                        }

                        section.cart-main .cart-detail .cart-items .item .detail .row .name div {
                            font-size: 1.5rem;
                            display: flex;
                            align-items: center;
                            gap: 5px;
                        }

                            section.cart-main .cart-detail .cart-items .item .detail .row .name div span {
                                color: var(--var-color-black-1-100);
                                font-size: 1rem;
                            }

                                section.cart-main .cart-detail .cart-items .item .detail .row .name div span:last-child {
                                    font-weight: 700;
                                }

                    section.cart-main .cart-detail .cart-items .item .detail .row .price {
                        text-align: end;
                    }

                        section.cart-main .cart-detail .cart-items .item .detail .row .price .total {
                            color: var(--var-color-orenge);
                            font-size: 1.1rem;
                            font-weight: 600;
                        }

                        section.cart-main .cart-detail .cart-items .item .detail .row .price .off {
                            font-size: .7rem;
                            background-color: #d62828b6;
                            color: var(--var-color-white);
                            padding: 5px 15px;
                            border-radius: 24px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 5px;
                        }

                    section.cart-main .cart-detail .cart-items .item .detail .row .tools > div {
                        border: 1px solid var(--var-color-black-1-100);
                        padding: 10px 15px;
                        border-radius: 14px;
                    }

                    section.cart-main .cart-detail .cart-items .item .detail .row .tools .description button {
                        background-color: transparent;
                        border: 0;
                        font-family: var(--font-family);
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }

                        section.cart-main .cart-detail .cart-items .item .detail .row .tools .description button i {
                        }

                    section.cart-main .cart-detail .cart-items .item .detail .row .tools .quantity {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                    }

                        section.cart-main .cart-detail .cart-items .item .detail .row .tools .quantity button {
                            background-color: transparent;
                            border: 0;
                            padding: 3px;
                            cursor: pointer;
                        }

                    section.cart-main .cart-detail .cart-items .item .detail .row .delete button {
                        background-color: transparent;
                        border: 0;
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        color: var(--var-color-black-2);
                        font-size: 1.1rem;
                        cursor: pointer;
                    }

                        section.cart-main .cart-detail .cart-items .item .detail .row .delete button:hover {
                            color: #d62828;
                        }

                    section.cart-main .cart-detail .cart-items .item .detail .row .tools .quantity a {
                        cursor: pointer;
                        color: var(--var-color-black-1-100);
                    }

        section.cart-main .cart-detail .cart-items .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

            section.cart-main .cart-detail .cart-items .header h4 {
                font-size: 1.3rem;
            }

            section.cart-main .cart-detail .cart-items .header a {
                display: flex;
                align-items: center;
                gap: 5px;
                color: var(--var-color-orenge);
            }

    section.cart-main .cart-detail .cart-price {
        flex: 1;
    }

        section.cart-main .cart-detail .cart-price .border-run-from-flex {
            border: 1px solid var(--var-color-black-3-700);
            padding: 15px;
            border-radius: 14px;
        }

        section.cart-main .cart-detail .cart-price .delivery {
            border-bottom: 1px dashed var(--var-color-black-3);
            padding-bottom: 10px;
        }

            section.cart-main .cart-detail .cart-price .delivery h4 {
                color: var(--var-color-black-1-100);
                margin-bottom: 15px;
            }

            section.cart-main .cart-detail .cart-price .delivery input {
                margin: 7px 0;
            }

        section.cart-main .cart-detail .cart-price .price-detail {
            padding: 15px 0;
            border-bottom: 1px dashed var(--var-color-black-3);
        }

            section.cart-main .cart-detail .cart-price .price-detail div {
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
            }

            section.cart-main .cart-detail .cart-price .price-detail .subtotal {
                font-size: 1rem;
                font-weight: 600;
            }

        section.cart-main .cart-detail .cart-price .submit-total {
        }

            section.cart-main .cart-detail .cart-price .submit-total .total {
                display: flex;
                justify-content: space-between;
                font-weight: 700;
                font-size: 1.1rem;
                padding-top: 15px;
            }

                section.cart-main .cart-detail .cart-price .submit-total .total span:last-child {
                    color: var(--var-color-orenge);
                    font-size: 1.2rem;
                }

            section.cart-main .cart-detail .cart-price .submit-total button {
                width: 100%;
                padding: 15px;
                background-color: var(--var-color-orenge);
                border: 0;
                color: var(--var-color-white);
                font-family: var(--font-family);
                border-radius: 14px;
                margin: 15px 0;
                cursor: pointer;
            }

/* about us page style */

section.banner {
    background-image: url("../images/background-blurry-restaurant-shop-interior.jpg");
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

    section.banner .content {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        background-color: var(--var-color-black-1-100);
        color: var(--var-color-white);
    }

        section.banner .content p {
            font-size: 1rem;
        }

section.about-us {
    display: flex;
    gap: 40px;
    padding: 20px;
}

    section.about-us div {
        flex: 1;
        padding: 20px;
    }

        section.about-us div.content {
            justify-content: center;
            display: flex;
            flex-direction: column;
        }

            section.about-us div.content h2 {
                font-size: 2rem;
                margin-bottom: 20px;
            }

            section.about-us div.content p {
                line-height: 30px;
            }

                section.about-us div.content p span {
                    color: var(--var-color-orenge);
                    font-size: 1.1rem;
                    font-weight: 700;
                }

            section.about-us div.content a {
                margin-right: auto;
                margin-top: 15px;
                padding: 10px 15px;
                background-color: var(--var-color-orenge);
                color: var(--var-color-white);
                border-radius: 7px;
            }

        section.about-us div.image {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 40px;
        }

        section.about-us div img {
            width: 100%;
            /* padding: 0 20px; */
            border-radius: 14px;
        }

.counter-box {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

    .counter-box > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .counter-box > div h3 {
            color: var(--var-color-black-2);
            margin-top: 15px;
        }

.counter {
    font-weight: bold;
    color: var(--var-color-orenge);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border-radius: 14px;
    font-size: 2rem;
    /* border: 1px solid var(--var-color-black-1-100); */
}

    .counter div {
        padding: 0 !important;
    }

    .counter p {
        text-align: center;
        font-size: .8rem;
        color: var(--var-color-black-1);
    }

/* تعیین انیمیشن */
@keyframes count-up {
    from {
        transform: scale(1);
        opacity: 0;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}

section.contact-us {
    padding: 50px 100px;
    display: flex;
    min-height: 100vh;
}

    section.contact-us div {
        flex: 1;
    }

    section.contact-us .detail {
        position: relative;
        flex: .7;
        background-image: linear-gradient(45deg, #ffee32, #fb5607);
        border-radius: 24px;
        padding: 50px 30px;
        color: var(--var-color-white);
        overflow: hidden;
        z-index: 99;
    }

        section.contact-us .detail h2 {
            margin-bottom: 50px;
        }

        section.contact-us .detail p {
            padding-left: 50px;
            margin-bottom: 40px;
        }

        section.contact-us .detail::before {
            content: "";
            position: absolute;
            top: -50px;
            left: -200px;
            display: block;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 2px solid #ffd000;
            z-index: -1;
        }

        section.contact-us .detail::after {
            content: "";
            position: absolute;
            bottom: -150px;
            right: -100px;
            display: block;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 2px solid #ff9500;
        }

    section.contact-us .message {
        padding: 50px 100px;
        flex: .7;
    }

        section.contact-us .message h3 {
            margin-bottom: 50px;
            font-size: 2rem;
            color: var(--var-color-orenge);
        }

        section.contact-us .message form .input-item {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
        }

            section.contact-us .message form .input-item label {
                font-weight: 600;
            }

            section.contact-us .message form .input-item input {
                height: 35px;
                border: 0;
                margin-top: 5px;
                font-family: var(--font-family);
                padding: 5px 10px;
                border-bottom: 1px solid var(--var-color-black-3-700);
                border-radius: 14px;
            }

                section.contact-us .message form .input-item input:focus {
                    outline: 0;
                    border-bottom: 2px solid var(--var-color-orenge);
                }

            section.contact-us .message form .input-item textarea {
                /* height: 35px; */
                height: 110px;
                resize: none;
                border: 0;
                margin-top: 5px;
                font-family: var(--font-family);
                padding: 5px 10px;
                border-bottom: 1px solid var(--var-color-black-3-700);
                border-radius: 14px;
            }

                section.contact-us .message form .input-item textarea:focus {
                    outline: 0;
                    border-bottom: 2px solid var(--var-color-orenge);
                }

        section.contact-us .message form button {
            float: left;
            padding: 15px 30px;
            background-color: var(--var-color-orenge);
            color: var(--var-color-white);
            border-radius: 14px;
            border: 0;
            font-family: var(--font-family);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

            section.contact-us .message form button::before {
                content: "";
                position: absolute;
                display: block;
                width: 0px;
                height: 0px;
                top: 50%;
                left: 50%;
                /* از left بجای right استفاده شده است */
                transform: translate(-50%, -50%);
                transition: .3s;
                background-color: #ccc5b937;
                border-radius: 50%;
            }

            section.contact-us .message form button:hover::before {
                width: 100px;
                height: 100px;
            }


/* add resturant page style */

section.add-restaurant {
    display: flex;
}

    section.add-restaurant div {
        flex: 1;
    }

    section.add-restaurant .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    section.add-restaurant .content {
        padding: 70px 100px;
    }

        section.add-restaurant .content h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        section.add-restaurant .content form .title {
            border-bottom: 2px solid var(--var-color-orenge);
            padding-bottom: 5px;
            margin: 10px 0;
        }

        section.add-restaurant .content form .three-items-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

            section.add-restaurant .content form .three-items-row .item {
                flex: 1;
            }

                section.add-restaurant .content form .three-items-row .item input {
                    width: 100%;
                    font-size: 1rem;
                    padding: 5px 15px;
                    border: 1px solid var(--var-color-black-3);
                    border-radius: 7px;
                    margin-top: 7px;
                }

                section.add-restaurant .content form .three-items-row .item label.required::after {
                    content: "*";
                    font-size: 1rem;
                    color: #d62828;
                }

                section.add-restaurant .content form .three-items-row .item input:focus {
                    outline: 0;
                    box-shadow: 0 4px 10px #ff7b0037;
                }

                section.add-restaurant .content form .three-items-row .item select {
                    width: 100%;
                    display: block;
                    margin-top: 7px;
                    padding: 3px 10px;
                    font-family: var(--font-family);
                    border: 1px solid var(--var-color-black-3);
                    border-radius: 7px;
                }

        section.add-restaurant .content form .item label.required::after {
            content: "*";
            font-size: 1rem;
            color: #d62828;
        }

        section.add-restaurant .content form .item label {
            display: block;
        }

        section.add-restaurant .content form .item textarea {
            width: 100%;
            border: 1px solid var(--var-color-black-3);
            border-radius: 7px;
            resize: vertical;
            max-height: 300px;
        }

        section.add-restaurant .content form button {
            padding: 15px;
            background-color: var(--var-color-orenge);
            font-family: var(--font-family);
            color: var(--var-color-white);
            border: 0;
            margin: 20px 0;
            border-radius: 7px;
        }

section.about-us div.mobile-image {
    display: none;
}

.price-inner {
    user-select: none;
}

/* dashboarde page style */
.main-dashboard {
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--var-color-black-1);
    padding: 40px;
}

    .main-dashboard .content {
        display: flex;
        gap: 20px;
        min-width: 70%;
    }

        .main-dashboard .content > div {
            padding: 15px 30px;
            box-shadow: 0 1px 5px #25242220;
            border-radius: 14px;
            background-color: #ffffff;
        }

        .main-dashboard .content .right-menu {
            flex: 1;
        }

            .main-dashboard .content .right-menu .user-detail {
                font-weight: 500;
            }

                .main-dashboard .content .right-menu .user-detail p {
                    color: var(--var-color-black-2);
                }

            .main-dashboard .content .right-menu nav {
                display: flex;
                flex-direction: column;
                padding: 20px 0;
            }

                .main-dashboard .content .right-menu nav a {
                    color: var(--var-color-black-1-100);
                    transition: .3s;
                    margin: 10px 0;
                }

                    .main-dashboard .content .right-menu nav a:hover {
                        padding-right: 10px;
                        color: var(--var-color-black-1);
                    }

                    .main-dashboard .content .right-menu nav a.active {
                        padding-right: 10px;
                        color: var(--var-color-black-1);
                        border-right: 3px solid var(--var-color-black-1);
                    }

        .main-dashboard .content .user-content {
            flex: 5;
        }

            .main-dashboard .content .user-content h3 .underline {
                width: 110%;
                border-radius: 7px;
                margin-top: 7px;
                margin-right: -7px;
                height: 2px;
                background-color: var(--var-color-orenge);
            }

form.user-detail .col-2 {
    width: 100%;
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

    form.user-detail .col-2 .col {
        width: 100%;
    }

form.user-detail label.required::after {
    content: "*";
    color: var(--var-color-orenge);
}

/* .main-dashboard .content .user-content form.user-detail .col-2 .col input{
    width: 100%;
    padding: 10px;
    border-radius: 14px;
    border: 0;
} */
form.user-detail .col-1 {
    width: 100%;
    margin-top: 10px;
}

form.user-detail label {
    display: block;
    padding-right: 7px;
}

form.user-detail input {
    width: 100%;
    padding: 10px;
    border-radius: 14px;
    margin-top: 7px;
    border: 1px solid var(--var-color-black-3-700);
}

    form.user-detail input:focus {
        outline: 0;
        box-shadow: 0 1px 7px #3a85ff39;
    }

    form.user-detail input:disabled {
        cursor: no-drop;
        background-color: transparent;
    }

form.user-detail textarea:disabled {
    cursor: no-drop;
    background-color: transparent;
}

form.user-detail textarea {
    min-width: 100%;
    padding: 10px;
    border-radius: 14px;
    margin-top: 7px;
    min-height: 100px;
    max-height: 200px;
    resize: vertical;
    border: 1px solid var(--var-color-black-3-700);
}

    form.user-detail textarea:focus {
        outline: 0;
        box-shadow: 0 1px 7px #3a85ff39;
    }

form.user-detail .group-button {
    display: flex;
    margin: 10px 0;
    justify-content: space-between;
}

    form.user-detail .group-button button {
        padding: 10px 15px;
        background-color: transparent;
        border-radius: 14px;
        border: 2px solid var(--var-color-orenge);
        cursor: pointer;
        color: var(--var-color-orenge);
    }

        form.user-detail .group-button button[type="submit"] {
            color: var(--var-color-white);
            border: 2px solid #588157;
            background-color: #588157;
            opacity: 1;
            cursor: pointer;
        }

            form.user-detail .group-button button[type="submit"]:disabled {
                opacity: .7;
                cursor: no-drop;
            }

.chart {
    font-family: var(--font-family) !important;
    width: 100%;
}

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

    .order-history h4 {
        color: var(--var-color-orenge);
        font-size: 1.3rem;
        margin: 20px 0;
    }

    .order-history table {
        width: 100%;
    }

        .order-history table th {
            text-align: center;
            font-weight: 400;
            background-color: var(--var-color-black-3);
            /* border-bottom: 1px solid var(--var-color-black-1); */
        }

        .order-history table td {
            padding: 10px 20px;
            text-align: center;
        }

            .order-history table td p.shenaseh {
                font-size: 1.2rem;
                color: var(--var-color-black-1-100);
                font-weight: 700;
            }

            .order-history table td p.off {
                text-decoration: line-through;
                color: var(--var-color-black-3-700);
            }

            .order-history table td p.total {
                font-size: 1.2rem;
                font-weight: 600;
            }

            .order-history table td p.status-success {
                color: #38b000;
            }

                .order-history table td p.status-success::before {
                    content: '\2713';
                }

            .order-history table td p.status-failed {
                color: #d00000;
            }

                .order-history table td p.status-failed::before {
                    content: 'x';
                }

.user-content .detail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.2rem;
    color: var(--var-color-black-3);
}

    .user-content .detail h4 {
        font-size: 2rem;
        color: var(--var-color-black-1);
        margin: 20px;
    }

    .user-content .detail .links {
        display: flex;
        gap: 20px;
        font-size: .9rem;
        justify-content: space-between;
    }

        .user-content .detail .links a {
            color: var(--var-color-orenge);
        }

        .user-content .detail .links button {
            background-color: transparent;
            border: 0;
            color: var(--var-color-orenge);
            cursor: pointer;
        }

/* CSS برای مودال */
.walet-modal {
    display: none;
    /* ابتدا مودال مخفی است */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
}

.walet-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    min-width: 60%;
    padding: 30px;
    border-radius: 14px;
    max-height: 80vh;
    overflow-y: auto;
}
@media (max-width: 768px) {
    .walet-modal-content table th{
        display: none;
    }
    .walet-modal-content table td {
        display: flex;
        flex-direction: column;
    }
    .mobile-title{
        display: inline
    }
}
.mobile-title{
    display: none;
}
.walet-modal-content table {
    width: 100%;
}

        .walet-modal-content table th {
            color: var(--var-color-black-1);
            padding: 5px;
            border-bottom: 2px solid var(--var-color-orenge);
        }

        .walet-modal-content table tbody tr:not(:nth-child(odd)) {
            background-color: var(--var-color-black-3-700);
        }

        .walet-modal-content table td {
            text-align: center;
            padding: 10px;
        }

            .walet-modal-content table td.status-success {
                color: #38b000;
            }

            .walet-modal-content table td.status-failed {
                color: #d00000;
            }

#waletCloseModal {
    cursor: pointer;
    color: #d00000;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
}

.walet-charg-modal {
    display: none;
    /* ابتدا مودال مخفی است */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.walet-charg-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    min-width: 40%;
    padding: 30px;
    border-radius: 14px;
}

    .walet-charg-modal-content h4 {
        font-weight: 500;
        font-size: 1.1rem;
    }

    .walet-charg-modal-content form {
        margin: 15px;
        display: inline-flex;
        flex-direction: column;
        gap: 25px;
    }

        .walet-charg-modal-content form .item {
            text-align: start;
        }

        .walet-charg-modal-content form label {
            display: block;
            margin-bottom: 10px;
        }

            .walet-charg-modal-content form label span {
                font-size: .8rem;
                color: #d00000;
            }

        .walet-charg-modal-content form .item > input {
            background-color: var(--var-color-white);
            border: 0;
            padding: 7px 15px;
            border-radius: 24px;
            margin-left: 10px;
            width: 100%;
        }

        .walet-charg-modal-content form input[type="text"]:focus {
            outline: 0;
            box-shadow: 0 1px 7px #3a85ff6f;
        }

        .walet-charg-modal-content form .way-to-pay .way {
            display: flex;
            align-items: center;
            gap: 20px;
        }

            .walet-charg-modal-content form .way-to-pay .way div {
                display: inline-flex;
                align-items: center;
                gap: 10px;
            }

        .walet-charg-modal-content form button {
            background-color: #38b000;
            color: #ffffff;
            border: 0;
            padding: 10px;
            border-radius: 14px;
            cursor: pointer;
        }

#waletCloseChargModal {
    cursor: pointer;
    color: #d00000;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
}

ul.user-favorive {
    list-style: none;
}

    ul.user-favorive li {
        display: flex;
        align-items: center;
        padding: 15px 0;
        gap: 20px;
    }

        ul.user-favorive li div {
            flex: 1;
            text-align: start;
        }

        ul.user-favorive li .image {
            flex: .5;
        }

            ul.user-favorive li .image img {
                width: 100%;
                border-radius: 7px;
            }

        ul.user-favorive li .food-detail h3 {
            font-size: 1.2rem;
        }

        ul.user-favorive li .food-detail p {
            font-size: .9rem;
            color: var(--var-color-black-2);
            margin: 10px 0;
        }

        ul.user-favorive li .food-detail a {
            font-size: .9rem;
            color: var(--var-color-orenge);
        }

        ul.user-favorive li .price-buttons-group p {
            font-size: 1.2rem;
        }

        ul.user-favorive li .price-buttons-group a {
            font-size: .9rem;
            color: #d00000;
            opacity: .7;
            margin-top: 15px;
            display: block;
        }

        ul.user-favorive li .price-buttons-group span {
            font-size: .9rem;
            color: var(--var-color-black-3);
            text-decoration: line-through;
            display: block;
        }

.alert {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translate(-50%,0);
    width: 500px;
    /* height: 200px; */
    background-color: #ffffff;
    border-radius: 14px;
    display: flex;
    padding: 15px 20px;
    gap: 20px;
    box-shadow: 0 1px 7px var(--var-color-black-3-700);
    animation: newsAlert .7s forwards;
    font-size: .9rem;
}
.alert-danger {
    border: 1px solid #f1aeb5;
    color: #58151c;
    background: #f8d7da;
}
    .alert-danger ul{
        list-style: none;
    }
    @keyframes newsAlert {
        0% {
        top: -150px;
    }

    100% {
        top: 10px;
    }
}

@keyframes newsAlertcloes {
    0% {
        top: 10px;
        opacity: 1;
    }

    100% {
        top: -150px;
        opacity: 0;
        display: none;
    }
}

.alert div svg {
    font-size: 2.5rem;
    color: var(--var-color-orenge);
}

.alert .button-group {
    display: flex;
    justify-content: end;
    gap: 20px;
    margin-top: 10px;
}

    .alert .button-group a {
        padding: 10px 15px;
        border-radius: 14px;
        color: var(--var-color-white);
        cursor: pointer;
    }

        .alert .button-group a:first-child {
            background-color: var(--var-color-orenge);
        }

        .alert .button-group a:last-child {
            background-color: var(--var-color-black-1-100);
        }

.search-result-main {
    padding: 50px 100px;
    display: flex;
    gap: 20px;
}

    .search-result-main .filter {
        flex: 1;
        /* background-color: #3a86ff; */
        padding: 0 15px;
    }

        .search-result-main .filter .search-filter-header {
            display: flex;
            justify-content: space-between;
            padding: 10px 15px;
            background-color: var(--var-color-orenge);
            border-radius: 4px;
        }

            .search-result-main .filter .search-filter-header h5, .search-result-main .filter .search-filter-headera {
                font-size: 1rem;
                font-weight: 500;
                color: var(--var-color-white);
            }

            .search-result-main .filter .search-filter-header button {
                background-color: transparent;
                border: 0;
                color: var(--var-color-white);
            }

        .search-result-main .filter ul {
            list-style: none;
        }

        .search-result-main .filter > ul {
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
            box-shadow: 0 1px 7px var(--var-color-black-3-700);
            background-color: var(--var-color-white);
        }

            .search-result-main .filter > ul li {
                color: var(--var-color-black-1);
                font-weight: 600;
                user-select: none;
                cursor: pointer;
            }

                .search-result-main .filter > ul li ul {
                    height: 0px;
                    overflow: hidden;
                    margin-bottom: 10px;
                    margin-right: 20px;
                }

                    .search-result-main .filter > ul li ul li {
                        display: flex;
                        align-items: center;
                        gap: 7px;
                        font-weight: 500;
                    }

                        .search-result-main .filter > ul li ul li i {
                            color: var(--var-color-black-2);
                        }

                        .search-result-main .filter > ul li ul li a {
                            display: block;
                            color: var(--var-color-black-2);
                            transition: .3s;
                        }

                            .search-result-main .filter > ul li ul li a:hover {
                                margin-right: 10px;
                            }

    .search-result-main .results {
        flex: 3;
    }

        .search-result-main .results form.search-box {
            display: flex;
            max-width: 100%;
            gap: 20px;
            background-color: var(--var-color-white);
            padding: 20px;
            border-radius: 7px;
            /* padding-left: 200px; */
            box-shadow: 0 1px 7px var(--var-color-black-3-700);
        }

            .search-result-main .results form.search-box input, .search-result-main .results form.search-box select {
                flex: 1;
            }

            .search-result-main .results form.search-box .select2-container--default .select2-selection--single {
                height: 100%;
                border-radius: 7px;
            }

            .search-result-main .results form.search-box .select2-container {
                border: 1px solid var(--var-color-black-3);
                border-radius: 4px;
            }

            .search-result-main .results form.search-box input {
                background-color: transparent;
                border-radius: 4px;
                border: 1px solid var(--var-color-black-3);
                padding: 0 10px;
            }

                .search-result-main .results form.search-box input:focus {
                    outline: 0;
                    box-shadow: 0 1px 7px #3a85ff66;
                }

            .search-result-main .results form.search-box button {
                padding: 5px 10px;
                background-color: var(--var-color-orenge);
                color: var(--var-color-white);
                border-radius: 4px;
                border: 0;
                /*margin-right: 200px;*/
            }

        .search-result-main .results .resturan-list {
            background-color: var(--var-color-white);
            margin: 20px 0;
            border-radius: 14px;
            box-shadow: 0 1px 7px var(--var-color-black-3-700);
        }

            .search-result-main .results .resturan-list .title {
                padding: 20px;
                padding-bottom: 0;
            }

                .search-result-main .results .resturan-list .title h3 {
                    margin-bottom: 10px;
                }

        .search-result-main .results .resturan-list-box {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }

            .search-result-main .results .resturan-list-box .card {
                /* flex-basis: 33.33% !important; */
            }

.user-address-detail {
    flex: 3;
    margin: 0 20px;
    border: 1px solid var(--var-color-black-3-700);
    border-radius: 14px;
    padding: 15px 20px;
}

.float {
    z-index: 9999;
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 30px;
    right: 30px;
    background-color: var(--var-color-orenge);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.float-left {
    right: unset !important;
    left: 30px;
}

.my-float {
    font-size: 24px;
    margin-top: 8px;
}

a.float + div.label-container {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

a.float:hover + div.label-container {
    visibility: visible;
    opacity: 1;
}

.float-cart {
    display: flex;
    justify-content: center;
    align-items: center;
}

.label-container {
    position: fixed;
    bottom: 48px;
    right: 105px;
    display: table;
    visibility: hidden;
    background-color: var(--var-color-white);
    padding: 10px;
    border-radius: 14px;
    z-index: 99;
}

a.float + div.label-container {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

a.float:hover + div.label-container {
    visibility: visible;
    opacity: 1;
}

.pace {
    z-index: 99999;
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d(0, -50px, 0);
    -ms-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
    -webkit-transition: -webkit-transform .5s ease-out;
    -ms-transition: -webkit-transform .5s ease-out;
    transition: transform .5s ease-out;
}

    .pace.pace-active {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .pace .pace-progress {
        display: block;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 100%;
        width: 100%;
        height: 10px;
        background: #29d;
        pointer-events: none;
    }

button.close {
    background-color: transparent;
    border: 0;
    font-size: 1.7rem;
    margin: 0;
    margin-right: 20px;
    cursor: pointer;
}

.remember-me {
    display: flex;
    gap: 5px;
    align-items: center
}

    .remember-me input {
        width: auto !important;
    }

.profile-link {
    color: var(--var-color-white);
    display: flex;
    align-items: center;
    gap: 7px;
    transition: .3s;
}

    .profile-link:hover {
        color: #403d39;
    }

.quantity-input {
    max-width: 30px;
    border: none;
    background-color: transparent;
    font-size: 1rem;
}

.steps .active {
    color: var(--var-color-orenge);
}

.validation-summary-errors {
}

.datepicker {
    border: 0;
    background-color: transparent;
    text-align: end;
    color: var(--var-color-black-1);
}

.timepicker {
    border: 0;
    background-color: transparent;
    text-align: end;
    color: var(--var-color-black-1);
}

/* Container styles */
/*.app-gateways {
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
}*/

/* Gateway item styles */
/*.gateway-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

    .gateway-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }*/

/* Form-check styles */
/*.form-check-inline {
    display: flex;
    align-items: center;
}

.app-checkbox-red {
    margin-right: 10px;*/
/* Add your custom checkbox styling here */
/*}*/

/* Image styles */
/*.gateway-item img {
    width: 32px;*/ /* Adjust the size as needed */
/*margin-right: 10px;
}*/

/* Label styles */
/*.gateway-item label {
    padding-left: 10px;
    font-size: 16px;
    color: #333;
}
.gateway-item h5{
    display: flex;
    align-items: center;
}*/
/* Additional button styles */
/*.btn-info {
    background-color: #17a2b8;
    color: #fff;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .btn-info:hover {
        background-color: #117a8b;
    }*/

/* Input styles */
/*#txt_code_takhfif,
#txt_code_takhfif_send_price {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
}*/

/* Responsive styles */
/*@media (max-width: 576px) {
    .gateway-item {
        padding: 10px;
    }

    .app-checkbox-red {
        margin-right: 5px;
    }

    .gateway-item img {
        width: 24px;
        margin-right: 5px;
    }

    .gateway-item label {
        font-size: 14px;
    }

    #txt_code_takhfif,
    #txt_code_takhfif_send_price {
        margin-right: 0;
        margin-top: 10px;
    }
}


.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.account-box {
    background-color: var(--var-color-black-1);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.account-box-content {
    padding: 20px;
}

.logo img {
    max-width: 100%;
}

.form-group label {
    color: var(--var-color-black-3);
}

.form-control {
    background-color: var(--var-color-black-1-100);
    color: var(--var-color-white);
    border: 1px solid var(--var-color-black-3);
    margin-bottom: 15px;
    padding: 10px;
}

    .form-control:focus {
        background-color: var(--var-color-black-1);
        border-color: var(--var-color-orenge);
    }

.btn-success {
    background-color: var(--var-color-orenge);
    color: var(--var-color-white);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}


@media (max-width: 768px) {
    .col-md-5 {
        width: 100%;
    }

}*/

.food-detail-modal #app_food_modal {
    font-family: 'Arial', sans-serif;
}

.food-detail-modal .modal-dialog {
    max-width: 800px;
}

.food-detail-modal .modal-content {
    border: none;
    border-radius: 10px;
}

.food-detail-modal .modal-title {
    text-align: left;
}

.food-detail-modal .close {
    font-size: 1.5rem;
    color: var(--var-color-black-1);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

    .food-detail-modal .close:hover {
        opacity: 1;
    }

.food-detail-modal .food-item {
    padding: 20px;
    border-radius: 10px;
}

    .food-detail-modal .food-item .row {
        display: flex;
    }

        .food-detail-modal .food-item .row .col-12 {
            padding: 10px;
            text-align: start;
        }

            .food-detail-modal .food-item .row .col-12:first-child {
                min-width: 45%;
            }

            .food-detail-modal .food-item .row .col-12 h6.item-title {
                font-size: 1.3rem;
            }

            .food-detail-modal .food-item .row .col-12 h6.item-description {
                font-weight: 400;
                margin-top: 10px;
                font-size: .8rem;
            }

    .food-detail-modal .food-item img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        margin-bottom: 20px;
    }

.food-detail-modal .item-title {
    color: var(--var-color-black-1);
    font-size: 1rem;
    font-weight: 400;
}

.food-detail-modal .item-text {
    color: var(--var-color-black-2);
}

.food-detail-modal .item-price {
    color: var(--var-color-orenge);
}

.food-detail-modal .text-info,
.food-detail-modal .text-warning {
    cursor: pointer;
}

.food-detail-modal .text-warning {
    color: var(--var-color-orenge);
}

.food-detail-modal .app-restaurant-reviews {
    margin-top: 20px;
}

.food-detail-modal .rating-group {
    display: inline-block;
    direction: rtl;
}

    .food-detail-modal .rating-group input[type="radio"] {
        display: none;
    }

    .food-detail-modal .rating-group label {
        cursor: pointer;
        display: inline-block;
        position: relative;
        width: 24px;
        height: 24px;
    }

        .food-detail-modal .rating-group label:before {
            content: '\2605'; /* Unicode character for a star */
            font-size: 24px;
            color: var(--var-color-black-3);
            position: absolute;
            top: 0;
            left: 0;
        }

        .food-detail-modal .rating-group label:hover:before,
        .food-detail-modal .rating-group label:hover ~ label:before,
        .food-detail-modal .rating-group input[type="radio"]:checked ~ label:before {
            color: var(--var-color-orenge);
        }

.food-detail-modal .modal-body p {
    margin: 20px 0;
}

.food-detail-modal .btn-info {
    background-color: var(--var-color-orenge);
    color: var(--var-color-white);
    border: none;
    margin-right: 10px;
}

    .food-detail-modal .btn-info:hover {
        background-color: #c04b1d; /* Darker shade for hover effect */
    }

.card-radio-btn {
    display: block;
    position: relative;
    margin-bottom: 15px;
}

.card-input-element {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: box-shadow 0.3s ease-in-out;
}

    .card:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

.card-body {
    padding: 15px;
}

    .card-body span {
        font-size: 18px;
    }

    .card-body i {
        margin-right: 5px;
    }

    .card-body a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease-in-out;
    }

        .card-body a:hover {
            color: #007bff;
        }

.text-success {
    color: #28a745 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.card-input-element:disabled + .card {
    opacity: 0.6;
    pointer-events: none;
}

.user-content > h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-new-address {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    background-color: var(--var-color-orenge);
    border: 0;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 14px;
    font-weight: 900;
}

    .add-new-address span {
        font-size: .85rem;
        font-weight: 600;
    }

#address-list {
    display: none;
    flex: 1;
}

    #address-list p {
        line-break: auto;
    }

    #address-list .card-radio-btn .card-body {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

.displayNone {
    display: none;
}

.rating-input {
    color: #ffba08;
}

.swiper-container {
    width: 100%;
    /* margin: auto; */
    overflow: hidden;
    height: 100%;
    position: relative;
    padding: 20px;
}


.swiper-slide img {
    width: 100%;
    padding: 0 15px;
    height: 50px;
    object-fit: contain;
    border-radius: 7px;
}

.btn-favorite {
    position: relative;
    font-size: 1rem;
    font-weight: 400;
    color: var(--var-color-orenge);
}

    .btn-favorite:hover span {
        display: inline-block;
    }

    .btn-favorite span {
        display: none;
        position: absolute;
        bottom: 120%;
        width: 120px;
        right: -300%;
        text-align: center;
        font-size: .7rem;
        background-color: var(--var-color-orenge);
        color: var(--var-color-white);
        z-index: 2;
        padding: 5px;
        border-radius: 14px;
    }

        .btn-favorite span::after {
            content: "";
            position: absolute;
            left: 48%;
            top: 84%;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            background-color: var(--var-color-orenge);
            z-index: 1;
        }

.tab-bar-mobile {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px 0;
    box-shadow: 1px 1px 7px var(--var-color-black-3);
    background-color: var(--var-color-white);
    display: none;
    align-items: center;
    justify-content: space-around;
    z-index: 1000000;
}

    .tab-bar-mobile a {
        position: relative;
        color: var(--var-color-black-1);
        display: flex;
        flex-direction: column;
        font-size: 1rem;
    }

        .tab-bar-mobile a span {
            font-size: .8rem;
        }

        .tab-bar-mobile a .quantity {
            background-color: var(--var-color-red);
            color: var(--var-color-white);
            font-size: .8rem;
            line-height: 10px;
            position: absolute;
            top: -5px;
            right: 8px;
            border-radius: 50%;
            padding: 6px 5px 2px 4px;
        }

.dustam-tool {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--var-color-orenge);
    padding: 20px 15px;
    border-radius: 50%;
    color: var(--var-color-white);
    font-size: .8rem;
    z-index: 1000;
    border: 2px dashed var(--var-color-white);
}

    .dustam-tool p {
        font-size: .8rem;
    }

    .dustam-tool:hover ul {
        opacity: 1;
        transform: translateY(-20px);
    }

    .dustam-tool ul {
        transition: .3s;
        opacity: 0;
        position: absolute;
        bottom: 50px;
        right: 0;
        background-color: var(--var-color-white);
        padding: 10px;
        border-radius: 14px;
        box-shadow: 1px 1px 4px var(--var-color-black-3-700);
    }

        .dustam-tool ul a {
            color: var(--var-color-black-1);
            display: block;
            border-radius: 7px;
            padding: 5px 10px;
            border-bottom: 1px dashed var(--var-color-black-3-700);
        }

        .dustam-tool ul li:last-child a {
            border-bottom: 0;
        }

        .dustam-tool ul a:hover {
            background-color: var(--var-color-black-3-700);
        }

.btn-mapmodal {
    font-size: .8rem;
    font-weight: 400;
}

/*.modal-body {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--var-color-black-1-100);
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

.modal-body .food-detail {
    /*width: 60%;*/
    background-color: var(--var-color-white);
    border-radius: 14px;
    position: relative;
    display: flex;
    padding: 20px 0;
}

.mySwiper {
    flex: 1;
    /* margin: auto; */
    overflow: hidden;
    height: 100%;
    position: relative;
    padding: 20px;
}

    .mySwiper .border-0 {
        border: 0 !important;
    }

.swiper-slide img.food-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.modal-body .food-detail .detail {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    text-align: start;
}

    .modal-body .food-detail .detail .restauran-detail h3 {
        font-size: 1.5rem;
    }

    .modal-body .food-detail .detail .restauran-detail h6 {
        font-size: 1rem;
        font-weight: 400;
        color: var(--var-color-black-2);
    }

    .modal-body .food-detail .detail .price-and-Score .price {
        color: var(--var-color-orenge);
        font-size: 1rem;
        font-weight: 600;
    }

    .modal-body .food-detail .detail .price-and-Score .btn-group {
        display: flex;
        gap: 10px;
    }

        .modal-body .food-detail .detail .price-and-Score .btn-group a {
            background-color: var(--var-color-orenge);
            color: var(--var-color-white);
            padding: 5px 10px;
            border-radius: 7px;
            margin-top: 10px;
        }


.btn-defualt {
    padding: 10px 15px;
    color: var(--var-color-white);
    background-color: var(--var-color-orenge);
    border: 0;
    border-radius: 7px;
    margin: 0 5px;
}



.app-restaurant-reviews {
    margin: auto;
    max-width: 600px !important;
    padding: 0 !important;
}

    .app-restaurant-reviews.modal {
        z-index: 1050; /* Ensure modal appears above other content */
    }

        .app-restaurant-reviews.modal.fade.show {
            display: block;
        }

/* General Styles */
.modal-dialog {
    /*max-width: 600px;*/
    margin: 0 auto;
    margin-top: 0 !important;
}

.modal-content {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}

.modal-title {
    font-size: 1.5em;
    color: #333;
}

.modal-body {
    padding: 20px;
}
    .modal-body #map{
        height: 500px !important;
    }
#mapModal{
    width: 80%;
}


.order-detail-mobile{
    display: none;
}

@media (max-width: 960px) {
    .order-detail-mobile {
        display: block;
    }
    .app-orders-table{
        display: none;
    }
}

.form-group {
    margin-bottom: 20px;
}

.rating-group {
    position: relative;
    display: inline-block;
}

    .rating-group input[type="radio"] {
        display: none;
    }

    .rating-group label {
        cursor: pointer;
        color: #ddd;
    }

        .rating-group label:before {
            content: '\2605'; /* Star symbol */
            font-size: 24px;
        }

        .rating-group label.full:before {
            content: '\2605'; /* Filled star symbol */
            color: #ddd; /* Default color for unfilled star */
        }

    .rating-group input[type="radio"]:checked ~ label:before {
        color: #ffc107; /* Change color of checked star */
    }

    .rating-group input[type="radio"]:hover ~ label:before {
        color: #ccc; /* Change color of hovered star */
    }

    .rating-group label:hover:before {
        color: #ccc; /* Change color of star on hover */
    }

    .rating-group.left label.full:before {
        margin-right: 5px; /* Space between filled star and text */
    }

    .rating-group.right label.full:before {
        margin-left: 5px; /* Space between text and filled star */
    }

.modal-footer {
    padding: 15px;
    border-top: 1px solid #ccc;
    text-align: center;
}

.btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .btn-primary:hover {
        background-color: #0056b3;
    }

p.sale {
    color: var(--var-color-white);
    position: absolute;
    top: 15px;
    left: 0;
    background-color: var(--var-color-red);
    padding: 5px 20px;
    font-size: .8rem;
    border-radius: 0 24px 24px 0;
}


.address-modal-map {
    width: 100%;
    height: 250px;
}


.btn-reload-map {
    padding: 5px 14px;
    margin-bottom: 20px;
    background-color: var(--ol-brand-color);
    border: 0;
    color: var(--var-color-white);
    border-radius: 7px;
    cursor: pointer;
}

.btn-see-all {
    background: transparent;
    border: 0;
    padding-top: 10px;
    color: var(--var-color-orenge);
    border-bottom: 2px solid;
    padding-bottom: 5px;
    cursor: pointer;
}
.btn-see-all:hover {
    border-bottom: 0;
}

.btn-add-favorit {
    background-color: var(--var-color-orenge);
    color: white;
    padding: 5px 10px;
    border-radius: 14px;
    margin-bottom: 10px;
    display: inline-block;
}




section.invoice {
    position: relative;
    width: 70%;
    height: 100vh;
    margin: 15px auto;
    box-shadow: 0 0 14px var(--var-color-black-3-700);
    border-radius: 14px;
}

    section.invoice .invoice-header {
        background-color: #fb8500;
        display: flex;
        justify-content: space-between;
        padding: 30px;
        border-radius: 14px 14px 0 0;
        color: var(--var-color-white);
    }

        section.invoice .invoice-header .flex-item {
            display: flex;
            gap: 50px;
            margin-top: 10px;
        }

    section.invoice table.invoice-item-list img {
        width: 100px;
        border-radius: 7px;
    }

    section.invoice table.invoice-item-list {
        width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
    }

        section.invoice table.invoice-item-list td {
            text-align: center;
            padding: 10px 0;
        }

        section.invoice table.invoice-item-list th {
            border-bottom: 1px solid var(--var-color-black-3-700);
            padding: 10px 0;
        }

    section.invoice .invoice-footer {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 15px 20px;
        display: flex;
    }

        section.invoice .invoice-footer .note {
            border-radius: 7px 0 0 7px;
            background-color: #e5e5e5;
            padding: 20px;
            flex: 2;
        }

            section.invoice .invoice-footer .note .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

        section.invoice .invoice-footer .total {
            color: var(--var-color-white);
            border-radius: 0 7px 7px 0;
            background-color: #fb8500;
            padding: 20px;
            flex: 1;
        }

            section.invoice .invoice-footer .total h4 {
                margin-top: 20px;
            }

#app-register-form a.btn-warning {
    text-align: center;
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    border-radius: 14px;
    color: var(--var-color-orenge);
    border: 0;
    font-family: "Vazirmatn medium";
    cursor: pointer;
}

.input-text-style {
    border: 0 !important;
}
/* ===== Restaurant page modal UX refresh ===== */
#overlayRestInfo {
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1090;
}

#restaurantInfo.restaurant-info-modal {
    width: min(920px, calc(100% - 32px));
    max-height: min(88vh, 820px);
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .22);
    overflow: auto;
    text-align: right;
    z-index: 1100;
    animation: restaurantModalIn .22s ease-out;
}

@keyframes restaurantModalIn {
    from { opacity: 0; transform: translate(-50%, -47%) scale(.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.restaurant-info-modal .restaurant-info-header {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #eef0f3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.restaurant-info-modal .restaurant-info-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--var-color-orenge);
    font-size: .75rem;
    font-weight: 600;
}

.restaurant-info-modal .restaurant-info-header h3 {
    margin: 0;
    color: #171923;
    font-size: 1.15rem;
    font-weight: 700;
}

.restaurant-info-modal .restaurant-info-close,
.food-detail-modal .food-modal-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #f5f6f8;
    color: #505461;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.restaurant-info-modal .restaurant-info-close:hover,
.food-detail-modal .food-modal-close:hover {
    background: #fff1ec;
    color: var(--var-color-orenge);
    transform: rotate(4deg);
}

#restaurantInfo.restaurant-info-modal .map-div-row-flex {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 1.25fr);
    align-items: stretch;
    gap: 18px;
    margin: 0;
    padding: 22px;
}

#restaurantInfo.restaurant-info-modal .image-logo {
    padding: 0;
    min-width: 0;
}

#restaurantInfo.restaurant-info-modal .image-logo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    background: #f6f6f6;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

#restaurantInfo.restaurant-info-modal .detial {
    min-width: 0;
    padding: 8px 0;
}

#restaurantInfo.restaurant-info-modal .detial h2 {
    margin: 0 0 14px;
    color: #171923;
    font-size: 1.35rem;
    line-height: 1.5;
}

#restaurantInfo.restaurant-info-modal .detial p {
    margin: 0 0 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #f8f9fb;
    color: #60646f;
    line-height: 1.8;
}

#restaurantInfo.restaurant-info-modal .map-div {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #eef1f4;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

#restaurantInfo.restaurant-info-modal .restaurant-map,
#restaurantInfo.restaurant-info-modal #mapRestLocation {
    height: 100% !important;
    min-height: 220px;
    border-radius: 18px;
    overflow: hidden;
}

#restaurantInfo.restaurant-info-modal .app-restaurant-reviews {
    max-width: none !important;
    margin: 0 22px 20px;
    padding: 18px !important;
    border: 1px solid #edf0f3;
    border-radius: 18px;
    background: #fbfbfc;
}

#restaurantInfo.restaurant-info-modal #comments {
    margin: 0 22px 24px;
}

/* Product modal: isolate Bootstrap modal from the theme's generic .modal rules */
#app_food_modal.food-detail-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-height: none !important;
    padding: 18px !important;
    transform: none !important;
    background: rgba(15, 23, 42, .58) !important;
    text-align: right !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1120 !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#app_food_modal.food-detail-modal .modal-dialog {
    width: min(900px, 100%);
    max-width: 900px;
    margin: 4vh auto;
}

#app_food_modal.food-detail-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .24);
}

#app_food_modal.food-detail-modal .food-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    border-bottom: 1px solid #eef0f3;
}

#app_food_modal.food-detail-modal .food-modal-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--var-color-orenge);
    font-size: .72rem;
    font-weight: 600;
}

#app_food_modal.food-detail-modal .food-modal-heading {
    margin: 0;
    color: #171923;
    font-size: 1.1rem;
    font-weight: 700;
}

#app_food_modal.food-detail-modal .modal-body {
    padding: 0;
}

#app_food_modal.food-detail-modal .food-detail {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
    gap: 0;
    padding: 0;
    border-radius: 0;
}

#app_food_modal.food-detail-modal .mySwiper {
    width: 100%;
    min-width: 0;
    min-height: 390px;
    padding: 18px;
    background: #f7f8fa;
}

#app_food_modal.food-detail-modal .mySwiper .swiper-slide {
    height: auto;
    border: 0;
}

#app_food_modal.food-detail-modal .mySwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 18px;
    margin: 0;
}

#app_food_modal.food-detail-modal .food-detail .detail {
    min-width: 0;
    padding: 28px;
    gap: 22px;
}

#app_food_modal.food-detail-modal .restauran-detail h3 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    line-height: 1.6;
}

#app_food_modal.food-detail-modal .restauran-detail h6 {
    display: inline-flex;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff3ee;
    color: var(--var-color-orenge);
    font-size: .8rem;
}

#app_food_modal.food-detail-modal .food-desc {
    padding: 15px 16px;
    border-radius: 16px;
    background: #f8f9fb;
}

#app_food_modal.food-detail-modal .food-desc p:first-child {
    margin: 0 0 7px;
    color: #20232b;
    font-weight: 700;
}

#app_food_modal.food-detail-modal .food-desc p:last-child {
    margin: 0;
    color: #686c76;
    line-height: 1.9;
}

#app_food_modal.food-detail-modal .price-and-Score {
    padding-top: 4px;
}

#app_food_modal.food-detail-modal .price-and-Score .price {
    margin: 18px 0 0;
    padding-top: 15px;
    border-top: 1px solid #eef0f3;
    color: var(--var-color-orenge);
    font-size: 1.15rem;
    font-weight: 800;
}

#app_food_modal.food-detail-modal .btn-add-favorit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 11px;
    background: #f8f9fb;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 800px) {
    #restaurantInfo.restaurant-info-modal {
        width: calc(100% - 20px);
        max-height: 92vh;
        border-radius: 18px;
    }

    #restaurantInfo.restaurant-info-modal .restaurant-info-header {
        padding: 14px 15px;
    }

    #restaurantInfo.restaurant-info-modal .map-div-row-flex {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    #restaurantInfo.restaurant-info-modal .map-div {
        grid-column: 1 / -1;
    }

    #restaurantInfo.restaurant-info-modal .restaurant-map,
    #restaurantInfo.restaurant-info-modal #mapRestLocation {
        min-height: 190px;
    }

    #restaurantInfo.restaurant-info-modal .app-restaurant-reviews,
    #restaurantInfo.restaurant-info-modal #comments {
        margin-left: 15px;
        margin-right: 15px;
    }

    #app_food_modal.food-detail-modal {
        padding: 10px !important;
    }

    #app_food_modal.food-detail-modal .modal-dialog {
        margin: 2vh auto;
    }

    #app_food_modal.food-detail-modal .food-detail {
        grid-template-columns: 1fr;
    }

    #app_food_modal.food-detail-modal .mySwiper {
        min-height: 260px;
        padding: 12px;
    }

    #app_food_modal.food-detail-modal .mySwiper .swiper-slide img {
        height: 250px;
    }

    #app_food_modal.food-detail-modal .food-detail .detail {
        padding: 20px 18px 24px;
    }
}

@media (max-width: 480px) {
    #restaurantInfo.restaurant-info-modal .map-div-row-flex {
        grid-template-columns: 1fr;
    }

    #restaurantInfo.restaurant-info-modal .image-logo {
        width: 96px;
    }

    #restaurantInfo.restaurant-info-modal .detial {
        padding-top: 0;
    }

    #app_food_modal.food-detail-modal .food-modal-header {
        padding: 14px 15px;
    }

    #app_food_modal.food-detail-modal .mySwiper .swiper-slide img {
        height: 220px;
    }
}