/* Base styles (already given) */
.custom-checkout-wrapper{
  max-width: 1192px;
  margin: 0 auto;
}
.custom-checkout-wrapper .back-button{
	margin-bottom:40px;
}
.checkout-steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 30px 0 80px;
  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;
}
.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.50);
  font-weight: 700;	
}
.checkout-steps .step.inactive svg{
fill:rgba(255, 255, 255, 0.50);
}
.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: 768px) {
  .checkout-steps {
    flex-direction: row;
    align-items: flex-start;
	margin: 30px 0px 50px;  
  }

  .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:65%;
}
.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:.8;}
.cc-btn:not(:disabled):active{transform:translateY(1px);}
.cc-arrow{display:inline-block;}

/* 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;}
}