@import url("https://fonts.googleapis.com/css2?family=Cairo:ital,wght@0,400;0,500;0,700;1,300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nabla:ital,wght@0,400;0,500;0,700;1,300&display=swap");
/* أضف هذا الكود في أي مكان خارج الأقواس، مثلاً في بداية الملف */
@keyframes fadeInUp {
from {
 opacity: 0;
 transform: translateY(20px);
}
to {
 opacity: 1;
 transform: translateY(0);
}
}
/*  */
/* تطبيق الحركة على الأقسام الرئيسية */
.Scripts_Section,
.Feutchers_Section,
.faq-section,
.why-choose-us {
/* تأكد من وجوده في بداية السكربت */
animation: fadeInUp 0.8s ease-out;
/* ... باقي التنسيقات ... */
}
:root {
/* === 🎨 لوحة الألوان الجديدة (أسود وأخضر - MATTE) === */
--main-green: #00f0a0; /* أخضر نيون */
--dark-green-hover: #00c080;
--main-text: #e0e0e0; /* أبيض خفيف */
--secondary-text: #888888;
--dark-background: #0d0d0d; /* أسود فاحم (الخلفية المطفأة) */
--card-background: #181818; /* خلفية الكرت (أسود داكن صلب) */
--border-glow: #333333; /* خط رمادي داكن مطفأ (بديل التوهج الأخضر) */
}

* {
box-sizing: border-box;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
transition: 0.3s all ease-in-out; /* تقليل الوقت وزيادة السلاسة */
}

a {
text-decoration: none;
color: inherit;
}

::-webkit-scrollbar {
display: none;
}

/* === 🔴 الخلفية السوداء المطفأة لكامل الموقع === */
body {
font-family: "Cairo", sans-serif;
background-color: var(--dark-background);
background-attachment: fixed;
min-height: 100vh;
color: var(--main-text);
}
/* === 🚀 1. تعديل الحاوية الرئيسية (Wrapper) === */
.Header_conitiner {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}

/* === 🚀 2. الشريط الزجاجي الجديد (Pill) لجمع العناصر === */
.new-header-pill {
width: 100%;
max-width: 1300px;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px 0 20px;
transition: all 0.3s ease; /* إضافة ترانزيشن للحركة الجديدة */

/* --- ⬛ الستايل المطفأ (Matte) --- */
background: var(--card-background); /* خلفية كرت داكنة */
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none; /* إزالة الحد */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* ظل داكن خفيف */
/* --- نهاية الستايل --- */

border-radius: 50px;
}
.new-header-pill:hover {
transform: translateY(-2px); /* تأثير رفع خفيف */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45); /* زيادة الظل قليلاً */
}
/* === 🚀 3. أقسام الشريط (يمين ويسار) === */
.nav-section {
display: flex;
align-items: center;
gap: 20px;
}
.nav-section.left {
gap: 25px;
}

/* === 🚀 4. اللوجو === */
.Header_conitiner .logo {
display: flex;
align-items: center;
justify-content: center;
background: var(--dark-background);
border-radius: 50px;
min-width: 50px;
height: 50px;
padding: 10px;
}

.Header_conitiner .logo img {
width: 45px;
border-radius: 10px;
}

/* === 🚀 5. تعديل القائمة (Header) والمسافات === */
.Header {
background: none;
border: none;
min-width: auto;
height: auto;
border-radius: 0;

display: flex;
align-items: center;
gap: 30px;
color: var(--secondary-text);
}

/* === 🚀 6. تعديل الروابط (Header li) لتبدو كروابط نصية === */
.Header li {
position: relative;
background-color: transparent;
padding: 0;
border-radius: 0;
}

/* === 🚀 7. تعديل الروابط (a) لتصبح قوية ومنظمة === */
.Header li a {
color: var(--secondary-text);
font-weight: 500;
padding: 8px 12px; /* زيادة مساحة التفاعل */
border-radius: 8px;
transition: all 0.3s ease;
}

.Header li a:hover {
background-color: rgba(0, 240, 160, 0.1); /* هايلايت أخضر خفيف */
color: var(--main-text);
}

/* === 🚀 8. تعديل زر الدخول (يمين) - log-discord/Info === */
.Info {
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: space-around;
color: var(--main-text) !important;
cursor: pointer;
position: relative;
}

/* زر "تسجيل الدخول" الأخضر - مدمج مع الـ UI */
.log-discord {
display: flex;
align-items: center;
gap: 8px;
color: var(--dark-background);
font-weight: bold;
border: none;
background: var(--main-green);
padding: 10px 20px;
transition: 0.3s ease-in-out; /* إضافة الحركة */
border-radius: 50px;
transition: 0.3s;
}

.log-discord:hover {
background-color: var(--dark-green-hover);
transform: scale(1.05); /* تكبير خفيف للزر */
}
.Info .avatar {
background: transparent;
border: none;
min-width: none;
border-radius: 1.5rem;
display: flex;
align-items: center;
gap: 0.7rem;
color: var(--main-text);
padding: 7px 10px;
transition: 0.3s;
}

.Info .avatar:hover {
background: rgba(255, 255, 255, 0.1);
}

/* القائمة المنسدلة (Logged in) - ستايل مطفأ */
.Info .dropdown {
position: absolute;
top: 65px;
right: 0;
background: var(--card-background); /* خلفية كرت مطفأة */
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid var(--border-glow); /* حد رمادي داكن */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
width: 200px;
text-align: left;
padding: 10px;
border-radius: 0.5rem;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

.Info .dropdown.active {
 opacity: 1;
 visibility: visible;
}

.Info .dropdown li {
 border-radius: 0.1rem;
 padding: 8px;
 transition: 0.3s;
 font-size: 14px;
}

.Info .dropdown li:hover {
 background-color: #545454;
}
.Info .dropdown li:first-child {
 border-bottom: 1px solid #999;
}
.Info .dropdown li a {
 display: flex;
 align-items: center;
 flex-direction: row-reverse;
 gap: 0.5rem;
 color: var(--main-text);
}
.Info .dropdown li a.logout i {
 color: #ff5555;
}

#dropdown_caret {
 transition: 0.3s;
}
#dropdown_caret.active {
 transform: rotate(180deg);
}

.Avatar {
 width: 35px;
 height: 35px;
}
.Avatar img {
 width: 100%;
 height: 100%;
 border: 1px rgb(184, 184, 184) solid;
 border-radius: 50%;
}

/* === 🚀 9. تعديل زر الموبايل (Bars) === */
.Bars {
 display: none;
 color: var(--main-text);
 position: absolute;
 right: 30px;
 top: 30px;
 z-index: 10000;
}
.Bars i {
 color: var(--main-text);
 font-weight: bold;
 font-size: 24px;
 cursor: pointer;
}

