/* ===== BASE ===== */
body{
margin:0;
font-family:'Cairo', sans-serif;
background:
radial-gradient(circle at 20% 30%, rgba(212,255,0,0.08), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05), transparent 40%),
#050b05;
color:#fff;
}

/* ===== SECTION ===== */
.unit-calc{
padding:70px 15px;
text-align:center;
}

.unit-calc h2{
font-size:30px;
margin-bottom:30px;
background:linear-gradient(45deg,#d4ff00,#fff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ===== SELECT ===== */
.calc-box{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
max-width:1100px;
margin:auto;
}

.calc-box select{
width:100%;
padding:16px;
border-radius:14px;
font-size:15px;
font-weight:600;
background:rgba(255,255,255,0.07);
color:#fff;
border:1px solid rgba(255,255,255,0.2);
cursor:pointer;
backdrop-filter: blur(10px);
transition:.3s;

appearance:none;
background-image:url("data:image/svg+xml,%3Csvg fill='%23d4ff00' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:left 12px center;
}

.calc-box select:hover{
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(212,255,0,0.15);
border-color:#d4ff00;
}

.calc-box select option{
background:#111;
color:#fff;
}

/* ===== RESULT ===== */
.unit-result{
margin-top:40px;
padding:22px;
background:linear-gradient(135deg,#071207,#020602);
border-radius:18px;
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
animation:fadeUp .5s ease;
}

/* ================= UNIT PLAN IMAGE ================= */
.unit-plan-image{
margin-bottom:25px;

background:rgba(255,255,255,0.03);

border:1px solid rgba(255,255,255,0.06);

border-radius:18px;

padding:15px;

overflow:hidden;
}

/* IMAGE */
.unit-plan-image img{
width:100%;

max-height:420px;

object-fit:contain;

display:block;

border-radius:14px;

background:#0b120b;
}





/* ===== INFO GRID ===== */
.info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px;
margin-bottom:20px;
}

.info-grid div{
background:rgba(255,255,255,0.05);
padding:16px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.05);
transition:.3s;
}

.info-grid div:hover{
transform:translateY(-4px);
box-shadow:0 5px 15px rgba(0,0,0,0.4);
}

.info-grid span{
font-size:13px;
opacity:.7;
}

.info-grid strong{
color:#d4ff00;
display:block;
margin-top:6px;
font-size:17px;
}

/* ===== PLANS ===== */
.plans{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.plan{
background:rgba(255,255,255,0.04);
padding:18px;
border-radius:12px;
position:relative;
overflow:hidden;
transition:.3s;
}

.plan:hover{
transform:translateY(-5px);
}

.plan::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(120deg, transparent, rgba(212,255,0,0.1), transparent);
opacity:0;
transition:.4s;
}

.plan:hover::before{
opacity:1;
}

.plan.highlight{
border:2px solid #d4ff00;
box-shadow:0 0 20px rgba(212,255,0,0.25);
transform:scale(1.02);
}

/* ===== NOTE ===== */
.custom-note{
margin-top:20px;
font-size:14px;
background:rgba(212,255,0,0.08);
padding:14px;
border-radius:10px;
color:#d4ff00;
}

/* ===== BUTTON ===== */
.result-btn{
display:block;
margin-top:15px;
padding:16px;
background:#d4ff00;
color:#000;
border-radius:10px;
text-decoration:none;
font-weight:bold;
position:relative;
overflow:hidden;
transition:.3s;
}

.result-btn::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition:.5s;
}

.result-btn:hover::after{
left:100%;
}

.result-btn:hover{
transform:scale(1.03);
}

/* ===== ANIMATION ===== */
@keyframes fadeUp{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}

/* ===== RESPONSIVE ===== */
@media(max-width:992px){
.calc-box{grid-template-columns:repeat(2,1fr);}
.plans{grid-template-columns:1fr;}
}

@media(max-width:600px){
.calc-box{grid-template-columns:1fr 1fr;}
.info-grid{grid-template-columns:1fr 1fr;}
}





/* ================= EXTRA FEES ================= */
/* ================= EXTRA FEES ================= */
.extra-fees{

margin-top:25px;

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

width:100%;
}

/* BOX */
.extra-box{

width:320px;

max-width:100%;

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.06);

border-radius:16px;

padding:18px;

text-align:center;
}

/* TITLE */
.extra-box h4{
margin:0 0 10px;

font-size:15px;

color:#d4ff00;
}

/* PRICE */
.extra-box p{
margin:0 0 8px;

font-size:18px;

font-weight:700;
}

/* DESC */
.extra-box span{
font-size:13px;

opacity:.7;

line-height:1.7;

display:block;
}

/* CLUB */
.extra-box.club{
background:rgba(212,255,0,0.08);

border-color:rgba(212,255,0,0.18);
}

