/*
Template Name: Dailycart - Multipurpose eCommerce Food & Grocery Delivery Mobile Template
Author: Askbootstrap
Author URI: https://themeforest.net/user/askbootstrap
Version: 0.1
*/

/*
- BODY
- SIDEBAR (OFFCANVAS) STYLES 
- ULTRA-MODERN AUTHENTICATION PAGE 
- ENABLE LOCATION PAGE STYLES
- SUPPORT PAGE STYLES
- NOTIFICATION SETTINGS PAGE STYLES
- NOTIFICATIONS PAGE STYLES
- SETTINGS PAGE STYLES
- ADD CARD PAGE STYLES
- PAYMENT METHODS PAGE STYLES
- ORDER TRACKING PAGE STYLES
- ORDER HISTORY PAGE STYLES
- ORDER DETAILS PAGE STYLES
- ADDRESS PAGE STYLES
- CHECKOUT PAGE STYLES
- CART PAGE STYLES
- PRODUCT PAGE STYLES
- HOME PAGE STYLES
 */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

@import url("https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap");

body {
  font-family: "TikTok Sans", sans-serif;
  background: #ededed;
  font-size: 12px;
}

/* Target the scrollbar for the entire body or a specific container */
body::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 3px; /* Adjust for desired thinness */
  height: 3px; /* For horizontal scrollbars if needed */
}

/* Style the scrollbar track (the background) */
body::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: #f0f0f0; /* Light color for the track */
}

/* Style the scrollbar thumb (the draggable part) */
body::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: #cccccc; /* Light color for the thumb */
  border-radius: 3px; /* Optional: adds rounded corners to the thumb */
}

/* Main Layout */
.body-wrap {
  padding-top: 65px; /* Header height */
  padding-bottom: 70px; /* Footer height */
}

.fs-9 {
  font-size: 9px;
}
.fs-10 {
  font-size: 10px;
}
.h6,
h6 {
  font-size: 14px;
}
.h5,
h5 {
  font-size: 16px;
}
.btn-primary {
  background: #ef4372;
  border-color: #ef4372;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background: #de2b5c !important;
  border-color: #de2b5c !important;
}
.btn-outline-secondary {
  background: rgb(239 67 114 / 7%);
  color: #ef4372;
  border: 1px solid #ef4372;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #fff;
  background: #de2b5c !important;
  border-color: #de2b5c !important;
}
.form-check-input:checked {
  background-color: #ef4372;
  border-color: #ef4372;
}
.text-primary {
  color: #ef4372 !important;
}
.btn-outline-primary {
  color: #ef4372;
  border-color: #ef4372;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #fff;
  background-color: #de2b5c !important;
  border-color: #de2b5c !important;
}
.navbar-brand-custom h6 {
  color: #212529;
}
.rounded-3 {
  border-radius: 0.75rem !important;
}
.input-group-text {
  border-radius: 0.75rem;
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: #ef4372 !important;
  border-color: #ef4372 !important;
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: #ef4372 !important;
  border-color: #ef4372 !important;
  color: #fff !important;
}
/* Sidebar (Offcanvas) */
/*
=========================
NEW SIDEBAR (OFFCANVAS) STYLES
=========================
*/
.offcanvas-body {
  display: flex;
  flex-direction: column;
}

/* Sidebar Profile Header */
.sidebar-profile {
  background: linear-gradient(135deg, #950fdb, #0d5dd1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebar-profile h5 {
  font-weight: 600;
}
.sidebar-profile small {
  color: rgba(255, 255, 255, 0.8);
}
.sidebar-profile img {
  height: 35px;
}

/* Sidebar Group Headings */
.sidebar-heading {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  padding: 1rem 12px 0.5rem;
  letter-spacing: 0.5px;
}

/* Sidebar Navigation Links */
.offcanvas-body .nav-link {
  color: #343a40;
  padding: 8px 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  border-left: 4px solid transparent; /* For active state indicator */
  transition: all 0.2s ease-in-out;
}

/* Icon styling */
.offcanvas-body .nav-link i {
  margin-right: 12px;
  font-size: 16px;
  width: 25px;
  text-align: center;
  color: #6c757d;
  transition: color 0.2s ease-in-out;
}

/* Hover State */
.offcanvas-body .nav-link:hover {
  background-color: #f8f9fa;
  color: #950fdb;
}
.offcanvas-body .nav-link:hover i {
  color: #950fdb;
}

/* Active Link State */
#sidebarMenu {
  width: 270px;
}
.offcanvas-body .nav-link.active {
  background-color: rgb(149 14 219 / 8%);
  color: #950fdb;
  border-left-color: #950fdb;
}
.offcanvas-body .nav-link.active i {
  color: #950fdb;
}