/* القائمة المنسدلة للموبايل - ستايل زجاجي */
.Bars .dropdownphone {
 z-index: 9999;
 position: absolute;
 top: 50px;
 right: 0;
 background: var(--card-background);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
 border: 1px solid var(--border-glow);
 width: 250px;
 text-align: left;
 padding: 10px;
 border-radius: 0.5rem;
 opacity: 0;
 visibility: hidden;
 transition: 0.3s;
}
.Bars .dropdownphone.active {
 opacity: 1;
 visibility: visible;
}
.Bars .dropdownphone li {
 border-radius: 0.1rem;
 padding: 8px;
 transition: 0.3s;
 font-size: 14px;
 border-bottom: 1px solid rgba(255,255,255,0.1);
}
.Bars .dropdownphone li a {
 display: flex;
 align-items: center;
 flex-direction: row-reverse;
 gap: 0.5rem;
 color: var(--main-text);
}
.Bars .dropdownphone li i {
 font-size: 17px;
}
.Bars .dropdownphone li:hover {
 background-color: #545454;
}

/* === 🚀 10. تعديل الميديا (متى يظهر زر الموبايل) === */
@media screen and (max-width: 1100px) {
 .new-header-pill {
  display: none;
 }
 .Bars {
  display: block;
 }
 footer .continer aside p {
  font-size: 0.8rem;
 }
}

/* === 🚀 10. تعديل الميديا (متى يظهر زر الموبايل) === */
/* غيرنا الرقم لـ 1100px عشان نعطي مساحة للهيدر الجديد */
@media screen and (max-width: 1100px) {
 .new-header-pill {
  display: none;
 }
 .Bars {
  display: block;
 }
 footer .continer aside p {
  font-size: 0.8rem;
 }
}


/* =========================================
 باقي كود الـ CSS (لم أغيره)
 =========================================
*/


main {
  position: relative;
  width: 100%;
  min-height: 100vh; /* تغيير إلى min-height */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* تغيير إلى align-items: flex-start */
  flex-direction: column;
  background-image: none; /* إزالة صورة الخلفية */
  background-color: transparent; /* الخلفية من الـ body */
  padding-top: 110px; /* مسافة من الهيدر الثابت */
}

main::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
}

main .continer {
 position: relative;
 z-index: 999;
 width: 100%;
 height: auto; /* تعديل الطول */
 display: flex;
 justify-content: center; /* توسيط المحتوى */
 align-items: center;
 flex-direction: column;
 gap: 3rem; /* تعديل المسافة بين العناصر */
}

main .continer h1 {
  color: var(--main-green); /* تغيير للون الأخضر */
  font-size: 2.5rem;
  font-weight: bold;
}

main .continer h2 {
  font-size: 1.5rem;
  color: var(--main-text);
  font-weight: bold;
}

main .continer h4 {
  color: var(--main-text);
  font-weight: bold;
}

main .continer h6 {
  color: var(--secondary-text);
  text-align: center;
  font-size: 16px;
}

main .continer .buttons {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 5.5rem;
}

main .continer .buttons .button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--main-green); /* تغيير للون الأخضر */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px dashed var(--dark-background);
  cursor: pointer;
  transition: transform 0.7s ease-in-out;
  transform-origin: top bottom;
 }

main .continer .buttons .button:hover {
  transform: rotate(180deg);
}

main .continer .buttons .button i{
  color: var(--dark-background);
  font-weight: bold;
  font-size: 3rem;
}


@media (min-width: 1500px) {
  main .continer h6 {
    color: var(--secondary-text);
    width: 700px;
    text-align: center;
    font-size: 16px;
  }
}


.Scripts_Section {
 display: flex;
 flex-direction: column;
 padding: 60px 20px; /* زيادة المسافة العلوية والسفلية */
 text-align: center;
 align-items: center;
 gap: 3rem;
 /* إضافة خلفية متدرجة خفيفة للقسم */
 background: linear-gradient(180deg, rgba(13, 13, 13, 0.5) 0%, rgba(20, 22, 28, 0.7) 100%);
 border-bottom: 1px solid var(--border-glow); /* حد سفلي خفيف */
 margin-top: 80px; /* مسافة تحت الهيدر الثابت */
}

.Feutchers_Section {
display: flex;
flex-direction: column;
padding: 60px 20px;
text-align: center;
align-items: center;
gap: 3rem;
background: var(--dark-background);
border-top: none; /* إزالة الحد العلوي */
}

/* تعديل شكل العنوان الرئيسي للسكشن */
.Scripts_Section h2 {
 font-weight: bold;
 color: var(--main-text);
 font-size: 1.8rem; /* تكبير الخط شوي */
 margin-bottom: 5px; /* تقليل المسافة تحت العنوان */
 text-shadow: 0 0 10px rgba(0, 240, 160, 0.3); /* إضافة توهج خفيف */
}

.Scripts_Section {
display: flex;
flex-direction: column;
padding: 60px 20px;
text-align: center;
align-items: center;
gap: 3rem;
background: transparent; /* إزالة أي خلفية متدرجة */
border-bottom: none; /* إزالة الحد الفاصل */
margin-top: 80px;
}


.Scripts_Section .BottounsBuy {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-bottom: 2rem;

}

.Scripts_Section .BottounsBuy button {
  width: 100px;
  background: rgba(24, 24, 24, 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border-glow);
  color: var(--main-text);
  font-weight: bold;
  border-radius: .3rem;
  transition: 0.5s all;
}

.Scripts_Section .BottounsBuy button:hover {
  color: var(--main-green);
  background: rgba(30, 30, 30, 0.7);
}

.Scripts_Section .Continer_Scripts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
}

/* =========================================
   🚀 تطوير كبير لكرت المنتج (Holo-Tech Card) 🚀
   ========================================= */

/* --- أنيميشن التوهج النابض للحدود --- */
@keyframes pulse-card-border {
    0% { border-color: rgba(0, 240, 160, 0.3); }
    50% { border-color: rgba(0, 240, 160, 0.8); }
    100% { border-color: rgba(0, 240, 160, 0.3); }
}

/* --- أنيميشن التوهج الخلفي --- */
@keyframes glow-background {
    0% { box-shadow: 0 0 10px rgba(0, 240, 160, 0.1); }
    50% { box-shadow: 0 0 30px rgba(0, 240, 160, 0.4); }
    100% { box-shadow: 0 0 10px rgba(0, 240, 160, 0.1); }
}

