/* Base styles (already given) */
.custom-checkout-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 10.4167vw, 200px);
}
.custom-checkout-wrapper .back-button {
  margin-bottom: 0;
  padding-left: 0;
  margin-left: -5px;
  display: inline-block;
  padding-bottom: 0;
}
.checkout-steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 30px 0 60px;
  padding: 0;
  overflow-x: auto; /* mobile ke liye horizontal scroll */
  height: 65px;
  flex-shrink: 0;
  border-radius: 80px;
  border: 1px solid #000;
  background: #f5fbf9;
  padding: 2px;
}
li.step:first-child {
  border-radius: 80px 0px 0px 80px;
}
li.step:last-child {
  border-radius: 0px 80px 80px 0px;
}
.checkout-steps .step {
  flex: 1;
  text-align: center;
  color: #b4b4b3;
  text-align: center;
  font-family: Lato;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 59px;
  letter-spacing: 0.52px;
}

.checkout-steps .step.active {
  background: #30a67f;
  color: #fff;
  font-weight: 700;
}
.checkout-steps .step.active svg {
  fill: #fff;
}
.checkout-steps .step svg {
  fill: #b4b4b3;
}

.checkout-steps .step.inactive {
  background: #30a67f;
  color: rgba(255, 255, 255, 0.5);
}
.checkout-steps .step.inactive svg {
  fill: rgba(255, 255, 255, 0.5);
}
.step-content {
  display: none;
}

.step-content.active {
  display: block;
}

.basket-head-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin: 60px 0px 16px 0px;
}
.basket-head-wrapper .cc-subtotal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1024px) {
  .checkout-steps {
    margin: 24px 0px 75px;
  }
}
@media (max-width: 768px) {
  .checkout-steps {
    flex-direction: row;
    align-items: flex-start;
    margin: 24px 0px 40px;
  }

  .checkout-steps .step {
    width: 75px;
    height: 59px;
    text-align: left;
    border-bottom: none;
    padding: 12px;
    text-align: center;
    line-height: 2;
  }

  .checkout-steps .step.active {
    border-left-color: #28a745;
  }
}

.next-step,
.prev-step {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 12px 18px;
  margin: 10px 5px 0 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.prev-step {
  background: #6c757d;
}
@media (max-width: 480px) {
  .next-step,
  .prev-step {
    width: 100%;
    margin: 8px 0;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .custom-checkout-wrapper {
    padding: 10px;
  }
}
#step-2 .checkout-address-form {
  background: #fff;
}
.checkout-address-form {
  background: #fafafa;
  padding: 00px;
  border-radius: 6px;
  margin-top: 0px;
}

.checkout-address-form h3 {
  margin: 15px 0 10px;
  font-size: 18px;
  color: #333;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Container */
.cc-strip {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 24px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  width: 100%;
}

/* Left: radios */
.cc-left {
  display: flex;
  align-items: self-start;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  opacity: 0.6;
}
.cc-label {
  color: #7c7c7a;
  leading-trim: both;
  text-edge: cap;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.2px;
}
.cc-radios {
  display: flex;
  gap: 22px;
  border: 0;
  margin: 0;
  padding: 0;
}

.cc-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  margin: 0;
  padding: 0;
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}
.cc-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-dot {
  width: 18px;
  height: 18px;
  border: 2px solid #2bb673;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
}
.cc-radio input:checked + .cc-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2bb673;
}
.cc-help {
  border: 0;
  background: transparent;
  color: #9aa0a6;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-size: 14px;
}

