/* تخصيص الكونتينر الرئيسي */
.ipp-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* تخصيص picker */
.ipp-picker-container {
  width: 380px;
  height: 350px;
  overflow: hidden;
  /* border-radius: 10px;*/
  position: relative; /* لإضافة الطبقة السوداء */
   /*  background: linear-gradient(
      120deg,
      rgba(155, 79, 151, 0.8),
	  rgba(41, 72, 136, 0.8),      
      rgba(53, 172, 90, 0.8)
    ); 
  background-size: 400% 400%;
  animation: smoothBackgroundShift 10s ease-in-out infinite; /* حركة أبطأ */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
}

.ipp-picker-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* -------------- background: rgba(0, 0, 0, 0.8);  طبقة سوداء بنسبة شفافية 50% */
  z-index: 1; /* فوق الخلفية المتحركة */
  pointer-events: none; /* للسماح بالتفاعل مع العناصر داخل الـ picker */
}

/* العناصر الداخلية لـ Picker */
.ipp-picker {
/*  display: flex;  */
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative; /* فوق الطبقة السوداء */
  z-index: 2;
}

.ipp-picker li {
 /* width: calc(100% - 20px); */
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease; /* تقليل التفاعل إلى التكبير فقط */
  background: transparent;
}

.ipp-picker li:hover {
  transform: scale(1.1); /* تكبير العنصر عند التمرير */
}

.ipp-picker li.active {
  background: rgba(41, 72, 136, 0.8); /* لون العنصر النشط */
  color: #ffffff;
  font-size: 18px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.ipp-content-box {
  width: 600px;
  height: 350px;
 /*  border-radius: 10px; */
 /* background: linear-gradient(
      120deg,
      rgba(155, 79, 151, 0.8),
      rgba(41, 72, 136, 0.8),      
      rgba(53, 172, 90, 0.8)
  );
  background-size: 400% 400%;
  animation: smoothBackgroundShift 10s ease-in-out infinite;*/
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  position: relative;
  z-index: 2;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
}

.ipp-content-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 /* -------------- background: rgba(0, 0, 0, 0.8);   --------------طبقة سوداء بنسبة شفافية 50% */
  z-index: 1; /* فوق الخلفية المتحركة */
  pointer-events: none; /* للسماح بالتفاعل مع العناصر داخل الـ container */
}
	

.ipp-content-box .content {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 3;
}

.ipp-content-box .content.visible {
  opacity: 1;
}

.ipp-content-box h2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(1, 1, 1, 0.5);
	 display: none; /* إخفاء العنوان yyyyyyyyy */
}

.ipp-content-box p {
  font-size: 16px;
}



/* تصميم مخصص للجوال */
@media (max-width: 768px) {
  .ipp-container {
    flex-direction: column;
    align-items: center;
  }

  .ipp-picker-container, 
  .ipp-content-box {
    width: 100% !important;
  }
}