/* MOBILE */
@media(max-width:768px){

.extra-fees{
grid-template-columns:1fr;
}

}


/* ================= TOP HERO ================= */
/* ================= TOP HERO ================= */
.top-hero{
padding:110px 20px 40px;
max-width:1200px;
margin:auto;
position:relative;
z-index:2;
}

/* ================= FIXED HEADER ================= */
.top-bar{
position:fixed;
top:0;
left:0;
right:0;

height:72px;

display:flex;
justify-content:space-between;
align-items:center;

padding:0 18px;

background:rgba(5,11,5,0.88);
backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.06);

z-index:999;

overflow:hidden;

animation:fadeDown .8s ease;
}

/* ================= BUTTONS ================= */
.back-home,
.top-phone{
display:flex;
align-items:center;
justify-content:center;

gap:8px;

text-decoration:none;

font-size:14px;
font-weight:700;

transition:.3s;
}

/* ================= HOME ================= */
.back-home{
color:#fff;

min-width:fit-content;
white-space:nowrap;
}

/* ICON */
.back-home svg{
width:20px;
height:20px;

stroke:#d4ff00;
fill:none;
stroke-width:1.8;

transition:.3s;
}

.back-home:hover svg{
transform:translateY(-2px) scale(1.05);
filter:drop-shadow(0 0 8px rgba(212,255,0,0.35));
}

/* ================= PHONE ================= */
.top-phone{
background:#d4ff00;
color:#000;

padding:10px 18px;
border-radius:12px;

box-shadow:0 5px 18px rgba(212,255,0,0.15);

flex-shrink:0;
}

/* ================= HOVER ================= */
.back-home:hover{
opacity:.8;
}

.top-phone:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(212,255,0,0.28);
}

/* ================= CONTENT ================= */
.top-content{
text-align:center;
max-width:850px;
margin:auto auto 60px;

animation:fadeUp 1s ease;
}

.top-tag{
display:block;
font-size:12px;
letter-spacing:2px;
color:#d4ff00;
opacity:.75;
margin-bottom:14px;
}

.top-content h1{
font-size:52px;
line-height:1.3;
margin:0 0 20px;

background:linear-gradient(45deg,#d4ff00,#fff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.top-content p{
font-size:17px;
line-height:2;
opacity:.8;
margin:0;
}

/* ================= GRID ================= */
.models-grid{
display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

max-width:1200px;

margin:auto;

padding-top:10px;

animation:fadeUp 1.2s ease;
}

/* ================= CARD ================= */
.model-card{
position:relative;

height:340px;

border-radius:26px;
overflow:hidden;

cursor:pointer;

background:#000;

border:1px solid rgba(255,255,255,0.06);

transition:.45s;

box-shadow:
0 10px 35px rgba(0,0,0,0.35);
}

/* ================= HOVER ================= */
.model-card:hover{
transform:translateY(-10px);

border-color:#d4ff00;

box-shadow:
0 20px 50px rgba(0,0,0,0.45),
0 0 30px rgba(212,255,0,0.08);
}

/* ================= IMAGE ================= */
.model-card img{
position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:cover;

transition:1s;
}

/* ================= IMAGE HOVER ================= */
.model-card:hover img{
transform:scale(1.08);
}

/* ================= OVERLAY ================= */
.model-card::after{
content:"";
position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,0.92) 8%,
rgba(0,0,0,0.25) 45%,
rgba(0,0,0,0.15) 100%
);

z-index:1;
}

/* ================= TITLE ================= */
.model-card span{
position:absolute;

bottom:22px;
right:22px;

z-index:2;

font-size:24px;
font-weight:800;

color:#d4ff00;

text-shadow:
0 2px 15px rgba(0,0,0,0.8);
}

/* SMALL LABEL */
.model-card span::before{
content:"Floor Plan";

display:block;

font-size:11px;
letter-spacing:2px;

margin-bottom:5px;

opacity:.6;

color:#fff;

font-weight:400;
}

/* ================= LIGHTBOX ================= */
.img-lightbox{
position:fixed;
inset:0;

background:rgba(0,0,0,0.94);

display:none;
align-items:center;
justify-content:center;

z-index:9999;

padding:20px;
}

/* IMAGE */
.img-lightbox img{
max-width:95%;
max-height:95%;

object-fit:contain;

border-radius:18px;
}

/* CLOSE */
.close-lightbox{
position:absolute;
top:20px;
left:25px;

font-size:40px;
color:#fff;

cursor:pointer;

z-index:2;
}


/* ================= PLAN LIGHTBOX ================= */
.plan-lightbox{
position:fixed;
inset:0;

background:rgba(0,0,0,0.94);

display:none;
align-items:center;
justify-content:center;

z-index:99999;

padding:20px;
}