.Scripts_Section .Continer_Scripts .Scripts {
    /* أساسيات الكرت */
    display: flex;
    flex-direction: column;
    width: 280px; /* عرض مناسب */
    min-height: 250px; /* طول مناسب ليحتوي كل العناصر بشكل جميل */
    padding: 15px; /* حشوة داخلية */
    position: relative;
    overflow: hidden; /* مهم لإخفاء أي عناصر تتجاوز الحدود */

    /* --- 💎 الستايل الزجاجي والمطفأ مع توهج --- */
    background: rgba(24, 24, 24, 0.7); /* خلفية شبه شفافة أغمق */
    backdrop-filter: blur(8px); /* تأثير ضبابي خفيف */
    -webkit-backdrop-filter: blur(8px);
    
    border: 1px solid rgba(0, 240, 160, 0.3); /* حد أخضر خفيف */
    border-radius: 12px; /* زوايا مدورة أكثر */
    box-shadow: 0 0 15px rgba(0, 240, 160, 0.1); /* توهج خفيف من البداية */

    /* --- أنيميشن دخول وتوهج --- */
    animation: fadeInUp 0.7s ease-out both, glow-background 4s infinite ease-in-out;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* تأثير الـ Hover */
.Scripts_Section .Continer_Scripts .Scripts:hover {
    transform: translateY(-8px) scale(1.02); /* رفعه وتكبيره قليلاً */
    border-color: var(--main-green); /* إبراز الحد باللون الأخضر */
    box-shadow: 0 8px 40px rgba(0, 240, 160, 0.4), 0 0 25px rgba(0, 240, 160, 0.3); /* توهج أقوى وظل */
}

/* شريط زخرفي علوي (مثل الصورة) */
.Scripts_Section .Continer_Scripts .Scripts::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* سمك الشريط */
    background: linear-gradient(90deg, transparent, var(--main-green), transparent);
    animation: pulse-card-border 3s infinite ease-in-out; /* نفس أنيميشن الحدود */
    opacity: 0.8;
}

/* تعديل الصورة */
.Scripts_Section .Continer_Scripts .Scripts .ScriptPhoto {
    width: 100%;
    height: 150px; /* زيادة طول الصورة */
    margin-bottom: 15px; /* زيادة المسافة تحت الصورة */
    position: relative;
    overflow: hidden; /* لإخفاء أي أجزاء زائدة من الصورة */
    border-radius: 8px; /* زوايا مدورة للصورة */
}
.Scripts_Section .Continer_Scripts .Scripts .ScriptPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    filter: brightness(0.9) contrast(1.1); /* تأثير خفيف لجعل الصورة "رقمية" أكثر */
    transition: transform 0.3s ease;
}
.Scripts_Section .Continer_Scripts .Scripts:hover .ScriptPhoto img {
    transform: scale(1.05); /* تكبير الصورة عند الـ hover */
}

/* شريط تظليل "Holo" على الصورة */
.Scripts_Section .Continer_Scripts .Scripts .ScriptPhoto::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 240, 160, 0.05) 0%, transparent 50%, rgba(0, 240, 160, 0.08) 100%);
    pointer-events: none; /* لعدم التأثير على التفاعل مع الصورة */
    border-radius: 8px;
}


/* تعديل الجزء السفلي (الاسم والزر) */
.Scripts_Section .Continer_Scripts .Scripts .center {
    width: 100%;
    padding: 0 5px; /* تقليل المسافة الجانبية قليلاً */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* لدفع العناصر للأسفل */
}

/* تعديل اسم السكربت */
.Scripts_Section .Continer_Scripts .Scripts .center h5 {
    font-size: 1.1em; /* تكبير الخط قليلاً */
    text-align: right;
    flex-grow: 1;
    margin-right: 12px; /* مسافة بين الاسم والزر */
    color: var(--main-text);
    text-shadow: 0 0 3px rgba(0, 240, 160, 0.2);
}

/* تعديل زر المعلومات */
.Scripts_Section .Continer_Scripts .Scripts .center .info {
    width: 35px; /* تكبير الزر أكثر */
    height: 35px;
    background: rgba(0, 240, 160, 0.15); /* خلفية خضراء شفافة أكثر */
    border: 1px solid var(--main-green);
    color: var(--main-green);
    font-size: 1.1em; /* تكبير الأيقونة */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px; /* زوايا مدورة أكثر */
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.Scripts_Section .Continer_Scripts .Scripts .center .info:hover {
    background-color: var(--main-green);
    color: var(--dark-background); /* نص أسود عند التوهج */
    box-shadow: 0 0 15px rgba(0, 240, 160, 0.6);
    transform: scale(1.1); /* تكبير الزر قليلاً */
}
/* === نهاية تعديل كرت المنتج === */


.InfoScriptsBuy {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
}

.product-card {
  background: var(--card-background);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 240, 160, 0.15);
  border-radius: 10px;
  padding: 20px;
  width: 45vh;
  color: var(--main-text);
}

.product-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}

.product-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-rating i {
  color: #ffc107;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  color: var(--main-text);
  margin-bottom: 10px;
}

.product-description {
  margin-bottom: 10px;
  color: var(--secondary-text);
}

.product-buttons {
  display: flex;
  justify-content: space-between;
}

.product-button {
  padding: 7px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-to-cart-button {
  background-color: var(--main-green);
  color: var(--dark-background);
  font-weight: bold;
}

.watch-video-button {
  background-color: #333;
  color: var(--main-text);
}

.add-to-cart-button:hover {
  background-color: var(--dark-green-hover);
}
.watch-video-button:hover {background-color: #555;}

/* =========================================
 🚀 ستايل قسم "مميزات المتجر" (المعدل) 🚀
 ========================================= */

.Feutchers_Section {
 display: flex;
 flex-direction: column;
 padding: 60px 20px; /* زيادة المسافات */
 text-align: center;
 align-items: center;
 gap: 3rem; /* زيادة المسافة تحت العنوان */
 background: var(--dark-background); /* خلفية سوداء */
 /* border-bottom: 10px var(--main-green) solid; -- إلغاء الحد السفلي القديم */
 border-top: 1px solid var(--border-glow); /* إضافة حد علوي خفيف بدلاً منه */
}

/* تعديل العنوان */
.Feutchers_Section h2 {
 font-weight: bold;
 color: var(--main-text);
 font-size: 2rem; /* نفس حجم عنوان "لماذا تختارنا" */
 margin-bottom: 10px; /* تقليل المسافة تحت العنوان */
 text-shadow: 0 0 15px rgba(0, 240, 160, 0.4); /* توهج أخضر */
}

/* تعديل الوصف */
.Feutchers_Section p {
 color: var(--secondary-text);
 max-width: 600px;
 margin-top: 0;
 line-height: 1.6;
}

/* حاوية الكروت */
.Feutchers_Section .Continer_Feutchers {
 display: grid; /* استخدام Grid لترتيب أفضل */
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* تقسيم تلقائي */
 gap: 30px; /* مسافة بين الكروت */
 padding: 1rem 0; /* مسافة بسيطة حول الكروت */
 width: 100%; /* جعل الحاوية تأخذ العرض المتاح */
 max-width: 1200px; /* تحديد عرض أقصى */
 margin: 0 auto; /* توسيط */
}

/* تعديل كرت الميزة (تطبيق الستايل الزجاجي) */
.Feutchers_Section .Continer_Feutchers .Feutchers {
 /* --- 💎 تطبيق الستايل الزجاجي العام --- */
 background: var(--card-background);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--border-glow);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 160, 0.1);
 border-radius: 10px;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 /* --- نهاية الستايل --- */

 padding: 25px; /* زيادة الحشوة الداخلية */
 display: flex;
 justify-content: center; /* توسيط المحتوى */
 align-items: center;
 /* width: 350px; -- إلغاء العرض الثابت */
 /* height: 150px; -- إلغاء الطول الثابت */
 min-height: 180px; /* تحديد أقل طول للكرت */
 flex-direction: column;
 gap: 15px; /* مسافة بين العناصر داخل الكرت */
 text-align: center;
}
.Feutchers_Section .Continer_Feutchers .Feutchers:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 240, 160, 0.2);
}


