/* Jefna UX Polish Layer — v7.2.0
 * Fixes subtle issues in the v7.1 base without touching its CSS:
 *  - Accessible focus rings everywhere (visible only on keyboard nav)
 *  - prefers-reduced-motion → disable animations & smooth-scroll
 *  - RTL layout fixes for Arabic users (jefna.shop default)
 *  - Skeleton loaders for slow areas (iframes, lists)
 *  - Toast ARIA + position fix on iOS notch
 *  - Sticky-header offset edge case for short viewports
 *  - Color picker preset contrast in admin
 *  - Iframe shimmer while loading vendor PWA
 *  - Avatar upload drop-zone visible touch target
 *  - Tap-highlight cleanup on mobile
 */

/* 1. Focus-visible everywhere — keyboard-only outline */
.jv4-quick:focus-visible,
.jv4-cta:focus-visible,
.jv4-stat:focus-visible,
.jpro-btn:focus-visible,
.jpw-card:focus-visible,
.jpro-share-btn:focus-visible,
.jpro-pick:focus-visible{
  outline:3px solid var(--jv,#10b981);
  outline-offset:3px;
  border-radius:14px;
}

/* 2. Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* 3. RTL fixes — Arabic site */
[dir="rtl"] .jv4-cta-ar i.fa-arrow-right{transform:scaleX(-1)}
[dir="rtl"] .jv4-quick-ic,
[dir="rtl"] .jv4-cta-ic,
[dir="rtl"] .jv4-stat-ic{margin-left:8px;margin-right:0}
[dir="rtl"] .jpro-led-amt{text-align:left}
[dir="rtl"] .jpro-vip-card li::before{margin-inline-end:6px;margin-inline-start:0}

/* 4. Skeleton loaders */
.jpro-skel{position:relative;overflow:hidden;background:#e2e8f0;border-radius:8px}
.jpro-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:jpro-shimmer 1.4s infinite}
@keyframes jpro-shimmer{to{transform:translateX(100%)}}
[dir="rtl"] .jpro-skel::after{animation-direction:reverse}

/* 5. Toast safe area + ARIA polite styling */
.jpro-toast,
.ja-toast,
.jv4-toast{
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}

/* 6. Sticky header offset — short viewport */
@media (max-height:600px){
  body.woocommerce-account .jv4-hero{padding-top:8px;padding-bottom:8px}
}

/* 7. Iframe shimmer while vendor PWA loads */
.jv4-vendor-frame:not(.loaded),
iframe[data-jefna-pwa]:not(.loaded){
  background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%);
  background-size:200% 100%;
  animation:jpro-shimmer-bg 1.4s linear infinite;
}
@keyframes jpro-shimmer-bg{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 8. Tap highlight cleanup on iOS Safari */
.jv4-quick,.jv4-cta,.jpro-btn,.jpw-card,.jpro-pick,.jpro-share-btn{
  -webkit-tap-highlight-color:transparent;
}

/* 9. Avatar drop-zone touch target (≥44×44) */
.jv4-av-drop,.jv4-av-pick{min-height:48px}

/* 10. Admin color preset chips — guaranteed contrast outline */
.wp-admin .jefna-preset-chip{
  outline:1px solid rgba(0,0,0,.15);
  outline-offset:-1px;
}

/* 11. Better text rendering for Arabic numerals & UI text */
.jv4-hero,.jpro-hero,.jpro-page,.jefna-pro-widget{
  font-feature-settings:"ss01","ss02","cv01","cv02";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 12. Prevent layout shift when stats load */
.jv4-stats{min-height:90px}
.jefna-pro-widget{min-height:80px}

/* 13. Print-friendly account pages */
@media print{
  .jv4-hero,.jpro-hero,.woocommerce-MyAccount-navigation,.jefna-pro-widget,.jpro-btn{display:none!important}
  body{background:#fff!important;color:#000!important}
}