@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Cairo:wght@400;600;700&display=swap');

:root {
  /* ألوان مبهجة — تبقى نفسها */
  --blue:   #4f8ef7;
  --sky:    #38bdf8;
  --teal:   #2dd4bf;
  --green:  #4ade80;
  --orange: #fb923c;
  --purple: #a78bfa;
  --pink:   #f472b6;
  --yellow: #fde047;

  /* خلفية داكنة متدرجة */
  --bg-from: #0f172a;
  --bg-to:   #1e1b4b;

  /* زجاج */
  --glass:       rgba(255,255,255,0.07);
  --glass-hover: rgba(255,255,255,0.13);
  --glass-strong:rgba(255,255,255,0.12);
  --glass-border:rgba(255,255,255,0.15);
  --glass-border-bright: rgba(255,255,255,0.25);
  --blur: blur(18px);
  --blur-sm: blur(10px);

  /* نصوص */
  --text:  #f1f5f9;
  --muted: rgba(241,245,249,0.55);

  /* تدرجات */
  --grad-main:  linear-gradient(135deg,#4f8ef7,#38bdf8);
  --grad-warm:  linear-gradient(135deg,#fb923c,#fde047);
  --grad-cool:  linear-gradient(135deg,#a78bfa,#f472b6);
  --grad-green: linear-gradient(135deg,#2dd4bf,#4ade80);
  --grad-bg:    linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f2d4a 100%);

  --shadow:    0 8px 32px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);
  --glow-blue: 0 0 40px rgba(79,142,247,0.25);
  --glow-purple: 0 0 40px rgba(167,139,250,0.2);

  --radius:    16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Cairo',sans-serif;
  background: var(--grad-bg);
  min-height:100vh;
  color:var(--text);
  direction:rtl;
  overflow-x:hidden;
  line-height:1.7;
}

/* ===== ضوء خلفية متحرك ===== */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(79,142,247,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(167,139,250,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 10%, rgba(56,189,248,0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 80%, rgba(244,114,182,0.1) 0%, transparent 40%);
}

/* ===== NAVBAR — زجاجي ===== */
nav {
  position:fixed; top:0; right:0; left:0; z-index:1000;
  height:68px; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(15,23,42,0.6);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,0.05), var(--shadow);
}

.nav-logo {
  font-family:'Tajawal',sans-serif;
  font-size:1.35rem; font-weight:900;
  background:var(--grad-main);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; line-height:1.2; display:flex; align-items:center; gap:8px;
}
.nav-logo span {
  display:block; font-size:0.62rem; font-weight:400;
  color:var(--muted); -webkit-text-fill-color:rgba(241,245,249,0.55);
}

.nav-links { display:flex; gap:4px; list-style:none; align-items:center; }
.nav-links a {
  color:var(--muted); text-decoration:none; font-size:0.88rem;
  font-weight:600; padding:8px 16px; border-radius:50px; transition:all 0.25s;
  display:flex; align-items:center; gap:6px;
}
.nav-links a:hover {
  color:var(--text);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--blur-sm);
}
.nav-links a.active { color:var(--blue); }

.nav-cta {
  background:var(--glass-strong) !important;
  color:var(--text) !important;
  border:1px solid var(--glass-border-bright) !important;
  backdrop-filter:var(--blur-sm) !important;
  font-weight:700 !important;
  padding:9px 22px !important; border-radius:50px !important;
  position:relative; overflow:hidden !important;
  transition:all 0.3s !important;
}
.nav-cta::before {
  content:''; position:absolute; inset:0;
  background:var(--grad-main); opacity:0; transition:opacity 0.3s;
}
.nav-cta:hover::before { opacity:1; }
.nav-cta:hover { transform:translateY(-2px) !important; box-shadow:var(--glow-blue) !important; }
.nav-cta > * { position:relative; z-index:1; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; z-index:1100; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===== SECTIONS ===== */
section { padding:100px 40px; position:relative; z-index:1; }
.container { max-width:1140px; margin:0 auto; }

/* ===== HERO ===== */
.hero {
  min-height:100vh; padding:120px 40px 80px;
  display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:1;
}

.hero-inner {
  max-width:1140px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:var(--blur-sm);
  color:var(--sky); padding:7px 18px; border-radius:50px;
  font-size:0.82rem; font-weight:700; margin-bottom:24px;
}

.hero h1 {
  font-family:'Tajawal',sans-serif;
  font-size:clamp(2.4rem,5vw,4rem); font-weight:900;
  line-height:1.2; margin-bottom:20px; color:var(--text);
}
.hero h1 .hl {
  background:var(--grad-main);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero p { font-size:1rem; color:var(--muted); max-width:460px; margin-bottom:36px; line-height:1.9; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }

/* Hero floating glass cards */
.hero-visual { position:relative; height:400px; }
.float-card {
  position:absolute;
  background:var(--glass);
  border:1px solid var(--glass-border-bright);
  border-radius:var(--radius);
  padding:20px 22px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px;
  animation:float 3s ease-in-out infinite;
}
.float-card:nth-child(2){animation-delay:.8s;}
.float-card:nth-child(3){animation-delay:1.6s;}
.float-card.c1{top:30px;right:20px;width:220px;}
.float-card.c2{top:160px;right:160px;width:200px;}
.float-card.c3{top:290px;right:40px;width:240px;}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.fc-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:white;}
.fc-icon.blue{background:var(--grad-main);}
.fc-icon.green{background:var(--grad-green);}
.fc-icon.warm{background:var(--grad-warm);}
.fc-label{font-size:0.75rem;color:var(--muted);}
.fc-val{font-family:'Tajawal',sans-serif;font-size:1.2rem;font-weight:900;color:var(--text);}

/* ===== STATS BAR — زجاجي ===== */
.stats-row {
  max-width:1140px; margin:60px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.stat-box {
  padding:28px 20px; text-align:center;
  border-left:1px solid var(--glass-border);
  transition:background 0.3s;
}
.stat-box:last-child{border-left:none;}
.stat-box:hover{background:var(--glass-hover);}
.stat-box i{font-size:1.6rem;margin-bottom:10px;display:block;}
.stat-num {
  font-family:'Tajawal',sans-serif;font-size:2rem;font-weight:900;line-height:1;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-lbl{font-size:0.8rem;color:var(--muted);margin-top:6px;}

/* ===== SECTION HEADER ===== */
.sec-tag {
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--sky); background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:var(--blur-sm); padding:6px 16px; border-radius:50px; margin-bottom:16px;
}
.sec-title { font-family:'Tajawal',sans-serif; font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; color:var(--text); margin-bottom:14px; }
.sec-sub { color:var(--muted); font-size:1rem; max-width:500px; }

/* ===== SERVICES — بطاقات زجاجية ===== */
.services-section { background:transparent; }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }

.srv-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
  position:relative; overflow:hidden; cursor:default;
}

/* خط لوني في الأعلى */
.srv-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--card-color, var(--grad-main));
}

