/* ==========================================================================
   * STANDARD PROPERTY CARD COMPONENT
   Full spec: Thumbnail, Heart, Title, Location, Desc, Price,
   Specs (bed/bath/car/area), Metrics (views/saves/inquiries),
   Agent Block (avatar, name, agency, verified, level, call, wa)
   ========================================================================== */
/* ==========================================================================
   HOMENEX GLOBAL UI SYSTEM — Property Card Component (.property-card)
   Supports card-lg and card-sm, each in grid-view (default) and list-view
   ========================================================================== */

/* Base container setup for Container Queries */
.property-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base);
    position: relative;
    cursor: pointer;
    container-type: inline-size;
    height: auto;
}

.agency-ad-card:hover,
.property-card:hover {
    border-color: var(--primary);
}

/* Image section */
.property-card .card-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--surface-container-low);
    flex-shrink: 0;
    width: 100%;
}

.property-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.agency-ad-card img:hover,
.property-card:hover .card-img {
    transform: scale(1.04);
    transition: transform 0.5s ease;
}

/* Overlays inside image wrapper */
.card-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    letter-spacing: 0.04em;
    z-index: 2;
    line-height: 1;
}

.card-tags {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 56px);
    z-index: 2;
}

.card-tags .card-tag {
    position: static;
    text-transform: none;
}

.card-tag.tag-sale,
.card-tag.tag-active,
.card-tag.is-trade,
.managed-property-card__badge.is-trade,
.card-tag.is-status,
.managed-property-card__badge.is-status,
.card-tag.is-dday,
.managed-property-card__badge.is-dday {
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
}

.card-tag.tag-rent {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--surface-container-lowest);
}

.card-tag.tag-neutral,
.card-tag.is-property,
.managed-property-card__badge.is-property {
    background-color: var(--surface-container-highest, #f1f5f9);
    color: var(--on-surface, #334155);
    border: 1px solid var(--outline, #cbd5e1);
}

.card-tag.tag-expired {
    background-color: var(--error);
    color: var(--on-error);
}

.card-tag.tag-hidden,
.card-tag.tag-draft {
    background-color: var(--surface-container-highest);
    color: var(--on-surface-variant);
}

.card-tag.is-status.is-muted,
.managed-property-card__badge.is-status.is-muted {
    background-color: var(--outline, #94a3b8);
    color: #ffffff;
    border: 1px solid var(--outline, #94a3b8);
}

.card-tag.is-single,
.managed-property-card__badge.is-single {
    background-color: var(--error);
    color: var(--error-active-text);
    border: 1px solid var(--error);
}

/* Edit Button Overlay (Hidden by default, shown ONLY under active listings container) */
.property-card .btn-card-edit {
    position: absolute;
    top: 8px;
    right: 44px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--outline-variant);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 2;
    color: var(--on-surface-variant);
}

.active-listings-grid .property-card .btn-card-edit {
    display: flex;
}

.property-card .btn-card-edit:hover {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
}

.property-card .btn-card-edit .material-symbols-outlined {
    font-size: 14px;
}

/* Wishlist Button (.btn-heart) Overlay */
.property-card .btn-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 3;
    color: var(--outline);
    padding: 0;
}

.property-card .btn-heart:hover {
    border-color: var(--error);
    color: var(--error);
    background-color: #ffffff;
}

.property-card .btn-heart.saved,
.property-card .btn-heart.active {
    background-color: #ffffff;
    border-color: var(--error);
    color: var(--error);
}

.property-card .btn-heart.saved .material-symbols-outlined,
.property-card .btn-heart.active .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24 !important;
    margin-top: 2px;
}

.property-card .btn-heart .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--transition-fast);
}

.property-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base);
    position: relative;
    cursor: pointer;
    container-type: inline-size;
    height: auto;
}

/* Gold Zone Badge Overlay (Bottom Right) */
.property-card .gold-zone-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.property-card .gold-zone-badge.hidden {
    display: none !important;
}

