/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-primary: #5430bb;
    --color-secondary: #009245;
    --color-accent: #1C1033;
    --color-success: #28a745;
    --color-danger: #dc3045;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-dark: #343a40;
    --color-light: #eaeaea;
    --color-muted: #6c757d;
  }

/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 5px; /* width of vertical scrollbar */
  height: 2px; /* height of horizontal scrollbar */
  display: none;

}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* track color */
  display: none;

}

::-webkit-scrollbar-thumb {
  background: var(--color-primary); /* scrollbar color */
  border-radius: 10px; /* rounded handle */
  display: none;
}

body, html {
  height: 100%;
  /* font-family: "Roboto", sans-serif !important; */
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.layout {
  max-width: 400px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #f7ecfc !important;
}

.main-inner {
  background-color: white;
  border-top-left-radius: 20px ;
  border-top-right-radius: 20px ;
}


main::-webkit-scrollbar {
  display: none !important;
}

header {
  flex-shrink: 0;
  background-color: #f7ecfc;
  flex-shrink: 0;
  padding: 5px 10px;
}

.top-header{
  background-color: #f7ecfc;
}

header .logo {
  width: 40px;
  height: 40px;
  display: flex;
}

header .logo img {
  height: 100%;
  width: 100%;
}

header .profile-dropdown .profile-logo {
  &::after{
    display: none;
  }
}

header .login {
  padding: 6px;
  border: 1px solid #D1C5EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-items: center;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;   
  min-width: 30px;
  height: 30px;
}


header .login-bussiness {
  min-width: 30px;
  height: 30px;
  border: 1px solid #D1C5EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-items: center;
  gap: 5px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;   
  text-align: center;
}

.location-heading-main {
font-size: 12px;
  color: var(--color-accent);
  font-weight: 400;
  display: flex;
  align-items: satrt;
  gap: 2px;
}

.location .location-heading {
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 400;
  display: flex;
  align-items: satrt;
  gap: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; 
}
.location .down-arrow{
  width: 15px;
  height: 15px;
  display: flex;
}


.location .location-heading-main .map-icon {
  display: flex;
  width: 13px;
  height: 13px;
}
.location .location-heading-main .map-icon img {
  width: 100%;
  height: 100%;
}
.wallet {
  background-color: white;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primary);
  border-radius: 08px;
  border: 1px solid #D1C5EB;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
  padding:7px 10px;
  width: auto;
  height: 30px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wallet .blance {
  color: var(--color-primary);
  font-weight: 600;

}

main {
  flex: 1 1 auto;
  overflow-y: auto;
}


progress {
  height: 70px; /* Adjust height as needed */
  margin-bottom: 20px;
  display: flex; /* Use flexbox to properly align segments */
  /* Add a background to the .progress to show the remaining empty space */
  background-color: var(--color-light);
}
/* Custom background color for the active progress bar segments */
.progress-bar-custom {
    background-color: #5124A5 !important;
}


.heading-section {
  font-size: 12px;
  font-weight: 500;
}

main  .search-bar {
  position: relative;
  width: 100%;  
  padding: 0px 13px;
  gap: 10px;
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
  background: white;
  border: 1px solid;
  border-color: #eee;
  border-radius: 100px;
  position: relative;
  -webkit-transition: border-color .3s ease-in-out;
  transition: border-color .3s ease-in-out;
}

main .search-bar .search-icon{
  color: #888;
  font-size: 13px;
}
main .search-bar .search-icon img {
  
  filter: grayscale(5) brightness(4.5);
}

main .search-bar input {
  padding: 12px 0px;
  background-color: transparent;
    
  border: none;
  height: 100%;
  width: 100%;

}
main .search-bar input:focus{
  outline: none;
}

main .search-bar input::placeholder{
  color: #9E9E9E;
  font-size: 14px;
}

.categories-section .categories-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.categories-section .categories-card .categories-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 8px;
    display: flex;
    align-items: end;
    justify-content: end;
    background-color: #f8f7ff;
    /* padding: 5px; */
    padding-bottom: 0;
    border-radius: 50%;
}

.categories-section .categories-card .categories-icon img {
  border-radius: 50%;
}

.categories-section .categories-card .categories-title {
  font-size: 12px;
  font-weight: 500;
}