/* تعديل قسم العنوان والأيقونة داخل الكرت */
.Feutchers_Section .Continer_Feutchers .Feutchers .title {
 text-align: center;
}

.Feutchers_Section .Continer_Feutchers .Feutchers .title i {
 font-size: 2.5rem;
 color: var(--main-green); /* لون أخضر */
 margin-bottom: 10px; /* مسافة تحت الأيقونة */
 display: inline-block;
 text-shadow: 0 0 10px rgba(0, 240, 160, 0.5); /* توهج للأيقونة */
}

.Feutchers_Section .Continer_Feutchers .Feutchers .title h3 {
 margin-top: 0; /* إزالة المسافة فوق العنوان */
 color: var(--main-text);
 font-weight: bold;
 font-size: 1.3em; /* تكبير الخط قليلاً */
}

/* تعديل الوصف داخل الكرت */
.Feutchers_Section .Continer_Feutchers .Feutchers h5 {
 color: var(--secondary-text);
 font-size: 0.9em; /* حجم مناسب للوصف */
 line-height: 1.6; /* زيادة المسافة بين السطور */
}

footer {
 width: 100%;
 padding: 40px 20px 20px 20px;
 margin-top: 40px;
}

footer .continer {
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  padding: 3rem;
  justify-content: flex-end;
}

footer .continer aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--main-text);
  gap: 10px;
  font-size: 1rem
}

footer .continer aside p{
  text-align: left;
}


footer .continer aside img{
  width: 60px;
}

main .continer_free {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 98%;
  padding-top: 110px;
  height: 76%;
  gap: 1rem;
  z-index: 999;
}

main .continer_free h2 {
  color: var(--main-text);
  font-weight: bold;
  font-size: 1.5rem;
}

main .continer_free p {
  color: var(--secondary-text);
}

main .continer_free .free {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

main .continer_free .free .freeProudact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 270px;
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 160, 0.1);
  border-radius: .5rem;
  color: var(--main-text);
  font-weight: bold;
  overflow: hidden;
  gap: .4rem;
}

main .continer_free .free .freeProudact .ScriptPhoto {
  width: 90%;
}

main .continer_free .free .freeProudact img {
  border-bottom: 1px solid var(--border-glow);
}

main .continer_free .free .freeProudact .info {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px 10px;
}

main .continer_free .free .Proudacts_Free_Continer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

main .continer_free .free .freeProudact .Download {
  width: 11%;
  padding: 6px;
  background-color: rgba(13, 17, 20);
  border: 1px var(--main-green) solid;
  border-radius: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}

main .continer_free .free .freeProudact .Download span {
  color: var(--main-text);
  font-size: 13px;
}

main .continer_free .free .freeProudact .Download:hover {
  background-color: rgb(28, 31, 34);
}

main .continer_license {
  width: 100%;
  max-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

main .continer_license .license {
  width: 90%;
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 160, 0.1);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 999;
}

main .license h2 {
  font-weight: bold;
  color: var(--main-text);
  font-size: 1.5rem;
}

main .license p {
  color: var(--secondary-text);
  max-width: 600px;
  margin-top: 10px;
}

main .license table {
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 2px 15px rgba(64, 64, 64, 0.15);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

main .license th, td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid var(--border-glow);
}

main .license th {
  color: var(--main-green);
  font-weight: bold;
  background: rgba(0, 0, 0, 0.2);
}

main .license tr {
  transition: background-color 0.3s ease;
}

main .license tr:hover {
  background-color: rgba(0, 240, 160, 0.05);
}

main .license td {
  color: #aaaaaa;
}

main .license td a {
  border-radius: .25rem;
  font-weight: bold;
  padding: .1px .7rem;
  background-color: #ffab00;
  border-color: #ffab00;
  color: white;
}

@media (max-width: 860px) {
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }
  th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  tr {
    margin-bottom: 15px;
  }
}

.badge.badge-success{
  border-radius: .25rem;
  font-weight: bold;
  padding: .1rem .5rem;
}

.InfoScripts {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 600px) {
  .InfoScripts .Continer_Img img {
    display: none;
  }

  .InfoScripts {
    width: 65%;
    height: 30%;
  }

  .InfoScripts .Continer_Img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }
 
}

.InfoScripts .center {
  text-align: center;
}

.InfoScripts .center h2 {
  margin-top: .5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--main-text);
}

.InfoScripts .center h6 {
  color: var(--secondary-text);
}

.InfoScripts .Continer_Img {
  width: 65%;
  height: 75%;
}

.InfoScripts .Continer_Img img {
  border: 1px solid #9b9b9b;
  border-radius: 10px;
  width: 100%;
  height: 80%;
}

.InfoScripts .Continer_Img .Buttons {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.InfoScripts .Continer_Img .Buttons .button {
  width: 100px;
  height: 30px;
  border-radius: .5rem;
  border: 1px solid #9b9b9b;
  background: rgb(49 54 59);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-text);
  font-weight: bold;
  cursor: pointer;
  transition: .5s;
}

.InfoScripts .Continer_Img .Buttons .button:hover {
  background: rgb(65 71 77);
}

.InfoScripts .Exit {
  position: absolute;
  top: 1px;
  right: 9px;
  font-size: 34px;
  color: rgb(255, 0, 0);
  cursor: pointer;
}


main .continer_change {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 75vh;
  z-index: 9999;
}

main .continer_change .change {
  width: 90%;
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 160, 0.1);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 999;
  gap: 1rem;
}

main .continer_change .change h2 {
  font-weight: bold;
  color: var(--main-text);
  font-size: 1.5rem;
}

main .continer_change .change p {
  color: var(--secondary-text);
  max-width: 600px;
  margin-top: 10px;
}

main .continer_change h3 {
  color: var(--main-text);
  font-weight: bold;
}

main .continer_change .input,
main .continer_addScripts .input,
main .continer_band .input {
 width: 100%;
 height: 2.875rem;
 padding: .56rem .75rem;
 background-color: rgba(24, 24, 24, 0.5);
 border: 1px solid var(--border-glow);
 backdrop-filter: blur(5px);
 border-radius: 2px;
 color: var(--main-text);
}