/* تخصيص المكون لأجهزة الموبايل */
@media (max-width: 768px) {
  .ipp-container {
    flex-direction: column;
    align-items: center;
    gap: 0vh; /* تقليل المسافة بين العناصر */
	height: 64vh ;
  }

  .ipp-picker-container {
    height: 20vh ;/* 200px; تقليل ارتفاع الـ Picker */
    overflow-y: hidden; /* منع التمرير العمودي */
    padding: 10px; /* إضافة مسافة داخلية */
    border-radius: 8px; /* زوايا مدورة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* تأثير ظل أقل */
  }

  .ipp-picker li {
    font-size: 12px; /* تصغير حجم النص */
    padding: 5px; /* تقليل الحشوة */
    border-radius: 5px; /* زوايا أصغر */
    transition: transform 0.2s ease; /* تقليل وقت التفاعل */
  }

  .ipp-picker li:hover {
    transform: scale(1.05); /* تقليل التكبير عند التمرير */
  }

  .ipp-picker li.active {
    font-size: 12px; /* تكبير النص النشط قليلاً */
    transform: scale(1.1); /* تكبير العنصر النشط */
  }

  .ipp-content-box {
    height: auto; /* السماح بارتفاع تلقائي للمحتوى */
    padding: 15px; /* تقليل المسافة الداخلية */
    font-size: 14px; /* تقليل حجم النص */
    text-align: center; /* توسيط النص */
	 font-weight:900;
  }

  .ipp-content-box h2 {
    font-size: 16px; /* تقليل حجم العنوان */
	  display: none; /* إخفاء العنوان yyyyyyyyy */
  }

  .ipp-content-box p {
    font-size: 14px; /* تقليل حجم الوصف */
  }
	
	
	 .ipp-content-box {
    height: 44vh ; /*400px; /* حدد ارتفاع ثابت مناسب */
    padding: 5px; /* أضف مساحة داخلية */
    font-size: 14px; /* حجم النص لتتناسب مع العرض */
    text-align: justify; /* توسيط المحتوى */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* تأثير ظل خفيف */
    border-radius: 8px; /* زوايا مدورة */
 
  }

  .ipp-content-box .content {
    opacity: 1; /* تأكد من ظهور المحتوى */
    transform: translate(-50%, -50%);
  }
	
	
	/*********/
	 .ipp-container {
 /* --------------    background: black;   تغيير الخلفية إلى اللون الأسود */
    padding: 5px; /* إضافة مساحة داخلية لتحسين المظهر */
    border-radius: 8px; /* زوايا مدورة قليلاً */
  }

  .ipp-picker-container::before,
  .ipp-content-box::before {
    background: transparent !important; /* إزالة الخلفية السوداء الشفافة داخل العناصر */
  }

  .ipp-picker-container,
  .ipp-content-box {
    background: transparent !important; /* إزالة الخلفية داخل العناصر */
    box-shadow: none; /* إزالة الظلال لتحسين المظهر */
	  
  }

  .ipp-picker li,
  .ipp-content-box .content {
    color: white; /* تغيير النصوص إلى اللون الأبيض لتكون مرئية على الخلفية السوداء */
 
  }
	
	/*********/
	
}

}

