/* =========================
   الأساس العام + تسجيل الدخول + الشريط العلوي
========================= */
:root {
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --primary-soft: rgba(124,58,237,.18);
  --secondary: #2563eb;
  --accent: #f59e0b;
  --accent-soft: rgba(245,158,11,.16);
  --bg: rgba(248,250,252,.95);
  --card: rgba(255,255,255,.22);
  --border: rgba(15,23,42,.12);
  --text: #111827;
  --muted: rgba(15,23,42,.55);
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --gray: #64748b;
  --shadow: 0 22px 55px rgba(15,23,42,.15), inset 0 1px 1px rgba(255,255,255,.48);
  --shadow-hover: 0 28px 75px rgba(37,99,235,.18), 0 0 35px rgba(124,58,237,.14);
  --radius: 24px;
  --topbar-height: 96px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 28%),
              radial-gradient(circle at bottom right, rgba(219,234,254,.72), transparent 32%),
              linear-gradient(135deg, rgba(248,250,252,1), rgba(226,232,240,1)) !important;
  color: var(--text) !important;
  direction: rtl;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(255,255,255,.65), transparent 80%);
  z-index: -1;
}
button, input, select, textarea { font-family: inherit; }
button { user-select: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* صفحة التحميل */
.loading-page { position: absolute; inset: 0; z-index: -1 !important; pointer-events: none; opacity: 0; background: transparent !important; }
.auth-page { background: transparent !important; }
.loading-card, .auth-card { color: #111827 !important; border-radius: 32px !important; backdrop-filter: blur(28px); }
.loading-card { width: 360px; max-width: 100%; padding: 28px; text-align: center; background: transparent !important; border: none !important; box-shadow: none !important; }
.auth-card { width: 100%; max-width: 420px; padding: 32px; position: relative; background: rgba(15,23,42,.88) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 35px 85px rgba(0,0,0,.58), inset 0 1px 1px rgba(255,255,255,.12) !important; }
.loading-card h2 { margin: 12px 0 8px; color: var(--primary); }
.loading-card p { margin: 0; color: var(--muted); }
.loading-spinner { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; border: 5px solid rgba(124,58,237,.18); border-top-color: var(--primary); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* صفحة الدخول */
.auth-page { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); padding: 18px; }
.auth-logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, #7c3aed, #2563eb) !important; box-shadow: 0 18px 40px rgba(124,58,237,.42) !important; color: #fff; }
.auth-close-btn { position:absolute; top:18px; left:18px; width:36px; height:36px; border:none; background:rgba(255,255,255,.08); border-radius:50%; color:#fff; font-size:22px; cursor:pointer; transition:.2s ease; }
.auth-close-btn:hover { background:rgba(255,255,255,.16); }
.auth-card h2 { margin: 0 0 8px; color: #fff; font-size: 1.55rem; text-shadow: 0 0 18px rgba(124,58,237,.35); }
.auth-subtitle { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.auth-card input, .auth-card button { width: 100%; border-radius: 13px; border: 1px solid rgba(15,23,42,.12); padding: 13px; margin: 8px 0; background: rgba(255,255,255,.92); color: #111827; }
.auth-card input { background: rgba(255,255,255,.92); }
.auth-card input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.auth-card button { border: none; cursor: pointer; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 8px 18px rgba(124,58,237,.18); }
.auth-card button:hover { transform: translateY(-1px); }
.google-btn { background: linear-gradient(135deg, #db4437, #b8271d) !important; }
.toggle-link { margin-bottom: 0; color: var(--primary); cursor: pointer; font-size: 14px; font-weight: 700; }

/* الشريط العلوي */
.app-shell { min-height:100vh; }
.topbar { position: sticky; top: 0; z-index: 2000; background: rgba(255,255,255,.72) !important; border-bottom: 1px solid rgba(15,23,42,.08) !important; padding: 12px 16px; box-shadow: 0 14px 36px rgba(15,23,42,.12) !important; backdrop-filter: blur(20px); overflow: visible; }
.brand-area { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.brand-block { display: flex; flex-direction: column; gap: 2px; }
.brand-title { font-size: 1.35rem; font-weight: 900; color: #111827; letter-spacing: -0.3px; }
.brand-subtitle { color: var(--muted); font-size: 13px; font-weight: 600; }
.user-greeting { color: #111827; font-size: .95rem; font-weight: 800; background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.18); padding: 8px 12px; border-radius: 999px; }
.menu-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border: none; padding: 10px 14px; border-radius: 10px; font-size: 18px; cursor: pointer; transition: .3s; }
.menu-btn:hover { background: linear-gradient(135deg, #5b21b6, #7c3aed); transform: scale(1.05); }
.add-btn { display: inline-flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c3aed, #2563eb); color: white; border: none; width: 42px; height: 42px; border-radius: 14px; font-size: 18px; font-weight: bold; cursor: pointer; transition: .3s; }
.add-btn:hover { transform: scale(1.08); box-shadow: 0 18px 42px rgba(124,58,237,.35); }
.add-btn.hidden { display: none !important; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn { min-width: 46px; width: 46px; height: 46px; padding: 0; font-size: 20px; border-radius: 14px; }

/* القوائم المنسدلة */
.dropdown-panel { display: none; position: fixed; top: 110px; left: 16px; right: 16px; background: rgba(255,255,255,.86); border: 1px solid rgba(15,23,42,.08); border-radius: 24px; box-shadow: var(--shadow-hover); padding: 14px; z-index: 3000; animation: dropdownFade .18s ease; max-height: 80vh; overflow-y: auto; }
@keyframes dropdownFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-panel.show { display: block; }
.dropdown-panel .btn.small { width: 100%; margin-bottom: 8px; justify-content: center; }
.filters-panel input, .filters-panel select { width: 100%; border: 1px solid rgba(15,23,42,.12); border-radius: 12px; padding: 12px; margin-bottom: 8px; background: rgba(255,255,255,.9); color: #111827; }
.price-range { display: flex; gap: 8px; }
.price-range input { flex: 1; }
.pricing-star-btn { width: 46px; height: 46px; border: none; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #3b2600; font-size: 23px; cursor: pointer; box-shadow: 0 8px 20px rgba(245,158,11,.35); transition: .2s ease; }
.pricing-star-btn:hover { transform: scale(1.08) rotate(8deg); }

/* الأزرار */
.btn { border: none; border-radius: 16px; color: #fff; cursor: pointer; font-weight: 850; transition: .22s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 14px 30px rgba(37,99,235,.32); }
.btn:hover { transform: translateY(-1px); opacity: .98; box-shadow: 0 18px 42px rgba(124,58,237,.45); }
.btn:active { transform: translateY(0); }
.btn.small { padding: 9px 14px; font-size: 13px; }
.btn.full { width: 100%; padding: 12px 14px; }
.btn.success { background: linear-gradient(135deg, #22c55e, #15803d); }
.btn.info { background: linear-gradient(135deg, #22d3ee, #2563eb); }
.btn.warning { background: linear-gradient(135deg, #f59e0b, #f97316); }
.btn.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.btn.pink { background: linear-gradient(135deg, #ec4899, #7c3aed); }
.btn.gray { background: linear-gradient(135deg, #64748b, #334155); }
.btn.cyan { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.btn.admin { background: linear-gradient(135deg, #f59e0b, #f97316); }

/* التخطيط */
.layout { display:flex; align-items:flex-start; width:100%; min-height:calc(100vh - var(--topbar-height)); position:relative; }
.sidebar { width:20%; min-width:270px; max-width:75%; padding:14px; overflow:visible; }
.sidebar-header { background: rgba(255,255,255,.40); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow); }
.sidebar-header h3 { margin: 0; color: #111827; font-size: 1rem; }
.properties-list { width:100%; }
.drag-divider { width:10px; min-width:10px; cursor:col-resize; background:linear-gradient(to bottom,#dbe7f5,#b9d1ec,#dbe7f5); border-right:1px solid #c8d8ea; border-left:1px solid #c8d8ea; position:sticky; top:var(--topbar-height); height:calc(100vh - var(--topbar-height)); z-index:50; }
.drag-divider:hover { background:linear-gradient(to bottom,#c9ddf3,#9fc5e8,#c9ddf3); }
.map-area { width:80%; min-width:300px; background:#fff; border-right:1px solid var(--border); position:sticky; top:var(--topbar-height); height:calc(100vh - var(--topbar-height)); overflow:hidden; align-self:flex-start; }
#map { width:100%; height:100%; min-height:100%; display:block; z-index:1; }
.leaflet-container { width:100%; height:100%; background:#e8eef5; font-family:inherit; }
.leaflet-control-zoom { direction:ltr; }
.map-overlay { position:absolute; top:12px; right:12px; left:12px; z-index:2000; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; pointer-events:none; }
.map-overlay>* { pointer-events:auto; }
.map-search-box { position: relative; width: min(100%, 320px); flex: 1 1 280px; display: flex; gap: 6px; background: rgba(255,255,255,.92); padding: 8px; border-radius: 14px; box-shadow: 0 10px 25px rgba(15,23,42,.12); align-items: center; border: 1px solid rgba(15,23,42,.08); }
.map-search-box input { width: 100%; min-width: 120px; border: 1px solid rgba(15,23,42,.12); border-radius: 10px; padding: 9px 10px; outline: none; background: rgba(255,255,255,.96); color: #111827; }
.map-search-box button { border: none; background: linear-gradient(135deg, #7c3aed, #2563eb); color: white; border-radius: 10px; padding: 9px 12px; cursor: pointer; font-weight: 900; }
.map-btn { border: none; background: rgba(255,255,255,.92); color: var(--primary); padding: 10px 12px; border-radius: 13px; box-shadow: var(--shadow); cursor: pointer; font-weight: 900; transition: .2s ease; border: 1px solid rgba(15,23,42,.08); }
.map-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.map-legend-panel { position: absolute; top: 58px; right: 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 12px; z-index: 3000; box-shadow: 0 10px 25px rgba(15,23,42,.14); line-height: 1.9; font-size: 13px; display: none; color: #111827; }
.legend-title { font-weight:900; margin-bottom:8px; }
.legend-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.legend-color { width:12px; height:12px; border-radius:50%; }
.legend-icon { width:14px; height:14px; }
.legend-sell { border-radius:50%; background:var(--primary); }
.legend-rent { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid var(--success); }
.legend-divider { height:1px; background:rgba(0,0,0,.08); margin:8px 0; }
.leaflet-popup-content-wrapper { border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.leaflet-popup-content { font-size:13px; line-height:1.6; }
.custom-property-marker { background:transparent !important; border:none !important; }

/* بطاقات الإعلانات */
.property-card { background: var(--card); border-radius: 20px; padding: 14px; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); cursor: pointer; transition: .25s ease; position: relative; overflow: hidden; }
.property-card:hover { transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-6px) !important; border-color: rgba(124,58,237,.55) !important; box-shadow: var(--shadow-hover) !important; }
.featured-card { border: 1px solid rgba(245,158,11,.55); background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(255,255,255,.70)); }
.featured-label { position: absolute; top: 8px; left: 8px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 900; box-shadow: 0 0 24px rgba(245,158,11,.32); }
.gallery { position: relative; width: 100%; height: 160px; border-radius: 20px; overflow: hidden; margin-bottom: 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(15,23,42,.08); }
.gallery img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.gallery img.active { opacity: 1; }
.gallery-empty { width: 100%; height: 100%; min-height: 210px; display: flex; align-items: center; justify-content: center; color: #64748b; background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.7)); font-weight: 700; }
.details-gallery { width: 100%; height: 260px; border-radius: 18px; overflow: hidden; margin-bottom: 12px; position: relative; background: rgba(255,255,255,.72); }
.details-gallery img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.image-viewer-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; border:none; background:rgba(0,0,0,.45); color:white; font-size:28px; cursor:pointer; z-index:10; box-shadow:0 10px 25px rgba(0,0,0,.35); }
.image-viewer-arrow.prev { left:12px; }
.image-viewer-arrow.next { right:12px; }
.image-viewer-counter { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.55); color:white; padding:6px 12px; border-radius:999px; font-size:13px; z-index:10; }
.image-viewer-content { max-width:95vw; width:95vw; height:90vh; padding:12px; background:transparent; box-shadow:none; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.image-viewer-content img { max-width:100%; max-height:calc(100vh - 120px); object-fit:contain; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.property-card h3 { margin:6px 0 4px; font-size:15px; font-weight:900; color:var(--text); }
.property-meta { font-size:13px; color:var(--muted); margin-bottom:4px; }
.property-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.property-actions .btn.small { flex:1; min-width:90px; font-size:12px; padding:7px; }
  .code-label { display: inline-block; background: rgba(124,58,237,.18); color: #c4b5fd; border: 1px solid rgba(124,58,237,.38); padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; margin: 3px 0; }
  .timer-label { display: block; border: 1px solid rgba(245,158,11,.45); border-radius: 14px; padding: 8px 10px; font-size: 13px; font-weight: 900; margin: 6px 0 8px; background: rgba(245,158,11,.14); color: #fde68a; }
  .empty-state { text-align: center; padding: 20px; background: var(--card); border-radius: 16px; border: 1px dashed var(--border); color: var(--muted); }
.loading { text-align:center; padding:20px; color:var(--primary); font-weight:800; }
.pagination-box { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:18px 0; }
.pagination-btn { border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.90); color: var(--primary); min-width: 38px; height: 38px; border-radius: 10px; font-weight: 900; cursor: pointer; transition: .2s ease; }
.pagination-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(124,58,237,.18); }
.pagination-btn.active { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; border-color: var(--primary); }

/* النوافذ */
.modal { display: none; position: fixed; z-index: 9999; inset: 0; background: rgba(255,255,255,.65) !important; overflow-y: auto; padding: 20px 0; backdrop-filter: blur(14px); }
#addModal { z-index: 99999 !important; }
#addModal .modal-content { position: relative; z-index: 100000 !important; }
.modal-content { background: rgba(255,255,255,.92); margin: 0 auto; width: 92%; max-width: 660px; border-radius: 32px; padding: 24px; position: relative; box-shadow: 0 35px 85px rgba(15,23,42,.14), inset 0 1px 1px rgba(255,255,255,.32); max-height: 92vh; overflow-y: auto; border: 1px solid rgba(15,23,42,.08); animation: modalPop .18s ease; color: #111827; }

.visits-counter { margin-top: 10px; color: var(--muted); font-size: 0.95rem; font-weight: 700; }
@keyframes modalPop { from { opacity: 0; transform: scale(.98) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.close {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 38px;
  font-weight: bold;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.10) !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  z-index: 999999;
  cursor: pointer;
  color: #fff !important;
  transition: all .3s ease;
  border: none;
  padding: 0;
  line-height: 1;
}

.close:hover {
  background: linear-gradient(135deg, #ef4444, #7c3aed) !important;
  transform: scale(1.08) rotate(90deg) !important;
}

@media (max-width: 768px) {
  :root { --topbar-height: 108px; }
  .close {
    top: 10px;
    left: 10px;
    font-size: 42px;
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.12);
  }
  .property-card { border-radius: 20px !important; }
  .gallery { height: 185px !important; }
  .modal-content { width: 96% !important; border-radius: 24px !important; padding: 16px !important; }
  .map-area, #map, .leaflet-container, #miniMap { border-radius: 18px !important; }
  .btn, button { border-radius: 14px !important; }
  .property-actions { gap: 8px; }
  .property-actions .btn.small { font-size: 13px; padding: 9px; }
  .dropdown-panel { border-radius: 20px !important; max-height: 75vh; }
  .auth-card { transform: none !important; width: 94% !important; padding: 28px 20px !important; }
}
.close:hover { color: var(--danger); transform: rotate(90deg); }
.details-modal-content { max-width: 900px; }
.details-modal-content h2 { font-size: 1.4rem; }
.details-modal-content p { margin: 7px 0; font-size: 14px; line-height: 1.6; }
.modal-content h3 { color: #fff; margin-top: 0; margin-bottom: 6px; text-shadow: 0 0 18px rgba(124,58,237,.35); }
.form-subtitle { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.modal-content input, .modal-content select, .modal-content textarea { width: 100%; border: 1px solid rgba(15,23,42,.12); border-radius: 16px; padding: 12px; margin-top: 8px; background: rgba(255,255,255,.9); color: #111827; transition: .2s ease; }
.modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.modal-content textarea { resize: vertical; min-height: 105px; }
.double-input { display: flex; gap: 10px; }
.double-input > * { flex: 1; }
.upload-label { display: block; margin-top: 12px; color: var(--primary); font-weight: 900; font-size: 14px; }
.hint { font-size: 12px; color: #94a3b8; margin-top: 5px; margin-bottom: 8px; line-height: 1.5; }
#submitBtn { width: 100%; border: none; padding: 13px 16px; margin-top: 10px; border-radius: 14px; background: linear-gradient(135deg, var(--success), #15803d); color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 10px 22px rgba(34,197,94,.22); }
#submitBtn:disabled { opacity: .65; cursor: not-allowed; }
#miniMap { width: 100%; height: 255px; min-height: 255px; display: block; border-radius: 16px; border: 1px solid rgba(15,23,42,.08); margin-bottom: 14px; overflow: hidden; background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
#miniMap .leaflet-container { width: 100%; height: 100%; border-radius: 16px; }
.mini-title { color: var(--success); font-size: 14px; font-weight: 800; margin-bottom: 7px; }
.existing-images-box { margin-top: 10px; margin-bottom: 10px; background: rgba(255,255,255,.82); border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 12px; }
.existing-images-box h4 { margin: 0 0 10px; color: var(--primary); font-size: 14px; }
.existing-images-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.existing-images-list img { width: 125px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(15,23,42,.08); flex-shrink: 0; cursor: zoom-in; }
.pricing-modal-content { max-width: 780px; }
.pricing-title { margin: 0; color: var(--primary); text-align: center; }
.pricing-subtitle { text-align: center; color: var(--muted); margin-bottom: 18px; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pricing-card { background: rgba(255,255,255,.88); border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 18px; text-align: center; box-shadow: var(--shadow); transition: .2s ease; color: #111827; }
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pricing-card h3 { margin: 0 0 10px; color: #111827; }
.pricing-price { font-size: 28px; font-weight: 900; color: #7c3aed; margin-bottom: 8px; }
.pricing-card.premium { border: 1px solid rgba(245,158,11,.55); background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(255,255,255,.92)); }
.pricing-whatsapp { display:block; margin-top:18px; text-align:center; background:#25D366; color:white; padding:13px; border-radius:14px; font-weight:900; }

/* لوحة الإدارة */
.admin-dashboard-box { width:100%; max-width:none; max-height:95vh; overflow-y:auto; height:95vh; }
.modal-content.admin-dashboard-box { width:min(1400px,98vw); max-width:98vw; }

/* التبويبات في لوحة الإدارة */
.admin-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid rgba(15,23,42,.08); }
.admin-tab-btn { flex: 1; padding: 12px 16px; background: rgba(255,255,255,.8); border: none; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 600; color: #64748b; transition: all 0.3s ease; }
.admin-tab-btn.active { background: rgba(124,58,237,.1); color: #7c3aed; border-bottom-color: #7c3aed; }
.admin-tab-btn:hover { background: rgba(124,58,237,.05); color: #7c3aed; }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

.admin-controls-section { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(245,158,11,.12); border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(245,158,11,.35); color: #fff; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.admin-stat-card { background: rgba(255,255,255,.86); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 14px; text-align: center; }
.admin-stat-card b { display: block; font-size: 24px; color: #7c3aed; }
.admin-stat-card span { color: var(--muted); font-size: 13px; font-weight: 800; }
.admin-tools { display: grid; grid-template-columns: 1fr 180px; gap: 10px; margin-bottom: 12px; }
.admin-tools input, .admin-tools select { padding: 12px; border-radius: 14px; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.9); color: #111827; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.86); border-radius: 16px; overflow: hidden; }
.admin-table th, .admin-table td { padding: 10px; border-bottom: 1px solid rgba(15,23,42,.08); text-align: center; font-size: 13px; vertical-align: middle; color: #111827; }
.admin-table th { background: rgba(124,58,237,.16); color: #111827; font-weight: 900; }
.admin-thumb { width:64px; height:52px; object-fit:cover; border-radius:10px; margin:auto; }
.status-approved { color:#15803d; font-weight:900; }
.status-pending { color:#f59e0b; font-weight:900; }
.admin-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.admin-timer-actions { display:flex; gap:4px; flex-wrap:wrap; align-items:center; justify-content:center; }
.coordinates-box { background: rgba(255,255,255,.86); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 12px; margin: 10px 0; color: #111827; }

/* واتساب عائم */
.whatsapp-float { position:fixed; bottom:20px; right:20px; background:#25D366; color:white; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 4px 12px rgba(0,0,0,.3); z-index:9999; text-decoration:none; transition:.3s; }
.whatsapp-float:hover { transform:scale(1.1); background:#1ebe5d; }
.whatsapp-float::after { content:"تواصل معنا"; position:absolute; right:70px; background:#25D366; color:white; padding:6px 10px; border-radius:8px; font-size:13px; opacity:0; transition:.3s; white-space:nowrap; }
.whatsapp-float:hover::after { opacity:1; }

/* الفوتر */
.site-footer { background: rgba(255,255,255,.88); color: #111827; text-align: center; padding: 30px 15px; margin-top: 0; border-top: 1px solid rgba(15,23,42,.08); }
.footer-content h3 { margin: 0 0 15px; color: #7c3aed; }
.contact-icons { display:flex; justify-content:center; gap:18px; margin-bottom:15px; flex-wrap:wrap; }
.contact-icons a { text-decoration:none; }
.icon { font-size:28px; transition:.3s; }
.icon:hover { transform:scale(1.3); }
.whatsapp { color:#25D366; } .viber { color:#7360f2; } .phone { color:#22c55e; } .facebook { color:#1877f2; } .gmail { color:#ea4335; }
.copyright { font-size:14px; color:#64748b; margin:0; }

/* تأثيرات */
.fade-in { animation:fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.property-highlight { border: 2px solid var(--primary) !important; background: rgba(124,58,237,.12) !important; animation: propertyPulse 1.2s ease; }
@keyframes propertyPulse { 0%{ transform:scale(1); } 50%{ transform:scale(1.018); } 100%{ transform:scale(1); } }
.timer-badge { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); padding: 10px 12px; border-radius: 10px; margin: 10px 0; color: #fbbf24; font-weight: 900; font-size: 15px; text-align: center; animation: pulse-timer 2s infinite; }
@keyframes pulse-timer { 0%,100%{ opacity:1; } 50%{ opacity:.8; } }

/* Toast */
.toast { background: rgba(255,255,255,.95); color: #111827; padding: 12px 20px; border-radius: 30px; font-size: 14px; font-weight: bold; box-shadow: 0 8px 20px rgba(15,23,42,.12); pointer-events: auto; animation: toastIn .3s ease, toastOut .3s ease 3.5s forwards; max-width: 90vw; text-align: center; border: 1px solid rgba(15,23,42,.08); backdrop-filter: blur(16px); }
.toast.success { background: rgba(34,197,94,.16); color: #0f172a; }
.toast.error { background: rgba(211,47,47,.16); color: #0f172a; }
.toast.warning { background: rgba(245,124,0,.16); color: #0f172a; }
@keyframes toastIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-20px); } }

/* موبايل */
@media (max-width:768px) {
  :root { --topbar-height:108px; }
  .timer-badge { font-size:18px; padding:12px 14px; margin:12px 0; }
  .topbar { padding:10px 12px; }
  .brand-area { gap:8px; margin-bottom:8px; }
  .brand-title { font-size:1.1rem; }
  .brand-subtitle { font-size:11px; }
  .user-greeting { font-size:12px; padding:6px 10px; }
  .topbar-actions { gap:6px; }
  .icon-btn, .pricing-star-btn { width:42px; height:42px; min-width:42px; font-size:18px; }
  #topMapLegendBtn { display:inline-flex!important; }
  .mobile-tabs { display: flex; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; height: 62px; background: rgba(255,255,255,.95) !important; border-top: 1px solid rgba(15,23,42,.08) !important; z-index: 5000; box-shadow: 0 -8px 25px rgba(15,23,42,.12) !important; padding: 8px; gap: 8px; backdrop-filter: blur(18px); }
  .mobile-tabs button { flex: 1; padding: 8px; font-size: 13px; border-radius: 10px; background: rgba(255,255,255,.90); color: #111827; border: 1px solid rgba(15,23,42,.08); }
  .mobile-tabs button.active { background: linear-gradient(135deg, #7c3aed, #2563eb) !important; color: #fff !important; }
  .layout { display:block; width:100%; height:calc(100vh - var(--topbar-height) - 62px); min-height:calc(100vh - var(--topbar-height) - 62px); overflow:hidden; padding-bottom:62px; }
  .drag-divider { display:none!important; }
  .map-area { width:100%!important; min-width:100%!important; max-width:100%!important; height:100%!important; min-height:100%!important; border-right:none; border-bottom:1px solid var(--border); position:relative!important; top:auto!important; z-index:5; }
  .sidebar { width:100%!important; min-width:100%!important; max-width:100%!important; height:100%!important; min-height:100%!important; overflow-y:auto!important; padding:12px; }
  #map { width:100%!important; height:100%!important; min-height:100%!important; }
  .dropdown-panel { left:10px; right:10px; max-height:70vh; overflow-y:auto; top:110px; }
  .price-range, .double-input { flex-direction:column; }
  .map-overlay { top:10px; right:10px; left:10px; gap:6px; }
  .map-search-box { display:none!important; }
  .gallery { height:170px; }
  .details-gallery { height:230px; }
  .property-actions { flex-direction:column; }
  .property-actions .btn.small { width:100%; }
  .modal-content { width:95%; padding:16px; border-radius:18px; }
  #miniMap { height:230px; min-height:230px; }
  .add-btn { width:40px; height:40px; font-size:16px; }
  .pricing-grid { grid-template-columns:1fr; }
  .admin-stats-grid { grid-template-columns:1fr; }
  .admin-table { min-width:900px; }
  .whatsapp-float { width:54px; height:54px; font-size:25px; bottom:16px; right:16px; }
  .whatsapp-float::after { display:none; }
  .site-footer { padding:24px 12px; }
}
@media (min-width:769px) {
  #topMapLegendBtn { display:none!important; }

  .mobile-tabs {
    display: none !important;
  }

  .dropdown-panel { max-width:430px; right:auto; }
  #searchFiltersDropdown { max-width:430px; }
  #mainMenuDropdown { max-width:330px; }
}

/* تحسين زر X في الهاتف والكمبيوتر */

.close,
.close-btn,
.modal-close,
.login-close{
  position:absolute !important;
  top:14px !important;
  left:14px !important;

  width:52px !important;
  height:52px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:50% !important;

  background:rgba(15,23,42,.95) !important;
  color:#fff !important;

  font-size:34px !important;
  font-weight:900 !important;

  border:2px solid rgba(124,58,237,.45) !important;

  box-shadow:
    0 0 20px rgba(124,58,237,.45),
    0 10px 25px rgba(0,0,0,.45) !important;

  z-index:999999 !important;

  cursor:pointer;
  transition:.25s;
}

/* تأثير hover */

.close:hover,
.close-btn:hover,
.modal-close:hover,
.login-close:hover{
  transform:scale(1.08) rotate(90deg);
  background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
}

/* نسخة الهاتف */

@media(max-width:768px){

  .close,
  .close-btn,
  .modal-close,
  .login-close{

    top:10px !important;
    left:10px !important;

    width:58px !important;
    height:58px !important;

    font-size:38px !important;
  }

}