/* body {
  overflow-x: hidden;
}
.row {
    flex-wrap: wrap;
  } */
 
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html,
body {
    font-family: "Lato", sans-serif;
}
.container {
    width: 90%;
    padding-top: 29px;
   
    margin:50px!important;
}
.fero {
  font-size: 20px;
  font-weight: 700;
}
.seco {
  font-size: 20px;
  font-weight: 700;
}
@font-face {
    font-family: boldf;
    src: url(../fonts/NotoKufiArabic-Bold.ttf);
}
@font-face {
    font-family: regularf;
    src: url(../fonts/NotoKufiArabic-Regular.ttf);
}
@font-face {
    font-family: medf;
    src: url(../fonts/NotoKufiArabic-Medium.ttf);
}
@font-face {
    font-family: lightf;
    src: url(../fonts/NotoKufiArabic-Light.ttf);
}
 .checkout-steps {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
        gap: 2rem;
        margin-left:40px
      }
  /* .container{
  padding:0 !important;
  margin:0 !important;
  } */
.text-scus{
    font-size:20px;
    font-weight:600;
}
/* body {
  overflow-x: hidden;
}
.row {
    flex-wrap: wrap;
  } */
strong{
 font-size:20px;
    font-weight:600;
}
small{
   font-size:14px;
    font-weight:400;
    color:#8D8D8D;  
}
.text-vscus{
    font-size:16px;
    font-weight:600;
}
.text-lcus{
    font-size:24px;
    font-weight:600;
}
 .text-graycus{
    font-size:14px;
    font-weight:400;
    color:#8D8D8D;
}
      .checkout-step {
        text-align: center;
        position: relative;
      }

      .checkout-step .circle {
        width: 90px;
        height: 90px;
        border-radius: 50%;
       background-color: #D9D9D9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 0.5rem;
      }

      .checkout-step.completed .circle {
        background-color: #4C2A71;
      }

      .checkout-step p {
        font-size: 15px;
        font-weight: 500;
        margin: 0;
      }

      .form-section {
        height:743px;
        width:715px;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      }

      .summary-section {
        width:477px;
        height:562px;
        border: 1px solid #D9D9D9;
        border-radius: 20px;
        padding: 20px;
        margin:0 40px
      }

      .summary-item img {
        width: 100px;
        height:92px;
        border-radius: 8px;
      }

      .summary-item h6 {
        margin-bottom: 0;
      }

     
      .summary-prices {
        border-top: 1px solid #D9D9D9;
        margin-top: 10px;
        padding-top: 10px;
      

      }
.checkout-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: relative;
  flex-wrap: wrap;

}

.checkout-step {
  text-align: center;
  position: relative;
  z-index: 2;
}

.form-section{
   width:715px;
    height:734px;
      border: 1px solid #D9D9D9;
        border-radius: 20px;  
}
.form-control{
      border: 1px solid #D9D9D9;
        border-radius: 10px;  
}
/* .checkout-step .circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #6f42c1;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 0.5rem;
  font-size: 20px;
} */

.checkout-step.completed .circle {
  background-color: #4C2A71;
;
}

.step-line {
   width: 81px; 
  height: 2px;
  background-color:#D9D9D9;

  position: relative;
  top: -10px;
  z-index: 1;
}

.step-line.completed {
  height: 2px;
  background-color:#4C2A71;
;
  position: relative;
  top: -10px;
  z-index: 1;
}

.igroup input{
    width:318px;
    height:43px;
      border: 1px solid #D9D9D9;
        border-radius: 10px;
}
.igroup .apply{
    width:104px;
    height:43px;
      background-color: #4C2A71;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 20px;

}
.summary-prices > div {
  margin-bottom: 10px;
}

.summary-prices > div:last-child {
  margin-bottom: 0; 
}
.summary-item > div {
  margin-bottom: 10px; 
}

.summary-item > div:last-child {
  margin-bottom: 0; 
}