/* tabs design  */
.custom-offer-card .nav-tabs {
  display: flex;
  flex-wrap: nowrap; /* stop wrapping to next line */
  overflow-x: auto; /* enable horizontal scroll */
  white-space: nowrap; /* no line breaks */
  gap: 10px;
  /* background-color: #F7F7F7; */
  padding: 1px;
  border-radius: 10px;
  list-style: none;
  border: none !important;
  -webkit-overflow-scrolling: touch; 
}

.custom-offer-card .nav-tabs::-webkit-scrollbar {
  display: none;
}
.custom-offer-card .nav-tabs .nav-item  {
  font-size: 12px;
  font-weight: 500;
  
}

.custom-offer-card .nav-tabs .nav-item .nav-link {
  border: 1px solid #ddd !important;
  background-color: #fff !important;
  border-radius:8px !important;
  padding: 6px 16px;
  box-shadow: 1px 1px 8px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden !important;
  color: #212529 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s;
}
.custom-offer-card .nav-tabs .nav-item .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
}


.custom-offer-card .filter-btn {
  border: 1px solid var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-radius: 100px !important;
  padding: 6px 10px;
  box-shadow: 1px 1px 8px -1px rgba(0, 0, 0, 0.1);
  color: white !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
}

/* .custom-offer-card .filter-btn img{
  filter: invert(1);
} */

.custom-offer-card .discount-card {
  background: #fff;
  border-radius: 16px;
  /* box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1); */
  overflow: hidden;
  display: flex;
  position: relative;
  border: 1px solid #eee;
  /* padding: 4px; */
  margin-bottom: 5px;
}

.custom-offer-card .discount-card .label {
  background-color: var(--color-primary);
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding:4px 5px;
  border-radius: 15px 0 0 15px;
  font-weight: 500;
  text-align: center;
  font-size: 12px;
  /* margin-right: -8px; */
  position: relative;
  letter-spacing: 5px;
  display: flex;
  /* flex-direction: column;   stack vertically */
  flex-wrap: wrap;          /* wrap if needed */
  align-items: center;
  gap: 3px;                 /* spacing between pills & badges */
}

.custom-offer-card .discount-card .label .pills {
  border-radius: 100px;
  /* padding: 6px 2px; */
  font-size: 10px;
  background-color: #eee;
  color: #000;
}

.custom-offer-card .discount-card .label .badge {
  width: 35px;
  height: 35px;
  padding: 0;
}
.custom-offer-card .discount-card .label .badge  img{
  width: 100%;
  height: 100%;
}
.custom-offer-card .discount-card .discount-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
}

.custom-offer-card .discount-card .title {
  font-size: 14px;
  font-weight: 600;
  color: black;
}

.custom-offer-card .discount-card .sub-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-muted);
  width: 75%;
}

.custom-offer-card .discount-card .description {
  font-size: 10px;
  color: #7B7B7B;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-wrap: nowrap;
  /* -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; */
}

.custom-offer-card .discount-card .left-card-title {
  font-size: 10px;
  color: #CC0D0D;
  font-weight: 600;
}

.custom-offer-card .discount-card .icon-discount {
  width: 20px;
  height: 20px;
}

.custom-offer-card .discount-card .dropdown .menu-btn img {
  height: 15px;
  display: flex;
}

.custom-offer-card .discount-card .dropdown dropdown-menu img {
  height: 5px;
  display: flex;
}

.droplist {
  font-size: 12px;
  color: black;
}

.droplist .icon{
  width: 15px;
  height: 15px;
  display: flex;
}

.discount-progress {
  border-radius: 0 !important;
}

.custom-offer-card .discount-card .action-btn {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
}

.custom-offer-card .discount-card .action-btn img {
  width: 15px;
  height: 15px;
}

.custom-offer-card .discount-card .buy-btn {
  color: white;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  padding: 6px 40px;
}

.icon-text {
  display: flex;
  align-items: center;
  gap: 5px;
}

.custom-offer-card .discount-card .action-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.custom-offer-card .discount-card .curve-side {
  position: absolute;
  left: -9px;
  top: 0;
  bottom: 0;
  width: 16px;
  /* background-color: #f4f4f4; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  z-index: 1;
}

.custom-offer-card .discount-card .curve-side::before,
.custom-offer-card .discount-card .curve-side::after,
.custom-offer-card .discount-card .curve-side span {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background-color: white;
  border-radius: 50%;
}

.custom-offer-card .discount-card .curve-side span {
  margin: 2px 0;
}

 /* mobile header  */
.mobile-bottom-header {
  background-color: white;
  padding: 5px 0;
  box-shadow: -1px -1px 0px 0px #00000010;
  width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid #D1C5EB;
  flex-shrink: 0;
  /* padding: 5px 10px; */
}

.mobile-bottom-header::-webkit-scrollbar {
  display: none;
}

.bottomBarBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  /* margin: 0 12px; */
  color: #999; /* Default icon and text color */
  text-align: center;
}

