/* INDEX
  1. GENERAL STYLES
  2. UTILITY
  3. LAYOUT
  4. COMPONENTS
  5. JS CLASSES
*/

@font-face {
  font-family: "Red Hat Text";
  src: url("./assets/fonts/RedHatText-VariableFont_wght.ttf") format(truetype)
    tech("variations");
  font-weight: 400 700;
  font-stretch: 50% 200%;
}

:root {
  --screen-mobile-size: 23.4375rem;
  --screen-tablet-size: 48rem;
  --screen-desktop-size: 64rem;

  --b-radius-cards: 13.6px;
  --c-red: hsl(14, 86%, 42%);
  --c-green: hsl(159, 69%, 38%);
  --c-rose-50: hsl(20, 50%, 98%);
  --c-rose-100: hsl(13, 31%, 94%);
  --c-rose-300: hsl(14, 25%, 72%);
  --c-rose-400: hsl(7, 20%, 60%);
  --c-rose-500: hsl(12, 20%, 44%);
  --c-rose-900: hsl(14, 65%, 9%);
}

/* === GENERAL STYLES === */
body {
  font-family: "Red Hat Text", sans-serif;
  margin: 0;
  background-color: var(--c-rose-100);
}
:is(h1, h2, p) {
  margin-top: 0;
}
* {
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
picture {
  border-radius: var(--b-radius-cards);
  overflow: hidden;
  box-shadow: 0rem 0rem 0.1875rem rgba(185, 184, 184, 0.7);
  height: 11.25rem;
}

/* === UTILITY ====*/
.clr-gray-light {
  color: var(--c-rose-300);
}
.clr-oragnge {
  color: var(--c-red);
}

/* ==== ICONS === */
.icon-btn-decrease,
.icon-btn-increase {
  path {
    fill: var(--c-rose-50);
  }
}

/* ==== LAYOUT ==== */
.main {
  padding-inline: 32px;
  padding-block: 48px;
}
.main__layout {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 32px;

  .desserts {
    flex: 60%;
  }

  .cart-container {
    min-width: 12.5rem;
    flex: 15%;
    justify-self: center;
  }

  @media (width < 35rem) {
    flex-direction: column;
    align-items: center;
  }

  @media (width > 35rem) {
    flex-direction: row;

    .cart-container {
      flex: 50%;
    }
    .desserts {
      flex: 50%;
    }
  }

  @media (width >= 59.375rem) {
    .desserts {
      flex: 50%;
    }
    .cart-container {
      flex: 20%;
    }
  }
}

.desserts__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, 15rem);
  justify-content: space-between;

  @media (65.5rem <= width <= 76.875rem) {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* CART */
.cart-container {
  .cart {
    max-width: 280px;
    width: 95%;
    margin-inline: auto;
    background-color: var(--c-rose-50);
    padding: 1em;
    border-radius: var(--b-radius-cards);
  }

  .card__btn {
    background-color: var(--c-red);
    color: white;
    width: 100%;
    height: 2.5rem;
    margin-inline: auto;
    margin-top: 16px;

    &:is(:hover, :focus) {
      background-color: hsl(from var(--c-rose-900) h s 35%);
      outline-color: hsl(from var(--c-rose-900) h s 35%);
    }
  }
}
.card__btn-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: -0.625rem;
  margin-bottom: 16px;
}
.list__item-content {
  padding: 16px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.0625rem solid var(--c-rose-100);
}

/* === COMPONENTS === */

/* DESSERT */

.desserts__title {
  color: var(--c-rose-900);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 0.8em;
}

/* CARD */
.card {
  display: flex;
  flex-direction: column;
  min-width: 15.625rem;

  .card__img-container {
    min-height: 14.375rem;
  }

  .card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .card__overlay {
    display: grid;
    gap: 8px;
    & > * {
      margin-bottom: 0;
    }
  }
}
.card__btn {
  background-color: var(--c-rose-50);
  border: none;
  padding: 0.375rem;
  width: 10.625rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
  border-radius: 1.875rem;
  cursor: pointer;

  .card__btn-text {
    font-weight: 400;
    line-height: 1;
    color: var(--c-rose-900);
  }

  &:is(:hover, :focus) {
    outline: 0.0625rem solid var(--c-red);

    .card__btn-text {
      color: var(--c-red);
    }
  }

  &.card__btn--active {
    background-color: var(--c-red);
    justify-content: space-between;
    color: var(--c-rose-50);
  }
}
:is(.card__btn-decrease, .card__btn-increase) {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  background-color: transparent;
  border: 0.0625rem solid var(--c-rose-50);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 300ms ease-in-out 100ms;

  &:hover {
    background-color: var(--c-rose-50);

    .icon-btn-decrease,
    .icon-btn-increase {
      & path {
        fill: var(--c-red);
      }
    }
  }
}
.card__overlay {
  .card__dessert {
    font-size: 19.2px;
    font-weight: 700;
    color: var(--c-rose-900);
  }
}

.cart {
  font-size: 14.4px;
  .cart__title {
    color: var(--c-red);
  }
}

.cart__img-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cart__img-text {
  font-weight: 600;
}

/* LIST */
.list {
  list-style: none;
  padding-left: 0;
  display: grid;
  row-gap: 16px;
}
.list__product {
  font-weight: 700;
  color: var(--c-rose-900);
}
.list__price {
  margin-bottom: 0;
}

.amount-per-unit {
  margin-right: 8px;
  font-weight: 600;
}
.cost-per-unit {
  margin-right: 4.8px;
}
.list__item-total {
  font-weight: 600;
}

.list__item-btn {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: transparent;
  color: var(--c-rose-300);
  border: 0.0625rem solid currentColor;
  display: grid;
  padding: 1.6px;
  place-items: center;
  cursor: pointer;

  &:is(:focus, :hover) {
    color: var(--c-rose-900);

    .icon-remove {
      fill: var(--c-rose-900);
    }
  }
}

.list__total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .list__total-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-rose-900);
  }

  .list__total-text {
    font-size: 13.6px;
  }
}

/* DISCLAIMER */
.disclaimer {
  padding: 13.6px;
  border-radius: 0.625rem;
  background-color: var(--c-rose-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4.8px;
  font-size: 13.6px;

  p {
    margin-bottom: 0;
  }
}

/* === MODAL === */
.modal {
  max-width: 25rem;
  width: 90%;
  border: none;
  border-radius: 0.625rem;

  .modal__title {
    font-size: 27.2px;
    margin-block: 0px;
    margin-bottom: 16px;
  }

  .modal__icon-confirm {
    margin-bottom: 1rem;
  }

  .order {
    background-color: var(--c-rose-50);
    padding: 16px;
    border-radius: 5px;
    margin-bottom: 1rem;
  }

  .list {
    font-size: 0.8rem;
  }

  .list__item {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid var(--c-rose-100);
  }

  .thumbnail {
    margin-right: 16px;
    border-radius: 0.3125rem;
    overflow: hidden;
  }
  .list__total-content {
    margin-left: auto;
  }
  .list__item-total--bolder {
    color: var(--c-rose-900);
    font-weight: 700;
    font-size: 1rem;
  }
  .card__btn {
    width: 100%;
    justify-content: center;

    &:is(:hover) {
      background-color: hsl(from var(--c-rose-900) h s 35%);
      outline-color: hsl(from var(--c-rose-900) h s 35%);
    }
  }
}

/* ==== JS CLASSES ==== */
.js-hidden {
  display: none;
}