/* Right: subtotal + button */
.cc-right {
  align-items: flex-start;
  gap: 0px;
  flex-direction: column;
}
#step-3 .cc-right {
  width: 100%;
}
.cc-subtotal small {
  display: block;
  color: #7c7c7a;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.2px;
  opacity: 0.6;
}
.cc-subtotal strong {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 640;
  line-height: 42px; /* 150% */
  letter-spacing: -0.14px;
  text-transform: capitalize;
}
.cc-btn {
  display: flex;
  height: 58px;
  padding: 17px 32px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  background: #30a67f;
}
.cc-btn:disabled {
  background: #cfcfcf;
  cursor: not-allowed;
  opacity: 0.8;
}
.cc-btn:not(:disabled):active {
  transform: translateY(1px);
}
.cc-arrow {
  display: inline-block;
}
button#w2w-confirm-and-pay2 {
  margin-top: 15px;
}
/* Responsive */
@media (max-width: 900px) {
  .cc-strip {
    flex-wrap: wrap;
    gap: 16px;
  }
  .cc-left {
    width: 100%;
  }
  .cc-right {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 560px) {
  .cc-radios {
    flex-direction: column;
    gap: 10px;
  }
  .cc-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .cc-subtotal {
    width: 100%;
  }
  .cc-btn {
    width: 100%;
    justify-content: center;
  }
}

.checkout-steps.lg-hidden {
  display: none !important;
}

/* Mobile responsive adjustments for Checkout page */
@media (max-width: 1024px) {
  .page-template-page-checkout .top-bar {
    display: none !important;
  }
  .page-template-page-checkout .w2wasp__searchbox {
    display: none !important;
  }
  .page-template-page-checkout .back-button {
    display: none !important;
  }
  .page-template-page-checkout .reviewWidget {
    display: none !important;
  }
  .page-template-page-checkout .basket-title-section {
    display: none !important;
  }
  .page-template-page-checkout header#masthead {
    top: 0 !important;
  }
  .page-template-page-checkout header#masthead.fixed {
    top: 0 !important;
  }
  .page-template-page-checkout main#primary.site-main {
    margin-top: 80px !important; /* Adjust content margin to match the hidden top-bar */
  }

  /* Force step visibility on mobile to prevent breakpoint mismatches */
  .checkout-steps.sm-hidden {
    display: none !important;
  }

  /* Mobile step bar — Figma 9641:15983 (46px steps, 40px × 1px connectors, 4px gaps) */
  .checkout-steps.lg-hidden {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 48px !important; /* 4px + 40px connector + 4px */
    background: transparent !important;
    border: none !important;
    height: auto !important;
    max-width: 328px !important;
    width: 100% !important;
    margin: 16px auto 24px !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .checkout-steps.lg-hidden .step {
    flex: 0 0 46px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #b4b4b3 !important;
    font-family: Lato, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    width: 46px !important;
    height: auto !important;
  }

  .checkout-steps.lg-hidden .step-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: background 0.3s, border-color 0.3s !important;
    background: rgba(235, 235, 234, 0.6) !important;
  }

  .checkout-steps.lg-hidden .step.active .step-icon-wrap,
  .checkout-steps.lg-hidden .step.inactive .step-icon-wrap {
    background: #30a67f !important;
  }

  .checkout-steps.lg-hidden .step .step-icon-wrap svg,
  .checkout-steps.lg-hidden .step .step-icon-wrap svg path {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: #b4b4b3 !important;
  }

  .checkout-steps.lg-hidden .step.active .step-icon-wrap svg,
  .checkout-steps.lg-hidden .step.active .step-icon-wrap svg path,
  .checkout-steps.lg-hidden .step.inactive .step-icon-wrap svg,
  .checkout-steps.lg-hidden .step.inactive .step-icon-wrap svg path {
    fill: #ffffff !important;
  }

  .checkout-steps.lg-hidden .step .step-label {
    margin-top: 0 !important;
    font-family: Lato, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: #b4b4b3 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .checkout-steps.lg-hidden .step.active .step-label,
  .checkout-steps.lg-hidden .step.inactive .step-label {
    color: #30a67f !important;
    font-weight: 600 !important;
  }

  .checkout-steps.lg-hidden .step.active,
  .checkout-steps.lg-hidden .step.inactive,
  .checkout-steps .step.active,
  .checkout-steps .step.inactive {
    cursor: pointer;
  }

  /* Connector line between steps (Figma: 40×1px, vertically aligned to icon center) */
  .checkout-steps.lg-hidden .step::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 15.5px !important;
    left: calc(100% + 4px) !important;
    width: 40px !important;
    height: 1px !important;
    background: rgba(180, 180, 179, 0.4) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Completed (past) steps get a brand-green connector to the next step */
  .checkout-steps.lg-hidden .step.inactive::after {
    background: #30a67f !important;
  }

  .checkout-steps.lg-hidden .step:last-child::after {
    display: none !important;
  }

  .delivery-promo-bar.desktop-promo {
    display: none !important;
  }

  /* Redesigned Spend Progress Bar for Mobile */
  .delivery-promo-bar.mobile-promo {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 24px 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .delivery-promo-bar.mobile-promo .promo-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #7c7c7a !important;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .delivery-promo-bar.mobile-promo .promo-text::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.2501 5.99975C11.2513 6.15356 11.2046 6.30393 11.1163 6.42994C11.0281 6.55595 10.9029 6.65135 10.7579 6.70288L7.78418 7.78428L6.70324 10.7576C6.64997 10.9011 6.55404 11.0249 6.42835 11.1123C6.30266 11.1997 6.15322 11.2466 6.00012 11.2466C5.84702 11.2466 5.69758 11.1997 5.57189 11.1123C5.4462 11.0249 5.35027 10.9011 5.29699 10.7576L4.21606 7.78382L1.24231 6.70288C1.09877 6.6496 0.974984 6.55367 0.887568 6.42798C0.800151 6.30229 0.753296 6.15285 0.753296 5.99975C0.753296 5.84665 0.800151 5.69722 0.887568 5.57152C0.974984 5.44583 1.09877 5.3499 1.24231 5.29663L4.21606 4.21569L5.29699 1.24194C5.35027 1.09841 5.4462 0.974618 5.57189 0.887202C5.69758 0.799785 5.84702 0.75293 6.00012 0.75293C6.15322 0.75293 6.30266 0.799785 6.42835 0.887202C6.55404 0.974618 6.64997 1.09841 6.70324 1.24194L7.78465 4.21569L10.7579 5.29663C10.9029 5.34816 11.0281 5.44356 11.1163 5.56957C11.2046 5.69558 11.2513 5.84594 11.2501 5.99975Z' fill='%2330a67f'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
  }

  .delivery-promo-bar.mobile-promo .promo-text strong {
    color: #30a67f !important;
    font-weight: 700 !important;
  }

  .delivery-promo-bar.mobile-promo .promo-text::after {
    content: "." !important;
    color: #116247 !important;
    font-weight: 700 !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress {
    position: relative !important;
    height: 5px !important;
    background: rgba(180, 180, 179, 0.2) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress .fill {
    height: 100% !important;
    background: #1f8462 !important;
    border-radius: 10px !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress .gift-badge {
    position: absolute !important;
    left: 72.5% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    border: 1.5px solid rgba(180, 180, 179, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10);
    z-index: 3 !important;
    animation: giftPulse 2s ease-in-out infinite !important;
  }

  /* Show and style the inline SVG */
  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress .gift-badge svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress .gift-badge svg path {
    fill: #7c7c7a !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress.reached .gift-badge {
    border-color: #30a67f !important;
    animation: giftPulseGreen 2s ease-in-out infinite !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo .promo-progress.reached .gift-badge svg path {
    fill: #30a67f !important;
  }
}

/* Gift badge blinking shadow animations — outside media query for broader support */
@keyframes giftPulse {
  0% {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10), 0 0 0 0 rgba(180, 180, 179, 0.45);
  }
  50% {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10), 0 0 12px 6px rgba(180, 180, 179, 0.25);
  }
  100% {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10), 0 0 0 0 rgba(180, 180, 179, 0.45);
  }
}

@keyframes giftPulseGreen {
  0% {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10), 0 0 0 0 rgba(48, 166, 127, 0.5);
  }
  50% {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10), 0 0 14px 7px rgba(48, 166, 127, 0.2);
  }
  100% {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10), 0 0 0 0 rgba(48, 166, 127, 0.5);
  }
}

