* {
    margin: 0;
    padding: 0;
    font-family: Assistant,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    box-sizing: border-box;
}
html{
    height: 100%;
}
body {
    height: 100%;

}

:root {
  --cart-icon-text-color: #4E515E;
  --cart-icon-text-light-color: rgb(204, 204, 204);
}



/* =============== header ====================  */
header {
    height: 80px;
    display: flex;
    background-color: #ffffff;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #b6b1b1;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    /* border: 2px solid red;    */
}

/* ----------- logo --------------- */
.logo-container{

  /* border: 2px solid blue; */
}
.myntra_home {
    /* height: 100%; */
    height: 45px;
}
/* ----------- logo end --------------- */

/* ---------- step-bar-container  ---------- */

.step-bar-container{
  display: flex;
  justify-content: space-between;
  gap:10px;

  /* border: 2px solid blue; */
}

.step-bar-container a {
  text-decoration: none;
  color: black;
  font-size: 17px;
}
.stepbar-stage{
  font-weight: 500;
}
.step-bar-cart-stage{
  color: #f44040cc;
  border-bottom: 2px solid #f44040;
  
}
/* ---------- step-bar-container End ---------- */

/* ----------- action --------------- */
.action_container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;

   /* border: 2px solid blue;   */
}

.action_icon_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Cart ---------------- */
.shopingCart{
    text-decoration: none;
    color: black;
    position: relative;
    /* border: 2px solid red; */

}
/* 📗🔖 how to create sup like text or no. */
.bag-item-count{
    background-color: #f16565;
    padding-left: 5px; /*📗🔖MY MISTAKE-1 and LEARNING-1  not give padding: 5px; to center the text in only left- right not give bottom and top*/ 
    padding-right: 5px;
    /* padding: 5px; */
    border-radius: 50%; 
    
    position: absolute;
    right: -9px; /*📗🔖 MY MISTAKE-2 and LEARNING-2  not give right 0px and it overflow the parent but see what we want to set give in minus menas overflow the parent conatiner*/ 
    top: 0px;
    
    font-size: 12px;
    color: #fff;
    font-weight: 700;
}

/* ---------- Cart end ---------------- */
/* ----------- action end --------------- */

/* =============== header end ====================  */

main{
  /* border: 2px solid blue;  */
  /* height: 100%; */
  margin-top: 80px;
  /* border: 2px solid red;  */
}
/* ===================== Back btn ===================== */
.back-btn-container{
  margin-top: 100px;
  padding-left: 10px;
  /* border: 2px solid red; */
}
.back-btn-text{
  cursor: pointer;
 }
 .back-btn{
   display: flex;
   align-items: center;
   /* border: 2px solid red; */
   text-decoration: none;
   color: black;
   background-color: rgb(214, 213, 213);
   width: fit-content;
   border-radius: 5px;
   padding: 5px;
 }
 .back-btn:active{
  transform: scale(0.9);
 }

/* ===================== Back btn End ===================== */
/* ========= empty bag  ================= */
.empty-bag{
  text-align: center;
  display: none;
  /* border: 2px solid blue; */
}

.show-Bag{
  display: block;
}
.showEmptyBagConatiner{
  display: block;
}
.empty-msg{
  font-size: 18px;
  font-weight: 700;
  color: var(--cart-icon-text-color);
}
.add-product-InEmptyBag-btn{
  background-color:  #f44040;
  color: azure;
  font-weight: 700;
  padding: 10px 40px;
  border-radius: 10px;
  /* width: 20%; */
  margin: 10px;
  text-align: center;
  border: none;
  cursor:pointer;
}
.add-product-InEmptyBag-btn:hover{
  background-color: #f16565;
}
.add-product-InEmptyBag-btn:active{
  transform: scale(0.95);
}

/* ========= empty bag end  ================= */

/* ================================= bag items display super container  ===================================== */
.bag-items-super-container {
  /* border: 2px solid blue; */
  width: 75%;
  /* height: 100vh; */
  margin-left: 12.5%;
  padding: 10px;
  
  /* border: 2px solid red; */
}
/* ---------------------- section 1 : items display ------------------------ */
.bag-items-container {
  width: 64%;
  padding: 10px;
  border: 1px solid #eaeaec;
  display: inline-block;
  color: #282c3f;
  font-size: 13px;
  line-height: 18px; 

  /* border: 2px solid blue; */
}
.bag-item{
  display: flex;
  gap: 7px;
  border: 2px solid rgb(215, 215, 215);
  position: relative;
  margin-bottom: 10px;
  padding: 10px;
}

