@import url("./common.css");


.cart-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 200px;

}

.cart-section-inner {
  max-width: 1800px;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  padding: 0 200px; 
  background-color: var(--secondery-color);
  padding: 40px;
  border-radius: 30px;
}

 .cart-section-inner.cart-container {
      max-width: 1000px;
      margin: auto;
      background-color:var(--primary-color);
      border-radius: 12px;
      padding: 20px;
    }

   .cart-section-inner .table-wrapper {
      overflow-x: auto;
      width: 100%;
    }

  .cart-section-inner  table {
      width: 100%;
      min-width: 700px;
      border-collapse: collapse;
                  border-radius: 8px;

    }

   .cart-section-inner th{
      padding: 15px;
      text-align: left;
      white-space: nowrap;
    }
    .cart-section-inner  td {
      padding: 25px 10px;
      text-align: left;
      white-space: nowrap;
      border-bottom:1px solid var(--white);
    }

   .cart-section-inner th {
      background-color: var(--black);
      font-weight: bold;
    }
    .cart-section-inner tr :first-child {
     border-radius: 8px 0 0 8px;
    }
    .cart-section-inner tr :last-child {
          border-radius:0  8px  8px 0;

    }
   .cart-section-inner td img {
      width: 60px;
      height: auto;
    }

.cart-section-inner .product-info {
      display: flex;
      align-items: center;
      gap: 15px;
    }

   .cart-section-inner .product-name {
      color: var(--aqua-color);
    }

   .cart-section-inner .number-value{
background-color: var(--primary-color);
color: var(--white);
width: 50px;
border-radius: 4px!important;
    }

  .cart-section-inner  .price {
      color: var(--orange);
      font-weight: bold;
    }

   .cart-section-inner .remove {
      color: var(--white);
      width: 24px;
      height: 24px;
      cursor: pointer;
    }

    .cart-section-inner .discount-summary{
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
      border-bottom: 1px solid var(--white);

    }

   .cart-section-inner .discount-code {
      display: flex;
      gap: 10px;
      margin: 20px 0;
    }

  .cart-section-inner  .discount-code input {
      padding: 10px;
      border-radius: 6px;
      border: none;
      background-color: var(--light-blue-gray);
    }

   .cart-section-inner  .button-blue {
      padding: 10px 20px;
      background-color: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: 30px;
        font-size: 16px;
      cursor: pointer;
      border: 1px solid var(--white);
    }
       .cart-section-inner  .button-blue:hover {
      background-color: var(--white);
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
    }

  .cart-section-inner  .summary {
      padding: 20px;
      border-radius: 8px;
    }

   .cart-section-inner .summary-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
   .cart-section-inner .summary-row .heading{
      border-bottom: 1px solid var(--white);
      padding: 10px 0;
      margin: 0;
      width: 100%;

    }
.cart-section-inner .summary-row  .sub-total, .cart-section-inner .summary-row  .add-on{
    color: var(--pink-border);
}
   .cart-section-inner .delivery-options label {
      display: block;
      margin-top: 8px;
    }

  .cart-section-inner  .total {
      font-weight: bold;
      font-size: 18px;
          color: var(--pink-border);

    }

  .cart-section-inner  .buttons-group {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
    }





@media (max-width: 1200px) {
 .cart-section {
  padding: 50px 100px;
}
    .cart-section-inner .discount-summary{
        display: block;
    }


}

@media (max-width: 900px) {
.cart-section-inner .cart-section {

  padding:  50px;

}

.cart-section-inner {
  
  padding: 20px;
}
}

@media (max-width: 768px) {

.cart-section {
  padding: 50px 20px;
}
  .cart-section-inner  .buttons-group {
    flex-direction: column;
  }
   .cart-section-inner  .discount-code {
        flex-direction: column;
      }

    .cart-section-inner  .buttons {
        flex-direction: column;
        align-items: stretch;
      }

     .cart-section-inner .button-blue,
      .cart-section-inner .btn-checkout {
        width: 100%;
      }
}