:root {    
    --main-bg-color: #005455;
    --secondary-clr: #F8B600;
    --main-clr: #632D1E;
    --bg-secondary: #FFFFF1;
    --text-subtitle-clr: #6F6A66;
    --color2: #DC2626;
    --border-clr: #E9E3DA;

}

p, h1, h2, h3, h4, h5, h6, ul li, a {color: var(--main-clr);}

.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;  
    font-style: normal;
}
* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;  
    font-style: normal;
}
a {text-decoration: none;}
/* Start header */
.header {
    position: sticky;
    top: 0;
    height: 81px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(243, 244, 246, 1);
    background-color: #fff;        
    z-index: 1000;
    transition: transform 0.35s ease;
    will-change: transform;

}
.header.header-hidden {
    transform: translateY(-100%);
}

.header.header-visible {
    transform: translateY(0);
}
.header .logo {max-height: 60px;}
.header nav ul li a {color: #6B7280;}
.header nav ul li a.active {color: var(--main-clr); font-weight: bold;}
.lang-dropdown .btn, .lang-dropdown .dropdown-item  {font-size: 14px;}
.lang-dropdown .btn{
    border: 1px solid #E5E7EB;
    background-color: transparent;
    border-radius: 20px;
    font-weight: bold;    
}
.lang-dropdown .btn.dropdown-toggle::after {display: none;}
.cart-btn, .reservation-btn {background-color: var(--main-clr); transition: all .2s ease-in-out; color: white;}
.user-dropdown .dropdown-toggle::after {display: none;}
header .logout-btn:hover, header .logout-btn:focus {
    background-color: var(--secondary-clr) !important; color: var(--main-clr) !important;
}
.lang-dropdown .dropdown-menu {min-width: 83px;}
.header-avatar-img {width: 36px; height: 36px; object-fit: cover; border-radius: 50%;}

.reservation-btn {padding: 11px 25px;}
.cart-btn:hover, .reservation-btn:hover {background-color: var(--secondary-clr); color: #000;}

.cart-btn path {transition: all .2s ease-in-out;}
.cart-btn:hover path {fill: #000;}

.orders-count {
    background-color: #F8B600;
    padding: 4px;
    height: 25px;
    width: 25px;
    min-width: 25px;
    font-size: 14px;
    color: #111111;
    transition: all .2s ease-in-out;
}
.cart-btn:hover .orders-count {background-color: #000; color: #fff;}

/* Start Home page */
.main-section {background-color: var(--bg-secondary);}
.main-section p.note{background-color: #fff}
.main-section h1 {font-size: 70px; color: var(--main-clr)}
.main-section h1 + p {font-size: 18px; color: #6B7280;}
.main-section .icon-wrap {
    width: 40px;
    height: 40px;    
}
.main-section .image-wrap {background-color: rgba(255, 184, 0, 0.2);}
.info-box {
    width: max-content;
    padding: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);    
}
.info-box.info-box-1 {
    top: 56px;
    left: -25px;
}
.info-box.info-box-2 {
    top: 150px;
    right: -25px;
}
.info-box.info-box-3 {
    bottom: -20px;
    left: 25px;
}
.info-box.info-box-3 .icon-wrap {background-color: var(--bg-secondary);}
.info-box div p:first-child {font-size: 12px;}
.info-box div p:last-child {font-size: 14px;}

.delivery-type-switcher {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 6px;
    width: max-content;
    position: relative;
}
.delivery-type-switcher > div input[type="radio"] {position: absolute; z-index: -1; opacity: 0;}
.delivery-type-switcher > div input[type="radio"] + label {
    min-width: 150px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
    color: #6B7280;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.delivery-type-switcher > div input[type="radio"]:checked + label,
.delivery-type-switcher > div input[type="radio"] + label:hover
{
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: var(--main-clr);
    font-weight: 600;
}
.delivery-type-switcher > div input[type="radio"] + label svg path {transition: all .3s ease-in-out;}
.delivery-type-switcher > div input[type="radio"]:checked + label svg path,
.delivery-type-switcher > div input[type="radio"] + label:hover svg path
 {stroke: var(--secondary-clr);}
.input-search-wrap {
    background-color: #F9FAFB;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.delivery-type-box {box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.1); padding: 24px 12px 12px 12px}

.input-search-wrap.is-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
    box-shadow: 0 0 0 1px #dc3545;
}

.address-autocomplete-input.is-invalid {
    outline: 2px solid #dc3545;
    outline-offset: 0;
    border-radius: 8px;
}

.input-search-wrap input {min-width: 314px;}
.input-search-wrap input:focus {border: none; outline: none;}
.input-search-wrap + button {
    height: 46px;
    border-radius: 12px;
    background-color: var(--main-clr);
    transition: all .2s ease-in-out;
    color: white;
}
.input-search-wrap + button:hover {
    background-color: var(--secondary-clr);
    color: #000;
}

.very-light-gray {background-color: #F7F7F7;}

.categories-slider .image-wrap img {width: 100%;}
.categories-slider .image-wrap{
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    height: 150px;
    overflow: hidden;    
}

.offers-section .offer-wrap{
    background-color: var(--main-clr);
    height: 323px;
}
.offers-section .offer-wrap img {height: 317px; object-fit: contain;}
.link-btn {
    background-color: white;
    color: var(--main-clr);
    padding: 12px 33px;
    border-radius: 10px;
}
.offers-section .note {background-color: var(--secondary-clr); font-size: 12px; padding: 5px;}
.offers-section .note + h3 {font-size: 36px;}
.offers-section .code{color: #EAF5F4; background-color: rgba(255, 255, 255, 0.2); padding: 5px 8px;}
.custom-link-btn {padding-block: 10px;}
.restaurants-home-page .btns-filter a {
    color: var(--main-clr);
    background-color: var(--bg-secondary);
    padding-block: 6px;
    transition: all .2s ease-in-out;
}

.restaurants-home-page .btns-filter a.active, .restaurants-home-page .btns-filter a:hover {
    color: white;
    background-color: #005455;    
}
.restaurant-card .gastro-logo {width: 40px !important;height: 40px;left: 20px;bottom: 20px}
.restaurant-card .favorit-wrap{left: 0;right: 0;top: 10px;}
.restaurant-card .favorit-wrap p   {background-color: #F7C933;}
.restaurant-card .favorit-wrap button {width: 32px;height: 32px;flex-shrink: 0;}
.restaurant-card .favorit-wrap .restaurant-status-actions {
    flex-wrap: nowrap;
    min-width: 0;
}
.restaurant-open-status {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 999px;
    padding: 5px 10px;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
.restaurant-open-status--open_now {background-color: #005455;}
.restaurant-open-status--opening_soon {background-color: #D97706;}
.restaurant-open-status--closed {background-color: #DC2626;}
.restaurant-card .rating-result {background-color: var(--bg-secondary);}
.filter-btn{
    padding:10px 20px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    background:#eee;
}
.filter-btn.active{background:#ff5722;color:#fff;}
.restaurant-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
    margin-bottom: 20px;
}
.restaurant-card img{width:100%;height:180px;object-fit:cover;}
.see-all-btn {
    color: var(--main-clr);
    border: 2px solid var(--main-clr);
    transition: all .2s ease-in-out;
}
.see-all-btn:hover {
    color: white;
    background-color: var(--main-clr);
}

.about-our-work {background-color: var(--bg-secondary);  }

.how-we-work .outer-wrap {width: 96px;height: 96px; background-color: var(--secondary-clr)}
.how-we-work .inner-wrap {
    width: 54px;
    height: 54px;
    background-color: #fff;
}
.dashed-curved-line {
    top: 36px;
    left: 50%;
    width: 73%;
    transform: translateX(-50%);
}

.fatures-rest-list li p {color: rgba(255, 255, 255, 0.8);}
.fatures-rest-list li p span {color: rgba(255, 255, 255, 0.5);}
.link-btn {transition: all .2s ease-in-out;}
.link-btn:hover {background-color: var(--secondary-clr); color: #fff}
.advantage-box {border: 1px solid rgba(233, 227, 218, 1);}


.search-res-section .content-wrap{max-width: 864px; min-height: 482px; height: auto; position: relative;}
.search-res-section h2 {font-size: 40px;}
.search-res-section .content-wrap::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-clr);
    z-index: -1;
}
.icon-wrap {
    width: 64px;
    height: 64px;
    background-color: rgba(247, 201, 51, 0.2);
}
.search-res-section button {background-color: var(--secondary-clr); color: var(--main-clr);}
.search-res-section button:hover {background-color: var(--main-clr); color: #fff}
.search-res-section .image-bg-wrap::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(99, 45, 30, 0) 0%, rgba(99, 45, 30, 1) 100%);
}
.search-res-section .lt-image-wrap::after {background: linear-gradient(90deg,  rgba(99, 45, 30, 1) 0%, rgba(99, 45, 30, 0) 100%);}
.search-res-section .note {
    color: rgba(234, 245, 244, 0.5);
 }

/* End Home page */

/* Start Restaurants Page */
.hero-section h1 {font-size: 60px;}
.hero-section img {width: 100%; max-width: 600px;}
.hero-section .description {font-size: 18px;}
.hero-section .info-box {left: -106px; top: -10px; bottom: auto;}
.hero-section .icon-wrap{background-color: var(--bg-secondary);width: 48px;height: 48px;}
.hero-section .info-box div p {font-size: 16px;}


/* Start Filters */
.form-filter-wrap {border: 1px solid rgba(233, 227, 218, 1);box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);}
.form-filter-wrap .border-right {border-right: 1px solid rgba(233, 227, 218, 1);}
/* .form-filter-wrap .first-input-wrap {width: 540px;} */
.form-filter-wrap .first-input-wrap {width: 100%;}
.form-filter-wrap .second-input-wrap {width: 256px;}
.form-filter-wrap button {
    padding: 12px 26px;
    transition: all .2s ease-in-out;
}
.form-filter-wrap input:focus {border: none; outline: none;}
.form-filter-wrap button:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr) !important;
}
.form-filter-wrap button svg path{transition: all .2s ease-in-out;}
.form-filter-wrap button:hover svg path {fill: var(--main-clr);}
.form-filter-wrap .select-option-wrap .ts-wrapper.single .ts-control,
.form-filter-wrap .select-option-wrap .ts-wrapper.single .ts-control input {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: var(--bg-secondary);
    padding-block: 12px;
    min-width: 260px;
}

/* Categories */
.categories-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
}


.categories-scroll{flex:1;overflow-x:auto;scroll-behavior:smooth;}
.categories-scroll::-webkit-scrollbar{display:none;}
.categories{display:flex;gap:12px;width:max-content;}
.category{
    border:1px solid var(--border-clr);
    background:white;
    color:#6B3425;
    padding:10px 24px;
    border-radius:30px;
    cursor:pointer;
    white-space:nowrap;
    transition:.3s;
}
.category:hover{border-color:#6B3425;}
.category.active{background:#6B3425;color:white;}
.category svg path {fill: var(--main-clr) ;transition:.3s;}
.category.active svg path {fill: #fff;}
.scroll-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    border:none;
    background:#FFF5DD;
    color:#6B3425;
    font-size:25px;
    cursor:pointer;    
}
/* Restaurants */
.restaurant-card{border:1px solid #eee;border-radius:16px;overflow:hidden;background:white;}
.restaurant-card img{width:100%;height:200px;object-fit:cover;}
.restaurant-info{padding:16px;}
.restaurant-info h3{margin:0 0 8px;}
.restaurant-info span{color:#777;}
.load-more{ /* Load More */
    display:block;
    margin:40px auto;
    padding:14px 35px;
    border:1px solid var(--main-clr);
    border-radius:30px;
    background:transparent;
    color:var(--main-clr);
    cursor:pointer;
    transition: .3s;
}
.load-more:hover {color: white;background-color: var(--main-clr);}
.load-more svg path {transition: .3s;}
.load-more:hover svg path {fill: white;}



.categories-sticky{
    position: sticky;
    top: 81px;
    z-index: 9;
    background: white;
}
.categories-sticky.fixed{box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border-radius: 0 0 10px 10px;}

ul.features-list li {
    background-color: transparent;
    padding-block: 0;
}
ul.features-list .feature-filter-btn {
    color: var(--main-clr);
    background-color: var(--bg-secondary);
    padding-block: 6px;
    border: none;
    transition: all .2s ease-in-out;
}
ul.features-list .feature-filter-btn.active,
ul.features-list .feature-filter-btn:hover {
    color: #fff;
    background-color: #005455;
}
#restaurants {
    scroll-margin-top: 170px; /* عدل الرقم حسب ارتفاع الهيدر والأزرار */
}

/* End Restaurants Page */

/* Start restaurant menu page */
.cover-page-section {
    background-size: cover;
    background-repeat: no-repeat;
    height: 320px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
    background-size: cover;    
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.cover-page-section::after {
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
}
.bread-crumb {column-gap: 30px;}
.bread-crumb li:not(:last-child) a svg {
    top: 50%;
    transform: translateY(-50%);
    right: -19px;


}
.bread-crumb li:last-child a svg {display: none;}
.gastro-logo-wrap {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    box-shadow: 0px 2px 16px -2px rgba(0, 0, 0, 0.08);
    margin-top: -50px;
    
}
.restaurant-info-section {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(243, 244, 246, 1);
}
.restaurant-info-section .restaurant-name {
    font-size: 30px;
}
.restaurant-info-section .verified, .verified {
    background-color: var(--bg-secondary);
    padding: 3px 9px;
    font-size: 12px;
}
.restaurant-info-section .rating-number{
    background-color: var(--main-clr);
    padding: 1px 10px;
    color: white;
    font-size: 12px;

}
.header-rating-stars {
    align-items: center;
}
.header-rating-star {
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 16px;
    line-height: 0;
}
.header-rating-star-fill {
    position: absolute;
    left: 0;
    top: 0;
}
.restaurant-info-section .about-us-ntn {
    border: 2px solid var(--main-clr);
    padding: 11px 25px;
    background-color: transparent;
    transition: .3s;
}
.restaurant-info-section .about-us-ntn:hover {background-color: var(--main-clr);color: #fff;}
.restaurant-info-section .about-us-ntn svg path{transition: .3s;}
.restaurant-info-section .about-us-ntn:hover svg path {fill: #fff;}

.menu-section {
    background-color: var(--bg-secondary);
}

.custom-card {

    background: rgb(255, 255, 255);
    box-shadow: 0px 2px 16px -2px rgba(0, 0, 0, 0.08);
    border-radius: 16px;

   
}
.search-input-wrap {
    background-color: var(--bg-secondary);
}
.search-input-wrap input {padding: 2px 0px;}
.search-input-wrap input:focus {border: none; outline: none;}


.restaurant-filters-btns .category {
    padding: 7px 17px
}
.restaurant-filters-btns .categories{width: auto;}

.food-card{

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

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;
    min-height: 170px;
    cursor: pointer;
}

.food-card:hover{transform:translateY(-3px);}

.food-info{padding:20px; flex:1;}

.food-info h4{
    font-size: 16px;
    font-weight:bold;
    color: var(--main-clr);
}

.food-info p{color:#777;font-size: 12px;}

.food-image{
    height: 100%;
    width:112px;
    object-fit: cover;
}

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

.addBtn{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#6B341D;
    color:#fff;
    font-size:25px;
}
.category.active{background:#6B341D;color:white;}
#categoryTitle {text-transform: capitalize; font-size: 20px;}
.classification-type {
    background-color: #EDF5EA;
    color: #2A6049;
    font-size: 12px;
    width: max-content;
    padding: 1px 14px;
}
.meal-diet-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.meal-diet-icons:empty {
    display: none;
    margin-bottom: 0;
}
.meal-diet-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}
.meal-diet-badge.vegetarian {
    background-color: #EDF5EA;
    color: #2A6049;
}
.meal-diet-badge.vegan {
    background-color: #E8F5E9;
    color: #1B5E20;
}
.meal-diet-badge.spicy {
    background-color: #FFEDD5;
    color: #C2410C;
}
.discount-price {color: #9CA3AF; font-size: 12px;}
.restaurant-information {
    border: 1px solid var(--border-clr);
    box-shadow: 0px 2px 16px -2px rgba(0, 0, 0, 0.08);
    padding: 16px 0px 0px;
    border-radius: 16px;
}
#about-us {scroll-margin-top: 110px;}
.required-option-block.is-invalid .option-card {
    border-color: #dc3545;
}
.required-option-block .required-error {
    display: none;
    color: #dc3545;
    font-size: 12px;
    margin-top: 8px;
}
.required-option-block.is-invalid .required-error {
    display: block;
}
.required-option-block.is-invalid .d-flex.gap-2 h5,
.required-option-block.is-invalid .required-badge-text {
    color: #dc3545;
}
#mealUnavailableWrap .required-error {
    display: none;
    color: #dc3545;
    font-size: 12px;
    margin-top: 8px;
}
#mealUnavailableWrap.is-invalid .required-error {
    display: block;
}
#mealUnavailableWrap.is-invalid .ts-control {
    border-color: #dc3545;
}
#mealUnavailableWrap select.ts-hidden-accessible,
#mealUnavailableWrap select.tomselected {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body > .ts-dropdown {
    z-index: 2000;
}
.info-btns {border-bottom: 1px solid var(--border-clr); display: flex; overflow-x: auto;}
.info-btns button {color: var(--main-clr); white-space: nowrap; flex-shrink: 0;}
.info-btns button.active {border-bottom: 2px solid var(--main-clr) !important; font-weight: 600;}
.restaurant-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
}
.restaurant-review-item {
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    padding: 14px;
}
.restaurant-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.restaurant-review-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F5F0E8;
    color: var(--main-clr);
    font-weight: 600;
    font-size: 14px;
}
.review-stars {
    color: #E9E3DA;
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 1;
}
.review-stars .is-filled {color: #F7C933;}

.tabs-container .tab {display:none;}
.tabs-container .tab.active-tab {display:block;}

/* Start aside page */
.if-offer-box {
    border-radius: 16px 16px 0 0;
}
.if-offer-box img {width: 56px; height: 56px; object-fit: cover; border-radius: 12px;}
.offer-details p:first-child{background-color: #E11D48; font-size: 10px; padding: 2px 7px;}
.offer-details p:last-child{color: #4B5563; font-size: 11px;}
.if-offer-box .price span:last-child {text-decoration: line-through; font-size: 12px;}

.cart-order-type {
    background-color: var(--bg-secondary);
    border-radius: 16px 16px 0 0;
}
.cart-order-type .delivery-type-switcher {
    width: 100%;
    background-color: #fff;
}
.cart-order-type .delivery-type-switcher > div input[type="radio"] + label {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cart-order-address-btn {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.cart-order-address-btn:hover #cartOrderAddressText {
    text-decoration: underline;
}

.aside-cart-list .aside-cart-list h5{font-size: 18px; color: #111827;}
.aside-cart-list .cart-list li:not(:last-child){ margin-bottom: 12px;}
.counter-btn {
    width: 24px;
    height: 24px;
    background-color: var(--main-clr);
    border: none;
    
}
.counter-btn.minus-btn {
    border: 1px solid #E5E7EB;
    background-color: transparent;
}
.aside-cart-list .cart-list li img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 12px;
    flex-shrink: 0;
    object-fit: cover;
}

.aside-cart-list .cart-list li input {width: 27px;}
.aside-cart-list .cart-list li input:focus {outline: none; }
.aside-cart-list .cart-list li .meal-price{color: #111827; min-width: 60px;}
.aside-cart-list .meal-name p:first-child{color: #111827; }
.aside-cart-list .meal-name p:last-child{color: #9CA3AF; font-size: 12px;}

.promo-code .input-code-wrap {
    border: 1px solid var(--main-clr);
    width: 244px;
    height: 41px;
    background: #FFFFFF;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
}
.promo-code .input-code-wrap input {padding-left: 22px;}
.promo-code .input-code-wrap input:focus {border: none; outline: none;}
.promo-code .input-code-wrap svg {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.promo-code button {height: 41px; padding-inline: 31px;}

.cost-box {
    border-bottom: 1px solid #F3F4F6;
    border-top: 1px solid #F3F4F6;
}
.cost-box .cart-discount-row p {
    color: #2A6049;
}
.to-checkout-btn {
    background-color: var(--main-clr);
    color: #fff;
    width: 100%;
    border: none;
    outline: none;
    padding: 16px;
    border-radius: 12px;
    transition: .3s;
}
.to-checkout-btn:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr)
}
.to-checkout-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.to-checkout-btn svg path {transition: .3s;}
.to-checkout-btn:hover svg path {fill: var(--main-clr);}

.delivery-cost .min-order-track {
    height: 8px;
    background-color: var(--border-clr);
    overflow: hidden;
}
.delivery-cost .min-order-fill {
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

.sticky-box {position: sticky; top: 100px;}
.sticky-box.for-fixed-with-scroll{top: 0;}


                                /* Start Modal meal details */

.meal-details-modal p.offer {background-color: var(--secondary-clr); padding: 4px 10px;}
.meal-details-modal p.offer + p {background-color: rgba(247, 201, 51, 0.2); border: 1px solid var(--secondary-clr); padding: 3px 13px;}

.meal-details-modal .meal-image {width: 200px; max-height: 150px;}

.option-card{
    padding:18px 20px;
    border:1.5px solid transparent;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
    background: #FBF9F9;
    color: var(--text-subtitle-clr)
}

.custom-radio{
    width:24px;
    height:24px;
    border:2px solid #8B5A3C;
    border-radius:50%;
    position:relative;
    flex-shrink:0;
}

.custom-radio::after{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    background:#8B5A3C;
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0);
    transition:.25s;
}

.btn-check:checked + .option-card{
    border-color:var(--main-clr);
    background:#FFF9EF;
    color: var(--main-clr);
}

.btn-check:checked + .option-card .custom-radio::after{
    transform:translate(-50%, -50%) scale(1);
}

.option-card:hover{
    border-color:#8B5A3C;
}

.notes-title{
    color:#6A3828;
    font-weight:700;
    font-size:2rem;
}

.notes-subtitle{
    color:#767676;
    font-size:1.5rem;
}

.notes-textarea{
    min-height:96px !important;
    border:1px solid var(--border-clr);
    border-radius:12px;
    padding:16px;    
    resize:none;
    box-shadow:none !important;
    background-color: #FBF9F9;
    font-size: 14px !important;
}
.notes-textarea::placeholder{color:var(--text-subtitle-clr);}
.notes-textarea:focus{
    border-color:#8B5A3C;
}
.notes-counter{
    position:absolute;
    right: 23px;
    bottom: 8px;
    color:#707070;
    font-size:12px
}
#mealDetailsModal .section-title{
    color:var(--main-clr);    
    font-weight:700;
}

.optional-badge{
    font-size:.9rem;
    font-weight:700;
    color:#6F6A66;
    letter-spacing:.5px;
    text-transform: capitalize;
    padding: 2px 6px;
    
}

.ingredient-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:24px 26px;
    background: #FBF9F9;
    border:1px solid transparent;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

.custom-checkbox{
    width:20px;
    height:20px;
    border:2px solid #78716C;
    border-radius:6px;
    position:relative;
    flex-shrink:0;
}

.custom-checkbox::after{
    content:"✓";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    color:#fff;
    font-size:13px;
    font-weight:bold;
    transition:.2s;
}

.btn-check:checked + .ingredient-card{
    border-color:var(--main-clr);
    background:#FFF8EC;
}

.btn-check:checked + .ingredient-card .custom-checkbox{
    background:#7A3D2C;
    border-color:var(--main-clr);
}

.btn-check:checked + .ingredient-card .custom-checkbox::after{
    transform:translate(-50%,-50%) scale(1);
}

.ingredient-name, .ingredient-price{
    
    font-weight:600;
    color: var(--text-subtitle-clr);
}

.show-more-btn{

    width:100%;

    padding:20px;

    background:#fff;

    border:1px solid var(--border-clr);
    border-radius:12px;    
    font-weight:700;
    color:var(--main-clr);

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    transition:.25s;
}

.show-more-btn:hover{

    border-color:#7A3D2C;
}
#mealDetailsModal .ts-control {padding: .86rem .75rem; background-color: #FBF9F9; border-radius: 12px; border: 1px solid var(--border-clr)}
#mealDetailsModal .focus .ts-control {border-color: var(--main-clr); box-shadow: 0 0 0 .25rem #632d1e33;}
#mealDetailsModal .counter-wrap input  {width: 27px;}
#mealDetailsModal .counter-wrap  {border: 1px solid var(--border-clr); padding-inline: 17px; max-height: 48px;}
#mealDetailsModal .minus-btn + input {width: 40px;}
#mealDetailsModal .minus-btn + input:focus {border: none; outline: none;}
#mealDetailsModal .counter-btn {height: 46px;}
.modal-meal-btn {background-color: #642e1f; border-radius: 12px; padding: 14px 38px; transition: .2s;}
.modal-meal-btn:hover {background-color: var(--secondary-clr); }
.modal-meal-btn:hover span {color: var(--main-clr) !important}
.modal-meal-btn svg path, .modal-meal-btn svg rect, .modal-meal-btn span {transition: .2s;}
.modal-meal-btn:hover svg path {fill: var(--main-clr);}
.modal-meal-btn:hover svg rect {stroke: var(--main-clr);}
#mealDetailsModal .modal-content{border-radius: 14px;}








                                        /* End Modal meal details */
                                        /* Start reservation modal */
#reservationModal .modal-content {background-color: var(--bg-secondary);}
.num-of-persons {padding-right: 45px;}
.input-user-icon {top: 50%; transform: translateY(-50%); right: 15px;}

.attention-note {
    background-color: rgba(255, 184, 0, 0.2);
    padding: 10px 15px;
    border-radius: 12px;
    
    
}
.attention-note svg {width: 30px; height: 30px;}

                                        /* End reservation modal */

/* Test code for restaurant page categories */
.restaurant-filters-btns {
    position: relative;
    width: 100%;
}

.restaurant-filters-btns .categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 4px 1px;
}

.restaurant-filters-btns .categories::-webkit-scrollbar {display: none;}

.restaurant-filters-btns .category {flex: 0 0 auto;}

/* Arrows */

.category-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition:
    opacity .2s ease,
    visibility .2s ease;
}
.category-scroll-prev {left: 0;}
.category-scroll-next {right: 0;}
.category-scroll-arrow.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Sections */

.menu-category-section {scroll-margin-top: 185px;}
.menu-category-section + .menu-category-section {margin-top: 50px;}
.category-sticky-btns {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    width: 100%;
    background: #fff;
}
.veggi {background-color: #EDF5EA;}
.discount-label {background-color: #E11D48; color: #fff !important}
.spicy-label {background-color: #FFEDD5; color: #C2410C !important}
.popular-label {background-color: #FEF9C3; color: #A16207 !important}

#infoModal .close-modal {
    background-color: rgba(249, 250, 251, 1);
}
#infoModal .meal-image-info {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 12px;
}
#infoModal .name-info, #infoModal .price-info {
    font-size: 24px;
}

#infoModal .description-text {
    background-color: rgba(249, 247, 242, 1);
    border: 1px solid rgba(232, 225, 213, 1);
    padding: 15px 16px;
    border-radius: 12px;
    font-size: 15px;
}
#infoModal .modal-footer{
    background-color: rgba(249, 250, 251, 1);
    border-color: rgba(243, 244, 246, 1);
}
.allergens-list li p {
    border: 1px solid rgba(229, 231, 235, 1);
}
.allergens-list .allergen-desc,
#infoModal .additive-desc {
    border: 0;
    line-height: 1.45;
}

/* End restaurant menu page */

/* Start signup page */
.sign-up-text h1 {font-size: 30px;}
.sign-up-text h1 {font-size: 30px;}
.custom-input .input-icon {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

} 
.custom-input input {
    background: #FFFFFF;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    padding-left: 34px;
    padding-block: 15px;
}
.custom-input select.form-control,
.custom-input select.form-select {
    background-color: #FFFFFF;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    padding-block: 15px;
    height: auto;
    min-height: 54px;
}
.form-control:focus {
    border-color: var(--main-clr) !important;
    box-shadow: 0 0 0 .25rem rgba(99, 45, 30, .2)

}
.custom-input .eye-icon {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.form-check-input[type=checkbox]{
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-clr);
    border-radius: 6px;
}
.form-check-input:checked {background-color: var(--main-clr)}
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(99, 45, 30, .2)    
}
.recaptcha-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.p-divider .line {
    
    background-color: #E5E7EB;
    display: block;
    height: 1px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.social-media-login a {
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    width: 50%;
    height: 56px;
    color: var(--main-clr);
    transition: .2s;
}
.social-media-login a:hover {
    background-color: var(--main-clr);
    color: #fff;
}
.social-media-login a svg path{transition: .2s;}
.social-media-login a:hover svg path {fill: #fff;}
.signup-image {border-radius: 20px;}
/* End signup page */

/* Start profile page */
.profile-page h1 {font-size: 36px;}
.avatar-wrap {
    width: 80px;
    height: 80px;    
    background-color: var(--secondary-clr);   
}
.avatar-wrap p {font-size: 24px;}
.avatar-name-user p.user-name {font-size: 20px;}

.profile-tabs-list li a  {
    color: var(--text-subtitle-clr);
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: .2s;
}
.profile-tabs-list li.active a, .profile-tabs-list li a:hover  {
    color: var(--main-clr);
    font-weight: bold;
    background-color: #FFFDF2;
    border-left: 4px solid var(--main-clr);
}
.profile-tabs-list li a svg path {transition: .2s;}
.profile-tabs-list li.active a svg path {fill: var(--main-clr);}
.tabs-list-wrap {border-bottom: 1px solid var(--border-clr); border-top: 1px solid var(--border-clr);}

.tab{display: none;}
.tab.active{display: block;}
.profile-cards {border: 1px solid var(--border-clr)}

.edit-info-btn {
    background-color: #FFFDF2;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    padding: 10px 20px
}
.user-general-box-info p.title {
    font-size: 12px;
}
.user-general-box-info p.title + p {
    font-size: 18px;
}
.verified-email {
    background-color: rgba(42, 96, 73, 0.1);
    color: rgba(42, 96, 73, 1);
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
}

.box-edit-info  {
    border: 1px solid var(--main-clr);

}
.box-edit-info .borderd-word {
    top: -12px;
    left: 30px;
    background-color: var(--main-clr);
    padding: 4px 13px;
    font-size: 10px;   
}
.box-edit-info form input {background-color: #FFFDF2;} 
.btns-wrap button,
.btns-wrap a {
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btns-wrap > button:first-child,
.btns-wrap > a:first-child {
    border: 1px solid var(--border-clr);
    background-color: transparent;
    color: var(--text-subtitle-clr);
    padding: 15px 33px;
}
.btns-wrap > button:last-child,
.btns-wrap > a:last-child {
    color: white !important;
    background-color: var(--main-clr);
    padding: 15px 33px;
}
.change-password-btn {padding: 11px 22px}
.alert-svg {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: #FEF2F2;

}
.delete-account-modal button, .delete-address-modal button, .add-address-modal button, .replace-cart-modal button, .change-password-modal button {padding: 15px 10px; border-radius: 12px;}
.delete-account-modal button.confirm-btn, .delete-address-modal button.confirm-btn {
    background-color: var(--color2);
    color: #fff;    
    border: none;
}

.delete-account-modal button.close-btn, .delete-address-modal button.close-btn, .add-address-modal button.close-btn, .replace-cart-modal button.close-btn, .change-password-modal button.close-btn{
    background-color: #FFFDF2;
    color: var(--main-clr);
    border: 1px solid var(--border-clr)
}
.delete-account-modal .modal-content, .delete-address-modal .modal-content, .add-address-modal .modal-content, .replace-cart-modal .modal-content, .change-password-modal .modal-content {
    border-radius: 32px;
}
.replace-cart-modal {
    z-index: 1065;
}
body:has(#replaceCartModal.show) .modal-backdrop:last-of-type {
    z-index: 1060;
}
.replace-cart-modal .confirm-btn {
    background-color: var(--main-clr);
    color: #fff;
    border: none;
}
.replace-cart-modal .confirm-btn:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr);
}
.closed-hours-modal .closed-hours-search-link {
    color: var(--main-clr);
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 8px 10px;
}
.closed-hours-modal .closed-hours-search-link:hover {
    color: var(--secondary-clr);
}
.closed-hours-modal .btn.confirm-btn {
    padding: 15px 10px;
    border-radius: 12px;
}
.delivery-out-of-range-modal {
    z-index: 1070;
}
body:has(#deliveryOutOfRangeModal.show) .modal-backdrop:last-of-type {
    z-index: 1065;
}
.close-modal {
    width: 40px;
    height: 40px;
    border: 1px solid #E5E7EB;
}
/* Start orders tab in profile page */
.active-order {border-color: var(--secondary-clr); border-top-width: 4px;}
.active-order h4{font-size: 20px;}
.active-order .price + p {
    background-color: #F9FFF2;
    border: 1px solid var(--secondary-clr);
    padding: 4px 15px;
    font-size: 12px;
}

.active-order .icon-wrap {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 2px solid var(--border-clr);
    background: #FFFFFF;
    isolation: isolate;
    box-shadow: 0 0 0px 8px var(--bg-secondary)
}
.icon-wrap svg path{fill: var(--main-clr);}
.main-section .icon-wrap svg path{fill: white;}
.order-progress > div.step {width: 25%;}
.order-progress .line {width: 100%; height: 2px; background-color: var(--border-clr); top: 20px; left: 0;}
.order-progress .step p {color: var(--text-subtitle-clr);}
.order-progress .step::after, .order-progress .step::before {
    content: '';
    display: block;
    height: 2px;
    width: 50%;
    background-color: var(--border-clr);;
    position: absolute;
    top: 20px;
    left: 50%;
}
.order-progress .step::before {    
    background-color: var(--border-clr);;    
    right: 50%;
    left: auto;
}
.order-progress .step.active .step-label, .order-progress .step.complete .step-label {color: var(--main-clr);}
.order-progress .step .step-time {color: var(--text-subtitle-clr); font-weight: 400; margin-top: 2px;}
.order-progress .step-copy {min-width: 0;}
.order-progress .step.active::before  {background-color: var(--secondary-clr);}
.order-progress .step.active  .icon-wrap {border-color: var(--secondary-clr);}
.order-progress .step.active  .icon-wrap svg path { fill: var(--secondary-clr);}
.order-progress .step.complete::before, .order-progress .step.complete::after {
    background-color: var(--secondary-clr);
}

.order-progress .step.complete .icon-wrap {background-color: var(--secondary-clr); border: 1px solid var(--secondary-clr);}
.order-progress .step.complete .icon-wrap svg path {fill: #fff;}

.order-progress .step:first-child::before, .order-progress .step:last-child::after {
    display: none ;
}

.active-order-btns {
    border: 1px solid var(--border-clr);
    background-color: #FFFDF2;
}
.active-order-btns .order-cancel-btn {
    border: 1px solid var(--border-clr);
    background-color: #fff;
    color: var(--main-clr) !important;
    padding: 15px 33px;
}
.active-order-btns .order-track-btn {
    color: #fff !important;
    background-color: var(--main-clr);
    border: 0;
    padding: 15px 33px;
}
.active-order-btns .order-map-track-icon {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background-color: var(--main-clr);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.active-order-btns .order-map-track-icon svg path {
    fill: #fff;
}
.btns-wrap button, .btns-wrap button svg path,
.btns-wrap a, .btns-wrap a svg path {transition: .3s;}
.btns-wrap button.filled:hover,
.btns-wrap a.filled:hover,
.btns-wrap > a:last-child:hover {background-color: var(--secondary-clr); color: var(--main-clr) !important;}
.btns-wrap button.filled:hover svg path,
.btns-wrap a.filled:hover svg path,
.btns-wrap > a:last-child:hover svg path {fill: var(--main-clr);}
.orders-list .order-image {
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-clr);

}
.orders-list .order:not(:last-child) {margin-bottom: 40px;}
.orders-list .order {border: 1px solid var(--border-clr);}

.reorder-btn {
    background-color: #fff;
    color: var(--main-clr);
    border: 1px solid var(--border-clr);
    padding: 12px 12px;
}
.details-order-btn {
    background-color: #FFFDF2;
    color: var(--main-clr);
    border: 1px solid var(--border-clr);
    padding: 12px 16px
    
}
.orders-list form {display: contents;}
.orders-list .details-order-btn,
.orders-list .reorder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border-radius: 12px;
}
.order-status {padding: 4px 13px;}
.order-status.complete {
    background-color: #F0F9F4;
    border: 1px solid var(--border-clr);
}
.order-status.cancelled {
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
}
.orders-tab .empty-box-wrap {min-height: 280px;}
.orders-tab .empty-box .icon-wrap {
    width: 128px;
    height: 128px;
    background-color: #FEF9E6;
    border: 4px solid rgba(255, 184, 0, 0.2);
}

/* End orders tab in profile page */

/* Start address tab in profile page */
.empty-box {max-width: 400px; }
.address-tab .empty-box-wrap {min-height: 280px;}
.address-tab .icon-wrap {
    width: 128px;
    height: 128px;
    background-color: #FEF9E6;
    border: 4px solid rgba(255, 184, 0, 0.2);
}
.icon-wrap.restaurants-food{
    border-style: dashed;
    border-color: rgba(115, 51, 33, 0.2);
    width: 128px;
    height: 128px;
}
.address-box {
    border: 1px solid var(--border-clr);
    border-radius: 15px;    
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    padding: 15px;

}
.address-box input[type="radio"] {display: none; opacity: 0; position: absolute; z-index: -2;}
.address-box .custom-shape-input {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--secondary-clr);
}
.address-box .custom-shape-input::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--secondary-clr);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: .2s;
}
.address-box input[type="radio"]:checked + label .custom-shape-input::after {    
    transform: translate(-50%, -50%) scale(1);    
}
.address-box input[type="radio"]:checked + label svg path {fill: var(--secondary-clr);}
.address-box .for-main-address-label {background-color: var(--secondary-clr);padding: 2px 7px;}
.for-main-address-label {display: none;}
.address-box input[type="radio"]:checked + label .for-main-address-label {display: block;}

.address-box .icon-circle {
    width: 48px;
    height: 48px;
    border: 1px solid var(--secondary-clr);
    background-color: #FFFDF2;
}

.location-btn {
    right: 0;
    top: 0;
    height: 100%;
    border: none;
    background-color: var(--main-clr);
    color: #fff;
    border-radius: 0 12px 12px 0 !important;
    
    transition: .2s;
}
.location-btn:hover {background-color: var(--secondary-clr); color: var(--main-clr);}
.location-btn svg path {transition: .2s;}
.location-btn:hover svg path {fill: var(--main-clr);}
.client-address-input {padding-right: 112px;}
.change-password-modal button.confirm-btn {
    background-color: var(--main-clr);
    color: #fff;
    border: none;
}
.add-address-modal button.confirm-btn:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr);
}
#deliveryAddressModal .modal-header {cursor: default;}
.map-wrap {display: none; border: 1px solid var(--border-clr); border-radius: 12px;}

/* End address tab in profile page */

/* Start Favorit tab */
.nav-tabs .nav-item .nav-link, .nav-tabs .nav-link {
    color: var(--text-subtitle-clr);
    border: none;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {border-color: transparent;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: none;
    background-color: transparent;
    border-bottom: 2px solid var(--secondary-clr);

}
.fav-food {
    width: 32px;
    height: 32px;
    position: absolute;
    background: var(--bg-secondary);
    right: 16.67px;
    top: 11px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

/* End Favorit tab */


/* End profile page */

/* Start order page */
.order-page .order-progress .step:last-child:after, .order-page .order-progress .step:first-child:before {display: block;}
.order-page .order-progress .icon-wrap {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 2px solid var(--border-clr);
    background: #FFFFFF;
    isolation: isolate;
    box-shadow: 0 0 0px 8px var(--bg-secondary)
}
.order-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;

}
.order-items-list .order-item {padding-block: 24px;}
.order-items-list .order-item .item-name {font-size: 18px;}
.order-items-list .order-item:not(:last-child) {border-bottom: 1px solid var(--border-clr);}
.order-note {
    border-radius: 12px;

}
.pickup-information .address-line-1{font-size: 18px;}
.show-res-btn {
    border: 1px solid var(--border-clr);
    border-radius: 8px;
    padding: 12px 50px;
    background-color: #fff;
    color: var(--main-clr);
}
.paid {background-color: #F0F9F4; border: 1px solid var(--border-clr); padding: 4px 9px;}
.total-amount {padding: 20px 0; border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr); font-size: 18px;}

.order-details-btns button,
.order-details-btns .btn-reorder {
    padding-block: 16px;
    border-radius: 12px;
    width: 100%;
    background-color: var(--main-clr);
    color: #fff;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.order-details-btns .order-map-track-btn svg path {
    fill: #fff;
}

/* End order page */

/* Start checkout pages */
.checkout-pregress {max-width: 800px; margin: auto;}
.checkout-pregress .step-name { max-width: 140px; margin-left: auto; margin-right: auto; }
.checkout-pregress .step .icon-wrap {
    background-color: transparent;
    border: 2px solid var(--border-clr);
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}
.checkout-pregress .step .icon-wrap svg path {fill: var(--text-subtitle-clr);}
.checkout-pregress .step.complete .icon-wrap {
    border-color: var(--secondary-clr);
}
.checkout-pregress .step.complete .icon-wrap svg path {fill: var(--secondary-clr);}
.checkout-pregress .step.complete .step-name {color: var(--secondary-clr);}
.checkout-pregress .step.active .icon-wrap {
    border-color: var(--main-clr);
    background-color: var(--main-clr);
}
.checkout-pregress .step.active .icon-wrap svg path {fill: #fff;}
.checkout-pregress .step .icon-wrap svg.true-icon, .checkout-pregress .step.complete .icon-wrap svg.step-icon {display: none;}
.checkout-pregress .step.complete .icon-wrap svg.true-icon {display: block;}

.checkout-pregress .line {width: 170px; height: 2px; background-color: var(--border-clr); margin-bottom: 1.5rem;}

.card-title {font-size: 20px;}
.contact-info .info-box-checkout {min-height: 91px;}
.address-box-checkout {
    border: 2px solid var(--main-clr);
    background-color: rgba(255, 249, 230, 1);
    padding: 17px;
    border-radius: 12px;
}
.address-edit-btn {
    top: 0;
    right: 0;
    border-top-right-radius: 9px;
    background-color: var(--main-clr);
    width: 35px;
    height: 35px;
}
.address-edit-btn svg {stroke: #fff;}
 .address-edit-btn:hover {background-color: var(--secondary-clr);}
 .address-edit-btn:hover svg {stroke: var(--main-clr);}
.new-address-wrap { border: 1px solid var(--border-clr);border-radius: 12px;}
.new-address-wrap button {padding: 10px;}
.new-address-wrap .plus{
    border-radius: 12px;
    padding: 10px;
    width: 30px;
    height: 30px;
}
.new-address-wrap:hover .plus {background-color: var(--secondary-clr); }
.new-address-wrap:hover .plus svg path {fill: var(--main-clr); }
.text-area-checkout {
    height: 100px;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
}
#select-wrap .ts-control {
    padding: .86rem .75rem;
    background-color: #FBF9F9;
    border-radius: 12px;
    border: 1px solid var(--border-clr);
}
#select-wrap.select-option-wrap {
    display: none;
}
#select-wrap.select-option-wrap.show {display: block;}
#select-wrap.select-option-wrap.show .ts-control {
    border-color: var(--secondary-clr);
}
#select-wrap .ts-wrapper.single .ts-control {
    min-height: 52px;
    display: flex;
    align-items: center;
}
#select-wrap .ts-wrapper.plugin-dropdown_input .dropdown-input,
#select-wrap .ts-control input {
    display: none !important;
}
#select-wrap .ts-wrapper.is-invalid .ts-control {
    border-color: #dc3545;
}
#select-wrap .ts-wrapper .ts-control .item[data-value=""] {
    color: #6F6A66;
}
.submit-checkout-btn {color: white;padding: 15px 16px;border-radius: 12px;white-space: nowrap;}
.submit-checkout-btn .arrow {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 1px solid white;
    flex-shrink: 0;
}
.submit-checkout-btn:hover {background-color: var(--secondary-clr); color: var(--main-clr);}
.submit-checkout-btn:hover span {color: var(--main-clr);}
.submit-checkout-btn:hover svg path {fill: var(--main-clr);}
.submit-checkout-btn:hover .arrow {border-color: var(--main-clr);}
.checkout-checkbox .ingredient-card {
    padding: 0;
    border: none;
    background-color: transparent;
}
.checkout-checkbox .btn-check:checked + .ingredient-card {border: none;background: transparent;}

.estimated-time {
    border: 1px solid rgba(255, 184, 0, 0.3);
    background-color: rgba(255, 184, 0, 0.1);
    color: var(--main-clr);
    padding: 21px 10px;
    border-radius: 12px;
}
.estimated-time .icon-time-wrap {
    width: 40px;
    height: 40px;
    background-color: var(--secondary-clr);
}
.estimated-time > div p:first-child {font-size: 13px;}
.estimated-time > div p:last-child {font-size: 20px;}

.payment-list li svg path{fill: var(--text-subtitle-clr);}
.contact-center-link:hover {
    color: var(--secondary-clr)
}

.address-type-box label {
    height: 91px;
    border: 1px solid var(--border-clr);
    border-radius: 16px;
}
.address-type-box label svg path {fill: var(--text-subtitle-clr);}
.address-type-box input[type="radio"]:checked + label {
    border-color: var(--main-clr);
    background-color: rgba(255, 249, 230, 1);
}
.address-type-box input[type="radio"]:checked + label svg path {fill: var(--main-clr);}

.address-type-box input {position: absolute; z-index: -2; opacity: 0; display: none;}

                                /******** Start payment *********/
.custom-radio-payment input[type="radio"] {display: none; opacity: 0; position: absolute; z-index: -2;}
.custom-radio-payment label {
    border: 2px solid var(--border-clr);
    border-radius: 16px;
    height: 84px;
    padding-inline: 20px;
}
.custom-radio-payment input[type="radio"]:checked + label {border-color: var(--main-clr); background-color: rgba(255, 249, 230, 1);}
.custom-radio-payment.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.custom-radio-payment.is-disabled label {
    cursor: not-allowed;
    background-color: #f4f4f4;
}
.custom-radio-payment label .ring {
    border: 2px solid var(--border-clr);
    width: 24px;
    height: 24px;
    min-width: 24px; 
}
.custom-radio-payment label .ring::after{
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--secondary-clr);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;    
}
.custom-radio-payment input[type="radio"]:checked + label .ring::after {
    transform: translate(-50%, -50%) scale(1);
}
.custom-radio-payment .payment-method-icon {
    border: 1px solid var(--border-clr);
    border-radius: 8px;    
    box-sizing: border-box;    
    display: flex;
    padding: 11.5px 8px 12.5px;
    width: 31px;
    height: 44px;
    background: #FFFFFF;
}

#credit_card + label .payment-method-icon {
    width: 48px;
    height: 40px;
    padding: 8px;
    
}
.custom-radio-payment input[type="radio"]:checked + label svg path {fill: var(--main-clr);}
.checkout-payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.checkout-steps {
    position: relative;
}
.checkout-payment-option {
    width: 100%;
    border: 2px solid var(--border-clr);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.checkout-payment-option.is-open,
.checkout-payment-option:has(input[name="payment_type"]:checked) {
    border-color: var(--main-clr);
    background-color: rgba(255, 249, 230, 1);
}
.checkout-payment-option .custom-radio-payment,
.checkout-payment-option .custom-radio-payment label {
    width: 100%;
}
.checkout-payment-option .custom-radio-payment label {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: 72px;
}
.checkout-payment-option .custom-radio-payment input[type="radio"]:checked + label {
    border-color: transparent !important;
    background-color: transparent !important;
}
.checkout-card-panel {
    border: 0;
    padding: 0 20px 20px;
    background: transparent;
}
.checkout-card-panel .row {
    margin-left: 0;
    margin-right: 0;
}
.checkout-card-panel .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}
.checkout-card-panel .row > [class*="col-"]:first-child {
    padding-left: 0;
}
.checkout-card-panel .row > [class*="col-"]:last-child {
    padding-right: 0;
}
.checkout-payment-actions {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkout-payment-hint {
    color: #6F6A66;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: rgba(243, 244, 246, 0.5);
}
.checkout-payment-actions .submit-checkout-btn {
    width: 100%;
    margin: 0;
}
.checkout-payment-actions + .text-center {
    margin-top: 12px;
}
.checkout-card-panel .form-label {
    color: var(--main-clr);
    margin-bottom: 8px;
}
.checkout-card-hint {
    color: #6F6A66;
}
.stripe-card-element {
    background: #fff;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    min-height: 48px;
    padding: 14px 12px;
    direction: ltr;
    box-sizing: border-box;
}
.stripe-card-element .__PrivateStripeElement,
.stripe-card-element iframe {
    width: 100% !important;
    min-width: 100% !important;
    pointer-events: auto !important;
}
.stripe-card-element.StripeElement--focus {
    border-color: var(--main-clr);
}
.stripe-card-element.StripeElement--invalid {
    border-color: #DC2626;
}
#stripe-card-errors {
    line-height: 1.4;
    word-break: break-word;
}
#stripe-card-errors:empty {
    display: none;
}

