
:root{
  --bg:#0b1220; --panel:#0e1528; --muted:#94a3b8; --text:#e2e8f0;
  --primary:#22d3ee; --accent:#60a5fa; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --border: #1f2a44; --chip:#111827; --card:#0f172a;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Kufi Arabic', sans-serif;
  color:var(--text); background:linear-gradient(180deg, #0b1220 0%, #0a1020 40%, #0b1220 100%);
}
a{color:var(--primary); text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 16px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.row{display:flex} .between{justify-content:space-between} .center-v{align-items:center}
.wrap{flex-wrap:wrap} .gap-sm{gap:10px} .gap{gap:16px} .gap-lg{gap:24px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.chip{background:var(--chip); border:1px solid var(--border); border-radius:999px; padding:6px 10px; color:var(--muted)}
.muted{color:var(--muted)} .price{font-size:20px; font-weight:700}
.site-header{position:sticky; top:0; z-index:50; background:rgba(10,16,32,.75); backdrop-filter: blur(10px); border-bottom:1px solid var(--border)}
.main-nav a{margin:0 10px; padding:6px 10px; border-radius:10px}
.main-nav a:hover{background:var(--panel)}
.logo{width:28px; height:28px}
.brand{font-weight:700} .brand-text{margin-inline-start:8px}
.hero{padding:60px 0 32px; background:radial-gradient(1200px 400px at 50% -10%, #111a35 0%, #0b1220 50%, transparent 100%)}
.hero h1{font-size:36px; margin:0 0 8px}
.hero p{margin:0 0 24px; color:var(--muted)}
.searchbar{display:flex; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:8px; gap:8px; flex-wrap:wrap}
.input{flex:1; min-width:200px; background:#0b1220; border:1px solid var(--border); color:var(--text); border-radius:12px; padding:12px 14px}
.input:focus{outline:2px solid var(--accent)}
.btn{background:var(--accent); color:#081225; border:none; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.outline{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn.small{padding:8px 12px; font-size:14px}
.section{padding:24px 0}
.list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.result-card{display:grid; grid-template-columns:220px 1fr 140px; gap:16px; padding:12px}
.result-card img{width:100%; height:160px; object-fit:cover; border-radius:12px}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.filters{position:sticky; top:72px}
.sticky-cta{position:sticky; bottom:0; background:rgba(10,16,32,.85); backdrop-filter:blur(8px); padding:12px; border-top:1px solid var(--border)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{font-size:14px; color:var(--muted); display:block; margin-bottom:6px}
select, input[type="date"], input[type="number"]{background:#0b1220; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px 12px; width:100%}
table{width:100%; border-collapse:collapse}
th,td{border-bottom:1px solid var(--border); padding:12px; text-align:start}
.site-footer{margin-top:48px; padding:32px 0; background:#0a0f1d; border-top:1px solid var(--border)}
.map{height:320px; background:#0b1220; border:1px dashed var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px}
.gallery img{width:100%; height:180px; object-fit:cover; border-radius:10px}
.alert{padding:10px 12px; border:1px solid var(--border); background:#0b1322; border-left:4px solid var(--warn); border-radius:10px}
.success{border-left-color:var(--ok)}
.error{border-left-color:var(--danger)}
/* RTL support */
html[dir="rtl"] body{font-family: 'Noto Kufi Arabic', system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
html[dir="rtl"] .brand-text{margin-inline-start:0; margin-inline-end:8px}
/* Responsive */
@media (max-width: 960px){
  .grid-4{grid-template-columns:1fr 1fr}
  .result-card{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .searchbar{padding:8px}
}

@media print{
  .site-header, .site-footer, .btn, nav, #langToggle { display:none !important; }
  body{ background:#fff; color:#111; }
  .card{ box-shadow:none; border: none }
}
