/* Add custom JS code below */ 
function insertCustomerExperiencesSection() {
  const experiences = [
    { image: 'https://c.top4top.io/p_3793wlcrx4.png', link: 'https://perflandsa.com/%D8%A7%D9%84%D9%85%D8%AC%D9%85%D9%88%D8%B9%D8%A7%D8%AA-package/c992156758', title: 'المجموعات' },
    { image: 'https://b.top4top.io/p_3793sx3uw3.png', link: 'https://perflandsa.com/%D8%A7%D9%84%D8%B9%D8%B7%D9%88%D8%B1-body-spray/c852211523', title: 'عطور' },
    { image: 'https://l.top4top.io/p_3793hiwiu1.png', link: 'https://perflandsa.com/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%B7%D8%A8%D9%8A%D8%B9%D9%8A%D8%A9/c100273738', title: 'عناية بالجسم' },
    { image: 'https://a.top4top.io/p_3793ski282.png', link: 'https://perflandsa.com/offers', title: 'عروض وتخفيضات' },
      { image: 'https://i.top4top.io/p_3796f1x3f1.png', link: 'https://perflandsa.com/%D8%AC%D8%AF%D9%8A%D8%AF-%D8%A8%D9%8A%D8%B1%D9%81%D9%84%D8%A7%D9%86%D8%AF/c1233642633', title: 'جديد بيرفلاند' }

  ];

  const offerBar = document.createElement('div');
  offerBar.className = 'offer-bar';

  const section = document.createElement('section');
  section.className = 'experience-section';

  section.innerHTML = `
    <h2 class="section-title">التصنيفات</h2>

    <div class="experience-grid">
      ${experiences.map(e => `
        <div class="experience-box">
          <div class="image-wrapper">
            <div class="summer-overlay"></div>
            <img src="${e.image}" alt="تصنيف">
            <div class="floating-shine"></div>

            <a href="${e.link}" class="experience-btn">
              ${e.title}
            </a>
          </div>
        </div>
      `).join('')}
    </div>
  `;

  const style = document.createElement('style');

  style.textContent = `

.offer-bar {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #7A4A00, #c18b38, #7A4A00);
  background-size: 300% 300%;
  animation: shimmerBar 8s ease infinite;
  color: #fff;
  padding: 14px 0;
  direction: ltr;
  font-weight: bold;
  font-size: 18px;
  display: none;
}

@keyframes shimmerBar {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== section ===== */

.experience-section {
  width: 100%;
  padding: 70px 5vw;
  background: transparent;
  direction: rtl;
}

.section-title {
  font-size: 42px;
  margin-bottom: 45px;
  text-align: center;
  color: #7A4A00;
  font-weight: 900;
}

.experience-grid {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.experience-box {
  border-radius: 50%;
  overflow: hidden;
  width: 240px;
  height: 240px;
  position: relative;
  transition: 0.45s ease;
  border: 4px solid rgba(193,139,56,0.35);
  background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
  box-shadow: 0 10px 35px rgba(122,74,0,0.12);
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.summer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255,183,77,0.28), rgba(255,255,255,0.02));
  z-index: 1;
}

.floating-shine {
  position: absolute;
  top: -120%;
  left: -40%;
  width: 60%;
  height: 250%;
  background: rgba(255,255,255,0.28);
  transform: rotate(25deg);
  transition: 0.8s;
  z-index: 2;
}

.experience-box:hover {
  transform: translateY(-12px) scale(1.06);
}

.experience-box:hover .floating-shine {
  left: 120%;
}

.image-wrapper:hover img {
  transform: scale(1.12);
  filter: brightness(0.7);
}

.experience-btn {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  background: linear-gradient(135deg, #7A4A00, #c18b38);
  color: #fff;
  padding: 13px 24px;
  border-radius: 40px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  transition: 0.4s;
  z-index: 3;
}

.image-wrapper:hover .experience-btn {
  opacity: 1;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

  .experience-section {
    padding: 35px 10px;
  }

  .section-title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  /* 👇 أهم تعديل */
  .experience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .experience-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }

}

  `;

  document.head.appendChild(style);

  const target = document.querySelector('.s-block--fixed-banner');

  if (target) {
    target.insertAdjacentElement('afterend', offerBar);
    offerBar.insertAdjacentElement('afterend', section);
  }
}