/* ضوء داخلي */
.srv-card::after {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:var(--card-color, var(--grad-main)); opacity:0;
  transition:opacity 0.4s; pointer-events:none;
}

.srv-card:hover {
  background:var(--glass-hover);
  border-color:var(--glass-border-bright);
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg), 0 0 40px rgba(79,142,247,0.15);
}
.srv-card:hover::after { opacity:0.06; }

.srv-icon {
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:white;margin-bottom:20px;
  background:var(--card-color, var(--grad-main));
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.srv-card h3 { font-family:'Tajawal',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:10px; }
.srv-card p  { color:var(--muted);font-size:0.88rem;line-height:1.85; }

/* ===== MAP ===== */
.map-section{background:transparent;}
.map-layout{display:grid;grid-template-columns:360px 1fr;gap:32px;align-items:start;margin-top:56px;}
.map-info{display:flex;flex-direction:column;gap:14px;}

.info-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:20px 22px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  display:flex;align-items:center;gap:16px;transition:all 0.3s;
}
.info-card:hover { background:var(--glass-hover); border-color:var(--glass-border-bright); transform:translateX(-4px); }

.info-ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:white;}
.info-card h4{font-size:0.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;}
.info-card p{font-size:0.92rem;color:var(--text);font-weight:600;}

.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-border);height:420px;box-shadow:var(--shadow-lg);}
.map-frame iframe{width:100%;height:100%;border:none;}

