/* Frontend styles with dynamic height, responsive auto scaling & hover pause support */

/* نجعل ارتفاع السلايدر يُحسب عبر متغيّر CSS يتم ضبطه من الجافاسكربت */
.kz-slider,
.kz-slide{ height: var(--kz-h, auto); }

.kz-slider{ position:relative; overflow:hidden; }
.kz-slide{ position:relative; }

/* إطارا الصورتين داخل كل سلايد */
.kz-frame{
  position:absolute;
  inset:0;
  opacity:0;
  transition-property:opacity;
  will-change:opacity;
}

/* نبدأ بإظهار الفريم الأول (A) */
.kz-slide .kz-frame:first-child{ opacity:1; }

/* الخلفية (الصورة) تملأ الإطار بالكامل مع الحفاظ على النسبة */
.kz-bg{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover; /* غطِّ الإطار؛ غيّرها إلى contain إذا أردت عدم القص إطلاقًا */
}

/* طبقات النص */
.kz-layer{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(92%,1100px);
  pointer-events:none;
}

.kz-align-left{left:6%; transform:none; text-align:left}
.kz-align-center{left:50%; transform:translateX(-50%); text-align:center}
.kz-align-right{left:94%; transform:translateX(-100%); text-align:right}

.kz-title{font-weight:700; margin:0 0 8px 0; pointer-events:auto}
.kz-desc{line-height:1.5; margin:0 0 12px 0; pointer-events:auto; white-space:pre-line}
.kz-btn{display:inline-block; padding:.7em 1.2em; border-radius:10px; text-decoration:none; font-weight:600; pointer-events:auto}

/* حد أدنى لارتفاع السلايد عند غياب معلومات النسبة حتى يتم القياس */
.kz-slide{ min-height:200px }

/* Responsive auto scaling على الشاشات الصغيرة */
@media (max-width: 640px){
  .kz-slider[data-responsive-auto="1"]{ --kz-mobile-scale: 0.85; }
  .kz-slider[data-responsive-auto="1"] .kz-title,
  .kz-slider[data-responsive-auto="1"] .kz-desc,
  .kz-slider[data-responsive-auto="1"] .kz-btn{
    transform: scale(var(--kz-mobile-scale, 0.85)) translateZ(0);
    transform-origin: center top;
    display: inline-block;
  }
}