:root{
  --ink-950:#0F1F16;
  --ink-900:#17301F;
  --ink-800:#204028;
  --ink-700:#2C5334;
  --gold-600:#A9863F;
  --gold-500:#C9A66B;
  --gold-400:#DCC08C;
  --gold-300:#EDDBB0;
  --gold-100:#F6EDD8;
  --cream-50:#FBF7EE;
  --cream-100:#F1EAD9;
  --paper:#FFFFFF;
  --ink-text:#181818;
  --muted:#8A8A85;
  --muted-2:#63635E;
  --line:#E4DCC6;
  --line-dark:rgba(201,166,107,0.16);
  --red:#A6402F;
  --shadow-soft:0 20px 50px rgba(0,0,0,0.10);
  --shadow-strong:0 30px 70px rgba(0,0,0,0.4);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html.menu-open, html.menu-open body{overflow:hidden; height:100%; position:fixed; width:100%;}
body{font-family:'Tajawal',sans-serif; background:var(--cream-50); color:var(--ink-text); line-height:1.75; overflow-x:hidden;}
h1,h2,h3,h4,.display{font-family:'Reem Kufi',sans-serif; font-weight:700;}
.num{font-family:'Cairo',sans-serif;}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
img,svg{display:block;}
.container{max-width:1220px; margin:0 auto; padding:0 28px;}
.page{display:none;}
.page.active{display:block; animation:pageIn .5s ease both;}
@keyframes pageIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

::selection{background:var(--gold-300); color:var(--ink-950);}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-thumb{background:var(--gold-500); border-radius:10px;}
::-webkit-scrollbar-track{background:var(--cream-100);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media(prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:60; padding:18px 0; transition:.35s ease; background:rgba(15,31,22,0.92);}
header.scrolled{background:rgba(15,31,22,0.95); backdrop-filter:blur(14px); box-shadow:0 8px 30px rgba(0,0,0,0.25); padding:12px 0;}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; max-width:1220px; margin:0 auto; padding:0 28px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .brand-text{color:var(--gold-100);}
.brand .brand-text .t1{font-family:'Reem Kufi'; font-weight:700; font-size:19px; display:block; color:var(--gold-300); letter-spacing:.3px;}
.brand .brand-text .t2{font-weight:400; font-size:10.5px; color:var(--muted); letter-spacing:2px;}
nav.links{display:flex; gap:4px; align-items:center;}
nav.links a{color:rgba(246,236,207,0.82); padding:10px 16px; border-radius:30px; font-size:14.5px; font-weight:500; transition:.2s; position:relative;}
nav.links a:hover{color:var(--gold-300);}
nav.links a.active{background:rgba(203,161,53,0.14); color:var(--gold-300);}
.btn-staff{border:1.5px solid var(--gold-500); color:var(--gold-300); padding:9px 20px; border-radius:30px; font-weight:700; font-size:13.5px; transition:.2s;}
.btn-staff:hover{background:var(--gold-500); color:var(--ink-950);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-end{display:flex; align-items:center; gap:8px;}
.nav-end > div{display:flex; align-items:center;}

/* on non-home light pages header should not float transparent over dark hero look but pages are dark-topped anyway */

/* ---------- signature: layered arch doorway motif ---------- */
.arch-svg path{transition:.4s;}
.hero-arch{animation:floatY 7s ease-in-out infinite;}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
.mesh{position:absolute; inset:0; overflow:hidden; z-index:0;}
.mesh::before, .mesh::after{content:"";position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;}
.mesh::before{width:520px; height:520px; background:radial-gradient(circle,var(--gold-500),transparent 70%); top:-160px; left:-120px; animation:drift1 16s ease-in-out infinite;}
.mesh::after{width:420px; height:420px; background:radial-gradient(circle,#8C6D2F,transparent 70%); bottom:-140px; right:-80px; animation:drift2 20s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,40px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-50px,-30px);}}

/* ---------- Hero ---------- */
.hero{background:var(--ink-950); position:relative; overflow:hidden; color:var(--gold-100); padding-top:64px;}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; padding:56px 0 40px;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--gold-400); font-weight:700; letter-spacing:2px; font-size:12.5px; margin-bottom:20px; border:1px solid var(--line-dark); padding:7px 14px; border-radius:30px;}
.hero .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 4px rgba(203,161,53,0.2);}
.hero h1{font-size:50px; line-height:1.28; margin-bottom:20px; color:var(--cream-50);}
.hero h1 span{color:var(--gold-400);}
.hero p.lead{color:var(--muted); font-size:16.5px; max-width:520px; margin-bottom:32px; font-family:'Tajawal';}
.hero-ctas{display:flex; gap:14px; margin-bottom:44px;}
.btn-gold{background:var(--gold-500); color:var(--ink-950); font-weight:800; padding:15px 28px; border-radius:10px; font-size:15px; transition:.2s; box-shadow:0 12px 26px rgba(203,161,53,0.25);}
.btn-gold:hover{background:var(--gold-400); transform:translateY(-2px);}
.btn-ghost{border:1.5px solid var(--line-dark); color:var(--gold-100); padding:15px 26px; border-radius:10px; font-weight:700; font-size:15px;}
.btn-ghost:hover{border-color:var(--gold-500); color:var(--gold-400);}

/* ---------- Smart progressive search (home hero) ---------- */
.smart-search{background:rgba(20,20,20,0.6); backdrop-filter:blur(16px); border:1px solid var(--line-dark); border-radius:20px; padding:22px 24px; margin-bottom:36px; box-shadow:var(--shadow-strong);}
.ss-label{color:var(--gold-300); font-weight:700; font-size:13.5px; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.ss-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-500);}
.ss-toggles{display:flex; gap:10px; margin-bottom:4px;}
.ss-toggle{flex:1; background:rgba(255,255,255,0.04); border:1.5px solid var(--line-dark); color:var(--gold-100); padding:13px 10px; border-radius:12px; font-weight:800; font-size:14.5px; transition:.2s;}
.ss-toggle:hover{border-color:var(--gold-500);}
.ss-toggle.active{background:var(--gold-500); color:var(--ink-950); border-color:var(--gold-500);}
.ss-panel{max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .35s ease, margin .4s ease;}
.ss-panel.open{max-height:220px; opacity:1; margin-top:16px;}
.ss-mini-label{display:block; color:var(--muted); font-size:12px; font-weight:700; margin-bottom:9px; letter-spacing:.3px;}
.ss-chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.ss-chip{background:rgba(255,255,255,0.04); border:1.5px solid var(--line-dark); color:var(--gold-100); padding:9px 16px; border-radius:30px; font-size:13.5px; font-weight:700; transition:.2s;}
.ss-chip:hover{border-color:var(--gold-500); color:var(--gold-300);}
.ss-chip.active{background:var(--gold-500); color:var(--ink-950); border-color:var(--gold-500);}
.ss-selects{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.ss-selects select{width:100%; border:1.5px solid var(--line-dark); background:rgba(255,255,255,0.04); color:var(--gold-100); border-radius:10px; padding:11px 12px; font-family:inherit; font-size:13.5px;}
.ss-selects select option{color:#111;}
.ss-ranges{margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.ss-range-group label{display:block; margin-bottom:4px;}
.ss-range-inputs{display:flex; align-items:center; gap:6px;}
.ss-range-inputs input{flex:1; border:1.5px solid var(--line-dark); background:rgba(255,255,255,0.04); color:var(--gold-100); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:13.5px; width:0;}
.ss-range-sep{color:var(--muted); font-size:14px;}
.ss-submit{width:100%; margin-top:18px; display:none;}
.ss-submit.show{display:block; animation:pageIn .35s ease both;}
.hero-stats{display:flex; gap:30px;}
.hero-stats .hs b{font-family:'Cairo'; font-size:26px; color:var(--gold-300); display:block;}
.hero-stats .hs span{font-size:12px; color:var(--muted);}
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-visual .arch-svg{width:100%; max-width:420px;}
.glass-card{position:absolute; background:rgba(20,20,20,0.55); border:1px solid var(--line-dark); backdrop-filter:blur(10px); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow-strong);}
.glass-card.gc1{top:8%; right:-4%; animation:floatY 8s ease-in-out infinite;}
.glass-card.gc2{bottom:6%; left:-6%; animation:floatY 9s ease-in-out infinite reverse;}
.glass-card b{color:var(--gold-300); font-family:'Cairo'; font-size:18px; display:block;}
.glass-card span{color:var(--muted); font-size:11.5px;}
.scroll-cue{position:relative; z-index:2; display:flex; justify-content:center; padding-bottom:26px; color:var(--muted); font-size:12px; gap:8px; align-items:center;}
.scroll-cue .line{width:1px; height:30px; background:linear-gradient(var(--gold-500),transparent); animation:cueMove 1.8s ease-in-out infinite;}
@keyframes cueMove{0%{opacity:0;transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0;transform:translateY(10px);}}

/* ---------- marquee ---------- */
.marquee-wrap{background:var(--ink-900); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:16px 0; overflow:hidden; position:relative; z-index:2;}
.marquee-track{display:flex; gap:46px; width:max-content; animation:marquee 26s linear infinite;}
.marquee-track span{color:var(--muted); font-size:13.5px; font-weight:700; letter-spacing:.5px; white-space:nowrap; display:flex; align-items:center; gap:10px;}
.marquee-track span::after{content:"◆"; color:var(--gold-500); font-size:8px; margin-right:10px;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Sections (light) ---------- */
section{padding:96px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:20px;}
.section-head .eyebrow-line{display:flex; align-items:center; gap:10px; color:var(--gold-600); font-weight:700; font-size:12.5px; letter-spacing:2px; margin-bottom:12px;}
.section-head .eyebrow-line::before{content:""; width:26px; height:2px; background:var(--gold-500);}
.section-head h2{font-size:34px; color:var(--ink-950);}
.section-head p{color:var(--muted-2); margin-top:10px; max-width:460px; font-size:15px;}
.link-more{color:var(--ink-950); font-weight:700; border-bottom:2px solid var(--gold-500); padding-bottom:3px; font-size:14.5px; white-space:nowrap;}

/* ---------- Property cards ---------- */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.p-card{background:var(--paper); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--line); transition:.35s cubic-bezier(.2,.8,.2,1); cursor:pointer;}
.p-card:hover{transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,0.18); border-color:var(--gold-300);}
.p-thumb{height:190px; position:relative; overflow:hidden; background:
    radial-gradient(circle at 30% 20%, rgba(203,161,53,0.35), transparent 55%),
    linear-gradient(135deg,var(--ink-700),var(--ink-950));
}
.p-thumb .thumb-arch{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.9;}
.p-thumb .thumb-arch svg{width:64px; opacity:.5; transition:.35s;}
.p-card:hover .thumb-arch svg{opacity:.85; transform:scale(1.06);}
.p-badge{position:absolute; top:14px; right:14px; background:var(--gold-500); color:var(--ink-950); font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:20px; letter-spacing:.3px;}
.p-badge.rent{background:var(--cream-50); color:var(--ink-950);}
.p-status-chip{position:absolute; top:14px; left:14px; background:rgba(0,0,0,0.55); color:var(--gold-200,#eee); font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:16px; border:1px solid var(--line-dark); color:var(--gold-100);}
.p-body{padding:18px 20px 20px;}
.p-price{color:var(--ink-950); font-weight:800; font-size:20px; margin-bottom:6px; font-family:'Cairo';}
.p-price span{font-size:12px; font-weight:500; color:var(--muted-2); font-family:'Tajawal';}
.p-title{font-weight:700; font-size:16px; margin-bottom:8px; font-family:'Tajawal';}
.p-loc{color:var(--muted-2); font-size:13px; display:flex; align-items:center; gap:5px; margin-bottom:14px;}
.p-meta{display:flex; flex-wrap:wrap; gap:8px 14px; border-top:1px dashed var(--line); padding-top:13px; font-size:12.5px; color:var(--muted-2);}
.p-meta b{color:var(--ink-text); font-family:'Cairo'; font-weight:700;}

/* ---------- Stats band ---------- */
.stats-band{background:var(--ink-950); position:relative; overflow:hidden; color:var(--gold-100);}
.stats-band .container{position:relative; z-index:2;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat-box{text-align:center; padding:26px 10px; border-left:1px solid var(--line-dark);}
.stat-box:last-child{border-left:none;}
.stat-box b{font-family:'Cairo'; font-size:40px; color:var(--gold-400); display:block;}
.stat-box span{font-size:13px; color:var(--muted); display:block; margin-top:6px;}

/* ---------- Why us / about ---------- */
.about{background:var(--cream-50);}
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.why-list{display:flex; flex-direction:column; gap:22px; margin-top:10px;}
.why-item{display:flex; gap:16px; align-items:flex-start;}
.why-ico{flex:none; width:46px; height:46px; border-radius:12px; background:var(--ink-950); display:flex; align-items:center; justify-content:center;}
.why-ico svg{width:22px;}
.why-item h4{font-family:'Tajawal'; font-weight:700; font-size:16px; margin-bottom:4px; color:var(--ink-950);}
.why-item p{color:var(--muted-2); font-size:14px;}
.about-visual{position:relative; background:var(--ink-950); border-radius:24px; padding:50px 30px; overflow:hidden; text-align:center;}
.about-visual .arch-svg{width:70%; margin:0 auto 20px;}
.about-visual h3{color:var(--gold-300); font-size:22px; margin-bottom:8px;}
.about-visual p{color:var(--muted); font-size:13.5px; max-width:280px; margin:0 auto;}

/* ---------- Testimonials ---------- */
.testi{background:var(--cream-100);}
.testi-wrap{max-width:720px; margin:0 auto; text-align:center; position:relative;}
.testi-quote{font-size:22px; line-height:1.9; color:var(--ink-950); font-family:'Tajawal'; font-weight:500; min-height:150px;}
.testi-quote .mark{color:var(--gold-500); font-size:40px; display:block; margin-bottom:10px; font-family:'Reem Kufi';}
.testi-name{margin-top:22px; font-weight:800; color:var(--ink-950);}
.testi-role{color:var(--muted-2); font-size:13px;}
.testi-dots{display:flex; justify-content:center; gap:8px; margin-top:26px;}
.testi-dots span{width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:.2s;}
.testi-dots span.active{background:var(--gold-500); width:22px; border-radius:6px;}

/* ---------- CTA ---------- */
.cta-band{background:var(--ink-950); position:relative; overflow:hidden; text-align:center;}
.cta-band .bg-arch{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; opacity:.06;}
.cta-band .container{position:relative; z-index:2;}
.cta-band h2{color:var(--cream-50); font-size:30px; margin-bottom:14px;}
.cta-band p{color:var(--muted); margin-bottom:28px; font-size:15px;}

/* ---------- Filters (listings) ---------- */
.page-banner{background:var(--ink-950); padding:150px 0 60px; position:relative; overflow:hidden; color:var(--gold-100);}
.page-banner .container{position:relative; z-index:2;}
.page-banner .eyebrow{color:var(--gold-400); font-weight:700; letter-spacing:2px; font-size:12.5px; margin-bottom:14px;}
.page-banner h1{font-size:36px; color:var(--cream-50);}
.search-row{display:flex; gap:10px; margin-bottom:14px; margin-top:-25px; position:relative; z-index:6;}
.search-row .search-input-wrap{flex:1;}
.search-row .search-input{width:100%; border:1px solid var(--line); border-radius:12px; padding:14px 18px; font-family:inherit; font-size:15px; background:var(--paper); box-shadow:var(--shadow-soft);}
.search-row .search-input:focus{outline:none; border-color:var(--gold-400); box-shadow:0 0 0 3px rgba(203,161,53,0.12);}
.btn-search-icon{display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:12px; background:#fff; color:var(--gold-500); border:1px solid var(--line); cursor:pointer; transition:.2s; box-shadow:var(--shadow-soft);}
.btn-search-icon:hover{background:var(--cream-50); color:var(--gold-600);}
.filters-bar{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-soft); position:relative; z-index:5; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.filters-bar select, .filters-bar input[type="text"], .filters-bar input[type="number"]{border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:14px; background:var(--cream-50);}
.filters-bar button{background:var(--ink-950); color:var(--gold-300); border-radius:10px; font-weight:700; transition:.2s;}
.filters-bar button:hover{background:var(--gold-500); color:var(--ink-950);}

/* ---------- Range Slider ---------- */
.range-slider-wrap{grid-column:span 2; padding:8px 0;}
.range-slider-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted-2); margin-bottom:4px;}
.range-slider-values{display:flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600; color:var(--ink-text); margin-bottom:8px; direction:ltr; justify-content:flex-end;}
.range-slider-unit{color:var(--muted); font-size:12px;}
.range-slider-sep{color:var(--muted); margin:0 6px;}
.range-slider-track{position:relative; height:6px; background:var(--cream-100); border-radius:3px; margin-top:4px; direction:ltr;}
.range-slider-fill{position:absolute; top:0; height:100%; background:var(--gold-500); border-radius:3px;}
.range-slider-input{position:absolute; top:-6px; width:100%; height:18px; -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; margin:0; direction:ltr;}
.range-slider-input::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--gold-500); border:2px solid var(--paper); box-shadow:0 2px 6px rgba(0,0,0,0.15); pointer-events:all; cursor:pointer; transition:transform .15s;}
.range-slider-input::-webkit-slider-thumb:hover{transform:scale(1.2);}
.range-slider-input::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--gold-500); border:2px solid var(--paper); box-shadow:0 2px 6px rgba(0,0,0,0.15); pointer-events:all; cursor:pointer;}
@media(max-width:768px){.range-slider-wrap{grid-column:span 1;}}

