/* ════════════════════════════════════════
   EZ PLUGIN — Hero Slider Styles
   All classes prefixed qsldr- to avoid conflicts
   Cairo font loaded via Google Fonts enqueued by the widget
   ════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;900&display=swap');

:root {
  --qsldr-gold:       #85724d;
  --qsldr-gold-hover: #70603f;
  --qsldr-teal:       #166164;
}

/* ── Wrapper ── */
.qsldr-wrap {
  position:   relative;
  width:      100%;
  height:     100vh;
  min-height: 560px;
  max-height: 900px;
  overflow:   hidden;
  font-family: 'Cairo', sans-serif;
  direction:  ltr;
}

/* ── Track ── */
.qsldr-track {
  position:    absolute;
  inset:       0;
  display:     flex;
  transition:  transform .8s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}

/* ── Individual Slide ── */
.qsldr-slide {
  flex:            0 0 100%;
  width:           100%;
  height:          100%;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ── Background Images ──
   Base styles only — background-image URLs are injected
   as inline CSS per slide from the widget render method.
   Ken Burns is paused on inactive slides so only one GPU
   layer is animating at a time — key for mobile smoothness.
   translateZ(0) promotes the bg to its own compositor layer
   without breaking child transitions (unlike backface-visibility). ── */
.qsldr-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  background-color:    #0a3739;
  animation:           qsldrKenburns 20s ease-in-out infinite;
  animation-play-state: paused;
  will-change:         transform;
  transform:           translateZ(0);
}
.qsldr-slide.qsldr-active .qsldr-bg {
  animation-play-state: running;
}
.qsldr-bg-1 { animation-delay:   0s; }
.qsldr-bg-2 { animation-delay:  -7s; }
.qsldr-bg-3 { animation-delay: -14s; }

/* ── Ken Burns ── */
@keyframes qsldrKenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, -.4%); }
  100% { transform: scale(1)    translate(0, 0); }
}

/* ── Overlay ── */
.qsldr-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    150deg,
    rgba(10,55,57,.87)  0%,
    rgba(22,97,100,.75) 60%,
    rgba(10,55,57,.87)  100%
  );
}

/* ── Dot Pattern ── */
.qsldr-dots-pattern {
  position:         absolute;
  inset:            0;
  z-index:          2;
  pointer-events:   none;
  opacity:          .06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size:  36px 36px;
}

/* ── Content ── */
.qsldr-content {
  position:  relative;
  z-index:   3;
  text-align: center;
  padding:   0 24px;
  max-width: 1000px;
  width:     100%;
  direction: rtl;
}

/* ── Heading ── (base; overridden per-slide by inline CSS) ── */
.qsldr-h1 {
  font-size:   52px;
  font-weight: 900;
  color:       #fff;
  line-height: 1.2;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
  font-family: 'Cairo', sans-serif;
}

/* ── Sub-text ── (base; overridden per-slide by inline CSS) ── */
.qsldr-sub {
  font-size:    18px;
  font-weight:  500;
  color:        rgba(255,255,255,.85);
  line-height:  1.7;
  margin-bottom: 36px;
  max-width:    750px;
  margin-left:  auto;
  margin-right: auto;
  font-family: 'Cairo', sans-serif;
}


/* ── Buttons ── */
.qsldr-btns {
  display:         flex;
  gap:             14px;
  justify-content: center;
  flex-wrap:       wrap;
  margin-bottom:   48px;
}

.qsldr-btn-primary {
  display:         inline-flex;
  align-items:     center;
  background:      var(--qsldr-gold);
  color:           #fff;
  border:          none;
  border-radius:   12px;
  padding:         0 36px;
  height:          52px;
  font-size:       16px;
  font-weight:     700;
  text-decoration: none;
  transition:      background .2s, transform .15s, box-shadow .2s;
  font-family:     'Cairo', sans-serif;
  animation:       qsldrPulseGold 3s ease-in-out infinite;
}
.qsldr-btn-primary:hover {
  background:      var(--qsldr-gold-hover);
  transform:       translateY(-2px);
  animation:       none;
  box-shadow:      0 8px 26px rgba(133,114,77,.45);
  color:           #fff;
  text-decoration: none;
}