/* ===== CTA ===== */
.cta-section {
  text-align:center;padding:100px 40px;
  position:relative;z-index:1;
}
.cta-inner {
  max-width:700px;margin:0 auto;
  background:var(--glass);
  border:1px solid var(--glass-border-bright);
  border-radius:var(--radius-lg);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  padding:70px 50px;
  box-shadow:var(--shadow-lg), var(--glow-blue);
}
.cta-section h2{font-family:'Tajawal',sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:var(--text);margin-bottom:16px;}
.cta-section p{color:var(--muted);font-size:1rem;margin-bottom:40px;}

/* ===== BUTTONS ===== */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--grad-main);
  color:white;padding:13px 32px;border-radius:50px;
  font-family:'Cairo',sans-serif;font-size:0.92rem;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all 0.3s;
  box-shadow:0 6px 24px rgba(79,142,247,0.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(79,142,247,0.5);}

.btn-primary.outline {
  background:var(--glass);
  border:1px solid var(--glass-border-bright);
  backdrop-filter:var(--blur-sm);
  box-shadow:none;
}
.btn-primary.outline:hover{background:var(--glass-hover);box-shadow:var(--glow-blue);}

.btn-secondary {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);
  color:var(--text);padding:12px 28px;border-radius:50px;
  font-family:'Cairo',sans-serif;font-size:0.92rem;font-weight:700;
  border:1px solid var(--glass-border);
  backdrop-filter:var(--blur-sm);
  text-decoration:none;cursor:pointer;transition:all 0.3s;
}
.btn-secondary:hover{background:var(--glass-hover);border-color:var(--glass-border-bright);color:var(--sky);}

/* ===== FORM — زجاجي ===== */
.booking-section{background:transparent;}
.booking-wrap{max-width:720px;margin:56px auto 0;}

.form-shell {
  background:var(--glass);
  border:1px solid var(--glass-border-bright);
  border-radius:var(--radius-lg);
  padding:48px 44px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-lg), var(--glow-blue);
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1/-1;}

.form-group label{font-size:0.82rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;}
.form-group label i{color:var(--sky);}
.form-group label span{color:var(--orange);}

.form-group input,
.form-group select,
.form-group textarea {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--text);
  font-family:'Cairo',sans-serif;font-size:0.92rem;
  outline:none;transition:all 0.3s;
  direction:rtl;width:100%;
  backdrop-filter:var(--blur-sm);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--blue);
  background:var(--glass-hover);
  box-shadow:0 0 0 3px rgba(79,142,247,0.2);
}
.form-group select option{background:#1e1b4b;color:var(--text);}
.form-group textarea{resize:vertical;min-height:110px;}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer;opacity:0.6;}

/* Map */
#map-picker{height:300px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);overflow:hidden;margin-top:8px;transition:border-color 0.3s;}
#map-picker:hover{border-color:var(--blue);}

.map-hint{margin-top:10px;padding:10px 15px;background:rgba(79,142,247,0.1);border:1px solid rgba(79,142,247,0.25);border-radius:var(--radius-sm);font-size:0.82rem;color:var(--sky);display:flex;align-items:center;gap:8px;}
.loc-ok{display:none;margin-top:8px;padding:10px 15px;background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.25);border-radius:var(--radius-sm);font-size:0.85rem;color:var(--green);align-items:center;gap:8px;}
.loc-ok.show{display:flex;}

