/**
 * Connect WordPress Plugin — Property Card Component
 *
 * Styles for the property card used in search result grids,
 * collection widgets, and split-view layouts.
 *
 * Depends on: variables.css
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-14
 */

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes cwp-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cwp-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes cwp-saveHeart {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   CARD GRID LAYOUT
   ========================================================================== */

.cwp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  width: 100%;
}

@media (min-width: 1536px) {
  .cwp-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1279px) {
  .cwp-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .cwp-card-grid {
    grid-template-columns: 1fr;
    gap: var(--cwp-space-md, 16px);
  }
}

/* ==========================================================================
   CARD CONTAINER
   ========================================================================== */

.cwp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  border-radius: var(--cwp-card-border-radius, 12px);
  border: none;
  overflow: hidden;
  box-shadow: var(--cwp-card-shadow, none);
  cursor: pointer;
  transition: none;
  opacity: 0;
  /* Entrance is opacity-ONLY (no translateY). A persistent transform on a
     hoverable card is a known source of sub-pixel hover jitter ("shaking")
     near the card's edges — the card must carry NO transform at rest so
     hovering can never nudge its box. See the .cwp-card:hover note. */
  animation: cwp-cardIn var(--cwp-duration-normal, 250ms) var(--cwp-ease-out, ease-out) forwards;
}

/* Opacity-only entrance — deliberately transform-free (see .cwp-card). */
@keyframes cwp-cardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cwp-card:hover {
  /* Deliberately NO transform change on hover. The card has a fill-forwards
     entrance animation (cwp-fadeInUp: translateY(12px)→0); toggling the
     transform on hover could disagree with the animation's settled value by
     those 12px, and a hover that shifts the card vertically makes its bottom
     edge jump out from under the cursor → un-hover → drop → re-hover → shake.
     Keep hover affordances to non-geometry properties only (shadow, image zoom
     on the child image, nav buttons). */
  box-shadow: var(--cwp-card-shadow, none);
}

/* --------------------------------------------------------------------------
   Staggered entrance delays (up to 12 cards)
   -------------------------------------------------------------------------- */

.cwp-card:nth-child(1)  { animation-delay: 0ms; }
.cwp-card:nth-child(2)  { animation-delay: 80ms; }
.cwp-card:nth-child(3)  { animation-delay: 160ms; }
.cwp-card:nth-child(4)  { animation-delay: 240ms; }
.cwp-card:nth-child(5)  { animation-delay: 320ms; }
.cwp-card:nth-child(6)  { animation-delay: 400ms; }
.cwp-card:nth-child(7)  { animation-delay: 480ms; }
.cwp-card:nth-child(8)  { animation-delay: 560ms; }
.cwp-card:nth-child(9)  { animation-delay: 640ms; }
.cwp-card:nth-child(10) { animation-delay: 720ms; }
.cwp-card:nth-child(11) { animation-delay: 800ms; }
.cwp-card:nth-child(12) { animation-delay: 880ms; }

/* ==========================================================================
   IMAGE SECTION
   ========================================================================== */

.cwp-card__image,
.cwp-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cwp-card-image-aspect, 4 / 3);
  overflow: hidden;
  background: var(--cwp-surface-alt, #F0F7FA);
  border-radius: var(--cwp-card-border-radius, 12px);
}

/* Image hover overlay — subtle darkening */
.cwp-card__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity var(--cwp-duration-normal, 250ms) var(--cwp-ease-default, ease);
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
}

.cwp-card:hover .cwp-card__image-wrap::after {
  opacity: 1;
}

/* ==========================================================================
   CAROUSEL
   ========================================================================== */

.cwp-card__carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Specificity bump: .cwp-card .cwp-card__carousel-image (0,2,0)
   overrides .cwp-root img { height: auto } (0,1,1) from connect-public.css */
.cwp-card .cwp-card__carousel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform var(--cwp-duration-slow, 400ms) var(--cwp-ease-out, ease-out);
}