.credit-card-details {
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.4s ease,
        margin 0.4s ease;
}

.credit-card-details.hide {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}

.data-security {background-color: rgba(243, 244, 246, 0.5);}
.checkout-step { display: none; }
.checkout-step.is-active { display: block; }
#checkoutPage .cart-list li img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 12px;
    flex-shrink: 0;
    object-fit: cover;
}
#checkoutPage .cart-list .meal-name p:last-child {
    color: var(--text-subtitle-clr);
    font-size: 12px;
}
.checkout-invoice-fields { display: none; }
.checkout-invoice-fields.is-visible { display: block; }
.checkout-pregress .step.active .step-name { color: var(--main-clr); }

.colo2-check .btn-check:checked + .ingredient-card .custom-checkbox {
    background-color: var(--secondary-clr);
    border-color: var(--secondary-clr)
}

.address-value {background-color: rgba(255, 253, 242, 1); }

.back-link:hover {color: var(--secondary-clr);}
.back-link:hover svg path {fill: var(--secondary-clr);}
.order-confirm-page .page-text {
    max-width: 475px;
}
.order-confirm-page .payment-successful-word {
    background-color: rgba(42, 96, 73, 0.1);
    border: 1px solid rgba(42, 96, 73, 0.2);
    padding: 6px 16px;
}

