@import url('/styles/subscribe.css');

.block.subscribe-user-cars.hide {
  display: none;
}

.block.subscribe-user-cars {
  background: var(--light-gray-alpha);
  padding-block: 0 var(--space-50px);

  .subscribe-user-cars__wrapper {
    width: 100%;
  }

  .subscribe-user-cars__loading,
  .subscribe-user-cars__empty {
    background: var(--white);
    box-shadow: 0 0 10px var(--sub-black-20);
    border-radius: 15px;
    padding: var(--space-30px) var(--space-20px);
    text-align: center;
    font-size: var(--subscription-font-3-desc);
    color: var(--gray-600);
    line-height: normal;
  }

  .subscribe-user-cars__empty {
    background: unset;
    box-shadow: unset;
  }

  .subscribe-user-cars__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-20px);

    @media (width >= 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width >= 992px) {
      padding-left: var(--space-20px);
    }

    @media (width >= 1200px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .subscribe-user-cars__card {
    position: relative;
    background: var(--white);
    box-shadow: 0 0 10px var(--sub-black-20);
    border-radius: 15px;
    padding: var(--space-20px) var(--space-20px) var(--space-25px);
    display: flex;
    flex-direction: column;
    gap: var(--space-20px);
    cursor: pointer;
    transition: box-shadow 0.2s ease;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      right: var(--space-20px);
      transform: translateY(-50%) rotate(-90deg);
      width: 28px;
      height: 28px;
      background: url(/icons/subscribe/accord-btn.svg) no-repeat center / contain;
    }

    &:hover,
    &:focus-visible {
      box-shadow: 0 4px 16px var(--sub-black-20);
      outline: none;
    }
  }

  .subscribe-user-cars__card-date {
    margin: 0;
    text-align: right;
    font-size: var(--subscription-font-5-desc);
    font-style: italic;
    color: var(--gray-600);
    line-height: normal;
  }

  .subscribe-user-cars__card-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .subscribe-user-cars__card-img {
    text-align: center;

    img {
      width: auto;
      height: 75px;
      display: inline-block;
    }
  }

  .subscribe-user-cars__card-name {
    margin: 0;
    font-size: var(--subscription-font-h6);
    font-weight: var(--fw-700);
    color: var(--sub-dark-gray);
    line-height: var(--subscription-lh-2-mob-display);
  }

  .subscribe-user-cars__card-price {
    margin: 0;
    font-size: var(--subscription-font-3-desc);
    font-weight: var(--fw-700);
    color: var(--sub-dark-gray);
    line-height: normal;

    span {
      color: var(--gray-600);
      font-weight: var(--fw-400);
      font-size: var(--subscription-font-3-desc);
    }
  }

  .subscribe-user-cars__card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-20px);
    padding-right: var(--space-35px);
  }

  .subscribe-user-cars__card-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-20px);

    li {
      display: flex;
      gap: 5px;
      min-width: 0;
    }

    .label {
      color: var(--gray-medium-400);
      font-size: var(--subscription-font-4-desc);
      font-weight: var(--fw-600);
      line-height: normal;
    }

    .value {
      color: var(--color-dark-blue);
      font-size: var(--subscription-font-4-desc);
      font-weight: var(--fw-700);
      line-height: normal;
    }
  }
}