.form-section .form-control::placeholder {
  color: #8D8D8D !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.form-section textarea {
    height: 91px !important
}
.payment-section {
    width:715px;
    height:645px;
 border: 1px solid #D9D9D9;
        border-radius: 20px;
    margin-bottom: 20px;
    padding:20px
      }

      .payment-option {
        border: 1px solid #D9D9D9;
        border-radius: 20px;
      
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s ease;
        cursor: pointer;
         width:677px;
    height:91px;
    padding:20px 10px;
      }
.review-section{
   width:715px;
    height:291px;
 border: 1px solid #D9D9D9;
        border-radius: 20px;
    margin-bottom: 20px;  
    padding:40px 20px; 
}
      .payment-option:hover {
        border-color: #0D5CE0;
      }

      .payment-option.active {
        border-color: #0D5CE0;
        background-color: #4797FF12;
      }

      .payment-info {
        display: flex;
        align-items: center;
        gap: 15px;
      }


      .payment-info div small {
        color: #6c757d;
        font-size: 13px;
      }

   

      .place-order-btn {
        width:677px;
    height:71px;
      background-color: #4C2A71;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 20px;
        font-size: 24px;
      }
.btn-savedaddress{
     width:193px;
    height:43px;
      background-color:  #4C2A71;
;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 20px;
        font-size: 16px;  
}
      .place-order-btn:hover {
        background-color: #3b0070;
      }

      a {
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #000000; 
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="radio"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #000000;
  border-radius: 50%;
  background-color: transparent;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
 .quantity-box {
      width:85px;
      height:24px;
       border: 1px solid #D9D9D9;
      border-radius: 6px;
      margin: 0 10px;
            padding:0 5px;
             display: flex;
       align-items: center;       
  justify-content: space-between; /

    }

    .quantity-btn {
      background-color: #5b2c83;
      color: #fff;
      border: none;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quantity-btn:hover {
      background-color: #4a1f70;
    }

    .quantity-number {
      
      text-align: center;
      font-size: 16px;
      font-weight: 500;
    }

    .delete-btn {
      background-color: red;
      color: white;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .delete-btn:hover {
      background-color: darkred;
    }

    .cart-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }
input[type="radio"]:checked {
  border-color: #4C2A71; 
}

input[type="radio"]:checked::after {
  background-color: #4C2A71; 
  border-color: #4C2A71;
}
/* === Popup Overlay === */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* === Popup Content === */
.popup-content {
  background: #fff;
  border-radius: 15px;
  width: 477px;
  padding: 25px;
  height: 594px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  animation: popupShow 0.3s ease;
}

/* Animation */
@keyframes popupShow {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* === Header === */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.popup-close {
  border: none;
  background: #eee;
  font-size: 32px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.3s;
}
.popup-close:hover {
  background: #ccc;
}

/* === Address Cards === */
.address-card {
  border-radius: 10px;
  padding: 10px;
  width:445px;
  height:128px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}
.address-card:hover {
  border-color: #4C2A71;
}

/* === Info section === */
.address-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.address-info input[type="radio"] {
  margin-top: 5px;
  accent-color: #4C2A71;
}

.phone {
  color: #000;
  font-weight: 600;
  font-size: 13px;
}

.tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
}
.tag.home {
  width:49px;
  height:15px;
  background: #e8e1f3;
  color: #4C2A71;
   font-weight: 400;
  font-size: 8px;
}
.tag.office {
  background: #d9f4e3;
  color: #15803d;
   font-weight: 400;
  font-size: 8px;
}

.address-actions {
  display: flex;
  gap: 8px;
}
.popup-footer {
  text-align: center;
  margin-top: 20px;
}
.use-address-btn {
  background: #4C2A71;
  color: #fff;
  border: none;
  width:207px;
  height:47px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
  font-size:16px;

}
.use-address-btn:hover {
  background: #3a1e5d;
}
.popup-content h5{
font-size:20px;
font-weight:700;
}
.popup-content p{
font-size:11px;
font-weight:400;
color:#4F4F4F;
margin-bottom: 2px !important;
}
.icon{
  width:"48";
   height:"48" 
}
.popup-content h5{
font-size:20px;
font-weight:700;
}


@media(max-width:991px) and (min-width:768px){
   .checkout-steps {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
        margin-left:0;
        margin: 0 !important;;
        gap: 1px;


      }
  .container {
    width: 80%;
    padding-top: 29px;
   
    margin:50px!important;
}

.text-scus{
    font-size:16px;
}

strong{
 font-size:16px;
}
small{
   font-size:13px;
  
}
.text-vscus{
    font-size:18px;
}
.text-lcus{
    font-size:20px;
}
 .text-graycus{
    font-size:13px;
    font-weight:400;
    color:#8D8D8D;
}
      .checkout-step {
        text-align: center;
        position: relative;
        margin-left:0 !important
      }

      .checkout-step .circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
       background-color: #D9D9D9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 0.5rem;
      }


      .checkout-step p {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
      }

      .form-section {
        width: 390px;
    height: auto;
    padding: 15px;
        border-radius: 10px;
        
      }

      .summary-section {
       width: 346px;
    height: auto;
    padding: 15px;
        border-radius: 10px;
                margin:0 ;

      }

      .summary-item img {
        width: 100px;
        height:92px;
        border-radius: 8px;
      }

      .summary-prices {
        border-top: 1px solid #D9D9D9;

        margin-top: 10px;
        padding-top: 10px;
      }
.checkout-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  position: relative;
  flex-wrap: wrap;
}

.checkout-step {
  text-align: center;
  position: relative;
  z-index: 2;
}

.step-line {
   width: 40px; 
  height: 2px;
  background-color:#D9D9D9;
  position: relative;
  top: -10px;
  z-index: 1;
}

.step-line.completed {
  height: 2px;
  background-color:#4C2A71;
}

.igroup input{
    width: 200px;
    height: 38px;
      
}
.igroup .apply{
    width: 200px;
    height: 38px;
      background-color: #4C2A71;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 20px;

}
.summary-prices > div {
  margin-bottom: 10px;
}

.summary-prices > div:last-child {
  margin-bottom: 0; 
}
.summary-item > div {
  margin-bottom: 10px; 
}

.summary-item > div:last-child {
  margin-bottom: 0; 
}

.form-section .form-control::placeholder {
  font-size: 10px !important;
}
.form-section textarea {
       height: auto !important;

}
.payment-section {
    width: 390px;
    height: auto;
 border: 1px solid #D9D9D9;
        border-radius: 10px;
    margin-bottom: 10px;
    padding:10px
      }

      .payment-option {
        border: 1px solid #D9D9D9;
        border-radius: 10px;
        width: 370px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s ease;
        cursor: pointer;
           height: auto;

    padding:10px 7px;
      }
.review-section{
    width: 390px;
    height: auto;
 border: 1px solid #D9D9D9;
        border-radius: 20px;
    margin-bottom: 10px;  
    padding:20px 10px; 
}
      .payment-option:hover {
        border-color: #0D5CE0;
      }

      .payment-option.active {
        border-color: #0D5CE0;
        background-color: #4797FF12;
      }

      .payment-info {
        display: flex;
        align-items: center;
        gap: 15px;
      }


      .payment-info div small {
        color: #6c757d;
        font-size: 10px;
      }

   

      .place-order-btn {
         width: 326px;
    height: 48px;
      background-color: #4C2A71;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        font-size: 16px;
      }
.btn-savedaddress{
     width: 130px;
    height: 28px;
      background-color:  #4C2A71;
      margin:0
;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        font-size: 12px;  
}
    
input[type="radio"] {
  width: 16px;
  height:16px;
  border: 1px solid #000000; 
}

input[type="radio"]::after {
  width: 8px;
  height: 8px;
  border: 1px solid #000000;
 
}
 .quantity-box {
      width:85px;
      height:24px;
       border: 1px solid #D9D9D9;
      border-radius: 6px;
      margin: 0 10px;
            padding:0 5px;
             display: flex;
       align-items: center;       
  justify-content: space-between; 

    }

    .quantity-btn {
      background-color: #5b2c83;
      color: #fff;
      border: none;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quantity-btn:hover {
      background-color: #4a1f70;
    }

    .quantity-number {
      
      text-align: center;
      font-size: 16px;
      font-weight: 500;
    }

 

    

    .cart-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }


}
@media (max-width: 768px) {
   .checkout-steps {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
        margin-left:0;
        margin: 0 !important;;
        gap: 1px;


      }
  .container {
    width: 80%;
    padding-top: 29px;
   
    margin:0!important;
}

.text-scus{
    font-size:14px;
}

strong{
 font-size:14px;
}
small{
   font-size:10px;
  
}
.text-vscus{
    font-size:16px;
}
.text-lcus{
    font-size:20px;
}
 .text-graycus{
    font-size:10px;
    font-weight:400;
    color:#8D8D8D;
}
      .checkout-step {
        text-align: center;
        position: relative;
        margin-left:0 !important
      }

      .checkout-step .circle {
        width: 45px;
        height: 45px;
        border-radius: 50%;
       background-color: #D9D9D9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 0.5rem;
      }


      .checkout-step p {
        font-size: 12px;
        font-weight: 500;
        margin: 0;
      }

      .form-section {
        width: 346px;
    height: auto;
    padding: 15px;
        border-radius: 10px;
        
      }

      .summary-section {
       width: 346px;
    height: auto;
    padding: 0 !important;
        border-radius: 10px;
                margin:0 ;

      }
.order-summary-wrapper {
   border: 1px solid #D9D9D9;
    border-radius: 10px;
 width: 350px;
   margin-bottom: 20px;
}


.toggle-icon {
  transition: transform 0.3s ease;
}

.order-summary-content {
  display: none;
  padding: 10px 5px;
}

.order-summary-wrapper.active .order-summary-content {
  display: block;
}

.order-summary-wrapper.active .toggle-icon {
  transform: rotate(180deg);
}
 .summary-section {
    border: none;
    padding: 10px;
  }
      .summary-item img {
        width: 100px;
        height:92px;
        border-radius: 8px;
      }

      .summary-prices {
        border-top: 1px solid #D9D9D9;
       
        margin-top: 10px;
        padding-top: 10px;
      }
.checkout-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  position: relative;
  flex-wrap: wrap;
}