.cwp-card:hover .cwp-card__carousel-image {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Carousel Slide Crossfade Animation
   -------------------------------------------------------------------------- */

.cwp-card__slide-enter {
  transition: opacity 300ms ease;
}

.cwp-card__slide-enter-start {
  opacity: 0;
}

.cwp-card__slide-enter-end {
  opacity: 1;
}

.cwp-card__slide-leave {
  transition: opacity 200ms ease;
}

.cwp-card__slide-leave-start {
  opacity: 1;
}

.cwp-card__slide-leave-end {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Carousel Navigation Arrows
   -------------------------------------------------------------------------- */

.cwp-card__carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cwp-radius-full, 9999px);
  border: none;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--cwp-text, #1A2B3C);
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  padding: 0;
  line-height: 1;
  transition: opacity var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease),
              background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease),
              transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease);
}

.cwp-card__carousel-nav--prev {
  left: 8px;
}

.cwp-card__carousel-nav--next {
  right: 8px;
}

.cwp-card:hover .cwp-card__carousel-nav {
  opacity: 1;
}


.cwp-card__carousel-nav:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.05);
}

.cwp-card__carousel-nav:focus-visible {
  opacity: 1;
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, #1B6B93);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
}

.cwp-card__carousel-nav svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Carousel Dots
   -------------------------------------------------------------------------- */

.cwp-card__carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.cwp-card__carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--cwp-radius-full, 9999px);
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease),
              transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease);
}

.cwp-card__carousel-dot--active,
.cwp-card__carousel-dot:hover {
  background: rgba(255, 255, 255, 1);
}

.cwp-card__carousel-dot:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, #1B6B93);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.cwp-card__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--cwp-radius-sm, 4px);
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-caption, 12px);
  font-weight: var(--cwp-weight-medium, 500);
  line-height: var(--cwp-line-height-normal, 1.5);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

.cwp-card__badge--type,
.cwp-card__type {
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #FFFFFF;
}

.cwp-card__badge--superhost,
.cwp-card__superhost {
  top: 42px;
  left: 12px;
  background: var(--cwp-accent, #E8A317);
  color: #FFFFFF;
  font-weight: var(--cwp-weight-bold, 700);
}

.cwp-card__featured {
  /* Overlay the image top-right (the freed save/heart slot). position:absolute
     is required — the .cwp-badge base class only sets display/spacing, not
     positioning, so without this the badge collapses into normal flow and
     effectively disappears. z-index sits above the image/carousel. */
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  /* Gold — matches the admin "featured" star and reads as a premium/featured
     accent regardless of the host's brand colour (a distinct signal rather than
     just another brand-coloured chip). Dark text keeps AA contrast on gold. */
  background: #F5B301;
  color: #4A3600;
  font-weight: var(--cwp-weight-bold, 700);
}

.cwp-card__featured svg {
  flex-shrink: 0;
}

.cwp-card__badge--superhost svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: currentColor;
}

.cwp-card__instant-book {
  top: 12px;
  right: 52px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--cwp-text, #1A2B3C);
  font-weight: var(--cwp-weight-medium, 500);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--cwp-radius-sm, 4px);
}

.cwp-card__instant-book svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  fill: var(--cwp-accent, #E8A317);
}

.cwp-card__badge--urgency,
.cwp-card__urgency {
  bottom: 12px;
  left: 12px;
  background: var(--cwp-urgency-bg, #FEF3C7);
  color: var(--cwp-urgency-text, #92400E);
}

/* ==========================================================================
   SAVE / FAVORITE BUTTON
   ========================================================================== */

.cwp-card__save {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--cwp-radius-full, 9999px);
  background: transparent;
  cursor: pointer;
  transition: transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease);
}

.cwp-card__save:hover {
  transform: scale(1.1);
}

.cwp-card__save:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, #1B6B93);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
}

