@font-face {
      font-family: Roboto;
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      src: local("Roboto Regular"), local("Roboto-Regular"), local("Roboto"), local("sans-serif"), url('../font/roboto-regular.woff2') format("woff2"), url('../font/roboto-regular.woff') format("woff"), url('../font/roboto-regular.ttf') format("truetype")
    }

    @font-face {
      font-family: Roboto;
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      src: local("Roboto Medium"), local("Roboto-Medium"), local("Roboto"), local("sans-serif-medium"), url('../font/roboto-medium.woff2') format("woff2"), url('../font/roboto-medium.woff') format("woff"), url('../font/roboto-medium.ttf') format("truetype")
    }

    @font-face {
      font-family: NotoSansDevanagari;
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      src: local("NotoSansDevanagari Regular"), local("NotoSansDevanagari-Regular"), local("NotoSansDevanagari"), local("sans-serif"), url('../font/NotoSansDevanagariUI-Regular.ttf') format("truetype")
    }

    @font-face {
      font-family: NotoSansDevanagari;
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      src: local("NotoSansDevanagari Medium"), local("NotoSansDevanagari-Medium"), local("NotoSansDevanagari"), local("sans-serif-medium"), url('../font/NotoSansDevanagariUI-Medium.ttf') format("truetype")
    }

    @font-face {
      font-family: NotoSansDevanagari-Medium;
      font-style: normal;
      font-display: swap;
      src: local("NotoSansDevanagari Medium"), local("NotoSansDevanagari-Medium"), local("NotoSansDevanagari"), local("sans-serif-medium"), url('../font/NotoSansDevanagariUI-Medium.ttf') format("truetype")
    }

    @font-face {
      font-family: inter_regular;
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      src: local("Inter"), url('../font/Inter-Regular.woff2') format("woff2"), url('../font/Inter-Regular.woff') format("woff"), url('../font/Inter-Regular.ttf') format("truetype")
    }

    @font-face {
      font-family: inter_bold;
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      src: local("Inter Bold"), local("Inter-Bold"), local("Inter"), url('../font/Inter-Bold.woff2') format("woff2"), url('../font/Inter-Bold.woff') format("woff"), url('../font/Inter-Bold.ttf') format("truetype")
    }

    @font-face {
      font-family: inter_extra_bold;
      font-weight: 800;
      font-style: normal;
      font-display: swap;
      src: local("Inter Extra Bold"), local("Inter-ExtraBold"), local("Inter"), url('../font/Inter-ExtraBold.woff2') format("woff2"), url('../font/Inter-ExtraBold.woff') format("woff"), url('../font/Inter-ExtraBold.ttf') format("truetype")
    }

    @font-face {
      font-family: inter_semi_bold;
      font-weight: 600;
      font-style: normal;
      font-display: swap;
      src: url('../font/Inter-SemiBold.woff2') format("woff2"), url('../font/Inter-SemiBold.woff') format("woff"), url('../font/Inter-SemiBold.ttf') format("truetype")
    }

    @font-face {
      font-family: fallback-inter_regular;
      font-weight: 400;
      ascent-override: 90.2%;
      descent-override: 22.48%;
      line-gap-override: 0;
      size-adjust: 107.4%;
      src: local("Arial")
    }

    @font-face {
      font-family: fallback-inter_semi_bold;
      font-weight: 600;
      ascent-override: 92.2%;
      descent-override: 19%;
      line-gap-override: 0;
      size-adjust: 109.2%;
      src: local("Arial")
    }

    body,
    button,
    input,
    select,
    textarea {
      font-family: inter_regular, fallback-inter_regular, Arial, sans-serif;
      letter-spacing: -0.2px
    }

    .app-container {
      padding: 16px;
      font-family: 'Arial', sans-serif;
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      margin-bottom: 75px;

    }

    .bg-4s8 {
      background: linear-gradient(to bottom, #cce6ff, #ffffff);
      padding: 16px;
      padding-bottom: 0;
      font-family: 'Arial', sans-serif;
      max-width: 500px;
      margin: 0 auto;
      position: relative;

    }

    .shortcut-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;

    }

    .shortcut {
      background: white;
      border-radius: 18px;
      text-align: center;
      padding: 8px;
      width: 22%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .shortcut img {
      width: 32px;
      height: 32px;
    }

    .shortcut span {
      display: block;
      font-weight: bold;
      font-size: 14px;
      font-style: italic;


    }

    .shortcut.timer {
      background: #fff0f5;
    }

    .timer-box {
      background-color: #a80042;
      color: white;
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
    }

    .location {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-bottom: 16px;
      color: #333;
      font-family: inter_regular, fallback-inter_regular, Arial, sans-serif;
    }


    .location i {
      margin-right: 6px;
    }

    .location .label {
      font-weight: bold;
      margin-right: 4px;
    }

    .location .arrow {
      margin-left: auto;
      font-weight: bold;
      font-size: 16px;
    }

    .search-bar {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 16px;
      padding: 10px 14px;
      border: 2px solid #b3d7ff;
    }

    .search-bar i {
      color: #007aff;
      margin-right: 10px;
    }

    .search-bar input {
      border: none;
      outline: none;
      font-size: 16px;
      flex: 1;
    }

    .flipkart-box {
      background-color: #ffeb3b;
    }

    .product-section {
      font-family: 'Arial', sans-serif;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .section-header h3 {
      margin: 0;
      font-size: 18px;
    }

    .subheading {
      color: gray;
      font-size: 14px;
    }

    .arrow-button {
      background: #007bff;
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-list {}

    .product-card {
      background: #f5f5f5;
      border-radius: 12px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;

    }

    .image-wrapper {
      /* width: 200px; */
      height: 200px;
      overflow: hidden;
      border-radius: 12px 12px 0 0;
      padding: 7px;
      text-align: center;
    }

    .image-wrapper img {
      height: 100%;
    }


    .quality-badge {
      /* position: absolute; */
      /* bottom: 10px; */
      /* left: 8px; */
      background: #1e90ff;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .rating {
      /* position: absolute; */
      /* bottom: 10px; */
      /* right: 8px; */
      background: white;
      color: #0a0;
      font-weight: bold;
      font-size: 13px;
      padding: 2px 6px;
      border-radius: 8px;
      display: flex;
      align-items: center;
    }

    .rating i {
      margin-left: 4px;
      color: green;
    }

    .product-info {
      padding: 10px;
    }

    .product-title {
      margin: 0 0 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
      white-space: nowrap;
      margin: 0;
    }

    .price {
      font-weight: bold;
      font-size: 15px;
      margin: 0;
      font-family: Inter, -apple-system, Helvetica, Arial, sans-serif;
    }

    .original-price {
      font-size: 12px;
      text-decoration: line-through;
      color: #777;
      margin-left: 6px;
    }

    .deal {
      color: green;
      font-size: 13px;
      font-weight: bold;
    }

    .product-info-box {
      font-family: Arial, sans-serif;
      width: 300px;
      line-height: 1.4;
      color: #222;
    }

    .product-title {
      font-weight: semibold;
      font-size: 15px;
      margin: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: Arial, sans-serif;
      color: #000;
    }

    .product-subtext {
      color: #666;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .rating-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }

    .rating-badge {
      background: #388e3c;
      color: white;
      font-size: 12px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 4px;
      display: flex;
      align-items: center;
    }

    .rating-badge i {
      margin-left: 4px;
      font-size: 10px;
    }

    .review-count {
      font-size: 13px;
      color: #666;
    }

    .assured-badge {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #0033cc;
      font-weight: 500;
    }

    .assured-badge img {
      height: 16px;
      margin-right: 4px;
    }

    .price-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .current-price {
      font-weight: bold;
      font-size: 16px;
    }

    .original-price {
      text-decoration: line-through;
      color: #888;
      font-size: 13px;
    }

    .discount {
      color: green;
      font-size: 13px;
      font-weight: bold;
    }

    .bank-offer {
      color: green;
      font-size: 13px;
      font-weight: bold;
    }

    .bottom-nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid #e0e0e0;
      background: #fff;
      width: 100%;
      max-width: 500px;
      /* fixed max-width */
      padding: 10px 0;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 99999999;
      /* center horizontally */
    }

    .nav-item {
      text-align: center;
      color: #888;
      font-size: 13px;
      position: relative;
    }

    .nav-item i {
      font-size: 20px;
      display: block;
      margin-bottom: 4px;
    }

    .nav-item.active {
      color: #0066ff;
    }

    .nav-item.active i {
      color: #0066ff;
    }

    .cart-badge {
      position: absolute;
      top: -4px;
      right: 6px;
      background: red;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 50%;
      font-weight: bold;
    }

    .quality-section {
      background: #efe6ff;
      border-radius: 20px;
      padding: 16px;
      max-width: 600px;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }

    .quality-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .quality-header h3 {
      font-size: 18px;
      font-weight: bold;
      margin: 0;
    }

    .arrow-btn {
      background: #000;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .product-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .product-item {
      background: #f4f5f5;
      border-radius: 12px;
      padding: 10px;
      text-align: left;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      height: 200px;
    }

    .product-item img {
      height: 100%;
      border-radius: 12px;
      margin-bottom: 6px;
      display: block;
      margin: auto;
    }

    .label {
      font-size: 13px;
      color: #555;
    }

    .bold-text {
      font-size: 14px;
      font-weight: bold;
      margin-top: 2px;
    }

    .swiper {
      width: 100%;
      height: 100%;
      border-radius: 16px;

    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px;

    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
    }

    .ratings-section {
      font-family: Arial, sans-serif;
      padding-bottom: 16px;
      background: #fff;
      border-radius: 12px;
      max-width: 500px;
      margin: 20px auto;
    }

    .ratings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ratings-header h3 {
      font-size: 16px;
      margin: 0;
      font-weight: bold;
    }

    .rate-btn {
      background: #ffffff;
      border: 1px solid #ccc;
      padding: 6px 12px;
      border-radius: 6px;
      color: #2c77f0;
      cursor: pointer;
      font-size: 13px;
      font-weight: bold;
    }

    .overall-rating {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      gap: 20px;
    }

    .stars-box {
      flex: 1;
      text-align: center;
    }

    .stars-label {
      font-weight: bold;
      margin-bottom: 4px;
    }

    .stars {
      font-size: 20px;
      color: #008c00;
      font-weight: bold;
    }

    .half {
      font-size: 16px;
      color: #008c00;
    }

    .ratings-count {
      font-size: 13px;
      color: #777;
      margin-top: 4px;
    }

    .rating-bars {
      flex: 1.2;
    }

    .bar-row {
      display: flex;
      align-items: center;
      font-size: 13px;
      margin: 3px 0;
      gap: 6px;
    }

    .bar-row .bar {
      flex: 1;
      height: 6px;
      background: #008c00;
      border-radius: 4px;
      margin: 0 6px;
    }

    .category-ratings {
      display: flex;
      justify-content: space-between;
      margin: 20px 0 10px;
      text-align: center;
    }

    .cat-box {
      flex: 1;
    }

    .cat-box div {
      font-size: 12px;
    }

    .cat-box .score {
      background: #ffffff;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      font-weight: bold;
      font-size: 16px;
      color: #008c00;
      margin-bottom: 4px;
      border: 2px solid #008c00;
    }

    .review-summary {
      margin: 16px 0;
    }

    .review-summary h4 {
      margin: 0 0 4px;
      font-size: 15px;
      font-weight: bold;
    }

    .subtext {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }

    .pros,
    .cons {
      margin-bottom: 10px;
      font-size: 14px;
    }

    .pros ul,
    .cons ul {
      margin: 6px 0 0 16px;
      padding-left: 0;
    }

    .action-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 20px;
    }

    .add-btn {
      flex: 1;
      padding: 12px;
      font-weight: bold;
      background: #f1f3f6;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .buy-btn {
      flex: 1;
      padding: 12px;
      font-weight: bold;
      background: #ffcc00;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

   
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #dceeff;
  padding: 10px 12px;
  border-radius: 12px;
  position: relative;
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
}

.back-btn {
  background: transparent;
  border: none;
  font-size: 20px;
}

.cart-icon {
  position: relative;
  font-size: 20px;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: red;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50%;
}

.filters {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter {
  padding: 6px 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 13px;
}

.filter.green {
  background: #e5ffe5;
  color: #2e7d32;
  border-color: #b2dfdb;
}

.product-list {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  /* gap: 16px; */
  margin-top: 20px;
}

.product-card {
  background: #fff;
  border-radius: 12px;
  /* padding: 12px; */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: relative;
}

.top-badges {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
}

.badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: bold;
  display: inline-block;
}

.badge.green {
  background: #d0f0d0;
  color: #2e7d32;
}

.badge.secondary {
  background: #eef;
  color: #0044cc;
  font-size: 12px;
  margin-top: 6px;
  display: inline-block;
}

.fav {
  font-size: 16px;
  color: #aaa;
}

.product-card img {
  /* width: 100%; */
  height: 100%;
  /* margin-top: 4px; */
  border-radius: 8px;
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 6px 0;
}

.rating {
  font-size: 13px;
  color: #2e7d32;
}

.price {
  margin: 4px 0;
}

.price .final {
  font-weight: bold;
  font-size: 15px;
}

.price .original {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
  margin-left: 6px;
}

.offers {
  font-size: 12px;
  color: #444;
  margin-bottom: 4px;
}

.offers.green {
  color: #2e7d32;
  font-weight: bold;
}

.delivery {
  font-size: 12px;
  color: #333;
  margin-bottom: 8px;
}

.add-btn {
  width: 100%;
  background: #fff;
  border: 1px solid #2a55e5;
  color: #2a55e5;
  padding: 6px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}
.lowest{
  font-size: 12px;
  background-color: #e7f8ec;
  color: #26a541;
  padding: 4px 8px;
  display: inline-block;
}
.truck{
  font-size: 12px;
  margin-top: 3px;
  color: #202020;
}

.product_page {
    width: 100%;
    max-width: 600px; /* Adjust this as needed */
    margin: auto;
}

.product-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-box img {
    max-height: 300px;
    object-fit: contain;
}


.buy-now-btn{
  background-color: #ffc200;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  border: none;
  padding: 10px 25px;
}
.cart-now-btn{
  background-color: #dddddd;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  border: none;
  padding: 10px 25px;
}

 .bottom-btn {
      background: #fff;
      width: 100%;
      max-width: 500px;
      padding: 10px 0;
      position: fixed;
      bottom: 60px;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 999;
}
 

    .input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    .input:focus{
      border: 1px solid #ddd;
      outline: none;
    }

    .label {
      margin-bottom: 10px;
      font-size: 15px;
      color: #444;
    }

    .address-type {
      display: flex;
      gap: 12px;
      margin-bottom: 30px;
    }

    .address-type button {
      flex: 1;
      padding: 12px;
      border: 2px solid #ccc;
      border-radius: 12px;
      background: #fff;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }

    .address-type button.selected {
      /* border-color: #0a60f5; */
      background: #f0f0f0;
    }

    .address-type svg {
      width: 20px;
      height: 20px;
    }

    .save-btn {
      width: 100%;
      padding: 16px;
      background-color: #0b63f6;
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      border: none;
      border-radius: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .save-btn:hover {
      background-color: #004cd6;
    }
    .step-header {
      display: flex;
      align-items: center;
    }

    .step-header svg {
      width: 24px;
      height: 24px;
      margin-right: 10px;
      cursor: pointer;
    }

    .step-header h2 {
      font-size: 20px;
      margin: 0;
    }

    .stepper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 500px;
      margin: 30px auto;
    }

    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
    }

    .step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 14px;
      right: -50%;
      width: 100%;
      height: 2px;
      background-color: #ccc;
      z-index: 0;
    }

    .step.completed:not(:last-child)::after {
      background-color: #0b63f6;
    }

    .circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #ccc;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #999;
      z-index: 1;
    }

    .step.completed .circle {
      border-color: #0b63f6;
      color: #0b63f6;
    }

    .step.active .circle {
      background-color: #0b63f6;
      color: #fff;
      border: none;
    }

    .step-label {
      margin-top: 8px;
      font-size: 14px;
      color: #999;
    }

    .step.completed .step-label {
      color: #999;
    }

    .step.active .step-label {
      color: #000;
      font-weight: 600;
    }

    .check-icon {
      stroke: #0b63f6;
      width: 18px;
      height: 18px;
    }

        .section {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .address-header {
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .tag {
      background: #eee;
      color: #444;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 8px;
    }

    .change-btn {
      color: #0b63f6;
      font-size: 14px;
      cursor: pointer;
    }

    .product {
      display: flex;
      gap: 16px;
    }

    .product img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    .product-details {
      flex: 1;
    }

    .labels {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
    }

    .label {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: bold;
    }

    .bestseller {
      background: #00c853;
      color: white;
    }

    .hotdeal {
      background: #ffd700;
      color: #444;
    }

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

    .stars {
      color: #388e3c;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .price {
      font-size: 18px;
      font-weight: bold;
      color: #111;
    }

    .price del {
      color: #999;
      font-weight: normal;
      margin-left: 6px;
    }

    .vip-box {
      border: 1px solid #fdd835;
      background: #fffde7;
      padding: 12px;
      border-radius: 6px;
      margin: 16px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .vip-info {
      font-size: 14px;
    }

    .vip-price {
      font-weight: bold;
      margin-top: 4px;
    }

    .vip-btn {
      background: #0b63f6;
      color: white;
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .total {
      text-align: right;
      font-size: 20px;
      font-weight: bold;
    }

    .continue-btn {
      width: 100%;
      padding: 14px;
      background: #ffc107;
      color: black;
      font-weight: bold;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 12px;
    }

    .gst-option {
      margin-top: 10px;
      display: flex;
      align-items: center;
    }

    .gst-option input {
      margin-right: 8px;
    }

    .view-price {
      font-size: 13px;
      color: #0b63f6;
      margin-top: 4px;
      cursor: pointer;
    }
        .section {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .summary-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #e7f0ff;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .summary-header span {
      color: #0b63f6;
      font-size: 18px;
    }

    .cashback {
      background: #e8f5e9;
      color: #2e7d32;
      padding: 10px 16px;
      font-size: 14px;
      border-radius: 8px;
      margin-bottom: 16px;
    }

    .payment-option {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .payment-option .title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .upi-methods {
      margin-top: 12px;
    }

    .upi-option {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 14px;
    }

    .upi-option input {
      accent-color: #0b63f6;
    }

    .pay-btn {
      background: #ffc107;
      border: none;
      padding: 12px;
      border-radius: 8px;
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      margin-top: 12px;
      cursor: pointer;
    }

    .other-method {
      border-top: 1px solid #ddd;
      padding-top: 12px;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }

    .other-method:hover {
      background: #f1f1f1;
    }

    .details-link {
      color: #0b63f6;
      font-size: 13px;
      margin-left: 6px;
      text-decoration: underline;
      cursor: pointer;
    }

    .cashback-info {
      color: green;
      font-size: 13px;
      margin-top: 4px;
    }
   

.upi-methods-container h2 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #333;
}

.upi-option {
    border: 2px solid #eee;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.upi-option:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.upi-option input[type="radio"] {
    margin-right: 10px;
    accent-color: #0b63f6;
}

.upi-option label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.upi-option img {
    width: 60px;
    height: auto;
    margin-right: 15px;
    border-radius: 8px;
}

.upi-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.upi-label {
    font-weight: 600;
    font-size: 1rem;
    color: #222;
}

.cashback-info {
    font-size: 0.9rem;
    color: #16a34a;
    margin-top: 4px;
}

.details-link {
    font-size: 0.85rem;
    color: #2563eb;
    cursor: pointer;
    margin-left: 5px;
    text-decoration: underline;
}

.pay-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: #0b63f6;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
}

.pay-btn:hover {
    background: #2563eb;
}

.text-success{
  color: #06923E !important;
}