/* Extracted & adapted from the original React project (App.css + essentials) */

html{scroll-behavior:smooth}

@keyframes fade-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-in{animation:fade-in 1.2s cubic-bezier(0.4,0,0.2,1)}

::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#c9a063,#b8935a);border-radius:10px;border:2px solid #f1f1f1}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#b8935a,#a88249)}

button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #c9a063;outline-offset:3px;border-radius:8px}

button{transition:background-color .4s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),color .3s ease}
input,textarea{transition:border-color .3s ease,box-shadow .3s ease}
input:focus,textarea:focus{box-shadow:0 0 0 3px rgba(201,160,99,.1)}

::selection{background-color:#c9a063;color:#fff}

/* Helpers for language switching */
[data-i18n]{transition:opacity .15s ease}
.lang-switching [data-i18n]{opacity:.6}

/* Toast */
#toast{position:fixed;top:24px;right:24px;z-index:9999;display:none}
#toast .box{background:#16a34a;color:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-weight:700}


.lumen-footer{
  background:#0f1b2a;
  color:#cfd6df;
  position:relative;
  padding:0;
  font-family: inherit;
}

.lumen-footer__topline{
  height:2px;
  background:#c9a063;
  opacity:.9;
}

.lumen-footer__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:60px 18px 22px;
}

.lumen-footer__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap:48px;
  align-items: flex-start;
   margin-top: -14px;
}

.lumen-footer__title{
  margin:0 0 18px;
  font-size:20px;
  font-weight:700;
  color:#ffffff;
  display:flex;
  align-items:center;
  gap:14px;
}

.lumen-footer__titleline{
  height:2px;
  width:52px;
  background:#c9a063;
  opacity:.95;
  border-radius:10px;
}

.lumen-footer__contact{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.lumen-footer__contactItem{
  display:flex;
  align-items:center;
  gap:12px;
}

.lumen-footer__icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(201,160,99,.16);
  color:#c9a063;
  font-size:18px;
}

.lumen-footer a{
  color:#cfd6df;
  text-decoration:none;
}
.lumen-footer a:hover{
  color:#c9a063;
}

.lumen-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.lumen-footer__brandCol{
  text-align:right;
}

.lumen-footer__brand{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:18px;
  margin-bottom:18px;
}

.lumen-footer__logo{
  font-weight:800;
  font-size:26px;
  letter-spacing:.5px;
  color:#ffffff;
}

.lumen-footer__crown{
  color:#c9a063;
  font-size:18px;
  position:relative;
  top:-2px;
}

.lumen-footer__tag{
  color:#c9a063;
  font-weight:700;
  font-size:12px;
  letter-spacing:.6px;
  margin-top:10px;
}

.lumen-footer__desc{
  margin:0;
  line-height:1.9;
  color:#cfd6df;
  opacity:.95;
  max-width:520px;
}

.lumen-footer__divider{
  height:1px;
  background:rgba(201,160,99,.35);
  margin:40px 0 16px;
}

.lumen-footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:#cfd6df;
  opacity:.9;
  font-size:14px;
}

.lumen-footer__diamond{
  color:#c9a063;
  margin:0 6px;
}

@media (max-width: 900px){
  .lumen-footer__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .lumen-footer__brand{
    justify-content:flex-start;
  }
  .lumen-footer__brandCol{
    text-align:right;
  }
  .lumen-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* يفرض ترتيب الأعمدة مثل الصورة الهدف */
.lumen-footer__col:nth-child(1){ order: 3; } /* معلومات التواصل */
.lumen-footer__col:nth-child(2){ order: 2; } /* روابط سريعة */
.lumen-footer__col:nth-child(3){ order: 1; } /* لومن + وصف */

/* وعلى الموبايل يرجع طبيعي */
@media (max-width: 900px){
  .lumen-footer__col:nth-child(1),
  .lumen-footer__col:nth-child(2),
  .lumen-footer__col:nth-child(3){ order: initial; }
}

/* نفس توزيع النص أسفل الفوتر مثل الهدف */
.lumen-footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr; /* (التواصل+الروابط) ثم (البراند) */
  gap:60px;
  align-items:start;
}

/* يخلي معلومات التواصل + روابط سريعة جنب بعض */
.lumen-footer__cols2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:start;
}

/* صف اللوجو (LUMEN + تاج جنب بعض) */
.lumen-footer__logoRow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
  white-space:nowrap;
}

.lumen-footer__logoText{
  font-weight:800;
  font-size:26px;
  line-height:1;
  color:#fff;
  letter-spacing:.5px;
}

.lumen-footer__crownImg{
  width:60px;
  height:60px;
  display:inline-block;
  vertical-align:middle;
  position:relative;
  top:0;
}

