/* ── Real Estate Pro — Frontend Styles ────────────────────────────────────── */
:root {
  --rep-primary:    #0057FA;
  --rep-primary-dk: #0040C1;
  --rep-success:    #059669;
  --rep-warning:    #D97706;
  --rep-danger:     #DC2626;
  --rep-neutral:    #64748B;
  --rep-bg:         #F8FAFC;
  --rep-surface:    #FFFFFF;
  --rep-border:     #E2E8F0;
  --rep-text:       #0F172A;
  --rep-text-muted: #64748B;
  --rep-radius:     10px;
  --rep-shadow:     0 2px 12px rgba(15,23,42,.08);
  --rep-shadow-lg:  0 8px 30px rgba(15,23,42,.12);
  --rep-font:       'Inter', 'Segoe UI', system-ui, sans-serif;
}

.rep-sr-only,
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.rep-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; font-size: 14px;
  font-weight: 500; cursor: pointer; border: 1.5px solid transparent;
  transition: all .18s; text-decoration: none; font-family: var(--rep-font);
  white-space: nowrap;
}
.rep-btn--primary   { background: var(--rep-primary); color: #fff; border-color: var(--rep-primary); }
.rep-btn--primary:hover { background: var(--rep-primary-dk); border-color: var(--rep-primary-dk); color: #fff; }
.rep-btn--outline   { background: transparent; color: var(--rep-primary); border-color: var(--rep-primary); }
.rep-btn--outline:hover { background: var(--rep-primary); color: #fff; }
.rep-btn--ghost     { background: transparent; color: var(--rep-text); border-color: var(--rep-border); }
.rep-btn--ghost:hover { background: var(--rep-bg); }

/* ── Property Grid ────────────────────────────────────────────────────────── */
.rep-property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
}
.rep-grid-cols-1 { grid-template-columns: 1fr; }
.rep-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rep-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .rep-property-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rep-property-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ── Property Card ────────────────────────────────────────────────────────── */
.rep-property-card {
  background: var(--rep-surface);
  border-radius: var(--rep-radius);
  border: 1px solid var(--rep-border);
  box-shadow: var(--rep-shadow);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.rep-property-card:hover { box-shadow: var(--rep-shadow-lg); transform: translateY(-2px); }

.rep-card-image-wrap { display: block; position: relative; overflow: hidden; aspect-ratio: 16/10; }
.rep-card-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.rep-card-image-wrap:hover .rep-card-image { transform: scale(1.04); }
.rep-card-image--placeholder { background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%); display: flex; align-items: center; justify-content: center; }
.rep-card-image--placeholder::after { content: '🏠'; font-size: 48px; opacity: .4; }

.rep-card-status {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.status--sale    { background: #EFF6FF; color: #1D4ED8; }
.status--rent    { background: #ECFDF5; color: #047857; }
.status--sold    { background: #F1F5F9; color: #475569; }
.status--pending { background: #FFFBEB; color: #92400E; }

.rep-card-body   { padding: 16px; flex: 1; }
.rep-card-price  { font-size: 22px; font-weight: 700; color: var(--rep-primary); margin-bottom: 6px; }
.rep-card-title  { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.rep-card-title a { color: var(--rep-text); text-decoration: none; }
.rep-card-title a:hover { color: var(--rep-primary); }
.rep-card-location { font-size: 13px; color: var(--rep-text-muted); display: flex; align-items: center; gap: 5px; margin: 0 0 12px; }
.rep-card-location svg { flex-shrink: 0; color: var(--rep-primary); }

.rep-card-meta  { display: flex; gap: 14px; flex-wrap: wrap; }
.rep-card-meta-item { font-size: 13px; color: var(--rep-text-muted); display: flex; align-items: center; gap: 4px; }

.rep-card-footer { padding: 12px 16px; border-top: 1px solid var(--rep-border); }

/* ── Search Form ──────────────────────────────────────────────────────────── */
.rep-search-form-wrap { background: var(--rep-surface); border-radius: var(--rep-radius); border: 1px solid var(--rep-border); padding: 24px; margin-bottom: 24px; box-shadow: var(--rep-shadow); }
.rep-search-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rep-search-field input, .rep-search-field select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--rep-border); border-radius: 8px; font-size: 14px; font-family: var(--rep-font); color: var(--rep-text); background: var(--rep-bg); transition: border-color .15s; box-sizing: border-box; }
.rep-search-field input:focus, .rep-search-field select:focus { outline: none; border-color: var(--rep-primary); box-shadow: 0 0 0 3px rgba(0,87,250,.12); }
.rep-search-field--range { display: flex; align-items: center; gap: 8px; }
.rep-search-field--range input { min-width: 0; }
.rep-range-sep { color: var(--rep-text-muted); flex-shrink: 0; }
.rep-search-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.rep-search-status { font-size: 13px; color: var(--rep-text-muted); margin-top: 8px; min-height: 20px; }
.rep-search-status.loading::after { content: '…'; animation: rep-dots 1s infinite; }

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.rep-gallery-widget { width: 100%; }
.rep-gallery-main { position: relative; overflow: hidden; border-radius: var(--rep-radius); background: #000; }
.rep-gallery-main-slide { display: none; }
.rep-gallery-main-slide.active { display: block; }
.rep-gallery-main-slide img { width: 100%; height: 420px; object-fit: cover; display: block; }
.rep-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s; z-index: 2; }
.rep-gallery-nav:hover { background: rgba(0,0,0,.75); }
.rep-gallery-prev { left: 12px; }
.rep-gallery-next { right: 12px; }
.rep-gallery-count { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.rep-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.rep-gallery-thumb { cursor: pointer; border-radius: 6px; overflow: hidden; flex-shrink: 0; width: 72px; height: 52px; border: 2px solid transparent; transition: border-color .15s; }
.rep-gallery-thumb.active, .rep-gallery-thumb:hover { border-color: var(--rep-primary); }
.rep-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-virtual-tour-btn { position: absolute; bottom: 12px; left: 12px; background: rgba(0,87,250,.9); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: var(--rep-font); }
.rep-gallery-placeholder { height: 260px; background: var(--rep-bg); border-radius: var(--rep-radius); border: 2px dashed var(--rep-border); display: flex; align-items: center; justify-content: center; color: var(--rep-text-muted); font-size: 14px; }

/* ── Details Table ────────────────────────────────────────────────────────── */
.rep-details-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rep-details-table tr { border-bottom: 1px solid var(--rep-border); }
.rep-details-table tr:last-child { border-bottom: none; }
.rep-dt-label { padding: 12px 14px; color: var(--rep-text-muted); font-weight: 500; width: 40%; }
.rep-dt-value { padding: 12px 14px; color: var(--rep-text); font-weight: 600; }

/* ── Agent Box ────────────────────────────────────────────────────────────── */
.rep-agent-box { background: var(--rep-surface); border: 1px solid var(--rep-border); border-radius: var(--rep-radius); padding: 20px; box-shadow: var(--rep-shadow); margin-bottom: 16px; }
.rep-agent-box--horizontal { display: flex; align-items: center; gap: 16px; }
.rep-agent-box--vertical { text-align: center; }
.rep-agent-box__photo { flex-shrink: 0; }
.rep-agent-box__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.rep-agent-box--vertical .rep-agent-box__img { width: 80px; height: 80px; margin: 0 auto 12px; display: block; }
.rep-agent-box__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--rep-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.rep-agent-box--vertical .rep-agent-box__avatar { margin: 0 auto 12px; }
.rep-agent-box__name { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.rep-agent-box__name a { color: var(--rep-text); text-decoration: none; }
.rep-agent-box__name a:hover { color: var(--rep-primary); }
.rep-agent-box__phone { font-size: 13px; margin: 0 0 12px; }
.rep-agent-box__phone a { color: var(--rep-text-muted); text-decoration: none; }
.rep-agent-box__cta { margin-top: 12px; width: 100%; justify-content: center; }
.rep-agent-box__social { display: flex; gap: 8px; margin: 10px 0; justify-content: flex-start; }
.rep-agent-box--vertical .rep-agent-box__social { justify-content: center; }
.rep-social-link { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; }
.rep-social-link--fb { background: #1877F2; }
.rep-social-link--li { background: #0A66C2; }
.rep-social-link--tw { background: #0F1419; }

/* ── Price Widget ─────────────────────────────────────────────────────────── */
.rep-price-widget-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rep-price-widget { font-size: 32px; font-weight: 700; color: var(--rep-primary); }
.rep-status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }

/* ── Filter Sidebar ───────────────────────────────────────────────────────── */
.rep-filter-sidebar { background: var(--rep-surface); border: 1px solid var(--rep-border); border-radius: var(--rep-radius); padding: 20px; }
.rep-filter-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.rep-filter-group { margin-bottom: 20px; }
.rep-filter-group__label { display: block; font-size: 12px; font-weight: 600; color: var(--rep-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.rep-filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
.rep-filter-checkbox input { cursor: pointer; accent-color: var(--rep-primary); }
.rep-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-filter-pill { padding: 5px 14px; border: 1.5px solid var(--rep-border); border-radius: 20px; font-size: 13px; background: none; cursor: pointer; color: var(--rep-text); transition: all .15s; font-family: var(--rep-font); }
.rep-filter-pill.active, .rep-filter-pill:hover { border-color: var(--rep-primary); color: var(--rep-primary); background: rgba(0,87,250,.05); }
.rep-range-wrap { display: flex; gap: 8px; align-items: center; }
.rep-range-input { flex: 1; padding: 8px 10px; border: 1.5px solid var(--rep-border); border-radius: 6px; font-size: 13px; font-family: var(--rep-font); min-width: 0; }
.rep-filter-apply { width: 100%; justify-content: center; margin-bottom: 8px; }
.rep-filter-reset  { width: 100%; justify-content: center; }

/* ── Single Property ──────────────────────────────────────────────────────── */
.rep-single-property { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }
.rep-single-gallery { margin-bottom: 32px; }
.rep-single-hero-img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--rep-radius); }
.rep-single-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
@media (max-width: 900px) { .rep-single-wrap { grid-template-columns: 1fr; } .rep-single-sidebar { order: -1; } }
.rep-single-header { margin-bottom: 32px; }
.rep-single-title { font-size: 28px; font-weight: 700; margin: 8px 0; }
.rep-single-address { font-size: 14px; color: var(--rep-text-muted); margin: 0 0 12px; }
.rep-single-price { font-size: 36px; font-weight: 800; color: var(--rep-primary); margin-bottom: 16px; }
.rep-single-quick-facts { display: flex; gap: 20px; flex-wrap: wrap; }
.rep-single-quick-facts span { font-size: 15px; color: var(--rep-text-muted); display: flex; align-items: center; gap: 6px; }
.rep-single-description, .rep-single-details, .rep-single-features, .rep-single-floorplan, .rep-single-tour, .rep-single-map { margin-bottom: 36px; }
.rep-single-description h2, .rep-single-details h2, .rep-single-features h2, .rep-single-floorplan h2, .rep-single-tour h2, .rep-single-map h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--rep-border); }
.rep-single-content { font-size: 15px; line-height: 1.75; color: var(--rep-text); }
.rep-features-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rep-feature-item { font-size: 14px; color: var(--rep-text); padding: 8px 12px; background: var(--rep-bg); border-radius: 6px; }
.rep-floorplan-img { max-width: 100%; border-radius: var(--rep-radius); }
.rep-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--rep-radius); }
.rep-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.rep-map { height: 360px; border-radius: var(--rep-radius); background: var(--rep-bg); }
.rep-single-sidebar { position: sticky; top: 24px; align-self: start; }
.rep-sidebar-share { background: var(--rep-surface); border: 1px solid var(--rep-border); border-radius: var(--rep-radius); padding: 16px; }
.rep-sidebar-share h4 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.rep-share-links { display: flex; gap: 8px; }
.rep-share-btn { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; }
.rep-share-btn--fb { background: #1877F2; }
.rep-share-btn--tw { background: #0F1419; }
.rep-share-btn--li { background: #0A66C2; }

/* ── Agents Grid ──────────────────────────────────────────────────────────── */
.rep-agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.rep-agent-card { background: var(--rep-surface); border: 1px solid var(--rep-border); border-radius: var(--rep-radius); overflow: hidden; box-shadow: var(--rep-shadow); text-align: center; }
.rep-agent-photo { padding: 24px 24px 0; }
.rep-agent-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.rep-agent-avatar-placeholder { width: 100px; height: 100px; border-radius: 50%; background: var(--rep-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; margin: 0 auto; }
.rep-agent-info { padding: 16px 20px 20px; }
.rep-agent-name { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.rep-agent-phone, .rep-agent-email { font-size: 13px; color: var(--rep-text-muted); margin: 0 0 8px; }
.rep-agent-phone a, .rep-agent-email a { color: inherit; text-decoration: none; }

/* ── Agent Profile ────────────────────────────────────────────────────────── */
.rep-agent-profile { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.rep-agent-profile__hero { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 40px; background: var(--rep-surface); padding: 32px; border-radius: var(--rep-radius); border: 1px solid var(--rep-border); box-shadow: var(--rep-shadow); }
@media (max-width: 640px) { .rep-agent-profile__hero { flex-direction: column; align-items: center; text-align: center; } }
.rep-agent-profile__photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rep-agent-profile__name { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.rep-agent-profile__license { font-size: 13px; color: var(--rep-text-muted); margin: 0 0 16px; }
.rep-agent-profile__contacts { display: flex; gap: 10px; flex-wrap: wrap; }
.rep-agent-profile__bio { margin-bottom: 36px; }
.rep-agent-profile__bio h2, .rep-agent-profile__listings h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--rep-border); }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.rep-dashboard { max-width: 960px; margin: 0 auto; }
.rep-dashboard__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.rep-dashboard__header h2 { font-size: 22px; font-weight: 700; }
.rep-dashboard-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--rep-surface); border-radius: var(--rep-radius); overflow: hidden; box-shadow: var(--rep-shadow); }
.rep-dashboard-table th { background: var(--rep-bg); padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--rep-text-muted); text-align: left; }
.rep-dashboard-table td { padding: 14px 16px; border-top: 1px solid var(--rep-border); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.rep-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.rep-pagination .page-numbers { padding: 8px 14px; border-radius: 8px; border: 1.5px solid var(--rep-border); text-decoration: none; color: var(--rep-text); font-size: 14px; transition: all .15s; }
.rep-pagination .page-numbers:hover, .rep-pagination .page-numbers.current { background: var(--rep-primary); color: #fff; border-color: var(--rep-primary); }
.rep-pagination .page-numbers.dots { border: none; color: var(--rep-text-muted); }

/* ── Notice / no-results ──────────────────────────────────────────────────── */
.rep-no-results { text-align: center; padding: 48px; color: var(--rep-text-muted); font-size: 15px; }
.rep-notice { padding: 14px 18px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; font-size: 14px; color: #1E40AF; }
.rep-search-hint { text-align: center; padding: 60px 24px; color: var(--rep-text-muted); font-size: 15px; }

/* ── Archive ──────────────────────────────────────────────────────────────── */
.rep-archive-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.rep-archive-header { margin-bottom: 28px; }
.rep-archive-title { font-size: 28px; font-weight: 700; }
.rep-archive-count { font-size: 14px; color: var(--rep-text-muted); margin: 4px 0 0; }

@keyframes rep-dots { 0%,100%{content:'.'} 33%{content:'..'} 66%{content:'...'} }
@keyframes rep-spin { to{transform:rotate(360deg)} }
.rep-loading { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--rep-border); border-top-color: var(--rep-primary); border-radius: 50%; animation: rep-spin .7s linear infinite; }