@import url('../../commons/blocks/ew-activity/ew-activity.css');
.ew-activity {
  &:has(.ew-accordion) {
    margin-top: 0;
    @media (width >= 1024px) {
      padding: 3.5rem;
      margin-top: 0px;
    }
  }
  .ew-accordion {
    padding-right: 7px;
    overflow-x: auto;
    max-height: 760px;
    &::-webkit-scrollbar {
      width: 4px;
    }
    .ew-accordion-item {
      .ew-accordion-heading {
        .card-head {
          :is(h1, h2, h3, h4, h5, h6),
          .title {
            color: var(--primary-main);
            font-size: var(--body-font-size-xxxs);
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-21-mob-text-small);
            @media (width >= 1024px) {
              color: var(--inactive-content);
              font-size: var(--body-font-size-xxs);
              line-height: var(--heading-lh-6-des);
            }
          }
          .vehicle-number {
            color: var(--primary-black);
            font-size: var(--body-font-size-xs);
            font-weight: var(--fw-600);
            line-height: var(--heading-lh-19-mob-display);
            @media (width >= 1024px) {
              font-size: var(--body-font-size-xxs);
              font-weight: var(--fw-500);
              line-height: var(--heading-lh-6-des);
            }
          }
        }

        &.open {
          padding-bottom: 24px;
        }
      }
    }
  }

  .ew-activity__block {
    position: relative;
    padding: 40px 20px;
    padding-right: 9px;
    background: var(--gradient-6);
    @media (width >= 1024px) {
      padding: 32px 40px;
      padding-right: 24px;
    }
  }
  .ew-activity__block::before {
    display: none;
  }
  .ew-activity__header {
    margin-bottom: 19px;
    padding-right: 11px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    @media (width >= 1024px) {
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 24px;
      align-items: center;
    }
    .ew-activity__title-head {
      font-feature-settings:
        'liga' off,
        'clig' off;
      display: flex;
      color: var(--primary-main);
      flex-direction: column;
      gap: 8px;
      :is(h1, h2, h3, h4, h5, h6) {
        margin: 0;
      }
      .ew-activity__title {
        :is(h1, h2, h3, h4, h5, h6) {
          color: var(--secondary-black);
          font-size: var(--heading-font-size-m);
          font-weight: var(--fw-700);
          line-height: var(--heading-lh-9-des-sub-heading);
          letter-spacing: normal;
          @media (width >= 1024px) {
            font-size: var(--heading-font-1-des);
            line-height: var(--heading-lh-16-des-display);
          }
        }
      }
      .ew-activity__subtitle {
        :is(h1, h2, h3, h4, h5, h6) {
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-300);
          line-height: var(--heading-lh-19-mob-display);
          @media (width >= 1024px) {
            font-size: var(--body-font-size-xs);
          }
        }
      }
    }
    .ew-activity__view-all {
      font-size: var(--heading-font-8-mob);
      line-height: var(--heading-lh-19-mob-text-small);
      position: relative;
      @media (width >= 1024px) {
        margin-right: 0px;
      }
      a.button {
        border: 1px solid var(--primary-blue-700);
        font-weight: var(--fw-400);
        height: 42px;
        padding: 0 12px;
        @media (width >= 1024px) {
          padding: 0 16px;
        }
      }
      &::after {
        display: none;
      }
      p {
        margin: 0;
        margin-right: 14px;
        a {
          color: var(--primary-blue-700);
        }
        &:hover {
          a {
            color: var(--primary-blue-700);
          }
        }
      }
    }
  }
  .ew-activity__cards-wrapper {
    .ew-activity__cards {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-right: 0;
      @media (width >= 1024px) {
        max-height: 608px;
        padding-right: 4px;
        gap: 32px;
      }
      .ew-activity__card {
        background: var(--secondary-gray-10);
        width: 100%;
        @media (width >= 1024px) {
          padding: 20px 24px;
          display: flex;
        }
        .ew-activity__car-image {
          display: none;
          @media (width >= 1024px) {
            display: block;
            height: 228px;
            width: 220px;
            min-width: 220px;
            object-fit: contain;
            object-position: center;
            margin-right: 40px;
          }
        }
        .ew-details {
          padding: 0;
          padding-top: 24px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          @media (width >= 1024px) {
            padding: 0;
            width: 100%;
          }
          .ew-activity__banner {
            padding: 8px 16px;

            @media (width >= 1024px) {
              padding: 10px 24px;
            }
            p {
              font-size: var(--body-font-size-xxxs);
              line-height: var(--heading-lh-21-mob-text-small);
              margin: 0;
              font-feature-settings:
                'liga' off,
                'clig' off;
              font-weight: var(--fw-400);
              @media (width >= 1024px) {
                font-size: var(--body-font-size-xxs);
                line-height: var(--heading-lh-6-des);
              }
            }
            strong {
              font-weight: var(--fw-700);
            }
            &.success {
              background-color: var(--tea-green);
              color: var(--tea-green-text);
            }
            &.warning {
              background-color: var(--orange-toast);
              color: var(--orange-toast-text);
            }
          }
          .ew-activity__card-body {
            display: flex;
            flex-direction: column;
            .ew-activity__details {
              display: grid;
              gap: 16px;
              @media (width >= 1024px) {
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
              }
              .car-details {
                position: relative;
                display: flex;
                flex-direction: column;
                padding-bottom: 12px;
                border-bottom: 1px solid transparent;
                background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
                background-repeat: no-repeat;
                background-size: 100% 0.2px;
                background-position: bottom left;
                gap: 4px;
                font-feature-settings:
                  'liga' off,
                  'clig' off;
                line-height: var(--heading-lh-19-mob-text-small);
                .registration-label {
                  font-size: var(--body-font-size-xs);
                  font-weight: var(--fw-600);
                  line-height: var(--heading-lh-19-mob-display);
                }
                .model-label {
                  color: var(--primary-black);
                  font-size: var(--body-font-size-xxs);
                  font-weight: var(--fw-400);
                  line-height: var(--heading-lh-19-mob-display);
                }
              }
              .registration-details {
                padding: 0;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                row-gap: 24px;
                .details-card {
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  gap: 4px;
                  p {
                    margin: 0;
                    line-height: var(--heading-lh-19-mob-text-small);
                    font-feature-settings:
                      'liga' off,
                      'clig' off;
                  }
                  .label {
                    font-size: var(--body-font-size-xxs);
                    font-weight: var(--fw-400);
                    line-height: var(--heading-lh-19-mob-display);
                    text-transform: none;
                    color: var(--inactive-content);
                  }
                  .value {
                    color: var(--primary-black);
                    font-size: var(--body-font-size-xxs);
                    font-weight: var(--fw-500);
                    line-height: var(--heading-lh-19-mob-display);
                  }
                }
              }
              .details-card {
                @media (width >= 1024px) {
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  width: 100%;
                }
                p {
                  @media (width >= 1024px) {
                    margin: 0;
                    font-weight: var(--fw-500);
                    line-height: var(--heading-lh-6-des);
                  }
                }
                .label {
                  @media (width >= 1024px) {
                    font-size: var(--body-font-size-xxs);
                    text-transform: none;
                    color: var(--inactive-content);
                    font-weight: var(--fw-400);
                  }
                }
                .value {
                  @media (width >= 1024px) {
                    font-size: var(--body-font-size-xxs);
                    color: var(--primary-main);
                  }
                }
              }
            }
          }
          .ew-activity__actions {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            @media (width >= 1024px) {
              flex-direction: row-reverse;
              gap: 32px;
            }
            a.button {
              padding: 0;
            }
            p {
              margin: 0;
              line-height: var(--heading-lh-4--mob-text-medium);
            }

            .ew-activity__button a.button {
              font-weight: var(--fw-400);
              font-size: var(--body-font-size-xxs);
              @media (width >= 1024px) {
                align-self: stretch;
                font-size: var(--body-font-size-xxs);
              }
            }
            .primary-btn {
              display: flex;
              padding: 8px 16px;
              background-color: var(--primary-blue-700);
              border: none;
              text-decoration: none;
              text-align: center;
              height: 32px;
              justify-content: center;
              align-items: center;
              gap: 8px;
              flex-shrink: 0;
              cursor: pointer;
              @media (width >= 1024px) {
                height: 42px;
                padding: 12px 24px;
                display: flex;
                gap: 12px;
                width: auto;
                flex: auto 0 0;
                line-height: var(--heading-lh-5--mob);
              }
              a {
                color: var(--secondary-gray-20);
              }
              &:hover {
                background-color: var(--primary-blue-700);
              }
            }
            .secondary-btn {
              display: flex;
              padding: 8px 16px;
              color: var(--primary-blue-700);
              border: 1px solid var(--primary-blue-700);
              align-self: center;
              width: 100%;
              text-align: center;
              justify-content: center;
              @media (width >= 1024px) {
                height: 44px;
                padding: 12px 24px;
                width: auto;
              }
              a {
                color: var(--primary-blue-700);
              }
              &:hover {
                a {
                  color: var(--primary-blue-700);
                }
              }
            }
          }
        }
      }
    }
  }
}