.btn-wa {
  width:100%;padding:16px;
  background:linear-gradient(135deg,#25D366,#1aa354);
  color:white;border:none;border-radius:50px;
  font-family:'Cairo',sans-serif;font-size:1rem;font-weight:800;
  cursor:pointer;transition:all 0.3s;
  box-shadow:0 6px 24px rgba(37,211,102,0.3);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(37,211,102,0.45);}

.form-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--muted);font-size:0.82rem;}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:var(--glass-border);}

/* ===== ALERTS ===== */
.alert{padding:13px 18px;border-radius:var(--radius-sm);margin-bottom:22px;font-size:0.9rem;font-weight:700;display:none;backdrop-filter:var(--blur-sm);}
.alert.success{background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);color:var(--green);display:block;}
.alert.error{background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);color:#f87171;display:block;}

/* ===== LOGIN — زجاجي ===== */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1;}

.login-shell {
  width:100%;max-width:420px;
  background:var(--glass);
  border:1px solid var(--glass-border-bright);
  border-radius:var(--radius-lg);
  padding:52px 40px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-lg), var(--glow-purple);
  text-align:center;position:relative;overflow:hidden;
}
.login-shell::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-cool);}

.login-icon{width:72px;height:72px;background:var(--grad-cool);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:white;margin:0 auto 20px;box-shadow:0 8px 24px rgba(167,139,250,0.4);}
.login-shell h2{font-family:'Tajawal',sans-serif;font-size:1.7rem;font-weight:900;margin-bottom:6px;color:var(--text);}
.login-shell>p{color:var(--muted);font-size:0.88rem;margin-bottom:32px;}

.field-wrap{position:relative;margin-bottom:16px;text-align:right;}
.field-label{font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:7px;}
.field-label i{color:var(--purple);}
.field-wrap input {
  width:100%;background:var(--glass);border:1px solid var(--glass-border);
  border-radius:12px;padding:14px 44px 14px 44px;
  color:var(--text);font-family:'Cairo',sans-serif;font-size:1rem;
  outline:none;transition:all 0.3s;direction:ltr;text-align:center;letter-spacing:4px;
  backdrop-filter:var(--blur-sm);
}
.field-wrap input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(167,139,250,0.2);background:var(--glass-hover);}
.field-wrap input::placeholder{letter-spacing:0;color:var(--muted);}
.f-ico{position:absolute;right:14px;bottom:14px;color:var(--muted);font-size:1rem;}
.toggle-vis{position:absolute;left:14px;bottom:14px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.9rem;transition:color 0.2s;}
.toggle-vis:hover{color:var(--purple);}

.login-btn{width:100%;padding:15px;background:var(--grad-cool);color:white;border:none;border-radius:50px;font-family:'Cairo',sans-serif;font-size:1rem;font-weight:800;cursor:pointer;transition:all 0.3s;margin-top:4px;box-shadow:0 6px 24px rgba(167,139,250,0.35);display:flex;align-items:center;justify-content:center;gap:8px;}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(167,139,250,0.5);}
.login-btn:disabled{opacity:0.65;cursor:not-allowed;transform:none;}
.login-footer{margin-top:24px;}
.login-footer a{color:var(--muted);font-size:0.83rem;text-decoration:none;transition:color 0.2s;}
.login-footer a:hover{color:var(--purple);}

/* ===== DASHBOARD ===== */
#dashboard-screen{display:none;padding-top:88px;min-height:100vh;}