/* ---------- Results toolbar + map ---------- */
.results-toolbar{display:flex; align-items:center; justify-content:space-between; margin-top:22px; margin-bottom:6px;}
.results-count{color:var(--muted); font-size:13.5px; font-weight:600;}
.btn-map{background:var(--ink-950); color:var(--gold-300); padding:11px 20px; border-radius:10px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; transition:.2s;}
.btn-map:hover{background:var(--gold-500); color:var(--ink-950); transform:translateY(-1px);}
.overlay-map{position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none; align-items:center; justify-content:center; z-index:150; padding:18px;}
.overlay-map.active{display:flex;}
.map-modal{background:var(--paper); border-radius:18px; width:100%; max-width:1080px; height:82vh; overflow:hidden; position:relative; box-shadow:var(--shadow-strong); display:flex; flex-direction:column;}
.map-modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--ink-950);}
.map-modal-head h3{color:var(--gold-300); font-size:16px;}
.map-modal-head .count{color:var(--gold-100); font-size:12.5px; opacity:.8;}
.map-close{background:rgba(255,255,255,0.08); color:var(--gold-200); border-radius:8px; padding:8px 14px; font-weight:700; font-size:13px;}
.map-close:hover{background:var(--gold-500); color:var(--ink-950);}
#leaflet-map{flex:1; width:100%;}
.map-emoji-pin{display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-100%);}
.map-emoji-pin .map-emoji{font-size:32px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
.map-emoji-pin .map-price{background:var(--ink-950); color:var(--gold-300); font-family:'Cairo',sans-serif; font-weight:700; font-size:11px; padding:3px 8px; border-radius:4px; white-space:nowrap; margin-top:-4px; box-shadow:0 2px 6px rgba(0,0,0,0.25);}
.map-marker-pin{display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-100%);}
.map-marker-pin .pin-icon{filter:drop-shadow(0 2px 5px rgba(0,0,0,0.35));}
.map-popup{font-family:'Tajawal',sans-serif; direction:rtl; text-align:right; min-width:190px;}
.map-popup .mp-badge{display:inline-block; background:var(--gold-100); color:var(--gold-600); font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; margin-bottom:6px;}
.map-popup .mp-title{font-weight:800; font-size:13.5px; color:var(--ink-text); margin-bottom:4px;}
.map-popup .mp-price{color:var(--ink-950); font-weight:900; font-size:14px; margin-bottom:8px;}
.map-popup .mp-link{display:block; text-align:center; background:var(--ink-950); color:var(--gold-300); font-weight:700; font-size:12.5px; padding:8px; border-radius:8px;}
.map-popup .mp-link:hover{background:var(--gold-500); color:var(--ink-950);}
@media(max-width:1110px){
  .results-toolbar{flex-direction:column; align-items:flex-start; gap:10px;}
  .map-modal{height:88vh;}
}
.chips-row{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 6px;}
.chip{padding:9px 16px; border-radius:30px; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--muted-2); transition:.2s;}
.chip.active, .chip:hover{background:var(--ink-950); color:var(--gold-300); border-color:var(--ink-950);}
.empty-state{text-align:center; padding:70px 20px; color:var(--muted-2);}
.empty-state .ico{font-size:38px; margin-bottom:12px;}

