/* =============================================================
   Property Cards — melk-card
   Variants: default | --sm (sliders) | --horizontal (map popup)
   Tokens come from design-system.css
   ============================================================= */

.melk-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-line);
  overflow: hidden;
  transition: transform var(--ds-normal), box-shadow var(--ds-normal), border-color var(--ds-normal);
  direction: rtl;
  display: flex;
  flex-direction: column;
  font-family: var(--ds-font);
}

.melk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-lg);
  border-color: var(--ds-brand);
}

.property-slider-grid .melk-card,
.fav-slider-grid .melk-card { flex: 0 0 300px; }
@media (max-width: 768px) {
  .property-slider-grid .melk-card,
  .fav-slider-grid .melk-card { flex: 0 0 260px; }
}
@media (max-width: 480px) {
  .property-slider-grid .melk-card,
  .fav-slider-grid .melk-card { flex: 0 0 240px; }
}

/* Snap each card to the row's start so iOS momentum scrolling doesn't
   leave cards half-visible at the leading edge. */
.property-slider-grid,
.fav-slider-grid {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline-start: 1rem;
}
.property-slider-grid .melk-card,
.fav-slider-grid .melk-card {
  scroll-snap-align: start;
}

/* ====== Image section ====== */
.melk-card__image {
  position: relative;
  display: block;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: var(--ds-surface-3);
  color: inherit;
}

/* Bottom scrim — keeps the floor-plan / location buttons legible and
   mutes whatever a low-quality (or placeholder) seed image is doing
   in its bottom strip. Hover slightly intensifies for a touch of
   editorial polish. */
.melk-card__image::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.melk-card:hover .melk-card__image::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.22) 55%,
    rgba(0,0,0,0.65) 100%);
}

.melk-card__slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s var(--ds-ease);
}

.melk-card__slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}
.melk-card__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Property-specific transition — `all` was forcing layout work on every
     hover. transform is the only animated property here. */
  transition: transform 600ms var(--ds-ease), filter 240ms var(--ds-ease);
  /* Near-natural — real listing photos must read true. (Previously
     saturate(0.5) + a teal multiply overlay to mask seeded demo gradients,
     which grayed/tinted genuine photos.) */
  filter: saturate(0.96);
}
.melk-card:hover .melk-card__slide img { transform: scale(1.04); filter: saturate(1.04); }

/* Subtle bottom legibility scrim (no hue shift) for anything overlaid low on
   the image. */
.melk-card__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}
.melk-card:hover .melk-card__slide::after { opacity: 0; }

.melk-card__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ds-fast), transform var(--ds-fast);
  z-index: 5;
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
  box-shadow: var(--ds-shadow-sm);
}
.melk-card__image:hover .melk-card__arrow { opacity: 1; }
.melk-card__arrow--prev { right: 10px; }
.melk-card__arrow--next { left: 10px; }
.melk-card__arrow:hover { transform: translateY(-50%) scale(1.08); }

.melk-card__counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--ds-text-xs);
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  z-index: 5;
  direction: ltr;
  font-weight: 500;
}

/* Image dots indicator (Redfin-style) */
.melk-card__dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 5;
}
.melk-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--ds-fast), transform var(--ds-fast);
}
.melk-card__dot.is-active { background: #fff; transform: scale(1.3); }

/* Overlay icon buttons — sized to meet WCAG 2.5.8 minimum 44×44 touch target. */
.melk-card__btn-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  cursor: pointer;
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
  transition: background var(--ds-fast), transform var(--ds-fast), color var(--ds-fast);
  z-index: 6;
  box-shadow: var(--ds-shadow-sm);
}
.melk-card__btn-glass:hover { background: #fff; transform: scale(1.06); }
/* Per the brand guide, save / favourite uses warm accent orange — not red.
   Red was previously borrowed from the danger token, which signalled
   "delete" rather than "saved". */
.melk-card__btn-glass.is-saved { color: var(--ds-accent); }
.melk-card__btn-glass.is-saved i { font-weight: 900; }

.melk-card__top-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  z-index: 6;
}

.melk-card__bottom-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 6;
}

/* Top-left labels (feature badges) — static stack, no rotation. */
.melk-card__labels {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 60%;
}

.melk-card__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  color: var(--ds-brand-800);
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
}

.melk-card__label i { font-size: 0.85em; }
/* --single is now a no-op (static stacking is the default) but kept for
   template compatibility — the modifier still gets emitted by the partial. */
.melk-card__labels--single { /* no-op */ }

/* Transaction type ribbon badge (appended by templates that need it) */
.melk-card__ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 7;
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  color: #fff;
  box-shadow: var(--ds-shadow-sm);
}
/* Sell uses warm orange so it's visually distinct from the rent (cool blue)
   ribbon — both were ~teal/cyan before and merged at a glance in card grids. */