main .continer_change .input::placeholder,
main .continer_addScripts .input::placeholder,
main .continer_band .input::placeholder{
  color: var(--secondary-text);
}

main .continer_change .input[name="License"] {
  width: 100%;
  height: 2.875rem;
  padding: .56rem .75rem;
  background-color: #2a3038;
  border: 1px solid #9b9b9b;
  cursor: no-drop;
  border-radius: 2px;
  color: var(--main-text);
}

main .continer_change .buttons {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  height: 30px;
  gap: 20px;
}

main .continer_change .buttons button[name="ChangeLicense"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  font-size: 15px;
  background: radial-gradient(rgba(0, 255, 0, 0.555) -68%, rgba(0, 73, 0, 0.336));
  border: 2px solid rgb(0, 160, 0);
  color: rgb(0, 300, 0);
  transition: 0.5s;
}

main .continer_change .buttons button[name="ChangeLicense"]:hover {
  background: rgb(0, 160, 0);
  color: white;
}

.close_continer {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(30, 33, 36);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--main-green);
  color: var(--main-text);
  font-size: 14px;
  transition: transform 0.7s ease-in-out;
}

.close_continer .close:hover {
  transform: rotate(180deg);
}

main .continer_addScripts {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 70vh;
  z-index: 9999;
  flex-direction: column;
}

main .continer_addScripts .AddScripts {
  width: 90%;
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 160, 0.1);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 999;
  gap: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
}

main .continer_addScripts .AddScripts h2 {
  font-weight: bold;
  color: var(--main-text);
  font-size: 1.5rem;
}

main .continer_addScripts .AddScripts p {
  color: var(--secondary-text);
  max-width: 600px;
  margin-top: 10px;
}

main .continer_addScripts h3 {
  color: var(--main-text);
  font-weight: bold;
}

main .continer_addScripts .input[name="License"] {
  width: 100%;
  height: 2.875rem;
  padding: .56rem .75rem;
  background-color: #2a3038;
  border: 1px solid #9b9b9b;
  cursor: no-drop;
  border-radius: 2px;
  color: var(--main-text);
}

main .continer_addScripts .buttons {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  height: 30px;
  gap: 20px;
}

main .continer_addScripts .buttons button[name="ChangeLicense"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  font-size: 15px;
  background: radial-gradient(rgba(0, 255, 0, 0.555) -68%, rgba(0, 73, 0, 0.336));
  border: 2px solid rgb(0, 160, 0);
  color: rgb(0, 300, 0);
  transition: 0.5s;
}

main .continer_addScripts .buttons button[name="ChangeLicense"]:hover {
  background: rgb(0, 160, 0);
  color: white;
}

main .continer_addScripts .buttons button[name="AddScripts"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  font-size: 15px;
  background: radial-gradient(rgba(0, 255, 0, 0.555) -68%, rgba(0, 73, 0, 0.336));
  border: 2px solid rgb(0, 160, 0);
  color: rgb(0, 300, 0);
  transition: 0.5s;
}

main .continer_addScripts .buttons button[name="AddScripts"]:hover {
  background: rgb(0, 160, 0);
  color: white;
}

main .continer_addScripts .buttons button[name="AddScriptsFree"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  font-size: 15px;
  background: radial-gradient(rgba(0, 255, 0, 0.555) -68%, rgba(0, 73, 0, 0.336));
  border: 2px solid rgb(0, 160, 0);
  color: rgb(0, 300, 0);
  transition: 0.5s;
}

main .continer_addScripts .buttons button[name="AddScriptsFree"]:hover {
  background: rgb(0, 160, 0);
  color: white;
}

main .continer_band {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 75vh;
  z-index: 9999;
}

main .continer_band .band {
  width: 90%;
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 160, 0.1);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 999;
  gap: 1rem;
}

main .continer_band .band h2 {
  font-weight: bold;
  color: var(--main-text);
  font-size: 1.5rem;
}

main .continer_band .band p {
  color: var(--secondary-text);
  max-width: 600px;
  margin-top: 10px;
}

main .continer_band h3 {
  color: var(--main-text);
  font-weight: bold;
}

main .continer_band .input[name="License"] {
  width: 100%;
  height: 2.875rem;
  padding: .56rem .75rem;
  background-color: #2a3038;
  border: 1px solid #9b9b9b;
  cursor: no-drop;
  border-radius: 2px;
  color: var(--main-text);
}

main .continer_band .buttons {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  height: 30px;
  gap: 20px;
}

main .continer_band .buttons button[name="ChangeLicense"],
main .continer_band .buttons button[name="BandButton"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  font-size: 15px;
  background: radial-gradient(rgba(0, 255, 0, 0.555) -68%, rgba(0, 73, 0, 0.336));
  border: 2px solid rgb(0, 160, 0);
  color: rgb(0, 300, 0);
  transition: 0.5s;
}

main .continer_band .buttons button[name="ChangeLicense"]:hover,
main .continer_band .buttons button[name="BandButton"]:hover {
  background: rgb(0, 160, 0);
  color: white;
}

main .continer_addScripts .buttons button[name="ChangeAccounts"],
main .continer_addScripts .buttons button[name="ChangeLicenseAdmin"],
main .continer_addScripts .buttons button[name="FreeChangeScript"],
main .continer_addScripts .buttons button[name="EditScripts"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  background: radial-gradient(rgba(0, 255, 0, 0.555) -68%, rgba(0, 73, 0, 0.336));
  border: 2px solid rgb(0, 160, 0);
  color: rgb(0, 300, 0);
  transition: 0.5s;
}

main .continer_addScripts .buttons button[name="ChangeAccounts"]:hover,
main .continer_addScripts .buttons button[name="ChangeLicenseAdmin"]:hover,
main .continer_addScripts .buttons button[name="EditScripts"]:hover,
main .continer_addScripts .buttons button[name="FreeChangeScript"]:hover {
  background: rgb(0, 160, 0);
  color: white;
}

main .continer_addScripts .buttons a[name="RedButton"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 3px;
  border-radius: .2rem;
  cursor: pointer;
  font-size: 15px;
  background: radial-gradient(rgba(255, 0, 0, 0.555) -68%, rgba(73, 0, 0, 0.336));
  border: 2px solid rgb(160, 0, 0);
  color: rgb(255, 0, 0);
  transition: 0.5s;
}

main .continer_addScripts .buttons a[name="RedButton"]:hover {
  background: rgb(160, 0, 0);
  color: white;
}

.swal2-container {
  z-index: 999999 !important;
}

.swal2-popup {
  background: rgba(24, 24, 24, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border-glow) !important;
  box-shadow: rgb(0 0 0 / 25%) 0 0.0625em 3px, rgb(0 0 0 / 55%) 0 0.025em 0.5em, rgb(255 255 255 / 10%) 0 0 0 1px inset !important;
  border-radius: .5rem !important;
}