.bottomBarBtn .txt {
  font-size: 10px;
  margin-top: 4px;
  font-weight: 400;
}

.bottomBarBtn .icon svg {
  stroke: currentColor;
}

/* Active state */
.bottomBarBtn.active {
  color: #5430bb;
}

/* banner  */
.dropdown-coupen {
overflow-x: auto;
scroll-snap-type: x mandatory;
}

.dropdown-coupen::-webkit-scrollbar {
display: none;
}

.dropdown-coupen ul {
display: flex;
flex-wrap: nowrap;
gap: 8px;
padding: 0;
margin: 0;
list-style: none;
margin-left: 6px;
}

.dropdown-coupen ul li.banner {
flex: 0 0 85vw; /* mobile ke liye: har banner 80% viewport width lega */
scroll-snap-align: start;
overflow: hidden;
border-radius: 12px;
}

.dropdown-coupen ul li.banner img {
width: 100%;
height: 60px;
/* aspect-ratio: 6/1; */
display: block;
object-fit: cover;
border-radius: 6px;
}

.petrol-header {
    display: flex;
    /* align-items: center; */
    margin-bottom: 20px;
}
.petrol-header p {
  margin: 0;
  color: #888;
  font-size: 10px;
  margin-top: 2px;
}
.petrol-header img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
.petrol-title {
  font-size: 20px;
  font-weight: 500;
}
.petrol-subtitle {
  color: #777;
  font-size: 14px;
  font-weight: 500;
}
.petrol-card {
  background: #f8f7ff;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  /* overflow: hidden; */
}
.petrol-card:nth-child(2) {
  background: #f8f7ff;
}
.petrol-card h6 {
  margin-bottom: 0px;
  font-weight: 500;
  color: var(--color-primary);
  font-size: 10px;
}
.petrol-card p {
  margin: 0;
  color: #888;
  font-size: 10px;
  margin-top: 2px;
  margin-bottom: 25px;
}
.petrol-card .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}
.petrol-card .arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-primary);
}
.petrol-card img {
  width: 120px;
  height: 180px;
  object-fit: contain;
  position: absolute;
  bottom: -4rem;
  right: -2rem;
}

  /* Desktop ke liye responsive width */
@media (min-width: 768px) {
.dropdown-coupen ul li.banner {
  flex: 0 0 24vw; /* desktop par 24% width */
}
}

/* Desktop ke liye responsive width */
@media (max-width: 568px) {
.layout {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: 100%;
}
main .categories-section .categories-card .categories-icon {
  width: 60px;
  height: 60px;
}
main .categories-section .categories-card .categories-title {
  font-size: 12px;
  font-weight: 400;
}
}

.offcanvas-bottom {
width: 400px !important;
margin: auto;
height: 50vh !important;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}


.offcanvas-fillter-header {
border-bottom: 1px solid #eee;
}

.offcanvas-fillter-header .closeicon {
position: absolute;
top: -37px;
left: 50%;
transform: translateX(-50%);
background: #141414ad;
color: white !important;
border-radius: 50%;
width: 30px;
height: 30px;
}

.fillter-title {
font-size: 14px;
color: black;
}

.fillter-clear {
font-size: 12px;
color: var(--color-muted);
}

.filter-sidebar {
width: 70px;
border-right: 1px solid #eee;
}

.filter-tab {
padding: 10px 3px;
text-align: center;
font-size: 12px;
color: var(--color-muted);
gap: 5px;
}
.filter-tab .icon {
width: 16px;
height: 16px;
} 
.filter-tab .icon svg {
fill: var(--color-muted);
height: 100% !important;
width: 100% !important;
} 
.filter-tab.active .icon svg {
fill: #5430bb;
} 
.filter-tab .title {
font-size: 12px;
color: var(--color-muted);
font-weight: 500;

}