.checkout-step {
  text-align: center;
  position: relative;
  z-index: 2;
}

.step-line {
   width: 20px; 
  height: 2px;
  background-color:#D9D9D9;
  position: relative;
  top: -10px;
  z-index: 1;
}

.step-line.completed {
  height: 2px;
  background-color:#4C2A71;
}

.igroup input{
    width: 180px;
    height: 38px;
      
}
.igroup .apply{
    width: 120px;
    height: 38px;
      background-color: #4C2A71;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 20px;

}
.summary-prices > div {
  margin-bottom: 10px;
}

.summary-prices > div:last-child {
  margin-bottom: 0; 
}
.summary-item > div {
  margin-bottom: 10px; 
}

.summary-item > div:last-child {
  margin-bottom: 0; 
}

.form-section .form-control::placeholder {
  font-size: 10px !important;
}
.form-section textarea {
       height: auto !important;

}
.payment-section {
  width: 346px;
    height: auto;
 border: 1px solid #D9D9D9;
        border-radius: 10px;
    margin-bottom: 10px;
    padding:10px
      }

      .payment-option {
        border: 1px solid #D9D9D9;
        border-radius: 10px;
        width: 320px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s ease;
        cursor: pointer;
           height: auto;

    padding:10px 7px;
      }
.review-section{
   width: 346px;
    height: auto;
 border: 1px solid #D9D9D9;
        border-radius: 20px;
    margin-bottom: 10px;  
    padding:20px 10px; 
}
      .payment-option:hover {
        border-color: #0D5CE0;
      }

      .payment-option.active {
        border-color: #0D5CE0;
        background-color: #4797FF12;
      }

      .payment-info {
        display: flex;
        align-items: center;
        gap: 15px;
      }


      .payment-info div small {
        color: #6c757d;
        font-size: 10px;
      }

   

      .place-order-btn {
         width: 326px;
    height: 48px;
      background-color: #4C2A71;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        font-size: 16px;
      }