/************************STYLE1 ************************************/


	 .ipp-container.style1 {
 /* --------------    background: black;   تغيير الخلفية إلى اللون الأسود */
    padding:0px; /* إضافة مساحة داخلية لتحسين المظهر */
    border-radius: 8px; /* زوايا مدورة قليلاً */
  }

  .ipp-picker-container.style1::before,
  .ipp-content-box.style1::before {
    background: transparent !important; /* إزالة الخلفية السوداء الشفافة داخل العناصر */
  }

   .ipp-container.style1 .ipp-picker-container {
    box-shadow: none;
     background: linear-gradient(45deg, #4e7eb588, #2c5c9388);
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ;
}

 
.ipp-container.style1 .ipp-content-box {
    box-shadow: none;
     background: linear-gradient(45deg, #4e7eb588, #2c5c9388);
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ;
}


.ipp-container.style1 .ipp-content-box 
{
	    backdrop-filter: blur(7px);
}

.ipp-container.style1 .ipp-picker-container
{
	    backdrop-filter: blur(6px);
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


  .ipp-container.style1 .ipp-picker li,
   .ipp-container.style1 .ipp-content-box .content {
    color: white; /* تغيير النصوص إلى اللون الأبيض لتكون مرئية على الخلفية السوداء */
 font-weight:bold;
  }

.ipp-container.style1 .ipp-picker-container {
  
    padding: 15px; /* إضافة حشوة داخلية */
    border-radius: 12px; /* زوايا مدورة */
    margin-bottom: 0px; /* فراغ أسفل الـ picker */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8); /* ظل أنيق */
    border: 1px solid rgba(255, 255, 255, 0.6); /* إطار خفيف */
  }

  .ipp-container.style1 .ipp-content-box {
   
    padding: 15px; /* إضافة حشوة داخلية */
    border-radius: 12px; /* زوايا مدورة */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8); /* ظل أنيق */
    border: 1px solid rgba(255, 255, 255, 0.6); /* إطار خفيف */
  }
 
 


  /* إزالة تأثير التلاشي */
  .ipp-container.style1 .ipp-picker-container,
  .ipp-container.style1 .ipp-content-box {
    mask-image: none; /* إزالة التلاشي */
    -webkit-mask-image: none; /* إزالة التلاشي في متصفحات WebKit */
  }

  /* إخفاء العنوان داخل الصندوق النصي */
  .ipp-container.style1 .ipp-content-box .content h2 {
    display: none; /* إخفاء العنوان */
  }

  /* تحسين النصوص والفراغات داخل content */
  .ipp-container.style1 .ipp-content-box .content p {
    overflow-y: auto; /* إضافة شريط تمرير للفقرة فقط */
    scrollbar-width: thin; /* تخصيص شريط التمرير */
    scrollbar-color: #ccc #888; /* تخصيص ألوان شريط التمرير */
    scrollbar-gutter: stable;
    padding: 1px; /* مسافة داخلية للنصوص */
    font-size: 16px; /* حجم النص المناسب */
    line-height: 1.6; /* تحسين التباعد بين الأسطر */
    max-height: 33vh; /* تحديد أقصى ارتفاع للفقرة */
  /*   background: rgba(255, 255, 255, 0.05); /* خلفية خفيفة شفافة للنصوص */
    border-radius: 8px; /* زوايا مدورة للفقرة */
    color: #fff; /* لون النص */
	font-weight:bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* تحسين النص */
  }

  /* تخصيص شريط التمرير */
  .ipp-container.style1 .ipp-content-box .content p::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
  }

  .ipp-container.style1 .ipp-content-box .content p::-webkit-scrollbar-thumb {
    background-color: #444; /* لون شريط التمرير */
    border-radius: 10px; /* جعل الزوايا مدورة */
  }

  .ipp-container.style1 .ipp-content-box .content p::-webkit-scrollbar-track {
    background-color: #222; /* لون خلفية شريط التمرير */
  }
	
	.ipp-container.style1 .ipp-picker li.active {
    background: rgba(255, 255, 255, 0.05); /* تأثير كريستالي شفاف */
    color: #ffffff;
    font-size: 16px;     
    border: 1px solid rgba(255, 255, 255, 0.5); /* إطار خفيف شفاف */
    backdrop-filter: blur(10px); /* تأثير الزجاج */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* ظل خفيف */
    transition: all 0.4s ease;
  }

  .ipp-container.style1 .ipp-picker li:hover {
    background: rgba(41, 72, 136, 0.05); /* عند التمرير يظهر تأثير أزرق خفيف */
    color: #ffffff;
  }
	
	.ipp-container.style1 .ipp-content-box .content p{
		padding-left: 15px !important; 
		padding-right: 10px !important;
	}
	.ipp-container.style1 .ipp-content-box{
		padding:3px !important;
	}
	.ipp-content-box .content{
		width:95%;
	}