/* ---------- Detail page ---------- */
.detail-wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start;}
.detail-hero-img{height:380px; border-radius:20px; overflow:hidden; position:relative;
  background:radial-gradient(circle at 25% 20%, rgba(203,161,53,0.4), transparent 55%), linear-gradient(135deg,var(--ink-700),var(--ink-950));
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft);}
.detail-hero-img svg{width:110px; opacity:.55;}
.gallery-main{height:380px; border-radius:20px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft);}
.gallery-main .g-badge{position:absolute; top:16px; right:16px; background:var(--gold-500); color:var(--ink-950); font-weight:800; font-size:12.5px; padding:5px 14px; border-radius:20px; z-index:2;}
.gallery-main .g-count{position:absolute; bottom:16px; left:16px; background:rgba(0,0,0,0.55); color:#fff; font-size:12px; padding:5px 12px; border-radius:20px; z-index:2;}
.gallery-main svg{width:100px; opacity:.5; position:relative; z-index:1;}
.gallery-placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 25% 20%, rgba(201,166,107,0.4), transparent 55%), linear-gradient(135deg,var(--ink-700),var(--ink-950));}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px;}
.g-thumb{height:70px; border-radius:10px; cursor:pointer; border:2px solid transparent; opacity:.65; transition:.2s; display:flex; align-items:center; justify-content:center;}
.g-thumb:hover{opacity:.9;}
.g-thumb.active{opacity:1; border-color:var(--gold-500);}
.g-thumb svg{width:26px; opacity:.6;}
.detail-box{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px; margin-top:22px; box-shadow:var(--shadow-soft);}
.values-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px;}
.value-item{background:var(--cream-50); border:1px solid var(--line); border-radius:12px; padding:18px;}
.ad-meta-row{display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:12.5px; margin-top:10px; padding-top:12px; border-top:1px dashed var(--line);}
.ad-meta-row span b{color:var(--ink-text);}
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px;}
.spec{background:var(--cream-50); border:1px solid var(--line); border-radius:12px; padding:16px 8px; text-align:center;}
.spec b{display:block; font-family:'Cairo'; font-size:17px; color:var(--ink-950);}
.spec span{font-size:11px; color:var(--muted-2);}
.spec .sp-ico{font-size:17px; margin-bottom:4px; display:block;}
.feature-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px;}
.feature-chip{background:var(--cream-50); border:1px solid var(--line); color:var(--ink-text); font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;}
.feature-chip::before{content:"✓"; color:var(--gold-600); font-weight:900;}
.mini-map{height:220px; border-radius:14px; overflow:hidden; margin-top:14px; border:1px solid var(--line);}
.side-card{background:var(--ink-950); color:var(--gold-100); border-radius:18px; padding:26px; box-shadow:var(--shadow-strong); position:sticky; top:110px;}
.side-card .p-price{color:var(--gold-300); font-size: 26px;}
.side-card p{color:var(--muted); font-size:13px; margin-bottom:18px;}
.agent-card{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); border-radius:12px; padding:14px; margin-bottom:16px;}
.agent-avatar{width:44px; height:44px; border-radius:50%; background:var(--ink-600); color:var(--ink-950); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0;}
.agent-info b{display:block; font-size:13.5px; color:var(--gold-200);}
.agent-info span{font-size:11.5px; color:var(--muted);}
.contact-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.btn-call{background:rgba(255,255,255,0.08); color:var(--gold-200); padding:11px; border-radius:9px; font-weight:700; font-size:13.5px; text-align:center; display:block;}
/* .btn-call:hover{background:rgba(255,255,255,0.14);} */
.btn-whatsapp{background:#25D366; color:#0b2e18; padding:11px; border-radius:9px; font-weight:800; font-size:13.5px; text-align:center; display:block;}
.btn-whatsapp:hover{filter:brightness(1.08);}
.btn-interest{background: var(--gold-400); color:var(--ink-950); padding:11px; border-radius:9px; font-weight:800; font-size:13.5px; text-align:center; display:block; border:1.5px solid var(--gold-500);}
.btn-interest:hover{background:var(--gold-600);}
.similar-wrap{margin-top:54px;}
.back-link{display:inline-flex; align-items:center; gap:6px; color: black; font-weight:700; margin-bottom:24px; font-size:14px;}

/* ---------- Lightbox ---------- */
.lightbox-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:200; display:flex; align-items:center; justify-content:center;}
.lightbox-close{position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:36px; cursor:pointer; z-index:210; line-height:1;}
.lightbox-close:hover{color:var(--gold-300);}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:#fff; font-size:32px; width:48px; height:48px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; z-index:210;}
.lightbox-nav:hover{background:var(--gold-500); color:var(--ink-950);}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
.lightbox-img{max-width:85vw; max-height:80vh; display:flex; align-items:center; justify-content:center;}
.lightbox-img img{max-width:85vw; max-height:80vh; object-fit:contain; border-radius:12px;}
.lightbox-counter{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:14px; font-weight:700;}
[x-cloak]{display:none !important;}