.swal2-title {
  color: var(--main-text);
}

.swal2-timer-progress-bar {background-color: var(--main-green)}

/* =========================================
 🚀 ستايل الفوتر الجديد 🚀
 ========================================= */

footer {
 width: 100%;
 padding: 40px 20px 20px 20px; /* مسافة حول الفوتر */
 /* background-color: rgba(13, 13, 13, 0.7); -- ألغينا الخلفية من هنا */
 /* border-top: 1px solid var(--border-glow); -- ألغينا الحد من هنا */
 /* backdrop-filter: blur(10px); -- ألغينا البلور من هنا */
 margin-top: 40px; /* مسافة فوق الفوتر */
}

/* حاوية الفوتر الأساسية (الكرت الزجاجي) */
.footer-container {
 max-width: 1300px;
 margin: 0 auto;
 animation: fadeInUp 1s ease-out; /* حركة دخول أبطأ */
 padding: 30px;

 /* --- 💎 الستايل الزجاجي للفوتر --- */
 background: rgba(20, 22, 28, 0.6);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--border-glow);
 box-shadow: 0 0 20px rgba(0, 240, 160, 0.1);
 border-radius: 15px;
}

/* محتوى الفوتر (الأقسام) */
.footer-content {
 display: flex;
 flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */
 justify-content: space-between;
 gap: 30px; /* مسافة بين الأقسام */
 margin-bottom: 30px; /* مسافة قبل الخط الفاصل */
}

/* كل قسم في الفوتر */
.footer-section {
 flex: 1; /* محاولة أخذ مساحة متساوية */
 min-width: 150px; /* أقل عرض للقسم قبل الالتفاف */
}

/* قسم اللوجو */
.logo-section img {
 width: 60px;
 margin-bottom: 10px;
}

/* أقسام الروابط */
.links-section h4 {
 color: var(--main-text);
 font-weight: bold;
 margin-bottom: 15px;
 font-size: 1.1em;
}

.links-section ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.links-section li {
 margin-bottom: 10px;
}

.links-section a {
 color: var(--secondary-text);
 text-decoration: none;
 transition: color 0.3s ease;
}

.links-section a:hover {
 color: var(--main-green); /* تغيير اللون عند المرور */
}

/* قسم أيقونات التواصل الاجتماعي */
.social-section {
 min-width: 100px; /* عرض أقل لقسم الأيقونات */
 text-align: center; /* توسيط الأيقونات */
}
.social-section h4 { /* عنوان اختياري */
  color: var(--main-text);
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 1.1em;
}
.social-icons {
 display: flex;
 justify-content: center; /* توسيط أفقي */
 gap: 15px;
}

.social-icons a {
 color: var(--secondary-text);
 font-size: 1.5em; /* حجم الأيقونة */
 transition: color 0.3s ease;
}

.social-icons a:hover {
 color: var(--main-green); /* تغيير اللون عند المرور */
}

/* الخط الفاصل */
.footer-divider {
 border: none;
 height: 1px;
 background-color: var(--border-glow); /* خط أخضر شفاف */
 margin: 0 0 20px 0; /* مسافة فقط تحت الخط */
}

/* حقوق النشر */
.footer-copyright {
 text-align: center;
 color: var(--secondary-text);
 font-size: 0.9em;
}

/* تعديلات للشاشات الصغيرة (Mobile) */
@media (max-width: 768px) {
 .footer-content {
  flex-direction: column; /* جعل الأقسام تحت بعض */
  align-items: center; /* توسيط الأقسام */
  text-align: center; /* توسيط النصوص */
 }

 .footer-section {
  min-width: 100%; /* جعل كل قسم يأخذ العرض كامل */
  margin-bottom: 20px;
 }

 .social-section {
   margin-top: 10px; /* مسافة بسيطة فوق الأيقونات */
 }
 .social-icons {
   justify-content: center; /* تأكيد التوسيط */
 }
}
/* =========================================
 🚀 ستايل قسم "لماذا تختارنا؟" 🚀
 ========================================= */

.why-choose-us {
 padding: 60px 20px;
 background: var(--dark-background); /* خلفية سوداء */
}

/* حاوية عامة لتوسيط المحتوى في الأقسام الجديدة */
.section-container {
  max-width: 1200px; /* تحديد عرض أقصى للمحتوى */
  margin: 0 auto; /* توسيط الحاوية */
  padding: 0 15px; /* مسافة داخلية صغيرة */
}

/* عنوان القسم */
.section-title {
 text-align: center;
 font-weight: bold;
 color: var(--main-text);
 font-size: 2rem; /* حجم أكبر للعنوان */
 margin-bottom: 40px; /* مسافة تحت العنوان */
 text-shadow: 0 0 15px rgba(0, 240, 160, 0.4); /* توهج أخضر */
}

/* شبكة الكروت */
.features-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* تقسيم تلقائي للأعمدة */
 gap: 30px; /* مسافة بين الكروت */
}

