@import url('../../commons/blocks/price-popular-cities/price-popular-cities.css');

.price-popular-cities-container {
  background: var(--tertiary-white);

  @media (width >=1024px) {
    background: var(--light-grey-shade-9);
  }
}

.price-popular-cities-container .price-popular-cities.block {
  background-color: transparent;
}

.price-popular-cities-container .price-popular-cities {
  font-family: var(--body-font-arena);
  color: var(--black-shade-6);
}

.price-popular-cities-container .ppc {
  padding-block: var(--space-24px);

  @media (width >=1024px) {
    padding-block: 3.5rem;
  }
}

.price-popular-cities-container .ppc__title {
  color: var(--black-shade-6);
  font-family: var(--body-font-arena);
  font-size: var(--body-font-size-sm);
  font-weight: var(--fw-700);
  line-height: var(--heading-lh-19-mob-text-small);

  @media (width >=1024px) {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

.price-popular-cities-container .ppc__description {
  color: var(--blue-shade-12);
  font-family: var(--body-font-arena);
  font-size: var(--body-font-size-xxs);
  font-weight: var(--fw-400);
  line-height: 1.5;

  @media (width >=1024px) {
    color: var(--blue-shade-11);
    font-size: var(--body-font-size-sm);
    font-weight: var(--fw-400);
    line-height: 1.5;
  }
}

.price-popular-cities-container .ppc-card {
  border: 1px solid var(--light-grey-shade-11);
  background: var(--tertiary-white);
  color: var(--black-shade-6);
}

.price-popular-cities-container a.ppc-card:hover,
.price-popular-cities-container a.ppc-card:focus-visible {
  color: var(--black-shade-6);
}

.price-popular-cities-container .ppc-card__city {
  font-family: var(--body-font-arena);
  font-size: var(--body-font-size-xxs);
  font-weight: var(--fw-700);
  line-height: 1.25rem;

  @media (width >=1024px) {
    font-size: var(--body-font-size-xxs);
    line-height: 1.375rem;
  }
}

.price-popular-cities-container .ppc-card__state {
  color: var(--blue-shade-13);
  font-family: var(--body-font-arena);
  font-size: var(--body-font-size-xxxs);
  font-weight: var(--fw-400);
  line-height: 1.125rem;

  @media (width >=1024px) {
    font-size: var(--body-font-size-xxxs);
    line-height: 1rem;
  }
}

.price-popular-cities-container .ppc-card__price {
  color: var(--blue-shade-7);
  font-family: var(--body-font-arena);
  font-size: var(--body-font-size-xxs);
  font-weight: var(--fw-700);
  line-height: 1.375rem;

  @media (width >=1024px) {
    color: var(--primary-blue-700);
  }
}

@media (width >=1024px) {
  .price-popular-cities-container .ppc-card {
    clip-path: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16px) var(--space-24px);
    border: 1px solid var(--light-grey-shade-11);
    background: var(--tertiary-white);
  }

  .price-popular-cities-container .ppc-card::after {
    content: none;
  }

  .price-popular-cities-container .ppc-card__city {
    font-size: var(--body-font-size-xxs);
  }

  .price-popular-cities-container .ppc-card__state {
    color: var(--light-grey-shade-10);
    font-size: var(--body-font-size-xxxs);
  }
}