/* styles.css */
/* =========================
   Fonts
========================= */
@font-face{
  font-family: 'NRT';
  src: url('fonts/NRT-Reg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: 'NRT';
  src: url('fonts/NRT-Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* =========================
   Root Variables
========================= */
:root{
  --brand: #1b4c6e;      /* اللون الأساسي */
  --accent: #FFC107;     /* لون مساعد: تم تغيير اللون لتباين أفضل */
  --fg: #101418;         /* لون النص العام */
  --muted: rgba(0,0,0,.6);
  --card-bg: #fff;
  --logo-color: var(--brand);
}

/* =========================
   Reset & Base
========================= */
*{margin:0;padding:0;box-sizing:border-box}

html, body{
  height:100%;
  overflow:hidden; /* يمنع التمرير نهائياً */
}

body{
  font-family:'NRT', Arial, sans-serif;
  line-height:1.6;
  color:var(--fg);
  background:whitesmoke;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{font-weight:700}
p,li,span{font-weight:400}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
a{color:inherit; text-decoration:none}
a:hover{opacity:.85}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* =========================
   Background Big Text
========================= */
.background-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(60px, 18vw, 220px);
  font-weight: 900;
  color: rgba(27, 76, 110, 0.2);
  letter-spacing: 12px;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

/* عندما يكون فوق صورة داكنة يظهر أفتح */
.hero-section .background-text {
  color: rgba(255, 255, 255, 0.07);
  mix-blend-mode: overlay;
}

/* =========================
   Language Switcher
========================= */
.language-switcher{
  position:fixed; top:20px; right:70px; z-index:1000; display:flex; gap:8px; /* تم تعديل الموقع للأعلى واليسار قليلاً */
}
.lang-btn{
  background:var(--brand); border:1px solid rgba(255,255,255,.3); color:#fff;
  padding:6px 12px; border-radius:4px; cursor:pointer; font-size:12px; font-weight:700; transition:all .25s ease;
}
.lang-btn:hover,.lang-btn.active{background:var(--accent); color:#000; border-color:var(--accent)}

/* =========================
   Mobile Menu
========================= */
.mobile-menu-toggle{
  position:fixed; top:20px; right:20px; z-index:1001; background:none; border:none; color:var(--brand); font-size:24px;
  cursor:pointer; padding:10px; border-radius:4px; transition:background .25s ease;
}
/* Vertical watermark inside the mobile menu */
.mobile-menu::after{
  content: "ZIRVE GROUP";
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'NRT', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 14vh, 120px);
  letter-spacing: .2em;
  color: rgba(27, 76, 110, 0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* محتوى القائمة فوق العلامة */
.mobile-menu > *{
  position: relative; /* تصحيح: يجب استخدام relative للسماح بالـ z-index */
  z-index: 1;
}

/* للاتجاه RTL ضع النص على اليسار */
[dir="rtl"] .mobile-menu::after{
  right: auto;
  left: 16px;
}

.mobile-menu-toggle:hover{background:rgba(27,76,110,.12)} /* تم تعديل الشفافية لتكون على اللون الأساسي */
.mobile-menu-overlay{position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:1002; opacity:0; visibility:hidden; transition:all .25s ease;}
.mobile-menu-overlay.active{opacity:1; visibility:visible}
.mobile-menu{position:fixed; top:0; right:0; width:90%; max-width:400px; height:100vh; background:whitesmoke; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; overflow:hidden;}
.mobile-menu-overlay.active .mobile-menu{transform:translateX(0)}
.mobile-menu-close{position:absolute; top:20px; left:20px; background:none; border:none; color:#000; font-size:24px; cursor:pointer; padding:10px;}
.mobile-nav{flex:1; padding:80px 30px 30px; display:flex; flex-direction:column; gap:30px}
.nav-item{color:#000; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:space-between; transition:opacity .2s ease;}
.nav-item:hover{opacity:.7}
.mobile-social{padding:30px; border-top:2px solid var(--brand); display:flex; gap:20px; justify-content:center;}
.mobile-social a{color:var(--brand); font-size:20px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:2px solid var(--brand); border-radius:50%; transition:all .25s ease;}
.mobile-social a:hover{background:var(--brand); color:whitesmoke}

/* =========================
   Side Nav
========================= */
.side-nav{position:fixed; top:50%; transform:translateY(-50%); z-index:50; color:var(--brand); font-weight:700; font-size:14px; letter-spacing:2px; display:flex; align-items:center; gap:15px; cursor:pointer; transition:opacity .25s ease;}
.side-nav.left{left:30px; writing-mode:vertical-rl; text-orientation:mixed}
.side-nav.right{right:30px; writing-mode:vertical-rl; text-orientation:mixed}
.arrow-left,.arrow-right{color:var(--accent); font-size:16px}
.side-nav:hover{opacity:.85}

/* =========================
   Hero (fixed frame, centered)
========================= */
.hero-section{ position:relative; height:100vh; }

/* 1. تمركز الإطار بالكامل في منتصف الشاشة */
.hero-background,
.hero-overlay,
.hero-content{
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%); /* تمركز مثالي */
  width:clamp(360px, 88vw, 1300px); 
  aspect-ratio:16/9; 
  border-radius:20px;
}
.hero-content{ 
  z-index: 2;
  display: flex;
  align-items: flex-end;   /* محاذاة اللوح الزجاجي للأسفل */
  justify-content: center;
  overflow: hidden; /* يضمن قطع الزوايا المستديرة بشكل صحيح */
}

.hero-background{ z-index:0; overflow:hidden; }
.hero-bg-img{ width:100%; height:100%; object-fit:cover; border-radius:20px; }
.hero-overlay{ z-index:1; background:rgba(0,0,0,.45); border-radius:20px; } 

/* 2. اللوح الزجاجي خلف النصوص (لم يعد مطلقاً داخل hero-content) */
.hero-box{
  position: relative; /* تصحيح: لم يعد مطلقًا، فهو الآن عنصر مرن في أسفل hero-content */
  width: 100%;      /* يأخذ عرض hero-content */
  z-index: 2;

  min-height: clamp(140px, 34vh, 420px); /* ارتفاع مرن يناسب كل الأجهزة */
  display: flex;
  align-items: flex-end;   /* النص في الأسفل */
  justify-content: center;

  background: rgba(0, 0, 0, 0.25);  padding: clamp(18px, 3vw, 32px);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

/* في الاتجاه الإنكليزي غيّر زاوية التدرج */
[dir="ltr"] .hero-box{
background: rgba(0, 0, 0, 0.25);}

/* 3. Hero text anchored to the bottom of the hero box */
/* تصحيح: استخدام .hero-text مباشرة بدلاً من .hero-text-wrap لجعلها ثابتة داخل اللوح */
.hero-box .hero-text {
  position: static;      /* بدل absolute */
  transform: none;
  width: 100%;
  max-width: min(92%, 1100px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* وضع النص في الأسفل */
  align-items: center;
  gap: 12px;
  text-align: center;
  pointer-events: auto;  /* مهم: لتمكين النقر على الزر */
  z-index: 6;
}

/* النصوص داخل اللوح */
.hero-title{
  color:#fff;
  letter-spacing:.5px;
  margin:0 0 8px;
  font-size:clamp(34px, 6.8vw, 68px);
  line-height: 1.12; /* تحسين قراءة العنوان على أجهزة الموبايل */
  text-shadow:0 2px 6px rgba(0,0,0,.35),0 0 1px rgba(255,255,255,.35);
}
.hero-title::after{
  content:"";
  display:block;
  height:3px;
  width:120px;
  margin:10px auto 0;
  background:linear-gradient(90deg,var(--accent),#ffffff);
  opacity:.9;
  border-radius:2px;
}
.hero-subtitle{
  color:rgba(255,255,255,.88);
  font-size:clamp(15px,2.1vw,19px);
  letter-spacing:.3px;
  margin:0 0 14px;
  line-height: 1.35; /* تحسين قراءة النص الفرعي */
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.cta-button{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 92%,#fff 8%),var(--brand));
  border:1px solid color-mix(in srgb,var(--brand) 80%,#000 20%);
  color:#fff;
  padding:12px 26px;
  font-weight:800;
  border-radius:10px;
  letter-spacing:.6px;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35);filter:brightness(1.06)}
.cta-button:active{transform:translateY(0) scale(.98)}

/* شاشة صغيرة: تباين أعلى */
@media (max-width: 640px){
  .hero-box{
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%);
    border-radius: 12px; padding: 14px 16px; 
  }
  /* تم إزالة max-width: 94%; لأنه يأخذ 100% من hero-content */
  [dir="ltr"] .hero-box{
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%);
  }
}

/* =========================
   Logo (smaller, neat circle)
========================= */
.logo-img{
  width:250px; height:250px; background:#fff; border:6px solid var(--logo-color); border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center;
  padding:14px; margin:0 auto 18px;
}
.logo-img img{max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:0%;}

/* =========================
   Footer (fixed)
========================= */
.footer{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:60; text-align:center; color:var(--brand);}
.social-links{display:flex; gap:15px; justify-content:center; margin-bottom:12px;}
.social-links a{color:var(--brand); font-size:16px; width:35px; height:35px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; transition:all .25s ease;}
.social-links a:hover{background:var(--brand); color:whitesmoke}
.footer .footer-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.footer a { color: var(--brand); text-decoration: underline; }
.footer a:hover { color: #a08908b6; }

/* =========================
   Cookie Consent
========================= */
.cookie-consent{position:fixed; bottom:20px; left:20px; right:20px; max-width:400px; background:var(--brand); color:#fff; border-radius:8px; padding:20px; z-index:1000; transform:translateY(100%); opacity:0; transition:all .25s ease; backdrop-filter:blur(10px);}
.cookie-consent.show{transform:translateY(0); opacity:1}
.cookie-consent h3{font-size:18px; margin-bottom:10px; color:#fff}
.cookie-consent p{font-size:12px; margin-bottom:15px; line-height:1.4; opacity:.95}
.privacy-link{color:var(--accent); text-decoration:underline; font-size:12px; display:block; margin-bottom:15px}
.cookie-buttons{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.cookie-btn{background:var(--accent); border:none; color:#000; padding:8px 16px; border-radius:4px; font-size:11px; font-weight:700; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; gap:5px;}
.cookie-btn:hover{background:#FFC107; transform:translateY(-1px)}
.cookie-btn.decline-all,.cookie-btn.show-details{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35);}
.cookie-powered{font-size:10px; opacity:.7; text-transform:uppercase; letter-spacing:1px}

/* =========================
   Chat Widget
========================= */
.chat-widget{position:fixed; bottom:20px; right:20px; z-index:1000; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.chat-bubble{width:60px; height:60px; background:var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,.3); transition:all .25s ease;}
.chat-bubble:hover{transform:translateY(-2px); box-shadow:0 6px 25px rgba(0,0,0,.4)}
.chat-bubble i{color:#fff; font-size:24px}
.chat-text{background:rgba(27,76,110,.95); color:#fff; padding:10px 15px; border-radius:20px; font-size:12px; max-width:220px; opacity:0; transform:translateY(10px); transition:all .25s ease; backdrop-filter:blur(10px);}
.chat-widget:hover .chat-text{opacity:1; transform:translateY(0)}
.chat-actions{display:flex; gap:5px; opacity:0; transform:translateY(10px); transition:all .25s ease;}
.chat-widget:hover .chat-actions{opacity:1; transform:translateY(0)}
.chat-actions button{width:35px; height:35px; background:rgba(255,255,255,.9); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease;}
.chat-actions button:hover{background:#fff; transform:scale(1.1)}
.chat-powered{font-size:10px; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:5px; opacity:0; transform:translateY(10px); transition:all .25s ease;}
.chat-widget:hover .chat-powered{opacity:1; transform:translateY(0)}
.chat-powered i{color:#4CAF50}

/* =========================
   RTL Support
========================= */
[dir="rtl"] .side-nav.left{right:30px; left:auto}
[dir="rtl"] .side-nav.right{left:30px; right:auto}
[dir="rtl"] .language-switcher{left:70px; right:auto}
[dir="rtl"] .mobile-menu-toggle{left:20px; right:auto}
[dir="rtl"] .mobile-menu{left:0; right:auto; transform:translateX(-100%)}
[dir="rtl"] .mobile-menu-overlay.active .mobile-menu{transform:translateX(0)}
[dir="rtl"] .mobile-menu-close{right:20px; left:auto}
[dir="rtl"] .cookie-consent{right:20px; left:auto}
[dir="rtl"] .chat-widget{left:20px; right:auto; align-items:flex-start}

/* ===== إصلاحات الشاشات الصغيرة ===== */

/* ===== شاشات 600px وأصغر ===== */
@media (max-width: 600px){
  /* لا تستخدم aspect-ratio: auto هنا */
  .hero-background, .hero-overlay, .hero-content{
    width: 94vw;
  }
  /* يتم تعيين الحد الأدنى للارتفاع في .hero-box بدلاً من .hero-content */
  .hero-box{
    min-height: clamp(160px, 40vh, 380px); /* أكبر قليلاً على الهواتف */
    background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,0) 62%);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .hero-title{ font-size: clamp(22px, 8.2vw, 36px); }
  .hero-subtitle{ font-size: clamp(12px, 3.2vw, 16px); }
  .cta-button{
    min-width: 160px;
    padding: 10px 18px;
    font-size: 14px;
  }
  .language-switcher {
      top: 10px;
      right: 60px; 
  }
}

/* ===== فابليت/موبايل كبير 600–768px ===== */
@media (min-width: 600px) and (max-width: 768px){
  .hero-box{
    min-height: clamp(180px, 36vh, 420px);
    background: linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,0) 66%);
  }
  .cta-button{ min-width: 170px; }
}

/* ===== لابتوب صغير 1024–1280px ===== */
@media (min-width: 1024px) and (max-width: 1280px){
  .hero-box{
    min-height: clamp(200px, 30vh, 420px);
    background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 72%);
  }
}

/* ===== وضع Landscape القصير (ارتفاع قليل) ===== */
@media (max-height: 480px){
  .hero-background, .hero-overlay, .hero-content{
    aspect-ratio: 16/9;
    width: 92vw;
  }
  .hero-box{
    min-height: clamp(120px, 28vh, 320px);
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 70%);
  }
}

/* بديل لو ما فيه دعم لـ backdrop-filter */
@supports not ((backdrop-filter: blur(1px))){
  .hero-box{
    background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 75%);
  }
}

/* احترام الـ safe-area للهواتف ذات النتوءات */
.footer{ bottom: max(16px, env(safe-area-inset-bottom)); }
.hero-box{ margin-bottom: env(safe-area-inset-bottom, 0px); }