/* =========================================================
   Morocco Luxury Rent — نظام التصميم الأساسي
   هوية بصرية: أسود فاخر + تدرج ذهبي (فق الموقع الحقيقي للعميل)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cairo:wght@500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root{
  /* ألوان الهوية — ذهبي فاخر على خلفية داكنة */
  --majorelle: #D4AF37;
  --majorelle-light: #F4C542;
  --majorelle-dark: #A87522;
  --brass: #D4AF37;
  --brass-light: #F4C542;
  --clay: #C0533A;
  --clay-light: #D97757;
  --whatsapp: #25D366;

  /* الوضع الداكن الفاخر (الافتراضي — يطابق هوية العلامة الحقيقية) */
  --bg: #05070B;
  --bg-elevated: #0E121B;
  --bg-soft: rgba(255,255,255,0.05);
  --ink: #FFFFFF;
  --ink-soft: #AEB7C4;
  --ink-faint: #7D8695;
  --line: rgba(255,255,255,0.13);
  --glass-bg: rgba(5,7,11,0.85);
  --glass-border: rgba(255,255,255,0.12);
  --shadow-soft: 0 14px 34px rgba(0,0,0,0.35);
  --shadow-lift: 0 24px 60px rgba(0,0,0,0.5);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --font-display: 'Inter', 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', 'Cairo', sans-serif;

  --container: 1240px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

[data-theme="light"]{
  --bg: #F4EFE5;
  --bg-elevated: #FFFFFF;
  --bg-soft: #EAE2D2;
  --ink: #1B1D2A;
  --ink-soft: #4B4E60;
  --ink-faint: #83869A;
  --line: rgba(27,29,42,0.12);
  --glass-bg: rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.4);
  --shadow-soft: 0 10px 30px rgba(27,29,42,0.08);
  --shadow-lift: 0 20px 50px rgba(27,29,42,0.16);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  direction:rtl;
  line-height:1.7;
  transition:background var(--transition), color var(--transition);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

h1,h2,h3,h4,.font-display{ font-family:var(--font-display); font-weight:800; line-height:1.25; letter-spacing:-.01em; }
h1{ font-size:clamp(2.2rem,4.4vw,3.6rem); }
h2{ font-size:clamp(1.7rem,3vw,2.5rem); }
h3{ font-size:1.3rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.08em; color:var(--brass); text-transform:uppercase;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--brass); border-radius:2px; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }

/* ===== شريط التنقل ===== */
.navbar{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(16px) saturate(140%);
  background:var(--glass-bg);
  border-bottom:1px solid var(--glass-border);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:.01em; white-space:nowrap; }
.brand-word{ display:flex; flex-direction:column; line-height:1.05; }
.brand-word b{ color:var(--brass-light); font-weight:800; }
[data-theme="light"] .brand-word b{ color:#8a6a1e; }
@media (max-width:420px){ .brand{ font-size:.88rem; } }
.brand .mark{
  width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.brand .mark img{ width:100%; height:100%; object-fit:contain; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:.95rem; font-weight:600; color:var(--ink-soft); transition:color var(--transition); position:relative; }
.nav-links a:hover, .nav-links a.active{ color:var(--brass-light); }
[data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active{ color:var(--majorelle-dark); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; }
#navMobileActions{ display:none; }
.hide-mobile{ display:inline-flex; }

.icon-btn{
  width:40px; height:40px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:var(--bg-elevated); display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:var(--transition);
}
.icon-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }

/* ===== أزرار ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius-pill); font-weight:700; font-size:.95rem;
  border:1px solid transparent; transition:var(--transition); white-space:nowrap;
}
.btn-primary{ background:linear-gradient(135deg,var(--majorelle-light),var(--majorelle),var(--majorelle-dark)); color:#08111F; box-shadow:0 10px 26px rgba(212,175,55,.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(212,175,55,.45); }
.btn-gold{ background:linear-gradient(135deg,var(--brass),var(--brass-light)); color:#241b04; box-shadow:0 10px 24px rgba(201,162,75,.35); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(201,162,75,.45); }
.btn-outline{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--majorelle); color:var(--majorelle); }
.btn-ghost{ background:var(--bg-soft); color:var(--ink); }
.btn-ghost:hover{ background:var(--line); }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ===== بطاقات زجاجية / Glassmorphism ===== */
.glass{
  background:var(--glass-bg); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg);
}
.card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); transition:var(--transition);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