/* Utility Classes for Desktop/Mobile Display Toggle */
.mobile-only {
  display: none !important;
}

@media (max-width: 767px) {
  .mobile-only {
    display: block !important;
  }
  .tabs-group.mobile-only {
    display: flex !important;
  }
  .desktop-only {
    display: none !important;
  }

  /* Empty state container styles */
  #w2w-cart-root .mobile-empty-state-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #w2w-cart-root .empty-text-wrap {
    margin-bottom: 24px !important;
    width: 100% !important;
  }

  #w2w-cart-root .empty-title {
    font-family: var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0.64px !important;
    color: #000000 !important;
    margin: 0 0 6px 0 !important;
  }

  #w2w-cart-root .empty-desc {
    font-family: var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0.64px !important;
    color: #363635 !important;
    margin: 0 !important;
  }

  #w2w-cart-root .empty-illustration {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 328px !important;
    height: auto !important;
    margin: 0 auto 24px auto !important;
  }

  #w2w-cart-root .empty-illustration img {
    width: 100% !important;
    height: auto !important;
    max-height: 329px !important;
    object-fit: contain !important;
    display: block !important;
  }

  #w2w-cart-root .empty-payments-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  #w2w-cart-root .empty-payments-section .payment-title {
    color: var(--Text-On-Surface-Grey_Medium, #7c7c7a) !important;
    text-align: center !important;
    font-family: var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
  }

  #w2w-cart-root .empty-payments-section .payment-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #w2w-cart-root .empty-payments-section .payment-icons .box {
    display: flex !important;
    width: 60px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(180, 180, 179, 0.25) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  #w2w-cart-root .empty-payments-section .payment-icons svg {
    max-width: 44px !important;
    height: auto !important;
    display: block !important;
  }

  #w2w-cart-root .empty-klarna-text {
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  #w2w-cart-root .empty-klarna-text p {
    color: var(--Text-On-Neutral-Tertiary, #363635) !important;
    font-family: var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0.64px !important;
    margin: 0 !important;
  }

  #w2w-cart-root .empty-klarna-text .klarna-bold {
    color: var(--Text-On-Neutral-Secondary, #1f8462) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
  }
}

/* Styling for inactive spend progress bar when cart is empty */
.delivery-promo-bar.inactive {
  opacity: 0.18 !important;
  pointer-events: none !important;
}

.delivery-promo-bar.inactive .promo-progress .gift-badge {
  animation: none !important;
  box-shadow: none !important;
}