.img-container{
  width: 100px;
  height: 100px;
  flex-shrink: 0; /* ✅ Prevent it from shrinking  or use flex:1 as ur wish or both can use. SHRINK MAT HONA*/
}
.img-container img{
  width: 100%;
  height: 100%;
}
.bag-item > div:nth-child(2) {
  flex: 1;  /* ✅expand it so that in too much text not push other to shrink. or use flex:1 as ur wish or both can use. */
}


.delete-btn{
  position: absolute;
  right: 5px;
  top: 5px;
  color: grey;
  cursor: pointer;
}
.delivery-Estimate{
  color: #2CA6A5;
  font-weight: 700;
}
/* ---------------------- section 1 : items display End ------------------------ */

/* ---------------------- section 2 : items Price display ------------------------ */
.bag-items-price-container {
  width: 35%;
  /* height: auto; */
  padding: 10px;
  border: 1px solid #eaeaec;
  vertical-align: top; 
  display: inline-block;
  color: #282c3f;
  font-size: 13px;
 
  position: sticky;
 top:80px;   /*  equal to header. NOTE🔖📗 if parent have then sticky doesn't work. */

  /* border: 2px solid blue; */
}
.product-company-name{
  font-weight: 700;
 
}
.product-name{
 font-weight: 700;
 font-size: 14px;
}

.price-details-of-total-items-count p {
  color: #3e4152;
  font-weight: 700;
  margin-bottom: 10px;
}
.price-ui{
  display: flex;
  justify-content: space-between;
  margin: 10px 10px;  
  /* padding: 5px; */
  font-size: 14px;
  font-weight: 500;
}
.discount-amount{
  color: #2CA6A5;
}
.total-amount{
  /* margin-top: 10px; */
  font-size: 14px;
  font-weight: 700;
}
.product-current-price{
  font-weight: 700;
  font-size: 14px;
}

.product-original-price{
  text-decoration: line-through;
  color: gray;
  font-size: 14px;
}
.product-discount-percentage{
  color: green;
  
}
.placeOrder-btn{
  background-color: #E93D67;
  color: #fff;
  padding: 10px 20px;
  font-weight: 500;
  border: none  ;
  width: 100%;
  cursor: pointer;
}
.placeOrder-btn:active{
  transform: scale(0.95);
 }

/* ---------------------- section 2 : items Price display End ------------------------ */

/* ---------------------- section 3 : footer  ------------------------ */
footer{
  padding-block: 20px;
  background-color: #EBEBEC;
}
.copyright{
   text-align: center;
}


/* =======================================================================================================================

                                               media query 

 ======================================================================================================================= */

 /* with in 425px what to do */
 @media screen and (max-width:425px){
   #desktop-header{
     display: none;
   }
   .back-btn-container{
    display: none;
   }
   #desktop-footer{
     display: none;
   }

   /* -------------------------- Mobile cart page header --------------------------  */
    #mobile-header{
       height: 60px; 
       width: 100%;
       padding-inline: 10px;
       display: flex;
       justify-content: space-between;
       background-color: #ffffff;
       border-bottom: 1px solid #c9c9c9;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 1000;

       /* border: 2px solid blue;    */
    }

/*  ----- Mobile's cart page header: part 1 -----  */
.cart-header-Container{
  /* height: 100%; */
   display: flex;
   align-items:center;
   gap: 8px;
   /* border: 2px solid red;  */
}
.cart-header-icon-container{
  display: flex;
  align-items: center ;
  padding-top: 4px;
  /* border: 2px solid rebeccapurple;  */
}

.cart-header-arrow-icon{
    font-size: 22px !important;
    color: var(--cart-icon-text-color) !important;
   
}
.cart-header-txt{
    margin-left: 0%;
    color: var(--cart-icon-text-color);    
    font-weight: 600;
}

/*  ----- Mobile's header: part 2 -----  */
.action_bar_container {
  display: flex;
  align-items:center;
  gap: 10px;
  margin-right: 10px;
  /* border: 2px solid rebeccapurple;   */
}
.cart-header-bag-icon{
  color: var(--cart-icon-text-color);   
}
.cart-header-bag-name{
  display: none;
}
.bag-item-count {
    background-color: #f16565;
    padding-left: 5px; /*📗🔖MY MISTAKE-1 and LEARNING-1  not give padding: 5px; to center the text in only left- right not give bottom and top*/ 
    padding-right: 5px;
    /* padding: 5px; */
    border-radius: 50%; 
    
    position: absolute;
    right: -9px; /*📗🔖 MY MISTAKE-2 and LEARNING-2  not give right 0px and it overflow the parent but see what we want to set give in minus menas overflow the parent conatiner*/ 
    top: 0px;
    
    font-size: 12px !important;
    color: #fff !important;
    font-weight: 700;
}
/* -------------------------- Mobile header end --------------------------  */