@media (max-width: 900px){
  .lumen-footer__grid{ grid-template-columns:1fr; gap:28px; }
  .lumen-footer__cols2{ grid-template-columns:1fr; gap:28px; }
}



.lumen-nav__brand{
  display:flex;
  align-items:center;
  gap:5px;
  text-decoration:none;
}
.lumen-nav__brandText{ color:#fff; font-weight:800; }
.lumen-nav__brandLogo{ width:18px; height:18px; }


/* ترتيب أعمدة الفوتر: (البراند) يمين، ثم (التواصل+روابط) يسار */
.lumen-footer__grid > .lumen-footer__brandCol{ order: 1; } /* يمين */
.lumen-footer__grid > .lumen-footer__cols2{ order: 2; }    /* يسار */


/* يمنع عنوان الفوتر من الانقسام لسطرين */
.lumen-footer__title{
  white-space: nowrap;
  flex-wrap: nowrap;
}


/* Language toggle button: visible on both header states */
#langToggle,
#langToggleMobile{
  border-color:#ffffff;
  color:#ffffff;
}

/* When header is scrolled (white background), make button dark */
#siteHeader.scrolled #langToggle,
#siteHeader.scrolled #langToggleMobile{
  border-color:#1a2332 !important;
  color:#1a2332 !important;
}

/* Hover state when scrolled */
#siteHeader.scrolled #langToggle:hover,
#siteHeader.scrolled #langToggleMobile:hover{
  background:#1a2332 !important;
  color:#ffffff !important;
}

/* Ensure globe icon follows text color */
#siteHeader #langToggle svg,
#siteHeader #langToggleMobile svg{
  stroke: currentColor !important;
}



/* --- Footer brand column: align to start/end based on dir --- */
.lumen-footer__brandCol{
  justify-self: start;     /* في الانقليزي = يسار */
  text-align: start;       /* بداية السطر */
}

.lumen-footer[dir="rtl"] .lumen-footer__brandCol{
  justify-self: end;       /* في العربي = يمين */
  text-align: end;         /* نهاية السطر */
}

/* Logo row alignment */
.lumen-footer__logoRow{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;   /* EN */
}

.lumen-footer[dir="rtl"] .lumen-footer__logoRow{
  justify-content: flex-end;     /* AR */
  flex-direction: row-reverse;   /* عشان التاج يصير مناسب مع العربي */
}

/* Tag + description align */
.lumen-footer__tag,
.lumen-footer__desc{
  text-align: start;
}

.lumen-footer[dir="rtl"] .lumen-footer__tag,
.lumen-footer[dir="rtl"] .lumen-footer__desc{
  text-align: end;
}

/* Optional: keep description width neat */
.lumen-footer__desc{
  max-width: 520px;
  line-height: 1.7;
}

.lumen-footer a[href^="tel:"],
.lumen-footer__phone {
  direction: ltr;
  unicode-bidi: bidi-override;
  text-align: left;
}

/* ===== Footer Brand (Arabic) Fix ===== */

/* العمود الخاص بالبراند */
.lumen-footer__brandCol{
  text-align: start;
  justify-self: start;
}

/* لما يكون عربي */
.lumen-footer[dir="rtl"] .lumen-footer__brandCol{
  text-align: right;     /* خليه يمين */
  justify-self: end;     /* على نهاية الجريد */
}

/* صف اللوقو (LUMEN + التاج) */
.lumen-footer__logoRow{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.lumen-footer[dir="rtl"] .lumen-footer__logoRow{
  justify-content: flex-end;  /* يمين */
  flex-direction: row;        /* خل التاج يظل يمين LUMEN مثل الصورة */
}

/* كلمة VISUAL SOLUTIONS: تبقى إنجليزي LTR لكن موقعها يمين */
.lumen-footer__tag{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;      /* تثبيت تحت الشعار يمين */
  margin-top: 6px;
}

/* وصف الشركة بالعربي: يمين ومسافات مريحة */
.lumen-footer[dir="rtl"] .lumen-footer__desc{
  text-align: right;
  line-height: 1.8;
  margin-top: 10px;
  max-width: 520px;
}


/* ===========================
   Footer alignment FIX (EN/AR)
   =========================== */

/* خلك آمن: امنع التوسيط العام داخل الجريد */
.lumen-footer__grid,
.lumen-footer__cols2,
.lumen-footer__col,
.lumen-footer__brandCol{
  text-align: unset;
}

/* عمود البراند: يسار بالانقليزي */
.lumen-footer__brandCol{
  justify-self: start !important;     /* داخل grid */
  text-align: left !important;
  align-self: start !important;
}

/* عربي: يمين */
.lumen-footer[dir="rtl"] .lumen-footer__brandCol{
  justify-self: end !important;
  text-align: right !important;
}

/* صف الشعار (LUMEN + التاج): يسار EN / يمين AR */
.lumen-footer__logoRow{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}

.lumen-footer[dir="rtl"] .lumen-footer__logoRow{
  justify-content: flex-end !important;
  /* التاج قبل/بعد حسب ذوقك */
  flex-direction: row-reverse !important; /* يخلي التاج يمين LUMEN */
}

/* VISUAL SOLUTIONS: تبقى LTR لكنها تتموضع حسب اللغة */
.lumen-footer__tag{
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
  margin-top: 6px !important;
}

.lumen-footer[dir="rtl"] .lumen-footer__tag{
  text-align: right !important;
}

/* الوصف: يسار EN / يمين AR وبدون توسيط */
.lumen-footer__desc{
  text-align: left !important;
  margin-top: 10px !important;
  line-height: 1.8 !important;
  max-width: 520px !important;
}

.lumen-footer[dir="rtl"] .lumen-footer__desc{
  text-align: right !important;
}


/* =========================
   Stop Blue Overlay Bleeding
   ========================= */

/* خلي الأقسام الفاتحة بيضاء نظيفة */
#products, #about, #contact{
  background: #fff !important;
}

