/* ============================================================
   URDU HERO SLIDER — CSS
   Prefix: amur-  (safe alongside the English am- version)
   ============================================================ */

/* ── 1. Vazirmatn Font ── */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

/* ── 2. Scoped reset — CRITICAL: slider engine must stay LTR ── */
.amur-slider-wrap *,
.amur-slider-wrap *::before,
.amur-slider-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Slider translation math requires LTR even on RTL pages */
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ── 3. Wrapper ── */
.amur-slider-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  max-height: 900px;
  overflow: hidden;
  background: #060E0C;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ── 4. Track ── */
.amur-track {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row !important;
  transition: transform 0.85s cubic-bezier(0.77,0,0.175,1);
  will-change: transform;
}

/* ── 5. Slide ── */
.amur-slide {
  position: relative;
  min-width: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── 6. Background image ── */
.amur-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.amur-slide.active .amur-slide-bg {
  transform: scale(1);
}

/* ── 7. Overlay — dark on RIGHT side (Urdu text lives there) ── */
.amur-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(4,12,10,0.92) 0%,
    rgba(4,12,10,0.80) 35%,
    rgba(4,12,10,0.35) 65%,
    rgba(4,12,10,0.05) 100%
  );
}
@media (max-width: 640px) {
  .amur-overlay { background: rgba(4,12,10,0.78); }
}

/* ── 8. Dot pattern ── */
.amur-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(201,168,76,0.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 48px 48px, 24px 24px;
  background-position: 0 0, 24px 24px;
}

/* ── 9. Content wrapper — pushes inner block to RIGHT half ── */
.amur-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 100px);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
  direction: ltr !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.amur-slide.active .amur-content {
  opacity: 1;
  transform: translateY(0);
}

/* ── 10. Inner text block — RTL lives HERE only ── */
.amur-inner {
  width: 100%;
  max-width: 560px;
  text-align: right;
  direction: rtl !important;      /* ← RTL: the only element that flips */
  unicode-bidi: isolate !important;
}

/* ── 11. Badge ── */
.amur-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.35);
  color: #E8C97A;
  font-family: 'Vazirmatn', sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;         /* ← RTL: reduced from 0.12em — Urdu needs less */
  /* No text-transform — Urdu has no uppercase */
  direction: rtl !important;      /* ← RTL: override global LTR reset — badge text is Urdu */
  unicode-bidi: isolate !important;
  margin-bottom: clamp(12px, 2vh, 20px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}
.amur-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C9A84C;
  box-shadow: 0 0 6px rgba(201,168,76,0.8);
  animation: amur-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes amur-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.4); }
}
.amur-slide.active .amur-badge { opacity: 1; transform: translateY(0); }