.order-confirm-page .card-box {
    background-color: rgba(255, 184, 0, 0.1);
    min-height: 100px;
}

.order-progress-status-wrap {max-width: 500px;}
.order-progress-status .true-icon {
    width: 24px; height: 24px;
    border: 2px solid #E9E3DA;
    
}
.order-progress-status .true-icon svg {display: none;}

.order-progress-status h4 {font-size: 18px;}
.order-progress-status ul li:not(:last-child)::after{
    content: '';
    display: block;
    height: 24px;
    width: 2px;
    background-color: #E9E3DA;
    position: absolute;
    top: 29px;
    left: 11px;
}
.order-progress-status ul li p{color: var(--text-subtitle-clr);}
.order-progress-status ul li svg path {fill: var(--text-subtitle-clr);}
.order-progress-status ul li:not(:last-child) {margin-bottom: 40px;}

.order-progress-status ul li.complete p{color: rgba(42, 96, 73, 1); font-weight: 500;}
.order-progress-status ul li.complete svg {display: block;}
.order-progress-status ul li.complete svg path{fill: var(--main-clr);}
.order-progress-status ul li.complete .true-icon {border-color: var(--main-clr);}

.order-progress-status ul li.active p{color: var(--main-clr); font-weight: bold;}
.order-progress-status ul li.active svg path{fill: var(--main-clr);}
.order-progress-status ul li.active .true-icon {border-color: var(--secondary-clr);}
.order-progress-status ul li.active .true-icon svg {display: none;}
.order-progress-status ul li.active .true-icon::after {
    content: '';
    height: 8px;
    width: 8px;
    background-color: var(--secondary-clr);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.order-progress-status ul li.active::after {
    background-color: #E9E3DA;
}
.order-progress-status ul li.complete::after {
    background-color: var(--main-clr);
}

.ordered-products-list img {width: 64px; height: 64px; object-fit: cover; border-radius: 12px;}
.ordered-products-list li {
    border: 1px solid var(--border-clr);    
}
.bottom-page {max-width: 512px; margin: auto}
.bottom-page {
    width: 100%;
    max-width: 512px;
}


/* End checkout pages */

/* Start impressum + agb + Datenschutz page */
.hero {max-width: 500px;}
.round {
    background: #fff0bf;
    border-radius: 50%;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: auto;
    display: grid;
}
.hero label {
    border: 1px solid var(--border-clr);
    color: #898078;
    background: #fff;
    border-radius: 20px;
    margin-top: 22px;
    padding: 10px 15px;
    display: inline-block;
}
.notice {
    background: #fff7d7;
    border: 1px solid #f4e3aa;
    border-radius: 9px;
    gap: 12px;
    padding: 21px;
    line-height: 1.6;
    display: flex;}
.imprint-hero {padding-bottom: 70px;}

h2 span {
    background: var(--main-clr);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 27px;
    height: 27px;
    font-size: 12px;
    font-style: normal;
    display: grid;    
}
.legal-owner {
    align-items: center;
    gap: 26px;
    padding: 34px;
    display: flex;
}
.legal-mark {
    background: var(--main-clr);
    width: 82px;
    height: 82px;
    color: var(--secondary-clr);
    border-radius: 20px;
    place-items: center;
    font-size: 27px;
    font-weight: 900;
    display: grid;
}
.legal-owner h3 {
    margin: 7px 0;
    font-size: 25px;
}
.legal-card {
    flex-direction: column;
    gap: 8px;
    padding: 25px;
    display: flex;
}
.legal-card>strong {
    color: var(--secondary-clr);
    font-size: 23px;
}
.legal-owner .mini, .legal-card span, .tax-card span, .platform-contact small {
    letter-spacing: 1.4px;
    color: #a06e59;
    font-size: 10px;
    font-weight: 700;
}
.legal-card p {
    color: var(--text-subtitle-clr);
    margin: 0;
    font-size: 12px;
}
.tax-card {
    align-items: center;
    gap: 20px;
    padding: 28px;
    display: flex;
}
.tax-icon {
    width: 58px;
    height: 58px;
    color: var(--brown);
    background: #fff2c8;
    border-radius: 14px;
    place-items: center;
    font-size: 28px;
    font-weight: 700;
    display: grid;
}
.editorial {
    justify-content: space-between;
    align-items: center;
    padding: 29px;
    display: flex;
}
.pen {
    color: #e8dfd4;
    font-size: 60px;
}
.editorial h3 {
    margin: 13px 0 7px;
}
.editorial p {
    color: var(--text-subtitle-clr);
    line-height: 1.6;
    font-size: 14px;
}
.platform-contact {
    align-items: center;
    gap: 17px;
    display: flex;
}
.dark {
    background: var(--main-clr);
    color: #fff;
    border-radius: 9px;
    padding: 20px;
}
.platform-contact>span {
    font-size: 26px;
}
.platform-contact small {
    color: #f4bf56;
}
.platform-contact b {
    font-size: 17px;
}
.platform-contact p {
    color: #e4c8bf;
    margin: 0;
    font-size: 12px;
}
.balance {
    width: 62px;
    height: 62px;
    color: var(--brown);
    background: #fff1c5;
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-size: 26px;
    display: grid;
}
.dispute {
    align-items: flex-start;
    gap: 24px;
    padding: 28px;
    display: flex;
}
.contact {
    grid-template-columns: 1fr 160px;
    align-items: center;
    padding: 30px;
    display: grid;
}
.contact h2 {
    align-items: center;
    gap: 10px;
    font-size: 22px;
    display: flex;
}
.data p, .content section>p, .hint, .security p, .cookie p, .contact p {
    color: var(--text-subtitle-clr);
    line-height: 1.6;
}
.person {
    color: #e5ddd4;
    font-size: 72px;
}
.legal-contact>div>div {
    align-items: center;
    gap: 20px;
    margin-top: 19px;
    display: flex;
}
.legal-contact .legal-button {
    background: var(--main-clr);
    color: #fff;
    border-radius: 8px;
    padding: 13px 18px;
    font-weight: 700;
}
.cookie div b, .contact a {
    font-size: 12px;
}
.legal-contact>div>div>a:last-child {
    font-size: 12px;
    font-weight: 700;
}
.terms-summary>b {
    margin-bottom: 16px;
    font-size: 17px;
    display: block;
}
.terms-summary span {
    color: var(--brown);
    background: #fff3d4;
    border-radius: 20px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 700;
}
.terms-summary>div {
    flex-wrap: wrap;
    gap: 9px;
    display: flex;
}
.term-card>p {
    color: var(--text-subtitle-clr);
    margin: 0 0 14px;
    line-height: 1.7;
}
.term-highlight {
    background: #fff8df;
    border: 1px solid #f3dfa6;
    border-radius: 9px;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
    padding: 20px;
    display: flex;
}

.term-highlight span {
    color: #756d67;
}

.term-card>p {
    color: var(--text-subtitle-clr);
    margin: 0 0 14px;
    line-height: 1.7;
}
.delivery-price {
    background: #fff8df;
    border: 1px solid #f2dda1;
    border-radius: 10px;
    grid-template-columns: 1fr 42px 1fr;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    padding: 24px;
    display: grid;
}
.delivery-price>div {
    text-align: center;
    flex-direction: column;
    gap: 7px;
    display: flex;
}
.delivery-price strong {
    color: var(--text-subtitle-clr);
    font-size: 32px;
}
.delivery-price span {
    color: #766c65;
    font-size: 12px;
}
.delivery-price>i {
    color: var(--gold);
    text-align: center;
    font-size: 28px;
    font-style: normal;
}
.term-card>p {
    color: var(--text-subtitle-clr);
    margin: 0 0 14px;
    line-height: 1.7;
    font-size: 14px;
}

.term-warning {
    align-items: flex-start;
    gap: 17px;
    margin-bottom: 18px;
    display: flex;
}
.term-warning>span {
    background: #8a4936;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    font-weight: 700;
    display: grid;
}
.term-warning p {
    color: #e7cbc1;
    margin: 7px 0 0;
    line-height: 1.6;
}
.responsibility-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0;
    display: grid;
}
.responsibility-grid>div {
    background: #fff8e7;
    border: 1px solid #efe2c8;
    border-radius: 9px;
    flex-direction: column;
    gap: 7px;
    padding: 18px;
    display: flex;
}
.responsibility-grid b {
    color: var(--main-clr);
}
.responsibility-grid span {
    color: #766e68;
    font-size: 12px;
    line-height: 1.5;
}