/* طفي التدرجات الداكنة اللي فوق/تحت الأقسام (هي اللي تسوي تداخل الأزرق) */
#products .absolute.top-0,
#products .absolute.bottom-0,
#about .absolute.top-0,
#about .absolute.bottom-0,
#contact .absolute.top-0,
#contact .absolute.bottom-0{
  display: none !important;
}

/* خفف أوفريلاي الهيرو (اللي يسوي كتمة على الأطراف) */
#hero .absolute.top-0,
#hero .absolute.bottom-0,
#hero .absolute.top-0.left-0.bottom-0,
#hero .absolute.top-0.right-0.bottom-0{
  opacity: .10 !important;  /* كان قوي */
}

/* لو فيه ظلال/فيجنِت من CSS عام */
body::before, body::after{
  content: none !important;
}

:root{
  --lumen-dark: #0f1f2f;
  --lumen-gold: #c9a063;
}

/* الهيدر */
#siteHeader{
  background: linear-gradient(to bottom, rgba(15,31,47,.88), transparent) !important;
}

/* الفوتر */
.lumen-footer{
  background: var(--lumen-dark) !important;
}

/* =========================
   Section Divider (Wave)
   ========================= */
.lumen-divider{
  position: relative;
  height: 80px;
  background: transparent;
  overflow: hidden;
}

.lumen-divider::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80px at 50% 0,
      rgba(15,27,42,0) 60%,
      rgba(15,27,42,1) 61%); /* أزرق داكن */
}

.lumen-divider::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:38px;
  height:2px;
  background: linear-gradient(to right, transparent, #c9a063, transparent); /* ذهبي */
  opacity:.9;
}


.lumen-divider::before{
  animation: lumenWaveMove 6s ease-in-out infinite;
}

@keyframes lumenWaveMove{
  0%,100%{ transform: translateY(0); opacity: 1; }
  50%{ transform: translateY(8px); opacity: .98; }
}


/* Section Separator */
.section-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:80px auto 40px;  /* يوضح انتقال السكشن */
  padding:0 16px;
  max-width:1100px;
}

.section-separator .sep-line{
  flex:1;
  height:1px;
  background:linear-gradient(to right, transparent, #c9a063, transparent);
  opacity:.9;
}

.section-separator .sep-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
  color:#2b2f3a;
  background:#ffffffcc;
  border:1px solid #c9a06355;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}

.section-separator .sep-icon{
  color:#c9a063;
  font-size:14px;
  line-height:1;
}

/* Optional: make the new section feel distinct */
#contact{
  padding-top:70px;
  background:linear-gradient(180deg, rgba(201,160,99,.10), rgba(255,255,255,0));
}

.logo-wrap{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.logo-wrap *{
  text-shadow:none; /* مع الخلفية غالبًا ما تحتاج */
}

.header::before{
  opacity:.55; /* كانت غالبًا أعلى */
}

.logo-wrap .logo-sub{ color:#fff; } /* أو لون أغمق حسب الخلفية */

#siteHeader{
  background: rgba(26, 35, 50, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#siteHeader.scrolled{
  background: rgba(26, 35, 50, 0.98) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* يضبط المسافات داخل الهيدر */
#siteHeader .max-w-7xl{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Force correct header visibility */
#desktopHeader { display: flex; }
#mobileHeader { display: none; }
/*#mobileNav { display: none; } /* will be toggled by JS with .hidden */

/* Mobile */
@media (max-width: 767.98px) {
  #desktopHeader { display: none !important; }
  #mobileHeader { display: flex !important; }
  /* mobileNav stays controlled by JS (hidden class) */
}

.hidden { display: none !important; }


/* About image: hide on mobile, show on desktop */
.about-media{ display:none; }
@media (min-width: 768px){
  .about-media{ display:block; }
}