.btn-savedaddress{
     width: 130px;
    height: 28px;
      background-color:  #4C2A71;
      margin:0
;
      color:#fff;
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        font-size: 12px;  
}
    
input[type="radio"] {
  width: 16px;
  height:16px;
  border: 1px solid #000000; 
}

input[type="radio"]::after {
  width: 8px;
  height: 8px;
  border: 1px solid #000000;
 
}
 .quantity-box {
      width:85px;
      height:24px;
       border: 1px solid #D9D9D9;
      border-radius: 6px;
      margin: 0 10px;
            padding:0 5px;
             display: flex;
       align-items: center;       
  justify-content: space-between; 

    }

    .quantity-btn {
      background-color: #5b2c83;
      color: #fff;
      border: none;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quantity-btn:hover {
      background-color: #4a1f70;
    }

    .quantity-number {
      
      text-align: center;
      font-size: 16px;
      font-weight: 500;
    }

 

    

    .cart-item {
      display: flex;
      align-items: center;
      gap:0px;
    }
input[type="radio"]:checked {
  border-color: #4C2A71; 
}

input[type="radio"]:checked::after {
  background-color: #4C2A71; 
  border-color: #4C2A71;
}
/* === Popup Overlay === */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* === Popup Content === */
.popup-content {
  background: #fff;
  border-radius: 15px;
           width: 326px;

  padding: 15px;
  height: auto;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  animation: popupShow 0.3s ease;
}

/* Animation */
@keyframes popupShow {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* === Header === */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.popup-close {
  border: none;
  background: #eee;
  font-size: 17px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.3s;
}
.popup-close:hover {
  background: #ccc;
}

/* === Address Cards === */
.address-card {
  border-radius: 10px;
  padding: 10px;
  width: 315px;
  height:auto;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}
.address-card:hover {
  border-color: #4C2A71;
}

/* === Info section === */
.address-info {

  display: flex;
  gap: 2px;
  align-items: flex-start;
}
.address-info input[type="radio"] {
  margin-top: 5px;
  accent-color: #4C2A71;
}

.phone {
  color: #000;
  font-weight: 600;
  font-size: 8px;
}

.tag {
  font-size: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}
.tag.home {
  width:29px;
  height:10px;
  background: #e8e1f3;
  color: #4C2A71;
   font-weight: 400;
  font-size: 6px;
}
.tag.office {
  background: #d9f4e3;
  color: #15803d;
   font-weight: 400;
  font-size: 6px;
}

.address-actions {
  display: flex;
  gap: 8px;
}
.popup-footer {
  text-align: center;
  margin-top: 10px;
}
.use-address-btn {
  background: #4C2A71;
  color: #fff;
  border: none;
  width:180px;
  height:37px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
  font-size:12px;
}
.use-address-btn:hover {
  background: #3a1e5d;
}
.popup-content h5{
font-size:16px;
font-weight:700;
}
.popup-content p{
font-size:8px;
font-weight:400;
color:#4F4F4F;
margin-bottom: 2px !important;
}
.icon{
  width:"20";
   height:"20" 
}
 


}