.melk-card__ribbon--sell { background: var(--ds-accent, #FF8552); color: #fff; }
.melk-card__ribbon--rent { background: var(--ds-rent); }

/* ====== Details section ====== */
.melk-card__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.melk-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.melk-card__feat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  font-weight: 500;
}
.melk-card__feat i {
  font-size: var(--ds-text-xs);
  color: var(--ds-brand);
  width: 14px;
  text-align: center;
}

.melk-card__price {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-black);
  color: var(--ds-brand-800);
  /* Persian numerals don’t benefit from negative tracking; let the font
     space them naturally so the digits stay readable at small card size. */
  line-height: var(--ds-leading-tight);
  font-variant-numeric: tabular-nums;
}

.melk-card__price-sub {
  font-size: var(--ds-text-xs);
  font-weight: 500;
  color: var(--ds-muted);
  margin-top: 2px;
}

/* Tiny tag word that sits next to the deposit / monthly amount.
   Lighter weight + smaller so the number leads the eye, not the noun. */
.melk-card__price-tag {
  font-size: var(--ds-text-xs);
  font-weight: 600;
  color: var(--ds-muted);
  margin-inline-start: 4px;
  vertical-align: 0.1em;
}

.melk-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.melk-card__location i { color: var(--ds-brand); font-size: var(--ds-text-sm); flex-shrink: 0; }

.melk-card__code {
  font-size: var(--ds-text-xs);
  color: var(--ds-muted-2);
  direction: ltr;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Photo-count chip overlaid on the image (Divar-style). Visible always —
   not just on hover — so density-mode users still know how many photos
   exist before they tap in. */
.melk-card__photo-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--ds-text-xs);
  padding: 3px 9px;
  border-radius: var(--ds-radius-pill);
  font-weight: 500;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.melk-card__photo-chip i { font-size: 0.75em; }

/* Trust row — owner-vs-agency badge + relative time + property code.
   Sits as a single dim row above the CTA. The badge color encodes the
   poster type so users can tell direct-owner from agency at a glance. */
