@use "sass:color";
/*#############################################################################
# MY PRODUCTS
#############################################################################*/


// Products Box Base Styles
// To be extended
.my-products-base-box {
  background-color: #fff;
  padding: 20px 30px;
  @include border-radius(4px);
  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
}

.my-products-list-wrapper {
  max-width: 1000px;
  margin: 0 auto;

  .product-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 120px;
    justify-items: center;
    margin: 0 0 20px;
    @extend .my-products-base-box;
    // @extend %transition-all;

    @include responsive-max($breakpoint-small) {
      grid-template-columns: none;
      grid-gap: 1rem;

      .credit-id {
        justify-self: center !important;
      }

      .product-box-column {
        padding: 0 !important;
        text-align: center !important;

        .product-box-title {
          margin: 0;
        }
      }

      .credit-actions {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        a.product-box-action {
          opacity: 1;

          &.small {
            font-weight: 900;
            padding: 10px 20px;
          }
        }
      }
    }

    &:last-child {
      margin: 0;
    }

    // General Box Columns
    .product-box-column {
      padding: 0 20px;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }

    // Specific Box Columns
    .credit-id {
      justify-self: start;
    }

    // Content Elements

    .product-box-title {
      color: $color-secondary;
      font-size: rem-calc(10px);
      text-transform: uppercase;
      margin: 0 0 10px;
    }

    .product-box-content {
      font-size: rem-calc(14px);
      margin: 0;
    }

    .product-box-credit-amount {
      font-size: rem-calc(20px);
      margin: 0;
    }

    .progress-bar {
      min-width: 120px;
      margin-top: 18px;
    }

    .product-box-payment-status {
      font-size: rem-calc(12px);
      font-weight: 900;
      margin: 0;
    }

    a.product-box-action {
      display: block;
      opacity: 0;
      font-size: rem-calc(12px);
      text-align: center;
      margin: 0 0 12px;

      &:last-child {
        margin: 0;
      }
    }

    // HOVER STATE

    &:hover {
      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));

      a.product-box-action {
        opacity: 1;
      }
    }
  }
}

header.product-details {
  margin: 0 0 40px;

  .product-details-id {
    color: $color-secondary;
    font-size: rem-calc(14px);
    text-transform: uppercase;
    margin: 0;
  }

  .product-details-amount {
    font-size: rem-calc(28px);
    margin: 0 0 30px;
  }

  // Secondary Info container
  .secondary-product-info {
    display: flex;
    flex-flow: row wrap;

    .product-info-box {
      margin-right: 70px;
    }

    // Content Elements
    .product-info-title {
      color: $color-secondary;
      font-size: rem-calc(12px);
      text-transform: uppercase;
      margin: 0;
    }

    .product-info-value {
      font-size: rem-calc(14px);
      font-weight: 900;
      margin: 0;
    }
  }
}