.property-card .gold-zone-badge-img {
    height: 38px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.property-card.card-sm .gold-zone-badge-img {
    height: 28px;
    max-width: 65px;
}

/* Card Container Border Highlight for Gold Zone & Push Status */
.property-card.is-gold-zone {
    border-color: #ffd700 !important;
}

.property-card.is-pushed-listing {
    border-color: #2563eb !important;
}

.property-card.is-gold-zone.is-pushed-listing {
    border-color: #ffd700 !important;
}

/* ==========================================================================
   Property Image Overlay Indicators (Gold Zone & Push Status)
   Location: Bottom part of property images (Card & Modal views)
   ========================================================================== */

.property-image-overlays {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

.property-image-overlays.pos-bottom-right {
    justify-content: flex-end;
}

.property-image-overlays.pos-bottom-center {
    justify-content: center;
}

/* Base Badge Style (Glassmorphism Pill) */
.property-overlay-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.property-overlay-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* 1. Gold Zone Badge Style (Gold Gradient) */
.property-overlay-badge.badge--gold-zone {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.92) 0%, rgba(218, 165, 32, 0.95) 100%);
    color: #1a1500;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(218, 165, 32, 0.4);
}

.property-overlay-badge.badge--gold-zone .overlay-badge-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.property-overlay-badge.badge--gold-zone .overlay-badge-icon {
    font-size: 15px;
    color: #1a1500;
}

/* 2. Push Status Badge Style (Vibrant Blue Rocket Gradient) */
.property-overlay-badge.badge--push-status {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92) 0%, rgba(29, 78, 216, 0.95) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.property-overlay-badge.badge--push-status .overlay-badge-icon {
    font-size: 15px;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Swappable Effect Presets (Easily change effects via modifier classes!)
   -------------------------------------------------------------------------- */

/* Preset A: Image Only Effect */
.property-image-overlays.style-image-only .property-overlay-badge {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.property-image-overlays.style-image-only .overlay-badge-text {
    display: none;
}

.property-image-overlays.style-image-only .overlay-badge-img {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Preset B: Minimal Compact Icon Badge */
.property-image-overlays.style-compact .property-overlay-badge {
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 12px;
}

.agency-ad-card:hover,
.property-card:hover {
    border-color: var(--primary);
}

/* Image section */
.property-card .card-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--surface-container-low);
    flex-shrink: 0;
    width: 100%;
}

.property-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.agency-ad-card img:hover,
.property-card:hover .card-img {
    transform: scale(1.04);
    transition: transform 0.5s ease;
}

/* Overlays inside image wrapper */
.card-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    letter-spacing: 0.04em;
    z-index: 2;
    line-height: 1;
}

.card-tags {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 56px);
    z-index: 2;
}

.card-tags .card-tag {
    position: static;
    text-transform: none;
}

.card-tag.tag-sale,
.card-tag.tag-active,
.card-tag.is-trade,
.managed-property-card__badge.is-trade,
.card-tag.is-status,
.managed-property-card__badge.is-status,
.card-tag.is-dday,
.managed-property-card__badge.is-dday {
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
}

.card-tag.tag-rent {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--surface-container-lowest);
}