.list div {
    border-bottom: 1px solid #eee;
    padding: 16px 20px;
}
.list div {
    border-bottom: 1px solid #eee;
    padding: 16px 20px;
}

.list i {
    color: #279460;
    background: #e8f7ed;
    border-radius: 50%;
    margin-right: 12px;
    padding: 5px;
    font-style: normal;
}
.chips {
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0;
    display: flex;
}
.chips b {
    background: #fff2d8;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 12px;
}
.dark {
    background: var(--main-clr);
    color: #fff;
    border-radius: 9px;
    padding: 20px;
}

.security {
    grid-template-columns: 1.5fr .7fr;
    align-items: center;
    gap: 32px;
    display: grid;
}
.lock {
    text-align: center;
    flex-direction: column;
    gap: 8px;
    padding: 25px;
    font-size: 30px;
    display: flex;
}
.lock small {color: #777;font-size: 11px;}
.lock b {font-size: 13px;}
.data p, .content section>p, .hint, .security p, .cookie p, .contact p {
    color: var(--text-subtitle-clr);
    line-height: 1.6;
}
.cookie div, .contact>div>div {
    align-items: center;
    gap: 20px;
    margin-top: 19px;
    display: flex;
}
.head-actions button, .search button, .cookie button, .contact button {
    background: var(--main-clr);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 13px 17px;
    font-weight: 700;
}

.rights {
    background: #fff7dc;
    border: 1px solid #f2dea5;
    border-radius: 9px;
    grid-template-columns: 1fr 1fr;
    gap: 24px 38px;
    padding: 27px;
    display: grid;
}
.rights article {
    gap: 11px;
    display: flex;
}
.rights article>span {
    color: var(--secondary-clr);
}
.rights p {
    color: var(--text-subtitle-clr);
    margin: 5px 0;
    font-size: 12px;
}
.choice-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    display: grid;
}
.choice {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 105px;
    padding: 20px;
    display: flex;
}
.choice.accept {
    background: var(--main-clr);
    color: #fff;
    border-color: var(--main-clr);
}
.choice.necessary, .choice.settings {
    border: 2px solid #d8c7b8;
}
.category-top {
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.category-top strong {
    width: 38px;
    height: 38px;
    color: var(--brown);
    background: #fff1c5;
    border-radius: 50%;
    place-items: center;
    font-size: 19px;
    display: grid;
}
.category-top span {
    background: #fff3d4;
    border-radius: 20px;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 700;
}
.cookie-category h3 {
    margin: 17px 0 9px;
}
.cookie-category p {
    color: var(--text-subtitle-clr);
    margin: 0 0 14px;
    line-height: 1.6;
}
.cookie-category small {
    color: #8b817a;
    border-top: 1px solid #eee;
    padding-top: 13px;
    line-height: 1.5;
    display: block;
}

.tech-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 20px 0;
    display: grid;
}
.tech-grid span {
    background: #fff7df;
    border: 1px solid #f1e1b9;
    border-radius: 8px;
    padding: 13px;
    font-size: 12px;
    font-weight: 700;
}
.cookie-note {
    background: var(--main-clr);
    color: #fff;
    border-radius: 8px;
    padding: 18px;
    font-size: 12px;
    line-height: 1.6;
}

