@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:      #1a3c5e;
    --navy-dark: #0f2640;
    --navy-mid:  #2a5080;
    --navy-lite: #e8f0fe;
    --gold:      #c8a84b;
    --gold-lite: #fdf6e3;
    --text:      #1a1a1a;
    --muted:     #6b7280;
    --border:    #e2e6ea;
    --bg:        #f4f6f9;
    --white:     #fff;
    --radius:    8px;
    --font:      'Heebo', Arial, sans-serif;
}

/* ===== LAYOUT ===== */
.realeasy-wrap { direction:rtl; font-family:var(--font); max-width:1200px; margin:0 auto; padding:0 16px 60px; }
.re-layout { display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
.re-layout-main  { min-width:0; }
.re-layout-sidebar { position:sticky; top:90px; }

/* ===== FILTERS ===== */
.realeasy-filters {
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin-bottom:20px; padding:12px 16px;
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
}
.realeasy-filters select,
.realeasy-filters input[type="text"] {
    font-family:var(--font); font-size:13px; padding:7px 12px;
    border:1px solid var(--border); border-radius:var(--radius);
    background:var(--bg); color:var(--text); direction:rtl;
}
.realeasy-filters input[type="text"] { flex:1; min-width:140px; }
.re-count { font-size:12px; background:var(--navy); color:#fff; border-radius:20px; padding:3px 12px; margin-right:auto; white-space:nowrap; }

/* ===== GRID ===== */
.realeasy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }

/* ===== CARD ===== */
.re-card {
    background:var(--white); border:1.5px solid var(--border);
    border-radius:14px; overflow:hidden; position:relative;
    transition:box-shadow .2s, border-color .2s, transform .2s;
}
.re-card:hover { box-shadow:0 8px 28px rgba(26,60,94,.11); transform:translateY(-2px); }
.re-card.re-card-selected { border-color:var(--navy); box-shadow:0 0 0 3px rgba(26,60,94,.13); }

.re-select-btn {
    position:absolute; top:10px; left:10px; z-index:2;
    display:flex; align-items:center; gap:5px;
    background:rgba(255,255,255,.92); border:1.5px solid var(--border);
    border-radius:20px; padding:4px 10px; cursor:pointer; font-family:var(--font);
    font-size:12px; font-weight:700; color:var(--muted); transition:all .15s;
}
.re-select-btn:hover  { border-color:var(--navy); color:var(--navy); }
.re-select-btn.selected { background:var(--navy); border-color:var(--navy); color:#fff; }
.re-select-icon { font-size:13px; line-height:1; }

.re-card-img-link { display:block; position:relative; }
.re-card-img      { width:100%; height:160px; object-fit:cover; display:block; }
.re-card-img-ph   { height:160px; background:linear-gradient(135deg,#e8f0fe,#c5d5ec); display:flex; align-items:center; justify-content:center; font-size:44px; }
.re-status        { position:absolute; top:10px; right:10px; background:var(--navy); color:#fff; font-size:11px; font-weight:700; padding:3px 12px; border-radius:20px; }
.re-status.sold   { background:#c0392b; }

.re-card-body   { padding:13px 15px 15px; }
.re-card-title  { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.re-card-title a { color:inherit; text-decoration:none; }
.re-card-title a:hover { color:var(--navy); }
.re-card-addr   { font-size:12px; color:var(--muted); margin-bottom:8px; }
.re-specs       { display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-bottom:8px; }
.re-price       { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:9px; }
.re-docs        { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.re-doc         { font-size:11px; padding:2px 8px; border-radius:20px; border:1px solid var(--border); color:var(--muted); }
.re-doc.has     { border-color:var(--navy); color:var(--navy); background:var(--navy-lite); }
.re-btn-contact {
    display:block; width:100%; padding:8px; background:var(--navy); color:#fff;
    text-align:center; border-radius:var(--radius); font-size:12px; font-weight:700;
    border:none; cursor:pointer; font-family:var(--font); transition:background .15s;
}
.re-btn-contact:hover { background:var(--navy-dark); }
.re-empty { text-align:center; color:var(--muted); padding:40px; }

/* ===== FORM CARD ===== */
.re-form-card {
    background:var(--white); border-radius:18px; overflow:hidden;
    box-shadow:0 8px 40px rgba(26,60,94,.13);
    border:1px solid rgba(26,60,94,.08);
}

.re-form-header {
    background:linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-dark) 100%);
    padding:22px 24px 20px; text-align:center;
}
.re-form-header-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.12); border-radius:20px;
    padding:4px 14px; font-size:11px; color:rgba(255,255,255,.8);
    margin-bottom:10px; letter-spacing:.5px;
}
.re-form-header-title { font-size:20px; font-weight:700; color:#fff; margin-bottom:4px; }
.re-form-header-sub   { font-size:13px; color:rgba(255,255,255,.65); }

.re-form-body { padding:22px 22px 6px; }

/* Section dividers */
.re-section-divider { display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
.re-divider-line    { flex:1; height:1px; background:#e8edf2; }
.re-divider-txt     { font-size:11px; font-weight:700; color:var(--navy); letter-spacing:.5px; white-space:nowrap; }

/* Fields */
.re-field-row   { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.re-field-group { margin-bottom:14px; }
.re-field-label {
    display:block; font-size:11px; font-weight:700;
    color:var(--navy); letter-spacing:.6px; text-transform:uppercase; margin-bottom:6px;
}
.re-field-note { font-weight:400; color:#aaa; letter-spacing:0; text-transform:none; }
.re-req { color:#c0392b; }
.re-field-input {
    display:block; width:100%; padding:11px 14px;
    border:1.5px solid var(--border); border-radius:10px;
    font-size:14px; font-family:var(--font); background:#f8f9fb;
    color:var(--text); direction:rtl; transition:border-color .15s, box-shadow .15s;
    outline:none;
}
.re-field-input:focus { border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(26,60,94,.08); }
textarea.re-field-input { resize:vertical; min-height:80px; }

/* ===== PROPERTY DROPDOWN ===== */
.re-prop-select { position:relative; }
.re-prop-trigger {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 14px; border:1.5px solid var(--border); border-radius:10px;
    background:#f8f9fb; cursor:pointer; font-size:14px;
    transition:border-color .15s; user-select:none;
}
.re-prop-trigger:hover { border-color:var(--navy); }
.re-trigger-placeholder { color:#9ca3af; }
.re-trigger-chevron { font-size:12px; color:#9ca3af; transition:transform .2s; flex-shrink:0; }
.re-badge-count {
    display:inline-flex; align-items:center;
    background:var(--navy); color:#fff; font-size:11px; font-weight:700;
    border-radius:20px; padding:2px 8px; margin-left:6px;
}

.re-prop-dropdown {
    display:none; position:absolute; top:calc(100% + 4px); right:0; left:0;
    background:var(--white); border:1.5px solid var(--border);
    border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.12);
    max-height:260px; overflow-y:auto; z-index:100;
}
.re-prop-dropdown.re-dropdown-open { display:block; }
.re-prop-dropdown::-webkit-scrollbar { width:4px; }
.re-prop-dropdown::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.re-prop-option {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; cursor:pointer; transition:background .1s;
    border-bottom:1px solid #f0f2f5;
}
.re-prop-option:last-child { border-bottom:none; }
.re-prop-option:hover { background:#f4f6f9; }
.re-prop-option.re-option-selected { background:var(--navy-lite); }

.re-option-cb {
    width:18px; height:18px; border-radius:4px; border:2px solid #c8cdd5;
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:#fff; transition:all .12s;
}
.re-prop-option.re-option-selected .re-option-cb { background:var(--navy); border-color:var(--navy); }
.re-prop-option.re-option-selected .re-option-cb::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; }

.re-option-thumb {
    width:38px; height:38px; border-radius:7px; flex-shrink:0; overflow:hidden;
    background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.re-option-thumb img { width:100%; height:100%; object-fit:cover; }
.re-option-info   { flex:1; min-width:0; }
.re-option-name   { font-size:13px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.re-option-addr   { font-size:11px; color:var(--muted); }
.re-option-price  { font-size:11px; color:var(--navy); font-weight:700; }

/* ===== CONSENT ===== */
.re-consent-box   { background:var(--gold-lite); border:1px solid #e8d5a0; border-radius:10px; padding:13px 14px; margin-bottom:16px; }
.re-consent-title { font-size:11px; font-weight:700; color:#7a5c00; letter-spacing:.5px; margin-bottom:10px; }
.re-consent-row   { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:8px; }
.re-consent-row:last-of-type { margin-bottom:0; }
.re-consent-row input { display:none; }
.re-consent-cb {
    width:18px; height:18px; border-radius:4px; border:2px solid var(--gold);
    flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center;
    background:#fff; transition:all .12s;
}
.re-consent-row:has(input:checked) .re-consent-cb { background:var(--gold); border-color:var(--gold); }
.re-consent-row:has(input:checked) .re-consent-cb::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; }
.re-consent-txt  { font-size:12px; color:#5a4200; line-height:1.5; }
.re-consent-note { font-size:10px; color:#9a7c30; margin-top:8px; line-height:1.5; }

/* ===== SUBMIT ===== */
.re-submit-btn {
    display:block; width:100%; padding:14px;
    background:linear-gradient(135deg, var(--navy-mid), var(--navy-dark));
    color:#fff; border:none; border-radius:10px;
    font-size:15px; font-weight:700; font-family:var(--font);
    cursor:pointer; letter-spacing:.3px; margin-bottom:14px; transition:opacity .15s;
}
.re-submit-btn:hover    { opacity:.88; }
.re-submit-btn:disabled { opacity:.55; cursor:default; }

.re-form-msg { padding:12px 14px; border-radius:10px; font-size:13px; line-height:1.5; margin-bottom:14px; }
.re-msg-success { background:#edf7ee; border:1px solid #b6d4b0; color:#1a7431; }
.re-msg-error   { background:#fef0f0; border:1px solid #f5c5c5; color:#c0392b; }

.re-form-footer { padding:12px 22px 18px; text-align:center; border-top:1px solid #f0f2f5; }
.re-footer-wa     { font-size:13px; color:var(--navy); text-decoration:none; font-weight:600; display:block; margin-bottom:6px; }
.re-footer-wa:hover { text-decoration:underline; }
.re-footer-secure { font-size:11px; color:#aaa; }

/* ===== SINGLE PROPERTY ===== */
.re-single-body    { font-family:var(--font); background:var(--bg); color:var(--text); direction:rtl; margin:0; padding:0; }
.re-single-wrap    { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }
.re-breadcrumb     { font-size:13px; color:var(--muted); margin-bottom:16px; }
.re-breadcrumb a   { color:var(--navy); text-decoration:none; }
.re-gallery-main   { position:relative; border-radius:12px; overflow:hidden; background:#dde6f0; margin-bottom:10px; }
#re-main-img       { width:100%; height:420px; object-fit:cover; display:block; }
.re-status-badge   { position:absolute; top:16px; right:16px; background:var(--navy); color:#fff; font-size:13px; font-weight:700; padding:5px 16px; border-radius:20px; }
.re-status-badge.sold { background:#c0392b; }
.re-gallery-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.re-thumb          { width:72px; height:52px; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer; transition:border-color .15s; }
.re-thumb.active,.re-thumb:hover { border-color:var(--navy); }
.re-single-content { display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.re-detail-card    { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px 22px; margin-bottom:16px; }
.re-card-h2        { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.re-prop-type-badge { display:inline-block; font-size:12px; background:var(--navy-lite); color:var(--navy); border-radius:20px; padding:3px 12px; margin-bottom:8px; font-weight:600; }
.re-prop-title     { font-size:22px; font-weight:700; margin-bottom:6px; }
.re-prop-addr      { font-size:14px; color:var(--muted); margin-bottom:14px; }
.re-map-link       { color:var(--navy); font-size:13px; text-decoration:none; }
.re-price-row      { display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--border); padding-top:14px; }
.re-price-label    { font-size:13px; color:var(--muted); }
.re-price-big      { font-size:26px; font-weight:700; color:var(--navy); }
.re-specs-grid     { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.re-spec-item      { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--bg); border-radius:var(--radius); }
.re-spec-label     { font-size:12px; color:var(--muted); }
.re-spec-val       { font-size:15px; font-weight:600; }
.re-desc           { font-size:15px; line-height:1.7; color:#333; }
.re-docs-list      { display:flex; flex-direction:column; gap:10px; }
.re-doc-row        { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); }
.re-doc-row.available { border-color:#b6d4b0; background:#f0f8ef; }
.re-doc-row.missing   { opacity:.6; }
.re-doc-icon       { font-size:18px; }
.re-doc-name       { font-size:14px; font-weight:600; flex:1; }
.re-doc-btn        { font-size:12px; padding:4px 12px; background:var(--navy); color:#fff; border-radius:var(--radius); text-decoration:none; }
.re-doc-na         { font-size:12px; color:var(--muted); }
.re-contact-col    { position:sticky; top:80px; }
.re-contact-card   { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:14px; }
.re-agent-row      { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.re-agent-avatar   { width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.re-agent-name     { font-size:15px; font-weight:700; }
.re-agent-role     { font-size:12px; color:var(--muted); }
.re-contact-note   { font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.6; }
.re-btn            { display:block; width:100%; text-align:center; padding:10px; border-radius:var(--radius); text-decoration:none; font-size:14px; font-weight:700; margin-bottom:8px; transition:opacity .15s; cursor:pointer; }
.re-btn-wa         { background:#25D366; color:#fff; }
.re-btn-phone      { background:var(--navy); color:#fff; }
.re-btn-form       { background:var(--bg); color:var(--navy); border:1px solid var(--border); }
.re-broker-note    { margin-top:12px; font-size:11px; color:var(--muted); text-align:center; }
.re-price-box      { background:var(--navy); color:#fff; border-radius:12px; padding:16px 20px; text-align:center; margin-bottom:12px; }
.re-price-box-label { font-size:12px; opacity:.8; margin-bottom:4px; }
.re-price-box-val  { font-size:22px; font-weight:700; }
.re-back-link      { display:block; text-align:center; font-size:13px; color:var(--navy); text-decoration:none; padding:8px; }

/* ===== RESPONSIVE ===== */
@media (max-width:960px) {
    .re-layout { grid-template-columns:1fr; }
    .re-layout-sidebar { position:static; }
}
@media (max-width:768px) {
    .re-single-content { grid-template-columns:1fr; }
    .re-contact-col { position:static; order:-1; }
    #re-main-img { height:260px; }
    .realeasy-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .realeasy-grid { grid-template-columns:1fr; }
    .re-field-row  { grid-template-columns:1fr; }
    .re-price-big  { font-size:20px; }
}
