/* Stay cards: search results, saved stays and the home page rows.
   A swipeable photo strip with save heart and badges, then place, title,
   facts and price. Markup: App/Views/ads/partials/stay-card.blade.php. */
.stay-card {position: relative; min-width: 0; display: flex; flex-direction: column; color: var(--ink)}
.stay-card.is-leaving {opacity: 0; scale: .96; transition: opacity 240ms ease, scale 240ms ease}
.guest-body .stay-card:hover {translate: none}
.stay-card__media {position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--soft); isolation: isolate}
.stay-card__media::after {content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 22%), transparent 26%, transparent 68%, rgb(0 0 0 / 26%)); pointer-events: none}
.stay-card__photos {height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none}
.stay-card__photos::-webkit-scrollbar {display: none}
.stay-card__photo {width: 100%; height: 100%; flex: 0 0 100%; object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always}
.stay-card.is-map-highlighted .stay-card__media {outline: 3px solid var(--brand); outline-offset: 3px}

.stay-card__badges {position: absolute; z-index: 2; top: 12px; inset-inline-start: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 70px); pointer-events: none}
.stay-card__badge {min-height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; border-radius: 999px; background: rgb(255 255 255 / 95%); color: #2b1d24; font: 700 .72rem/1 var(--font-ui); box-shadow: 0 2px 10px rgb(0 0 0 / 14%)}
.stay-card__badge .ui-icon {width: 13px; height: 13px; fill: #e39a12; stroke: none}
.stay-card__badge--deal {background: var(--home-action); color: var(--home-on-action)}

.stay-card__save {position: absolute; z-index: 3; top: 6px; inset-inline-end: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer}
.stay-card__save .ui-icon {width: 26px; height: 26px; fill: rgb(20 10 15 / 32%); stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 30%)); transition: fill 200ms ease, scale 200ms ease}
.stay-card__save:hover .ui-icon {scale: 1.1}
.stay-card__save.is-saved .ui-icon {fill: #f0285f}
.stay-card__save.is-popping .ui-icon {animation: stay-save-pop 480ms cubic-bezier(.34, 1.56, .64, 1)}
.stay-card__save:disabled {cursor: progress}
@keyframes stay-save-pop {40% {scale: 1.32} 100% {scale: 1}}

.stay-card__nav {position: absolute; z-index: 2; top: 50%; width: 32px; height: 32px; display: grid; place-items: center; margin-top: -16px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 94%); color: #2b1d24; box-shadow: 0 2px 10px rgb(0 0 0 / 18%); opacity: 0; cursor: pointer; transition: opacity 180ms ease, scale 180ms ease}
.stay-card__nav:hover {scale: 1.08}
.stay-card__nav .ui-icon {width: 16px; height: 16px; stroke-width: 2.4}
.stay-card__nav--prev {inset-inline-start: 10px}
.stay-card__nav--next {inset-inline-end: 10px}
.stay-card:hover .stay-card__nav {opacity: 1}
[data-stay-carousel].is-first .stay-card__nav--prev, [data-stay-carousel].is-last .stay-card__nav--next {visibility: hidden}
@media (hover: none) {.stay-card__nav {display: none}}

.stay-card__dots {position: absolute; z-index: 2; bottom: 12px; left: 50%; display: flex; gap: 5px; translate: -50% 0; pointer-events: none}
.stay-card__dots i {width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 58%); transition: background-color 200ms ease, scale 200ms ease}
.stay-card__dots i.is-active {background: #fff; scale: 1.25}

.stay-card__host {position: absolute; z-index: 2; bottom: 10px; inset-inline-start: 10px; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; background: var(--soft); object-fit: cover; box-shadow: 0 2px 10px rgb(0 0 0 / 24%)}
.guest-body .stay-card:hover .stay-card__media .stay-card__host {transform: none}

.stay-card__body {display: grid; gap: 3px; padding: 12px 2px 0; border-radius: 10px; color: inherit; text-decoration: none}
.stay-card__body:focus-visible {outline-offset: 4px}
.stay-card__topline {min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px}
.stay-card__place {min-width: 0; overflow: hidden; color: var(--muted); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis}
.stay-card__rating {display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; color: var(--ink); font-size: .82rem}
.stay-card__rating .ui-icon {width: 14px; height: 14px; fill: #f2a516; stroke: none}
.stay-card__rating b {font-weight: 700}
.stay-card__rating small {color: var(--muted); font-size: .74rem}
.stay-card__rating.is-new {padding: 3px 8px; border-radius: 999px; background: var(--color-success-surface); color: var(--color-success-text); font-size: .7rem; font-weight: 700}
.stay-card__title {margin: 0; overflow: hidden; color: var(--ink-strong); font: 700 1rem/1.55 var(--font-ui); white-space: nowrap; text-overflow: ellipsis; transition: color 180ms ease}
.stay-card__body:hover .stay-card__title {color: var(--brand)}
.stay-card__facts {color: var(--muted); font-size: .82rem}
.stay-card__price {display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin-top: 4px; color: var(--ink)}
.stay-card__price strong {color: var(--ink-strong); font: 800 1.04rem/1.4 var(--font-ui)}
.stay-card__price small {color: var(--muted); font-size: .78rem}
.stay-card__price del {color: var(--muted); font-size: .8rem}

@media (prefers-reduced-motion: reduce) {
    .stay-card__nav, .stay-card__dots i, .stay-card__title {transition: none}
    .stay-card__save .ui-icon {animation: none}
}