.consent-steps>div {
    border-bottom: 1px solid #eee;
    align-items: center;
    gap: 14px;
    padding: 18px 21px;
    display: flex;
}
.consent-steps>div {
    border-bottom: 1px solid #eee;
    align-items: center;
    gap: 14px;
    padding: 18px 21px;
    display: flex;
}
.consent-steps>div:last-child {border-bottom: 0;}
.cookie-copy p {
    color: var(--text-subtitle-clr);
    margin: 0 0 13px;
    line-height: 1.7;
}
.inline-link {
    color: var(--main-clr);
    text-underline-offset: 3px;
    font-weight: 700;
    text-decoration: underline;
}


/* End impressum + agb + Datenschutz page */

/* Start Cart page */
.cart-page .logo-image {
    width: 64px;
    height: 64px;    
}
.cart-page .cart-list-meals li img{
    width: 96px;
    height: 96px;
    border-radius: 12px;
}
.cart-page .counter-wrap input {max-width: 40px;}
.cart-page .cart-list-meals li:not(:last-child) {margin-bottom: 20px;}
.cart-page .add-more-meals {
    border: 2px dashed var(--border-clr);
    background-color: #F9FAFB;
    color: var(--main-clr);
    padding: 14px 10px;
    
}
.coupon-input input, .coupon-input button {height: 44px; border-radius: 12px;}
.coupon-input input {
    border: 1px solid var(--border-clr);
    
}
.coupon-input button {
    background-color: rgba(255, 255, 241, 1);
    min-width: 133px;
}
.coupon-discount-result {
    background-color: rgba(234, 254, 246, 1);
    padding: 12px;
}