.filter-tab.active .title {
font-size: 12px;
font-weight: 500;
color: var(--color-primary);
}
.filter-tab.active {
border-right: 3px solid var(--color-primary);
background-color: #f7ecfc;
font-weight: bold;
color: var(--color-primary);
}
.filter-content {
flex: 1;
padding: 1rem;
overflow-y: auto;
}
.filter-content:last-child {
padding-bottom: 180px;
}
.offcanvas-footer {
border-top: 1px solid #eee;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}


.offcanvas-footer .btnclose{
background-color: white;
font-size: 12px;
font-weight: 400;
color: var(--color-primary);
border-radius: 08px;
border: 1px solid #D1C5EB;
box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
padding: 10px 20px;
width: auto;
height: 40px;
line-height: normal;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.offcanvas-footer .showbtn{
background-color: var(--color-primary);
font-size: 12px;
font-weight: 400;
color: white;
border-radius: 08px;
border: 1px solid #D1C5EB;
box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
padding: 10px 20px;
width: auto;
height: 40px;
line-height: normal;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}


.time-filter-box {
background-color: #f4f6fc;
padding: 10px;
border-radius: 15px;
}

.time-filter-box .title-box {
font-size: 14px;
font-weight: 500;
}
.time-btn {
border: 1px solid #eee;
border-radius: 12px;
padding: 8px;
width: 48%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
font-weight: 500;
background-color: white;
box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.1);
font-size: 12px;
color: var(--color-muted);
}

.time-btn img {
width: 20px;
height: 20px;
}

/* sort  */
.shortAccordion{
background-color: #f4f6fc;
padding: 10px;
border-radius: 15px;
border: none;
}

.shortAccordion:focus {
outline: none !important;
box-shadow: none !important;
}

.accordion-item {
border: none !important;
background-color: #f9f7ff;
border-radius: 12px;
/* margin: 20px; */
background-color: transparent !important;

}

.shortAccordion .accordion-button {
background-color: transparent;
border: none !important;
font-size: 14px;
font-weight: 600;
box-shadow: none !important;
padding: 0px;
font-size: 14px;
font-weight: 500;
}

.shortAccordion .accordion-button:not(.collapsed) {
border: none;
outline: none;
box-shadow: none !important;
background-color: transparent !important;
}
.sort-option {
border: none;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
cursor: pointer;
transition: all 0.3s ease;
}

.sort-option.active {
background-color: #f7ecfc;
font-weight: 600;
color: #000;
}

.custom-radio {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #ccc;
position: relative;
display: inline-block;
flex-shrink: 0;
}

.custom-radio::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background-color: var(--color-primary);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  margin-top: 0.1px;
  transition: opacity 0.2s ease;
}

.sort-option.active .custom-radio {
border-color: var(--color-primary);
}

.sort-option.active .custom-radio::before {
opacity: 1;
}

.sort-label {
flex-grow: 1;
font-size: 12px;
font-weight: 400;
}

.accordion-body {
margin-top: 2px;
padding: 0 !important;
border: 1px solid #eee !important;
border-radius: 12px;
/* padding: 8px !important; */
background-color: white !important;
overflow: hidden;
}


/* modal  */

.custom-modal-dialog {
max-width: 100%;
margin: 0 auto;
width: 100%;
}

.custom-modal-dialog .modal-content {
width: 100%;
border-radius: 12px;
}

@media (min-width: 400px) {
.custom-modal-dialog {
  max-width: 400px;
}
}


/* i have a coupen  */

.iHavecoupenBtn {
border: 1px solid #ddd !important;
background-color: #fff !important;
border-radius:100px !important;
padding: 6px;
box-shadow: 1px 1px 8px -1px rgba(0, 0, 0, 0.1);
overflow: hidden !important;
color: #212529 !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
transition: background-color 0.2s;
margin: auto;
font-size: 12px;
/* width: 100%; */
line-height: normal;
}

.iHavecoupenBtn .coupon-icon {
width: 20px;
height: 20px;
background-color: #f9f7ff ;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}

.iHavecoupenBtn .down-aroow {
width: 15px;
height: 15px;

}
.collapse-inner .card{
background-color: transparent !important;
border: none;
}

.add-card-box {
background-color: var(--color-primary); /* Purple */
border-radius: 16px;
color: white;
text-align: center;
padding: 40px 20px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.3s ease;
}

.add-card-circle {
background-color: rgba(255, 255, 255, 0.2);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
}

.add-card-circle svg {
width: 24px;
height: 24px;
stroke: white;
}