.kismet-scope {
  /* Inherit the host page's font (third-party hosts); DM Sans stays loaded as a
     fallback. This sheet is enqueued AFTER kismet-tailwind.css with no dep array, so
     it must also resolve to `inherit` or it re-forces DM Sans on the .kismet-scope
     root and every element consuming these tokens. See docs/ARCHITECTURE-ISSUES.md AI-6. */
  --vr-font-body: inherit;
  --vr-font-heading: inherit;
  font-family: inherit;
  box-sizing: border-box;
}

.kismet-scope *,
.kismet-scope *::before,
.kismet-scope *::after {
  box-sizing: border-box;
}

@media (hover: hover) {
  .kismet-scope [data-kismet-sr="share"],
  /* A favorited heart (data-favorited="true") persists when un-hovered — it opts
     out of this hide. The selector has the same specificity as Tailwind's
     .opacity-100, so it's the :not() exclusion (not !important) that lets the
     liked state win the cascade. Share has no persisted state, so it still hides. */
  .kismet-scope [data-kismet-sr="favorite"]:not([data-favorited="true"]) {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="card"]:hover [data-kismet-sr="share"],
  .kismet-scope [data-kismet-sr="card"]:hover [data-kismet-sr="favorite"],
  .kismet-scope [data-kismet-sr="card"]:focus-within [data-kismet-sr="share"],
  .kismet-scope [data-kismet-sr="card"]:focus-within [data-kismet-sr="favorite"] {
    opacity: 1;
  }

  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Previous image"],
  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Next image"] {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="carousel"]:hover button[aria-label="Previous image"],
  .kismet-scope [data-kismet-sr="carousel"]:hover button[aria-label="Next image"] {
    opacity: 1;
  }

  .kismet-scope [data-kismet-sr="carousel"] [aria-label^="Image "] {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="carousel"]:hover [aria-label^="Image "] {
    opacity: 1;
  }
}

@media (hover: none) {
  .kismet-scope [data-kismet-sr="share"],
  .kismet-scope [data-kismet-sr="favorite"] {
    opacity: 1;
  }

  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Previous image"],
  .kismet-scope [data-kismet-sr="carousel"] button[aria-label="Next image"] {
    opacity: 0;
  }

  .kismet-scope [data-kismet-sr="carousel"] [aria-label^="Image "] {
    opacity: 1;
  }
}

.kismet-scope .bg-black\/25 {
  background-color: rgba(0, 0, 0, 0.25);
}

.kismet-scope .hover\:bg-black\/35:hover {
  background-color: rgba(0, 0, 0, 0.35);
}

.kismet-scope .bg-white\/60 {
  background-color: rgba(255, 255, 255, 0.6);
}

.kismet-scope .hover\:bg-white\/80:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.kismet-scope .bg-white\/50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.kismet-scope .backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.kismet-scope .line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kismet-scope .text-\[10px\] {
  font-size: 10px;
}

.kismet-scope .text-\[11px\] {
  font-size: 11px;
}

.kismet-scope .text-\[12px\] {
  font-size: 12px;
}

.kismet-scope .text-\[13px\] {
  font-size: 13px;
}

.kismet-scope .text-\[15px\] {
  font-size: 15px;
}

.kismet-scope .text-\[17px\] {
  font-size: 17px;
}

.kismet-scope .mt-\[3px\] {
  margin-top: 3px;
}

.kismet-scope .mt-\[5px\] {
  margin-top: 5px;
}

.kismet-scope .px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.kismet-scope .pt-3\.5 {
  padding-top: 0.875rem;
}

.kismet-scope .pb-\[18px\] {
  padding-bottom: 18px;
}

.kismet-scope .gap-\[3px\] {
  gap: 3px;
}

.kismet-scope .border-\[#e5e7eb\] {
  border-color: #e5e7eb;
}

.kismet-scope .hover\:border-\[#374151\]:hover {
  border-color: #374151;
}

.kismet-scope .text-\[#4b5563\] {
  color: #4b5563;
}

.kismet-scope .hover\:text-\[#374151\]:hover {
  color: #374151;
}

.kismet-scope .bg-\[\#ffffff\] {
  background-color: #ffffff;
}

.kismet-scope .bg-\[#f3f4f6\] {
  background-color: #f3f4f6;
}

.kismet-scope .text-\[#4b5563\] {
  color: #4b5563;
}

.kismet-scope .text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.kismet-scope .group-hover\/carousel\:opacity-100:is(.group\/carousel:hover *) {
  opacity: 1;
}

.kismet-scope .aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}

.kismet-scope .leading-\[1\.3\] {
  line-height: 1.3;
}

/* SSR card link hover — mirrors the canonical PropertyCard's default imageZoom hover shadow. */
.kismet-scope a.kismet-card-link {
  transition: box-shadow 0.3s;
}

.kismet-scope a.kismet-card-link:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.kismet-scope .flex-\[0_0_100\%\] {
  flex: 0 0 100%;
}

.kismet-scope .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.kismet-scope .kismet-sr-card-hover {
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.kismet-scope [data-kismet-sr="carousel"] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.kismet-scope [data-kismet-sr="carousel-dot"][aria-current="true"] {
  background-color: white;
}

.kismet-scope [data-kismet-sr="carousel-dot"]:not([aria-current="true"]) {
  background-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 639px) {
  .kismet-scope [data-component="card-badges"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .kismet-scope [data-component="card-badges"]::-webkit-scrollbar {
    display: none;
  }
}