insertCustomerExperiencesSection();



/* ===== سيكشن مميزات المتجر ===== */

function insertStoreFeaturesSection() {
const features = [

  {
    icon: `
      <div class="truck-icon">
        <i class="fas fa-truck"></i>
      </div>
    `,
    title: 'شحن سريع',
    text: 'توصيل سريع وآمن لجميع مناطق المملكة بأفضل جودة تغليف.'
  },

  {
    icon: `
      <div class="love-icon">
        <i class="fas fa-heart"></i>

        <span class="heart h1">❤</span>
        <span class="heart h2">❤</span>
        <span class="heart h3">❤</span>
      </div>
    `,
    title: 'منتجات أصلية',
    text: 'عطور ومنتجات مختارة بعناية بجودة عالية وثبات يدوم.'
  },

  {
    icon: `
      <div class="chat-icon">

        <i class="far fa-comment-dots"></i>

        <span class="typing-line line1"></span>
        <span class="typing-line line2"></span>
        <span class="typing-line line3"></span>

      </div>
    `,
    title: 'خدمة العملاء',
    text: 'فريق دعم متواجد دائمًا للرد على جميع استفساراتكم.'
  }

];

  const section = document.createElement('section');

  section.className = 'store-features-section';

  section.innerHTML = `
    <div class="store-features-container">

      ${features.map(feature => `

        <div class="feature-item">

          <div class="feature-icon">
            ${feature.icon}
          </div>

          <h3>${feature.title}</h3>

          <p>${feature.text}</p>

        </div>

      `).join('')}

    </div>
  `;

  const style = document.createElement('style');

  style.textContent = `

/* ===== Section ===== */

.store-features-section{
  width:100%;
  padding:70px 20px;
  background:transparent;
  direction:rtl;
}

/* ===== Container ===== */

.store-features-container{

  max-width:1100px;
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:24px;
}

.feature-item{

  text-align:center;

  padding:30px 22px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.68)
    );

  backdrop-filter:blur(12px);

  border:1px solid rgba(178,137,92,.18);

  box-shadow:
    0 10px 25px rgba(0,0,0,.05);

  transition:.4s ease;
}

.feature-item:hover{

  transform:translateY(-8px);

  border-color:#B2895C;

  box-shadow:
    0 18px 35px rgba(178,137,92,.18);
}

.feature-icon{

  width:85px;
  height:85px;

  margin:auto auto 18px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#B2895C;

  position:relative;

  overflow:visible;

  background:
    radial-gradient(
      circle,
      rgba(255,248,234,.95),
      rgba(241,223,181,.55)
    );

  box-shadow:
    0 8px 18px rgba(178,137,92,.12);
}

.feature-icon i{
  font-size:36px;
}
/* ===== Truck ===== */

.truck-icon{
  position:relative;
}

.feature-item:hover .truck-icon{
  animation:truckMove .9s ease-in-out infinite;
}

@keyframes truckMove{

  0%{
    transform:translateX(0);
  }

  25%{
    transform:translateX(8px);
  }

  50%{
    transform:translateX(0);
  }

  75%{
    transform:translateX(-8px);
  }

  100%{
    transform:translateX(0);
  }

}

/* ===== Hearts ===== */

.love-icon{
  position:relative;
}

.heart{

  position:absolute;

  color:#ff8da9;

  opacity:0;

  pointer-events:none;

  font-size:14px;
}

.h1{
  left:-10px;
  top:10px;
}

.h2{
  right:-10px;
  top:5px;
}

.h3{
  left:50%;
  top:-5px;
}

.feature-item:hover .heart{
  animation:floatingHeart 1.6s ease infinite;
}

.feature-item:hover .h2{
  animation-delay:.3s;
}

.feature-item:hover .h3{
  animation-delay:.6s;
}

@keyframes floatingHeart{

  0%{
    opacity:0;
    transform:translateY(0) scale(.5);
  }

  20%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translateY(-30px) scale(1.2);
  }

}

/* ===== Chat ===== */

.chat-icon{
  position:relative;
}

.typing-line{

  position:absolute;

  left:50%;

  transform:translateX(-50%);

  width:0;

  height:2px;

  background:#B2895C;

  border-radius:50px;

  opacity:0;
}

.line1{
  top:14px;
}

.line2{
  top:22px;
}

.line3{
  top:30px;
}

.feature-item:hover .line1{
  animation:typingLine 1s linear infinite;
}

.feature-item:hover .line2{
  animation:typingLine 1s linear infinite .2s;
}

.feature-item:hover .line3{
  animation:typingLine 1s linear infinite .4s;
}

@keyframes typingLine{

  from{
    width:0;
    opacity:1;
  }

  to{
    width:28px;
    opacity:1;
  }

}
/* ===== Hover ===== */

.feature-item:hover .feature-icon{

  animation:floatIcon 1.8s ease-in-out infinite;

  box-shadow:
    0 0 20px rgba(178,137,92,.25);
}

.feature-item:hover path,
.feature-item:hover rect,
.feature-item:hover circle{

  filter:
    drop-shadow(
      0 0 8px rgba(178,137,92,.35)
    );
}

/* ===== Text ===== */

.feature-item h3{

  color:#7A4A00;

  font-size:20px;

  font-weight:800;

  margin-bottom:10px;
}

.feature-item p{

  color:#666;

  line-height:1.8;

  font-size:14px;

  margin:0;
}

/* ===== Animation ===== */

@keyframes floatIcon{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0);
  }

}

/* ===== Mobile ===== */

@media(max-width:768px){

  .store-features-container{

    grid-template-columns:repeat(3,1fr);

    gap:10px;
  }

  .feature-item{

    padding:16px 10px;
  }

  .feature-icon{

    width:55px;
    height:55px;
  }

  .feature-icon svg{

    width:30px;
    height:30px;
  }

  .feature-item h3{

    font-size:14px;
  }

  .feature-item p{

    font-size:11px;
    line-height:1.6;
  }

}

  `;

  document.head.appendChild(style);

  const target = document.querySelector('.section-spacing');

  if (target) {
    target.insertAdjacentElement('afterend', section);
  }
}