.card-tag.tag-neutral,
.card-tag.is-property,
.managed-property-card__badge.is-property {
    background-color: var(--surface-container-highest, #f1f5f9);
    color: var(--on-surface, #334155);
    border: 1px solid var(--outline, #cbd5e1);
}

.card-tag.tag-expired {
    background-color: var(--error);
    color: var(--on-error);
}

.card-tag.tag-hidden,
.card-tag.tag-draft {
    background-color: var(--surface-container-highest);
    color: var(--on-surface-variant);
}

.card-tag.is-status.is-muted,
.managed-property-card__badge.is-status.is-muted {
    background-color: var(--outline, #94a3b8);
    color: #ffffff;
    border: 1px solid var(--outline, #94a3b8);
}

.card-tag.is-single,
.managed-property-card__badge.is-single {
    background-color: var(--error);
    color: var(--error-active-text);
    border: 1px solid var(--error);
}

/* Edit Button Overlay (Hidden by default, shown ONLY under active listings container) */
.property-card .btn-card-edit {
    position: absolute;
    top: 8px;
    right: 44px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--outline-variant);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 2;
    color: var(--on-surface-variant);
}

.active-listings-grid .property-card .btn-card-edit {
    display: flex;
}

.property-card .btn-card-edit:hover {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
}

.property-card .btn-card-edit .material-symbols-outlined {
    font-size: 14px;
}

/* Wishlist Button (.btn-heart) Overlay */
.property-card .btn-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 3;
    color: var(--outline);
    padding: 0;
}

.property-card .btn-heart:hover {
    border-color: var(--error);
    color: var(--error);
    background-color: #ffffff;
}

.property-card .btn-heart.saved,
.property-card .btn-heart.active {
    background-color: #ffffff;
    border-color: var(--error);
    color: var(--error);
}

.property-card .btn-heart.saved .material-symbols-outlined,
.property-card .btn-heart.active .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24 !important;
    margin-top: 2px;
}

.property-card .btn-heart .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--transition-fast);
}

.property-card .btn-heart:active .material-symbols-outlined {
    transform: scale(0.85);
}

/* Wishlist Button Resize on Small Cards (.card-sm) */
.property-card.card-sm .btn-heart {
    width: 24px;
    height: 24px;
    top: 8px;
    right: 8px;
}

.property-card.card-sm .btn-heart .material-symbols-outlined {
    font-size: 14px;
}

/* Card Body */
.property-card .card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.property-card .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.property-card .card-title,
.property-card [data-card-title] {
    font-family: 'Lexend', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    max-height: 2.6em;
    flex: 1;
}

/* Exception for card-sm list-view */
.property-card.card-sm.list-view .card-title,
.property-card.card-sm.list-view [data-card-title],
.property-card.list-view.card-sm .card-title,
.property-card.list-view.card-sm [data-card-title] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}

.property-card .card-location {
    font-size: 11px;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
}

.property-card .card-location .material-symbols-outlined {
    font-size: 13px;
    color: var(--primary);
    flex-shrink: 0;
}

.property-card .card-location .location-text,
.property-card .card-location [data-card-location] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    display: inline-block;
}

.property-card .card-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
    line-height: 1.4;
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card .card-price {
    font-family: 'Lexend', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary);
    margin: 2px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--outline-variant);
}

/* Metrics Row */
.property-card .card-metrics {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    flex-wrap: wrap;
}

.property-card .card-metric {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.property-card .card-metric .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    flex: 0 0 auto;
}

.property-card .card-metric .metric-value,
.property-card .card-metric .metric-label {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Agent block */
.property-card .card-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--outline-variant);
    padding-top: 8px;
    margin-top: 4px;
}

.property-card .agent-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    font-size: 14px !important;
    line-height: 32px;
}

.property-card .agent-info {
    flex: 1;
    min-width: 0;
}

.property-card .agent-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card .agent-name .material-symbols-outlined {
    font-size: 12px;
    color: var(--primary);
}