/* End Cart page */

/* Start Empty Cart Page */
.empty-cart-wrap {max-width: 900px;}
.bg-transparent-btn {
    background-color: transparent;
    color: var(--main-clr);
    border: 1px solid var(--main-clr);
}

/* End Empty Cart Page */

/* Start Contact page */
.to-reach-us .icon-wrap, .icon-wrap-err {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background-color: var(--bg-secondary);
}
.show-order-details {
    background-color: rgba(255, 249, 230, 1);
}
.go-to-orders-profile {
    background: #FFFFFF;
    border: 1px solid #E9E3DA;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    color: var(--main-clr);
    font-weight: bold;
}
.search-form-404 .search-input {
    border: none;        
    padding: 15px 16px 14px;
    width: 398px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #FFFFF1;
    border-radius: 10px;
}

.search-btn-error {
    padding: 13px 24px;
    width: 106px;
    height: 50px;
    background: var(--secondary-clr);
    border-radius: 10px;
    border: none;

}
.search-btn-error:hover {
    background-color: var(--main-clr);
    color: #fff;
}
.search-form-404 .search-input:focus {
    border: 1px solid var(--main-clr);
    outline: none;
}

::placeholder {
    color: rgba(156, 163, 175, 1);
    opacity: 1;
}
.page-link {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;    
    width: 389.33px;
    height: 98px;
    background: #FFFFFF;
    border: 1px solid #FFFFF1;
    border-radius: 10px;
}
.page-link:hover .icon-wrap-err {
    background-color: var(--main-clr);
}
.page-link:hover .icon-wrap-err svg path {
    fill: #fff;
}