/* تشغيل */
const fa = document.createElement('link');

fa.rel = 'stylesheet';

fa.href =
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';

document.head.appendChild(fa);
insertStoreFeaturesSection();


/* سيكشن آراء العملاء */
function insertTestimonialsSection(targetClass = 's-block--features', insertPosition = 'after') {

  const testimonials = [
    { name: 'Shatha', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'بخصوص الريحة مو عاااادية ابدًا فيها أنوثة ونعومة ورقه شئ مررره هادي عجزت اوصفها الصدق' },
    { name: 'شوق العنزي', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'لما عطرت بجامتي الصباح وفتحت الباكيج الليل الريحة تفووووح! وهذا وانا مو عطرتها من بعيد الباكيج كله يفوح من الريحة' },
    { name: 'منيرة', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'والله المنتجات فوق الخييال وفوااحه حيل خصوصًا بالصيف الريحة تفوح قد ايش تاخذ العقل بعد الشاور مااقدر استغنى عنها واحس لازم تكون عند كل بنت تهتم بالتفاصيل' },
    { name: 'شوق العنزي', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'مررررره مو عادي ترطيب الكريم ريحة وترطيب تبرد خاطري' },
    { name: 'غادة', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'احب اي شئ يكفي حجم شنطتي يصير عندي ولاء عظيم لها شكرا بيرفلاند الحب' },
    { name: 'عبدالعزيز اليامي', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'أحب هذا المتجر وتعاملهم الراقي مع العملاء' },
    { name: 'خالد المسعودي', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'رهيبين يفكون أزمة. اشتريت من هنا لعيالي وصراحة شئ لا يعلى عليه' },
    { name: 'ندى الحسيني', image: 'https://f.top4top.io/p_3643fw8sy1.png', text: 'وصلتني اليوم وطلعت جميلة متحمسة أجربها' }
  ];

  /* إنشاء السيكشن */
  const section = document.createElement('section');
  section.className = 'testimonials-section';

  section.innerHTML = `
    <div class="testimonials-glow"></div>

    <h2 class="section-title">
      آراء العملاء 
    </h2>

    <div class="slider-wrapper">

      <button class="slider-btn prev">&#10094;</button>

      <div class="testimonial-slider">
        ${testimonials.map(t => `
          <div class="testimonial-box">

            <div class="quote-icon">❝</div>

            <div class="avatar-wrap">
              <img src="${t.image}" alt="${t.name}">
            </div>

            <h3>${t.name}</h3>

            <div class="stars">
              ★★★★★
            </div>

            <p>${t.text}</p>

            <div class="card-shine"></div>

          </div>
        `).join('')}
      </div>

      <button class="slider-btn next">&#10095;</button>

    </div>
  `;

  /* CSS */
  const style = document.createElement('style');

  style.textContent = `

/* ===== السيكشن ===== */

.testimonials-section {
  width: 100%;
  padding: 80px 0;
  background: transparent;
  direction: rtl;
  position: relative;
  overflow: hidden;
}

/* توهج خفيف */
.testimonials-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  top: -200px;
  left: -150px;
  pointer-events: none;
}

/* ===== العنوان ===== */

.section-title {
  font-size: 42px;
  margin: 0 40px 40px;
  text-align: center;
  position: relative;
  color: #7A4A00;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 5px 18px rgba(193,139,56,0.18);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 50%;
  transform: translateX(50%);
  width: 120px;
  height: 5px;
  border-radius: 20px;

  background: linear-gradient(
    90deg,
    #7A4A00,
    #d8a652,
    #7A4A00
  );
}

/* ===== السلايدر ===== */

.slider-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 65px;
}

.testimonial-slider {
  display: flex;
  gap: 28px;
  transition: transform 0.6s ease;
  will-change: transform;
}

/* ===== الكارد ===== */

.testimonial-box {
  flex: 0 0 calc((100% - 56px) / 3);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.95),
      rgba(255,250,242,0.85)
    );

  border-radius: 28px;
  padding: 35px 25px;
  text-align: center;
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(193,139,56,0.25);

  box-shadow:
    0 12px 30px rgba(122,74,0,0.08),
    inset 0 0 20px rgba(255,255,255,0.35);

  backdrop-filter: blur(10px);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

/* بوردر متحرك */

.testimonial-box::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  padding: 2px;

  background: linear-gradient(
    45deg,
    #f3d18a,
    #7A4A00,
    #fff1c7,
    #d8a652
  );

  background-size: 300% 300%;

  animation: borderMove 6s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}

@keyframes borderMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Hover */

.testimonial-box:hover {
  transform: translateY(-12px) scale(1.02);

  box-shadow:
    0 25px 50px rgba(193,139,56,0.22),
    0 0 30px rgba(255,210,120,0.15);
}

/* علامة الاقتباس */

.quote-icon {
  position: absolute;
  top: 15px;
  left: 22px;
  font-size: 70px;
  color: rgba(193,139,56,0.10);
  font-weight: bold;
  line-height: 1;
}

/* الصورة */

.avatar-wrap {
  width: 95px;
  height: 95px;
  margin: 0 auto 18px;
  border-radius: 50%;
  padding: 4px;

  background: linear-gradient(
    135deg,
    #7A4A00,
    #d8a652,
    #fff1c7
  );

  box-shadow:
    0 10px 25px rgba(122,74,0,0.18);
}

.testimonial-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* الاسم */

.testimonial-box h3 {
  font-size: 21px;
  margin: 8px 0 10px;
  color: #2f2f2f;
  font-weight: 800;
}

/* النجوم */

.stars {
  color: #d8a652;
  font-size: 20px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

/* النص */

.testimonial-box p {
  font-size: 15.5px;
  color: #555;
  line-height: 2;
  margin: 0;
}

/* لمعة */

.card-shine {
  position: absolute;
  top: -120%;
  left: -40%;
  width: 60%;
  height: 250%;
  background: rgba(255,255,255,0.22);
  transform: rotate(25deg);
  transition: 0.9s;
}

.testimonial-box:hover .card-shine {
  left: 130%;
}

/* ===== الأزرار ===== */

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background:
    linear-gradient(135deg, #7A4A00, #c18b38);

  color: #fff;
  border: none;

  font-size: 26px;

  width: 52px;
  height: 52px;

  border-radius: 50%;
  cursor: pointer;
  z-index: 5;

  box-shadow:
    0 10px 25px rgba(122,74,0,0.25);

  transition: 0.35s ease;
}

.slider-btn:hover {
  transform: translateY(-50%) scale(1.12);
  box-shadow:
    0 15px 35px rgba(193,139,56,0.35);
}

.slider-btn.prev {
  right: 5px;
}

.slider-btn.next {
  left: 5px;
}

/* ===== موبايل ===== */

@media (max-width: 992px) {

  .testimonial-box {
    flex: 0 0 100%;
  }

  .slider-wrapper {
    padding: 0 20px;
  }

  .section-title {
    font-size: 32px;
    margin-bottom: 35px;
  }

  .slider-btn {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }
}

  `;

  document.head.appendChild(style);

  /* إدراج السيكشن */
  const target = document.querySelector(`.${targetClass}`);

  if (target) {
    target.insertAdjacentElement(
      insertPosition === 'after' ? 'afterend' : 'beforebegin',
      section
    );
  }

  /* منطق السلايدر */
  const slider = section.querySelector('.testimonial-slider');
  const nextBtn = section.querySelector('.slider-btn.next');
  const prevBtn = section.querySelector('.slider-btn.prev');

  let currentIndex = 0;

  function getVisibleItems() {
    return window.innerWidth <= 992 ? 1 : 3;
  }

  function maxIndex() {
    return testimonials.length - getVisibleItems();
  }

  function updateSlider() {
    const box = slider.querySelector('.testimonial-box');

    if (!box) return;

    const boxWidth = box.offsetWidth + 28;

    slider.style.transform =
      `translateX(${currentIndex * boxWidth}px)`;
  }

  nextBtn.onclick = () => {
    if (currentIndex < maxIndex()) {
      currentIndex++;
      updateSlider();
    }
  };

  prevBtn.onclick = () => {
    if (currentIndex > 0) {
      currentIndex--;
      updateSlider();
    }
  };

  window.addEventListener('resize', () => {
    currentIndex = 0;
    updateSlider();
  });

  /* Auto Play */
  setInterval(() => {

    if (currentIndex < maxIndex()) {
      currentIndex++;
    } else {
      currentIndex = 0;
    }

    updateSlider();

  }, 5000);
}

