@import url("styles.css");

body{
  font-family: var(--font-family);
  padding-top: 4.6em;
}

/* SEARCHBAR STYLES */
.search-bar {
  color: var(--grey-color);
  background-color: white;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  width: 100%;
  border-radius: 5px;
  font-size: 0.875rem;
  font-size: clamp(
    0.875rem,
    0.6346153846153846rem + 1.0256410256410255vw,
    1.25rem
  );
}

.search-bar input {
  border: none;
  background: none;
  flex: 1;
  padding: 8px;
  font-size: 0.7rem;
  font-size: clamp(0.7rem, 0.5076923076923077rem + 0.8205128205128207vw, 1rem);
}

.search-bar input:focus {
  outline: none;
  /* Remove the default focus outline */
  box-shadow: none;
  /* Remove any box-shadow that could appear */
}

.notification-icon {
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.notification-icon a {
  text-decoration: none;
  color: white;
}

.notification-icon a i {
  font-size: 1.25rem;
  font-size: clamp(
    1.25rem,
    1.0096153846153846rem + 1.0256410256410255vw,
    1.625rem
  );
}


.notification-icon .notification-bubble {
  background-color: var(--red-color);
  border-radius: 50%;
  padding: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  top: 0px;
  right: 1px;
  font-size: 0.4em;
  font-size: clamp(0.5em, 0.4198717948717949em + 0.3418803418803419vw, 0.625em);
}

/* CAROUSEL STYLES */
.promo-banner {
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.carousel {
  display: grid;
  grid-auto-flow: column;
  /* Arrange items in columns */
  scroll-behavior: smooth;
  /* Smooth scrolling */
  gap: 0.8rem;
  /* Gap between items */
  overflow-x: auto;
  /* Allow horizontal scrolling */
  overscroll-behavior-x: contain;
  /* Prevent overscroll on x-axis */
  scroll-snap-type: x mandatory;
  /* Snap to each item horizontally */
  scrollbar-width: none;
  /* Hide the scrollbar */
}

.card {
  width: 85vw;
  height: 20vh;
  background-color: #026b11;
  border-radius: 10px;
  /* Border radius for the parent */
  overflow: hidden;
  /* Ensures the image respects the rounded corners */
  scroll-snap-align: center;
  /* Ensures items snap correctly to the left */
}

.card img {
  width: 100%;
  height: 100%;
  /* Ensures the image covers the full height of the card */
  object-fit: fill;
  /* Ensures the image covers the parent element */
  border-radius: 10px;
  /* Matches the parent's border radius */
}

@media (min-width: 768px) {
  .promo-banner {
    padding-top: 2vh;
    padding-bottom: 2vh;
  }

  .carousel {
    gap: 1rem;
  }

  .card {
    width: 40vw;
    height: 40vh;
    background-color: #026b11;
    border-radius: 10px;
    /* Border radius for the parent */
    overflow: hidden;
    /* Ensures the image respects the rounded corners */
  }
}

/* GREETING STYLES */
.greeting-section {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

.greeting-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.greeting-text {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.greeting-text span {
  font-size: 1rem;
  font-weight: 500;
  font-size: clamp(1rem, 0.6794871794871795rem + 1.3675213675213675vw, 1.5rem);
  color: var(--text-color);
}

.greeting-text p {
  margin: 0;
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 0.5897435897435898rem + 0.6837606837606838vw, 1rem);
  color: var(--grey-color);
}

.points-vouchers {
width: 100%;
  display: flex;
  gap: 0.5rem;
}
.points-vouchers .wrapper {
    width: 75%;
    padding: 0.8rem;
  display: flex;
  background-color: white;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  gap: 0.8rem;
}
.points-vouchers .wrapper a {
  gap: 0.5rem;
  align-items: center;
  display: flex;
    text-decoration: none;
}

.points{
  border-right: 0.5px solid #ddd;
  padding-right: 0.8rem;
}

.points,
.vouchers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon img{
    width: 1.5rem;
}

.value {
    display: flex;
    flex-direction: column;
    font-size: 0.6875rem;
font-size: clamp(0.6875rem, 0.48717948717948717rem + 0.8547008547008548vw, 1rem);
  color: var(--grey-color);
}
.value span {
    font-size: 1rem;
font-size: clamp(1rem, 0.7596153846153846rem + 1.0256410256410255vw, 1.375rem);
  font-weight: 500;
  color: var(--text-color);
}

.care-btn {
    padding: 0.8rem;
  background-color: white;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 30%;
  
}

.care-btn img{
  width: 100%;
  height: auto;
}

.care-btn p{
  margin: 0;
}

.care-btn a{
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.care-btn .detail{
  width: 100%;
  align-self: flex-start;
  justify-content: space-between;
  display: flex;
  font-size: 0.6875rem;
font-size: clamp(0.6875rem, 0.48717948717948717rem + 0.8547008547008548vw, 1rem);
  color: var(--grey-color);
  margin: 0;
}

.care-btn i{
  color: var(--light-grey-color);
}


/* VOUCHER STYLES */
.voucher-section {
  max-width: 100%;
  margin: 0 auto;
}

.voucher-header {
  padding: 0.8rem;
  padding-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voucher-header span {
  font-size: 0.875rem;
font-size: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
margin: 0;
}

.voucher-header a {
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
  text-decoration: none;
  color: var(--primary-color);
}

.voucher-list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

.voucher-list::-webkit-scrollbar {
  display: none;
}

.voucher-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 10rem;
  height: fit-content;
  flex: 0 0 auto;
  scroll-snap-align: center;
  transition: transform 0.3s ease; /* Optional: Add smooth hover effect */
}

.voucher-card:hover {
  transform: translateY(-5px); /* Optional: Hover effect to lift the card */
}


.voucher-card img {
  width: 100%;
  height: 40%;
  object-fit: cover;
}

.voucher-info {
  padding: 0.8rem;
  height: 60%;
  display: flex;
  flex-direction: column;
  
}

.voucher-info span {
  font-size: 0.6875rem;
font-size: clamp(0.6875rem, 0.3269230769230769rem + 1.5384615384615385vw, 1.25rem);
  color: var(--text-color);
  font-weight: 600;
}

.voucher-info .price {
  margin-top: 0.3rem;
  font-size: 1rem;
font-size: clamp(1rem, 0.3589743589743589rem + 2.735042735042735vw, 2rem);
  font-weight:900;
  margin: 0;
}

.availability {
  font-size: 0.625rem;
font-size: clamp(0.625rem, 0.22435897435897434rem + 1.7094017094017095vw, 1.25rem);
  color: #666;
  margin-top: 0.3rem;
  margin-bottom: 0px;
}

.progress-bar {
  width: 100%;
  height: 0.2rem;
  background: linear-gradient(to right, #1DB954 80%, #e0e0e0 20%);
  border-radius: 0.2rem;
  margin: 0.2rem 0;
}

.voucher-points {
  font-weight: bold;
  font-size: 0.875rem;
font-size: clamp(0.875rem, 0.3141025641025641rem + 2.393162393162393vw, 1.75rem);
  color: #DAA520;
  margin: 0.2rem 0;
}

.voucher-info button {
  background-color: var(--secondary-color);
  margin-top: 0.2rem;
  color: var(--primary-color);
  border: none;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.75rem;
font-size: clamp(0.75rem, 0.2692307692307692rem + 2.051282051282051vw, 1.5rem);
  transition: background-color 0.3s ease;
}

.voucher-info button:hover {
  background-color: var(--primary-color);
  color: white;
}

@media (min-width: 768px) {
  .voucher-section{
    margin-top: 1rem;
  }
  .voucher-list {
    width: 100%;
    gap: 1.5rem;
  }

  .voucher-card {
    margin-top: 0.6rem;
    margin-bottom: 0.8rem;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    width: 20em;
    height: auto; /* Allow height to auto adjust */
  }

  .voucher-info {
    padding: 0.8rem;
    gap: 0.5rem;
  }
}


/* STORE LIST STYLES */
.store-section {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: white;
}
.store-header {
  padding-bottom: 0.6rem;
  padding-top: 0.5rem;
}

.store-header span{
  font-size: 0.875rem;
font-size: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
}

.store-info-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* Default to 1 column on mobile */
  gap: 0.5rem; /* Gap between items */
  grid-auto-rows: 1fr;
}

.store-info {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 10px;
  gap: 0.8rem;
  transition: transform 0.3s ease; /* Optional: Add smooth hover effect */
}
.store-info:hover {
  transform: translateY(-5px); /* Optional: Hover effect to lift the card */
}


.store-image {
  width: 35%;
  height: auto;
  display: flex;
  border-radius: 8px 0px 0px 8px;
  overflow: hidden;
  flex: 1;
}

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

.store-details{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 2;
  gap: 0.3rem;
}

.store-details h3 {
  font-size: 0.875rem;
font-size: clamp(0.875rem, 0.3141025641025641rem + 2.393162393162393vw, 1.75rem);
  color: var(--text-color);
  margin: 0;
}

.store-details p {
  font-size: 0.6875rem;
font-size: clamp(0.6875rem, 0.2467948717948718rem + 1.8803418803418803vw, 1.375rem);
  color: #878787;
  margin: 0;
}

@media (min-width: 765px) {
  .store-info-wrapper {
    grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
    gap: 1rem;
  }

  .store-info {
    gap: 1.5rem;
  }
}