.dash-top{max-width:1250px;margin:0 auto 24px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.dash-top h1{font-family:'Tajawal',sans-serif;font-size:1.8rem;font-weight:900;color:var(--text);display:flex;align-items:center;gap:12px;}
.dash-top h1 i{color:var(--blue);}
.dash-top p{color:var(--muted);font-size:0.85rem;margin-top:4px;}

.kpi-row{max-width:1250px;margin:0 auto 24px;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}

.kpi {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:22px 20px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  display:flex;align-items:center;gap:16px;transition:all 0.3s;
}
.kpi:hover{background:var(--glass-hover);border-color:var(--glass-border-bright);transform:translateY(-3px);box-shadow:var(--shadow);}
.kpi-ic{width:50px;height:50px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:white;}
.kpi-val{font-family:'Tajawal',sans-serif;font-size:1.9rem;font-weight:900;line-height:1;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.kpi-lbl{font-size:0.78rem;color:var(--muted);margin-top:3px;}

.tbl-wrap{max-width:1250px;margin:0 auto 60px;padding:0 24px;}
.tbl-shell{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow);}
.tbl-top{padding:20px 24px;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.tbl-top h3{font-family:'Tajawal',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;}
.tbl-top h3 i{color:var(--blue);}

.search-wrap{position:relative;}
.s-inp{background:var(--glass);border:1px solid var(--glass-border);border-radius:50px;padding:9px 16px 9px 40px;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.85rem;outline:none;direction:rtl;width:220px;transition:all 0.3s;backdrop-filter:var(--blur-sm);}
.s-inp::placeholder{color:var(--muted);}
.s-inp:focus{border-color:var(--blue);width:260px;}
.search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:0.9rem;}

table{width:100%;border-collapse:collapse;}
th{background:rgba(79,142,247,0.08);padding:13px 16px;text-align:right;font-size:0.78rem;font-weight:700;color:var(--sky);letter-spacing:0.5px;white-space:nowrap;}
td{padding:14px 16px;border-bottom:1px solid var(--glass-border);font-size:0.87rem;vertical-align:middle;color:var(--text);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--glass);}