.melk-card__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--ds-muted-2, #94A3B8);
  margin-top: -2px;
  margin-bottom: 2px;
}
.melk-card__poster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill, 999px);
  font-weight: 600;
  font-size: 0.7rem;
  white-space: nowrap;
}
.melk-card__poster i { font-size: 0.65rem; }
.melk-card__poster--owner {
  background: rgba(0, 166, 147, 0.1);
  color: var(--ds-brand, #00A693);
}
.melk-card__poster--agency {
  background: rgba(99, 102, 241, 0.1);
  color: #6366F1;
}
.melk-card__poster--builder {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}
.melk-card__time {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.melk-card__time::before {
  content: '';
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.5;
  margin-left: 8px;
}
.melk-card__trust .melk-card__code {
  margin-right: auto;
  font-size: 0.7rem;
}

/* CTA row — single dominant action + optional icon-only call button. */
.melk-card__cta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.melk-card__cta-btn {
  flex: 1;
  padding: 11px 12px;
  border-radius: var(--ds-radius-md);
  border: none;
  font-size: var(--ds-text-sm);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 200ms var(--ds-ease), color 200ms var(--ds-ease), transform 100ms var(--ds-ease);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
}
.melk-card__cta-btn--primary {
  background: var(--ds-brand);
  color: #fff;
}
.melk-card__cta-btn--primary:hover { background: var(--ds-brand-700); color: #fff; }

/* Legacy modifier kept for any callers that still emit a secondary text button. */
.melk-card__cta-btn--secondary {
  background: var(--ds-brand-50);
  color: var(--ds-brand-800);
}
.melk-card__cta-btn--secondary:hover { background: var(--ds-brand-100); }

/* Icon-only call shortcut sitting next to the primary CTA. */
.melk-card__cta-call {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-50);
  color: var(--ds-brand-800);
  text-decoration: none;
  transition: background 200ms var(--ds-ease), color 200ms var(--ds-ease);
  flex-shrink: 0;
}
.melk-card__cta-call:hover { background: var(--ds-brand); color: #fff; }
.melk-card__cta-call i { font-size: 0.95rem; }

/* ====== Variant: --sm (slider card, compact) ====== */
.melk-card--sm .melk-card__image { height: 168px; }
.melk-card--sm .melk-card__body { padding: 12px 12px 14px; gap: 6px; }
.melk-card--sm .melk-card__features {
  gap: 4px 10px;
  /* Limit to one visible row so the card stays predictable; show at most 3 features. */
  max-height: 22px;
  overflow: hidden;
  flex-wrap: nowrap;
}
.melk-card--sm .melk-card__feat { font-size: var(--ds-text-xs); }
.melk-card--sm .melk-card__feat:nth-child(n+4) { display: none; }
.melk-card--sm .melk-card__price { font-size: 1.05rem; }
.melk-card--sm .melk-card__location { font-size: var(--ds-text-xs); }
/* Property code is noisy on a 240-300 px card — hide it on --sm. */
.melk-card--sm .melk-card__code { display: none; }
.melk-card--sm .melk-card__cta-btn { font-size: var(--ds-text-xs); padding: 8px 6px; min-height: 38px; }
.melk-card--sm .melk-card__cta-call { width: 38px; height: 38px; flex: 0 0 38px; }
.melk-card--sm .melk-card__ribbon { font-size: 0.66rem; padding: 3px 9px; }
.melk-card--sm .melk-card__btn-glass { width: 30px; height: 30px; font-size: 0.78rem; }
.melk-card--sm .melk-card__label { font-size: 0.66rem; padding: 3px 8px; }

/* ====== Variant: --horizontal (map popup, list row) ====== */
.melk-card--horizontal {
  flex-direction: row;
}
.melk-card--horizontal .melk-card__image {
  width: 42%;
  height: auto;
  min-height: 140px;
  flex-shrink: 0;
}
.melk-card--horizontal .melk-card__body {
  width: 58%;
  padding: 12px 14px;
}

/* ====== Save Modal (unchanged functionally, just tokens) ====== */
.melk-save-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: var(--ds-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.melk-save-modal-overlay.is-open { display: flex; }

.melk-save-modal {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-xl);
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  direction: rtl;
  animation: melk-modal-enter 0.25s var(--ds-ease);
  box-shadow: var(--ds-shadow-xl);
}
@keyframes melk-modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.melk-save-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ds-line);
}
.melk-save-modal__title {
  font-size: var(--ds-text-lg);
  font-weight: 700;
  color: var(--ds-ink);
}
.melk-save-modal__close {
  background: none;
  border: none;
  font-size: var(--ds-text-lg);
  color: var(--ds-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}
.melk-save-modal__close:hover { background: var(--ds-surface-2); color: var(--ds-ink); }

.melk-save-modal__body { padding: 12px 18px 18px; }

.melk-save-modal__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: background var(--ds-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  font-family: inherit;
  font-size: var(--ds-text-sm);
  color: var(--ds-ink);
}
.melk-save-modal__option:hover { background: var(--ds-surface-2); }
.melk-save-modal__option i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-50);
  color: var(--ds-brand);
  font-size: var(--ds-text-base);
  flex-shrink: 0;
}
.melk-save-modal__option--active i { background: var(--ds-brand); color: #fff; }
.melk-save-modal__option-text { flex: 1; }
.melk-save-modal__option-count { font-size: var(--ds-text-xs); color: var(--ds-muted-2); }

.melk-save-modal__new-folder {
  display: none;
  padding: 10px 12px;
  gap: 8px;
  align-items: center;
}
.melk-save-modal__new-folder.is-open { display: flex; }
.melk-save-modal__new-folder input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  font-family: inherit;
  font-size: var(--ds-text-sm);
  outline: none;
  min-height: 40px;
}
.melk-save-modal__new-folder input:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.12);
}
.melk-save-modal__new-folder button {
  padding: 10px 16px;
  background: var(--ds-brand);
  color: #fff;
  border: none;
  border-radius: var(--ds-radius-md);
  font-family: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.melk-save-modal__new-folder button:hover { background: var(--ds-brand-700); }

/* ====== Toast ====== */
.melk-toast {
  position: fixed;
  /* Lift above the mobile bottom-navbar; on desktop the offset reduces
     to a comfortable 24 px because --ds-bottom-nav-h evaluates the same
     but the bottom-navbar is hidden so visually the toast sits higher. */
  bottom: calc(var(--ds-bottom-nav-h) + var(--ds-safe-bottom) + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ds-ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-sm);
  z-index: var(--ds-z-toast);
  opacity: 0;
  transition: opacity var(--ds-fast), transform var(--ds-fast);
  pointer-events: none;
  font-family: var(--ds-font);
  box-shadow: var(--ds-shadow-lg);
}
@media (min-width: 769px) {
  .melk-toast { bottom: 32px; }
}
.melk-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .melk-card__image { height: 190px; }
  .melk-card__arrow { opacity: 0.85; }
  .melk-card__body { padding: 12px 12px 14px; }
  .melk-card__price { font-size: var(--ds-text-base); }
  .melk-card__cta-btn { font-size: var(--ds-text-sm); min-height: 38px; }
  .property-slider-grid .melk-card { flex: 0 0 230px; }
  .property-slider-grid .melk-card .melk-card__image { height: 150px; }
}

/* Compact phones (≤420 px): the 4-feature row + 2-button cta row would
   overflow with the original gaps. Tighten + force the cta to 2 columns. */
@media (max-width: 420px) {
  .melk-card__features { gap: 4px 10px; }
  .melk-card__feat { font-size: var(--ds-text-xs); }
  .melk-card__feat i { font-size: var(--ds-text-xs); }
  .melk-card__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .melk-card__cta-btn { padding: 8px 4px; min-height: 36px; }
  .melk-card__price { font-size: var(--ds-text-base); }
}

@media (max-width: 480px) {
  .melk-card--horizontal { flex-direction: column; }
  .melk-card--horizontal .melk-card__image,
  .melk-card--horizontal .melk-card__body { width: 100%; }
  .melk-card--horizontal .melk-card__image { height: 180px; min-height: auto; }
}