/* Logout Button Section */
.sidebar-logout {
  padding: 0.5rem 0;
  border-top: 1px solid #dee2e6;
}
.sidebar-logout .nav-link i {
  color: #dc3545; /* Red color for logout icon */
}
.sidebar-logout .nav-link:hover {
  color: #dc3545; /* Keep text red on hover */
}

/* Footer Bottom Nav */
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1020;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer-nav a {
  color: #6c757d;
  text-align: center;
  text-decoration: none;
  font-size: 0.75rem;
}
.footer-nav a.active {
  color: #950fdb;
  font-weight: 600;
}
.footer-nav a i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 4px;
}

/* Common Card Style */
.card {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Product Card */
.product-card .card-img-top {
  height: 150px;
  object-fit: contain;
  padding: 1rem;
}

/* Form Controls */
.form-control,
.form-select {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: #950fdb;
}
.btn {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

/*
=========================
ULTRA-MODERN AUTHENTICATION PAGE
=========================
*/

/* This creates the full-screen layout */
.auth-body {
  background-color: #6f42c1; /* Fallback color */
  height: 100vh;
  overflow: hidden;
}

.auth-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* The top part with the gradient and illustration */
.auth-header {
  flex-shrink: 0;
  padding: 3rem 1rem 4rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #6f42c1, #3f2b96);
}

.auth-illustration {
  max-width: 220px;
  margin-bottom: 1.5rem;
  animation: float 4s ease-in-out infinite;
}

/* The bottom part with the form content */
.auth-content {
  flex-grow: 1;
  background-color: #fff;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  padding: 1.5rem;
  margin-top: -2.5rem; /* Pulls the sheet up over the header */
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* Allows scrolling on small screens */
}

/* Gentle floating animation for the illustration */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Refined Tab Styles */
.nav-pills {
  background-color: #f8f9fa;
  border-radius: 0.75rem;
  padding: 4px;
}
.nav-pills .nav-link {
  color: #6c757d;
  font-weight: 600;
}
.nav-pills .nav-link.active {
  background-color: #fff;
  color: #950fdb;
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* "OR" Divider Style */
.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: #6c757d;
  text-align: center;
  height: 1.5em;
  opacity: 0.7;
}
.hr-text:before {
  content: "";
  background: #e9ecef;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.hr-text:after {
  content: "LOGIN WITH";
  position: relative;
  display: inline-block;
  color: #6c757d;
  padding: 0 0.5em;
  line-height: 1.5em;
  background-color: #fff; /* Match the sheet background */
}

/*
=========================
NEW ENABLE LOCATION PAGE STYLES
=========================
*/

.location-page-wrapper {
  /* This setup makes the wrapper a flex container that fills the available vertical space */
  display: flex;
  flex-direction: column;
  height: calc(
    100vh - 130px
  ); /* Full viewport height minus header (60px) and footer (70px) */
  background: #eef7ff; /* A soft, light blue background */
  padding: 0;

  overflow: hidden; /* Prevents unwanted scrollbars */
}

/* The top part with the illustration */
.location-header {
  flex: 1; /* Allows this section to grow and push the content sheet down */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.location-illustration {
  max-width: 80%;
  max-height: 250px;
  font-size: 130px;
  animation: float 4s ease-in-out infinite; /* Re-using the float animation */
}

/* The bottom content "sheet" */
.location-content-sheet {
  background-color: #fff;
  padding: 2rem 1.5rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  text-align: center;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
}

/* Keyframe for the floating animation (if not already in your CSS) */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.store-img {
  height: 72px !important;
  border-radius: 12px !important;
  aspect-ratio: 3.14 / 1 !important;
  object-fit: cover !important;
}

/*
=========================
NEW SUPPORT PAGE STYLES
=========================
*/

/* Centered header for the page */
.support-header {
  text-align: center;
}

/* Custom styles for the search bar */
.support-search-bar .input-group {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  border-radius: 0.75rem; /* Matches other form elements */
}
.support-search-bar .form-control,
.support-search-bar .input-group-text {
  border: none;
  background-color: #fff;
}
.support-search-bar .input-group-text {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.support-search-bar .form-control {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* Grid layout for the support option cards */
.support-options-grid {
  display: grid;
  gap: 1rem;
}

/* Individual support card styling */
.support-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid #e9ecef;
  text-decoration: none;
  color: #343a40;
  transition: all 0.2s ease-in-out;
}

/* Hover effect for the cards */
.support-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #950fdb;
  color: #950fdb;
}
.support-card:hover .text-muted {
  color: #950fdb !important;
  opacity: 0.8;
}

/* Icon styling within the cards */
.support-card i {
  font-size: 2.5rem;
  color: #950fdb;
}

/* Direct contact info section */
.contact-info-section {
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 1rem;
}

.contact-info-section .list-group-item {
  background-color: transparent; /* Make list items transparent */
}
.contact-info-section i {
  font-size: 1.25rem;
  color: #6c757d;
}

/*
=========================
NEW NOTIFICATION SETTINGS PAGE STYLES
=========================
*/

/* Base card styling for each notification item */
.notification-item,
.master-toggle-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-in-out;
}

/* Hover effect for individual items */
.notification-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Master toggle card styling */
.master-toggle-card {
  background-color: #f8f9fa; /* A slightly different background */
  border: 1px solid #e9ecef;
  box-shadow: none;
  margin-bottom: 2rem;
}

/* Circular background for the icons */
.notification-icon2 {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  background-color: rgb(149 15 219 / 10%); /* Soft blue background */
}

/* Icon styling */
.notification-icon2 i {
  font-size: 1.5rem;
  color: #950fdb;
}

/* Text content area */
.notification-text {
  flex-grow: 1; /* This pushes the toggle to the far right */
}
.notification-text p.small {
  margin-bottom: 0;
}

/* Larger, more tappable toggle switch */
.notification-toggle .form-check-input {
  width: 3.5em;
  height: 1.75em;
  cursor: pointer;
}

/*
=========================
NEW NOTIFICATIONS PAGE STYLES
=========================
*/

/* Header styling with space-between layout */
.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.notifications-header .btn-link {
  text-decoration: none;
  font-weight: 600;
}

/* Base style for each notification card */
.notification-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e9ecef;
  text-decoration: none;
  color: inherit;
  position: relative; /* Needed for the unread dot */
  transition: background-color 0.2s ease-in-out;
}
.notification-card:hover {
  background-color: #f8f9fa;
}

/* Style for unread notifications */
.notification-card.unread {
  background-color: #fbf4ff; /* A very light blue for unread items */
  border-left: 4px solid #950fdb;
  padding-left: 1.25rem;
}

/* The unread dot indicator */
.notification-dot {
  position: absolute;
  top: 1rem;
  left: 0.75rem;
  width: 8px;
  height: 8px;
  background-color: #950fdb;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Circular background for the main icon */
.notification-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-icon i {
  font-size: 1.5rem;
}

/* Color variations for icons */
.notification-icon.icon-info {
  background-color: rgb(149 15 219 / 10%);
}
.notification-icon.icon-info i {
  color: #950fdb;
}

.notification-icon.icon-success {
  background-color: rgba(25, 135, 84, 0.1);
}
.notification-icon.icon-success i {
  color: #198754;
}

.notification-icon.icon-warning {
  background-color: rgba(255, 193, 7, 0.1);
}
.notification-icon.icon-warning i {
  color: #ffc107;
}

/* Text content area */
.notification-text {
  flex-grow: 1;
}
.notification-text p {
  font-weight: 500;
}

/* Empty state for when there are no notifications */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}
.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Pulsing animation for the unread dot */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
  }
}