/* الكرت الزجاجي (ستايل عام) */
.glass-card {
background: var(--card-background);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none; /* إزالة الحد الأخضر */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
border-radius: 10px;
animation: fadeInUp 0.7s ease-out both; /* إضافة حركة الدخول */
padding: 25px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

/* كرت الميزة */
.feature-card {
 text-align: center;
}

/* أيقونة الميزة */
.feature-icon {
 font-size: 2.5em; /* حجم الأيقونة */
 color: var(--main-green); /* لون أخضر */
 margin-bottom: 15px;
 display: inline-block; /* للسماح بالـ text-shadow */
 text-shadow: 0 0 10px rgba(0, 240, 160, 0.5); /* توهج للأيقونة */
}

/* عنوان الميزة */
.feature-card h3 {
 color: var(--main-text);
 font-size: 1.3em;
 font-weight: bold;
 margin-bottom: 10px;
}

/* وصف الميزة */
.feature-card p {
 color: var(--secondary-text);
 line-height: 1.6;
 font-size: 0.9em;
}


/* =========================================
 🚀 ستايل قسم "الأسئلة الشائعة" 🚀
 ========================================= */

.faq-section {
padding: 60px 20px;
background: transparent; /* إزالة أي تدرج */
}

/* حاوية الأكورديون */
.faq-accordion {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}

/* كل عنصر سؤال (details) */
.faq-item {
border-radius: 8px;
overflow: hidden;
/* يعتمد على .glass-card */
}

/* السؤال (summary) */
.faq-question {
 padding: 15px 20px;
 font-weight: bold;
 color: var(--main-text);
 cursor: pointer;
 display: flex; /* لترتيب السهم */
 justify-content: space-between; /* لوضع السهم على اليمين */
 align-items: center;
 list-style: none; /* إخفاء سهم المتصفح الافتراضي */
 transition: background-color 0.3s ease;
}
.faq-question::-webkit-details-marker { display: none; } /* إخفاء سهم المتصفح الافتراضي (كروم/سفاري) */

.faq-question:hover {
  background-color: rgba(0, 240, 160, 0.05); /* هايلايت خفيف عند المرور */
}

/* السهم المخصص */
.faq-arrow {
 color: var(--main-green);
 transition: transform 0.3s ease;
 font-size: 0.9em;
}

/* تدوير السهم عند فتح السؤال */
.faq-item[open] .faq-question .faq-arrow {
 transform: rotate(180deg);
}
.faq-item[open] summary { /* تغيير خلفية السؤال عند الفتح */
  background-color: rgba(0, 240, 160, 0.1);
}

/* الجواب (p) */
.faq-answer {
padding: 0 20px 15px 20px;
color: var(--secondary-text);
line-height: 1.7;
font-size: 0.9em;
border-top: 1px solid #222; /* <--- خط فاصل رمادي مطفأ ورفيع */
margin-top: 10px;
padding-top: 15px;
}
/* ========================================================
   🚀 1. تطوير "جبّار" لصفحة "رخصك الحالية" (Holo Dashboard) 🚀
   ======================================================== */

/* --- أنيميشن التوهج النابض للحدود --- */
@keyframes pulse-border-glow {
  0% {
    border-color: rgba(0, 240, 160, 0.3);
    box-shadow: 0 0 15px rgba(0, 240, 160, 0.1), 0 0 5px rgba(0, 240, 160, 0.2) inset;
  }
  50% {
    border-color: rgba(0, 240, 160, 0.8);
    box-shadow: 0 0 30px rgba(0, 240, 160, 0.5), 0 0 10px rgba(0, 240, 160, 0.6) inset;
  }
  100% {
    border-color: rgba(0, 240, 160, 0.3);
    box-shadow: 0 0 15px rgba(0, 240, 160, 0.1), 0 0 5px rgba(0, 240, 160, 0.2) inset;
  }
}

/* --- أنيميشن خط المسح (Scanline) --- */
@keyframes scanline {
  0% {
    top: -100%;
    opacity: 0.1;
  }
  70% {
    opacity: 0.3;
  }
  100% {
    top: 200%;
    opacity: 0.1;
  }
}

/* --- أنيميشن النقطة النابضة (للحالة) --- */
@keyframes pulse-status {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 240, 160, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(0, 240, 160, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 240, 160, 0);
  }
}

/* --- الحاوية الرئيسية للصفحة --- */
main .continer_license {
    align-items: flex-start;
    padding-top: 40px;
}

main .continer_license .license {
    max-width: 1200px;
    width: 90%;
    padding: 30px 15px;
    box-shadow: none;
    background: transparent;
    border: none;
}

/* --- العنوان الرئيسي H2 --- */
main .license h2 {
    font-size: 2.5rem; /* تكبير */
    color: var(--main-green);
    text-shadow: 0 0 15px rgba(0, 240, 160, 0.5), 0 0 5px rgba(0, 240, 160, 0.7);
    border-bottom: 1px solid var(--border-glow);
    padding-bottom: 15px;
    margin-bottom: 10px;
}

/* --- الوصف P --- */
main .license p {
    font-size: 1.1rem; /* تكبير */
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 40px;
}

/* --- إلغاء الجدول التقليدي --- */
main .license table {
    border-collapse: separate;
    border-spacing: 0 20px; /* زيادة المسافة بين الكروت */
    width: 100%;
    margin: 20px 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
main .license thead { display: none; } /* إخفاء رأس الجدول */
main .license tbody { display: block; width: 100%; }

/* --- تصميم "كرت الهولوغرام" (tr) --- */
main .license tr {
    display: grid;
    grid-template-areas:
        "script script status"
        "server server server"
        "license license license"
        "ip ip button";
    grid-template-columns: 1fr 1fr auto;
    gap: 20px 25px;
    
    /* --- 💎 الستايل الزجاجي المستقبلي --- */
    background: rgba(24, 24, 24, 0.6); /* خلفية داكنة شبه شفافة */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* --- ✨ التوهج النابض للحدود --- */
    border: 1px solid rgba(0, 240, 160, 0.3);
    animation: pulse-border-glow 3s infinite ease-in-out;
    /* --- نهاية التوهج --- */
    
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* ظل خفيف جداً */
    border-radius: 8px; /* زوايا حادة قليلاً */
    padding: 25px 30px;
    
    position: relative; /* ضروري لخط المسح */
    overflow: hidden; /* لإخفاء خط المسح الزائد */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- تأثير خط المسح (Scanline) --- */
main .license tr::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px; /* سمك الخط */
    background: var(--main-green);
    box-shadow: 0 0 10px 2px var(--main-green); /* توهج الخط */
    animation: scanline 4s linear infinite;
    animation-delay: calc(var(--i, 0) * 0.5s); /* لتشغيل الخط بأوقات مختلفة لكل كرت (يتطلب JS) */
    /* إذا لم يعمل Delay، ستبدأ كل الخطوط معاً وهو أيضاً جميل */
}

/* --- تأثير الـ Hover --- */
main .license tr:hover {
    transform: translateY(-5px) scale(1.02); /* رفعة بسيطة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* ظل أقوى */
}

/* --- الخلية (td) --- */
main .license td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--main-text);
    font-size: 1rem;
    font-weight: 500;
    z-index: 2; /* لتكون فوق خط المسح */
}

/* --- العناوين (Labels) --- */
main .license td::before {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--secondary-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px; /* تباعد أحرف */
}

/* --- تحديد العناوين والـ Grid Areas --- */
main .license td:nth-child(1) { grid-area: script; }
main .license td:nth-child(1)::before { content: 'السكربت // SCRIPT'; }

main .license td:nth-child(2) { grid-area: status; align-items: flex-start; }
main .license td:nth-child(2)::before { content: 'الحالة // STATUS'; }

main .license td:nth-child(3) { grid-area: server; }
main .license td:nth-child(3)::before { content: 'السيرفر // SERVER'; }

main .license td:nth-child(4) { grid-area: license; }
main .license td:nth-child(4)::before { content: 'الرخصة // LICENSE'; }

main .license td:nth-child(5) { grid-area: ip; }
main .license td:nth-child(5)::before { content: 'IP'; }

main .license td:nth-child(6) { grid-area: button; align-items: stretch; justify-content: flex-end; }
main .license td:nth-child(6)::before { content: 'تحميل // DOWNLOAD'; }

/* --- تخصيص الخانات --- */

/* 1. خانة اسم السكربت */
main .license td:nth-child(1) {
    font-size: 1.6rem;
    color: var(--main-green);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 240, 160, 0.5);
}

