/* Shared skeleton shimmer (home listings, property detail, panels) */
@keyframes hh-skeleton-shimmer {
    0% {
        background-position: -240px 0;
    }
    100% {
        background-position: calc(100% + 240px) 0;
    }
}

.hh-skeleton-block {
    background: linear-gradient(
        90deg,
        #e9e9e9 0%,
        #f6f6f6 42%,
        #ececec 55%,
        #f6f6f6 68%,
        #e9e9e9 100%
    );
    background-size: 240px 100%;
    animation: hh-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 8px;
}

/* ── Home listing cards ── */
.house-cart--skeleton {
    height: var(--house-card-h);
    background: #fff;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.house-cart--skeleton .hh-skeleton-block {
    animation-delay: calc(var(--skeleton-i, 0) * 0.05s);
}

.hh-skeleton-block--card-image {
    width: 100%;
    height: var(--house-card-image-h);
    border-radius: 0;
}

.house-cart-skeleton-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.house-cart-skeleton-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.hh-skeleton-block--icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.hh-skeleton-block--card-title {
    height: 14px;
    width: 82%;
    margin-inline: auto;
}

.hh-skeleton-block--card-price {
    height: 13px;
    width: 64%;
}

.hh-skeleton-block--card-location {
    height: 12px;
    width: 52%;
}

.hh-skeleton-block--card-cta {
    height: 26px;
    width: 44%;
    margin: 2px auto 0;
    border-radius: 14px;
}

/* ── Property detail page ── */
html.hh-page-loading #property-detail-content,
html.hh-detail-loading #property-detail-content {
    display: none;
}

html.hh-page-loading[data-hh-layout="detail"] #property-detail-skeleton,
html.hh-detail-loading #property-detail-skeleton {
    display: block;
}

#property-detail-skeleton {
    display: none;
}

.property-detail-skeleton-wrap {
    margin-top: 0;
}

.property-detail-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
}

.property-detail-skeleton__gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    min-height: 280px;
}

.hh-skeleton-block--detail-gallery-main {
    height: 100%;
    min-height: 280px;
    border-radius: 12px;
}

.property-detail-skeleton__gallery-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hh-skeleton-block--detail-gallery-thumb {
    flex: 1;
    min-height: 0;
    border-radius: 10px;
}

.hh-skeleton-block--detail-back {
    height: 20px;
    width: 168px;
    border-radius: 6px;
}

.hh-skeleton-block--detail-type {
    height: 18px;
    width: min(72%, 420px);
}

.property-detail-skeleton__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.hh-skeleton-block--detail-price {
    height: 28px;
    width: 180px;
    border-radius: 8px;
}

.property-detail-skeleton__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-skeleton-block--detail-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.hh-skeleton-block--detail-contact {
    width: 108px;
    height: 36px;
    border-radius: 18px;
}

.property-detail-skeleton__specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hh-skeleton-block--detail-spec {
    height: 52px;
    border-radius: 10px;
}

.hh-skeleton-block--detail-address {
    height: 22px;
    width: min(88%, 520px);
}

.property-detail-skeleton__description,
.property-detail-skeleton__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hh-skeleton-block--detail-heading {
    height: 20px;
    width: 220px;
}

.hh-skeleton-block--detail-line {
    height: 14px;
    width: 100%;
}

.hh-skeleton-block--detail-line.hh-skeleton-block--short {
    width: 68%;
}

.property-detail-skeleton__feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hh-skeleton-block--detail-feature {
    height: 44px;
    border-radius: 8px;
}

.hh-skeleton-block--detail-map {
    height: 220px;
    border-radius: 12px;
}

.property-detail-skeleton__contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #eee;
}

.property-detail-skeleton__contact-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hh-skeleton-block--detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}

.property-detail-skeleton__contact-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hh-skeleton-block--detail-form {
    height: 200px;
    border-radius: 10px;
}

@media (max-width: 900px) {
    .property-detail-skeleton__gallery {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hh-skeleton-block--detail-gallery-main {
        min-height: 200px;
    }

    .property-detail-skeleton__gallery-side {
        display: none;
    }

    .property-detail-skeleton__specs {
        grid-template-columns: repeat(2, 1fr);
    }

    .property-detail-skeleton__feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-skeleton-block {
        animation: none;
        background: #ececec;
    }
}