/**************************************************/
/*                  MY ACCOUNT                    */
/**************************************************/

.woocommerce-account {
  &.woocommerce-orders {
    .woocommerce {
      .container {
        &::before {
          content: "I tuoi oridini";
        }
      }
    }
  }

  &.woocommerce-view-order {
    .woocommerce {
      .container {
        &::before {
          content: "Dettagio ordine";
        }
      }
    }

    .woocommerce-MyAccount-content {
      h3 {
        font-size: 30px;
        font-weight: bold;
        line-height: 35px;
        margin-bottom: 65px;
      }
      p:first-of-type {
        display: none;
      }
      .woocommerce-order-details__title {
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
        color: var(--title-color);
        margin-bottom: 23px;
      }
    }

    .woocommerce table.shop_table {
      t {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--bg-color-2);
        margin: 0;
      }
      tfoot {
        border: none;
        tr:first-child {
          display: none;
        }
        tr {
          display: flex;
          justify-content: space-between;
          align-items: center;
          th {
            padding-left: 0;
            border: none;
          }
          &:last-child {
            border-top: 1px solid var(--bg-color-2);
          }
        }
      }
    }

    .woocommerce-table__product-name {
      &.product-name {
        border: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;

        a,
        a:visited {
          font-weight: bold;
          margin-bottom: 13px;
          color: var(--text-color-1);
          text-decoration: none;
          transition: 0.3s;
          width: 100%;

          &:hover,
          &:active {
            color: var(--text-color-1);
            text-decoration: underline;
          }
        }

        .date_panel {
          width: 100%;
        }

        .product-quantity {
          display: none !important;
        }

        ._view_and_pdf_row {
          padding-top: 10px;
          padding-bottom: 30px;
          display: flex;
          flex-direction: row;
          justify-content: start;
          min-width: 100%;

          @media (min-width: 768px) {
            min-width: auto;
          }

          a:not(:last-child) {
            margin-right: 12px;
            width: auto;
          }
        }
      }
    }

    .woocommerce-table__line-item.order_item {
      width: 100% !important;
      margin: 0;
      border-collapse: collapse;
      display: flex;
      justify-content: space-between;
      position: relative;
    }

    .woocommerce-table__product-total.product-total {
      width: 20%;
      border: none;
      text-align: right;
      font-weight: bold;
      position: absolute;
      top: 0;
      right: 0;

      @media (min-width: 768px) {
        position: relative;
      }
    }

    a.button.wc-forward,
    a.button.wc-forward:visited {
      font-weight: 300;
      color: var(--bg-color-1) !important;
      background-color: var(--title-color);
      border: 1px solid var(--title-color);
      transition: 0.3s;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 63px;

      @media (min-width: 768px) {
        height: 40px;
      }

      &:hover,
      &:active {
        color: var(--title-color) !important;
        background-color: var(--bg-color-1);
        border: 1px solid var(--title-color);
        text-decoration: none !important;
      }
    }

    .woocommerce-customer-details {
      display: none;
    }
  }

  &:not(.woocommerce-orders) {
    &:not(.woocommerce-view-order) {
      &.logged-in {
        .woocommerce {
          .container {
            &::before {
              content: "Benvenuto nella tua area personale!";
            }
          }
        }
      }
    }
  }

  main {
    .woocommerce {
      .container {
        display: flex;
        flex-direction: column;

        &::before {
          display: block;
          font-size: 30px;
          font-weight: bold;
          line-height: 35px;
          color: var(--title-color);
          margin-bottom: 40px;
        }

        .woocommerce-form-login,
        .h2 {
          display: none;
        }
      }

      .woocommerce-MyAccount-navigation {
        ul {
          display: flex;
          padding: 0;
          margin-left: 0;
          margin-bottom: 40px;

          li {
            list-style: none;
            padding-right: 1em;
            margin: 0;
          }
        }
      }

      .my_account_orders.account-orders-table,
      .woocommerce-MyAccount-navigation {
        ul {
          li {
            &.woocommerce-MyAccount-navigation-link--subscriptions,
            &.woocommerce-MyAccount-navigation-link--downloads,
            &.woocommerce-MyAccount-navigation-link--edit-address,
            &.woocommerce-MyAccount-navigation-link--edit-account {
              display: none !important;
            }
          }
        }
      }
    }

    a {
      &.red-btn {
        width: 220px;
      }

      &:not(.red-btn) {
        color: var(--title-color);
        transition: 0.3s;
        text-decoration: none;

        &:visited {
          color: var(--title-color);
          transition: 0.3s;
          text-decoration: none;
        }
        &:hover,
        &:active {
          color: var(--title-color);
          text-decoration: underline;
        }
      }
    }
  }

  .woocommerce-MyAccount-content {
    & > p {
      &:last-child {
        display: none !important;
      }
    }
  }
}

.woocommerce-MyAccount-content {
  width: 100%;

  & > p {
    &:first-of-type {
      &::after {
        display: block;
        content: "Consulta i tuoi ordini recenti col menu.";
      }
    }
  }
}

/******************************/
/*         Order Item         */
/******************************/

.order-item {
  margin-bottom: 70px;

  row {
    &.text-1 {
      padding: 24px 0;
      border-bottom: 1px solid var(--bg-color-2);

      div img {
        width: 97px;
        height: 97px;
        object-fit: cover;
      }
    }

    &.text-2 {
      padding-bottom: 11px;
      border-bottom: 1px solid var(--bg-color-2);
    }
  }
}

.order-detail-info {
  border-top: 1px solid var(--bg-color-2);
  border-bottom: 1px solid var(--bg-color-2);
  padding: 23px 0;
  font-size: 18px;
  line-height: 22px;
}
/******************************/
/*         Login Modal        */
/******************************/

#loginModal {
  width: 100vw;
  height: 100vh;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);

  .container {
    padding: 0;
  }

  .modal-dialog {
    width: 100% !important;
    border-radius: 0;
  }

  .modal-content {
    width: 100% !important;
    border-radius: 0;

    @media (min-width: 768px) {
      width: 600px;
    }
  }

  .modal-header {
    border: none;
  }

  .modal- {
    .woocommerce {
      margin-top: 0;

      h2 {
        display: none;
      }

      .woocommerce-form-login {
        margin: 0;
        padding: 0;
        border: none;
        display: flex;
        flex-direction: column;

        @media (min-width: 768px) {
          flex-direction: row;
          justify-content: space-between;
        }

        p {
          margin: 0;
          padding-right: 0;
          width: 100%;

          @media (min-width: 768px) {
            width: auto !important;
          }

          &:first-child {
            margin-bottom: 23px;

            @media (min-width: 768px) {
              margin-bottom: 0;
              width: 100% !important;
              margin-right: 23px;
            }

            label {
              display: none;
            }

            &:before {
              content: "Inserisci la tue e-mail";
              font-size: 20px;
              font-weight: 700;
              line-height: 28px;
              margin-bottom: 23px;
            }
          }
        }

        button {
          width: 168px;
          height: 40px;
          margin: 0;
        }
      }
    }
  }
}