@media (max-width: 768px) {
  /* إزالة الخلفية الشاملة وإضافة خلفيات منفصلة */
  .ipp-container.style1 {
    background: none; /* إزالة الخلفية الشاملة */
    padding: 0; /* إزالة الحشوة */
  }
	
	.ipp-container.style1 .ipp-picker li.active {
  
    font-size: 14px;     
 
  }
	.ipp-container.style1 .ipp-content-box p{font-weight:500 !important;}
	
   .ipp-container.style1 .ipp-picker-container,
   .ipp-container.style1 .ipp-content-box {
  /*   background: rgba(255, 255, 255, 0.1) !important; إزالة الخلفية داخل العناصر */
	   	box-shadow: none;
    background: linear-gradient(45deg, #ffffff01, #eeeeee01) !important;
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ; 
   }
  .ipp-container.style1 .ipp-picker-container {
    background: linear-gradient(145deg, #111, #222); /* خلفية غامقة سوداء متدرجة للـ picker */
    	  margin-bottom: 20px;
	  
	box-shadow: none;
    background: linear-gradient(45deg, #ffffff01, #eeeeee01) !important;
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ; 
	  
	}
	.ipp-container.style1 .ipp-content-box .content p {font-weight:normal;}
	
	
	
	.ipp-container.style1 .ipp-content-box ,   .ipp-container.style1 .ipp-picker-container
{
	    backdrop-filter: blur(0px);
}
	
	}

/************************STYLE1 END************************************/






/************************STYLE2 ************************************/


	 .ipp-container.style2 {
 /* --------------    background: black;   تغيير الخلفية إلى اللون الأسود */
    padding:0px; /* إضافة مساحة داخلية لتحسين المظهر */
    border-radius: 8px; /* زوايا مدورة قليلاً */
  }

  .ipp-picker-container.style2::before,
  .ipp-content-box.style2::before {
    background: transparent !important; /* إزالة الخلفية السوداء الشفافة داخل العناصر */
  }

   .ipp-container.style2 .ipp-picker-container,
.ipp-container.style2 .ipp-content-box {
    box-shadow: none;
     background: linear-gradient(45deg, #0090CCcc, #11cFFFcc);
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ;
}

.ipp-container.style2 .ipp-content-box ,   .ipp-container.style2 .ipp-picker-container
{
	    backdrop-filter: blur(10px);
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


  .ipp-container.style2 .ipp-picker li,
   .ipp-container.style2 .ipp-content-box .content {
    color: white; /* تغيير النصوص إلى اللون الأبيض لتكون مرئية على الخلفية السوداء */
 font-weight:bold;
  }

.ipp-container.style2 .ipp-picker-container {
  
    padding: 15px; /* إضافة حشوة داخلية */
    border-radius: 12px; /* زوايا مدورة */
    margin-bottom: 0px; /* فراغ أسفل الـ picker */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8); /* ظل أنيق */
    border: 1px solid rgba(255, 255, 255, 0.6); /* إطار خفيف */
  }

  .ipp-container.style2 .ipp-content-box {
   
    padding: 15px; /* إضافة حشوة داخلية */
    border-radius: 12px; /* زوايا مدورة */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8); /* ظل أنيق */
    border: 1px solid rgba(255, 255, 255, 0.6); /* إطار خفيف */
  }
 
 


  /* إزالة تأثير التلاشي */
  .ipp-container.style2 .ipp-picker-container,
  .ipp-container.style2 .ipp-content-box {
    mask-image: none; /* إزالة التلاشي */
    -webkit-mask-image: none; /* إزالة التلاشي في متصفحات WebKit */
  }

  /* إخفاء العنوان داخل الصندوق النصي */
  .ipp-container.style2 .ipp-content-box .content h2 {
    display: none; /* إخفاء العنوان */
  }

  /* تحسين النصوص والفراغات داخل content */
  .ipp-container.style2 .ipp-content-box .content p {
    overflow-y: auto; /* إضافة شريط تمرير للفقرة فقط */
    scrollbar-width: thin; /* تخصيص شريط التمرير */
    scrollbar-color: #ccc #888; /* تخصيص ألوان شريط التمرير */
    scrollbar-gutter: stable;
    padding: 1px; /* مسافة داخلية للنصوص */
    font-size: 16px; /* حجم النص المناسب */
    line-height: 1.6; /* تحسين التباعد بين الأسطر */
    max-height: 33vh; /* تحديد أقصى ارتفاع للفقرة */
  /*   background: rgba(255, 255, 255, 0.05); /* خلفية خفيفة شفافة للنصوص */
    border-radius: 8px; /* زوايا مدورة للفقرة */
    color: #fff; /* لون النص */
	font-weight:bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* تحسين النص */
  }

  /* تخصيص شريط التمرير */
  .ipp-container.style2 .ipp-content-box .content p::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
  }

  .ipp-container.style2 .ipp-content-box .content p::-webkit-scrollbar-thumb {
    background-color: #444; /* لون شريط التمرير */
    border-radius: 10px; /* جعل الزوايا مدورة */
  }

  .ipp-container.style2 .ipp-content-box .content p::-webkit-scrollbar-track {
    background-color: #222; /* لون خلفية شريط التمرير */
  }
	
	.ipp-container.style2 .ipp-picker li.active {
    background: rgba(255, 255, 255, 0.05); /* تأثير كريستالي شفاف */
    color: #ffffff;
    font-size: 16px;     
    border: 1px solid rgba(255, 255, 255, 0.5); /* إطار خفيف شفاف */
    backdrop-filter: blur(10px); /* تأثير الزجاج */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* ظل خفيف */
    transition: all 0.4s ease;
  }

  .ipp-container.style2 .ipp-picker li:hover {
    background: rgba(41, 72, 136, 0.05); /* عند التمرير يظهر تأثير أزرق خفيف */
    color: #ffffff;
  }
	
	.ipp-container.style2 .ipp-content-box .content p{
		padding-left: 15px !important; 
		padding-right: 10px !important;
	}
	.ipp-container.style2 .ipp-content-box{
		padding:3px !important;
	}
	.ipp-content-box .content{
		width:95%;
	}

@media (max-width: 768px) {
  /* إزالة الخلفية الشاملة وإضافة خلفيات منفصلة */
  .ipp-container.style2 {
    background: none; /* إزالة الخلفية الشاملة */
    padding: 0; /* إزالة الحشوة */
  }
   .ipp-container.style2 .ipp-picker-container,
   .ipp-container.style2 .ipp-content-box {
  /*   background: rgba(255, 255, 255, 0.1) !important; إزالة الخلفية داخل العناصر */
	   	box-shadow: none;
     background: linear-gradient(45deg, #6A0DADaa, #0077FFaa) !important;
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ; 
   }
  .ipp-container.style2 .ipp-picker-container {
    background: linear-gradient(145deg, #111, #222); /* خلفية غامقة سوداء متدرجة للـ picker */
    	  margin-bottom: 20px;
	  
	box-shadow: none;
    background: linear-gradient(45deg, #6A0DADaa, #0077FFaa) !important;
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ; 
	  
	}
	.ipp-container.style2 .ipp-content-box .content p {font-weight:normal;}
	}

/************************STYLE2 END************************************/

/************************************/
 
	 .ipp-container.style3 {
 /* --------------    background: black;   تغيير الخلفية إلى اللون الأسود */
    padding:0px; /* إضافة مساحة داخلية لتحسين المظهر */
    border-radius: 8px; /* زوايا مدورة قليلاً */
  }

  .ipp-picker-container.style3::before,
  .ipp-content-box.style3::before {
    background: transparent !important; /* إزالة الخلفية السوداء الشفافة داخل العناصر */
  }

   .ipp-container.style3 .ipp-picker-container,
.ipp-container.style3 .ipp-content-box {
    box-shadow: none;
    background: linear-gradient(45deg, #0090CCcc, #11cFFFcc);
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ;
}

.ipp-container.style3 .ipp-content-box ,   .ipp-container.style3 .ipp-picker-container
{
	    backdrop-filter: blur(3px);
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


  .ipp-container.style3 .ipp-picker li,
   .ipp-container.style3 .ipp-content-box .content {
    color: white; /* تغيير النصوص إلى اللون الأبيض لتكون مرئية على الخلفية السوداء */
 font-weight:bold;
  }

.ipp-container.style3 .ipp-picker-container {
  
    padding: 15px; /* إضافة حشوة داخلية */
    border-radius: 12px; /* زوايا مدورة */
    margin-bottom: 0px; /* فراغ أسفل الـ picker */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8); /* ظل أنيق */
    border: 1px solid rgba(255, 255, 255, 0.6); /* إطار خفيف */
  }

  .ipp-container.style3 .ipp-content-box {
   
    padding: 15px; /* إضافة حشوة داخلية */
    border-radius: 12px; /* زوايا مدورة */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8); /* ظل أنيق */
    border: 1px solid rgba(255, 255, 255, 0.6); /* إطار خفيف */
  }
 
 


  /* إزالة تأثير التلاشي */
  .ipp-container.style3 .ipp-picker-container,
  .ipp-container.style3 .ipp-content-box {
    mask-image: none; /* إزالة التلاشي */
    -webkit-mask-image: none; /* إزالة التلاشي في متصفحات WebKit */
  }

  /* إخفاء العنوان داخل الصندوق النصي */
  .ipp-container.style3 .ipp-content-box .content h2 {
    display: none; /* إخفاء العنوان */
  }

  /* تحسين النصوص والفراغات داخل content */
  .ipp-container.style3 .ipp-content-box .content p {
    overflow-y: auto; /* إضافة شريط تمرير للفقرة فقط */
    scrollbar-width: thin; /* تخصيص شريط التمرير */
    scrollbar-color: #ccc #888; /* تخصيص ألوان شريط التمرير */
    scrollbar-gutter: stable;
    padding: 1px; /* مسافة داخلية للنصوص */
    font-size: 16px; /* حجم النص المناسب */
    line-height: 1.6; /* تحسين التباعد بين الأسطر */
    max-height: 33vh; /* تحديد أقصى ارتفاع للفقرة */
  /*   background: rgba(255, 255, 255, 0.05); /* خلفية خفيفة شفافة للنصوص */
    border-radius: 8px; /* زوايا مدورة للفقرة */
    color: #fff; /* لون النص */
	font-weight:bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* تحسين النص */
  }

  /* تخصيص شريط التمرير */
  .ipp-container.style3 .ipp-content-box .content p::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
  }

  .ipp-container.style3 .ipp-content-box .content p::-webkit-scrollbar-thumb {
    background-color: #444; /* لون شريط التمرير */
    border-radius: 10px; /* جعل الزوايا مدورة */
  }

  .ipp-container.style3 .ipp-content-box .content p::-webkit-scrollbar-track {
    background-color: #222; /* لون خلفية شريط التمرير */
  }
	
	.ipp-container.style3 .ipp-picker li.active {
    background: rgba(255, 255, 255, 0.05); /* تأثير كريستالي شفاف */
    color: #ffffff;
    font-size: 16px;     
    border: 1px solid rgba(255, 255, 255, 0.5); /* إطار خفيف شفاف */
    backdrop-filter: blur(5px); /* تأثير الزجاج */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* ظل خفيف */
    transition: all 0.4s ease;
  }

  .ipp-container.style3 .ipp-picker li:hover {
    background: rgba(41, 72, 136, 0.05); /* عند التمرير يظهر تأثير أزرق خفيف */
    color: #ffffff;
  }
	
	.ipp-container.style3 .ipp-content-box .content p{
		padding-left: 15px !important; 
		padding-right: 10px !important;
	}
	.ipp-container.style3 .ipp-content-box{
		padding:3px !important;
	}
	.ipp-content-box .content{
		width:95%;
	}

@media (max-width: 768px) {
  /* إزالة الخلفية الشاملة وإضافة خلفيات منفصلة */
  .ipp-container.style3 {
    background: none; /* إزالة الخلفية الشاملة */
    padding: 0; /* إزالة الحشوة */
  }
   .ipp-container.style3 .ipp-picker-container,
   .ipp-container.style3 .ipp-content-box {
  /*   background: rgba(255, 255, 255, 0.1) !important; إزالة الخلفية داخل العناصر */
	   	box-shadow: none;
    background: linear-gradient(45deg, #0090CCcc, #11cFFFcc) !important;
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ; 
   }
  .ipp-container.style3 .ipp-picker-container {
    background: linear-gradient(145deg, #111, #222); /* خلفية غامقة سوداء متدرجة للـ picker */
    	  margin-bottom: 20px;
	  
	box-shadow: none;
    background: linear-gradient(45deg, #0090CCcc, #11cFFFcc) !important;
    background-size: 100% 100% ;
    animation: gradientAnimation 8s ease infinite ; 
	  
	}
	.ipp-container.style3 .ipp-content-box .content p {font-weight:normal;}
	}