/* ==========================================================================
   Umonda Property
   Loaded after motors.css, which is the shared vertical UI kit (buttons,
   fields, cards, filters, gallery, admin). Only property-specific styling and
   the Property colour accent live here, scoped under .um-property.
   ========================================================================== */

.um-property {
    /* Deep teal-green instead of Motors' petrol blue, same brand family. */
    --um-m-ink: #10302b;
    --um-m-ink-2: #174a41;
}

.um-phero {
    background:
        radial-gradient(1100px 420px at 90% -20%, rgba(252, 184, 0, .28), transparent 60%),
        radial-gradient(900px 380px at 0% 120%, rgba(50, 136, 163, .45), transparent 60%),
        linear-gradient(160deg, var(--um-m-ink) 0%, var(--um-m-ink-2) 100%);
}

.um-property .um-mcats { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Badges */
.um-mbadge--dark { background: var(--um-m-ink); color: #fff; }
.um-mbadge--verified { background: var(--um-success-tint); color: var(--um-success); }

/* Card extras */
.um-pcard__type { margin: 0; font-size: var(--um-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--um-primary-dark); }
.um-pcard__seller { font-weight: 600; color: var(--um-ink-soft); }
.um-pprice__period { font-size: var(--um-text-md); font-weight: 500; color: var(--um-muted); }

/* Popular areas */
.um-pareas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.um-parea {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--um-surface);
    border: 1px solid var(--um-line); border-radius: var(--um-radius-lg); text-decoration: none !important;
    transition: border-color var(--um-transition), box-shadow var(--um-transition);
}
.um-parea:hover { border-color: var(--um-primary); box-shadow: var(--um-shadow-2); }
.um-parea__name { font-weight: 700; color: var(--um-ink); }
.um-parea__meta { font-size: var(--um-text-sm); color: var(--um-muted); }

/* Detail page */
.um-pamenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.um-pamenities li { display: flex; align-items: center; gap: 10px; }
.um-pamenities i { width: 18px; color: var(--um-primary); text-align: center; }
.um-pvideo { width: 100%; max-height: 460px; border-radius: var(--um-radius-md); background: #000; }
.um-pmap { width: 100%; height: 280px; border: 0; border-radius: var(--um-radius-md); margin: 4px 0 12px; background: var(--um-surface-sunken); }

/* Filters */
.um-mchips--tight { gap: 6px; }
.um-mchips--tight .um-mchip span { padding: 6px 11px; }
.um-pfilter-more summary { cursor: pointer; font-size: var(--um-text-sm); font-weight: 600; color: var(--um-ink-soft); display: flex; align-items: center; gap: 8px; }
.um-pfilter-more[open] summary { margin-bottom: 10px; }
.um-pfilter-more .um-mchecks { max-height: 260px; overflow-y: auto; }

/* Listing form */
[data-field].is-hidden-field, [data-rent-only].is-hidden-field, [data-sale-only].is-hidden-field,
[data-amenities] label.is-hidden-field { display: none !important; }
.um-property .um-minput-action { align-items: center; flex-wrap: wrap; }
.um-pvideo-upload { margin-top: var(--um-space-5); }
.um-pvideo-upload__preview { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.um-pvideo-upload__preview video { width: 100%; max-width: 520px; border-radius: var(--um-radius-md); background: #000; }
.um-mupload__drop--compact { padding: 18px; flex-direction: row; gap: 12px; }
.um-pvideo-upload.is-uploading .um-mupload__drop { opacity: .6; pointer-events: none; }

/* Admin */
.um-ptype .um-mrow-form { row-gap: 8px; }
.um-ptype__fields { flex-basis: 100%; }

@media (max-width: 1199px) {
    .um-property .um-mcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .um-pareas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .um-property .um-mcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .um-pareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .um-pamenities { grid-template-columns: 1fr; }
    .um-pmap { height: 220px; }
    .um-mupload__drop--compact { flex-direction: column; text-align: center; }
}