.card {
  @apply shadow-primary shadow-[var(--rb-card-border-color)] flex flex-col bg-[var(--rb-card-background-color)];
}

.card-property,
.card-building {
  @apply h-full;
}

.card-img-wrapper {
  @apply relative h-52 overflow-hidden;
}

.card-favorite {
  @apply w-6 h-6 absolute top-4 right-4 z-30 text-center cursor-pointer;
}

.card-favorite::after {
  @apply font-awesome text-xl text-white font-light content-['\f004'] transition-colors duration-200;
}

.card-favorite:hover::after,
.card-favorite.is-active::after,
.card-favorite.is-loading::after {
  @apply font-extrabold text-[var(--rb-first-color)];
}

.card-slider {
  @apply static;
}

.card-slider .swiper-button-next,
.card-slider .swiper-button-prev {
  @apply opacity-0 transition-opacity duration-200;
}

.card-slider:hover .swiper-button-next,
.card-slider:hover .swiper-button-prev {
  @apply opacity-100;
}

.card-slider:hover .swiper-button-disabled {
  @apply opacity-35;
}

.card-slider .swiper-button-next::after,
.card-slider .swiper-button-prev::after {
  @apply text-white text-2xl;
}

.card-slider .swiper-pagination-bullet {
  @apply w-1.5 h-1.5 bg-white opacity-80;
}

.card-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  @apply bg-[var(--rb-first-color)] opacity-100;
}

.card-img-link {
  @apply absolute inset-0 z-10;
}

.card-slide {
  @apply h-52;
}

.card-img {
  @apply w-full h-full object-cover;
}

.card-img-cta {
  @apply absolute inset-0 flex items-center justify-center backdrop-blur-sm;
}

.card-body {
  @apply p-2.5 flex flex-col flex-grow;
}

.card-extra-details {
  @apply flex gap-2 mb-2.5;
}

.card-extra-details {
  @apply text-sm text-[var(--rb-base-color-50)] leading-none;
}

.card-extra-detail:not(:last-child) {
  @apply pr-2 border-r border-[var(--rb-base-color-50)];
}

.card-price {
  @apply text-xl leading-none flex justify-between items-center mb-2.5;
}

.card-status-indicator {
  @apply relative;
}

.card-status-indicator-bullet {
  @apply  w-2.5 h-2.5 rounded-full cursor-pointer bg-[var(--rb-warning-color)] relative hover:after:scale-150;
}

.card-status-indicator-bullet::after {
  @apply w-2.5 h-2.5 absolute bg-[var(--rb-warning-color)] rounded-full -z-10 scale-100 transition-transform duration-200 opacity-40;
}

.card-status-indicator.active .card-status-indicator-bullet {
  @apply bg-[var(--rb-success-color)] after:bg-[var(--rb-success-color)];
}

.card-status-indicator.sold .card-status-indicator-bullet,
.card-status-indicator.closed .card-status-indicator-bullet {
  @apply bg-[var(--rb-danger-color)] after:bg-[var(--rb-danger-color)];
}

.card-status-indicator-tooltip {
  @apply absolute rounded-sm text-white font-light text-xs leading-none capitalize p-1 whitespace-nowrap bottom-6 translate-y-1 left-1/2 -translate-x-1/2 bg-[var(--rb-warning-color)] opacity-0 transition-all duration-200 pointer-events-none;
}

.card-status-indicator-tooltip::after {
  @apply content-[''] block absolute w-2.5 h-2.5 rotate-45 left-1/2 -bottom-1 -z-10 -ml-1 bg-[var(--rb-warning-color)];
}

.card-status-indicator:hover .card-status-indicator-tooltip {
  @apply -translate-x-1/2 translate-y-0 opacity-100;
}

.card-status-indicator.active .card-status-indicator-tooltip {
  @apply bg-[var(--rb-success-color)] after:bg-[var(--rb-success-color)];
}

.card-status-indicator.sold .card-status-indicator-tooltip,
.card-status-indicator.closed .card-status-indicator-tooltip {
  @apply bg-[var(--rb-danger-color)] after:bg-[var(--rb-danger-color)];
}

.card-title {
  @apply hover:text-[var(--rb-first-color)] transition-colors duration-200 mb-2.5;
}

.card-title-link {
  @apply block w-full uppercase text-base text-ellipsis whitespace-nowrap overflow-hidden leading-tight;
}

.card-neighbourhood {
  @apply text-xs w-full whitespace-nowrap overflow-hidden text-ellipsis mb-2.5;
}

.card-tags {
  @apply flex flex-wrap gap-1 mb-2.5;
}

.card-details {
  @apply text-xs flex justify-between items-center;
}

.card-firm {
  @apply w-3/5 overflow-hidden whitespace-nowrap text-ellipsis;
}

.card-date-badge {
  @apply py-1 px-1.5 rounded text-10px leading-none capitalize text-[var(--rb-button-color)] bg-[var(--rb-button-background-color)];
}

.card-date {
  @apply text-10px text-[var(--rb-base-color-60)] capitalize;
}

.card-excerpt {
  @apply text-[var(--rb-base-color-60)];
}

.card .built-date-tag {
  @apply absolute top-2 left-2 z-20 bg-[var(--rb-tag-first-background-color)] text-[var(--rb-tag-first-color)];
}

.card-loading {
  @apply shadow-none block;
}

.card-loading .card-title {
  @apply h-5 bg-light-gray/30 m-2.5 animate-card-loading [animation-delay:2000ms];
}

.card-loading .card-thumbnail {
  @apply h-52 bg-light-gray/15;
}

.card-loading .card-list {
  @apply flex gap-2.5 m-2.5 mb-5;
}

.card-loading .card-list-item {
  @apply w-8 h-4 bg-light-gray/30 animate-card-loading;
}

.card-loading .card-list-item:nth-child(1) {
  @apply [animation-delay:800ms];
}

.card-loading .card-list-item:nth-child(2) {
  @apply [animation-delay:1600ms];
}

.card-loading .card-list-item:nth-child(3) {
  @apply [animation-delay:2000ms];
}

.card-loading .card-line-first {
  @apply h-2.5 m-2.5 bg-light-gray/30 animate-card-loading [animation-delay:2500ms];
}

.card-loading .card-line-second {
  @apply h-4 m-2.5 bg-light-gray/30 animate-card-loading [animation-delay:800ms];
}