/* ---------- Generic forms ---------- */
.form-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:var(--shadow-soft);}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--ink-text);}
.form-row input, .form-row select, .form-row textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:14.5px; transition:.2s; background:var(--cream-50);}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(203,161,53,0.15); background:var(--paper);}
.form-row textarea{resize:vertical; min-height:100px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px;}
.contact-info-card{background:var(--ink-950); color:var(--gold-100); border-radius:20px; padding:36px; position:relative; overflow:hidden;}
.contact-info-card h3{color:var(--gold-300); margin-bottom:20px; font-size:20px;}
.contact-info-card .row{display:flex; gap:12px; margin-bottom:16px; font-size:14px; color:var(--muted); position:relative; z-index:2;}
.contact-info-card .row b{color:var(--gold-100); font-weight:500;}

/* ---------- Footer ---------- */
footer{background:var(--ink-950); color:var(--muted); padding:60px 0 24px; position:relative; overflow:hidden;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:36px; position:relative; z-index:2;}
.footer-grid h4{color:var(--gold-300); font-size:15px; margin-bottom:16px; font-family:'Tajawal'; font-weight:700;}
.footer-grid p, .footer-grid a{font-size:13.5px; color:var(--muted); display:block; margin-bottom:10px; transition:.2s;}
.footer-grid a:hover{color:var(--gold-300);}
.footer-bottom{border-top:1px solid var(--line-dark); padding-top:18px; text-align:center; font-size:12px; color:var(--muted); position:relative; z-index:2;}
.footer-legal-row{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-bottom:14px;}
.footer-legal-row a{font-size:12.5px; color:var(--muted); border-bottom:1px dotted var(--line-dark);}
.footer-legal-row a:hover{color:var(--gold-300);}
.legal-content{max-width:820px; margin:0 auto;}
.reg-badge{display:flex; align-items:center; gap:14px; justify-content:center; margin:18px 0; opacity:.95;}
.reg-badge .rb-logo-card{background:#FFFFFF; border-radius:10px; padding:8px 14px; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.reg-badge .rb-seal-img{height:30px; width:auto; display:block;}
.reg-badge .rb-text{text-align:right; line-height:1.4;}
.reg-badge .rb-text b{display:block; font-size:12px; color:var(--gold-300); font-weight:700;}
.reg-badge .rb-text span{font-size:10.5px; color:var(--muted);}
.rb-licenses{display:flex; flex-wrap:wrap; gap:4px 10px; max-width:400px;}
.rb-license-item{white-space:nowrap;}
.rb-license-item:not(:last-child)::after{content:'|'; margin-inline-start:10px; opacity:.5;}
.lang-toggle{display:flex; align-items:center; gap:2px; background:rgba(255,255,255,0.06); border:1.5px solid var(--line-dark); border-radius:20px; padding:3px; cursor:pointer;}
.lang-toggle span{padding:6px 13px; border-radius:16px; font-size:12.5px; font-weight:800; color:var(--gold-100); opacity:.55; transition:.2s; text-decoration:none;}
.lang-toggle span.on{background:var(--gold-500); color:var(--ink-950); opacity:1;}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink-950); position:relative; overflow:hidden;}
.login-card{background:rgba(20,20,20,0.55); backdrop-filter:blur(16px); border:1px solid var(--line-dark); border-radius:22px; padding:46px 40px; width:400px; box-shadow:var(--shadow-strong); text-align:center; position:relative; z-index:2;}
.login-card h2{color:var(--cream-50); margin:18px 0 4px; font-size:24px;}
.login-card p{color:var(--muted); font-size:13.5px; margin-bottom:28px;}
.login-card .form-row label{color:var(--gold-100);}
.login-card .form-row input{background:rgba(0,0,0,0.5); border-color:var(--line-dark); color:var(--cream-50);}
.hint{background:rgba(203,161,53,0.1); border:1px dashed var(--gold-600); border-radius:10px; padding:12px; font-size:12px; color:var(--gold-200,var(--gold-300)); margin-top:18px;}
.hint b{color:var(--gold-300);}
.err{color:#E8877A; font-size:13px; margin-top:10px; display:none; font-weight:700;}
.back-home{position:absolute; top:28px; right:32px; color:var(--muted); font-size:13px; z-index:3;}
.back-home:hover{color:var(--gold-300);}

/* ---------- Admin shell ---------- */
.admin-shell{display:grid; grid-template-columns:264px 1fr; min-height:100vh; background:var(--cream-50);}
.admin-side{background:var(--ink-950); color:var(--muted); padding:26px 18px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.admin-side .brand{padding:0 8px 22px; border-bottom:1px solid var(--line-dark); margin-bottom:20px;}
.admin-nav a{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:12px; font-weight:600; font-size:14.5px; color:var(--muted); margin-bottom:6px; transition:.2s;}
.admin-nav a:hover{background:rgba(255,255,255,0.05); color:var(--gold-100);}
.admin-nav a.active{background:var(--gold-500); color:var(--ink-950); font-weight:800;}
.admin-nav .ico{font-size:16px; width:20px; text-align:center;}
.admin-logout{margin-top:26px; padding-top:18px; border-top:1px solid var(--line-dark);}
.admin-logout a{color:var(--gold-300); font-weight:700; padding:12px 16px;}
.admin-main{padding:34px 38px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
.admin-topbar h2{font-size:26px; color:var(--ink-950); font-weight:800; font-family:'Reem Kufi';}
.admin-topbar .who{font-size:13px; color:var(--muted-2); background:var(--paper); padding:9px 16px; border-radius:30px; border:1px solid var(--line);}
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px;}
.kpi{background:var(--paper); border-radius:16px; padding:22px; box-shadow:var(--shadow-soft); border:1px solid var(--line); display:flex; align-items:center; gap:16px;}
.kpi-ico{width:50px; height:50px; border-radius:14px; background:var(--ink-950); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none;}
.kpi b{font-family:'Cairo'; font-size:26px; color:var(--ink-950); display:block;}
.kpi span{font-size:12.5px; color:var(--muted-2);}
.admin-panel{display:none;}
.admin-panel.active{display:block; animation:pageIn .4s ease both;}
.panel-card{background:var(--paper); border-radius:18px; box-shadow:var(--shadow-soft); border:1px solid var(--line); padding:24px;}
.panel-toolbar{display:flex; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap;}
.panel-toolbar input, .panel-toolbar select{border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:inherit; font-size:14px; background:var(--cream-50);}
.btn-add{background:var(--ink-950); color:var(--gold-300); padding:11px 20px; border-radius:10px; font-weight:700; font-size:14px; transition:.2s;}
.btn-add:hover{background:var(--gold-500); color:var(--ink-950);}
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:right; padding:12px 10px; background:var(--cream-100); color:var(--ink-text); font-weight:800; font-size:12.5px;}
th:first-child{border-radius:8px 0 0 8px;} th:last-child{border-radius:0 8px 8px 0;}
td{padding:12px 10px; border-bottom:1px solid var(--line); color:var(--ink-text);}
tr:hover td{background:#FBF9F2;}
.tag{padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:800;}
.tag.new{background:#FCEFD9; color:#8A5A16;}
.tag.progress{background:#DCEBE3; color:#1E6B4E;}
.tag.contacted{background:#DDEAF7; color:#1E5A8A;}
.tag.closed{background:#EEE; color:#666;}
.tag.avail{background:#DCEBE3; color:#1E6B4E;}
.tag.reserved{background:#FCEFD9; color:#8A5A16;}
.tag.sold{background:#F5DADA; color:#A6402F;}
.tag.rented{background:#DDEAF7; color:#1E5A8A;}
.row-actions{display:flex; gap:6px;}
.icon-btn{background:var(--cream-100); border-radius:8px; padding:7px 11px; font-size:12.5px; font-weight:700; transition:.2s;}
.icon-btn:hover{background:var(--gold-300);}
.icon-btn.danger:hover{background:#F5DADA; color:var(--red);}
.empty-row td{text-align:center; color:var(--muted-2); padding:36px;}

/* ---------- Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.overlay.active{display:flex;}
.modal{background:var(--paper); border-radius:20px; padding:30px; width:100%; max-width:500px; max-height:88vh; overflow:auto; box-shadow:var(--shadow-strong); animation:pageIn .3s ease both;}
.modal h3{color:var(--ink-950); margin-bottom:20px; font-size:20px; font-family:'Reem Kufi';}
.modal-actions{display:flex; gap:10px; margin-top:22px;}
.btn-cancel{flex:1; background:var(--cream-100); color:var(--ink-text); padding:12px; border-radius:10px; font-weight:700;}
.btn-save{flex:1; background:var(--ink-950); color:var(--gold-300); padding:12px; border-radius:10px; font-weight:700; transition:.2s;}
.btn-save:hover{background:var(--gold-500); color:var(--ink-950);}
.toast{position:fixed; bottom:26px; right:26px; background:var(--ink-950); color:var(--gold-300); padding:16px 24px; border-radius:12px; font-weight:700; font-size:14px; box-shadow:var(--shadow-strong); z-index:200; display:none; border:1px solid var(--line-dark);}

/* ---------- Mobile Navigation ---------- */
.menu-btn{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; padding:8px; border-radius:8px; background:rgba(255,255,255,0.06); border:1.5px solid var(--line-dark); cursor:pointer; transition:.2s;}
.menu-btn:hover{border-color:var(--gold-500);}
.menu-btn-bar{display:block; width:20px; height:2px; background:var(--gold-300); border-radius:2px; transition:.3s;}
.mobile-nav-overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,31,22,0.96); z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease;}
.mobile-nav-overlay.open{opacity:1; pointer-events:all;}
.mobile-nav{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; max-width:320px; padding:24px;}
.mobile-nav a{color:var(--gold-100); font-size:18px; font-weight:600; padding:14px 24px; border-radius:12px; transition:.2s; width:100%; text-align:center;}
.mobile-nav a:hover,.mobile-nav a.active{background:rgba(203,161,53,0.14); color:var(--gold-300);}
.mobile-nav-lang{margin-top:20px; padding-top:20px; border-top:1px solid var(--line-dark);}

@media(max-width:1110px){
  .menu-btn{display:flex;}
  nav.links{display:none;}
  .nav-actions{display:none !important;}
  .nav-search-btn{display:flex;}
}

/* ---------- Global Search Overlay ---------- */
.nav-search-btn{background:rgba(255,255,255,0.06); border:1.5px solid var(--line-dark); cursor:pointer; color:var(--gold-100); padding:8px; border-radius:20px; display:flex; align-items:center; justify-content:center; transition:.2s;}
.nav-search-btn:hover{background:var(--gold-500); color:var(--ink-950);}
.global-search-overlay{position:fixed; inset:0; z-index:99999; display:flex; align-items:flex-start; justify-content:center; padding-top:80px;}
.global-search-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.global-search-panel{position:relative; width:100%; max-width:600px; background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,0.2); overflow:hidden; margin:0 16px;}
.global-search-header{display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); gap:12px;}
.global-search-input-wrap{flex:1; display:flex; align-items:center; gap:10px; color:var(--muted-2);}
.global-search-input{flex:1; border:none; outline:none; font-size:17px; font-family:inherit; background:transparent; color:var(--ink-950);}
.global-search-input::placeholder{color:var(--muted-2);}
.global-search-close{background:none; border:none; font-size:28px; cursor:pointer; color:#666; line-height:1; padding:4px 8px;}
.global-search-close:hover{color:var(--ink-950);}
.global-search-results{max-height:400px; overflow-y:auto; padding:8px 0;}
.global-search-item{display:flex; align-items:center; gap:12px; padding:12px 20px; text-decoration:none; color:var(--ink-950); transition:background .15s;}
.global-search-item:hover{background:var(--cream-50);}
.gsi-thumb{width:52px; height:40px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--cream-100);}
.gsi-thumb img{width:100%; height:100%; object-fit:cover;}
.gsi-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted-2);}
.gsi-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.gsi-title{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gsi-meta{font-size:12.5px; color:var(--muted-2);}
.global-search-empty{padding:24px 20px; text-align:center; color:var(--muted-2); font-size:14px;}
.global-search-all{display:block; width:100%; padding:14px 20px; border:none; border-top:1px solid var(--line); background:var(--cream-50); font-family:inherit; font-size:14px; font-weight:600; color:var(--gold-600); cursor:pointer; text-align:center; transition:.15s;}
.global-search-all:hover{background:var(--cream-100);}
.global-search-suggestions{padding:0 0 8px;}
.gss-label{display:block; padding:8px 20px 4px; font-size:12px; font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.5px;}

/* ---------- Responsive ---------- */
@media(max-width:870px){
  .hero-grid{grid-template-columns:1fr; padding-top:20px;}
  .hero-visual{display:none;}
  .grid-cards{grid-template-columns:repeat(2,1fr);}
  .about-grid,.contact-grid,.detail-wrap{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .filters-bar{grid-template-columns:repeat(2,1fr); margin-top:0;}
  .search-row{margin-top:-25px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-box{border-left:none; border-bottom:1px solid var(--line-dark);}
  .admin-shell{grid-template-columns:1fr;}
  .admin-side{position:relative; height:auto;}
  .footer-grid{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .side-card{position:static;}
}
@media(max-width:640px){
  .grid-cards{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .filters-bar{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr 1fr;}
  .kpi-row{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap; gap:18px;}
}
/* ---
------- Contact Registration Modal ---------- */
.reg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.reg-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
}
.reg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.reg-modal-header h3 {
    font-size: 18px;
    font-family: 'Reem Kufi', serif;
    margin: 0;
}
.reg-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}
.reg-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reg-modal-desc {
    font-size: 14px;
    color: #555;
    margin: 0;
}
.reg-modal-body .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reg-modal-body .form-input {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Tajawal', sans-serif;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.reg-modal-body .form-input:focus {
    border-color: var(--gold-500, #CBA135);
}
.reg-modal-body .form-error {
    font-size: 12px;
    color: #dc3545;
}
.reg-submit {
    width: 100%;
    margin-top: 4px;
}
.otp-input {
    text-align: center;
    font-size: 24px !important;
    letter-spacing: 10px;
    font-weight: 700;
    padding: 14px !important;
}
.otp-step {
    text-align: center;
}
.otp-delivery-warning {
    font-size: 13px;
    color: #856404;
    background: #fff3cd;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}
.otp-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}
.otp-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.otp-link {
    background: none;
    border: none;
    color: var(--gold-500, #CBA135);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0;
}
.otp-link:hover {
    text-decoration: underline;
}
.otp-link-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    text-decoration: none !important;
}
.otp-cancel {
    color: var(--muted, #888);
}
.otp-attempts-count {
    font-size: 12px;
    color: var(--muted, #888);
}
.otp-skip-section {
    text-align: center;
}
.otp-skip-warning {
    font-size: 12px;
    color: var(--red, #dc3545);
    background: #fff3cd;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 0 6px;
}
.form-error-banner {
    background: #fff3cd;
    color: var(--red, #dc3545);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}
.reg-success {
    text-align: center;
    padding: 12px;
    background: #d4edda;
    border-radius: 10px;
    color: #155724;
    font-size: 14px;
}
.reg-success p {
    margin: 0 0 8px;
}
.revealed-phone {
    display: inline-block;
    margin-top: 8px;
    font-size: 18px;
}
.reg-redirect-note {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}
.reg-done {
    text-align: center;
}
[wire\:id] > .btn-action {
    width: 100%;
}

.otp-welcome-back {
    font-size: 14px;
    color: #155724;
    background: #d4edda;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
    font-weight: 600;
    text-align: center;
}

.otp-input-locked {
    opacity: 0.4;
    background: #f5f5f5 !important;
    cursor: not-allowed;
}
.otp-locked-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fff3cd;
    border-radius: 10px;
    text-align: center;
}
.otp-locked-state p {
    color: #856404;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.otp-attempts-count {
    font-size: 12px;
    color: #888;
}