.cwp-card__save svg {
  width: 20px;
  height: 20px;
  stroke: #FFFFFF;
  stroke-width: 2;
  fill: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: fill var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease),
              stroke var(--cwp-duration-fast, 150ms) var(--cwp-ease-default, ease);
}

/* Saved (active) state */
.cwp-card__save--active svg {
  fill: #FF385C;
  stroke: #FF385C;
}

/* Save animation on toggle */
.cwp-card__save--active {
  animation: cwp-saveHeart var(--cwp-duration-slow, 400ms) var(--cwp-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* --------------------------------------------------------------------------
   Save Button Variants: Grid vs List
   Grid view: show the image-overlay heart, hide the header heart
   List view: swap them (see LIST VIEW section below)
   -------------------------------------------------------------------------- */

.cwp-card__save--list {
  display: none !important;
}

/* ==========================================================================
   CONTENT SECTION
   ========================================================================== */

.cwp-card__content,
.cwp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: var(--cwp-card-padding, 12px 4px 14px);
}

/* --------------------------------------------------------------------------
   Header (Title + Rating)
   -------------------------------------------------------------------------- */

.cwp-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cwp-space-sm, 8px);
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */

.cwp-card__title {
  margin: 0;
  padding: 0;
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-semibold, 600);
  line-height: var(--cwp-line-height-tight, 1.3);
  color: var(--cwp-text, #1A2B3C);
  display: -webkit-box;
  -webkit-line-clamp: 3; /* was 2 — give long / numbered names more room. 2026-07-04 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* Small screens: show the FULL listing name (no clamp) so long / numbered
   titles like "Bermuda Bungalows #5 (Single Room)" aren't cut off. 2026-07-04. */
@media (max-width: 640px) {
  .cwp-card__title {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    text-overflow: clip;
  }
}

.cwp-card__title a {
  color: inherit;
  text-decoration: none;
}

.cwp-card__title a:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, #1B6B93);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
  border-radius: var(--cwp-radius-sm, 4px);
}

/* --------------------------------------------------------------------------
   Rating
   -------------------------------------------------------------------------- */

