@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Noto+Sans+TC:wght@100;200;400;600;800&family=Poppins:wght@300;400;600&display=swap");

:root {
  /*  colors */
  --red-orange-color-wheel: hsl(17, 96%, 48%);
  --middle-blue-green: hsl(167, 45%, 72%);
  --smokey-black: hsl(0, 0%, 7%);
  --spanish-gray: hsl(0, 0%, 60%);
  --granite-gray: hsl(0, 0%, 40%); 
  --primary: #8fa842;
  /* --primary: hsl(27, 46%, 58%); */
  --light-gray: hsl(0, 0%, 80%);
  --black_10: hsla(0, 0%, 0%, 0.1);
  --black_25: hsla(0, 0%, 0%, 0.25);
  --black_50: hsla(0, 0%, 0%, 0.4);
  --black_70: hsla(0, 0%, 0%, 0.7);
  --cultured: hsl(220, 16%, 96%);
  --manatee: hsl(218, 11%, 65%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);

  /* typography */
  /* --ff-roboto: 'Roboto', sans-serif;
  --ff-mr_de_haviland: 'Mr De Haviland', cursive; */

  --fs-1: 6rem;
  --fs-2: 3rem;
  --fs-3: 2rem;
  --fs-4: 1.8rem;
  --fs-5: 1.4rem;
  --fs-6: 1.2rem;
  --fs-7: 1rem;
  --fs-8: 0.5rem;

  --fw-700: 700;
  --fw-500: 500;

  /* spacing */
  --section-padding: 88px;

  /* shadow */

  --shadow: 0 0 2px hsla(0, 0%, 0%, 0.2);

  /* transition */
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

* {
    font-family: "Dancing Script", cursive;
    font-family: "Noto Sans TC", sans-serif;
    font-family: "Poppins", sans-serif;
  }

/*-- cart-area START --*/
.cart-area {
  padding: 1rem;
  display: grid;
  gap: .25rem;
  align-items: start;
}

.cart-total {
/* background: var(--spanish-gray); */
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
}
.clear {
display: flex;
justify-content: flex-end;
padding: 1rem;
padding-top: 0;
}
.clear .clear-btn{
width: 10rem;
}
.checkout {
width: 100%;
padding: 1rem;
padding-top: 0;
padding-left: 0;
}

#navbar-cart, #navbar-logout{
width: 4rem;
height: 4rem;
display: grid;
place-items: center;
padding: 0.5rem;
background: var(--primary);
border-radius: 50%;
}

#navbar-logout i {
font-size: 2rem;
line-height: 2rem;
}
#navbar-cart i {
margin-top: 0.5rem;
font-size: 2rem;
line-height: 2rem;
}
#navbar-cart .badge {
position: relative;
top: -3rem;
right: -2rem;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
background: #f00;
color: var(--white);
border-radius: 50%;
}

.cart-row {
width: 100%;
border-radius: 1px solid var(--black_50);
display: grid;
align-self: center;
/* justify-self: center; */
grid-template-columns: 1fr 4fr 1fr 1fr 1fr 1fr;
gap: 1rem;
margin-top: 0.5rem;
border-bottom: 1px solid var(--grey-b0);
}
/* .order-row {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 1rem;
margin-top: 0.5rem;
border-bottom: 1px solid var(--grey-b0);
} */
.row-title {
color: var(--granite-gray);
font-weight: 800;
padding: 0 0.25rem 0.25rem 0.25rem;
}
.row-txt {
color: var(--black);
padding: 0 0.25rem 0.25rem 0.25rem;
}
.row-btn {
cursor: pointer;
}
.row-btn i:hover{
color: var(--primary);
}

#cart_details {
display: grid;
/* grid-template-columns: repeat(2, 1fr); */
grid-template-columns: 4fr 1fr;
}

.total-area {
padding: 0.5rem;
background: var(--primary);
display: grid;
align-items: center;
}
.cart-total-txt {
  color: var(--white);
font-style: 2rem;
font-weight: 800;
text-align: center;
}
.total-area .total-no {
  color: var(--white);
font-size: 2.5rem;
font-weight: 800;
text-align: center;
}
.empty{
width: 100%;
text-align: center;
color: var(--red);
padding: 1rem;
}
/*-- cart-area END --*/

@media (max-width: 575px) {
  /*--- cart START ---*/
  #cart_details {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cart-row {
    grid-template-columns: 2fr 2fr 2fr 1fr;
    gap: 1rem;
    }

  .row-title {
    font-size: 1.2rem;
  }
  /*--- cart END ---*/

}