/* ── Navigation Arrows ── */
.qsldr-arrow {
  position:    absolute;
  top:         50%;
  transform:   translateY(-50%);
  z-index:     10;
  width:       46px;
  height:      46px;
  border-radius: 50%;
  background:  rgba(255,255,255,.15) !important;
  border:      1.5px solid rgba(255,255,255,.3) !important;
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  transition:  background .2s;
  outline:     none !important;
  box-shadow:  none !important;
  color:       #fff !important;
}
.qsldr-arrow:hover { background: rgba(255,255,255,.28) !important; }
.qsldr-arrow:focus { outline: none !important; box-shadow: none !important; }
.qsldr-arrow svg {
  width:            20px;
  height:           20px;
  stroke:           #fff;
  fill:             none;
  stroke-width:     2.2;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}
.qsldr-prev { left:  28px; }
.qsldr-next { right: 28px; }

/* ── Dot Indicators ── */
.qsldr-indicators {
  display:         flex;
  justify-content: center;
  gap:             8px;
  position:        absolute;
  bottom:          40px;
  left:            0;
  right:           0;
  z-index:         10;
}
.qsldr-indicator {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(255,255,255,.4) !important;
  border:        none !important;
  padding:       0;
  cursor:        pointer;
  transition:    background .3s, width .3s, border-radius .3s;
  outline:       none !important;
  box-shadow:    none !important;
}
.qsldr-indicator.active {
  background:    #fff !important;
  width:         24px;
  border-radius: 4px;
}
.qsldr-indicator:hover  { background: rgba(255,255,255,.7) !important; }
.qsldr-indicator:focus  { outline: none !important; box-shadow: none !important; }

/* ── Scroll Chevron ── */
.qsldr-chevron {
  position:  absolute;
  bottom:    16px;
  left:      50%;
  transform: translateX(-50%);
  z-index:   10;
  color:     rgba(255,255,255,.4);
  animation: qsldrBounce 2.4s ease-in-out infinite;
}
.qsldr-chevron svg {
  width:           26px;
  height:          26px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  display:         block;
}

/* ════════════════════════════════════════
   REVEAL / STAGGER ANIMATIONS
   ════════════════════════════════════════ */

.qsldr-content .qsr-1,
.qsldr-content .qsr-2,
.qsldr-content .qsr-3,
.qsldr-content .qsr-4 {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.qsldr-slide.qsldr-active .qsr-1 { opacity:1; transform:translateY(0); transition-delay: .10s; }
.qsldr-slide.qsldr-active .qsr-2 { opacity:1; transform:translateY(0); transition-delay: .28s; }
.qsldr-slide.qsldr-active .qsr-3 { opacity:1; transform:translateY(0); transition-delay: .46s; }
.qsldr-slide.qsldr-active .qsr-4 { opacity:1; transform:translateY(0); transition-delay: .62s; }

/* ════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════ */

@keyframes qsldrPulseGold {
  0%, 100% { box-shadow: 0 0 0 0   rgba(133,114,77,.5); }
  60%       { box-shadow: 0 0 0 14px rgba(133,114,77,0); }
}

@keyframes qsldrBounce {
  0%, 100% { transform: translateX(-50%) translateY(0);  }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (max-width: 768px) {
  .qsldr-wrap {
    height:     100svh;
    min-height: 500px;
    max-height: 800px;
  }
  /* !important ensures mobile sizes win over per-slide inline CSS */
  .qsldr-h1  { font-size: 30px !important; }
  .qsldr-sub { font-size: 15px !important; }
  .qsldr-btns { flex-direction: column; align-items: center; }
  .qsldr-btn-primary { width: 240px; justify-content: center; }
  .qsldr-arrow  { display: none; }
  .qsldr-content { padding: 0 20px; }
}

@media (max-width: 480px) {
  .qsldr-h1  { font-size: 24px !important; }
  .qsldr-sub { font-size: 14px !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .qsldr-bg            { animation: none; }
  .qsldr-btn-primary   { animation: none; }
  .qsldr-chevron       { animation: none; }
  .qsldr-track         { transition: none; }
  .qsldr-content .qsr-1,
  .qsldr-content .qsr-2,
  .qsldr-content .qsr-3,
  .qsldr-content .qsr-4 { opacity:1; transform:none; transition:none; }
}