body {
    font-family: 'Helvetica', sans-serif;
    position: relative;
}
* {
    box-sizing: border-box;
}
a {
    color: #000000;
    text-decoration: none;
}

.bannerimg .img-fluid {
    width: 100% !important;
    height: auto;
}
.navbar {
    background-color: #f2fbe9;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #DDF7D9, #FFFFFF);
}

.navbar-brand img {
    height: 45px;
}

/* Location Box */
.location-box {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    min-width: 200px;
    cursor: pointer;
}

.location-box i {
    color: #2d7c2d;
    font-size: 18px;
    margin-right: 8px;
}

.location-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-icon {
    color: #2d7c2d;
    font-size: 14px;
    margin-left: 5px;
}

/* Search Bar */
.search-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-box {
    border-radius: 25px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    width: 100%;
    outline: none;
}

/* Search Suggestions Dropdown */
#suggestions-box,
#mobile-suggestions-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    max-height: 400px;
    overflow-y: auto;
}

#suggestions-box .list-group-item,
#mobile-suggestions-box .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
}

#suggestions-box .list-group-item img,
#mobile-suggestions-box .list-group-item img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

#suggestions-box .list-group-item:hover,
#mobile-suggestions-box .list-group-item:hover {
    background-color: #f8f9fa;
}

#suggestions-box .list-group-item:last-child,
#mobile-suggestions-box .list-group-item:last-child {
    border-bottom: none;
}

.search-btn {
    background-color: #28a745;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    position: absolute;
    right: 8px;
}

/* Cart Button */
.cart-btn {
    background-color: #E94412;
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: 400;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    white-space: nowrap;
}

.cart-btn i {
    font-size: 18px;
}

/* Desktop Menu */
.desktop-menu a {
    font-size: 16px;
    font-weight: 400;
    margin: 0px 30px 0px 0px;
    text-decoration: none;
    color: #231917;
    transition: color 0.3s;
}

.desktop-menu a:hover {
    color: #28a745;
}

/* Mobile Bottom Navigation - Safari fix: prevent floating with transform/backface */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bottom-nav .nav-item {
    flex: 1;
    text-align: center;
}

.bottom-nav .nav-link {
    font-size: 14px;
    color: #333;
}

.bottom-nav .nav-link i {
    display: block;
    font-size: 24px;
    margin-bottom: 7px;
}
.bannerimg{
    display: block;
}
#mobileSlider .carousel-control-prev,
#mobileSlider .carousel-control-next {
    display: none;
}
/* Mobile Carousel Image Styling */
#mobileSlider {
    margin: 15px 0;
    padding: 0 10px;
}
#mobileSlider .carousel-inner {
    border-radius: 10px;
    overflow: hidden;
}
#mobileSlider .carousel-item img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}

.product-card {
    border: 1px solid #D8C2BC;
    border-radius: 16px;
    padding: 15px;
    text-align: left;
    background: white;
    position: relative;
    padding-bottom: 30px;
}
.discount-label {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #BCF0B4;
    color: #000000;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 16px 0px 16px 0px;
    z-index: 10;
}
.product-image {
    display: block;
    margin: 30px auto 10px;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
}
.product-title {
    font-size: 16px;
    color: #231917;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 18.4px;
    min-height: 36.8px; /* 2 lines height (18.4px * 2) */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
    position: relative;
    cursor: pointer;
}

/* Tooltip for full product name on hover - only show if text is truncated */
.product-title[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    text-align: left;
}

.product-title[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1001;
    margin-bottom: 2px;
}
.product-info {
    font-size: 16px;
    color: #53433F;
    font-weight: 400;
    margin-bottom: 5px;
    line-height: 24px;
}
.price-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    gap: 8px;
}

.price-container .price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    min-height: 44px; /* Maintain consistent height for 2 lines (18px + 2px gap + 20px) */
}

.price-container .qty-box {
    flex-shrink: 0;
    margin-right: 8px;
    margin-left: 0;
    padding: 2px 0;
}

.price {
    color: #4CAF50;
    font-size: 18px;
    line-height: 20.7px;
    font-weight: 600;
    margin: 0;
}

.original-price {
    text-decoration: line-through;
    color: #53433F;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    padding-left: 0;
}
.add-btn {
    background: #E94412;
    color: white;
    border: none;
    padding: 5px 0px 5px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Disabled Add button - grey out */
.add-btn.disabled,
.add-btn:disabled {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.owl-nav {
    display: block !important;
}

.owl-nav button {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgb(255, 255, 255) !important;
    color: #4CAF50 !important;
    border-radius: 50% !important;
    border:1px solid #4CAF50 !important;
    width: 35px;
    height: 35px;
}

.owl-nav button.owl-prev {
    left: -22px;
}

.owl-nav button.owl-next {
    right: -22px;
}
.owl-carousel .owl-item .product-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 170px;
    object-fit: contain;
    margin: 0px auto 0px;
}
.cart-options {
    background: #FFFFFF;
    padding: 1px 6px;
    border-radius: 5px;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
}
.modal-body {
    padding: 15px;
}

.unit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.unit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    padding-top: 10px;
}

.unit-image {
    width: 40px;
    height: 40px;
}

.qty-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
    transition: 0.3s ease-in-out;
    width: 70px;
    margin-left: 0;
    margin-right: auto;
    padding: 2px 0;
}