/* End Contact page */

/* Start faq & help page */
.tab-faq-group {
    min-height: 140px;
    background-color: #fff;
    border: 1px solid #F3F4F6;
    padding: 24px;
    border-radius: 12px;
}
.tab-faq-group.active, .tab-faq-group:hover {
    border: 2px solid var(--secondary-clr);
}
.faq-wrap {
    max-width: 800px;
    scroll-margin-top: 100px;
}
.q-body {background-color: #fff; border: 1px solid var(--border-clr); border-radius: 12px;}

.questions-list .answer{border-top: 1px solid var(--border-clr);}

.questions-list .question {
    padding: 15px;
}

.questions-list .answer {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        height 0.35s ease,
        opacity 0.25s ease;
}

.questions-list .answer-content {
    padding: 15px;
}

.questions-list .question svg {
    transition: transform 0.3s ease;
    min-width: 13px;
}

.questions-list .q-body.open .question svg {
    transform: rotate(180deg);
}
.support-box {
    background-color: #FFF9E6;
    padding: 25px;
    border-radius: 12px;

}
.support-box .support-icon{
    background-color: #fff;
    width: 80px;
    height: 80px;
    min-width: 80px;

}

/* End faq & help page */

/* Start Partners page */
.partner-hero-section h1{font-size: 58px;}
.partner-hero-section .white-btn {
    background-color: #fff;
    border: 1px solid var(--border-clr);
    color: var(--main-clr);
}
.partner-hero-section button, .partner-hero-section .white-btn {font-size: 18px;}
.partner-hero-section .white-btn:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr);
}
.partner-hero-section .hero-partner-image {
    aspect-ratio: 1.16 / 1;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.002);
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}
.partner-hero-section .text-card {
    top: 100px;
    left: -50px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}