/* ── 12. Title ── */
.amur-title {
  font-family: 'Vazirmatn', sans-serif;
  font-size: clamp(28px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.45;              /* ← RTL: was 1.1 — Urdu needs taller line-height */
  color: #fff;
  margin-bottom: clamp(10px, 1.5vh, 16px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
  text-align: right;
}
.amur-slide.active .amur-title { opacity: 1; transform: translateY(0); }

/* ── 13. Divider line — grows from RIGHT (RTL start) ── */
.amur-line {
  width: clamp(40px, 5vw, 60px);
  height: 3px;
  background: linear-gradient(90deg, rgba(201,168,76,0.1), #C9A84C);
  border-radius: 2px;
  margin-bottom: clamp(12px, 2vh, 20px);
  margin-left: auto;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: opacity 0.5s ease 0.52s, transform 0.5s ease 0.52s;
}
.amur-slide.active .amur-line { opacity: 1; transform: scaleX(1); }

/* ── 14. Description ── */
.amur-desc {
  font-family: 'Vazirmatn', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 2.1;               /* ← RTL: slightly more for Urdu readability */
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin-bottom: clamp(20px, 3.5vh, 36px);
  margin-left: auto;
  text-align: right;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s;
}
.amur-slide.active .amur-desc { opacity: 1; transform: translateY(0); }

/* ── 15. Button row ── */
.amur-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s;
  direction: ltr !important;      /* buttons stay LTR for consistent → arrow layout */
}
.amur-slide.active .amur-btns { opacity: 1; transform: translateY(0); }

/* ── 16. Button variants ── */
.amur-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(10px,1.4vh,14px) clamp(20px,2.2vw,28px);
  border-radius: 8px;
  font-family: 'Vazirmatn', sans-serif;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  direction: ltr !important;
}
.amur-btn-primary {
  background: #1A5C52; color: #fff;
  box-shadow: 0 3px 0 #0F3A33, 0 8px 24px rgba(0,0,0,0.3);
}
.amur-btn-primary:hover {
  background: #14473F;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #0F3A33, 0 12px 32px rgba(0,0,0,0.4);
}
.amur-btn-gold {
  background: #C9A84C; color: #fff;
  box-shadow: 0 3px 0 #9A7A28, 0 8px 24px rgba(0,0,0,0.3);
}
.amur-btn-gold:hover {
  background: #B8953F;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #9A7A28, 0 12px 32px rgba(0,0,0,0.4);
}
.amur-btn-outline {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.amur-btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}
.amur-btn-arr { display: inline-block; transition: transform 0.2s; }
.amur-btn:hover .amur-btn-arr { transform: translateX(4px); }

/* ── 17. Navigation arrows — RTL: prev RIGHT, next LEFT ── */
.amur-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: clamp(40px,5vw,56px);
  height: clamp(40px,5vw,56px);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.85);
  font-size: clamp(14px,1.6vw,20px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  direction: ltr !important;
}
.amur-nav:hover {
  background: rgba(201,168,76,0.2);
  border-color: rgba(201,168,76,0.5);
  color: #C9A84C;
}
.amur-prev { right: clamp(12px,2vw,28px); } /* ← RTL: prev on RIGHT */
.amur-next { left:  clamp(12px,2vw,28px); } /* ← RTL: next on LEFT  */
@media (max-width: 400px) { .amur-nav { display: none; } }

/* ── 18. Dot indicators ── */
.amur-dots {
  position: absolute;
  z-index: 20;
  bottom: clamp(24px,4vh,44px);
  left: clamp(20px,5vw,80px);    /* left side for RTL sites */
  display: flex;
  flex-direction: column;
  gap: 8px;
  direction: ltr !important;
}
@media (max-width: 640px) {
  .amur-dots {
    flex-direction: row;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(14px,3vh,24px);
  }
  .amur-counter-wrap { display: none; }
}
.amur-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}
.amur-dot.active {
  background: #C9A84C;
  height: 24px;
  box-shadow: 0 0 8px rgba(201,168,76,0.5);
}
@media (max-width: 640px) {
  .amur-dot.active { width: 24px; height: 6px; }
}

/* ── 19. Slide counter ── */
.amur-counter-wrap {
  position: absolute;
  z-index: 20;
  bottom: clamp(24px,4vh,44px);
  right: clamp(20px,5vw,80px);   /* right side for RTL sites */
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Vazirmatn', sans-serif;
  direction: ltr !important;
}
.amur-cur { font-size: clamp(28px,3.5vw,44px); font-weight: 700; color: #C9A84C; line-height: 1; }
.amur-sep { font-size: 16px; color: rgba(255,255,255,0.3); padding: 0 2px; }
.amur-tot { font-size: 14px; color: rgba(255,255,255,0.35); }

/* ── 20. Progress bar ── */
.amur-progress {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  z-index: 20;
}
.amur-pfill {
  height: 100%;
  background: linear-gradient(90deg, #1A5C52, #C9A84C);
  width: 0%;
}

/* ── 21. Mobile swipe hint ── */
.amur-swipe-hint {
  position: absolute;
  bottom: clamp(48px, 7vh, 72px);
  left: 50%; transform: translateX(-50%);
  z-index: 20;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.05em;
  display: none; align-items: center; gap: 6px;
  white-space: nowrap; pointer-events: none;
  direction: ltr !important;
}
@media (max-width: 640px) { .amur-swipe-hint { display: flex; } }