/* ===== خط الطريق — العنصر التوقيعي ===== */
.route-line{
  position:relative; height:2px; width:100%;
  background-image:repeating-linear-gradient(90deg, var(--brass) 0 14px, transparent 14px 26px);
  opacity:.6;
}
.route-line.vertical{ height:100%; width:2px; background-image:repeating-linear-gradient(180deg, var(--brass) 0 14px, transparent 14px 26px); }
.route-dot{
  width:10px; height:10px; border-radius:50%; background:var(--brass);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--brass) 20%, transparent);
}
.route-car{
  position:absolute; top:50%; translate:0 -50%; font-size:1.1rem;
  animation:drive 6s linear infinite;
}
@keyframes drive{ 0%{ right:0%; } 100%{ right:100%; } }

/* ===== خلفية القسم الرئيسي (Hero) ===== */
/* ===== سلايدر الهيرو الرئيسي (صور حقيقية) ===== */
.hero-slider{ position:relative; height:min(88vh, 780px); min-height:560px; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 900ms ease;
  background-size:cover; background-position:center 30%; display:flex; align-items:center;
}
.hero-slide.active{ opacity:1; visibility:visible; }
.hero-slide-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(5,7,11,0.95) 0%, rgba(5,7,11,0.55) 45%, rgba(5,7,11,0.35) 100%),
    linear-gradient(90deg, rgba(5,7,11,0.75) 0%, rgba(5,7,11,0.15) 55%);
}
.hero-slide-content{ position:relative; z-index:2; color:#fff; max-width:640px; }
.hero-slide-content h1{ font-size:clamp(2rem,4.6vw,3.6rem); color:#fff; margin-top:10px; }
.hero-slide-content p{ color:rgba(255,255,255,.82); font-size:1.05rem; max-width:520px; margin-top:14px; }
.hero-slider-dots{ position:absolute; bottom:96px; left:50%; translate:-50% 0; z-index:3; display:flex; gap:10px; }
.hero-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; transition:var(--transition); }
.hero-dot.active{ background:var(--brass-light); width:26px; border-radius:6px; }
.hero-stats-bar{
  position:absolute; bottom:0; left:0; right:0; z-index:3; padding:20px 0;
  background:linear-gradient(0deg, rgba(5,7,11,0.9), transparent);
}
.hero-stats-bar .stat b{ font-size:1.5rem; }
.hero-stats-bar .stat span{ font-size:.78rem; }
@media (max-width:720px){
  .hero-slider{ height:auto; min-height:640px; padding-bottom:120px; }
  .hero-slider-dots{ bottom:118px; }
}

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--majorelle) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 60%),
    var(--bg);
  padding-top:64px;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero-visual{
  position:relative; aspect-ratio:4/3.1; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--majorelle) 0%, var(--majorelle-dark) 60%, #0e1533 100%);
  overflow:hidden; box-shadow:var(--shadow-lift);
}
.hero-visual .badge-float{
  position:absolute; padding:14px 18px; border-radius:var(--radius-md);
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:.85rem;
}

/* ===== شارات ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--radius-pill);
  font-size:.78rem; font-weight:700; background:var(--bg-soft); color:var(--ink-soft);
}
.badge-brass{ background:color-mix(in srgb, var(--brass) 18%, transparent); color:var(--brass-light); }
[data-theme="light"] .badge-brass{ color:#8a6a1e; }
.badge-majorelle{ background:color-mix(in srgb, var(--majorelle) 14%, transparent); color:var(--majorelle-light); }
[data-theme="light"] .badge-majorelle{ color:var(--majorelle-dark); }
.badge-clay{ background:color-mix(in srgb, var(--clay) 16%, transparent); color:var(--clay); }

/* ===== شبكات ===== */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ===== بطاقة سيارة ===== */
.car-card{ display:flex; flex-direction:column; overflow:hidden; }
.car-media{
  position:relative; aspect-ratio:16/10;
  background:linear-gradient(135deg, var(--bg-soft), var(--glass-border));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.car-media svg{ width:64%; opacity:.9; filter:drop-shadow(0 12px 18px rgba(0,0,0,.18)); transition:transform .5s ease; }
.car-card:hover .car-media svg{ transform:translateY(-4px) scale(1.03); }
.car-media .fav-btn{ position:absolute; top:12px; left:12px; }
.car-body{ padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.car-specs{ display:flex; flex-wrap:wrap; gap:8px; }
.car-spec{ display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--ink-faint); }
.car-price{ display:flex; align-items:baseline; gap:6px; }
.car-price b{ font-family:var(--font-display); font-size:1.5rem; color:var(--brass-light); }
[data-theme="light"] .car-price b{ color:var(--majorelle-dark); }
.car-price span{ font-size:.8rem; color:var(--ink-faint); }
.rating{ display:flex; align-items:center; gap:4px; font-size:.85rem; font-weight:700; color:var(--brass); }

/* ===== نماذج / حقول ===== */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.85rem; font-weight:700; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg-elevated); color:var(--ink); font-size:.95rem; transition:var(--transition); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--majorelle); box-shadow:0 0 0 4px color-mix(in srgb, var(--majorelle) 16%, transparent);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ===== نظام الخطوات (رحلة) للحجز ===== */
.journey-steps{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:40px; }
.journey-step{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; }
.journey-step .stop{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); color:var(--ink-faint); font-weight:800; border:2px solid var(--line); z-index:2;
  transition:var(--transition);
}
.journey-step.active .stop, .journey-step.done .stop{ background:var(--majorelle); border-color:var(--majorelle); color:#fff; }
.journey-step .label{ font-size:.8rem; font-weight:700; color:var(--ink-faint); }
.journey-step.active .label{ color:var(--majorelle); }
.journey-step:not(:last-child)::after{
  content:''; position:absolute; top:19px; right:calc(-50% + 19px); width:calc(100% - 38px); height:2px;
  background-image:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); z-index:1;
}
.journey-step.done:not(:last-child)::after{ background-image:repeating-linear-gradient(90deg, var(--brass) 0 8px, transparent 8px 14px); }