.status-sel{background:transparent;border:none;font-family:'Cairo',sans-serif;font-size:0.8rem;font-weight:700;cursor:pointer;outline:none;border-radius:50px;padding:6px 14px;transition:all 0.25s;}
.s-new     {background:rgba(253,224,71,0.15);  color:var(--yellow);border:1px solid rgba(253,224,71,0.3);}
.s-progress{background:rgba(79,142,247,0.15);  color:var(--blue);  border:1px solid rgba(79,142,247,0.3);}
.s-done    {background:rgba(74,222,128,0.15);   color:var(--green); border:1px solid rgba(74,222,128,0.3);}
.s-cancel  {background:rgba(248,113,113,0.15);  color:#f87171;      border:1px solid rgba(248,113,113,0.3);}

.map-anc{color:var(--sky);text-decoration:none;font-size:0.82rem;display:inline-flex;align-items:center;gap:4px;transition:opacity 0.2s;}
.map-anc:hover{opacity:0.7;}
.empty-row{text-align:center;padding:60px;color:var(--muted);font-size:0.95rem;}

/* ===== FOOTER ===== */
footer{padding:40px;text-align:center;position:relative;z-index:1;border-top:1px solid var(--glass-border);}
.footer-brand{font-family:'Tajawal',sans-serif;font-size:1.3rem;font-weight:900;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:10px;}
footer p{color:var(--muted);font-size:0.82rem;}

/* ===== ANIMATIONS ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.on{opacity:1;transform:translateY(0);}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.shake{animation:shake 0.4s ease;}

/* ===== LEAFLET ===== */
.leaflet-container{background:#0f172a;}
.leaflet-tile{filter:brightness(0.8) saturate(0.9);}
.leaflet-control-zoom a{background:var(--glass) !important;color:var(--text) !important;border-color:var(--glass-border) !important;backdrop-filter:var(--blur-sm) !important;}
.leaflet-popup-content-wrapper{background:rgba(15,23,42,0.9);color:var(--text);border-radius:12px;border:1px solid var(--glass-border);backdrop-filter:var(--blur);}
.leaflet-popup-tip{background:rgba(15,23,42,0.9);}

/* ===== HAMBURGER BASE ===== */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  z-index: 1100;
  position: relative;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* overlay — مخفي دائماً على الديسكتوب، يُظهره JS على الموبايل */
.nav-overlay {
  display: none;
  position: fixed; 
  z-index: 1100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-overlay.open { display: block; }

/* =====================================================
   RESPONSIVE — Mobile First
   Breakpoints:
     ≤ 1024px  Laptops / Large Tablets
     ≤  900px  Tablets (Portrait)
     ≤  768px  Mobile Landscape / Small Tablets
     ≤  480px  Mobile Portrait
   ===================================================== */

/* ── z-index map (ثابتة لمنع التعارض) ──
   Page content  : 1
   Sticky nav    : 1000
   Overlay       : 1100
   Side drawer   : 1200
   Hamburger btn : 1300
*/

/* ─────────────────────────────────────
   1. Laptops ≤ 1024px
───────────────────────────────────── */
@media (max-width: 1024px) {
  nav { padding: 0 28px; }
  section { padding: 80px 28px; }
  .hero { padding: 110px 28px 70px; }
  .hero-inner { gap: 40px; }
  .hero-visual { height: 340px; }
  .float-card.c1 { width: 190px; }
  .float-card.c2 { width: 175px; right: 130px; }
  .float-card.c3 { width: 210px; }
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .map-layout { grid-template-columns: 300px 1fr; gap: 22px; }
  .form-shell { padding: 40px 34px; }
  .cta-inner { padding: 56px 40px; }
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
}

/* ─────────────────────────────────────
   2. Tablets Portrait ≤ 900px
───────────────────────────────────── */
@media (max-width: 900px) {
  /* Hamburger يظهر */
  .hamburger { display: flex; }

  /* Drawer */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 270px;
    height: 100dvh;
    background: #0d1223;
    border-left: 1px solid var(--glass-border);
    padding: 0;
    gap: 0;
    list-style: none;
    transform: translateX(110%);
    transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1200;
    box-shadow: -16px 0 48px rgba(0,0,0,0.7);
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }

  /* عنوان الدرّاور */
  .nav-links::before {
    content: 'القائمة';
    display: block;
    padding: 26px 20px 14px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sky);
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 12px;
  }

  .nav-links li { padding: 0 12px; margin-bottom: 6px; }

  .nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    transition: all 0.25s;
  }
  .nav-links a i { width: 22px; text-align: center; color: var(--muted); flex-shrink: 0; }
  .nav-links a:hover { background: rgba(79,142,247,0.12); border-color: rgba(79,142,247,0.3); color: var(--text); }
  .nav-links a.active { color: var(--sky); }

  .nav-links a.nav-cta {
    margin-top: 14px;
    background: var(--grad-main) !important;
    color: white !important;
    border-color: transparent !important;
    justify-content: center;
    font-weight: 800;
  }
  .nav-links a.nav-cta::before { display: none; }
  .nav-links a.nav-cta i { color: white; }

  /* Hamburger فوق كل شيء */
  .hamburger { z-index: 1300; }

  /* Hero */
  .hero { padding: 100px 24px 60px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .hero-visual { display: none; }
  .hero p { margin: 0 auto 32px; max-width: 480px; }
  .hero-btns { justify-content: center; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }

  /* Stats */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-box:nth-child(2) { border-left: 1px solid var(--glass-border); }
  .stat-box:nth-child(1),
  .stat-box:nth-child(2) { border-bottom: 1px solid var(--glass-border); }
  .stat-box { border-left: none; }
  .stat-box:nth-child(odd) { border-left: none; }
  .stat-box:nth-child(even) { border-left: 1px solid var(--glass-border); }

  /* Map */
  .map-layout { grid-template-columns: 1fr; }
  .map-frame { height: 320px; }

  /* KPIs */
  .kpi-row { grid-template-columns: repeat(2, 1fr); }

  /* Dashboard table */
  .tbl-wrap, .dash-top, .kpi-row { padding: 0 16px; }
  .dash-top { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Form */
  .form-shell { padding: 32px 24px; }
  .booking-wrap { margin-top: 36px; }

  /* CTA */
  .cta-inner { padding: 50px 32px; }

  /* Login */
  .login-shell { padding: 44px 28px; }

  /* Section */
  section { padding: 72px 24px; }
}

/* ─────────────────────────────────────
   3. Mobile ≤ 768px
───────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0 16px; height: 62px; }
  section { padding: 64px 16px; }
  .hero { padding: 90px 16px 50px; }

  /* Hero text */
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .hero p { font-size: 0.94rem; }

  /* Services: 1 column */
  .services-grid { grid-template-columns: 1fr; }
  .srv-card { padding: 24px 20px; }

  /* Stats: 2 columns mais compactes */
  .stats-row { margin-top: 24px; }
  .stat-num { font-size: 1.7rem; }
  .stat-box { padding: 20px 12px; }

  /* Form */
  .form-grid { grid-template-columns: 1fr; }
  .form-shell { padding: 26px 16px; }
  .booking-wrap { margin-top: 28px; }

  /* loc toggle */
  .loc-toggle { grid-template-columns: 1fr 1fr; gap: 10px; }
  .loc-btn { padding: 16px 12px; }
  .loc-btn i { font-size: 1.6rem; }
  .loc-btn span { font-size: 0.9rem; }

  /* Map picker */
  #map-picker { height: 250px; }

  /* CTA */
  .cta-inner { padding: 38px 16px; }
  .cta-section h2 { font-size: 1.6rem; }

  /* Login */
  .login-shell { padding: 38px 18px; max-width: 100%; }

  /* Dashboard */
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 16px 14px; }
  .kpi-val { font-size: 1.6rem; }
  table { font-size: 0.78rem; }
  th, td { padding: 10px 8px; }
  .s-inp { width: 100%; }
  .tbl-top { flex-direction: column; align-items: flex-start; }

  /* Footer */
  footer { padding: 28px 16px; }

  /* Brands */
  .brands-track-wrap { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .brands-track { display: block; }
  .brands-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    animation: none !important;
    transform: none !important;
  }
  .brands-inner .brand-item:nth-child(n+21) { display: none; }
  .brand-item { padding: 10px 10px; height: 44px; border-radius: 10px; }
}

