/* ═══════════════════════════════════════════
   COMPONENTS — Cards, Search, Badges
   ═══════════════════════════════════════════ */

/* ── Property Card ── */
.property-card { display: block; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-card); transition: all var(--duration-normal) var(--ease-out); }
.property-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.property-card__image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.property-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-smooth); }
.property-card:hover .property-card__image img { transform: scale(1.06); }
.property-card__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.property-card__label { position: absolute; top: 12px; right: 12px; }
.property-card__body { padding: var(--space-lg); }
.property-card__type { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-mid); margin-bottom: 6px; }
.property-card__title { font-family: var(--font-display); font-size: 1.125rem; color: var(--text-dark); margin-bottom: 8px; line-height: 1.3; }
.property-card__location { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--space-md); }
.property-card__features { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-light); }
.property-card__feature { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--text-body); }
.property-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-md); border-top: 1px solid var(--border-light); }
.property-card__price { font-family: var(--font-display); font-size: 1.375rem; color: var(--green-deep); }
.property-card__price-currency { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.property-card__cta { font-size: 0.8125rem; font-weight: 600; color: var(--gold); transition: color var(--duration-fast); }
.property-card:hover .property-card__cta { color: var(--green-mid); }

/* Dark bg cards */
.bg-dark .property-card { background: var(--bg-card-dark); border-color: var(--border-dark); }
.bg-dark .property-card__title { color: var(--text-white); }
.bg-dark .property-card__features { border-color: var(--border-dark); }
.bg-dark .property-card__footer { border-color: var(--border-dark); }
.bg-dark .property-card__price { color: var(--gold); }

/* ── Properties Grid ── */
.properties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }

/* ── Zone Card ── */
.zone-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; transition: all var(--duration-normal) var(--ease-out); }
.zone-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.zone-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s var(--ease-smooth); }
.zone-card:hover .zone-card__bg { transform: scale(1.06); }
.zone-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%); }
.zone-card__content { position: relative; z-index: 2; padding: var(--space-lg); }
.zone-card__name { font-family: var(--font-display); font-size: 1.25rem; color: white; margin-bottom: 4px; }
.zone-card__count { font-size: 0.8125rem; color: rgba(255,255,255,0.7); }

/* ── Zones Grid ── */
.zones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }

/* ── Search ── */
.search-bar { display: flex; background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); max-width: 640px; margin: 0 auto; }
.search-bar .form-select { flex: 1; background: transparent; border: none; color: white; padding: 16px 20px; font-size: 0.875rem; border-right: 1px solid rgba(255,255,255,0.08); }
.search-bar .form-select option { background: var(--bg-dark); color: white; }
.search-bar .form-input { flex: 1.2; background: transparent; border: none; color: white; padding: 16px 20px; font-size: 0.875rem; }
.search-bar .form-input::placeholder { color: rgba(255,255,255,0.5); }
.search-bar .btn { border-radius: 0; min-width: 130px; }

/* ── Filters Panel ── */
.properties-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); gap: var(--space-md); }
.filter-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--bg-card); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 600; color: var(--text-body); cursor: pointer; transition: all var(--duration-fast); }
.filter-toggle:hover { border-color: var(--green-mid); color: var(--green-mid); }
.sort-select { padding: 10px 16px; background: var(--bg-card); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); font-size: 0.8125rem; color: var(--text-body); cursor: pointer; }
.filters-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out), padding 0.3s; background: var(--bg-card); border-radius: var(--radius-lg); border: 0 solid var(--border-light); margin-bottom: 0; }
.filters-panel.open { max-height: 400px; padding: var(--space-xl); border-width: 1.5px; margin-bottom: var(--space-xl); }
.filters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-md); }
.filters-panel__actions { display: flex; justify-content: flex-end; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-light); }

/* ── Gallery ── */
.gallery-container { margin-bottom: var(--space-2xl); }
.gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--bg-secondary); }
.gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s var(--ease-smooth); }
.gallery-main img.active { opacity: 1; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; font-size: 1.25rem; cursor: pointer; transition: all var(--duration-fast); color: var(--text-dark); }
.gallery-nav:hover { background: white; box-shadow: var(--shadow-md); }
.gallery-nav--prev { left: 16px; }
.gallery-nav--next { right: 16px; }
.gallery-counter { position: absolute; bottom: 16px; right: 16px; background: rgba(0,0,0,0.6); color: white; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.8125rem; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: var(--space-md); overflow-x: auto; }
.gallery-thumb { width: 80px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; opacity: 0.5; transition: opacity var(--duration-fast); border: 2px solid transparent; flex-shrink: 0; }
.gallery-thumb.active { opacity: 1; border-color: var(--gold); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── Pagination ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-3xl); }
.pagination__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; color: var(--text-body); cursor: pointer; transition: all var(--duration-fast); }
.pagination__btn.active { background: var(--green-deep); color: white; border-color: var(--green-deep); }
.pagination__btn:hover:not(.active) { border-color: var(--green-mid); color: var(--green-mid); }

/* ── Empty State ── */
.empty-state { text-align: center; padding: var(--space-4xl) var(--space-xl); grid-column: 1 / -1; }
.empty-state__title { margin: var(--space-md) 0; }
.empty-state__text { color: var(--text-muted); }