.qty-btn {
    background: #E94412;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.qty-input {
    width: 22px;
    height: 24px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 13px;
    padding: 0;
    margin: 0;
}
.add-btn i {
    margin-left: 5px;
}
.add-btn img {
    height: 15px;
}
.newimg img{
    height: 15px;
}
.add-btn {
    background: #E94412;
    color: white;
    border: none;
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.extrapadding{
    padding-top:90px;
}
.extrapadding2{
    padding-top:90px;
}
.new-cate-grocery-section {
    padding: 40px 0;
    position: relative;
}
.new-cate-promo-box {
    /* background: radial-gradient(circle, white -170%, #3a1347 50%); */
    /* color: white; */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    width: 350px;
    height: 580px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-cate-promo-box img {
    max-width: 100%;
    margin-top: 15px;
}
.new-cate-category-title {
    font-weight: bold;
    margin-bottom: 15px;
}
.new-cate-owl-carousel .new-cate-item {
    text-align: center;
    /* padding: 10px; */
}
.new-cate-owl-carousel .new-cate-item img {
    max-width: 100%;
    border-radius: 10px;
}
.new-cate-category-name {
    margin-top: 10px;
    font-weight: bold;
}
.new-cate-owl-carousel .owl-item img {
    display: block;
    width: 100%;
}
/* Navigation Arrows Positioned on the Right */
.new-cate .owl-carousel .owl-nav {
    position: absolute;
    top: 100%;
    right: 40px;
    gap: 10px !important;
    padding: 25px;
}
.new-cate-custom-prev, .new-cate-custom-next {
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.3s;
}
.new-cate-custom-prev i, .new-cate-custom-next i {
    font-size: 18px;
    color: #333;
}
.footer-section {
    background: linear-gradient(to top, #fbe0d1, #fff);
    padding: 50px 0;
}
.footer-logo img {
    width: 120px;
}
.footer-links h5 {
    font-size: 20px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 23px;
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links ul li {
    margin-bottom: 8px;
}
.footer-links ul li a {
    text-decoration: none;
    color: #231917;
    transition: color 0.3s;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.footer-links ul li a:hover {
    color: #5a2d82;
}
/* Social Icons */
.footer-social {
    display: flex;
    gap: 15px;
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 15px;
}
.footer-social a {
    color: #333;
    transition: color 0.3s;
}
.footer-social a:hover {
    color: #5a2d82;
}
/* Payment Logos */
.footer-payments img {
    max-height: 40px;
    max-width: 72px;
    margin-right: 15px;
}
/* Newsletter Subscription */
.footer-subscribe .input-group {
    max-width: 300px;
    border-radius: 30px;
    overflow: hidden;
}
.footer-subscribe .form-control {
    border-radius: 30px;
    border: 1px solid #ccc;
    height: 45px;
    padding-left: 15px;
}
.footer-subscribe .btn-subscribe {
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 5px 20px;
    transition: background 0.3s;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.footer-subscribe .btn-subscribe:hover {
    background: #402060;
}
/* Category List */
.category-list {
    display: flex;
    flex-wrap: wrap;
}
.category-list .col-6 {
    padding: 0;
}
/* Dropdown */
.category-dropdown select {
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    background: white;
}
/* Copyright */
.footer-bottom {
    text-align: center;
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    line-height: 24px;
}
.extrafootermargin{
    margin-left:-60px;
}
.newformcontrol .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #ffffff00;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .2.25rem;
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
}
.extraborder{
    border-top: 0px solid black;
    border-bottom: 0px solid black;
    padding: 0px 0px 0px 0px;
}
.stores-section {
    text-align: center;
    padding: 50px 0;
}
.store-item {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 8px;
}
.store-card-link {
    display: block;
    text-decoration: none;
    padding: 15px 10px;
    border: none;
    border-radius: 12px;
    background: #FFFFFF;
    transition: all 0.3s ease;
    height: 100%;
    color: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.store-card-link:hover {
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.store-card-link:focus {
    text-decoration: none;
    color: inherit;
}
.store-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 12px;
    aspect-ratio: 1 / 1;
    background: #F9F9F9;
}
.store-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.store-name {
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.store-discount {
    color: #3B6939;
    font-weight: 700;
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.2;
}
/* View All Button */
.view-all-btn {
    border: 1px solid #4CAF50;
    background: transparent;
    color: #4CAF50;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 16px;
    transition: all 0.3s ease;
}
.view-all-btn:hover {
    background: #4CAF50;
    color: white;
}
.view-all {
    display: block;
    margin: 20px auto;
    padding: 8px 20px;
    border: 1px solid green;
    border-radius: 20px;
    background: transparent;
    color: green;
    cursor: pointer;
    text-decoration: none;
}
.view-all:hover {
    background: green;
    color: white;
}
.extramarginfooter{
    margin-bottom:0px;
}
.product-carded {
    /* margin-bottom: 10px; */
    background: #FFF8F6; /* Light pink background */
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    width: 168px;
    height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Ensures background shapes stay inside */
}
/* Single circle at the right corner */
.product-carded::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: #FCEAE5;
    border-radius: 50%;
    top: -28px;
    right: -40px;
}
.product-carded img {
    mix-blend-mode: multiply;
    max-width: 140px;
    height: auto;
    position: relative;
    z-index: 999999;
}
.new-cate-category-name {
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
    color: #333;
    position: relative;
    z-index: 2;
    background: #fcecea; /* Matching background */
    padding: 4px 8px;
    border-radius: 8px;
}
.textnewsletter{
    font-size: 18px;
    font-weight: 400;
    line-height: 20.7px;
}
.catename{
    width: 168px;


}
.catename b{
    font-weight: 700;
    font-size: 16px;
    line-height: 18.4px;
    color: #000000;
}
.headingclass{
    font-weight: 700;
    font-size: 32px;
    line-height: 36.8px;
    padding: 0px 0px 18px 0px;
}
.paymentspacing{
    padding: 70px 10px 15px 10px;
}
.rupee-symbol {
    font-size: 12px;
    position: relative;
    top: -5px;
    margin-right: -4px;
}
/* Left Section Styling */
.image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.green-bg {
    width: 400px;
    height: 400px;
    background: linear-gradient(to bottom, #4CA307, #074804);
    border-radius: 50%;
    position: absolute;
    z-index: 0;
}
.main-image {
    width: 650px;
    position: relative;
    left: 52px;
    bottom: 52px;
    z-index: 0;
}
.fruit-image {
    width: 400px;
    position: absolute;
    bottom: -80px;
    z-index: 0;
}
/* Info Box Styling */
.info-box {
    width: 185px;
    position: absolute;
    background: white;
    padding: 10px 10px;
    border-radius: 10px 0px;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 33%);
    font-size: 14px;
    display: flex;
    align-items: center;
}
.info-box i {
    margin-right: 8px;
    font-size: 20px;
    color: #000;
}
.info-box-1 { top: 60px; right: 0%; }
.info-box-2 { bottom: 220px; left: 0; }
.info-box-3 { bottom: 30px; right: 0px; z-index: 9; }

/* Right Section Styling */
.form-section {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}
.map-container {
    width: 100%;
    height: 200px;
    background: url('https://via.placeholder.com/400x200') no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    position: relative;
    z-index: 99;
}
.use-location-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #f00;
    color: red;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 9999;
}
.confirm-btn {
    background: #f4502c;
    border: none;
    padding: 10px;
    color: white;
    width: 100%;
    border-radius: 25px;
    font-size: 16px;
}
.confirm-btn:hover {
    background: #f4502c;
    border: none;
    padding: 10px;
    color: white;
    width: 100%;
    border-radius: 25px;
    font-size: 16px;
}
.swal2-html-container{
    font-size: 32px;
    font-weight: 700;
    color: black;
}
.swal2-actions button{
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #E94412;
    color: white;
    font-size: 1em;
}
.back-btn {
    font-size:16px;
    font-weight:700;
    color:#E94412;
    border:0px;
}
.back-btn:hover {
    font-size:16px;
    font-weight:700;
    color:#E94412;
    border:0px;
    background-color:transparent;
}
.registrationspace{
    margin-top: 140px;
}

/* Desktop View - Ensure proper layout */
@media (min-width: 769px) {
    .registrationspace {
        margin-top: 140px;
    }
    .register-section {
        padding: 0 15px;
    }
    .register-section .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    .register-section .row > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
    .image-container {
        overflow: visible;
    }
    .form-section {
        padding: 20px;
    }
    .cta-section {
        padding: 30px;
        flex-direction: row;
        text-align: left;
    }
    .cta-text {
        max-width: 60%;
    }
}
.new-cate-promo-box h2{
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
}
.new-cate-promo-box p{
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
}
.new-cate-promo-box .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.form-section h3{
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 32px;
}
.form-section .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #F6F6F6;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
}
.steps-container {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
    text-align: center;
}
.step-box {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    position: relative;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.step-number {
    position: absolute;
    top: -22px;
    left: 15px;
    background-color: white;
    padding: 5px 15px;
    font-size: 20px;
    font-weight: bold;
    color: green;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.step-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
}
.step-title p{
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
}
.step-box ul {
    list-style: none;
    padding-left: 0;
}
.step-box ul li {
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #5a3c2e;
}
.step-box ul li::before {
    content: '\2192';
    margin-right: 10px;
    color: brown;
}
.feature-box1 {
    width: 96px;
    height: 96px;
    background-color: #f8f9fa;
    box-shadow: 0px 7px 29px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 15px;
}
.feature-box1 i {
    font-size: 36px;
    color: #4CAF50;
}
.feature-heading {
    color: #0B0B0B;
    font-weight: 700;
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.feature-description {
    color: #666666;
    font-size: 16px;
    font-weight: 400;
}
.cta-section {
    background: linear-gradient(to bottom, #4CA307, #074804);
    border-radius: 15px;
    padding: 30px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}
.cta-text {
    max-width: 60%;
}
.cta-text h2 {
    font-weight: bold;
}
.cta-btn {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 10px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
.cta-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
.cta-image img {
    max-width: 200px;
}
.btn-check:focus+.btn-danger, .btn-danger:focus {
    color: #fff;
    background-color: #f4502c;
    border-color: #f4502c;
    box-shadow: 0 0 0 .25rem rgb(255, 255, 255);
}
.followpadding{
    padding-top: 50px;
    padding-bottom:15px;
}
.why{
    font-size:32px;
    font-weight: 700;
    line-height: 100%;
}
.shopmore{
    display: block;
}
.shopmore2{
    display: none;
}
.breakdown{
    display: none;
}
.btn-check:focus+.btn-outline-secondary, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 .25rem rgb(255, 255, 255);
}
.rupee-symbol2 {
    font-size: 12px;
    position: relative;
    top: -3px;
    margin-right: -4px;
}
.store-sectionde {
    position: relative;
    color: white;
    min-height: 500px;
    display: flex;
    align-items: center;
    padding: 40px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.store-sectionde::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(59, 105, 57, 0.7) 50%, #3B6939 100%);
    z-index: 1;
}

.store-infode {
    max-width: 600px;
    position: relative;
    top: 80px;
    left: 6%;
    z-index: 2;
    padding-right: 20px;
}

.store-infode h2 {
    font-size: 48px;
    color: white;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.store-infode p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.95);
}
.time-container {
    margin-left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.time-boxde {
    border: 1px solid white;
    padding: 10px 20px;
    border-radius: 25px;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    transition: all 0.3s ease;
}

.time-boxde:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* When time-boxde is a select element */
select.time-boxde {
    cursor: pointer;
    min-width: 200px;
}

select.time-boxde:hover {
    background: rgba(255, 255, 255, 0.2);
}

.time-boxde select {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    padding: 0;
    padding-right: 30px;
    cursor: pointer;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px 14px;
    font-weight: 400;
    min-height: 20px;
    line-height: 1.5;
}

.time-boxde select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.05);
}

.time-boxde select:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Select dropdown options styling */
.time-boxde select option {
    background: #3B6939 !important;
    color: white !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    border: none !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    min-height: 44px !important;
    display: block !important;
}

.time-boxde select option:hover,
.time-boxde select option:focus {
    background: #4a7a47 !important;
    color: white !important;
    cursor: pointer !important;
}

.time-boxde select option:checked,
.time-boxde select option[selected] {
    background: #2d5a2b !important;
    color: white !important;
    font-weight: 500 !important;
}

/* Ensure select box maintains theme consistency */
.time-boxde select::-ms-expand {
    display: none;
}

/* For better dropdown appearance */
select.time-boxde {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

select.time-boxde:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.online-statusde {
    position: absolute;
    /* top: 40px; */
    right: 6%;
    width: 7% !important;
    background: white;
    color: black;
    padding: 8px 18px;
    border-radius: 50px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    z-index: 10 !important;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap;
}

.online-statusde span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Online status - Green color */
.online-statusde span.open {
    background: #4CAF50;
}

.online-statusde span.closed {
    background: #E94412;
}

/* Status text color */
.online-statusde .status-text {
    font-weight: 600;
    display: inline-block;
    line-height: 1;
}

/* Status text color based on parent class */
.online-statusde.status-online .status-text {
    color: #4CAF50 !important;
}

.online-statusde.status-offline .status-text {
    color: #E94412 !important;
}
.coupon-boxde {
    position: absolute;
    bottom: 40px;
    right: 6%;
    background: white;
    padding: 20px;
    border-radius: 15px;
    color: black;
    max-width: 320px;
    width: 100%;
    z-index: 2;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    border: 2px solid #BCF0B4;
}

.coupon-headerde {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.coupon-headerde h4 {
    color: #28a745;
    font-weight: 700;
    font-size: 28px;
    margin: 0;
    line-height: 1;
}

.coupon-headerde img {
    height: 35px;
    width: auto;
}

.coupon-contentde {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.coupon-leftde {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.coupon-leftde p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.coupon-leftde span {
    font-size: 14px;
    color: #000;
    font-weight: 600;
}

.coupon-rightde {
    font-size: 11px;
    text-align: right;
    color: #999;
    line-height: 1.4;
}

.coupon-rightde p {
    margin: 0;
}
.sidebarde {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

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

.sidebarde ul li {
    padding: 15px 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.sidebarde ul li:last-child {
    border-bottom: none;
}

.sidebarde ul li img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.sidebarde ul li a {
    font-size: 15px;
    font-weight: 500;
    color: #231917;
    flex: 1;
}

.sidebarde ul li:hover {
    background: #f8f9fa;
}

.sidebarde ul li.active {
    background: linear-gradient(to right, #DDF7D9, #FFFFFF);
    border-left: 4px solid #28a745;
    font-weight: 600;
}

.sidebarde ul li.active a {
    color: #28a745;
    font-weight: 600;
}

.sidebarde ul li:first-child {
    font-weight: 600;
    font-size: 16px;
    padding: 18px;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    color: #231917;
    justify-content: center;
}

.sidebarde ul li:first-child.active {
    background: linear-gradient(to right, #DDF7D9, #FFFFFF);
    border-left: 4px solid #28a745;
    color: #28a745;
    font-weight: 700;
}
.product-card2{
    min-height: 320px;
    border: 1px solid #D8C2BC;
    border-radius: 16px;
    padding: 15px;
    text-align: left;
    background: white;
    position: relative;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card2 .product-image{
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 20px auto 10px;
    object-fit: contain;
}
/* Mobile Sidebar Slider */
/* Mobile Sidebar - Base Styles (Hidden on Desktop) */
.mobile-sidebar {
    display: none;
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px 10px;
    background: #fff;
    margin-bottom: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
    z-index: 999;
    transition: all 0.3s ease;
}

.mobile-sidebar::-webkit-scrollbar {
    display: none;
}

/* Desktop - mobile sidebar should not be sticky */
@media (min-width: 769px) {
    .mobile-sidebar.sticky {
        position: relative !important;
    }

    /* Desktop/Web view - Fix quantity selector size and spacing */
    .qty-container {
        width: 65px !important;
        margin: 0 5px !important;
        padding: 2px 0 !important;
    }

    .qty-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 13px !important;
        font-weight: bold !important;
        line-height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .qty-input {
        width: 21px !important;
        height: 22px !important;
        font-size: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure qty-box has proper spacing in web view */
    .qty-box {
        margin: 0 5px !important;
        padding: 2px 0 !important;
    }

    /* Price container spacing for web view */
    .price-container .qty-box {
        margin-right: 8px !important;
        margin-left: 0 !important;
    }
}

.mobile-sidebar .sidebar-itemde {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 15px;
    border-radius: 12px;
    background: #ffffff;
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: auto;
    max-width: none;
    font-weight: 600;
    color: #000;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    gap: 12px;
}

.mobile-sidebar .sidebar-itemde:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #BCF0B4;
}

.mobile-sidebar .sidebar-itemde img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.mobile-sidebar .sidebar-itemde.active {
    background: linear-gradient(to top, #DDF7D9, #FFFFFF);
    color: #28a745;
    font-weight: bold;
}

.store-category-link {
    color: #E94412;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0%;
    text-decoration: underline;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    text-underline-offset: 3px;
}
.store-category-link:hover {
    background-color: transparent;
    text-decoration: underline;
    color: #E94412;
    opacity: 0.8;
}
.store-item .store-name {
    margin-bottom: 5px;
    margin-top: 10px;
}
.categoryformobile{
    display: none;
}
.categoryfordesktop{
    display: block;
}
.food-card{
    border:1px solid #FFF1ED;
    background-color: #FFF8F6;
    border-radius:15px;
}
.shadowed {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}
.shadowed:hover {
  transform: translateY(-5px);
}
/* Sidebar Design */
.sidebared {
    background: #fff;
    border: 1px solid #ddd;
    border-bottom:0px;
    border-top:0px;
    border-left:0px;
    height: 725px;
    overflow-y: scroll;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
/* For Chrome, Safari, and Opera */
.sidebared::-webkit-scrollbar {
    display: none;
}
.sidebared ul li {
  cursor: pointer;
  transition: background 0.3s;
}

.list-unstyled img{
    height:50px;
    width:50px;
}
.frequently-ordered{
    background-color:#FCEAE5;
    padding:5px;
    width: 195px;
}
.position-relative img{
    padding:1px;
    border-radius:15px;
    width:88%;
    aspect-ratio:4/3;
    object-fit:cover;

}
.offer-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 13px;
}
.frequently-ordered {
  background-color: #ffe9e1;
  color: #e76f51;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 13px;
}
.sidebared ul li {
  cursor: pointer;
  border-bottom:1px solid #66666640;
  transition: background 0.3s, color 0.3s;
  font-size: 14px;
}

.sidebared ul li .side-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.sidebared ul li .side-text {
    color: #002204;
  font-weight: 700;
  font-size:16px;
  line-height:100%;
}

.sidebared ul li.active,
.sidebared ul li:hover {
  background: linear-gradient(to top, #DDF7D9 , #FFFFFF);
  color: #fff;
}

.sidebared ul li.active .side-text,
.sidebared ul li:hover .side-text {
  color:#4CAF50;
  font-weight: 700;
  font-size:16px;
  line-height:100%;
}
.badge {
  font-size: 14px;
}
.extraborder{
    border:1px solid #66666640;
    border-bottom:0px;
}
.fixedheight {
    height: 700px;
    overflow-y: scroll;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* For Chrome, Safari, and Opera */
.fixedheight::-webkit-scrollbar {
    display: none;
}
.fixedheight2 {
    height: 700px;
    overflow-y: scroll;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.fixedheight2::-webkit-scrollbar {
    display: none;
}

.new-cate-item-wrap {
    display: block;
}
.headingde {
    padding: 20px 15px;
    position: relative;
    z-index: 1;
    background: white;
}

.headingde h3{
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 25px;
    padding-top: 20px;
    color: #231917;
}

#products-container {
    position: relative;
    z-index: 1;
}

.product-item {
    position: relative;
    z-index: 1;
}

.mobile-sidebar {
    display: flex;
    position: relative;
    z-index: 1;
    background: white;
}
  .sidebarde {
    background: #fff;
    border: 1px solid #ddd;
    border-bottom:0px;
    border-top:0px;
    border-left:0px;
    height: 700px;
    overflow-y: scroll;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
/* For Chrome, Safari, and Opera */
.sidebarde::-webkit-scrollbar {
    display: none;
}
.time-container {
    margin-left:10px;
    display: flex;
    justify-content: flex-start;
  }
  .store16{
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    padding-top: 12px;
    padding-bottom:12px;
    color: #999999;
  }

  .log-in-box {
    max-width: 400px;
    width: 100%;
    padding: 16px;
    text-align: center;
  }

  .log-in-social-btn img {
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .log-in-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
  }

  .log-in-divider::before,
  .log-in-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
  }

  .log-in-divider:not(:empty)::before {
    margin-right: .5em;
  }

  .log-in-divider:not(:empty)::after {
    margin-left: .5em;
  }

  .log-in-form-control {
    border-radius: 5px;
  }

  .log-in-btn {
    background-color: #f44306;
    color: #fff;
    border-radius: 25px;
  }

  .log-in-btn:hover {
    background-color: #e03d05;
  }

  .log-in-phone-login {
      font-weight:700;
    color: #f44306;
    font-size: 14px;
    text-decoration: none;
  }

  .log-in-signup-link {
    color: green;
    text-decoration: none;
  }

  .log-in-forgot-pass {
    font-size: 15px;
    text-align: right;
    display: block;
    margin-bottom: 15px;
  }

  .log-in-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .log-in-social-btn{
    border:1px solid #C4C6CF;
  }
  .log-in-social-btn:hover{
    border:1px solid #C4C6CF;
  }
  .log-in-otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-right: 8px;
  }
  .log-in-resend {
    font-size: 14px;
    cursor: pointer;
    color: #000;
    display: inline-block;
    margin-top: 10px;
    text-align: right;
}
.main-img-det {
    background-color: #F9F9F9;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
  }

  .thumb-container-det {
    position: relative;
    margin-top: 15px;
    width: 88%;
    margin-left: 32px;
  }

  .thumb-det {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .thumb-det img {
      width: 70px;
      height: 85px;
      cursor: pointer;
      border-radius: 2px;
      padding: 0px;
      border: 2px solid transparent;
      flex-shrink: 0;
      background-color: #F9F9F9;
  }

  .thumb-det img.active {
    border: 1px solid #4CAF50;
}

  .arrow-det {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(255, 255, 255);
    color: #4CAF50;
    padding: 3px 9px;
    border: 1px solid #4CAF50;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1;
}

  .arrow-left-det {
    left: -36px;
  }

  .arrow-right-det {
    right: -32px;
  }

  .btn-option-det {
    border: 1px solid #ccc;
    padding: 5px 15px;
    margin-right: 5px;
    border-radius: 2px;
    cursor: pointer;
  }

  .btn-option-det.active {
    color: #e94412;
    border-color: #e94412;
  }

  .color-option-det {
  width: 50px;
  height: 50px;
  border-radius: 2%;
  border: 2px solid #cccccc;
  cursor: pointer;
  margin-right: 10px;
}

  .color-option-det.active {
    border: 1px solid #e94412;
  }

  .coupon-det {
    background-color: #fff7f4;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #f3d3c4;
  }

  .show-more-det {
    color: #f26522;
    cursor: pointer;
  }

  .desc-det .extra-det {
    display: none;
  }

  .top-icons-det {
    text-align: right;
  }

  .top-icons-det i {
    font-size: 18px;
    color: #f26522;
  }

  .top-icons-det span {
    display: block;
    font-size: 14px;
  }
  .detailheading{
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    padding-top: 12px;
  }
  .add-btn-detail{
        margin-top: 15px;
        margin-bottom: 15px;
        background: #E94412;
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s ease-in-out;
  }

/* Disabled Add button detail - grey out */
.add-btn-detail.disabled,
.add-btn-detail:disabled {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

  .add-btn-detail img{
    margin-bottom: 3px;
  }
  .detailicon .fa-solid{
    font-size: 28px;
    color: #3B6939;
  }
  .pricedetail {
    color: #4CAF50;
    font-size: 18px;
    line-height: 20.7px;
    font-weight: 400;
    margin: 0px 5px 0px 0px;
}
.bg-successs{
    background-color: #BCF0B4;
    color: #002204;
    border-radius: 12px;
}
.text-successes{
    color: #4CAF50;
}
.header2icon{
    margin-top: 10px;
    font-size: 20px;
}
.header2cart{
    margin-top: 10px;
}
.prodetailheading h4 {
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
}
.prodetailheading p {
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
}
.prodetailheading p span{
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
}
.prodetailheading h6{
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
}
.store-info {
    font-size: 12px;
    background: #BCF0B4;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 5px 10px;
    margin-top: 25px;
    font-weight: 400;
}

.store-info span:nth-child(2) {
    color: black;
}
.cardpadding{
    padding: 0px 15px 0px 10px;
}
.searchtext h4{
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
  }
  .searchtext p{
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
  }
  /* Default styling (desktop) */
.fixed-bottom-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.otherproductmargin{
    margin-bottom: 0px;
}
.product-detail-footer{
    display: block;
}
.footerpricemobile{
    display: none;
}
.pricepopup {
    color: #4CAF50;
    font-size: 18px;
    line-height: 20.7px;
    font-weight: 400;
}

  .cart-sidebar {
    z-index:99999;
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
    /* -ms-overflow-style: none;
    scrollbar-width: none;  */
  }
  .cart-sidebar.show {
    transform: translateX(0);
  }

  /* Cart Overlay */
  .cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  .cart-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* Ensure cart sidebar content is visible when shown */
  .cart-sidebar.show > div {
    display: flex !important;
    visibility: visible !important;
  }

  .cart-sidebar.show h5,
  .cart-sidebar.show .btn-close,
  .cart-sidebar.show .btn-close-cart {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .delivery-toggle-btn {
    padding: 10px 20px;
    background-color: #fff;
    color: #333;
    border: 1px solid #87CEEB;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
  }

  .delivery-toggle-btn:hover {
    background-color: #f8f9fa;
    border-color: #5fb3d3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }

  .delivery-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .delivery-toggle-btn i {
    font-size: 16px;
    color: #333;
  }

  /* Mobile responsive styles for delivery toggle button */
  @media (max-width: 768px) {
      .breadcrumb-product{
          display: none;
      }
      
    .delivery-toggle-btn {
      padding: 8px 16px;
      font-size: 13px;
      border-radius: 6px;
      width: auto;
      min-width: 140px;
    }

    .delivery-toggle-btn i {
      font-size: 14px;
    }
  }
  #deliveryOptions{
    background-color: #F9F9F9;
    padding: 10px 20px;
  }

  .grocery-header {
    background-color: #f1f1f1;
  }
  .progress-bar {
    height: 8px;
    border-radius: 4px;
    background-color: #3B6939 !important;
  }
  .free-delivery-alert {
    background-color: #fef7e0;
    border-left: 4px solid #f9a825;
    padding: 10px 15px;
    border-radius: 5px;
  }
  /* .accordion-button::after {
    background-image: none;
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  .accordion-button.collapsed::after {
    content: "\f054";
  } */
  .wallet-box i {
    color: #28a745;
  }
  .toggle-bill-btn {
    background: none;
    border: none;
    font-weight: bold;
    color: #198754;
    display: flex;
    align-items: center;
  }
  .toggle-bill-btn i {
    margin-left: 5px;
  }


  .grand-total-box {
    background: #fff;
    border-radius: 10px;
    display:flex;
    justify-content:space-between;
  }

  .grand-total-box h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .total-row .prices {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .total-row .prices del {
    color: #888;
  }

  .saved-tag {
    background-color: #d4f8d4;
    color: #228b22;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: 6px;
    display: inline-block;
  }

  .bottom-bar {
    position: relative;
    padding: 10px 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    flex-shrink: 0;
  }

  /* Ensure cart sidebar uses flexbox layout */
  .cart-sidebar {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Scrollable content area */
  .cart-scrollable-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }

  /* Desktop cart sidebar specific styling */
  #cartSidebar {
    display: flex !important;
    flex-direction: column !important;
  }

  #cartSidebar .bottom-bar {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    background: white;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 0;
  }

  #cartSidebar .cart-scrollable-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }

    /* Cart Item Product Name Truncation */
    .cart-item p.mb-0 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        margin-bottom: 0 !important;
        max-width: 100%;
        position: relative;
        cursor: pointer;
        line-height: 1.4;
        min-height: 30px; /* Ensure consistent height for both short and long names */
    }

  /* Tooltip for cart item product name */
  .cart-item p.mb-0[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    white-space: normal;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    word-wrap: break-word;
    line-height: 1.4;
  }

  .cart-item p.mb-0[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 15px;
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1001;
    margin-bottom: -1px;
  }

  /* Ensure cart item layout doesn't break */
  .cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
  }

  .cart-item .totalimg {
    flex: 0 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    max-width: calc(100% - 102px);
  }

  .cart-item .totalimg img {
    flex-shrink: 0;
    width: 50px;
    height: auto;
  }

  .cart-item .totalimg > div {
    min-width: 120px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
    max-width: 100%;
    overflow: hidden;
  }

  .cart-item .sidecartbutton {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    margin-left: auto;
  }

  /* Make quantity buttons smaller - Global */
  .sidecartbutton .btn-danger,
  .sidecartbutton .decrement-btn,
  .sidecartbutton .increment-btn {
    padding: 2px 4px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    width: 20px !important;
    height: 22px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
  }

  /* Make quantity input smaller - Global */
  .sidecartbutton .quantity-input,
  .sidecartbutton .form-control {
    padding: 0px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 22px !important;
    font-size: 11px !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Reduce input-group size - Global */
  .sidecartbutton.input-group-sm,
  .sidecartbutton.input-group {
    height: 22px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
  }

  .sidecartbutton.input-group-sm > .btn,
  .sidecartbutton.input-group-sm > .form-control,
  .sidecartbutton.input-group > .btn,
  .sidecartbutton.input-group > .form-control {
    height: 22px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* Coupons Link Styling with Cursor Pointer Only */
  .cart-business-group a.text-danger,
  .cart-business-group a.coupon-link {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .cart-business-group a.text-danger:hover,
  .cart-business-group a.coupon-link:hover {
    text-decoration: underline;
  }

  /* Mobile Cart Business Group Spacing */
  @media (max-width: 768px) {
    .cart-business-group {
      /* padding-left: 15px;
      padding-right: 15px; */
      margin-left: 0;
      margin-right: 0;
      gap: 10px;
    }

    .cart-business-group h6 {
      margin: 0;
      flex: 1;
    }

    .cart-business-group h6:first-child {
      text-align: left;
      padding-right: 5px;
    }

    .cart-business-group h6:last-child {
      text-align: right;
      padding-left: 5px;
    }

    .cart-business-group a {
      display: inline-block;
    }
  }

  .delivery-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 20px 10px;
    border-bottom: 1px solid #eee;
  }

  .delivery-left {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .delivery-left i {
    font-size: 20px;
    color: #f97316;
  }

  .delivery-text {
    font-size: 14px;
  }

  .delivery-text .label {
    font-weight: bold;
  }

  .change-link {
    color: #f97316;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
  }

  .proceed-btn {
    background-color: #f97316;
    color: white;
    width: calc(100% - 40px);
    margin: 10px 20px;
    padding: 14px;
    text-align: center;
    border-radius: 999px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
  }
  .proceed-btn,
  .proceed-btn * {
    font-size: 16px !important;
    font-weight: bold !important;
  }
  .totalimg img{
      height:60px;
      width:60px;
  }
  .rupee-symbol-sidecart{
        font-size: 16px !important;
        font-weight: bold !important;
        position: relative;
        top: 0;
        margin-right: -4px;
    }
    .sidecartbutton .btn-danger {
        color: #fff;
        background-color: #e94412;
        border-color: #e94412;
        padding: 2px 4px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        width: 20px !important;
        height: 22px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
    }
    .sidecartbutton .btn-danger:hover {
        color: #fff;
        background-color: #e94412;
        border-color: #e94412;
    }

    /* Make quantity input smaller in mobile */
    .sidecartbutton .quantity-input {
        padding: 0px !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 22px !important;
        font-size: 11px !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Reduce input-group size in mobile */
    .sidecartbutton.input-group-sm {
        height: 22px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .sidecartbutton.input-group-sm > .btn,
    .sidecartbutton.input-group-sm > .form-control {
        height: 22px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    .gotostore a {
        text-decoration: none;
    }
    .grand-total-box h6{
        font-size: 18px;
        font-weight: 700;
        line-height: 100%;
    }
    .grand-total-box h3{
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
    }
    .overlay-det {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4); /* Light black */
        z-index: 999;
        display: none;
      }

      /* Side cart style */
      .sidecart-det {
        position: fixed;
        right: -300px;
        top: 0;
        width: 300px;
        height: 100%;
        background: white;
        box-shadow: -2px 0 5px rgba(0,0,0,0.5);
        z-index: 1000;
        transition: right 0.3s ease;
      }
      .sidecart-det.active {
        right: 0;
      }
      .overlay-det.active {
        display: block;
      }
      .freedelivery{
        display: flex;
        justify-content: space-between;
      }
      .accordion-button {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 5px 5px;
        font-size: 16px;
        color: #212529;
        text-align: left;
        background-color: #FFF8F6;
        border: 0px;
        border-radius: 12px !important;
        overflow-anchor: none;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
    }
    .accordion-item {
        background-color: #FFF8F6;
    }
    .accordion-item:last-of-type {
        border: 0px;
        border-bottom-right-radius:12px;
        border-bottom-left-radius:12px;
    }
    .accordion-item:first-of-type {
         border-top-left-radius:12px;
         border-top-right-radius:12px;
    }
    .accordion-button:focus {
        z-index: 3;
        border-color: #86b7fe00;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgb(13 110 253 / 0%);
    }
    .profile-card {
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
        position: relative;
      }

      .profile-edit-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        color: orange;
        font-size: 14px;
        text-decoration: none;
      }

      .profile-wallet {
        background-color:rgb(255, 255, 255);
        border-radius: 12px;
        padding: 20px;
        color: green;
        font-size: 24px;
      }

      .profile-sidebar {
        background-color: #fff;
        border-radius: 12px;
        padding: 10px 0;
      }

      .profile-tab-btn {
        display: block;
        padding: 12px 20px;
        color: #333;
        text-decoration: none;
        transition: all 0.3s;
      }

      .profile-tab-btn:hover {
        background-color: #f1f1f1;
      }

      .profile-tab-btn.active {
        background: linear-gradient(to top, #DDF7D9, #FFFFFF);
        color: green;
        font-weight: bold;
      }

      .profile-order-box {
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
      }

      .profile-order-card {
        background-color: #f8f8f8;
        border-radius: 12px;
        padding: 15px;
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
        position: relative;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
      }

      .profile-order-img {
        width: 190px;
        height: 148px;
        object-fit: cover;
        border-radius: 10px;
      }

      .profile-order-details {
        flex-grow: 1;
      }

      .profile-order-status-wrapper {
        position: absolute;
        top: 45px;
        right: 15px;
        z-index: 10;
      }

      @media (max-width: 768px) {
        .profile-order-status-wrapper {
          top: 40px;
          right: 10px;
        }
      }

      .profile-total-badge {
        position: absolute;
        top: 10px;
        right: 15px;
        background-color: #e6f8ea;
        color: green;
        font-weight: 500;
        padding: 5px 10px;
        border-radius: 8px;
        font-size: 14px;
      }

      .delivery-status-badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .profile-action-links a {
        color: red;
        font-weight: bold;
        text-decoration: none;
        margin-right: 10px;
      }

      .profile-action-links a.cancel-order-btn.disabled {
        color: #999 !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        text-decoration: none !important;
      }

      .profile-user-info h6 {
        margin-bottom: 0;
      }

      .profile-user-info small {
        display: block;
        color: gray;
      }

      .profile-tab-content {
        display: none;
      }

      .profile-tab-content.active {
        display: block;
      }
      .profilephoto img{
        height:80px;
        width:80px;
      }
      .address-wrapper {
        max-width: 800px;
        margin: 0 auto;
      }

      .address-wrapper h3 {
        margin-bottom: 20px;
      }

      .add-address-box {
        background: #F9F9F9;
        color: #E94412;
        font-weight: 700;
        text-align: center;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 24px;
      }

      .address-card {
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background: #fff;
        position: relative;
      }

      .address-card.selected {
        border: 1px solid #ccc;
        background: #fefefe;
      }

      .address-left {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        max-width: 85%;
      }

      .icon {
        width: 30px;
        height: 30px;
      }

      .address-icon {
        font-size: 28px;
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        flex-shrink: 0;
      }

      .address-left strong {
        display: block;
        font-size: 16px;
        margin-bottom: 4px;
      }

      .address-left p {
        font-size: 14px;
        margin: 0;
        color: #333;
      }

      .address-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
      }

      .check {
        color: green;
        font-size: 18px;
      }

      .dropdown-wrapper {
        position: relative;
      }

      .options {
        color: #ff4d00;
        font-size: 24px;
        cursor: pointer;
      }

      .dropdown-menu {
        position: absolute;
        top: 28px;
        right: 0;
        background-color: white;
        border: 1px solid #ccc;
        width: 100px;
        display: none;
        flex-direction: column;
        border-radius: 4px;
        z-index: 1000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      }

      .dropdown-menu div {
        padding: 10px;
        cursor: pointer;
        font-size: 14px;
      }

      .dropdown-menu div:hover {
        background-color: #f2f2f2;
      }
      .profile-coupon-card {
    background: linear-gradient(to right, #f6f9ff, #fefeff);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.3s ease;
  }

  .profile-coupon-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .profile-coupon-card h5 {
    font-weight: 700;
    font-size: 1.25rem;
    color: #333;
  }

  .profile-coupon-card p {
    margin-bottom: 4px;
  }

  .profile-coupon-footer {
    position: absolute;
    bottom: 10px;
    right: 16px;
  }

  .profile-logo-img {
    width: 25px;
    height: auto;
  }
  .profile-referral-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
  }

  .profile-referral-step {
    position: absolute;
    top: -10px;
    left: -10px;
    background-color: #6edc86;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
  }

  .profile-referral-btn {
    border: none;
    color: white;
    font-weight: 500;
    font-size: 16px;
    border-radius: 30px;
    padding: 12px 32px;
    width: 100%;
    max-width: 500px;
  }

  .profile-whatsapp-btn {
    background-color: #f1542a;
  }

  .profile-link-btn {
    background-color: #f1542a;
  }

  .profile-referral-steps p {
    font-size: 14px;
    color: #222;
  }
  .mypopup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .mypopup-content {
    background: #fff;
    width: 100%;
    max-width: 400px;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
  }

  .mypopup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }

  .mypopup-header h2 {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
  }

  .mypopup-close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
  }

  .mypopup-image {
    margin-top: 20px;
    text-align: center;
  }

  .mypopup-image img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .mypopup-image-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .mypopup-image-links a {
    color: #e54812;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
  }

  .mypopup-image-links a:hover {
    text-decoration: underline;
  }

  .mypopup-form {
    margin-top: 25px;
  }

  .mypopup-form input {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 15px;
    margin-bottom: 15px;
    outline: none;
    box-sizing: border-box;
  }

  .mypopup-form button {
    width: 100%;
    background-color: #e54812;
    color: white;
    padding: 14px;
    font-size: 17px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
  }

  .mypopup-form button:hover {
    background-color: #d03e0e;
  }
  .pricepopupaccount {
    color: #4CAF50;
    font-size: 40px;
    line-height: 35.7px;
    font-weight: 400;
}
.rupee-symbolaccount {
    font-size: 20px;
    position: relative;
    top: -15px;
    margin-right: -10px;
}
.storedetailanchor a{
    text-decoration: none;
    color: black;
}
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25);
}
.location-boxs {
    background: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    width: fit-content;
    cursor: pointer;
    margin: 20px;
  }

  .location-boxs i {
    color: #4CAF50;
  }

  .locations-text {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 140px);
  }

  .dropdown-icon {
    margin-left: auto;
    color: #333;
  }

  .addpop-popup {
    position: fixed;
    top: 80px !important;
    left: 120px !important;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: fit-content;
    display: none;
    z-index: 99999999;
  }

  .addpop-title {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
  }

  .addpop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    overflow: visible;
    z-index: 1;
  }

  .addpop-detect-btn {
    background: #eb4d25;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }

  .addpop-or-text {
    font-weight: 500;
    color: #777;
  }

  .addpop-search-input {
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 25px;
    outline: none;
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  /* Overlay */
  .addpop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 99999999;
  }

  .addpop-overlay.addpop-visible {
    display: block;
  }

  @media (max-width: 768px) {
    .addpop-overlay.addpop-visible {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
  .swal2-container {
    z-index: 9999999;
  }
  .pata-add-new-address {
    padding: 10px 20px;
    background-color: #f97316;
    color: #fff;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    margin: 20px;
    font-weight: 600;
  }

  .pata-sidebar-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 40%;
    height: 100%;
    background: #fff;
    z-index: 1050;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.4s ease-in-out;
    overflow-y: auto;
    z-index: 99999999;
  }

  .pata-sidebar-overlay.active {
    right: 0;
  }

  .pata-sidebar-header {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  }

  .pata-back-btn {
    font-size: 22px;
    cursor: pointer;
    margin-right: 10px;
  }

  #pata-map {
    height: 200px;
    width: 100%;
    border-radius: 10px;
    margin: 10px 0;
  }

  .pata-location-title {
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .pata-location-desc {
    color: #555;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .pata-tag-buttons button {
    width: 48%;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    transition: all 0.2s;
  }

  .pata-home {
    background: #f0fdf4;
    color: #22c55e;
  }

  .pata-home.active {
    border-color: #22c55e;
    color: #22c55e;
  }

  .pata-work {
    background: #fff7ed;
    color: #f97316;
  }

  .pata-work.active {
    border-color: #22c55e;
    color: #22c55e;
  }

  .pata-input input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 12px;
    font-size: 14px;
  }

  .pata-save-btn {
    width: 100%;
    background: #f97316;
    color: white;
    padding: 12px;
    border-radius: 25px;
    border: none;
    font-weight: bold;
    margin-top: 10px;
    font-size: 16px;
  }
  .pataoverflow{
    overflow-y: scroll;
    height: 618px;
  }
  .add-buttonminus {
    background-color: #ea4b1d;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
.invoicebtn .btn{
  border-color:#E94412;
  background-color:#F5DED8;
}
.delivery-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f9f9f9;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      /* max-width: 600px; */
      /* margin: 20px auto; */
    }

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

    .profile-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .details {
      line-height: 1.2;
    }

    .details .name {
      font-weight: 600;
      font-size: 16px;
    }

    .details .company {
      font-size: 13px;
      color: #777;
    }

    .company span {
      font-weight: bold;
      color: #0073e6;
    }

    .call-icon {
      width: 36px;
      height: 36px;
      border: 2px solid #e65100;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e65100;
      font-size: 16px;
    }

    .newbackground{
      background-color:#F9F9F9;
      padding:10px;
      border-radius:8px;
    }
    .newbackground .fa{
      font-size: 25px;
      margin: 10px 10px 0px 0px;
    }

    /* Responsive */
    @media (max-width: 480px) {
      .delivery-card {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 12px;
      }

      .call-icon {
        align-self: flex-end;
      }
      
      /* Vendor Registration - Extra Small Screens */
      .registrationspace {
        margin-top: 70px;
      }
      .register-section {
        padding: 0 8px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      .image-container {
        min-height: 240px;
        max-height: 300px;
        padding: 8px;
        margin-bottom: 15px;
      }
      .green-bg {
        width: 140px;
        height: 140px;
      }
      .main-image {
        width: 200px;
        max-width: 80%;
        left: 10px;
        bottom: 25px;
      }
      .fruit-image {
        width: 140px;
        max-width: 60%;
        bottom: -35px;
      }
      .info-box {
        width: 70px;
        max-width: 25%;
        padding: 4px 3px;
        font-size: 5.5px;
        border-radius: 5px;
      }
      .info-box i {
        font-size: 7px;
        margin-right: 2px;
      }
      .info-box span {
        font-size: 5.5px;
        line-height: 1.2;
      }
      .info-box strong {
        font-size: 6.5px;
        margin-bottom: 1px;
      }
      .info-box-1 {
        top: 5px;
        right: 2%;
      }
      .info-box-2 {
        bottom: 60px;
        left: 2%;
      }
      .info-box-3 {
        bottom: 5px;
        right: 2%;
      }
      .form-section {
        padding: 15px 12px;
      }
      .form-section h3 {
        font-size: 20px;
        margin-bottom: 15px;
      }
      .form-section .form-control {
        font-size: 13px;
        padding: 10px 12px;
      }
      .map-container {
        height: 220px;
      }
      .confirm-btn {
        font-size: 14px;
        padding: 12px;
      }
      .steps-container {
        padding: 15px 10px;
      }
      .steps-container h2 {
        font-size: 20px;
        margin-bottom: 20px;
      }
      .step-box {
        padding: 15px 12px;
        margin-bottom: 30px;
      }
      .step-number {
        top: -18px;
        left: 12px;
        padding: 3px 12px;
        font-size: 16px;
      }
      .step-title {
        font-size: 16px;
        padding: 10px 0 6px 0;
      }
      .step-box p {
        font-size: 13px;
        margin-bottom: 12px;
      }
      .step-box ul li {
        font-size: 13px;
        margin-bottom: 8px;
      }
      .cta-section {
        padding: 18px 12px;
        gap: 12px;
      }
      .cta-text h2 {
        font-size: 18px;
        margin-bottom: 8px;
      }
      .cta-text p {
        font-size: 13px;
        margin-bottom: 12px;
      }
      .cta-btn {
        font-size: 13px;
        padding: 10px 20px;
      }
      .cta-image img {
        max-width: 100px;
      }
      .why {
        font-size: 20px;
        margin-bottom: 15px;
      }
      .feature-box1 {
        width: 70px;
        height: 70px;
        margin-bottom: 12px;
      }
      .feature-box1 i {
        font-size: 26px;
      }
      .feature-heading {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 8px;
      }
      .feature-description {
        font-size: 13px;
      }
    }

  @media (max-width: 576px) {
    .pata-sidebar-overlay {
      width: 100%;
    }
  }





/* Mobile-specific: Fix entire section at the bottom */
@media (max-width: 768px) {
    /* Ensure mobile bar and add-to-cart show on product details - above bottom nav */
    .footerpricemobile,
    .fixed-bottom-mobile.footerpricemobile {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Add-to-cart bar: same GPU/compositing as bottom-nav so Chrome keeps it fixed (like Safari) */
    .fixed-bottom-mobile {
        position: fixed;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 10px 15px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Add-to-cart bar above bottom nav (Kwiklly/Department/Store/Login) so both visible in Chrome & Safari */
    .fixed-bottom-mobile.footerpricemobile {
        bottom: 60px;
    }

    /* Product details: leave space so content is not hidden under add bar + bottom nav */
    section.product-details-section {
        padding-bottom:0px;
    }

    /* Footer on mobile: space above bottom nav so footer content is visible when scrolled */
    .footer-section {
        padding-bottom: 70px;
    }

    /* Product details page: footer needs extra space (add bar + bottom nav) */
    body.product-details-page .footer-section {
        padding-bottom: 140px;
    }

    /* Breadcrumb on product details: single line with ellipsis on mobile */
    .breadcrumb-product {
        font-size: 12px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 8px;
        margin-top: 6px;
        margin-bottom: 0.5rem;
        max-width: 100%;
    }

    .price-container-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Price Styling */
    .final-price-mobile {
        font-size: 16px;
        font-weight: 700;
        color: #009c24; /* Green */
    }

    .original-price-mobile {
        font-size: 14px;
        text-decoration: line-through;
        color: #666;
        margin-left: 8px;
    }

    .discount-badge-mobile {
        background: #d4f4cc; /* Light Green */
        color: #000;
        font-size: 14px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 10px;
        margin-left: 8px;
    }

    .tax-info-mobile {
        font-size: 0.85rem;
        color: #666;
        margin-top: 5px;
    }

    /* Add to Cart Button - ensure visible on mobile */
    .add-btn-mobile {
        background-color: #e3431d;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        border: none;
        padding: 6px 18px;
        border-radius: 10px;
        display: flex !important;
        align-items: center;
        gap: 0px;
        cursor: pointer;
        justify-content: center;
        white-space: nowrap;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Quantity controls in mobile fixed bar - same design as web view */
    .qty-container-mobile,
    .fixed-bottom-mobile .qty-container,
    .fixed-bottom-mobile .qty-container-mobile {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
        width: 75px;
        margin-left: 0;
        margin-right: auto;
        padding: 2px 0;
    }

    .qty-btn-mobile,
    .fixed-bottom-mobile .qty-btn {
        background: #E94412 !important;
        color: white !important;
        border: none !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        line-height: 28px !important;
        text-align: center !important;
        cursor: pointer;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        transition: 0.3s ease-in-out;
    }

    .qty-input-mobile,
    .fixed-bottom-mobile .qty-input {
        width: 26px !important;
        height: 28px !important;
        text-align: center !important;
        font-size: 13px !important;
        border: 1px solid #ddd !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Disabled Add button mobile - grey out */
    .add-btn-mobile.disabled,
    .add-btn-mobile:disabled {
        background: #cccccc !important;
        color: #666666 !important;
        cursor: not-allowed !important;
        opacity: 0.6;
    }

    .add-btn-mobile i {
        font-size: 1.2rem;
    }

    /* When JS injects Add button in mobile bar (after decrement to 0), style like add-btn-mobile */
    .fixed-bottom-mobile .add-btn {
        background-color: #e3431d !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border: none !important;
        padding: 6px 18px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .addpop-popup {
        position: fixed;
        top: 0;
        left: 0 !important;
        width:100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: 30px 20px 20px;
        display: flex;
        flex-direction: column;
        background: #fff;
        transform: translateY(100%);
        transition: transform 0.4s ease-in-out, opacity 0.3s;
        opacity: 0;
        visibility: hidden;
        z-index: 100000000;
      }

      .addpop-popup.addpop-mobile-active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        top: 0;
        bottom: 0;
        margin-top: 30px;
      }

      .addpop-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        background: #f0f0f000;
        border: none;
        font-size: 30px;
        font-weight: 700;
        cursor: pointer;
        color: #333;
        z-index: 10000;
        display: block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0);
        line-height: 1;
        text-align: center;
        padding: 0;
      }
      .addpop-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .addpop-detect-btn {
        background: #eb4d25;
        color: white;
        padding: 10px 75px;
        border: none;
        border-radius: 25px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }
    .location-boxs {
        background: #ffffff00;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0%);
        border-radius: 12px;
        padding: 10px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        cursor: pointer;
        margin: 0px;
    }
    .addpop-title {
        font-weight: 700;
        margin-bottom: 30px;
        font-size: 17.5px;
    }
    .dropdown-menu {
        position: relative !important;
        inset: -40px auto auto -1px !important;
        margin: 0px;
        transform: translate3d(0px, 40px, 0px);
        background-color: white;
        border: 1px solid #ccc;
        width: 100px;
        display: none;
        flex-direction: column;
        border-radius: 4px;
        z-index: 1000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      }
}

 /* Hide close button on desktop */
 @media (min-width: 769px) {
    .addpop-close-btn {
      display: none;
    }

    .addpop-popup.addpop-desktop-active {
        position:fixed;
      display: block;
    }
  }

.store-banner-section {
    padding-top: 45px !important;
    margin-top: 40px !important;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    /* Prevent horizontal scrollbar globally */
    html {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative;
    }
    
    .navbar {
        background-color: #f2fbe9;
        padding: 10px 0px;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1050 !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .navbar .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        position: relative;
        /* Ensure suggestions stay within navbar */
        z-index: 1050;
    }
    
    .mobile-top {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .navbar-brand {
        max-width: 50% !important;
        overflow: hidden !important;
    }
    
    .navbar-brand img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .cart-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Prevent navbar from moving on scroll */
    html {
        scroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Add padding to body to prevent content from going under fixed navbar */
    body {
        padding-top: 0;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent iOS Safari address bar from affecting navbar */
    @supports (-webkit-touch-callout: none) {
        .navbar.fixed-top {
            position: fixed !important;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
    .desktop-menu {
        display: none !important; /* Hide desktop menu */
    }

    .bottom-nav {
        display: flex;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Mobile Cart Sidebar Full Width */
    #cartSidebar2 {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        right: 0 !important;
    }

    /* Mobile cart header - ensure visibility */
    .cart-header-mobile,
    #cartSidebar2 > div:first-child,
    #cartSidebar2 .cart-header-mobile {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        position: relative !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: white !important;
    }

    /* Mobile cart header h5 - always visible */
    .cart-header-mobile h5,
    .cart-header-mobile h5.fw-bold,
    #cartSidebar2 .cart-header-mobile h5,
    #cartSidebar2 > div:first-child h5.fw-bold,
    #cartSidebar2 h5.fw-bold {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #000 !important;
        font-weight: bold !important;
    }

    /* Mobile cart close button - always visible */
    .cart-header-mobile .btn-close-cart,
    #cartSidebar2 .cart-header-mobile .btn-close-cart,
    #cartSidebar2 .btn-close-cart,
    #cartSidebar2 > div:first-child .btn-close,
    #cartSidebar2 .btn-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 5px 10px !important;
        font-size: 24px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        color: #000 !important;
        line-height: 1 !important;
    }

    .cart-header-mobile .btn-close-cart i,
    #cartSidebar2 .btn-close-cart i,
    #cartSidebar2 .cart-header-mobile .btn-close-cart i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000 !important;
        font-size: 24px !important;
    }

    /* Ensure mobile cart sidebar shows properly when .show class is added */
    #cartSidebar2.show {
        transform: translateX(0) !important;
        right: 0 !important;
    }

    #cartSidebar2.show .cart-header-mobile,
    #cartSidebar2.show > div:first-child {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Cart Overlay for Mobile */
    .cart-overlay.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile bottom bar styling - Always visible by default */
    #cartSidebar2 .bottom-bar {
        position: relative !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        background: white !important;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Reduced padding to move up - cross-browser compatible */
        padding-top: 12px !important;
        /* Fallback for browsers that don't support env() */
        padding-bottom: 62px !important;
        /* Modern browsers with safe area support */
        padding-bottom: calc(12px + max(env(safe-area-inset-bottom, 0px), 50px)) !important;
    }

    /* Mobile cart scrollable content - Auto adjust without whitespace */
    #cartSidebar2 .cart-scrollable-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        width: 100% !important;
        /* Remove extra padding to avoid whitespace */
        padding-bottom: 0 !important;
        /* Smooth scrolling for better UX */
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }

    /* Mobile cart bottom bar - specific styling - Always visible */
    #cartSidebar2 .mobile-cart-bottom-bar {
        position: relative !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        background: white !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Reduced padding to move up */
        padding-top: 12px !important;
        /* Fallback for browsers that don't support env() */
        padding-bottom: 62px !important;
        /* Modern browsers with safe area support */
        padding-bottom: calc(12px + max(env(safe-area-inset-bottom, 0px), 10px)) !important;
    }

    /* Mobile cart proceed button - ensure it's visible above browser bar - Always visible */
    #cartSidebar2 .mobile-cart-bottom-bar .proceed-btn {
        margin: 0 20px !important;
        margin-bottom: 0 !important;
        padding: 14px !important;
        border-radius: 48px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
    }

    /* Ensure cart sidebar maintains proper layout - no whitespace */
    #cartSidebar2 {
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    /* Prevent whitespace in cart items wrapper */
    #cartItemsWrapperMobile {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }

    /* Ensure bottom bar stays at bottom on all browsers */
    #cartSidebar2 .mobile-cart-bottom-bar {
        margin-top: auto !important;
    }

    /* Fix quantity buttons alignment in mobile view - prevent centering */
    .qty-box,
    .qty-box * {
        text-align: center !important;
        justify-content: flex-start !important;
    }

    .qty-box .qty-container,
    .qty-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        width: auto !important;
        min-width: 75px;
    }

    .qty-box .qty-btn,
    .qty-btn {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .price-container .qty-box {
        text-align: left !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Adjust layout for mobile */
    .mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    .search-container {
        margin-top: 10px;
        width: 100%;
        position: relative;
        overflow: visible !important;
        z-index: 1001;
    }
    
    .search-container.d-md-none {
        margin-top: 10px;
        width: 100%;
        position: relative;
        overflow: visible !important;
        z-index: 1001;
    }

/* Mobile Search Suggestions - Fixed within navbar */
#mobile-suggestions-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10001 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    /* Ensure it stays within navbar container */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#mobile-search-form {
    position: relative;
    z-index: 10000 !important;
}

#mobile-suggestions-box .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}

#mobile-suggestions-box .list-group-item:hover,
#mobile-suggestions-box .list-group-item:active {
    background-color: #f8f9fa;
}

#mobile-suggestions-box .list-group-item:last-child {
    border-bottom: none;
}

#mobile-suggestions-box .list-group-item img {
    width: 35px !important;
    height: 35px !important;
}

/* Fix for mobile search suggestions visibility */
#mobile-search-form {
    position: relative;
}

#mobile-suggestions-box {
    z-index: 10001 !important;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    /* Position will be set by JavaScript for mobile */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When suggestions are visible on mobile, use fixed positioning */
@media (max-width: 768px) {
    #mobile-suggestions-box:not(.d-none) {
        position: fixed !important;
        /* JavaScript will set exact top, left, width values */
    }
}

#mobile-suggestions-box .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}

#mobile-suggestions-box .list-group-item:hover,
#mobile-suggestions-box .list-group-item:active {
    background-color: #f8f9fa;
}

#mobile-suggestions-box .list-group-item:last-child {
    border-bottom: none;
}

#mobile-suggestions-box .list-group-item img {
    width: 35px !important;
    height: 35px !important;
}

/* Ensure mobile search form has proper positioning */
.search-container.d-md-none {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
}

/* Navbar should contain suggestions and not scroll */
.navbar {
    overflow: visible !important;
}

/* Prevent navbar from scrolling when suggestions are shown */
.navbar:has(#mobile-suggestions-box:not(.d-none)) {
    overflow: visible !important;
    position: fixed !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Ensure suggestions stay within navbar bounds */
.navbar .container-fluid {
    position: relative;
    overflow: visible !important;
}

/* Mobile suggestions box - keep within navbar */
#mobile-suggestions-box {
    z-index: 10001 !important;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Ensure it stays within navbar and doesn't go below banner */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Prevent suggestions from pushing content down */
    position: fixed !important;
    top: auto !important;
    /* Calculate position relative to search form */
}

/* When suggestions are visible, position them below search form */
#mobile-search-form:has(+ #mobile-suggestions-box:not(.d-none)) {
    position: relative;
    z-index: 10000;
}

/* Alternative approach - use JavaScript to calculate position */
#mobile-suggestions-box:not(.d-none) {
    position: fixed !important;
    padding: 16px 12px;
    margin-top: 55px;
}

/* Prevent body scroll when suggestions are visible */
body.suggestions-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

    #mobile-suggestions-box .list-group-item {
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 15px;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 14px;
    }

    #mobile-suggestions-box .list-group-item:hover,
    #mobile-suggestions-box .list-group-item:active {
        background-color: #f8f9fa;
    }

    #mobile-suggestions-box .list-group-item:last-child {
        border-bottom: none;
    }

    #mobile-suggestions-box .list-group-item img {
        width: 35px !important;
        height: 35px !important;
    }
    .bannerimg{
        display: none;
    }
    /* Mobile Carousel Image Border Radius */
    #mobileSlider {
        margin: 10px 0;
        padding: 0px;
    }
    #mobileSlider .carousel-inner {
        border-radius: 10px;
        overflow: hidden;
    }
    #mobileSlider .carousel-item {
        border-radius: 10px;
        overflow: hidden;
    }
    #mobileSlider .carousel-item img {
        border-radius: 10px;
        width: 100%;
        height: auto;
        display: block;
    }
    /* Mobile Carousel - 2 items per row */
    .owl-carousel .owl-stage-outer {
        overflow: visible;
        padding: 0 5px;
    }
    
    .owl-carousel .owl-stage {
        display: flex;
    }
    
    /* Ensure each item takes exactly 50% width minus margin */
    .owl-carousel .owl-item {
        width: calc((100% - 10px) / 2) !important;
        min-width: calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
        padding: 0 5px;
    }
    
    /* Single item carousel - maintain proper width like multiple items */
    .owl-carousel.single-item-carousel {
        position: relative;
    }
    
    .owl-carousel.single-item-carousel .owl-stage-outer {
        overflow: visible !important;
        position: relative;
    }
    
    /* Hide empty items in single item carousel */
    .owl-carousel.single-item-carousel .owl-item:not(:first-child) {
        display: none !important;
    }
    
    /* Mobile: Single item should be 50% width (2 items per row) */
    .owl-carousel.single-item-carousel .owl-item {
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        box-sizing: border-box;
    }
    
    /* Desktop: Single item should be 25% width (4 items per row) */
    @media (min-width: 768px) {
        .owl-carousel.single-item-carousel .owl-item {
            width: 25% !important;
            min-width: 25% !important;
            max-width: 25% !important;
            flex: 0 0 25% !important;
        }
    }
    
    /* Left align the single item */
    .owl-carousel.single-item-carousel .owl-stage {
        display: flex !important;
        justify-content: flex-start !important;
        transform: translateX(0) !important;
    }
    
    /* Ensure product card in single item maintains proper width and design */
    .owl-carousel.single-item-carousel .product-card {
        max-width: 200px !important;
        width: 185px !important;
        margin: 0 !important;
    }
    
    /* Hide navigation arrows for single item carousel */
    .owl-carousel.single-item-carousel .owl-nav {
        display: none !important;
    }
    
    /* Show navigation on mobile */
    .owl-carousel .owl-nav {
        display: block !important;
    }
    
    .owl-carousel .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.95) !important;
        color: #4CAF50 !important;
        border: 1px solid #4CAF50 !important;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        padding: 0;
        margin: 0;
    }
    
    .owl-carousel .owl-nav button.owl-prev {
        left: -10px;
        display: none !important;
    }
    
    .owl-carousel .owl-nav button.owl-next {
        right: -10px;
        display: none !important;
    }
    
    .owl-carousel .owl-nav button:hover {
        background: #4CAF50 !important;
        color: white !important;
    }
    
    .owl-carousel .owl-nav button:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    .product-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 5px;
        line-height: 16.1px;
        min-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        position: relative;
        cursor: pointer;
    }

    /* Mobile tooltip for product title */
    .product-title[title]:hover::after,
    .product-title[title]:active::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 0;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
        white-space: normal;
        z-index: 1000;
        pointer-events: none;
        margin-bottom: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        max-width: 200px;
        word-wrap: break-word;
        line-height: 1.4;
    }

    .product-title[title]:hover::before,
    .product-title[title]:active::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 15px;
        border: 6px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.9);
        z-index: 1001;
        margin-bottom: -1px;
    }

    /* Mobile cart item product name */
    .cart-item p.mb-0 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        margin-bottom: 0 !important;
        max-width: 100%;
        width: 100%;
        position: relative;
        cursor: pointer;
        line-height: 1.4;
        font-size: 14px;
        min-height: 28px;
    }

    /* Mobile tooltip for cart item */
    .cart-item p.mb-0[title]:hover::after,
    .cart-item p.mb-0[title]:active::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 0;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
        white-space: normal;
        z-index: 1000;
        pointer-events: none;
        margin-bottom: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        max-width: 180px;
        word-wrap: break-word;
        line-height: 1.4;
    }

    .cart-item p.mb-0[title]:hover::before,
    .cart-item p.mb-0[title]:active::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        border: 5px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.9);
        z-index: 1001;
        margin-bottom: -1px;
    }

    /* Ensure cart item layout doesn't break on mobile */
    .cart-item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: nowrap;
        width: 100%;
    }

    .cart-item .totalimg {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        overflow: hidden;
        max-width: calc(100% - 102px);
    }

    .cart-item .totalimg img {
        flex-shrink: 0;
        width: 50px;
        height: auto;
    }

    .cart-item .totalimg > div {
        min-width: 150px;
        flex: 1 1 auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 50px;
        max-width: 100%;
    }

    .cart-item .sidecartbutton {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        margin-left: auto;
    }

    /* Make quantity buttons smaller in mobile view */
    .cart-item .sidecartbutton .btn-danger {
        padding: 2px 4px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        width: 20px !important;
        height: 22px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
    }

    /* Make quantity input smaller in mobile view */
    .cart-item .sidecartbutton .quantity-input {
        padding: 0px !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 22px !important;
        font-size: 11px !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Reduce input-group size in mobile view */
    .cart-item .sidecartbutton.input-group-sm {
        height: 22px !important;
        justify-content: flex-end;
    }

    .cart-item .sidecartbutton.input-group-sm > .btn,
    .cart-item .sidecartbutton.input-group-sm > .form-control {
        height: 22px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    .product-info {
        font-size: 14px;
        color: #53433F;
        font-weight: 400;
        margin-bottom: 5px;
        line-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        min-height: 42px; /* 2 lines height (21px * 2) */
    }
    .original-price {
        text-decoration: line-through;
        color: #53433F;
        font-size: 13px;
        line-height: 21px;
        font-weight: 400;
    }
    .price-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .price-container .price-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
        min-height: 40px; /* Maintain consistent height for 2 lines in mobile */
    }

    .price-container .qty-box {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 8px;
        padding: 2px 0;
    }

    /* Fix qty-container alignment in mobile view */
    .qty-box .qty-container,
    .qty-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        width: auto !important;
        min-width: 80px;
    }

    /* Ensure qty-box doesn't center align */
    .qty-box {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .price {
        font-weight: bold;
        color: #4CAF50;
        font-size: 16px;
        line-height: 18.4px;
        font-weight: 400;
        margin: 0;
    }
    .add-btn {
        background: #E94412;
        font-size: 14px;
        color: white;
        border: none;
        padding: 3px 5px !important;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3sease -in-out;
    }
    .owl-carousel .owl-item .product-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100px;
        object-fit: contain;
        margin: 25px auto 8px;
        padding: 5px;
    }
    .cart-options {
        background: white;
        padding: 1px 6px;
        border-radius: 5px;
        position: absolute;
        bottom: -13px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        font-size: 10px;
    }
    .qty-input {
        width: 25px !important;
        height: 25px !important;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 14px;
        border-radius: 0px;
        flex-shrink: 0;
        margin: 0;
    }

    /* Global fix for quantity container alignment - prevent centering */
    .qty-box {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 0 5px !important;
        padding: 2px 0 !important;
    }

    .qty-box .qty-container,
    .qty-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        padding: 2px 0 !important;
    }
    .mx-2 {
        margin-right: 0rem !important;
        margin-left: .5rem !important;
    }
    .modal.fade .modal-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

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

    .modal-content {
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
    }
    .product-card {
        border: 1px solid #D8C2BC;
        border-radius: 18px !important;
        padding: 14px 12px;
        text-align: left;
        background: white;
        position: relative;
        padding-bottom: 52px;
        min-height: 330px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Mobile Product Image Styling */
    .product-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 180px;
        object-fit: contain;
        display: block;
        margin: 15px auto 10px;
        padding: 5px;
    }

    .product-card .product-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 160px;
        min-height: 140px;
        object-fit: contain;
        display: block;
        margin: 5px auto 8px;
        padding: 5px;
    }
    
    /* Mobile Product Title */
    .product-card .product-title {
        font-size: 14px;
        color: #231917;
        font-weight: 700;
        margin-bottom: 5px;
        margin-top: 0;
        line-height: 18px;
        min-height: 36px;
        max-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        padding: 0;
    }
    
    /* Mobile Product Info */
    .product-card .product-info {
        font-size: 13px;
        color: #53433F;
        font-weight: 400;
        margin-bottom: 10px;
        line-height: 18px;
        padding: 0;
        min-height: 18px;
    }
    
    /* Mobile Price Container */
    .product-card .price-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 10px;
        margin-bottom: 8px;
        gap: 6px;
        flex-wrap: nowrap !important;
        padding-bottom: 38px;
        width: 100%;
    }
    
    /* Prevent scroll on button clicks in mobile */
    button, .btn, .add-btn, .qty-btn, .increment-btn, .decrement-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Prevent unwanted scroll on anchor clicks */
    a[href="#"]:not([data-bs-toggle]):not([data-toggle]):not([data-bs-target]):not([data-target]) {
        -webkit-tap-highlight-color: transparent;
    }
    
    .product-card .price-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 2px;
        flex: 1;
        min-width: 0;
        min-height: 40px;
    }
    
    .product-card .price {
        color: #4CAF50 !important;
        font-size: 16px !important;
        line-height: 18px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        display: block !important;
    }
    
    .product-card .original-price {
        text-decoration: line-through !important;
        color: #53433F !important;
        font-size: 13px !important;
        line-height: 16px !important;
        font-weight: 400 !important;
        display: block !important;
    }
    
    /* Mobile Add Button - Ensure visibility */
    .product-card .add-btn {
        background: #E94412 !important;
        color: white !important;
        border: none !important;
        padding: 6px 12px !important;
        border-radius: 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 70px;
        max-width: 80px;
        height: 30px;
        cursor: pointer !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    .product-card .add-btn:hover {
        background: #d63a0f !important;
    }
    
    .product-card .add-btn img {
        width: 14px !important;
        height: 14px !important;
        margin-left: 4px !important;
        display: inline-block !important;
        filter: brightness(0) invert(1);
    }
    
    .product-card .add-btn.disabled,
    .product-card .add-btn:disabled {
        background: #cccccc !important;
        color: #666666 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    /* Ensure qty-box is visible */
    .product-card .qty-box {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 80px;
    }
    
    /* Mobile Discount Label */
    .product-card .discount-label {
        position: absolute;
        top: 0px;
        left: 0px;
        background: #BCF0B4;
        color: #000000;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 16px 0px 16px 0px;
        z-index: 10;
    }
    
    /* Mobile Store Info */
    .product-card .store-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 11px;
        background: #BCF0B4;
        color: #000;
        padding: 8px 12px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        margin: 0;
        display: flex;
        justify-content:center;
        align-items: center;
        min-height: 32px;
    }
    
    .product-card .store-info a {
        color: #000;
        text-decoration: none;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Mobile Quantity Container */
    .product-card .qty-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .product-card .qty-btn {
        background: #E94412 !important;
        color: white !important;
        border: none !important;
        width: 25px !important;
        height: 25px !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }
    
    .product-card .qty-input {
        width: 27px !important;
        height: 27px !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
    }
    
    /* Mobile Card Padding */
    .product-card .cardpadding {
        padding-left: 6px;
        padding-right: 0;
    }

    .extrapadding{
        padding-top:90px;
    }
    .extrapadding2{
        padding-top:145px;
    }
    .new-cate-grocery-section {
        padding: 20px 0;
    }

    .new-cate-promo-box {
        padding: 5px;
        text-align: center;
        width: 100% !important;
        height: 300px !important;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 10px;
    }

    .new-cate-promo-box img {
        display: none;
    }

    .new-cate-promo-box .btn-light {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        margin: 0;
        white-space: nowrap;
    }

    .new-cate-owl-carousel .owl-nav {
        right: -10px;
    }

    .new-cate-custom-prev, .new-cate-custom-next {
        width: 30px;
        height: 30px;
    }

    .new-cate-custom-prev i, .new-cate-custom-next i {
        font-size: 14px;
    }

    .new-cate-category-title {
        padding-top: 25px;
    }
    .extraborder{
        border-top: 1px solid #85736E;
        border-bottom: 1px solid #85736E;
        padding: 12px 0px 15px 0px;
    }
    .footer-payments img {
        max-height: 50px;
        max-width: 55px;
        margin-right: 10px;
    }
    .footer-bottom {
        text-align: center;
        font-weight: 400;
        line-height: 21px;
        font-size: 14px;
        color: #231917;
    }
    .extramarginfooter{
        margin-bottom: 0;
    }

    .footer-links h5 {
        font-size: 17.5px;
        font-weight: 700;
        margin-bottom: 15px;
    }
    .footer-links ul li a {
        text-decoration: none;
        color: #231917;
        transition: color 0.3s;
        font-size: 16px;
        font-weight: 400;
    }
    .store-item {
        margin-bottom: 15px;
        padding: 0 5px;
    }
    .store-card-link {
        padding: 10px 8px;
        border-radius: 10px;
        border: none;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    .store-card-link:hover {
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
    .store-image {
        width: 100%;
        height: auto;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 10px;
        aspect-ratio: 1 / 1;
        background: #F9F9F9;
    }
    .store-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .store-name {
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
        min-height: 32px;
        margin-top: 0;
        margin-bottom: 6px;
        color: #000000;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .store-category-link {
        color: #E94412;
        font-size: 12px;
        font-weight: 600;
        text-decoration: underline;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
        margin-top: 2px;
        margin-bottom: 4px;
        display: inline-block;
        text-underline-offset: 2px;
    }
    .store-category-link:hover {
        color: #E94412;
        opacity: 0.8;
    }
    .store-discount {
        color: #3B6939;
        font-size: 12px;
        line-height: 14px;
        font-weight: 700;
        margin-top: 4px;
    }
    .qty-btn {
        background: #E94412;
        color: white;
        border: none;
        width: 23px;
        height: 28px;
        font-size: 21px;
        font-weight: bold;
        line-height: 28px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }
    .textnewsletter{
        font-size: 16px;
        font-weight: 400;
        line-height: 20.7px;
        color: #000000;
    }
    .extrafootermargin{
        margin-left:0px;
    }
    .product-carded {
        background: #FFF8F6;
        border-radius: 12px;
        padding: 8px;
        text-align: center;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        aspect-ratio: 1 / 1;
    }

    .product-carded::after {
        content: "";
        position: absolute;
        width: 75px;
        height: 75px;
        background: #FCEAE5;
        border-radius: 50%;
        top: -28px;
        right: -40px;
    }
    .catename{
        width: 100%;

    }
    .catename b{
        font-weight: 700;
        font-size: 15px;
        line-height: 17.25px;
        color: #000000;
    }
    .headingclass{
        font-weight: 700;
        font-size: 28px;
        line-height: 32.2px;
    }
    .newformcontrol .form-control {
        display: block;
        width: 100%;
        padding: 10px 10px;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #ffffff00;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: .2 .25rem;
        transition: border-color .15sease -in-out, box-shadow .15sease -in-out;
    }
    .footer-subscribe .btn-subscribe {
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 30px;
        padding: 5px 20px;
        transition: background 0.3s;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }
    .paymentspacing {
        padding: 0px 0px 0px 0px;
    }
    .categorypadding{
        padding-top: 25px;
    }
    /* Registration Section Mobile Responsive */
    .registrationspace{
        margin-top: 80px;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    .register-section {
        padding: 0 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .register-section .row {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    .register-section .col-12 {
        padding: 0 5px;
        width: 100%;
        max-width: 100%;
    }
    .image-container {
        margin-bottom: 20px;
        min-height: 280px;
        max-height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        padding: 10px;
        width: 100%;
        max-width: 100%;
    }
    .green-bg {
        width: 180px;
        height: 180px;
        background: linear-gradient(to bottom, #4CA307, #074804);
        border-radius: 50%;
        position: absolute;
        z-index: 0;
    }
    .main-image {
        width: 250px;
        max-width: 85%;
        position: relative;
        left: 15px;
        bottom: 35px;
        z-index: 1;
        height: auto;
    }
    .fruit-image {
        width: 180px;
        max-width: 70%;
        position: absolute;
        bottom: -45px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        height: auto;
    }
    /* Info Box Styling Mobile */
    .info-box {
        position: absolute;
        width: 85px;
        max-width: 28%;
        background: white;
        padding: 6px 5px;
        border-radius: 6px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
        font-size: 6.5px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        z-index: 2;
    }
    .info-box i {
        margin-right: 3px;
        font-size: 9px;
        color: #000;
        flex-shrink: 0;
        margin-top: 1px;
    }
    .info-box span {
        font-size: 6.5px;
        line-height: 1.3;
        flex: 1;
    }
    .info-box strong {
        font-size: 7.5px;
        display: block;
        margin-bottom: 2px;
    }
    .info-box-1 {
        top: 8px;
        right: 3%;
    }
    .info-box-2 {
        bottom: 70px;
        left: 3%;
    }
    .info-box-3 {
        bottom: 8px;
        right: 3%;
        z-index: 3;
    }
    .cart-btn {
        background-color: #E94412;
        color: white;
        padding: 10px 15px;
        border-radius: 20px;
        font-weight: 400;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 5px;
        border: none;
        white-space: nowrap;
    }
    .new-cate-promo-box h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
    }
    .new-cate-promo-box p {
        font-size: 20px;
        font-weight: 400;
        line-height: 100%;
    }
    .steps-container {
        padding: 20px 15px;
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }
    .steps-container h2 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 25px;
        line-height: 1.3;
        text-align: center;
    }
    .step-box {
        margin-bottom: 35px;
        padding: 20px 15px;
        border-radius: 10px;
    }
    .step-number {
        top: -20px;
        left: 15px;
        padding: 4px 15px;
        font-size: 18px;
    }
    .step-title {
        font-size: 18px;
        padding: 12px 0 8px 0;
        line-height: 1.3;
    }
    .step-box p {
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 1.5;
        color: #555;
    }
    .step-box ul {
        margin-top: 10px;
    }
    .step-box ul li {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .cta-text {
        max-width: 100%;
        margin-bottom: 0px;
    }
    .cta-text h2{
      font-size: 18px;
      font-weight: 700;
      color: white;
    }
    .cta-text p{
        font-size: 12px;
        font-weight: 700;
        color: white;
      }
    .cta-section {
        background: linear-gradient(to bottom, #4CA307, #074804);
        border-radius: 15px;
        padding: 20px 15px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 20px;
        gap: 15px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .cta-text {
        max-width: 100%;
        margin-bottom: 0;
    }
    .cta-text h2 {
        font-size: 16px;
        font-weight: 700;
        color: white;
        margin-bottom: 10px;
    }
    .cta-text p {
        font-size: 14px;
        font-weight: 400;
        color: white;
        margin-bottom: 15px;
    }
    .cta-btn {
        background: white;
        color: #4CA307;
        border: none;
        padding: 10px 25px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
    }
    .cta-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .cta-image img {
        max-width: 120px;
        height: auto;
    }
    .rupee-symbol {
        font-size: 12px;
        position: relative;
        top: -2px;
        margin-right: -4px;
    }
    .discount-label {
        position: absolute;
        top: -2px;
        left: -1px;
        background: #BCF0B4;
        color: #000000;
        padding: 5px 12px;
        font-size: 14px;
        border-radius: 11px 0px 11px 0px;
    }
    .form-section {
        padding: 20px 15px;
        margin: 0;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .form-section h3 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 20px;
        text-align: center;
    }
    .form-section .form-control {
        font-size: 14px;
        padding: 12px 15px;
        margin-bottom: 15px;
    }
    .map-container {
        height: 250px;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    .confirm-btn {
        font-size: 15px;
        padding: 14px 20px;
        width: 100%;
        font-weight: 600;
    }
    .back-btn {
        font-size: 14px;
        width: 100%;
        padding: 10px;
    }
    #dynamic-container {
        margin-bottom: 15px;
    }
    .use-location-btn {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid #f00;
        color: red;
        padding: 5px 8px;
        border-radius: 5px;
        font-size: 12px;
        z-index: 9999;
    }
    .followpadding{
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .cta-image img {
        max-width: 160px;
    }
    .why{
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 20px;
        padding: 0 15px;
    }
    .feature-box1 {
        width: 80px;
        height: 80px;
        margin: 0 auto 15px;
    }
    .feature-box1 i {
        font-size: 30px;
    }
    .feature-heading {
        font-size: 18px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .feature-description {
        font-size: 14px;
        text-align: center;
        padding: 0 10px;
    }
    /* Container improvements for mobile */
    .registrationspace .container,
    .followpadding .container,
    section .container {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Better spacing for mobile sections */
    .registrationspace .row,
    .followpadding .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
    .registrationspace .row > [class*="col-"],
    .followpadding .row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        max-width: 100%;
    }
    /* Prevent overflow in all sections */
    section {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .container-fluid {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Prevent images from causing overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    .main-image,
    .fruit-image,
    .green-bg {
        max-width: 100%;
    }
    /* Prevent form elements from causing overflow */
    .form-control,
    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }
    /* Prevent absolute positioned elements from causing overflow */
    .info-box {
        max-width: 30%;
    }
    /* Footer popup mobile fix */
    .newcon-popup {
        width: 90% !important;
        max-width: 90% !important;
        padding: 20px 15px !important;
    }
    /* Ensure all tables and wide elements don't overflow */
    table {
        max-width: 100%;
        table-layout: auto;
    }
    /* Prevent any element with fixed width from causing overflow */
    [style*="width"] {
        max-width: 100% !important;
    }
    .step-title {
        font-weight: 700;
        font-size: 20px;
        line-height: 100%;
    }
    .step-title p{
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
    }
    .step-box ul li {
        font-size: 16px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        color: #5a3c2e;
    }
    .shopmore{
        display: none;
    }
    .shopmore2{
        display: block;
    }
    .breakdown{
        display: block;
    }
    .rupee-symbol2 {
        font-size: 11px;
        position: relative;
        top: -1px;
        margin-right: -4px;
    }
    .sidebarde ul li {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        cursor: pointer;
        border-radius: 0px;
        transition: background 0.3s;
        flex-direction: column;
    }
    .product-card2 {
        border: 1px solid #D8C2BC;
        border-radius: 12px;
        padding: 10px;
        text-align: left;
        background: white;
        position: relative;
        padding-bottom: 15px;
        min-height: 280px;
        display: flex;
        flex-direction: column;
    }

    .product-card2 .product-image {
        width: 100%;
        max-width: 120px;
        height: auto;
        margin: 15px auto 8px;
        object-fit: contain;
    }

    .product-card2 .discount-label {
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 0px 0px 8px 0px;
    }

    .product-card2 .product-title {
        font-size: 13px;
        margin-bottom: 4px;
        min-height: 32px;
    }

    .product-card2 .product-info {
        font-size: 12px;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        line-height: 18px;
        min-height: 36px; /* 2 lines height (18px * 2) */
    }

    .product-card2 .price-container {
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .product-card2 .price-container .price-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex: 1;
        min-width: 0;
        min-height: 36px; /* Maintain consistent height for 2 lines in product-card2 */
    }

    .product-card2 .price {
        font-size: 15px;
    }

    .product-card2 .original-price {
        font-size: 12px;
    }

    .product-card2 .add-btn {
        font-size: 12px;
        padding: 4px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .product-card2 .cart-options {
        font-size: 10px;
        padding: 2px 6px;
        bottom: -12px;
    }
    .mobile-sidebar {
        display: flex;
        padding: 15px 10px;
        margin-bottom: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 100;
        background: #fff;
    }

    /* Sticky Mobile Sidebar - Menu Type - Below Header */
    .mobile-sidebar.sticky {
        position: fixed !important;
        top: 116px !important; /* Header height (navbar + location + search) */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 0 !important;
        padding: 12px 10px !important;
        background: #fff !important;
    }

    .sidebarde {
        display: none;
    }

    .desktop-sidebar {
        display: none;
    }

    .mobile-sidebar::-webkit-scrollbar {
        display: none;
    }

    .mobile-sidebar .sidebar-itemde {
        min-width: auto;
        max-width: none;
        padding: 10px 12px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .mobile-sidebar .sidebar-itemde img {
        width: 45px;
        height: 45px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .mobile-sidebar .sidebar-itemde div,
    .mobile-sidebar .sidebar-itemde a {
        font-size: 12px;
        text-align: left;
        line-height: 1.3;
        word-wrap: break-word;
        font-weight: 600;
        margin-top: 0;
        flex: 1;
    }

    .mobile-sidebar .sidebar-itemde.active div,
    .mobile-sidebar .sidebar-itemde.active a {
        color: #28a745;
        font-weight: 700;
    }
    .categoryformobile{
        display: block;
    }
    .categoryfordesktop{
        display: none;
    }
    .product-carded img {
        mix-blend-mode: multiply;
        max-width: 80px;
        height: auto;
        position: relative;
        z-index: 999;
    }
    .store-sectionde {
        /* min-height: 350px;
        padding: 25px 15px; */
        min-height: 450px;
        padding: 129px 15px 15px 15px;
        display: block !important;
        align-items: flex-start !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .store-sectionde::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(59, 105, 57, 0.7) 50%, #3B6939 100%);
        z-index: 1;
    }

    .store-infode {
        max-width: 100%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
        padding: 0;
        color: white !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .store-infode h2 {
        font-size: 28px;
        margin-bottom: 12px;
        line-height: 1.2;
        color: white !important;
        font-weight: 700;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .store-infode p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.95) !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .time-container {
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
    }

    .time-boxde {
        visibility: visible !important;
        opacity: 1 !important;
        display: inline-block !important;
    }

    .online-statusde {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        background: white !important;
        color: black;
        padding: 8px 15px !important;
        border-radius: 50px;
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        z-index: 3 !important;
        font-weight: 600;
        font-size: 13px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        margin-top: 15px;
        margin-bottom: 15px;
        width: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
    }

    .online-statusde span {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        display: inline-block !important;
        flex-shrink: 0;
    }

    .online-statusde span.open {
        background: #4CAF50 !important;
    }

    .online-statusde span.closed {
        background: #E94412 !important;
    }

    .online-statusde .status-text {
        display: inline-block !important;
        font-weight: 600;
        line-height: 1;
    }

    .online-statusde.status-online .status-text {
        color: #4CAF50 !important;
    }

    .online-statusde.status-offline .status-text {
        color: #E94412 !important;
    }

    .coupon-boxde {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        max-width: 100% !important;
        margin-top: 20px;
        margin-left: 0;
        margin-right: 0;
        padding: 15px !important;
        display: flex !important;
        z-index: 2 !important;
    }

    .coupon-headerde {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .coupon-headerde h4 {
        font-size: 24px !important;
        color: #28a745 !important;
    }

    .coupon-contentde {
        display: flex !important;
    }

    .time-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-left: 0;
        margin-top: 15px;
        width: 100% !important;
    }

    .time-boxde {
        font-size: 14px;
        padding: 8px 16px;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        border: 1px solid white;
        border-radius: 25px;
        display: inline-block;
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }

    .time-boxde select {
        width: 100%;
        padding: 8px 28px 8px 16px;
        border-radius: 25px;
        border: none;
        background: transparent;
        color: white;
        font-size: 14px;
        font-weight: 400;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px 12px;
        cursor: pointer;
        outline: none;
        min-height: 20px;
    }

    .time-boxde select:focus {
        outline: none;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .time-boxde select:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .time-boxde select option {
        background: #3B6939 !important;
        color: white !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        border: none !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        min-height: 44px !important;
        display: block !important;
    }

    .time-boxde select option:hover,
    .time-boxde select option:focus {
        background: #4a7a47 !important;
        color: white !important;
        cursor: pointer !important;
    }

    .time-boxde select option:checked,
    .time-boxde select option[selected] {
        background: #2d5a2b !important;
        color: white !important;
        font-weight: 500 !important;
    }

    /* Department Page Container Spacing */
    .headingde {
        padding: 15px 10px;
        margin-top: 10px;
        position: relative;
        z-index: 10;
        background: white;
    }

    .headingde h3 {
        font-size: 24px;
        font-weight: 700;
        line-height: 120%;
        margin-bottom: 15px;
        padding-top: 10px;
        color: #231917;
    }
    #vendor-header{
      margin-top: 25%;
    }
    #products-container {
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        z-index: 10;
    }

    .product-item {
        position: relative;
        z-index: 1;
    }

    .mobile-sidebar {
        display: flex !important;
        position: relative;
        z-index: 10;
        background: white;
    }

    .fixedheight {
        height: auto;
        overflow-y: visible;
        position: relative;
        z-index: 10;
    }

    .online-statusde {
      position: absolute !important;
      /* position: relative !important; */
      top: 9% !important;
      /* right: 10% !important; */
      left: 74%;
      background: white !important;
      color: black;
      padding: 8px 15px !important;
      border-radius: 50px;
      display: inline-flex !important;
      align-items: center;
      gap: 8px;
      z-index: 3 !important;
      font-weight: 600;
      font-size: 13px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      margin-top: 15px;
      margin-bottom: 15px;
      /* width: auto !important; */
      width: 23% !important;
      visibility: visible !important;
      opacity: 1 !important;
      white-space: nowrap;
    }

    .online-statusde span {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        display: inline-block !important;
        flex-shrink: 0;
    }

    .online-statusde span.open {
        background: #4CAF50 !important;
    }

    .online-statusde span.closed {
        background: #E94412 !important;
    }

    .online-statusde .status-text {
        display: inline-block !important;
        font-weight: 600;
        line-height: 1;
    }

    .online-statusde.status-online .status-text {
        color: #4CAF50 !important;
    }

    .online-statusde.status-offline .status-text {
        color: #E94412 !important;
    }

    .coupon-boxde {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        max-width: 100% !important;
        margin-top: 20px;
        margin-left: 0;
        margin-right: 0;
        padding: 15px !important;
        display: flex !important;
        z-index: 2 !important;
    }

    .coupon-headerde {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .coupon-headerde h4 {
        font-size: 24px !important;
        color: #28a745 !important;
    }

    .coupon-contentde {
        display: flex !important;
    }

    .time-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-left: 0;
        margin-top: 15px;
        width: 100% !important;
    }

    .time-boxde {
        font-size: 14px;
        padding: 8px 16px;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        border: 1px solid white;
        border-radius: 25px;
        display: inline-block;
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }

    .time-boxde select {
        width: 100%;
        padding: 8px 28px 8px 16px;
        border-radius: 25px;
        border: none;
        background: transparent;
        color: white;
        font-size: 14px;
        font-weight: 400;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px 12px;
        cursor: pointer;
        outline: none;
        min-height: 20px;
    }

    .time-boxde select:focus {
        outline: none;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .time-boxde select:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .time-boxde select option {
        background: #3B6939 !important;
        color: white !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        border: none !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        min-height: 44px !important;
        display: block !important;
    }

    .time-boxde select option:hover,
    .time-boxde select option:focus {
        background: #4a7a47 !important;
        color: white !important;
        cursor: pointer !important;
    }

    .time-boxde select option:checked,
    .time-boxde select option[selected] {
        background: #2d5a2b !important;
        color: white !important;
        font-weight: 500 !important;
    }

    #products-container {
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        z-index: 10;
    }

    .product-item {
        position: relative;
        z-index: 1;
    }

    .sidebared {
        background: #fff;
        border: 1px solid #ddd;
        border-bottom:0px;
        border-top:0px;
        border-left:0px;
        height: auto;
        max-height: 600px;
        overflow-y: scroll;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 5px 0;
    }

    /* Mobile Category Name Fix */
    .sidebared ul li .side-text {
        color: #002204;
        font-weight: 600;
        font-size: 12px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: center;
        padding: 0 3px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 2.6em;
    }

    .sidebared ul li.active .side-text,
    .sidebared ul li:hover .side-text {
        color: #4CAF50;
        font-weight: 700;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .sidebared ul li .side-img {
        width: 45px !important;
        height: 45px !important;
        object-fit: contain;
        margin-bottom: 4px;
    }

    .sidebared ul li {
        padding: 8px 4px !important;
        min-height: auto;
    }
    .extraborder {
        border: 1px solid #66666640;
        border-bottom: 0px;
        padding: 8px 0;
        margin-top: 0;
    }

    /* Store Page Container - Fix banner behind header issue */
    .store-page-container {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        margin-top: 10px !important;
    }

    /* Store banner section - ensure no overlap */
    .store-banner-section {
        position: relative;
        z-index: 1;
        margin-top: 0;
        padding-top: 0;
    }

    /* Desktop: Add padding-top to prevent banner going behind fixed header */
    @media (min-width: 769px) {
        .store-banner-section {
            padding-top: 140px !important;
            margin-top: 0 !important;
        }

        .store-page-container {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
    }

    /* Mobile: Add padding-top to prevent banner going behind fixed header - reduced for less white space */
    @media (max-width: 768px) {
        .store-banner-section {
            padding-top: 105px !important;
            margin-top: 30px !important;
        }

        .store-page-container {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Mobile slider specific styling - remove extra spacing */
        .store-mobile-slider {
            margin-top: 0 !important;
            padding-top: 0 !important;
            width: 100%;
        }

        .store-mobile-slider .carousel-inner {
            margin-top: 0;
            padding-top: 0;
        }

        .store-mobile-slider .carousel-item {
            margin-top: 0;
            padding-top: 0;
        }

        .store-mobile-slider img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0;
        }
    }

    .store-banner-section .bannerimg {
        margin-bottom: 0;
    }

    .store-banner-section .bannerimg img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Food Card Mobile Styling */
    .food-card {
        border: 1px solid #FFF1ED;
        background-color: #FFF8F6;
        border-radius: 12px;
        padding: 0;
        margin-bottom: 12px;
    }

    .food-card .p-3 {
        padding: 12px !important;
    }

    .food-card h5 {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .frequently-ordered {
        font-size: 12px;
        padding: 4px 8px;
        margin-top: 4px;
        margin-bottom: 6px;
        display: inline-block;
    }

    .food-card .text-muted {
        font-size: 12px;
        line-height: 1.4;
        margin-top: 6px;
        margin-bottom: 0;
    }

    .food-img {
        border-radius: 12px 12px 0 0;
    }

    .storedetailanchor {
        padding: 0 6px;
        margin-bottom: 12px;
    }

    .fixedheight2 {
        height: auto;
        max-height: 600px;
        overflow-y: scroll;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 0 8px;
    }

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

    /* Store Count Text */
    .col-md-10.col-9 .store16 {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .hidecat{
        display: none;
    }
    .time-container {
        justify-content: center;
    }
    .headingclass {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.3;
        margin: 0px 0 8px 0;
    }
    .store16{
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        padding: 8px 0;
        margin: 0;
        color: #666666;
    }
    .log-in-box {
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.6s ease-in-out;
        opacity: 0;
    }
    .log-in-box.show {
        transform: translateY(0);
        opacity: 1;
    }
    .fixedheight {
        height: unset;
        overflow-y: scroll;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .cta-btn {
        font-size: 13px;
        background-color: rgba(255, 255, 255, 0.2);
        border: none;
        padding: 5px 10px;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }
    /* Product Details Page - Main Image Mobile Styling */
    .main-img-det {
        background-color: #F9F9F9;
        padding: 15px;
        text-align: center;
        border-radius: 10px;
        margin-bottom: 15px;
    }

    .main-img-det .main-product-det,
    .main-img-det img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 350px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    .thumb-container-det {
        position: relative;
        margin-top: 15px;
        width: 80%;
        margin-left: 40px;
    }
    .thumb-det {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .arrow-right-det {
          right: -35px;
      }
    .arrow-left-det {
          left: -40px;
      }
      .pricedetail {
        color: #4CAF50;
        font-size: 15px;
        line-height: 20.7px;
        font-weight: 400;
        margin: 0px 5px 0px 0px;
    }
      .store-info {
        font-size: 11px;
        background: #BCF0B4;
        color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 5px 10px;
        margin-top: auto;
        font-weight: 400;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .cardpadding{
        padding: 0px 8px 0px 8px;
    }
    
    /* Mobile Product Grid Spacing */
    .row .col-6 {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }
    
    /* Ensure product cards have consistent height on mobile */
    .col-6 .product-card {
        margin-bottom: 0;
    }
    .filter-scroll {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }

      .filter-scroll .filter-item {
        display: inline-block;
        min-width: 140px;
        margin-right: 10px;
        vertical-align: top;
      }
      .searchtext h4{
        margin-top: 20px;
        font-size: 20px;
        font-weight: 700;
        line-height: 100%;
      }
      .searchtext p{
        font-size: 15px;
        font-weight: 700;
        line-height: 100%;
      }
      .add-btn-detail{
        display: none;
      }
      .otherproductmargin{
        margin-bottom: 100px;
    }
    .product-detail-footer{
        display: none;
    }
    .footerpricemobile{
        display: block;
        /* margin-bottom: 65px; */
    }.prodetailheading h4 {
        font-size: 22px;
        font-weight: 700;
        line-height: 100%;
    }
    .qty-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0px !important;
        transition: 0.3s ease-in-out;
        width: 75px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .thumb-det img {
        width: 60px;
        height: 60px;
        cursor: pointer;
        border-radius: 2px;
        padding: 0px;
        border: 2px solid transparent;
        flex-shrink: 0;
        background-color: #F9F9F9;
    }
    .prodetailheading h6 {
        font-size: 16px;
        font-weight: 400;
        line-height: 100%;
    }
    .gotostore a {
        text-decoration: none;
    }
    .proceed-btn {
        background-color: #f97316;
        color: white;
        width: calc(100% - 40px);
        margin: 10px 20px;
        padding: 10px;
        text-align: center;
        border-radius: 999px;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
    }
    .proceed-btn,
    .proceed-btn * {
        font-size: 16px !important;
        font-weight: bold !important;
    }
    .grand-total-box h6{
        font-size: 16px;
        font-weight: 700;
        line-height: 100%;
    }
    .grand-total-box h3{
        font-size: 21px;
        font-weight: 700;
        line-height: 100%;
    }
    .profile-order-card {
        flex-direction: column;
        text-align: center;
      }

      .profile-order-img {
        margin-bottom: 10px;
      }

      .profile-total-badge {
        position: static;
        margin-top: 10px;
      }
      .profile-referral-steps p {
        font-size: 12px;
        color: #222;
    }
    .mypopup-content {
        max-width: 90%;
        padding: 18px;
      }
      .pata-sidebar-overlay {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1050;
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
        transition: right 0.4s ease-in-out;
        overflow-y: auto;
        z-index: 99999999;
    }

}

























.xyz-banner {

  background: url('images/departmentimg.jpg') no-repeat center center/cover;
 color: white;

 position: relative;
}
.xyz-gradient
{
   background: linear-gradient(to bottom, #00000008, #3b6939cf, #3b6939);
   padding: 30px 20px;
}
.xyz-white-button {
 background: white;
 color: red;
 border: none;
 border-radius: 5px;
 padding: 5px 15px;
}

.xyz-location-text {
 display: flex;
 align-items: center;
 gap: 10px;
}

.xyz-time-box {
 border: 1px solid white;
 border-radius: 20px;
 display: inline-block;
 padding: 5px 15px;
 margin-top: 10px;
}

.xyz-info-box {
  background: linear-gradient(to bottom, white, #f2f7ff);
 color: black;
 border-radius: 10px;
 padding: 15px;
 box-shadow: 0px 0px 4px -2px;
}

.xyz-info-box img {
 width: 52px;
 height: 52px;
 border-radius: 50%;
 object-fit: cover;
}

.xyz-progress {
 height: 6px;
 background-color: #ccc;
}

.xyz-progress-bar {
 background-color: #3b6939;
 height: 100%;
 min-width: 0%;
 width: 0%;
 transition: width 0.3s ease;
}

.xyz-clickable-div {
 cursor: pointer;
 margin-top: 10px;
}

.xyz-right-text {
 text-align: right;
 font-size: 12px;
 margin-top: 10px;
}

/* Coupon Text Styling */
.coupontext {
 font-size: 15px;
 font-weight: 500;
 line-height: 1.4;
 color: #000;
}

.coupontext b {
 font-weight: 700;
}

.xyz-modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,0.5);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 9999999;
}

/* Modal container */
.xyz-modal {
 background: #fff;
 border-radius: 15px;
 max-width: 500px;
 width: 90%;
 padding: 20px;
 animation: slideDown 0.3s ease-out;
 max-height: 90vh;
 overflow-y: auto;
}

/* Coupon row styling */
.xyz-coupon-row {
 background-color: #f2f7ff;
 border-radius: 10px;
 padding: 15px;
 margin-bottom: 15px;
}

.xyz-coupon-logo {
 height: 30px;
 margin-bottom: 5px;
}

.xyz-close {
 background: none;
 border: none;
 font-size: 24px;
 cursor: pointer;
}
.col7xyz
{
   margin-top:40px;
}
.border12
{
   border-radius:20px;
}
/* Mobile animation */
@media (max-width: 768px) {
 /* Mobile Promotional Card Font Sizes */
 .xyz-info-box {
  padding: 12px !important;
 }

 .xyz-info-box img {
  width: 40px !important;
  height: 40px !important;
 }

 .coupontext {
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.3;
 }

 .coupontext b {
  font-weight: 700;
  font-size: 12px !important;
 }

 .xyz-right-text {
  font-size: 10px !important;
  margin-top: 8px;
  text-align: right;
 }

 .xyz-clickable-div {
  margin-top: 8px;
 }

 .xyz-progress {
  height: 5px;
  margin-top: 5px;
 }

 .xyz-modal {
   position: relative;
   width: 92%;
   max-width: 380px;
   border-radius: 16px;
   animation: fadeInMobile 0.3s ease-out;
   max-height: 85vh;
   margin: 0 auto;
   padding: 18px 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 .xyz-modal h5 {
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 18px;
   color: #000;
   padding-right: 35px;
 }

 .xyz-close {
   font-size: 32px;
   font-weight: 300;
   color: #333;
   padding: 0;
   width: 35px;
   height: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
   background: transparent;
   border: none;
   cursor: pointer;
   transition: opacity 0.2s;
 }

 .xyz-close:hover {
   opacity: 0.7;
 }

 .xyz-coupon-row {
   padding: 16px 14px;
   margin-bottom: 14px;
   border-radius: 14px;
   background-color: #f2f7ff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .xyz-coupon-row .row {
   margin: 0;
   align-items: flex-start;
 }

 .xyz-coupon-row h6 {
   font-size: 19px;
   font-weight: 700;
   margin-bottom: 10px;
   line-height: 1.4;
   color: #000;
 }

 .xyz-coupon-row h6 strong {
   font-size: 22px;
   color: #000;
 }

 .xyz-coupon-row > .row > div:first-child {
   padding-right: 10px;
   padding-left: 0;
 }

 .xyz-coupon-row > .row > div:last-child {
   padding-left: 10px;
   padding-right: 0;
   text-align: right;
 }

 .xyz-coupon-row div[style*="color: green"] {
   font-size: 15px;
   margin-bottom: 8px;
   font-weight: 600;
   color: #3B6939 !important;
   line-height: 1.4;
 }

 .xyz-coupon-row small {
   font-size: 14px;
   display: block;
   margin-top: 6px;
   line-height: 1.5;
   color: #555;
 }

 .xyz-coupon-row small b {
   font-weight: 700;
   color: #000;
   font-size: 15px;
 }

 .xyz-coupon-logo {
   height: 38px;
   margin-bottom: 10px;
   width: auto;
   max-width: 100%;
   object-fit: contain;
 }

 .xyz-coupon-row > .row > div:last-child small {
   font-size: 13px;
   color: #666;
   margin-top: 6px;
   font-weight: 500;
 }

 .xyz-modal p.text-center {
   font-size: 15px;
   color: #666;
   padding: 20px 0;
 }

 .col7xyz
{
   margin-top:150px;
}

 @keyframes fadeInMobile {
   from { opacity: 0; transform: scale(0.95) translateY(-10px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }

 .xyz-modal-overlay {
   align-items: center;
   justify-content: center;
   padding: 20px 15px;
   backdrop-filter: blur(2px);
 }

 /* Very small screens */
 @media (max-width: 480px) {
   .xyz-modal {
     width: 95%;
     max-width: 100%;
     padding: 16px 14px;
     border-radius: 14px;
   }

   .xyz-modal h5 {
     font-size: 20px;
     margin-bottom: 16px;
   }

   .xyz-coupon-row {
     padding: 14px 12px;
     margin-bottom: 12px;
   }

   .xyz-coupon-row h6 strong {
     font-size: 20px;
   }

   .xyz-coupon-row > .row > div:first-child,
   .xyz-coupon-row > .row > div:last-child {
     padding-left: 8px;
     padding-right: 8px;
   }

   .xyz-coupon-row > .row > div:last-child {
     text-align: right;
   }
 }
}

/* Desktop animation */
@keyframes slideDown {
 from { opacity: 0; transform: translateY(-20px); }
 to { opacity: 1; transform: translateY(0); }
}

.couponbutton {
  color: #53433f;
  background-color: #fff8f6;
  box-shadow: 0px 0px 0px 0px;
  border: 0px;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  padding: 5px;
}



.top-banner {
    padding: 15px;
}

.bannerimg .img-fluid {
    border-radius: 10px;
    width: 100% !important;
    height: auto;
}

/* ============================================
   Location Popup Styles - Extracted from header.blade.php
   ============================================ */

.location-box {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 7px 11px;
    transition: all 0.3s ease;
}

.location-box i {
    margin-right: 10px;
    color: #28a745;
}

.location-text {
    font-size: 14px;
    margin-right: 10px;
    line-height: 1.4;
}

.dropdown-icon {
    color: #888;
    font-size: 12px;
}

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

.addpop-popup {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 25px;
    width: 90%;
    max-width: 500px;
    z-index: 1001;
    display: none;
}

.addpop-desktop-active {
    display: block;
    width: 50%;
}

.addpop-mobile-active {
    display: block;
    bottom: 0;
    left: 0;
    width: 50%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.addpop-visible {
    display: block;
}

.addpop-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}

.addpop-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

.addpop-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.addpop-detect-btn {
    background-color: #E94412;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.addpop-detect-btn:hover {
    background-color: #d13a0f;
}

.addpop-detect-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.addpop-detect-btn .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    border-color: currentColor;
    border-right-color: transparent;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.addpop-or-text {
    text-align: center;
    color: #888;
    font-size: 14px;
    position: relative;
}

.addpop-or-text:before,
.addpop-or-text:after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #e0e0e0;
}

.addpop-or-text:before {
    left: 0;
}

.addpop-or-text:after {
    right: 0;
}

.addpop-search-container {
    position: relative;
    z-index: 1003;
}

.addpop-search-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* Google Autocomplete - Use ONLY Google's default styling */
/* Only minimal z-index control - let Google handle everything else */
.pac-container {
    z-index: 100000002 !important;
}

/* Hide "powered by Google" text - More specific targeting */
.pac-container::after,
.pac-container .pac-logo:after,
.pac-container .pac-attribution,
.pac-container .pac-container::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide Google branding links specifically */
.pac-container a[href*="google"],
.pac-container a[href*="maps"],
.pac-container a[href*="attribution"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Specifically target the logo/attribution wrapper */
.pac-container > .pac-logo,
.pac-container > .pac-attribution {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Make suggestion text display in single row - Force all elements inline */
/* Ensure pac-items (suggestions) remain visible */
.pac-container .pac-item {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    line-height: 1.2 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 12px !important;
    gap: 8px !important;
}

/* Force ALL child elements to be inline - no exceptions (except icons) */
.pac-container .pac-item *:not(.pac-icon):not(.pac-icon *):not(img),
.pac-container .pac-item > *:not(.pac-icon):not(img),
.pac-container .pac-item div:not(.pac-icon),
.pac-container .pac-item span:not(.pac-icon),
.pac-container .pac-item strong,
.pac-container .pac-item b,
.pac-container .pac-item em,
.pac-container .pac-item .pac-item-query,
.pac-container .pac-item .pac-matched {
    display: inline !important;
    white-space: nowrap !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override any inline styles that might hide the icon */
.pac-container .pac-item .pac-icon[style*="display: none"],
.pac-container .pac-item .pac-icon[style*="visibility: hidden"],
.pac-container .pac-item .pac-icon[style*="opacity: 0"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Location icon styling - Ensure it's visible */
.pac-container .pac-item .pac-icon {
    display: inline-block !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-image: inherit !important;
    position: relative !important;
    order: -1 !important;
}

.pac-container .pac-item .pac-icon img,
.pac-container .pac-item img.pac-icon,
.pac-container .pac-item img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: inline-block !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure icon appears first in flex layout */
.pac-container .pac-item > .pac-icon:first-child {
    order: -1 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Handle icon as first child element */
.pac-container .pac-item > *:first-child.pac-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
}

/* Images inside pac-icon */
.pac-container .pac-item .pac-icon img,
.pac-container .pac-item img.pac-icon {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-right: 0 !important;
    vertical-align: middle !important;
}

/* Any image inside pac-item (for location icons) */
.pac-container .pac-item img {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Additional icon styling - handle all possible icon structures */
.pac-container .pac-item [class*="icon"],
.pac-container .pac-item [class*="Icon"] {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-right: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* Ensure icon is visible even with text-indent or other hiding techniques */
.pac-container .pac-item .pac-icon {
    text-indent: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
    content: "" !important;
}

/* Force icon to be first element and always visible */
.pac-container .pac-item {
    position: relative !important;
}

.pac-container .pac-item .pac-icon:first-child,
.pac-container .pac-item > .pac-icon:first-of-type {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    order: -1 !important;
    flex-shrink: 0 !important;
}

/* Handle case where icon might be nested */
.pac-container .pac-item > div:first-child > .pac-icon,
.pac-container .pac-item > span:first-child > .pac-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pac-container .pac-item .pac-item-query,
.pac-container .pac-item strong,
.pac-container .pac-item b {
    display: inline !important;
    margin-right: 4px !important;
    font-weight: bold !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pac-container .pac-item span:not(.pac-icon),
.pac-container .pac-item div:not(.pac-icon):not(.pac-attribution) {
    display: inline !important;
    margin-left: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove all line breaks */
.pac-container .pac-item br {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile view - Add gap between search box and suggestion box */
@media (max-width: 768px) {
    .pac-container {
        margin-top: 8px !important;
    }
}

/* Web view - Add gap between search box and suggestion box */
@media (min-width: 769px) {
    .pac-container {
        margin-top: 6px !important;
    }
}

.selected-location {
    margin-top: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 14px;
    border-left: 3px solid #4a89dc;
}

.content {
    padding: 30px 0;
}

.store-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.store-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.store-card:hover {
    transform: translateY(-5px);
}

.store-image {
    height: 160px;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.store-details {
    padding: 15px;
}

.store-name {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 16px;
}

.store-address {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

.store-tags {
    display: flex;
    gap: 8px;
}

.store-tag {
    background: #f0f7ff;
    color: #4a89dc;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.powered-by {
    text-align: center;
    margin-top: 30px;
    color: #888;
    font-size: 12px;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .location-box {
        width: 100%;
    }

    .addpop-popup {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   Contact Popup Styles - Extracted from footer.blade.php
   ============================================ */

/* Overlay */
.newcon-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999999 !important;
    justify-content: center;
    align-items: center;
}

/* Popup box */
.newcon-popup {
    background: linear-gradient(135deg, #e8f8ee, #fdfdfd);
    padding: 25px;
    border-radius: 10px;
    width: 350px;
    max-width: 90%;
    position: relative;
    text-align: center;
    border: 2px solid #c9a9f1;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: newconFadeIn 0.3s ease-in-out;
}

@keyframes newconFadeIn {
    from {opacity: 0; transform: scale(0.9);}
    to {opacity: 1; transform: scale(1);}
}

/* Heading */
.newcon-popup h2 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
}

.newcon-popup hr {
    margin: 10px 0 20px;
    border: 0;
    height: 1px;
    background: #bbb;
}

/* Inputs */
.newcon-popup input,
.newcon-popup textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
}

.newcon-popup textarea {
    resize: none;
    height: 80px;
}

/* Buttons */
.newcon-submit {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 30px;
    background: #e63912;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.newcon-cancel {
    margin-top: 10px;
    display: block;
    background: none;
    border: none;
    color: #e63912;
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
}

/* Location Error Modal Styling */
.location-error-modal {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.location-error-header {
    background: #E94412;
    color: white;
    border-bottom: none;
    padding: 20px 25px;
}

.location-error-header .modal-title {
    font-weight: 700;
    font-size: 20px;
}

.location-error-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.location-error-body {
    padding: 30px 25px;
}

.location-error-icon {
    color: #E94412;
    font-size: 4rem;
    margin-bottom: 10px;
}

.location-error-title {
    color: #E94412;
    font-weight: 700;
    font-size: 24px;
}

.location-error-text {
    color: #53433F;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.location-error-btn {
    background: #E94412;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.location-error-btn:hover {
    background: #c7380f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 68, 18, 0.3);
}

/* Close button (top right) */
.newcon-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    color: #555;
    cursor: pointer;
}

/* Cart Business Group Styles */
.cart-business-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-business-group h6 {
    margin-bottom: 0;
}

.border12 {
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 13px;
}

/* PhonePe Payment Result Pages Styles */
.payment-result-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    margin-top: 100px;
}

.payment-result-container .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.payment-result-container.success-page {
    background: linear-gradient(135deg, #DDF7D9 0%, #FFFFFF 100%);
}

.payment-result-container.failure-page {
    background: linear-gradient(135deg, #FFE5E5 0%, #FFFFFF 100%);
}

.payment-result-box {
    background: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 2px solid #FFDBD1;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.payment-result-box.success-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #4CAF50, #28a745);
}

.payment-result-box.failure-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #dc3545, #c82333);
}

/* Success Icon */
.success-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #4CAF50 0%, #28a745 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: white;
    animation: scaleIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Failure Icon */
.failure-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: white;
    animation: shake 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    75% { transform: translateX(10px) rotate(5deg); }
}

/* Success Title */
.success-title {
    font-size: 36px;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Failure Title */
.failure-title {
    font-size: 36px;
    font-weight: 700;
    color: #dc3545;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Success Message */
.success-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Failure Message */
.failure-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 10px;
    border-left: 4px solid #ffc107;
    text-align: left;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.failure-message i {
    color: #ffc107;
    margin-right: 8px;
}

/* Order Info Box (Shared) */
.order-info-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    padding: 25px;
    margin: 35px 0;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
}

.order-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.order-info-row:first-child {
    padding-top: 0;
}

.order-info-label {
    font-weight: 600;
    color: #333;
    font-size: 16px;
    text-align: left;
}

.order-info-value {
    font-weight: 700;
    font-size: 18px;
    text-align: right;
}

.order-info-value.success-value {
    color: #28a745;
}

.order-info-value.failure-value {
    color: #dc3545;
}

.order-info-value.address-value {
    color: #666;
    font-size: 14px;
    font-weight: 500;
    max-width: 60%;
}

/* Help Text (Failure Page) */
.help-text {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #e7f3ff 0%, #d1ecf1 100%);
    border-radius: 12px;
    border-left: 4px solid #007bff;
    font-size: 15px;
    color: #004085;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.help-text strong {
    display: block;
    margin-bottom: 12px;
    color: #007bff;
    font-size: 16px;
}

.help-text ul {
    margin: 0;
    padding-left: 25px;
    line-height: 1.8;
}

.help-text li {
    margin-bottom: 8px;
}

/* Action Buttons (Shared) */
.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 35px;
}

.btn-continue, .btn-orders, .btn-retry, .btn-home {
    padding: 14px 35px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-continue, .btn-retry {
    background: linear-gradient(135deg, #E94412 0%, #d13a0f 100%);
    color: white;
}

.btn-continue:hover, .btn-retry:hover {
    background: linear-gradient(135deg, #d13a0f 0%, #b8320d 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(233, 68, 18, 0.4);
}

.btn-orders, .btn-home {
    background: white;
    color: #E94412;
    border: 2px solid #E94412;
}

.btn-orders:hover, .btn-home:hover {
    background: #E94412;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(233, 68, 18, 0.4);
}

.btn-continue i, .btn-orders i, .btn-retry i, .btn-home i {
    margin-right: 8px;
    font-size: 18px;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .payment-result-container {
        min-height: auto;
        padding: 20px 10px 20px 10px;
        margin-top: 0;
        padding-top: 120px;
        margin-bottom: 20px;
        align-items: flex-start;
    }

    .payment-result-container .container {
        padding: 0 10px;
    }

    .payment-result-box {
        padding: 30px 20px;
        border-radius: 15px;
        margin: 0 auto;
        max-width: 100%;
    }

    .success-icon, .failure-icon {
        width: 90px;
        height: 90px;
        font-size: 45px;
        margin-bottom: 20px;
    }

    .success-title, .failure-title {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .success-message {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .failure-message {
        font-size: 15px;
        padding: 15px;
        margin-bottom: 25px;
    }

    .order-info-box {
        padding: 18px 15px;
        margin: 25px 0;
        border-radius: 10px;
    }

    .order-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 0;
    }

    .order-info-label {
        font-size: 14px;
    }

    .order-info-value {
        text-align: left;
        width: 100%;
        font-size: 16px;
    }

    .order-info-value.address-value {
        max-width: 100%;
        font-size: 13px;
    }

    .help-text {
        padding: 15px;
        font-size: 14px;
        margin-top: 20px;
    }

    .help-text strong {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .help-text ul {
        padding-left: 20px;
        line-height: 1.6;
    }

    .help-text li {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 12px;
        margin-top: 25px;
    }

    .btn-continue, .btn-orders, .btn-retry, .btn-home {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
    }

    .btn-continue i, .btn-orders i, .btn-retry i, .btn-home i {
        font-size: 16px;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .payment-result-container {
        padding: 15px 8px 15px 8px;
        margin-top: 30px;
        padding-top: 110px;
        margin-bottom: 15px;
        align-items: flex-start;
    }

    .payment-result-container .container {
        padding: 0 8px;
    }

    .payment-result-box {
        padding: 25px 15px;
        border-radius: 12px;
    }

    .success-icon, .failure-icon {
        width: 80px;
        height: 80px;
        font-size: 40px;
        margin-bottom: 15px;
    }

    .success-title, .failure-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .success-message {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .failure-message {
        font-size: 14px;
        padding: 12px;
        margin-bottom: 20px;
    }

    .order-info-box {
        padding: 15px 12px;
        margin: 20px 0;
    }

    .order-info-row {
        padding: 8px 0;
        gap: 5px;
    }

    .order-info-label {
        font-size: 13px;
    }

    .order-info-value {
        font-size: 15px;
    }

    .order-info-value.address-value {
        font-size: 12px;
    }

    .help-text {
        padding: 12px;
        font-size: 13px;
        margin-top: 15px;
    }

    .help-text strong {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .help-text li {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .action-buttons {
        margin-top: 20px;
        gap: 10px;
    }

    .btn-continue, .btn-orders, .btn-retry, .btn-home {
        padding: 11px 18px;
        font-size: 14px;
    }

    .btn-continue i, .btn-orders i, .btn-retry i, .btn-home i {
        font-size: 15px;
        margin-right: 5px;
    }
}