/* 2. خانة الحالة (النقطة النابضة) */
main .license td:nth-child(2) {
    font-size: 0; 
    padding-top: 10px; /* لضبط المحاذاة */
}
main .license td:nth-child(2)::after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--main-green);
    border: 1px solid var(--main-green);
    border-radius: 50%;
    animation: pulse-status 1.5s infinite;
}
main .license td:nth-child(2).inactive::after { /* للحالة غير النشطة */
    background: #ff5555;
    border-color: #ff5555;
    animation: none;
}

/* 4. خانة الرخصة (ستايل الكود) */
main .license td:nth-child(4) {
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 12px;
    border-radius: 5px;
    font-family: 'Consolas', 'Courier New', monospace; /* خط الهاكرز */
    color: var(--secondary-text);
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
    border: 1px dashed var(--border-glow);
}

/* 6. خانة زر التحميل (Holo Button) */
main .license td a {
    border-radius: 5px;
    font-weight: bold;
    padding: 10px 18px; /* زيادة الحشوة */
    background-color: transparent; /* خلفية شفافة */
    border: 2px solid var(--main-green); /* حدود خضراء فقط */
    color: var(--main-green); /* نص أخضر */
    text-shadow: 0 0 5px rgba(0, 240, 160, 0.5);
    text-decoration: none;
    transition: 0.3s ease;
    display: block;
    text-align: center;
    width: 100%;
}

main .license td a:hover {
    background-color: var(--main-green); /* ملء الخلفية عند المرور */
    color: var(--dark-background); /* نص أسود */
    box-shadow: 0 0 20px rgba(0, 240, 160, 0.5);
    text-shadow: none;
}


/* ========================================================
   🚀 2. تطوير "جبّار" لصفحة "تغيير الرخصة" (Cyber Terminal) 🚀
   ======================================================== */

/* --- الحاوية الرئيسية للصفحة --- */
main .continer_change {
    align-items: flex-start;
    padding-top: 40px;
}

/* --- الكرت الداخلي (شاشة الترمينال) --- */
main .continer_change .change {
    max-width: 900px;
    width: 90%;
    padding: 30px 35px;
    gap: 15px;
    
    /* --- 💎 الستايل الزجاجي المستقبلي --- */
    background: rgba(24, 24, 24, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* --- ✨ التوهج النابض للحدود --- */
    border: 1px solid rgba(0, 240, 160, 0.3);
    animation: pulse-border-glow 3s infinite ease-in-out 1s; /* تأخير بسيط */

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    
    /* --- إضافة زوايا مقطوعة (Cyberpunk) --- */
    clip-path: polygon(
        0% 15px, /* أعلى اليسار (زاوية مقطوعة) */
        15px 0%,
        calc(100% - 15px) 0%,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0% calc(100% - 15px)
    );
}

/* --- العنوان الرئيسي (H2) --- */
main .continer_change .change h2 {
    font-size: 2.2rem;
    color: var(--main-green);
    text-shadow: 0 0 10px rgba(0, 240, 160, 0.5);
    border-bottom: 1px solid var(--border-glow);
    padding-bottom: 15px;
    margin-bottom: 10px;
}

/* --- الوصف (P) --- */
main .continer_change .change p {
    font-size: 1rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- العناوين الفرعية (H3) - ستايل الأوامر --- */
main .continer_change h3 {
    color: var(--main-text);
    font-weight: 600;
    font-size: 1.2rem;
    font-family: 'Consolas', 'Courier New', monospace; /* خط الترمينال */
    background: rgba(0, 240, 160, 0.05);
    padding: 12px 20px;
    border-radius: 5px;
    margin-top: 25px;
    margin-bottom: 15px;
    border: none;
    border-left: 3px solid var(--main-green);
    text-shadow: 0 0 5px rgba(0, 240, 160, 0.3);
}
/* إضافة علامة (>) قبل العنوان */
main .continer_change h3::before {
    content: '> ';
    color: var(--main-green);
    font-weight: bold;
}

/* --- تطوير ضخم للـ Dropdown (select) --- */
main .continer_change .input,
main .continer_addScripts .input,
main .continer_band .input {
    width: 100%;
    height: 3.2rem;
    padding: 0 1rem;
    background-color: var(--dark-background);
    border: 1px solid var(--border-glow);
    border-radius: 5px;
    color: var(--main-green); /* لون النص أخضر */
    font-family: 'Consolas', 'Courier New', monospace; /* خط الترمينال */
    font-size: 1.1rem; /* تكبير الخط */
    cursor: pointer;
    transition: 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* سهم مخصص */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2300f0a0' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-right: 1rem;
    padding-left: 40px;
}

/* --- تأثير "التوهج" عند اختيار الحقل (Focus) --- */
main .continer_change .input:focus,
main .continer_addScripts .input:focus,
main .continer_band .input:focus {
    border-color: var(--main-green) !important;
    outline: none;
    box-shadow: 0 0 15px rgba(0, 240, 160, 0.5), 0 0 5px rgba(0, 240, 160, 0.7) inset;
}

/* --- حاوية الزر --- */
main .continer_change .buttons {
    margin-top: 30px;
    border-top: 1px solid var(--border-glow);
    padding-top: 25px;
}

/* --- تطوير زر "تطبيق التغييرات" (Execute Button) --- */
main .continer_change .buttons button[name="ChangeLicense"] {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%; /* عرض كامل */
    padding: 12px 25px; /* زر أكبر */
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Consolas', 'Courier New', monospace;
    background: transparent; /* خلفية شفافة */
    border: 2px solid var(--main-green);
    color: var(--main-green); /* نص أخضر */
    text-shadow: 0 0 5px rgba(0, 240, 160, 0.5);
    transition: 0.3s ease;
    
    position: relative;
    overflow: hidden;
}

main .continer_change .buttons button[name="ChangeLicense"]:hover {
    background: var(--main-green); /* ملء الخلفية */
    color: var(--dark-background); /* نص أسود */
    box-shadow: 0 0 25px rgba(0, 240, 160, 0.6);
    text-shadow: none;
}

/* --- تأثير "الضغط" على الزر --- */
main .continer_change .buttons button[name="ChangeLicense"]:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 0 10px rgba(0, 240, 160, 0.3);
}

/* --- تعديل الموبايل (Responsive) --- */
@media (max-width: 1100px) {
    main .license tr {
        grid-template-areas:
            "script status"
            "server server"
            "license license"
            "ip ip"
            "button button";
        grid-template-columns: 1fr auto;
    }
}

@media (max-width: 768px) {
    main .continer_change .change,
    main .continer_license .license {
        width: 95%;
        padding: 20px 15px;
        clip-path: none; /* إلغاء الزوايا المقطوعة في الموبايل */
        border-radius: 8px;
    }

    main .license tr {
        grid-template-areas:
            "script"
            "status"
            "server"
            "license"
            "ip"
            "button";
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px;
    }
}