/* IMAGE */
.plan-lightbox img{
max-width:95%;
max-height:95%;

object-fit:contain;

border-radius:18px;

animation:zoomIn .3s ease;
}

/* CLOSE */
.close-plan-lightbox{
position:absolute;

top:20px;
left:25px;

font-size:40px;
color:#fff;

cursor:pointer;

z-index:2;
}

/* ANIMATION */
@keyframes zoomIn{

from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}

}




/* ================= ANIMATIONS ================= */
@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){

.models-grid{
grid-template-columns:1fr 1fr;
}

.top-content h1{
font-size:40px;
}

}

@media(max-width:768px){

.top-hero{
padding:95px 15px 25px;
}

/* HEADER */
.top-bar{
height:65px;
padding:0 14px;
}

/* HOME */
.back-home{
gap:6px;
}

.back-home span{
font-size:13px;
}

/* PHONE */
.top-phone{
padding:8px 12px;
font-size:13px;
border-radius:10px;
}

/* GRID */
.models-grid{
grid-template-columns:1fr;
gap:22px;
}

/* CARD */
.model-card{
height:300px;
}

/* TITLE */
.model-card span{
font-size:20px;
bottom:18px;
right:18px;
}

/* TITLE */
.top-content h1{
font-size:32px;
}

/* DESC */
.top-content p{
font-size:14px;
line-height:1.9;
}

}

@media(max-width:480px){

.model-card{
height:260px;
}

.close-lightbox{
font-size:32px;
top:15px;
left:18px;
}

}




.footer{
background:linear-gradient(180deg,#020602,#071207);
padding:50px 20px 20px;
position:relative;
overflow:hidden;
}

/* glow خفيف */
.footer::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle,#d4ff0010,transparent 70%);
top:-150px;
left:50%;
transform:translateX(-50%);
filter:blur(100px);
}

/* container */
.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:25px;
position:relative;
z-index:2;
align-items:start;
}

/* GLASS CARD لكل عمود */
.footer-container > div{
background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.05);
border-radius:14px;
padding:18px;
backdrop-filter:blur(6px);
transition:.3s;
}

.footer-container > div:hover{
border-color:#d4ff00;
transform:translateY(-4px);
}

/* BRAND */
.footer-brand h3{
font-family:'Playfair Display';
letter-spacing:6px;
font-size:22px;
background:linear-gradient(45deg,#d4ff00,#fff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.footer-brand p{
opacity:.7;
line-height:1.7;
font-size:13px;
margin-top:8px;
}

/* TITLES */
.footer h4{
color:#d4ff00;
margin-bottom:12px;
font-size:13px;
letter-spacing:1px;
}

/* SOCIALS */
.socials{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.social-btn{
display:flex;
align-items:center;
gap:6px;
padding:8px 12px;
border-radius:8px;
text-decoration:none;
color:#fff;
background:rgba(255,255,255,0.03);
border:1px solid transparent;
font-size:13px;
transition:.3s;
}

.social-btn svg{
width:17px; /* كبرناها سنة */
height:17px;
stroke:#d4ff00;
fill:none;
stroke-width:1.7; /* أسمك سنة */
}

/* hover احترافي */
.social-btn:hover{
background:rgba(212,255,0,0.12);
border-color:#d4ff00;
transform:scale(1.05);
box-shadow:0 5px 20px rgba(212,255,0,0.2);
}

.social-btn:hover svg{
transform:rotate(10deg) scale(1.1);
}

/* CONTACT */
.contact a{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
text-decoration:none;
color:#fff;
opacity:.8;
font-size:13px;
transition:.3s;
}

.contact a:hover{
color:#d4ff00;
transform:translateX(-3px);
}

/* bottom */
.footer-bottom{
margin-top:25px;
padding-top:15px;
border-top:1px solid rgba(255,255,255,0.05);
text-align:center;
font-size:12px;
opacity:.6;
letter-spacing:.5px;
}

/* responsive */
@media(max-width:768px){
.footer-container{
grid-template-columns:1fr;
text-align:center;
}

.socials{
justify-content:center;
}

.contact a{
justify-content:center;
}
}


/* ================= STATUS ================= */
.unit-status{
margin-bottom:20px;

padding:14px;

border-radius:12px;

font-weight:700;

font-size:15px;

text-align:center;
}

/* AVAILABLE */
.unit-status.available{
background:rgba(0,255,120,0.08);

border:1px solid rgba(0,255,120,0.2);

color:#6dff9c;
}

/* SOLD */
.unit-status.sold{
background:rgba(255,0,0,0.08);

border:1px solid rgba(255,0,0,0.2);

color:#ff7b7b;
}