/* تشغيل */
insertTestimonialsSection(
  'store-features-section',
  'after'
);

/*البنر الاول*/
(function () {

  const banners = [
    {
      image: "a79b8999-4584-447f-9771-2ebd075898be.webp",
      title: "تفاصيل صغيرة تصنع الفرق",
      link: "https://perflandsa.com/جديد-بيرفلاند/c1233642633",
      type: "center"
    },
    {
      image: "3a5498f2-aebc-40cf-bc05-446d116ad4e3.webp",
      title: "لمسة تدوم في الذاكرة",
      link: "https://perflandsa.com/offers",
      type: "center"
    },
    {
      image: "ef64b85f-73ed-43ad-bc42-80ad8f527903.webp",
      link: "https://perflandsa.com/جديد-بيرفلاند/c1233642633",
      type: "button"
    },
    {
      image: "1c6547ef-f6e0-4223-a637-c8651c5d6e96.webp",
      link: "https://perflandsa.com/مجموعات-بيرفلاند/c992156758",
      type: "button"
    }
  ];

  const style = document.createElement("style");

  style.textContent = `

.perfland-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.35));
  z-index:5;
  animation:fadeUp .8s ease;
}
.perfland-overlay h2{
  color:#fff;
  font-size:56px;
  font-weight:900;
  margin-bottom:24px;
  text-shadow:0 4px 20px rgba(0,0,0,.35);
  line-height:1.2;
}

.perfland-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 34px;
  border-radius:50px;
  text-decoration:none;
  color:#fff !important;
  font-size:18px;
  font-weight:700;
  background:linear-gradient(135deg,#7A4A00,#c18b38);
  box-shadow:0 12px 30px rgba(122,74,0,.35);
  transition:.35s ease;
}

.perfland-btn:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 18px 40px rgba(193,139,56,.45);
}

/* زر ثابت أسفل البنر */
.perfland-btn-bottom{
  position:absolute;
  left:50%;
  bottom:25px;
  transform:translateX(-50%);
  z-index:10;
}

/* Hover خاص بالزر السفلي (حل مشكلة الحركة يمين/شمال) */
.perfland-btn-bottom:hover{
  transform:translateX(-50%) translateY(-4px) scale(1.05);
  box-shadow:0 18px 40px rgba(193,139,56,.45);
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:translateY(0);}
}

@media(max-width:768px){
  .perfland-overlay h2{
    font-size:26px;
    margin-bottom:14px;
  }

  .perfland-btn{
    font-size:14px;
    padding:10px 22px;
  }

  .perfland-btn-bottom{
    bottom:15px;
  }
}
/* البنر الثاني فقط */

.perfland-overlay-right{

  align-items:flex-start;

  text-align:left;

  padding-left:8%;

  padding-right:0;

}

.perfland-overlay-right h2{

  width:100%;

  max-width:500px;

  text-align:left;

  margin-bottom:20px;

}

/* الزر في منتصف عرض العنوان */
.perfland-overlay-right .perfland-btn{

  align-self:flex-start;


  transform:translateX(-50%);

}

/* إخفاء النص والزر في الموبايل */

@media (max-width:768px){

  .perfland-overlay-right h2,
  .perfland-overlay-right .perfland-btn{

    display:none !important;

  }

}

`;

  document.head.appendChild(style);

  function init() {

    banners.forEach(b => {

      const img = document.querySelector(`img[src*="${b.image}"]`);
      if (!img) return;

      const banner = img.closest("a");
      if (!banner) return;

      if (banner.dataset.done) return;
      banner.dataset.done = "1";

      banner.style.position = "relative";
      banner.style.overflow = "hidden";

      if (b.type === "center") {

  const overlay = document.createElement("div");

  /* البنر الخاص بلمسة تدوم في الذاكرة */
  if (b.title === "لمسة تدوم في الذاكرة") {

    overlay.className = "perfland-overlay perfland-overlay-right";

  } else {

    overlay.className = "perfland-overlay";

  }

  overlay.innerHTML = `
    <h2>${b.title}</h2>
    <a href="${b.link}" class="perfland-btn">اطلبها الآن</a>
  `;

  banner.appendChild(overlay);



      } else {

        const btn = document.createElement("a");
        btn.href = b.link;
        btn.className = "perfland-btn perfland-btn-bottom";
        btn.innerText = "اطلبها الآن";

        banner.appendChild(btn);
      }

    });

  }

  init();
  setTimeout(init, 1000);
  setTimeout(init, 2500);

})();