@import "../../../styles//varibale.scss";
.paymentPageLeftSection {
  width: 60%;
}
.paymentMethodRadioGroup {
  width: 30%;
}
.popupTitle{
  font-size: 18px;
  font-weight: 800;
  color: $primaryColor;
}
.paymentMethodRadioGroup {
  width: 100%;
  :global(.ant-radio-group){
    width: 100%;
  }
  
}
.buckButton{
  font-size: 16px;
  font-weight: 600;
  color: $lightGray;
  &:hover{
    color: $primaryColor;
    font-weight: 900;
  }
}

.h2Tittle{
color: $primaryColor;
text-align: center;
}
.paymentOption {
  font-weight: 500;
  font-size: 14px;
}



.paymentForm {
  width: 70%;
  background: #fafafa;
  border-radius: 6px;
}
.paymentButton {
  width: 252px;
  height: 50px;
  font-weight: 500;
  font-size: 14px;
}
.paymentFormRight {
  padding-left: 0.5rem !important;
}
.paymentFormLeft {
  padding-right: 0.5rem !important;
}
.checkoutPageTitle {
  font-weight: 600;
  font-size: 36px;
}
.inputFieldContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
}
.addressContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
}
.shippingAddressCard {
  padding: 0.5rem ;
  background: #ffffff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  position: relative;
  padding-bottom: 60px;
}
.addressCardTitle {
  font-weight: 600;
  font-size: 18px;
}
.defaultFlag {
  font-weight: 400;
  font-size: 14px;
  color: #3e2e84;
}
.deliveryButton {
  border: 1px solid #291c61;
  color: #291c61;
  width: 166px;
  height: 42px;
  font-weight: 500;
  font-size: 14px;
  position: absolute;
  left: 8px;
  bottom: 8px;
}
.activeDeliveryButton {
  width: 166px;
  height: 42px;
  position: absolute;
  left: 8px;
  bottom: 8px;
}
.nextButton {
  width: 250px;
  height: 45.79px;
}
.addAddressButton {
  width: 143px;
  height: 36px;
}
.progressBar {
  width: 600px;
  margin: 50px auto;
}
.checkoutLeftSection {
  background: #fafafa;
  border-radius: 6px;
  width: 100%;
  display: flex;
  flex: 0 0 70%;
}

.stepTitle {
  margin-top: -24px;
  padding-bottom: 10px;
  font-weight: 500;
  font-size: 14px;
}
// .stickyCheckoutFooter {
//   display: none;
// }
.sectionHeader {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 13px;
}
.paymentSummary {
  width: 100%;
  display: flex;
  flex: 0 0 30%;
  padding-left: 1rem;
}
.paymentOption {
  font-weight: 500;
  font-size: 14px;
  background: #F4F4F4;
border-radius: 6px;
padding: 1.5rem 1rem;
width: 100%;
margin-top:1rem;
}
.modalContainer{
  height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1199.98px) {
  .checkoutPageTitle {
    display: none;
  }
  .paymentOption {
    font-weight: 500;
    font-size: 14px;
    background: #F4F4F4;
  border-radius: 6px;
  padding: 1.5rem 1rem;
  width: 100%;
  margin-top:1rem;
  }
  .paymentMethodRadioGroup {
    width: 100%;
    height: auto;
    :global(.ant-radio-group){
      width: 100%;
    }
  }
  .nextButtonFormItem {
    display: none !important;
  }
  .checkoutPageContainer {
    flex-direction: column;
    margin: 0;
    padding: 0;
    padding-bottom: 140px;
  }
  .stickyCheckoutFooter {
   
    z-index: 1;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.16);
  }

  .mobileNextButton {
    width: 100%;
    height: 40px;
    font-weight: 500;
    font-size: 14px;
  }
  .progressBar {
    width: 100%;
    padding: 15px;
    margin: 50px 0 20px 0;
  }
  .inputFieldContainer {
    grid-template-columns: repeat(1, 1fr);
  }
  .addressContainer {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
  }
  .checkoutLeftSection {
    padding: 20px;
    background: #ffffff;
  }
  .paymentSummary {
    width: 100%;
    display: flex;
    flex: 0 0 30%;
    padding-left: 1rem;
  }
  .paymentPageLeftSection {
    width: 100%;
    padding: 20px;
  }
  .paymentMethodRadioGroup {
    width: 100%;
    :global(.ant-radio-group){
      width: 100%;
    }
  }
  .paymentForm {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
  }
  .paymentButton {
    display: none;
  }
  .paymentMethodContainer {
    flex-direction: column;
  }
  .mobilePaymentButton {
    width: 100%;
    height: 50px;
  }
}

@media (max-width: 767.98px) {
  .paymentSummary{
    padding: 20px !important;
  }
  .progressBar{
    margin: 20px 0 20px 0;
  }
  .checkoutPageTitle {
    display:block;
  }
  .checkoutPageContainer{
    padding-bottom: 30px;
  }
  .mainContainer{
    margin: 7rem auto !important;
  }
  .nextButton{
    margin-bottom: 5rem;
    width: 100%;
  }
}