/* Kontener dla całej ścieżki zamówienia */
.order-path {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  position: relative;

  & a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    background-color: white;
    z-index: 1;
    text-decoration: none;

    & span:nth-child(1) {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.6rem;
      background-color: var(--c-grey-6);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;

      &:hover {
        background-color: var(--c-ident);
      }
    }

    & span:nth-child(2) {
      margin-top: 5px;
      font-size: 0.9rem;
    }

    &.current {
      & span:nth-child(1) {
        background-color: var(--c-ident);
      }

      & span:nth-child(2) {
        color: var(--c-ident);
        font-weight: 600;
      }
    }

    &.next {
      & span:nth-child(1) {
        background-color: var(--c-grey-4);
      }

      & span:nth-child(2) {
        color: var(--c-grey-4);
      }
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background-image: radial-gradient(circle, var(--c-grey-4) 1px, transparent 1px);
    /* Tworzy kropki */
    background-size: 4px 10px;
    /* Rozmiar kropek i odległości pomiędzy */
    background-position: center;
    z-index: 0;
  }
}

@media (max-width: 992px) {
  .order-path a span {
    &:nth-child(1) {
      width: 40px;
      height: 40px;
      font-size: 1.4rem;
    }

    &:nth-child(2) {
      font-size: 0.7rem;
    }
  }
}

.cart-books-list {
  & .prodTitle {
    color: #000;
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & .qty {
    text-align: center;
    border: 1px solid #d3d3d3;
    font-size: 0.9rem;
    width: 2rem !important;
  }

  & .input-group {
    &>.btn {
      border: 1px solid #d3d3d3;
      padding: 0.2rem 0.5rem;
      font-size: 1.2rem;

      &:hover {
        background-color: #ececec;

        & .bi-dash-circle {
          color: #b80000;
        }

        & .bi-plus-circle {
          color: #2eaa01;
        }
      }

      & .bi-dash-circle,
      & .bi-plus-circle {
        color: #b3b3b3;
      }

      & .bi-trash3 {
        color: #b80000;
      }
    }
  }

  & .remove-prod {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem;

    & .bi-x {
      font-size: 1.4rem;
      color: #b80000;
    }

    &:hover {
      padding: 0.2rem 0.5rem;
      background-color: #b80000;

      &>.bi-x {
        color: #fff;
        font-size: 1.2rem;
      }
    }
  }

  & .bi-heart {
    color: var(--c-ident);
  }

  & .toFav {
    color: #72bda3;
    font-size: 0.85rem;

    &:hover {
      color: var(--c-ident);
    }
  }
}

.g3__cart-page {
  margin-top: 2rem;

  & .btn-box {
    border: 1px solid var(--c-grey-1);
    padding: 1rem 0;
    box-shadow: 0 0 20px #b5b5b5;

    & .sum-val {
      color: var(--c-ident);
      font-size: 1.8rem;
      font-weight: 700;
    }

    & .btn-success {
      padding: 0.5rem 3rem;
      font-size: 1.6rem !important;

      & span {
        font-size: 0.8rem;
        font-weight: 400;
        display: block;
      }
    }
  }

  & .buy4edu {
    padding-left: 0;
    padding-right: 0;

    & h3 {
      font-size: clamp(1.1rem, 2vw, 1.8rem);
      font-weight: 400;
      margin-bottom: 1rem;
    }

    &>.buy4edu-links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      align-items: stretch;

      &>a {
        color: #fff;
        text-align: center;
        background-color: var(--c-grey-6);
        margin: 0;
        padding: 1rem;
        font-size: 0.9rem;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;

        &:hover {
          background-color: var(--c-grey-7);
        }

        &>i {
          font-size: 2rem;
          margin-bottom: 0.5rem;
        }

        &>br {
          display: none;
        }

        &>span {
          display: block;
          line-height: 1.4;
        }
      }
    }
  }

  & .cart-fav-list .fav-icons {
    & .bi {
      font-size: 1.5rem;
    }

    & .bi-bag-plus {
      color: #137547;
    }

    & .bi-trash3 {
      color: #d80000;
    }
  }
}

@media (max-width: 450px) {
  .g3__cart-page .buy4edu {
    width: 100% !important;

    &>.buy4edu-links {
      gap: 0.5rem;

      &>a {
        padding: .5rem;
      }
    }
  }
}

.cart-summary-mobile {
  display:none;
  display: flex;
  flex-direction: row;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10000000000;
  background-color: #fff;
  padding: .5rem;
  box-shadow: 0 -7px 5px -5px #42445a;

  & div {
    text-align: center;

    &:nth-child(1) {
      font-size: 1.2rem;
      font-weight: 600;
      width: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:nth-child(2) {
      width: 40%;
    }
  }
}

.g3__order-summary {
  & a:not(.btn) {
    font-size: 0.8rem;
  }

  & .cta-box {
    box-shadow: 0 0 20px #b5b5b5;
    border: 1px solid var(--c-grey-1);
    padding: 2rem 0;
    display: flex;
    flex-flow: column;
    justify-content: center
  }

  & .totals {
    display: flex;
    flex-direction: column;

    & .total-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    & .total-label {
      padding-right: 1rem;
    }

    & .total-value {
      min-width: 120px;
      text-align: right;
    }

    & .sum {
      color: #379634;
      font-size: 1.5rem;
      font-weight: 600;
    }

    & .btn {
      --bs-btn-font-size: 1.5rem;
      --bs-btn-line-height: 1.5rem;
      --bs-btn-padding-x: 3rem;

      &>span {
        font-size: 0.8rem;
      }
    }
  }

  & .details div {
    font-size: 0.85rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: .5rem;
    padding: .1rem .5rem;

    &>div {
      padding: 0;

      &:first-child {
        min-width: 40%;
        font-weight: 500;
      }

      &:nth-child(2) {
        justify-content: flex-start;
        text-align: left;
        flex-grow: 1;

        &:has(div) {
          flex-flow: column;
          gap: 0;
        }

        & .pudoAddr {
          display: block;
          font-size: 0.8em;
          padding-bottom: 0.5rem;
        }
      }
    }
  }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .g3__order-summary .totals {
    width: 70%;
  }
}