/* ===== تذييل ===== */
footer{ background:var(--bg-elevated); border-top:1px solid var(--line); padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:28px; padding-bottom:40px; }
.footer-bottom{ border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.85rem; color:var(--ink-faint); }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ color:var(--ink-soft); font-size:.9rem; transition:color var(--transition); }
.footer-links a:hover{ color:var(--majorelle); }
.social-row{ display:flex; gap:10px; margin-top:16px; }

/* ===== سكيلتون تحميل ===== */
.skeleton{ position:relative; overflow:hidden; background:var(--bg-soft); border-radius:var(--radius-sm); }
.skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 6%, transparent), transparent);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(-100%); } }

/* ===== أدوات مساعدة ===== */
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .mb-48{margin-bottom:48px;}
.text-center{ text-align:center; }
.w-full{ width:100%; }
.divider{ height:1px; background:var(--line); border:none; margin:32px 0; }
.pill-toggle{ display:inline-flex; background:var(--bg-soft); border-radius:var(--radius-pill); padding:4px; gap:4px; }
.pill-toggle button{ padding:9px 18px; border-radius:var(--radius-pill); border:none; background:transparent; font-weight:700; font-size:.85rem; color:var(--ink-faint); transition:var(--transition); }
.pill-toggle button.active{ background:var(--bg-elevated); color:var(--majorelle); box-shadow:var(--shadow-soft); }
.chip{ padding:9px 16px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--bg-elevated); font-size:.85rem; font-weight:600; color:var(--ink-soft); transition:var(--transition); }
.chip.active, .chip:hover{ border-color:var(--majorelle); color:var(--majorelle); }
.stat{ text-align:center; }
.stat b{ font-family:var(--font-display); font-size:2.2rem; display:block; background:linear-gradient(135deg,var(--majorelle),var(--brass)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== ريفيل عند التمرير ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== توست الإشعارات ===== */
.toast{
  position:fixed; bottom:24px; left:50%; translate:-50% 0; z-index:999;
  background:var(--ink); color:var(--bg); padding:14px 24px; border-radius:var(--radius-pill);
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none; transition:all .35s ease;
}
.toast.show{ opacity:1; translate:-50% -10px; }

/* ===== صفحة 404 ===== */
/* ===== زر واتساب العائم ===== */
.whatsapp-fab{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background:var(--whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.45);
  transition:var(--transition);
  animation:wa-pulse 2.4s infinite;
}
.whatsapp-fab:hover{ transform:scale(1.08); }
@keyframes wa-pulse{
  0%,100%{ box-shadow:0 12px 30px rgba(37,211,102,.45); }
  50%{ box-shadow:0 12px 30px rgba(37,211,102,.45), 0 0 0 10px rgba(37,211,102,.12); }
}
@media (max-width:480px){ .whatsapp-fab{ width:50px; height:50px; bottom:16px; inset-inline-end:16px; } }

.error-page{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; }

@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column; padding:32px 24px;
    transform:translateX(100%); transition:transform var(--transition); z-index:90;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .journey-step .label{ display:none; }
  #navMobileActions{ display:flex; flex-direction:column; }
  .hide-mobile{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}