.partner-hero-section .text-card .bg-text {
    background-color: rgba(50, 129, 83, 0.1);
    padding: 4px 8px;
}
.partner-hero-section .icon-wrap{
    width: 40px;
    height: 40px;
    border-radius: 50%;

}

.why-gastroorder-section .reason-box {
    background-color: var(--bg-secondary);

}
.why-gastroorder-section .box-icon-wrap {
    padding: 0px;
    width: 64px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.how-we-work .number{
    width: 80px;
    height: 80px;
    min-width: 80px;
    border: 1px solid var(--border-clr);
    background-color: rgba(255, 255, 241, 1);
    padding: 6px;
}
.how-we-work .number p {
    background-color: var(--secondary-clr);
    font-size: 30px;
}
.how-we-work .p-title{font-size: 20px; }
.how-we-work .line {
    background-color: #E9E3DA;
    height: 2px;
    width: 50%;
    position: absolute;
    top: 39px;
}
ul.feat-list li .icon-true-wrap{
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background-color: rgba(50, 129, 83, 0.1);
}

.join-us-section ::placeholder {color: #9CA3AF;}
/* End Partners page */

/* Start Partner Confirmation page */
.content-page-wrap {
    max-width: 896px;
}
.page-title-box .icon-wrap {
    width: 64px;
    height: 64px;
    background-color: var(--secondary-clr);

}
.page-title-box .icon-wrap + p {letter-spacing: 1.4px;}
.page-title-box h1 {font-size: 36px;}
.what-happens-next .number {
    width: 40px;
    height: 40px;
    background-color: var(--secondary-clr);
}

.back-to-you-box .icon-wrap {
    width: 56px;
    height: 56px;    
}

/* End Partner Confirmation page */


/* Start Navbar btn */
.hamburger-btn {
    border: 1px solid rgba(233, 227, 218, 1);
    border-radius: 10px;
    outline: none;
    padding: 12px;
    background-color: transparent;
}
.hamburger-btn span {
    height: 0.1rem;
    width: 16px;
    background-color: var(--main-bg-color);
}
.hamburger-btn span:not(:last-child) {margin-bottom: 4px;}

/* End Navbar btn */

/* Start Footer */

.footer {background-color: var(--main-clr);}
.footer .note{color: rgba(234, 245, 244, 0.6); line-height: 1.7;}
.footer .social-wrap {min-width: 36px; width: 36px; height: 36px; background-color: rgba(255, 255, 255, 0.1); transition: all .2s ease-in-out;}
.footer .social-wrap:hover {
    background-color: var(--secondary-clr);
}
.footer .social-wrap svg path, .footer .links-list a{transition: all .2s ease-in-out;}
.footer .social-wrap:hover svg path {fill: var(--main-clr);}
.footer .links-list a {color: rgba(234, 245, 244, 0.6); }
.footer .links-list a:hover {color: var(--secondary-clr) }
.app-link {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
}
.app-link:hover {background-color: var(--secondary-clr);}


.app-link p:first-of-type {
    color: rgba(255, 255, 255, 0.5)
}
.app-link p:last-child {color: #fff}
.app-link svg {min-width: 15px;}
.copyright {
    
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: 20px;
}
.copyright p{color: rgba(234, 245, 244, 0.4);}
.footer .footer-dropdown .btn {color: rgba(255, 255, 255, 0.7)}
.app-link:hover p:last-child, .app-link:hover p:first-child {color: var(--main-clr);}
.app-link:hover svg path {fill: var(--main-clr);}
.contact-item a{
    color: rgba(255, 255, 255, 0.6);
}
.contact-item span {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);

}
/* End Footer */

/* Start my frame work */
.main-bg-clr {background-color:  var(--main-clr);}
.bg-secondary-clr {background-color: var(--bg-secondary);}
.secondary-clr{color: var(--secondary-clr);}
.subtitle {color: var(--text-subtitle-clr);}
.main-clr {color: var(--main-clr)}
.clr-2 {color: var(--color2)}
.dropdown-item:focus, .dropdown-item:hover {background-color: var(--secondary-clr);}
.cursor-pointer {cursor: pointer;}
.fs-12 {font-size: 12px}
.fs-10 {font-size: 10px}
.borderd-card {border: 1px solid var(--border-clr);}
.transition-time {transition: .2s;}
.pac-container { display: none !important; }
.main-btn-style {
    background-color: var(--main-clr);    
    color: #fff;
    width: 100%;
    border: none;
    outline: none;
    padding: 16px;
    border-radius: 12px;
}
.main-btn-style:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr);
}
.main-btn-style.white-btn {
    background-color: #fff;
    color: var(--main-clr);
}
.main-btn-style.white-btn:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr);
}

.address-suggestions {
    position: fixed;
    z-index: 2060;
    background: #fff;
    border: 1px solid var(--border-clr);
    border-radius: 16px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
    direction: ltr;
    text-align: left;
}
.address-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.address-suggestion-item:hover,
.address-suggestion-item.is-active {
    background: var(--bg-secondary);
}
.address-suggestion-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    background: #FFFDF2;
    border: 1px solid var(--border-clr);
    display: flex;
    align-items: center;
    justify-content: center;
}
.address-suggestion-text {
    min-width: 0;
}
.address-suggestion-main {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    line-height: 1.3;
}
.address-suggestion-sub {
    display: block;
    font-size: 12px;
    color: var(--text-subtitle-clr);
    margin-top: 2px;
    line-height: 1.4;
}
.address-suggestions-footer {
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px 2px;
}

/* End my frame work */