.property-card .agent-meta {
    font-size: 10px;
    color: var(--on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card .agent-actions {
    display: flex;
    gap: 4px;
}

.property-card .btn-agent-contact {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.property-card .btn-agent-contact .material-symbols-outlined {
    font-size: 14px;
}

.property-card .btn-agent-contact .card-messenger-brand-icon {
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}

.property-card .btn-agent-contact .card-messenger-brand-glyph {
    width: 15px;
    height: 15px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.95);
    color: var(--zalo, #0068ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

.property-card .btn-agent-contact .contact-text {
    display: none;
    /* hidden in grid-view by default */
}

/* Specific colors */
.property-card .btn-agent-contact.btn-call {
    color: #ffffff;
    background-color: var(--phone);
    border: 1px solid var(--phone);
}

.property-card .btn-agent-contact.btn-call:hover {
    background-color: var(--phone-hover);
    border-color: var(--phone-hover);
}

.property-card .btn-agent-contact.btn-messenger {
    color: #ffffff;
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

.property-card .btn-agent-contact.btn-messenger:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.property-card .btn-agent-contact.btn-wa,
.property-card .btn-agent-contact.btn-whatsapp {
    color: #ffffff;
    background-color: var(--whatsapp, #25d366);
    border: 1px solid var(--whatsapp, #25d366);
}

.property-card .btn-agent-contact.btn-wa:hover,
.property-card .btn-agent-contact.btn-whatsapp:hover {
    background-color: var(--whatsapp-hover, #128c7e);
    border-color: var(--whatsapp-hover, #128c7e);
}

.property-card .btn-agent-contact.btn-zalo {
    color: #ffffff;
    background-color: var(--zalo, #0068ff);
    border: 1px solid var(--zalo, #0068ff);
}

.property-card .btn-agent-contact.btn-zalo:hover {
    background-color: var(--zalo-hover, #0052cc);
    border-color: var(--zalo-hover, #0052cc);
}

.property-card .btn-agent-contact.btn-line {
    color: #ffffff;
    background-color: var(--line, #06c755);
    border: 1px solid var(--line, #06c755);
}

.property-card .btn-agent-contact.btn-line:hover {
    background-color: var(--line-hover, #05a947);
    border-color: var(--line-hover, #05a947);
}

.property-card .btn-agent-contact.btn-telegram {
    color: #ffffff;
    background-color: var(--telegram, #229ed9);
    border: 1px solid var(--telegram, #229ed9);
}

.property-card .btn-agent-contact.btn-telegram:hover {
    background-color: var(--telegram-hover, #1687bd);
    border-color: var(--telegram-hover, #1687bd);
}

.property-card .btn-agent-contact.btn-email {
    color: #ffffff;
    background-color: var(--email-btn);
    border: 1px solid var(--email-btn);
}

.property-card .btn-agent-contact.btn-email:hover {
    background-color: var(--email-btn-hover);
    border-color: var(--email-btn-hover);
}


/* ==========================================================================
   1. Large Card Modifier (card-lg)
   ========================================================================== */
.property-card.card-lg .card-img-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
    /* height: 180px; */
}

/* ==========================================================================
   2. Small Card Modifier (card-sm)
   ========================================================================== */
.property-card.card-sm {
    height: auto;
}

.property-card.card-sm .card-img-wrap {
    /* aspect-ratio: 21 / 9; 
    height: auto */
    height: 100px;
}

/* Hide agent block, description in card-sm by default */
.property-card.card-sm .card-agent,
.property-card.card-sm .card-desc {
    display: none !important;
}

.property-card.card-sm .card-body {
    padding: 10px 12px;
    gap: 2px;
}

.property-card.card-sm .card-metrics {
    padding-top: 6px;
    margin-top: auto;
    /* justify-content: space-between; */
}

/* Small Card Default (Grid view) logic: Hide text label, only icon + number */
.property-card.card-sm .card-metric .metric-label {
    display: none !important;
}

/* .property-card.card-sm:not(.list-view) .metric-label {
    display: none !important;
} */

/* ==========================================================================
   3. List-View Layout Modifiers (always active — viewport-independent)
   ========================================================================== */

/* Large Horizontal Card: card-lg.list-view */
.property-card.card-lg.list-view {
    flex-direction: row;
}

.property-card.card-lg.list-view .card-img-wrap {
    width: 32%;
    aspect-ratio: 21 / 9;
    height: auto;
}

.property-card.card-lg.grid-view .card-img-wrap {
    width: 32%;
    aspect-ratio: 21 / 9;
    height: auto;
}

.property-card.card-lg.list-view .card-body {
    padding: 14px 16px;
}

/* Small Horizontal Card: card-sm.list-view */
.property-card.card-sm.list-view {
    flex-direction: row;
}

.property-card.card-sm.list-view .card-img-wrap {
    width: 35%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* List-view Grid Constraint: exactly one card per row */


/* ==========================================================================
   4. Desktop Aesthetic Enhancements
      These only apply polish (text labels, multi-line desc) — not layout switches.
   ========================================================================== */
@media (min-width: 590px) {

    /* Show card description in list-view on desktop */
    .property-card.card-lg.list-view .card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

    /* Expand contact buttons to show text label in list-view on desktop */
    .property-card.list-view .btn-agent-contact {
        width: auto;
        height: 32px;
        border-radius: var(--radius-sm);
        padding: 0 12px;
        gap: 6px;
    }

    .property-card.list-view .btn-agent-contact .contact-text {
        display: inline-block;
    }
}

/* Property Highlights */
.amenities-highlight-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.amenity-tag {
    background: var(--secondary-fixed);
    color: var(--on-secondary-fixed);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* agent contact card  */
.agent-contact-cell p:last-child {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}

.agent-contact-cell p.agent-about-text,
#modal-agent-about {
    white-space: pre-line !important;
    word-break: break-word !important;
}

.agent-contact-cell {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.agent-contact-cell div {
    min-width: 0;
}

/* action buttons under the property card */
.pending-payment span {
    color: var(--error);
}

.prop-actions {
    border-top: 1px solid var(--outline-variant);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 16px;
    gap: 8px;
}

.list-view .prop-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.prop-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.prop-action-btn.btn-pay {
    grid-column: span 2;
}

.prop-action-btn .material-symbols-outlined {
    font-size: 14px;
    margin-top: 3px;
}

@media (min-width: 768px) and (max-width: 1388px) {
    .prop-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1389px) {
    .prop-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .prop-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Premium Property Mark Badge (Bling bling goldish color overlay bottom-right) */
.property-card.card-lg .premium-badge-overlay {
    display: none;
}

/* Shown only when card has 'premium' class */
.property-card.card-lg.premium .premium-badge-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: linear-gradient(135deg, var(--premium) 0%, var(--premium-border) 50%, #cc8400 100%);
    color: #000000;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(204, 132, 0, 0.4), 0 0 0 1.5px rgba(255, 215, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.45);
    animation: goldShimmer 2s infinite ease-in-out;
}

.property-card.card-lg.premium .premium-badge-overlay .material-symbols-outlined {
    font-size: 14px;
    font-weight: 700;
}

/* Bling bling goldish color border and glow for the premium card container */
.property-card.card-lg.premium {
    border: 2px solid var(--premium) !important;
    /* box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
    animation: goldBorderGlow 2s infinite ease-in-out; */
}

.property-card.card-lg.premium:hover {
    border-color: var(--premium-border) !important;
}

@keyframes goldBorderGlow {

    0%,
    100% {
        border-color: var(--premium) !important;
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
    }

    50% {
        border-color: var(--premium-border) !important;
        box-shadow: 0 6px 18px rgba(255, 165, 0, 0.5), 0 0 0 1.5px rgba(255, 215, 0, 0.4);
    }
}

@keyframes goldShimmer {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(204, 132, 0, 0.4), 0 0 0 1.5px rgba(255, 215, 0, 0.5);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 2px 14px rgba(255, 215, 0, 0.8), 0 0 0 2.5px rgba(255, 255, 0, 0.8);
        filter: brightness(1.2);
    }
}

/* Badge Design One (Overlapping Crown Circle) */
.property-card.card-lg .badge-design-one {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    background: #111111;
    border: 1.5px solid var(--premium);
    border-radius: 14px;
    padding: 0 10px 0 26px;
    z-index: 3;
    height: 28px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.property-card.card-lg .badge-design-one .badge-icon-wrap {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--premium), var(--premium-border));
    border: 1.5px solid var(--premium);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
}

.property-card.card-lg .badge-design-one .badge-icon-wrap .material-symbols-outlined {
    font-size: 14px;
    color: #000000;
    font-weight: 800;
}

.property-card.card-lg .badge-design-one .badge-text-wrap {
    font-family: 'Lexend', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--premium);
    letter-spacing: 0.05em;
    line-height: 1;
}

/* Badge Design Two (Overlapping Diamond Shield) */
.property-card.card-lg .badge-design-two {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    background: #111111;
    border: 1.5px solid var(--premium);
    border-radius: 14px;
    padding: 0 12px 0 28px;
    z-index: 3;
    height: 28px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.property-card.card-lg .badge-design-two .badge-shield-wrap {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--premium), var(--premium-border));
    border: 1.5px solid var(--premium);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
}

.property-card.card-lg .badge-design-two .badge-shield-wrap .material-symbols-outlined {
    font-size: 14px;
    color: #000000;
    font-weight: 800;
}

.property-card.card-lg .badge-design-two .badge-text-wrap {
    font-family: 'Lexend', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--premium);
    letter-spacing: 0.05em;
    line-height: 1;
}

.property-sample-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 8;
    transform: translate(-50%, -50%) rotate(-17deg);
    color: rgba(220, 38, 38, .78);
    font-size: clamp(18px, 8cqw, 40px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .12em;
    text-shadow: 0 1px 2px rgba(255,255,255,.85);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.property-card.card-sm .property-sample-watermark {
    font-size: clamp(16px, 7cqw, 26px);
    letter-spacing: .08em;
}

.details-main-layout {
    position: relative;
}

.property-sample-ribbon {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 30;
    width: auto;
    padding: 7px 15px;
    background: #dc2626;
    color: #fff;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    text-align: center;
    pointer-events: none;
}

#property-detail-modal .property-sample-ribbon {
    top: 24px;
    right: auto;
    left: -52px;
    width: 190px;
    padding: 8px 0;
    transform: rotate(-45deg);
}

.property-detail-page-content .property-sample-ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: auto;
    left: 0;
    width: 176px;
    height: 42px;
    padding: 0 26px;
    transform: translateY(-66.666%);
    clip-path: polygon(0 0, 12px 50%, 0 100%, 100% 100%, calc(100% - 12px) 50%, 100% 0);
    border: 0;
    border-radius: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 7px, transparent 7px 14px),
        linear-gradient(135deg, #e73535 0%, #b41224 55%, #8f0e1c 100%);
    filter: drop-shadow(0 4px 5px rgba(82, 8, 17, .25));
    box-shadow: none;
}

.property-detail-page-content .details-main-layout {
    padding-top: 0;
}

.property-detail-page-content .property-sample-ribbon::after {
    content: "";
    position: absolute;
    inset: 4px 15px;
    border-top: 1px solid rgba(255, 220, 151, .8);
    border-bottom: 1px solid rgba(255, 220, 151, .8);
}

.property-sample-ribbon span {
    display: block;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .18em;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.property-detail-page-content .property-sample-ribbon span {
    font-size: 17px;
    letter-spacing: .2em;
}

.section-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    gap: 16px;
}

.property-sample-header-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 172px;
    height: 42px;
    padding: 0 30px;
    margin-left: 10px;
    clip-path: polygon(0 0, 12px 50%, 0 100%, 100% 100%, calc(100% - 12px) 50%, 100% 0);
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 7px, transparent 7px 14px),
        linear-gradient(135deg, #e73535 0%, #b41224 55%, #8f0e1c 100%);
    color: #fff;
    filter: drop-shadow(0 4px 5px rgba(82, 8, 17, .25));
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .24em;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.property-sample-header-mark::after {
    content: "";
    position: absolute;
    inset: 4px 15px;
    border-top: 1px solid rgba(255, 220, 151, .8);
    border-bottom: 1px solid rgba(255, 220, 151, .8);
    pointer-events: none;
}

@media (max-width: 767px) {
    .property-sample-header-mark {
        min-width: 132px;
        height: 36px;
        padding: 0 22px;
        margin-left: 0;
        font-size: 15px;
    }

    .property-detail-page-content .property-sample-ribbon {
        top: 0;
        left: 0;
        width: 140px;
        height: 36px;
    }

    .property-detail-page-content .property-sample-ribbon span {
        font-size: 14px;
    }
}

.section-header-actions .btn-return-map {
    margin-left: auto;
}