/*
=========================
NEW SETTINGS PAGE STYLES
=========================
*/

/* Profile card at the top */
.settings-profile-card {
  background-color: #fff;
  border-radius: 1rem;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
  display: flex;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.profile-avatar {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Headings for each settings group */
.settings-group-title {
  font-size: 0.8rem;
  color: #6c757d;
  text-transform: uppercase;
  padding: 0 0.5rem 0.5rem;
}

/* Styling for the custom list item links */
.settings-item {
  display: flex;
  align-items: center;
  padding: 1rem !important; /* Override bootstrap padding */
  font-weight: 500;
  font-size: 13px;
  border-color: #ededed;
  border-style: dashed;
}

/* The circular background for the icons */
.settings-icon-wrapper {
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.settings-icon-wrapper i {
  color: #950fdb;
  font-size: 16px;
}

/* Chevron icon on the right */
.settings-item .bi-chevron-right {
  color: #adb5bd;
}

/* Custom logout button */
.btn-logout {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  font-weight: 600;
  width: 100%;
}

.btn-logout:hover {
  background-color: #dc3545;
  color: #fff;
}

/*
=========================
NEW ADD CARD PAGE STYLES
=========================
*/

/* The visual credit card at the top */
.credit-card-preview {
  background: linear-gradient(135deg, #950fdb, #0d5dd1);
  color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(13, 110, 253, 0.3);
  position: relative;
  font-family: "Courier New", Courier, monospace;
}

.card-logo {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  opacity: 0.8;
}

.card-chip {
  width: 50px;
  height: 40px;
  background-color: #ffc107;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.card-number-preview {
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.card-name-preview,
.card-expiry-preview {
  text-transform: uppercase;
  font-weight: 600;
}
.card-name-preview small,
.card-expiry-preview small {
  font-size: 0.7rem;
  opacity: 0.7;
  display: block;
}

/* Form container */
.add-card-form {
  background-color: #fff;
  border-radius: 1rem;
}

/* Fix for floating labels inside an input group */
.input-group .form-floating {
  position: relative;
}
.input-group .form-floating .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Secure footer text */
.secure-footer {
  text-align: center;
  color: #6c757d;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.secure-footer i {
  color: #198754; /* Green for secure */
  margin-right: 0.5rem;
}

/*
=========================
NEW PAYMENT METHODS PAGE STYLES
=========================
*/

/* Base style for a saved payment card */
.payment-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-in-out;
}
.payment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Card brand logo (Visa, Mastercard, etc.) */
.card-brand-logo {
  height: 30px !important;
  flex-shrink: 0;
  width: 30px !important;
  object-fit: contain;
}

/* Text details of the card */
.card-details {
  flex-grow: 1; /* Pushes other items to the right */
}

/* The "Default" badge */
.default-indicator {
  display: none; /* Hidden by default */
  align-items: center;
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.default-card .default-indicator {
  display: inline-flex; /* Shown only on cards with .default-card class */
}

/* The dashed "Add New" button card */
.add-new-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 2px dashed #adb5bd;
  background-color: #f8f9fa;
  color: #6c757d;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.add-new-card:hover {
  background-color: #e9ecef;
  border-color: #6c757d;
  color: #343a40;
}

/* Digital wallets section at the bottom */
.digital-wallets-section .list-group-item {
  font-weight: 500;
}

/*
=========================
NEW ADD ADDRESS PAGE STYLES
=========================
*/

/* Map preview section at the top */
.address-map-preview {
  height: 250px;
  background-image: url("../img/map.png");
  background-size: cover;
  background-position: center;
  position: relative;
}

/* A pseudo-element to act as the map pin */
.address-map-preview::after {
  content: "\F3E7"; /* Bootstrap Icons unicode for bi-geo-alt-fill */
  font-family: "Bootstrap-Icons";
  font-size: 3rem;
  color: #ef4372;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* The main form content "sheet" */
.address-form-container {
  background-color: #fff;
  padding: 1rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  margin-top: -2.5rem; /* Pulls the sheet up over the map */
  position: relative;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

/* Fix for floating labels inside an input group */
.input-group .form-floating {
  position: relative;
  flex-grow: 1; /* Allows the floating label div to expand */
}
.input-group .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Label for the address type button group */
.address-type-label {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #495057;
}

/*
=========================
NEW EDIT PROFILE PAGE STYLES
=========================
*/

/* This class on the <body> tag prevents the sticky footer from hiding content */
.sticky-footer-wrap {
  padding-bottom: 90px;
}

/* Profile picture uploader section */
.profile-uploader {
  text-align: center;
  margin-bottom: 2rem;
}
.avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.profile-avatar-large {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.change-photo-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* The card containing the form fields */
.profile-form-card {
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* Fix for floating labels inside an input group */
.input-group .form-floating {
  position: relative;
  flex-grow: 1;
}
.input-group .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Styling for disabled/read-only fields */
.input-group .form-control:disabled {
  background-color: #f8f9fa; /* A slightly grey background */
}

/*
=========================
NEW PERSONAL INFO (PROFILE) PAGE STYLES
=========================
*/

/* The main header card with profile info */
.profile-header-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  position: relative; /* For positioning the edit button */
}

.profile-avatar2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 1rem;
}

.profile-info {
  flex-grow: 1; /* Pushes the edit button to the right */
}

.edit-profile-btn {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The 3-column stats grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.stat-card i {
  font-size: 1.75rem;
  color: #950fdb;
}

/* The list of account details */
.profile-details-list .settings-group-title {
  padding-left: 0.5rem; /* Re-using style from settings page */
}

.profile-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important; /* Override default list-group bg */
  border-bottom: 1px solid #e9ecef !important;
}

.profile-info-item:last-child {
  border-bottom: none !important;
}

.profile-info-item i {
  margin-right: 1rem;
  color: #6c757d;
}

/*
=========================
NEW WALLET PAGE STYLES
=========================
*/

/* The main balance card */
.wallet-balance-card {
  background: linear-gradient(135deg, #950fdb, #0d5dd1);
  color: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(13, 110, 253, 0.3);
  position: relative;
  overflow: hidden;
}
/* A subtle texture for the card */
.wallet-balance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wallet-balance-card small {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Quick Actions below the balance card */
.wallet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: #343a40;
  transition: all 0.2s ease-in-out;
}
.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  color: #950fdb;
}
.action-card i {
  font-size: 1.75rem;
  color: #950fdb;
  margin-bottom: 0.5rem;
}

/* Transaction History Section */

.transaction-date-header {
  font-size: 0.8rem;
  color: #6c757d;
  text-transform: uppercase;
  padding: 1rem 0 0.5rem;
}

/* Individual transaction item card */
.transaction-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #e9ecef;
}

.transaction-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.transaction-icon i {
  font-size: 1.25rem;
}

.transaction-details {
  flex-grow: 1;
}
.transaction-details p {
  font-weight: 600;
}

/* Color coding for credited vs. debited */
.transaction-icon.credited {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.transaction-icon.debited {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.transaction-amount.credited {
  color: #198754;
}
.transaction-amount.debited {
  color: #dc3545;
}

/*
=========================
NEW COUPONS PAGE STYLES
=========================
*/

/* Bar for adding a new coupon code */
.add-coupon-bar {
  margin-bottom: 2.5rem;
}

/* Base style for the coupon ticket */
.coupon-ticket {
  display: flex;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  margin-bottom: 1.5rem;
  position: relative; /* For pseudo-elements */
  overflow: hidden;
}

/* The left part of the ticket with the icon */
.coupon-icon {
  flex-shrink: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #950fdb;
  border-right: 2px dashed #ffffff;
}

.coupon-icon i {
  font-size: 2.5rem;
  color: #ffffff;
}

/* The main details part of the ticket */
.coupon-details {
  padding: 1.5rem;
  flex-grow: 1;
}

.coupon-details p {
  margin-bottom: 1rem;
}

/* The tappable coupon code button */
.coupon-code-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  border: 2px dashed #950fdb;
  background-color: rgba(13, 110, 253, 0.05);
  border-radius: 0.5rem;
  color: #950fdb;
  font-family: "Courier New", Courier, monospace;
  transition: background-color 0.2s ease-in-out;
}
.coupon-code-btn:hover {
  background-color: rgb(149 15 219 / 10%);
}

.coupon-code-btn span {
  font-size: 1.2rem;
  letter-spacing: 2px;
}
.coupon-code-btn small {
  font-family: "Poppins", sans-serif; /* Use normal font for this text */
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Styling for expired coupons */
.coupon-ticket.expired {
  filter: grayscale(100%);
  opacity: 0.7;
}
.coupon-ticket.expired .coupon-icon {
  background-color: #f8f9fa;
}
.coupon-ticket.expired .coupon-code-btn {
  border-color: #6c757d;
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

/*
=========================
NEW OFFERS PAGE STYLES
=========================
*/

/* Scrollable container for the filter tabs */
.offers-nav {
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.offers-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.offers-nav .nav-pills {
  flex-wrap: nowrap;
  min-width: max-content;
}

/* Card for the main featured offer */
.featured-offer-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* To round the image corners */
  margin-bottom: 2.5rem;
}
.featured-offer-card img {
  width: 100%;
  height: auto;
}

/* Generic body for all offer cards */
.offer-card-body {
  padding: 1.5rem;
}

/* Badge for the offer type (e.g., DEAL, BOGO) */
.offer-badge {
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
}

/* Individual smaller offer card */
.offer-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: 100%; /* Ensures cards in the same row have the same height */
  display: flex;
  flex-direction: column;
}

.offer-card img {
  width: 100%;
  object-fit: cover; /* Ensures all images have a consistent size */
}
.offer-card .offer-card-body {
  padding: 1rem;
  flex-grow: 1; /* Pushes the button to the bottom */
  display: flex;
  flex-direction: column;
  align-items: baseline;
}
.offer-card .offer-title {
  font-weight: 600;
  margin-top: 0.5rem;
}
.offer-card .btn {
  margin-top: auto; /* Aligns the button to the bottom of the card */
}

/*
=========================
NEW ORDER CONFIRMATION PAGE STYLES
=========================
*/

.order-confirm-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh); /* Full viewport height minus header and footer */
  background-color: #e6fffa; /* A light, celebratory green */
  padding: 0;
  overflow: hidden;
}

/* The top part with the animation */
.confirmation-header {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* The bottom content "sheet" */
.confirmation-content-sheet {
  background-color: #fff;
  padding: 2rem 1.5rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  text-align: center;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
  animation: slide-up 0.5s 0.5s ease-out forwards;
  transform: translateY(100%);
}

/* Box for highlighting the order number */
.order-number-box {
  background-color: #f8f9fa;
  border: 1px dashed #dee2e6;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1.5rem;
}
.order-number-box span {
  display: block;
  color: #6c757d;
  font-size: 0.9rem;
}
.order-number-box strong {
  font-size: 1.25rem;
  color: #343a40;
}

/* --- SVG Checkmark Animation --- */
.animated-check {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #198754;
  animation: scale-up 0.75s 0.25s ease-in-out both;
}
.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke: #198754;
  fill: none;
  animation: draw 0.75s 0.25s ease-in-out forwards;
}
.checkmark-path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke-width: 4;
  stroke: #198754;
  animation: draw 0.75s 0.75s ease-in-out forwards;
}

/* --- Confetti Animation --- */
.confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 16px;
  background: #950fdb;
  top: -50px;
  opacity: 0;
  animation: confetti-fall 5s 1s ease-out infinite;
}
.confetti-piece:nth-child(2) {
  background: #198754;
  animation-delay: 1.2s;
  left: 10%;
}
.confetti-piece:nth-child(3) {
  background: #ffc107;
  animation-delay: 1.5s;
  left: 20%;
}
.confetti-piece:nth-child(4) {
  background: #dc3545;
  animation-delay: 1.3s;
  left: 30%;
}
.confetti-piece:nth-child(5) {
  background: #0dcaf0;
  animation-delay: 1.8s;
  left: 40%;
}
.confetti-piece:nth-child(6) {
  background: #6f42c1;
  animation-delay: 1.1s;
  left: 50%;
}
.confetti-piece:nth-child(7) {
  background: #fd7e14;
  animation-delay: 1.6s;
  left: 60%;
}
.confetti-piece:nth-child(8) {
  background: #20c997;
  animation-delay: 1.4s;
  left: 70%;
}
.confetti-piece:nth-child(9) {
  background: #d63384;
  animation-delay: 1.9s;
  left: 80%;
}
.confetti-piece:nth-child(10) {
  background: #950fdb;
  animation-delay: 1.7s;
  left: 90%;
}
.confetti-piece:nth-child(11) {
  background: #198754;
  animation-delay: 1.2s;
  left: 15%;
}
.confetti-piece:nth-child(12) {
  background: #ffc107;
  animation-delay: 1.5s;
  left: 45%;
}
.conf-piece:nth-child(13) {
  background: #dc3545;
  animation-delay: 1.3s;
  left: 75%;
}

/* --- Keyframe Animations --- */
@keyframes scale-up {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes slide-up {
  to {
    transform: translateY(0);
  }
}
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/*
=========================
NEW ORDER DETAILS PAGE STYLES
=========================
*/

/* Live Order Tracker */
.order-tracker {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  text-align: center;
}
.step {
  flex: 0 0 60px; /* Each step has a fixed width */
  position: relative;
  color: #adb5bd;
}
.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  border: 2px solid #adb5bd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  font-size: 1.25rem;
  transition: all 0.3s ease;
}
.step-label {
  font-size: 0.75rem;
  font-weight: 500;
}
.step-line {
  flex-grow: 1;
  height: 3px;
  background-color: #aeb5bd;
  margin: 1.25rem 0.5rem 0;
}

/* Active and Completed States for Tracker */
.step.completed .step-icon,
.step.active .step-icon {
  background-color: #950fdb;
  border-color: #950fdb;
  color: #fff;
}
.step.completed .step-label,
.step.active .step-label {
  color: #950fdb;
}
.step.completed + .step-line {
  background-color: #950fdb;
}

/* Base style for info cards */
.order-details-card {
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.card-title-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

/* Row for displaying info (label + value) */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.info-row:last-child {
  margin-bottom: 0;
}
.info-label {
  color: #6c757d;
}
.info-value {
  font-weight: 600;
}
.total-row .info-label,
.total-row .info-value {
  font-size: 1.1rem;
  color: #343a40;
}

/* List of items in the order */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.item-entry:last-child {
  margin-bottom: 0;
}
.item-entry img {
  width: 60px;
  height: 60px;
  border-radius: 0.75rem;
  object-fit: cover;
}
.item-info {
  flex-grow: 1;
}
.item-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.item-price {
  color: #6c757d;
  margin-bottom: 0;
}

/*
=========================
NEW YOUR ORDERS PAGE STYLES
=========================
*/

/* Re-using the offers nav for a consistent look */
.offers-nav {
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.offers-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.offers-nav .nav-pills {
  flex-wrap: nowrap;
  min-width: max-content;
}

/* Base style for the order history card */
.order-history-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.5rem;
  overflow: hidden; /* Important for border-radius */
  border: 1px solid #e9ecef;
}

.order-history-card .card-header,
.order-history-card .card-body,
.order-history-card .card-footer {
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f8f9fa;
}

.order-history-card .card-header {
  gap: 1rem;
}

.order-history-card .card-footer {
  justify-content: flex-end;
  gap: 0.5rem;
  background-color: #f8f9fa;
  border-bottom: none;
}

/* Status Icon (truck, checkmark, etc.) */
.status-icon {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.header-info {
  flex-grow: 1;
}

/* Status Badge (On its way, Delivered) */
.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
}

/* Color coding for different statuses */
.status-icon.in-progress {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.status-badge.in-progress {
  background-color: rgba(255, 193, 7, 0.2);
  color: #7d6403;
}

.status-icon.delivered {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.status-badge.delivered {
  background-color: rgba(25, 135, 84, 0.2);
  color: #0f5132;
}
.btn-group.w-100 > .btn {
  flex: 1 1 0; /* force equal width */
}

/* Mini product image previews */
.item-previews {
  display: flex;
  flex-grow: 1;
}
.item-previews img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.item-previews img:not(:first-child) {
  margin-left: -15px; /* Creates the stacked effect */
}

/* Order total in the card body */
.order-total {
  text-align: right;
}
.order-total small {
  color: #6c757d;
}

/*
=========================
NEW CHECKOUT PAGE STYLES
=========================
*/

/* Main card that holds all checkout sections */

.section-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #950fdb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-header h6 {
  margin: 0;
}
.section-header .btn-link {
  text-decoration: none;
  font-size: 0.9rem;
}

/* Item list inside the collapsible section */
.item-list-checkout {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item-list-checkout li {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: #6c757d;
}

/* Visual representation of the selected payment method */
.payment-method-selected {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.payment-method-selected img {
  height: 20px;
}

/* Promo code card styling */
.promo-code-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-top: 1.5rem;
}

/* Secure checkout text in the footer */
.secure-checkout-footer {
  text-align: center;
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.75rem;
}
.secure-checkout-footer i {
  color: #198754;
}

/*
=========================
NEW CART PAGE STYLES
=========================
*/

/* Wrapper for each cart item, needed for swipe gesture */
.cart-item {
  position: relative;
  overflow: hidden; /* Hides the delete button initially */
  background-color: #fff;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* The visible content of the cart item */
.cart-item-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

/* The hidden delete button revealed on swipe */
.cart-item-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background-color: #dc3545;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 1;
}

/* Class added by JS to show the delete button */
.cart-item.swiped .cart-item-content {
  transform: translateX(-80px);
}

.cart-item img {
  width: 37px;
  height: 37px;
  border-radius: 0.75rem;
  object-fit: cover;
}
.rounded-start {
  border-bottom-left-radius: 0.75rem !important;
  border-top-left-radius: 0.75rem !important;
}
.item-details {
  flex-grow: 1; /* Pushes quantity selector to the right */
}

/* Modern quantity selector */
.search-product-card .card-footer .btn {
  padding: 7px 5px;
  font-size: 13px;
}

.item-quantity-selector .btn {
  width: 35.5px;
  font-size: 20px !important;
  max-width: 35.5px;
  min-width: 35.5px;
  height: 35.5px;
  padding: 0 0 3px 0px !important;
  line-height: 0px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-quantity-selector {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 0.75rem;
  border: 1px solid #e9ecef;
}
.item-quantity-selector input {
  width: 30px;
  background-color: transparent;
  border: none;
  text-align: center;
  font-weight: 600;
  outline: none;
  padding: 0;
}
.item-quantity-selector .btn {
  flex: 1;
}

/*
=========================
NEW SEARCH RESULTS PAGE STYLES
=========================
*/

/* The new sticky header for the search page */
.search-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1031; /* Higher than sidebar */
}
.search-header .form-control {
  border-right: 0;
}
.search-header .input-group-text {
  background-color: transparent;
}

/* Summary text below the header */
.search-summary {
  color: #6c757d;
}

.search-product-card p.product-price {
  margin: 0 0 7px 0;
}
/* Individual product card in the search grid */
.search-product-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-product-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.search-product-card .card-body {
  padding: 0.75rem;
  flex-grow: 1;
}
.product-price {
  margin-bottom: 0px;
  font-weight: 700;
  margin-top: 4px;
  font-size: 15px;
}
.product-price .text-decoration-line-through {
  font-size: 12px;
  font-weight: 500;
}
.product-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  /* Truncate long titles */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-meta {
  font-size: 10px;
  color: #6c757d;
  margin-bottom: 0;
}

.search-product-card .card-footer {
  background-color: transparent;
  border: none;
  padding: 0 0.75rem 0.75rem;
}

/* Filter Offcanvas (Bottom Sheet) */
.offcanvas-bottom {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

/*
=========================
NEW STORE (PRODUCT LISTING) PAGE STYLES
=========================
*/

/* Base style for the new product card */
.store-product-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-in-out;
  position: relative; /* For absolute positioning of elements */
}
.store-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Image container */
.card-image-top {
  position: relative;
  overflow: hidden;
}
.card-image-top img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* Favorite/Wishlist button */
.favorite-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sale badge */
.sale-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
}

.store-product-card .card-body {
  padding: 1rem;
  flex-grow: 1;
}

/* Add to Cart button in the footer */
.store-product-card .card-footer {
  background: transparent;
  border: none;
  padding: 0 1rem 1rem;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.add-to-cart-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.25rem;
  padding: 0;
}

/*
=========================
NEW HOMEPAGE STYLES
=========================
*/

/* Remove top padding for the body-wrap on the homepage */
.body-wrap > main {
  padding-top: 0;
  margin-top: 0;
}

/* Hero section with gradient background */
.homepage-hero {
  background: linear-gradient(135deg, #950fdb, #0d5dd1);
  color: #fff;
  padding: 12px 0rem;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

.search-bar-hero .input-group {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.search-bar-hero .form-control,
.search-bar-hero .input-group-text {
  border: none;
}
.search-bar-hero .input-group-text {
  background-color: #fff;
}

/* Main promo banners */

.promo-banner.banner-1 {
  background: linear-gradient(to right, #198754, #20c997);
}
.promo-banner.banner-2 {
  background: linear-gradient(to right, #ffc107, #fd7e14);
}

/* Section header with title and "See all" link */

/* Horizontal scrolling wrapper */
.category-scroll-wrapper,
.deals-scroll-wrapper,
.brand-scroll-wrapper {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.category-scroll-wrapper::-webkit-scrollbar,
.deals-scroll-wrapper::-webkit-scrollbar,
.brand-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Category cards */
.category-card {
  flex: 0 0 90px; /* Fixed width for each card */
  text-align: center;
}

.category-card h6 {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Sizing for product cards in horizontal scroll */
.deals-scroll-wrapper .store-product-card {
  flex: 0 0 160px;
  width: 160px;
}

/* Brand logo styling */
.brand-logo {
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
}
.brand-logo img {
  width: 199px;
}

/*
=========================
PREMIUM HOMEPAGE STYLES
=========================
*/

/* Remove top padding for the body-wrap on the homepage */
.body-wrap > main {
  padding-top: 0;
  margin-top: 0;
}

/* General spacing for homepage sections */

.homepage-section.bg-light-blue {
  background-color: #f8f9fa; /* Re-using this color for a slight background tint */
}

/* Section header with title and "See all" link */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Horizontal scrolling wrapper */
.category-scroll-wrapper,
.deals-scroll-wrapper,
.recipe-scroll-wrapper {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.category-scroll-wrapper::-webkit-scrollbar,
.deals-scroll-wrapper::-webkit-scrollbar,
.recipe-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Category cards */
.category-card {
  flex: 0 0 90px;
  text-align: center;
  text-decoration: none;
  color: #343a40;
}
.category-card img {
  width: 90px;
  height: 90px;
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 50%;
  object-fit: contain;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease-in-out;
}
.category-card:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.category-card h6 {
  font-size: 12px;
  font-weight: 600;
  margin: 0px;
}

/* Recipe Card Styling */

.recipe-card {
  flex: 0 0 250px;
  height: 180px;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
}
.recipe-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.recipe-card:hover img {
  transform: scale(1.1);
}
.recipe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.recipe-info {
  position: relative;
  z-index: 2;
  padding: 1rem;
}

.recipe-info span {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Seasonal Banner Styling */
.seasonal-banner {
  position: relative;
  padding: 1.5rem;
  border-radius: 1rem;
  background-image: url("https://images.unsplash.com/photo-1590779033100-9f60a05a013d?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.seasonal-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 1rem;
}
.seasonal-content {
  position: relative;
}
.seasonal-content h2 {
  font-weight: 800;
}

/* Media query for wider screens to make promise grid horizontal */
@media (min-width: 768px) {
  .promise-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/*
=========================
REDESIGNED APP HEADER
=========================
*/

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  background-color: #fff;
  padding: 12px;
  height: 65px; /* A slightly taller header */
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

/* Icon-only buttons in the header */
.btn-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f8f9fa;
  color: #343a40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: none;
}
.btn-icon:hover {
  background-color: #e9ecef;
}

/* Location display in the middle */
.location-display {
  flex-grow: 1;
  overflow: hidden; /* To handle long addresses */
}
.location-display small {
  font-size: 0.7rem;
  color: #6c757d;
}
.location-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Container for right-side action buttons */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Notification dot indicator */
.notification-indicator {
  position: relative;
}
.notification-indicator::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: #dc3545;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* Custom brand styling for Option 2 */
.navbar-brand-custom {
  font-weight: 600;
  color: #212529;
  text-decoration: none;
  font-size: 17px;
  flex-grow: 1;
  text-align: left;
}