.product-details-wrapper {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-column-gap: 30px;
  margin: 0 0 40px;

  @include responsive-max($breakpoint-small) {
    grid-template-columns: none;
    grid-gap: 1rem;
  }

  &:last-child {
    margin: 0;
  }

  // Product Details Box Structure Elements
  .product-details-box {
    @extend .my-products-base-box;
    min-height: 500px;
    padding: 0;

    header.product-details-header {
      padding: 20px 20px 0;
      border-bottom: 1px solid $color-secondary-light;

      nav {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;

        a {
          color: $color-secondary;
          font-size: rem-calc(14px);
          padding: 0 5px 15px;

          @include responsive-max($breakpoint-small) {
            width: 50%;
            text-align: center;
            margin-bottom: 15px;
          }

          &.active {
            border-bottom: 2px solid $color-primary;
            color: $color-primary;
            font-weight: 900;
          }

          &:hover {
            color: color.adjust($color-secondary, $lightness: -20%);
          }
        }
      }
    }

    .box-content {
      padding: 30px;

      .col {
        &:first-child {
          padding: 0 30px 0 20px;
        }

        &:last-child {
          padding: 0 20px 0 30px;
        }
      }
    }

    footer.product-details-footer {
      border-top: 1px solid $color-secondary-light;
      padding: 20px 60px;
      @include border-bottom-radius(4px);

      a {
        display: inline-block;
        font-size: rem-calc(14px);
        font-weight: 900;
      }
    }
  }

  // Content Elements

  h5.payments-table-title {
    font-size: rem-calc(14px);
    margin: 0 0 20px;
  }

  header.payment-details-header {
    margin-bottom: 20px;
    @include pie-clearfix;

    h6 {
      font-size: rem-calc(14px);
      margin: 0;
      @include float(left);
    }

    p {
      color: $color-secondary;
      font-size: rem-calc(14px);
      font-weight: 900;
      margin: 0;
      @include float(right);
    }
  }

  a.next-installment-pay {
    display: block;
    text-align: center;
    margin: 30px 0;
  }

  p.next-installment-text {
    font-size: rem-calc(12px);
    margin: 0;
  }

  footer.next-installment {
    border-top: 1px solid $color-secondary-light;
    margin-top: 15px;
    padding-top: 15px;

    p {
      font-size: rem-calc(12px);
      margin: 0;

      a {
        font-weight: bold;
      }
    }
  }

  p.payment-simulator {
    font-size: rem-calc(14px);
    margin: 20px 0 0;
    padding: 0 20px;
  }
}

ul.payments-table {
  border-bottom: 1px solid $color-secondary-light;
  list-style: none;
  margin: 0 0 15px;
  padding: 0 0 15px;

  li {
    margin: 0 0 10px;
    padding-left: 15px;
    position: relative;
    @include pie-clearfix;

    &:last-child {
      margin: 0;
    }

    &::before {
      content: "";
      display: block;
      background-color: $color-primary;
      width: 5px;
      height: 5px;
      position: absolute;
      top: 50%;
      left: 0;
      @include border-radius(10px);
      @include transform(translateY(-50%));

    }
  }

  &.no-decoration {
    li {
      padding-left: 0;

      &::before {
        display: none;
      }
    }
  }
}

ul.payments-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    .history-box {
      span {
        display: block;

        &.installment {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.date {
          font-size: rem-calc(14px);
        }

        &.amount {
          font-size: rem-calc(14px);
          font-weight: 900;
          text-align: right;

          &.penalty {
            color: $color-alert;
            font-size: rem-calc(12px);
            font-weight: 400;
          }
        }
      }

      &.left {
        justify-self: start;
      }

      &.right {
        justify-self: end;
      }
    }
  }
}

ul.statements-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 24px 1fr 1fr;
    grid-column-gap: 15px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    img.icon {
      display: block;
      width: 100%;
    }

    .history-box {
      span {
        display: block;

        &.statement {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.date {
          font-size: rem-calc(14px);
        }

        &.actions {
          font-size: rem-calc(14px);
          font-weight: 900;
          text-align: right;
        }
      }

      &.left {
        justify-self: start;
      }

      &.right {
        justify-self: end;
      }
    }
  }
}

ul.documents-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 24px 1fr 1fr;
    grid-column-gap: 15px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    img.icon {
      display: block;
      width: 100%;
    }

    .history-box {
      span {
        display: block;

        &.document {
          font-size: rem-calc(14px);
        }

        &.file-size {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.actions {
          font-size: rem-calc(14px);
          font-weight: 900;
          text-align: right;
        }
      }

      &.left {
        justify-self: start;
      }

      &.right {
        justify-self: end;
      }
    }
  }
}

span.payments-table-item-title {
  font-size: rem-calc(12px);
  font-weight: 900;
  @include float(left);
}

span.payments-table-item-value {
  font-size: rem-calc(12px);
  @include float(right);
}

.payments-table-totals {
  @include pie-clearfix;

  span.item-title {
    font-size: rem-calc(13px);
  }

  span.item-value {
    font-size: rem-calc(13px);
    font-weight: 900;
  }

  &.large {
    span {
      font-size: rem-calc(14px);
    }
  }
}