.cwp-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.cwp-card__rating svg {
  width: 12px;
  height: 12px;
  fill: var(--cwp-accent, #E8A317);
  flex-shrink: 0;
}

.cwp-card__rating span {
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-medium, 500);
  line-height: var(--cwp-line-height-normal, 1.5);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-card__review-count {
  color: var(--cwp-text-secondary, #4A6274) !important;
  font-weight: var(--cwp-weight-regular, 400) !important;
}

/* --------------------------------------------------------------------------
   Location
   -------------------------------------------------------------------------- */

.cwp-card__location {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-regular, 400);
  line-height: var(--cwp-line-height-normal, 1.5);
  color: var(--cwp-text-secondary, #4A6274);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cwp-card__location-icon {
  flex-shrink: 0;
  color: var(--cwp-text-muted, #8899A6);
}

/* --------------------------------------------------------------------------
   Specs (beds, baths, guests)
   -------------------------------------------------------------------------- */

.cwp-card__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
}

.cwp-card__spec,
.cwp-card__specs .cwp-pill {
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-regular, 400);
  line-height: var(--cwp-line-height-normal, 1.5);
  color: var(--cwp-text-secondary, #4A6274);
  /* Override pill chip styling — plain text in cards for alignment */
  background: none;
  padding: 0;
  border-radius: 0;
}

.cwp-card__spec + .cwp-card__spec::before,
.cwp-card__specs .cwp-pill + .cwp-pill::before {
  content: "\00B7";
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Price
   -------------------------------------------------------------------------- */

.cwp-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
}

.cwp-card__price-amount {
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-price, 20px);
  font-weight: var(--cwp-weight-bold, 700);
  line-height: var(--cwp-line-height-tight, 1.2);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-card__price-period,
.cwp-card__price-prefix,
.cwp-card__price-unit {
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-regular, 400);
  line-height: var(--cwp-line-height-normal, 1.5);
  color: var(--cwp-text-secondary, #4A6274);
}

.cwp-card__price-prefix {
  margin-right: 0.3em; /* "from £247" — a word needs a real space before the amount */
}

/* --------------------------------------------------------------------------
   "Calculating total" — a dated search with Live Prices on Search Cards on.
   The card starts in this state (server-rendered by bly_card_price_pending()
   and by CWPCardRenderer) so the guest never sees the nightly estimate first
   and reads it as the price. CWPExactPricing removes the class when the live
   total lands, or when it cannot be fetched (the estimate then shows).
   Same skeleton tokens and keyframes as the loading cards below.
   -------------------------------------------------------------------------- */
.cwp-card__price-loading {
  display: none;
}

.cwp-card--price-pending .cwp-card__price > :not(.cwp-card__price-loading) {
  display: none !important;
}

.cwp-card--price-pending .cwp-card__price-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  line-height: var(--cwp-line-height-normal, 1.5);
  color: var(--cwp-text-secondary, #4A6274);
}

.cwp-card__price-shimmer {
  display: inline-block;
  width: 88px;
  height: 20px;
  border-radius: var(--cwp-radius-sm, 4px);
  background: linear-gradient(
    90deg,
    var(--cwp-skeleton-base, #e8ecef) 0%,
    var(--cwp-skeleton-highlight, #d5dbe0) 40%,
    var(--cwp-skeleton-base, #e8ecef) 80%
  );
  background-size: 200% 100%;
  animation: cwp-shimmer 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cwp-card__price-shimmer {
    animation: none;
  }
}

/* ==========================================================================
   MAP-CARD HIGHLIGHTED STATE
   ========================================================================== */

.cwp-card--highlighted .cwp-card__carousel-nav {
  opacity: 1 !important;
}

/* Subtle image zoom — universal highlight for all cards (single or multi-image) */
.cwp-card--highlighted .cwp-card__carousel-image {
  transform: scale(1.03) !important;
  transition: transform 0.3s ease !important;
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */

.cwp-card--skeleton {
  pointer-events: none;
  /* Override the base .cwp-card fade-in — skeletons must appear instantly
     so the loading state is visible even when AJAX responds quickly.
     !important needed to beat .cwp-card:nth-child(n) animation-delay
     rules (specificity 0,2,0) and any theme interference. */
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

/* Skeleton image placeholder
   Colours use higher-contrast fallbacks (#e8ecef / #d5dbe0) so shimmer
   is clearly visible against the results-panel background (#f7f7f7). */
.cwp-card--skeleton .cwp-card__image-wrap,
.cwp-card--skeleton .cwp-card__skeleton-image {
  background: linear-gradient(
    90deg,
    var(--cwp-skeleton-base, #e8ecef) 0%,
    var(--cwp-skeleton-highlight, #d5dbe0) 40%,
    var(--cwp-skeleton-base, #e8ecef) 80%
  );
  background-size: 200% 100%;
  animation: cwp-shimmer 1.6s ease-in-out infinite;
}

.cwp-card--skeleton .cwp-card__skeleton-image {
  width: 100%;
  height: 100%;
}

/* Hide real card elements that shouldn't appear in skeleton */
.cwp-card--skeleton .cwp-card__carousel,
.cwp-card--skeleton .cwp-card__badge,
.cwp-card--skeleton .cwp-card__save,
.cwp-card--skeleton .cwp-card__carousel-nav,
.cwp-card--skeleton .cwp-card__carousel-dots {
  display: none;
}

/* Skeleton shimmer bars — pure divs, no interactive elements */
.cwp-card__skeleton-bar {
  background: linear-gradient(
    90deg,
    var(--cwp-skeleton-base, #e8ecef) 0%,
    var(--cwp-skeleton-highlight, #d5dbe0) 40%,
    var(--cwp-skeleton-base, #e8ecef) 80%
  );
  background-size: 200% 100%;
  animation: cwp-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--cwp-radius-sm, 4px);
  user-select: none;
}

.cwp-card__skeleton-bar--title {
  width: 75%;
  height: 18px;
  flex: 1 1 auto;
}

.cwp-card__skeleton-bar--rating {
  width: 48px;
  height: 14px;
  flex-shrink: 0;
}

.cwp-card__skeleton-bar--location {
  width: 50%;
  height: 14px;
}

.cwp-card__skeleton-bar--specs {
  width: 65%;
  height: 14px;
}

.cwp-card__skeleton-bar--price {
  width: 30%;
  height: 18px;
  margin-top: 4px;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Tablet: tighter content spacing */
@media (max-width: 1279px) {
  .cwp-card__content,
  .cwp-card__body {
    gap: 2px;
  }
}

/* Tablet portrait: additional refinements */
@media (max-width: 768px) {
  .cwp-card__carousel-nav {
    width: 32px;
    height: 32px;
    opacity: 1;
  }

  .cwp-card__content,
  .cwp-card__body {
    padding: 12px 14px 14px;
  }
}

/* Mobile: full-width cards with larger touch targets */
@media (max-width: 639px) {
  .cwp-card__carousel-nav {
    width: 36px;
    height: 36px;
    opacity: 1;
  }

  .cwp-card__carousel-nav svg {
    width: 16px;
    height: 16px;
  }

  .cwp-card__carousel-dot {
    width: 7px;
    height: 7px;
  }

  .cwp-card__save {
    width: 36px;
    height: 36px;
  }

  .cwp-card__save svg {
    width: 22px;
    height: 22px;
  }

  .cwp-card__content,
  .cwp-card__body {
    padding: 12px 12px 14px;
    gap: 2px;
  }

  .cwp-card__title {
    font-size: 14px;
  }

  .cwp-card__price-amount {
    font-size: 18px;
  }
}

/* Small mobile: compact cards */
@media (max-width: 480px) {
  .cwp-card-grid {
    gap: 12px;
  }

  .cwp-card__content,
  .cwp-card__body {
    padding: 10px 10px 12px;
  }

  .cwp-card__badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* Touch devices: disable hover transform for better UX */
@media (hover: none) {
  .cwp-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   ACCESSIBILITY — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cwp-card {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .cwp-card,
  .cwp-card__carousel-nav,
  .cwp-card__carousel-dot,
  .cwp-card__save,
  .cwp-card__save svg {
    transition: none;
  }

  .cwp-card__slide-enter,
  .cwp-card__slide-leave {
    transition: none;
  }

  .cwp-card:hover {
    transform: none;
  }

  .cwp-card__save--active {
    animation: none;
  }

  .cwp-card--skeleton .cwp-card__image-wrap,
  .cwp-card--skeleton .cwp-card__skeleton-image,
  .cwp-card__skeleton-bar {
    animation: none;
    background: var(--cwp-skeleton-base, #e8ecef);
  }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (forced-colors: active) {
  .cwp-card {
    border: 1px solid ButtonText;
  }

  .cwp-card__carousel-nav {
    border: 1px solid ButtonText;
  }

  .cwp-card__badge {
    border: 1px solid ButtonText;
  }

  .cwp-card__save svg {
    stroke: ButtonText;
    filter: none;
  }

  .cwp-card__save--active svg {
    fill: Highlight;
    stroke: Highlight;
  }
}


/* ==========================================================================
   VIEW MODE TOGGLE
   Uses !important to override theme reset CSS (all: revert) on buttons.
   ========================================================================== */

.cwp-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  background: var(--cwp-surface-alt, #f5f5f5) !important;
  border-radius: 8px !important;
  border: 1px solid var(--cwp-border, #e0e0e0) !important;
}

.cwp-view-toggle__btn {
  all: revert !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cwp-text-muted, #999) !important;
  cursor: pointer !important;
  transition: color 150ms ease, background-color 150ms ease !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.cwp-view-toggle__btn:hover {
  color: var(--cwp-text-secondary, #666) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.cwp-view-toggle__btn--active {
  color: var(--cwp-text, #1a1a1a) !important;
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.cwp-view-toggle__btn--active:hover {
  color: var(--cwp-text, #1a1a1a) !important;
  background: #fff !important;
  background-color: #fff !important;
}

.cwp-view-toggle__btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}


/* ==========================================================================
   LIST VIEW — Grid becomes single-column stacked rows (Plum Guide style)
   ========================================================================== */

.cwp-property-grid--list {
  grid-template-columns: 1fr !important;
  gap: 0;
}

/* List view cards: horizontal layout with clean divider lines */
.cwp-property-grid--list .cwp-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  gap: 0 16px;
  max-width: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--cwp-border, #ececec);
  box-shadow: none;
  overflow: hidden;
  padding: 16px 0;
}

/* First card: add top border */
.cwp-property-grid--list .cwp-card:first-child {
  border-top: 1px solid var(--cwp-border, #ececec);
}

/* List view: no lift on hover, no background change (no transform — see the
   .cwp-card:hover note; a hover transform can shift the card and cause an
   edge-hover shake). */
.cwp-property-grid--list .cwp-card:hover {
  box-shadow: none;
  border-color: var(--cwp-border, #ececec);
  background: transparent;
}

/* List view: no entrance animation (prevents layout shift) */
.cwp-property-grid--list .cwp-card {
  opacity: 1;
  animation: none;
}

/* List view image: fill the left column, 3:2 aspect ratio like Plum Guide */
.cwp-property-grid--list .cwp-card__image-wrap {
  aspect-ratio: 3 / 2;
  height: 100%;
  min-height: 0;
  max-height: none;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  align-self: stretch;
}

.cwp-property-grid--list .cwp-card__carousel {
  height: 100%;
}

.cwp-property-grid--list .cwp-card__carousel-image {
  height: 100%;
  object-fit: cover;
}

/* No image hover zoom in list view */
.cwp-property-grid--list .cwp-card:hover .cwp-card__carousel-image {
  transform: none;
}

/* No dark overlay on hover in list view */
.cwp-property-grid--list .cwp-card:hover .cwp-card__image-wrap::after {
  opacity: 0;
}

/* List view body: title anchored to top, price pinned to bottom.
 * 2026-06-11 — Switched from `justify-content: center` so hosts who
 * hide the nightly rate via Settings → Appearance get a sensibly
 * top-aligned title instead of one floating in the vertical middle.
 * The price keeps its visual position thanks to `margin-top: auto`
 * below, so layout with price ON is identical to before. */
.cwp-property-grid--list .cwp-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px 8px 4px 0;
  gap: 6px;
  position: relative;
}

/* Pin the price to the bottom of the body so toggling its visibility
 * doesn't pull the title down. Only applies in list view — grid cards
 * already stack tightly. */
.cwp-property-grid--list .cwp-card__price {
  margin-top: auto;
}

/* List view header: title + heart side by side, rating wraps below */
.cwp-property-grid--list .cwp-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
  justify-content: space-between;
}

/* Rating goes to its own row in list view */
.cwp-property-grid--list .cwp-card__rating {
  order: 3;
  width: 100%;
}

/* List view title: 2 lines max, display font, Plum Guide style */
.cwp-property-grid--list .cwp-card__title {
  font-family: var(--cwp-font-display);
  font-size: 19px;
  font-weight: var(--cwp-weight-semibold, 600);
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  flex: 1 1 0;
  min-width: 0;
}

/* List view: hide image-overlay heart, show header heart
   Uses !important to override reset.css .cwp-root .cwp-card__save rules */
.cwp-property-grid--list .cwp-card__save--grid {
  display: none !important;
}

.cwp-property-grid--list .cwp-card__save--list {
  display: flex !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
  width: 32px !important;
  height: 32px !important;
  filter: none !important;
  color: var(--cwp-text-secondary, #6a6a6a) !important;
}

.cwp-property-grid--list .cwp-card__save--list svg {
  stroke: var(--cwp-text-secondary, #6a6a6a) !important;
  stroke-width: 1.5 !important;
  fill: transparent !important;
  filter: none !important;
}

.cwp-property-grid--list .cwp-card__save--list svg path {
  stroke: var(--cwp-text-secondary, #6a6a6a) !important;
  fill: transparent !important;
}

.cwp-property-grid--list .cwp-card__save--list:hover {
  color: #FF385C !important;
}

.cwp-property-grid--list .cwp-card__save--list:hover svg,
.cwp-property-grid--list .cwp-card__save--list:hover svg path {
  stroke: #FF385C !important;
}

.cwp-property-grid--list .cwp-card__save--list.cwp-card__save--active svg,
.cwp-property-grid--list .cwp-card__save--list.cwp-card__save--active svg path {
  fill: #FF385C !important;
  stroke: #FF385C !important;
}

/* List view: location — readable size, secondary color */
.cwp-property-grid--list .cwp-card__location {
  font-size: 14px;
  color: var(--cwp-text-secondary, #6a6a6a);
  margin: 2px 0;
}

/* List view specs: inline text with dot separators (Plum Guide style) */
.cwp-property-grid--list .cwp-card__specs {
  gap: 2px;
  margin-top: 6px;
}

.cwp-property-grid--list .cwp-pill {
  padding: 0;
  background: none;
  font-size: 14px;
  font-weight: var(--cwp-weight-medium, 500);
  color: var(--cwp-text, #222);
}

/* Dot separator between list-view specs */
.cwp-property-grid--list .cwp-pill + .cwp-pill::before {
  content: '\2022';
  margin: 0 6px 0 4px;
  color: var(--cwp-text-muted, #999);
}

/* List view price */
.cwp-property-grid--list .cwp-card__price {
  margin-top: auto;
  padding-top: 8px;
}

.cwp-property-grid--list .cwp-card__price-amount {
  font-size: 18px;
}

/* List view: type badge — bordered pill style (Plum Guide) */
.cwp-property-grid--list .cwp-card__type {
  display: inline-flex;
  font-size: 11px;
  font-weight: var(--cwp-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--cwp-border, #ececec);
  background: var(--cwp-surface, #fff);
  color: var(--cwp-text-secondary, #6a6a6a);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* List view: rating — consistent sizing */
.cwp-property-grid--list .cwp-card__rating {
  font-size: 13px;
}

/* List view: hide carousel nav arrows (cleaner look)
   Uses !important to override reset.css .cwp-root .cwp-card__carousel-nav { display: flex !important } */
/* List view: show carousel nav on hover (same as grid view) */
.cwp-property-grid--list .cwp-card__carousel-nav {
  display: flex !important;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cwp-property-grid--list .cwp-card:hover .cwp-card__carousel-nav {
  opacity: 1 !important;
}

/* List view: show carousel dots */
.cwp-property-grid--list .cwp-card__carousel-dots {
  display: flex !important;
}

/* List view skeleton */
.cwp-property-grid--list .cwp-card--skeleton {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  gap: 0 16px;
  max-width: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--cwp-border, #ececec);
  box-shadow: none;
  opacity: 1;
  animation: none;
  padding: 16px 0;
}

.cwp-property-grid--list .cwp-card--skeleton:first-child {
  border-top: 1px solid var(--cwp-border, #ececec);
}

.cwp-property-grid--list .cwp-card--skeleton .cwp-card__image-wrap {
  aspect-ratio: 4 / 3;
  height: 100%;
  min-height: 0;
  border-radius: 12px;
  margin: 0;
}

.cwp-property-grid--list .cwp-card--skeleton .cwp-card__skeleton-image {
  height: 100%;
  border-radius: 12px;
}

.cwp-property-grid--list .cwp-card--skeleton .cwp-card__body {
  padding: 4px 8px 4px 0;
}


/* ==========================================================================
   LIST VIEW — Responsive
   ========================================================================== */

@media (max-width: 1279px) {
  .cwp-property-grid--list .cwp-card {
    grid-template-columns: 240px 1fr;
  }

  .cwp-property-grid--list .cwp-card--skeleton {
    grid-template-columns: 240px 1fr;
  }
}

/* Tablet: list view gets wider image column (no split view, full-width results) */
@media (min-width: 768px) and (max-width: 1024px) {
  .cwp-property-grid--list .cwp-card {
    grid-template-columns: 320px 1fr;
  }

  .cwp-property-grid--list .cwp-card--skeleton {
    grid-template-columns: 320px 1fr;
  }
}

/* On mobile, list view reverts to stacked cards */
@media (max-width: 767px) {
  .cwp-property-grid--list .cwp-card {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    border-radius: var(--cwp-card-border-radius, 12px);
    border: 1px solid var(--cwp-border, #ececec);
    border-bottom: 1px solid var(--cwp-border, #ececec);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    overflow: hidden;
    padding: 0;
    gap: 0;
  }

  .cwp-property-grid--list .cwp-card:first-child {
    border-top: 1px solid var(--cwp-border, #ececec);
  }

  .cwp-property-grid--list .cwp-card__image-wrap {
    aspect-ratio: var(--cwp-card-image-aspect, 4/3);
    height: auto;
    min-height: auto;
    max-height: none;
    border-radius: 0;
    margin: 0;
  }

  .cwp-property-grid--list .cwp-card__body {
    padding: 14px 16px 18px;
  }

  /* Restore grid heart on mobile, hide list heart */
  .cwp-property-grid--list .cwp-card__save--grid {
    display: flex !important;
  }

  .cwp-property-grid--list .cwp-card__save--list {
    display: none !important;
  }

  /* Show carousel nav and dots on mobile */
  .cwp-property-grid--list .cwp-card__carousel-nav {
    display: flex;
  }

  .cwp-property-grid--list .cwp-card__carousel-dots {
    display: flex;
  }

  /* Show type badge again on mobile */
  .cwp-property-grid--list .cwp-card__type {
    display: inline-flex;
  }

  /* Rating back to inline on mobile */
  .cwp-property-grid--list .cwp-card__rating {
    order: unset;
    width: auto;
  }

  /* Restore entrance animation on mobile (opacity-only — see .cwp-card) */
  .cwp-property-grid--list .cwp-card {
    opacity: 0;
    animation: cwp-cardIn var(--cwp-duration-normal, 250ms) var(--cwp-ease-out, ease-out) forwards;
  }

  .cwp-property-grid--list .cwp-card--skeleton {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    border-radius: var(--cwp-card-border-radius, 12px);
    border: 1px solid var(--cwp-border, #ececec);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    overflow: hidden;
  }

  .cwp-property-grid--list .cwp-card--skeleton .cwp-card__image-wrap {
    aspect-ratio: var(--cwp-card-image-aspect, 4/3);
    height: auto;
    min-height: auto;
    border-radius: 0;
    margin: 0;
  }
}


/* ==========================================================================
   Ultra-Wide — ≥ 1920px
   ========================================================================== */
@media (min-width: 1920px) {
  /* Grid: keep 4 columns but let cards breathe */
  .cwp-card-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }

  /* Card images: taller for better proportions on large screens */
  .cwp-card__image-wrap {
    min-height: 240px;
  }

  /* Typography: slight bump for readability */
  .cwp-card__title {
    font-size: 16px;
  }

  .cwp-card__price-amount {
    font-size: 22px;
  }

  .cwp-card__location {
    font-size: 14px;
  }

  .cwp-card__detail {
    font-size: 13px;
  }

  /* Content padding: more room */
  .cwp-card__content {
    padding: 16px 18px;
  }

  /* List view: wider image column */
  .cwp-property-grid--list .cwp-card {
    grid-template-columns: 380px 1fr;
  }

  .cwp-property-grid--list .cwp-card__image-wrap {
    min-height: 220px;
  }
}