/* --------------------------  step progress section --------------------------*/
.mobile-step-progress-container{
    width: 100%;
    height: 40px;
    position: fixed;
    top: 60px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-inline: 15px;
    border-bottom: 1px solid #c9c9c9;
    z-index:1000 ;
    /* border: 2px solid blue;     */
}
.steps_wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;

  /* border: 1px solid rebeccapurple; */
}
/* number */
#cart-no-1{
      height: 15px;
     width: 15px;
     border-radius: 10px;
     font-size: 8px;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
      color: #ef1c5199;
     border: 1px solid #ef1c5199;
     /* color: var(--cart-icon-text-light-color);
     border: 1px solid var(--cart-icon-text-light-color); */
}
#cart-no-2{
     height: 15px;
     width: 15px;
     border-radius: 10px;
     font-size: 8px;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
      /* color: #ef1c5199;
     border: 1px solid #ef1c5199; */
     color: var(--cart-icon-text-light-color);
     border: 1px solid var(--cart-icon-text-light-color);
}
#cart-no-3{
     height: 15px;
     width: 15px;
     border-radius: 10px;
     font-size: 8px;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
      /* color: #ef1c5199;
     border: 1px solid #ef1c5199; */
     color: var(--cart-icon-text-light-color);
     border: 1px solid var(--cart-icon-text-light-color);
}
#cart-txt{
     font-size: 10px;
     font-weight: 600;
     color: var(--cart-icon-text-color);
}
#address-txt{
     font-size: 10px;
     font-weight: 600;
     color: var(--cart-icon-text-light-color);
}
#payment-txt{
    font-size: 10px;
    font-weight: 600;
    color: var(--cart-icon-text-light-color);
}
.stepbars-line{
  border: 1px solid rgb(204, 204, 204);
  width: 100%;
  border-style:dashed;
}

/* -------------------------- mobile step progress section end --------------------------*/

/* ================= media query: main ======================== */

#desktop-main {
  width: 100%;
  position: absolute;
  top: 20px; /*  height of cart header and step progress bar 60px + 50px */
  bottom: 62px; /* height of cart bottom nav bar  60px + 2px border of it*/
  
  overflow: auto;
  padding: 0px; 
  background: #f9f9f9; /* just to see it */

  /* border: 2px solid red; */
}

.bag-items-super-container {
  /* border: 2px solid blue; */
  width: 100%;
  height: auto;
  margin-left: 0%;
  padding: 0px;
  overflow: hidden;
  
  /* border: 2px solid pink; */
}
/* ---------------------- mediaquery section 1 : items display ------------------------ */
.bag-items-container {
  width: 100%;
  padding: 10px;
  border: 1px solid #eaeaec;
  display: block;
  color: #282c3f;
  font-size: 13px;
  line-height: 1.42857143; 
  margin-bottom: 2px;

  /* border: 2px solid green; */
}

/* ---------------------- section 2 : items Price display ------------------------ */
.bag-items-price-container {
  width: 100%;
  padding: 10px;
  display: block;
  
  /* border: 2px solid green; */
}
.place-order-btn{
  display: none;
}

/* ================= media query: main End  ======================== */

/* ================= media query: empty bag  ======================== */
.empty-bag{
  height: 100%;
  padding: 20px;
  /* border: 2px solid blueviolet; */
}
.empty-bag img{
  height: 150px !important;
  /* border: 2px solid green; */
}
.add-product-InEmptyBag-btn{
  padding: 10px 20px;
  width: auto;
  
  /* border: 2px solid green; */
}
/* ================= media query: bag end ======================== */

/* ---------------------------------------- bottom fixed nav bar ----------------------------- */
.Bottom-Navigation-Bar-container{
    width: 100%;
    height: 60px;
    border-top: 1px solid #c9c9c9;
    position: fixed;
    bottom: 0px;
    background-color: white;
    display: flex;
    align-items: center; 
    
    /* border: 2px solid red; */
}
.Bottom-Navigation-Bar-wrapper{
  width: 100%;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  /* border: 2px solid blue; */
}
 .icon-container-bottom-nav-bar{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
    
   /* border: 2px solid green; */
}
 .icon-container-bottom-nav-bar a{
     text-decoration: none;
     color: #5f6478;;
}
.btn-disabled-feel{
  background-color: rgba(200, 200, 200, 0.281);
  color: rgba(203, 203, 203, 0.405);
  /* border: 2px solid green; */
}
 

/* ---------------------------------------- bottom fixed nav bar End ----------------------------- */

 }



/*  after 425px what to do  */
@media screen and (min-width:425px){
   #mobile-header{
    display: none;
   }
   .mobile-step-progress-container{
    display: none;
   }
   .Bottom-Navigation-Bar-container{
    display: none;
   }
   
}