p.payment-simulation-result {
  font-size: rem-calc(14px);
  margin-top: 30px;
}

// Products Box Base Styles
.virtual-card-section {
  padding: 50px 60px 0;
  margin-bottom: 30px;
  background-color: #fff;
  border: 1px solid #E9EAEA;
  @include box-shadow(-10px 10px 20px 0 rgba( black, 0.05));
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 6rem;

  .card-section {
    .credit-card-container {
      display: flex;
      flex-flow: column-reverse nowrap;
      align-items: center;

      .v-card {
        width: 85.60mm;
        height: 52.98mm;
        border-radius: 20px;
        margin-bottom: 0;
        -moz-box-shadow: -3px 6px 12px #4d4c4d;
        -webkit-box-shadow: -3px 6px 12px #4d4c4d;
        box-shadow: -3px 6px 12px #4d4c4d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: -webkit-transform 0.6s;
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s, -webkit-transform 0.6s;
        cursor: pointer;

        &.disabled {
          cursor: not-allowed;
        }

        .disabled-layer {
          width: 100%;
          height: 102%;
          position: absolute;
          z-index: 2;
          background-color: $default-color-hover;
          opacity: 0.6;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 17px 17px 14px 16px;

          .icon {
            width: 72px;
          }
        }

        .front {
          display: flex;
          flex-flow: nowrap column;
          position: absolute;
          width: 85.6mm;
          height: 53.98mm;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-font-smoothing: antialiased;
          background-size: contain;
          padding: 10px;

          .credit-card-data {
            color: #CBCECE;
            height: 100%;
            display: flex;
            align-items: flex-end;

            .person-data {
              margin: 0 28px;
              font-size: rem-calc(12px);
              .name {
                font-weight: 600;
                font-family: 'Montserrat', serif;
              }
            }
          }
        }

        .back {
          position: absolute;
          width: 85.6mm;
          height: 53.98mm;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-font-smoothing: antialiased;
          background-size: contain;
          -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
          padding: 10px;

          .white-space {
            height: 30%;
          }

          .card-data-back {
            color: #CBCECE;
            position: relative;
            height: 70%;
            font-family: 'Karla', serif;

            .pan {
              letter-spacing: 1px;
              font-size: rem-calc(15px);
              text-align: center;
              font-weight: 600;
              height: 70%;
              display: flex;
              align-items: flex-end;
              justify-content: center;
            }

            .security-data {
              display: flex;
              flex-flow: row nowrap;
              height: 30%;
              justify-content: flex-end;
              align-items: flex-end;
              margin-right: 17%;

              .title {
                letter-spacing: 0.5px;
                font-size: 10px;
              }

              .data {
                font-size: rem-calc(12px);
              }

              .exp-date-wrapper {
                margin-right: 10px;
              }
            }
          }
        }


        &.flipped {
          -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
          box-shadow: 9px 9px 12px #4d4c4d;
        }
      }

      .cta-secction {
        margin: 0 0 10px;
        display: flex;

        .button {
          margin: 0 10px;
        }

        .view-card-information {
          font-size: rem-calc(12px);
          font-weight: 900;
          cursor: pointer;
          color: $color-primary;
        }

        .status-container {
          width: fit-content;
          animation: heartbeat 1s 6;

          .card-status-details {
            font-size: rem-calc(12px);
            font-weight: bold;
          }
        }

        .count-down-hide-data {
          font-size: rem-calc(12px);
        }
      }
    }

    .credit-card-footer-message {
      display: flex;
      justify-content: center;
      p {
        margin-top: 15px;
        font-size: rem-calc(12px);
      }
    }
  }

  .summary-section {
    display: flex;
    flex-direction: column;

    .tab {
      .accordion-control {
        display: none;
      }

      .accordion-label {
        display: none;
      }
    }

    .credit-card-summary {
      display: flex;
      justify-content: space-around;
      flex-flow: row wrap;

      .section-separator {
        border-right: 1px solid #afb3c07d;
      }

      .separator-line {
        border-bottom: 1px solid #afb3c07d;
        margin: 15px 0px;
        width: 100%;
      }

      .title {
        color: $color-secondary;
        font-size: rem-calc(12px);
        margin-bottom: 0;
      }

      section.main-summary {
        .description {
          font-size: rem-calc(14px);
          font-weight: 900;
        }
      }

      section.summary-cta {
        margin-top: 20px;
        font-size: 14px !important;
      }

      section.secondary-summary {
        .description {
          font-size: rem-calc(12px);
          font-weight: 900;
        }
      }
    }

    .summary-footer {
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: space-around;

      .toggle-button-with-label {
        .onoffswitch {
          margin-left: 10px;
        }
      }
    }
  }

  @include responsive-max($breakpoint-xlarge) {
    padding: 0;
    grid-template-columns: 1fr;

    .card-section {
      .credit-card-container {
        .v-card {
          display: flex;
          justify-content: center;
          width: auto;
          height: 40.98mm;

          .disabled-layer {
            width: 65.6mm;
            height: 40.98mm;
            border-radius: 10px;
            .icon {
              width: 48px;
            }
          }

          .front {
            width: 65.6mm;
            height: 40.98mm;

            .credit-card-data {
              .person-data {
                margin: 0 10px;
                font-size: rem-calc(10px);
              }
            }
          }

          .back {
            width: 65.6mm;
            height: 40.98mm;
          }
        }

        .cta-secction {
          margin: 20px 0 10px;

          .button {
            font-size: rem-calc(12px);
          }
        }
      }

      .credit-card-footer-message {
        display: flex;
        justify-content: center;

        p {
          margin-left: unset;
        }
      }
    }

    .summary-section {
      /* Accordion styles */
      .tab {
        .accordion-label {
          cursor: pointer;
          display: block;
        }

        .accordion_container {
          &:first-of-type {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
          }

          &:last-of-type {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-bottom: none;
          }
        }

        .accordion-content {
          /* Height animation:
          only really works well if the height is close to content - too high and the animation still goes to the max-height number, messing up the timing
          For widely variable height content, best not to animate. Switch display attribute instead */
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s;
          background-size: 260px;
          background-repeat: no-repeat;
          background-position: center;
        }

        .accordion-control {
          display: none;

          + label {
            position: relative;
            height: 40px;
            margin: 0 15px 0 24px;
            display: block;
            font-family: arial, serif;
            font-size: 1em;
            line-height: 1em;
            z-index: 0;

            &:before {
              content: attr(data-label-closed);
              display: contents;
              position: relative;
            }

            &::after {
              right: 0;
              content: "❯";
              margin-right: 8px;
              height: 1em;
              text-align: center;
              transition: all 0.35s;
              position: absolute;
            }
          }

          &:checked {
            + label {
              cursor: pointer;

              &:before {
                content: attr(data-label-open);
              }

              &:after {
                transform: rotate(90deg);
              }

              + .accordion-content {
                max-height: 450px;
              }
            }
          }

          &[type="radio"] {
            + label {
              &:before,
              &:after {
                content: '';
              }
            }

            &:checked {
              + label {
                cursor: default;

                &:before {
                  border-left-color: #999;
                }
              }
            }
          }
        }
      }

      .credit-card-summary {
        flex-flow: column nowrap;
        padding: 0 20px;

        .summary-sections {
          display: flex;
          justify-content: space-between;
        }

        .summary-cta {
          display: flex;
          justify-content: flex-end;
        }

        .separator-line {
          margin: 0;
          width: 0;
        }

        .section-separator {
          border-right: unset;
          border-bottom: 1px solid #afb3c07d;
          margin: 15px 0;
        }
      }

      .summary-footer {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 20px;

        .toggle-button-with-label {
          padding-top: unset;
        }
      }
    }
  }

  @include responsive-max($breakpoint-medium) {
    .summary-section {
      .summary-footer {
        align-items: flex-end;
        gap: 18px;
        flex-direction: column;
      }
    }
  }
}