/* ─────────────────────────────────────
   4. Small Mobile ≤ 480px
───────────────────────────────────── */
@media (max-width: 480px) {
  nav { padding: 0 14px; }
  .nav-logo { font-size: 1.1rem; }
  .nav-logo span { display: none; }

  section { padding: 56px 14px; }
  .hero { padding: 82px 14px 44px; }

  /* Hero */
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero-badge { font-size: 0.76rem; padding: 6px 14px; }
  .hero-btns { flex-direction: column; width: 100%; }
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary { width: 100%; justify-content: center; }

  /* Stats: stack 1 column on very small */
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-box { padding: 16px 8px; }
  .stat-num { font-size: 1.5rem; }
  .stat-lbl { font-size: 0.72rem; }

  /* Services */
  .srv-icon { width: 46px; height: 46px; font-size: 1.3rem; }

  /* Form */
  .form-shell { padding: 22px 14px; border-radius: 18px; }
  .btn-wa { font-size: 0.92rem; padding: 14px; }

  /* loc toggle: force 1 col if very narrow */
  .loc-toggle { grid-template-columns: 1fr; gap: 10px; }

  /* KPIs */
  .kpi-row { grid-template-columns: 1fr; }
  .kpi { padding: 14px 14px; }

  /* Table: horizontal scroll */
  .tbl-shell { overflow-x: auto; }
  table { min-width: 600px; }

  /* Login */
  .login-shell { padding: 32px 14px; }
  .login-icon { width: 58px; height: 58px; font-size: 1.5rem; }

  /* CTA */
  .cta-inner { padding: 30px 14px; }
  .cta-section h2 { font-size: 1.45rem; }

  /* Footer */
  footer { padding: 24px 14px; }

  /* Brands grid: 2 cols */
  .brands-inner { grid-template-columns: repeat(2, 1fr) !important; }

  /* Map picker */
  #map-picker { height: 220px; }

  /* Drawer width على الشاشات الصغيرة جداً */
  .nav-links { width: 85vw; }
  .sec-title { font-size: 1.6rem; }
}


.footer-dev {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 8px;
}

.footer-dev a {
  color: inherit;
  text-decoration: none;  /* إزالة الخط */
}