/* UAEPC home-page promo banner (edge-to-edge slider, immediately after hero).
   All slider tracks render LTR internally so transform math is language-agnostic. */

.uaepc-banner-wrap{max-width:800px;margin:18px auto 22px;padding:0 14px;direction:ltr}
.uaepc-banner-wrap.is-hidden{display:none}

/* Desktop is paused for now — show the banner only on phones (≤560px). When
   we're happy with the desktop design we'll drop this rule. The element is
   still rendered for crawlers, just visually hidden. */
@media (min-width:561px){
  .uaepc-banner-wrap{display:none}
}

.uaepc-banner{position:relative;width:100%;aspect-ratio:3/1;background:#0a0e1a;border-radius:16px;overflow:hidden;box-shadow:0 8px 26px rgba(10,14,26,0.18)}

.uaepc-banner-track{display:flex;width:100%;height:100%;transition:transform 0.55s cubic-bezier(0.4,0,0.2,1);direction:ltr}
.uaepc-banner-slide{flex:0 0 100%;height:100%;display:block;position:relative;text-decoration:none;overflow:hidden;background:#0a0e1a}

/* Ambient/blurred backdrop — fills any leftover space with a blurred and
   darkened copy of the same photo so off-aspect uploads never show flat
   navy bars. Same image source as the foreground <img>, so it's cached. */
.uaepc-banner-slide .uaepc-bg{position:absolute;inset:-14%;background-size:cover;background-position:center;filter:blur(38px) brightness(0.55) saturate(1.1);transform:translateZ(0);z-index:0;pointer-events:none}

/* `contain` so the operator's photo is never cropped — the blurred backdrop
   above handles any aspect-ratio mismatch gracefully. */
.uaepc-banner-slide picture,
.uaepc-banner-slide img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}

/* Two-button CTA row, centered at the bottom of every slide. Per-button
   anchors stay clickable even though the wrapping row ignores pointer events. */
.uaepc-cta-row{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3;font-family:'Vazirmatn','Inter',Tahoma,sans-serif;pointer-events:none;max-width:90%;flex-wrap:wrap;justify-content:center}
[dir="rtl"] .uaepc-cta-row{direction:rtl}
.uaepc-cta-row a{pointer-events:auto;text-decoration:none;display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:11px;font-weight:900;font-size:13px;letter-spacing:0.2px;transition:transform 0.2s,box-shadow 0.2s,background 0.2s;white-space:nowrap}
.uaepc-cta-row a i{font-style:normal;font-size:14px}
.uaepc-cta-row a:hover{transform:translateY(-2px)}
/* Neon-green primary CTA — punchier than gold for capturing attention.
   The double-shadow combines a soft drop-shadow with a tight inner glow so
   the button reads as luminous, not flat. Dark navy text keeps WCAG AAA. */
.uaepc-cta-primary{background:linear-gradient(135deg,#22ff66,#00e054);color:#0a0e1a !important;box-shadow:0 6px 20px rgba(34,255,102,0.55),0 0 14px rgba(34,255,102,0.4);text-shadow:0 0 1px rgba(255,255,255,0.3)}
.uaepc-cta-primary:hover{box-shadow:0 10px 28px rgba(34,255,102,0.7),0 0 22px rgba(34,255,102,0.55)}
.uaepc-cta-secondary{background:rgba(10,14,26,0.55);color:#fff !important;border:1.5px solid rgba(255,255,255,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.uaepc-cta-secondary:hover{background:rgba(10,14,26,0.78);border-color:#fff}

/* Navigation arrows — appear on hover (desktop) and via touch on mobile */
.uaepc-banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.45);color:#fff;border:0;cursor:pointer;opacity:0;transition:opacity 0.2s,background 0.2s;font-size:14px;font-weight:700;z-index:2;display:flex;align-items:center;justify-content:center}
.uaepc-banner:hover .uaepc-banner-arrow{opacity:1}
.uaepc-banner-arrow:hover{background:rgba(0,0,0,0.7)}
.uaepc-banner-arrow.prev{left:12px}
.uaepc-banner-arrow.next{right:12px}

/* Pagination dots */
.uaepc-banner-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.uaepc-banner-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.25s;border:0;padding:0}
.uaepc-banner-dot.active{background:#f5a623;width:22px;border-radius:4px}

/* Single-slide mode: hide nav since there's nothing to navigate */
.uaepc-banner.solo .uaepc-banner-arrow,
.uaepc-banner.solo .uaepc-banner-dots{display:none}

/* Loading skeleton */
.uaepc-banner.loading::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0e1a 0%,#1a1f2e 50%,#0a0e1a 100%);background-size:200% 100%;animation:uaepc-banner-shimmer 1.4s infinite ease-in-out;z-index:0}
@keyframes uaepc-banner-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .uaepc-banner-track{transition:none}
  .uaepc-banner.loading::before{animation:none}
}

/* Mobile */
@media (max-width:560px){
  .uaepc-banner-wrap{padding:0 8px;margin:14px auto 18px}
  /* On phones we want the photo to FILL the banner edge to edge — switch the
     container shape to 16:9 (matches typical phone-shot photos) and the image
     itself to object-fit:cover. The blurred backdrop is hidden because there's
     no leftover space to fill. */
  .uaepc-banner{aspect-ratio:16/9;border-radius:12px}
  .uaepc-banner-slide .uaepc-bg{display:none}
  .uaepc-banner-slide picture,
  .uaepc-banner-slide img{object-fit:cover}
  .uaepc-cta-row a{font-size:10px;padding:5px 11px;border-radius:8px;letter-spacing:0}
  .uaepc-cta-row a i{font-size:11px}
  /* Default mobile layout = SINGLE button → anchored to the physical right
     edge of the banner (per user spec: never centered on mobile, even with
     just one button). We position with `right:10px` and clear the desktop
     `left:50%; transform:translateX(-50%)` centering. */
  .uaepc-cta-row{
    bottom:14px;
    gap:6px;
    left:auto;
    right:10px;
    transform:none;
    max-width:80%;
    justify-content:flex-end;
  }
  /* TWO buttons → primary on one edge, secondary on the other.
     Direction-aware via inherited dir, so on fa/ar (RTL) the primary stays
     on the right; on en (LTR) the primary sits on the left. */
  .uaepc-cta-row:has(a:nth-child(2)){
    left:10px;
    right:10px;
    justify-content:space-between;
    max-width:none;
  }
  .uaepc-banner-arrow{width:30px;height:30px;font-size:12px}
  .uaepc-banner-arrow.prev{left:8px}
  .uaepc-banner-arrow.next{right:8px}
  .uaepc-banner-dots{bottom:8px;gap:5px}
  .uaepc-banner-dot{width:6px;height:6px}
  .uaepc-banner-dot.active{width:18px}
}