/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED RTL POLISH + A11Y SWEEP (E28)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-rtl-polish.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.29  (E28 — Visual Enhancement Roadmap v2 — Stage 10 middle)
 * @depends     ALL prior enhanced CSS (loads after ldt-enhanced-responsive)
 *
 *   The closing-stretch RTL audit + accessibility sweep. Per-session files
 *   (E1-E27) already include [dir="rtl"] / .ldt-rtl scoped rules for their
 *   own surfaces. This file:
 *
 *     1. Catches anything missed across sessions
 *     2. Polishes gradient direction reversal in RTL
 *     3. Mirrors sticky/floating elements (back-to-top, sidebars)
 *     4. Swaps carousel arrows + progress fill direction
 *     5. Polishes Tajawal font rendering (+0.05 line-height, no tracking)
 *     6. Smooth language-toggle transition (300ms class swap)
 *     7. Accessibility sweep — focus states, skip link, motion reduction,
 *        forced-colors mode (Windows High Contrast), reduced transparency
 *
 *   PURE CSS LAYER — no PHP partial is touched. Same approach as E1-E27.
 *   Continues Stage 10 (Final Polish).
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. SECTION DECORATION LINES — gradient direction reverses in RTL
 *
 * Decorative gradient lines in section headers / dividers point left-to-right
 * by default. In RTL, they should point right-to-left.
 * ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] body .ldt-section-decoration__line,
[dir="rtl"] body .ldt-divider--gradient,
[dir="rtl"] body .ldt-section__divider,
.ldt-rtl body .ldt-section-decoration__line,
.ldt-rtl body .ldt-divider--gradient,
.ldt-rtl body .ldt-section__divider {
    background: linear-gradient(
        270deg,
        var(--ldt-accent, #ff8c00) 0%,
        var(--ldt-primary, #003580) 50%,
        transparent 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. HERO TEXT ALIGNMENT IN RTL
 *
 * Hero content reads right-to-left by default in RTL — most was handled in
 * per-session files. This catches the centered/floating bits.
 * ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] body .ldt-hero__content,
[dir="rtl"] body .ldt-hero__inner,
.ldt-rtl body .ldt-hero__content,
.ldt-rtl body .ldt-hero__inner {
    text-align: right;
}

/* Centered heroes stay centered (about, contact, tools, single) */
[dir="rtl"] body .ldt-hero--about .ldt-hero__inner,
[dir="rtl"] body .ldt-hero--contact .ldt-hero__inner,
[dir="rtl"] body .ldt-hero--tool .ldt-hero__inner,
[dir="rtl"] body .ldt-hero--single .ldt-hero__inner,
[dir="rtl"] body .ldt-bkh__inner,
.ldt-rtl body .ldt-hero--about .ldt-hero__inner,
.ldt-rtl body .ldt-hero--contact .ldt-hero__inner,
.ldt-rtl body .ldt-hero--tool .ldt-hero__inner,
.ldt-rtl body .ldt-hero--single .ldt-hero__inner,
.ldt-rtl body .ldt-bkh__inner {
    text-align: center;
}

/* Per-slide content max-width: pin to right side */
[dir="rtl"] body .ldt-hero__slide-content,
.ldt-rtl body .ldt-hero__slide-content {
    margin-left: auto;
    margin-right: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. CARD ARROW CTAs — flip in RTL
 *
 * "Explore →" / "Read more →" / "Book Now →" arrows flip to point left.
 * Most cards already handle this in per-session files; this catches missed.
 * ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] body .ldt-card__arrow,
[dir="rtl"] body .ldt-card-deal__cta::after,
[dir="rtl"] body .ldt-card-guide__cta::after,
[dir="rtl"] body .ldt-tool-card__go,
[dir="rtl"] body .ldt-section__cta::after,
[dir="rtl"] body [class*="__view-all"]::after,
[dir="rtl"] body [class*="__see-more"]::after,
.ldt-rtl body .ldt-card__arrow,
.ldt-rtl body .ldt-card-deal__cta::after,
.ldt-rtl body .ldt-card-guide__cta::after,
.ldt-rtl body .ldt-tool-card__go,
.ldt-rtl body .ldt-section__cta::after,
.ldt-rtl body [class*="__view-all"]::after,
.ldt-rtl body [class*="__see-more"]::after {
    transform: scaleX(-1);
}

/* 3D tilt mirrors */
[dir="rtl"] body .ldt-card-3d:hover,
[dir="rtl"] body [data-tilt]:hover,
.ldt-rtl body .ldt-card-3d:hover,
.ldt-rtl body [data-tilt]:hover {
    transform: rotateY(-5deg) rotateX(2deg);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. ANIMATIONS — slide-in-left ↔ slide-in-right swapped in RTL
 *
 * Keyframes from E3 (ldt-enhanced-animations.css) animate from a fixed direction.
 * In RTL, "slide in from left" should mean "from right" visually.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@keyframes ldt-slide-in-left-rtl {
    0%   { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0);    }
}

@keyframes ldt-slide-in-right-rtl {
    0%   { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0);     }
}

[dir="rtl"] body .ldt-slide-in-left,
[dir="rtl"] body [data-reveal="slide-in-left"],
.ldt-rtl body .ldt-slide-in-left,
.ldt-rtl body [data-reveal="slide-in-left"] {
    animation: ldt-slide-in-left-rtl 600ms var(--ldt-ease-portal, ease) forwards;
}

[dir="rtl"] body .ldt-slide-in-right,
[dir="rtl"] body [data-reveal="slide-in-right"],
.ldt-rtl body .ldt-slide-in-right,
.ldt-rtl body [data-reveal="slide-in-right"] {
    animation: ldt-slide-in-right-rtl 600ms var(--ldt-ease-portal, ease) forwards;
}

/* Float, pulse, glow keyframes are direction-agnostic — no override needed */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. STICKY / FLOATING ELEMENTS — mirror to opposite side
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Back-to-top button (E22) — already mirrored via per-session rules.
   Reinforce here for safety. */
[dir="rtl"] body .ldt-back-top,
.ldt-rtl body .ldt-back-top {
    right: auto !important;
    left: 24px !important;
}

@media (max-width: 600px) {
    [dir="rtl"] body .ldt-back-top,
    .ldt-rtl body .ldt-back-top {
        left: 16px !important;
    }
}

/* Right-rail sidebar becomes left-rail */
[dir="rtl"] body .ldt-single__layout,
[dir="rtl"] body .ldt-single-grid,
[dir="rtl"] body .ldt-guide-layout,
.ldt-rtl body .ldt-single__layout,
.ldt-rtl body .ldt-single-grid,
.ldt-rtl body .ldt-guide-layout {
    /* CSS Grid is direction-agnostic; only ensure column order doesn't reverse */
    direction: rtl;
}

/* Single-hero action bar mirror */
[dir="rtl"] body .ldt-hero-actions,
[dir="rtl"] body .ldt-single-hero__actions,
.ldt-rtl body .ldt-hero-actions,
.ldt-rtl body .ldt-single-hero__actions {
    right: auto;
    left: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. CAROUSEL / SCROLL ARROWS — swap visually in RTL
 *
 * Prev/next arrows swap in RTL since reading direction reverses. The
 * arrow GLYPH should still point in the right physical direction.
 * ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] body .ldt-carousel__prev,
[dir="rtl"] body .ldt-carousel__next,
[dir="rtl"] body .ldt-related-rail__prev,
[dir="rtl"] body .ldt-related-rail__next,
[dir="rtl"] body [class*="__nav-prev"],
[dir="rtl"] body [class*="__nav-next"],
.ldt-rtl body .ldt-carousel__prev,
.ldt-rtl body .ldt-carousel__next,
.ldt-rtl body .ldt-related-rail__prev,
.ldt-rtl body .ldt-related-rail__next,
.ldt-rtl body [class*="__nav-prev"],
.ldt-rtl body [class*="__nav-next"] {
    /* The wrapper position swaps via per-session RTL rules.
       Inner arrow glyph also flips so it points the correct physical direction. */
}

[dir="rtl"] body .ldt-carousel__prev .arrow,
[dir="rtl"] body .ldt-carousel__next .arrow,
[dir="rtl"] body .ldt-carousel__prev svg,
[dir="rtl"] body .ldt-carousel__next svg,
.ldt-rtl body .ldt-carousel__prev .arrow,
.ldt-rtl body .ldt-carousel__next .arrow,
.ldt-rtl body .ldt-carousel__prev svg,
.ldt-rtl body .ldt-carousel__next svg {
    transform: scaleX(-1);
}

/* Progress underline / scroll-progress bars fill RTL */
[dir="rtl"] body .ldt-scroll-progress,
[dir="rtl"] body .ldt-progress-bar__fill,
[dir="rtl"] body [class*="__progress-fill"],
.ldt-rtl body .ldt-scroll-progress,
.ldt-rtl body .ldt-progress-bar__fill,
.ldt-rtl body [class*="__progress-fill"] {
    transform-origin: right;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. TAJAWAL FONT RENDERING (RTL/AR-only)
 *
 * Looser line-height for Arabic readability. Zero tracking (Arabic doesn't
 * need letter-spacing — it's already a connected script).
 * ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] body,
.ldt-rtl body {
    line-height: 1.65;          /* +0.05 over LTR default 1.6 */
    letter-spacing: 0 !important;
    font-feature-settings: "kern" 1, "liga" 1;
}

[dir="rtl"] body h1,
[dir="rtl"] body h2,
[dir="rtl"] body h3,
[dir="rtl"] body h4,
[dir="rtl"] body h5,
[dir="rtl"] body h6,
.ldt-rtl body h1,
.ldt-rtl body h2,
.ldt-rtl body h3,
.ldt-rtl body h4,
.ldt-rtl body h5,
.ldt-rtl body h6 {
    line-height: 1.35;          /* +0.05 over LTR 1.30 / 1.20 / etc. */
    letter-spacing: 0 !important;
}

/* Eyebrow uppercase tracking — Arabic doesn't have uppercase or tracking */
[dir="rtl"] body .ldt-eyebrow,
[dir="rtl"] body .ldt-section__eyebrow,
[dir="rtl"] body .ldt-about-section-label,
[dir="rtl"] body [class*="__eyebrow"],
.ldt-rtl body .ldt-eyebrow,
.ldt-rtl body .ldt-section__eyebrow,
.ldt-rtl body .ldt-about-section-label,
.ldt-rtl body [class*="__eyebrow"] {
    text-transform: none;
    letter-spacing: 0 !important;
    font-weight: 700;
}

/* Widget titles uppercase tracking — same */
[dir="rtl"] body .ldt-widget__title,
.ldt-rtl body .ldt-widget__title {
    text-transform: none;
    letter-spacing: 0 !important;
}

/* Field labels uppercase tracking — same */
[dir="rtl"] body .ldt-cf-field > label,
[dir="rtl"] body .ldt-pyt-field-label,
[dir="rtl"] body .ldt-cc__row-label,
[dir="rtl"] body .ldt-fs__field-label,
[dir="rtl"] body .ldt-hs__field-label,
[dir="rtl"] body .ldt-cs__field-label,
.ldt-rtl body .ldt-cf-field > label,
.ldt-rtl body .ldt-pyt-field-label,
.ldt-rtl body .ldt-cc__row-label,
.ldt-rtl body .ldt-fs__field-label,
.ldt-rtl body .ldt-hs__field-label,
.ldt-rtl body .ldt-cs__field-label {
    text-transform: none;
    letter-spacing: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. LANGUAGE TOGGLE — smooth class transition (300ms)
 *
 * When user clicks the language toggle, html/body should briefly fade so the
 * mirror animates smoothly rather than snapping.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body {
    transition: opacity 200ms ease;
}

body.ldt-lang-switching {
    opacity: 0.85;
}

/* But respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    body,
    body.ldt-lang-switching {
        transition: none;
        opacity: 1;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. ACCESSIBILITY — focus states (visible focus indicators)
 *
 * Modern browsers support :focus-visible. We add brand-colored 3px outline
 * to all interactive elements when focused via keyboard.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body [tabindex]:focus-visible,
body details > summary:focus-visible {
    outline: 3px solid var(--ldt-accent, #ff8c00);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Override the default outline removed by some libraries */
body button:focus,
body a:focus {
    outline: none;
}

body button:focus-visible,
body a:focus-visible {
    outline: 3px solid var(--ldt-accent, #ff8c00);
    outline-offset: 2px;
}

/* Skip link — visible only when focused */
body .skip-link,
body .ldt-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--ldt-primary, #003580);
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 200ms var(--ldt-ease-portal, ease);
}

body .skip-link:focus,
body .ldt-skip-link:focus {
    top: 0;
    outline: 3px solid var(--ldt-accent, #ff8c00);
    outline-offset: -3px;
}

[dir="rtl"] body .skip-link,
[dir="rtl"] body .ldt-skip-link,
.ldt-rtl body .skip-link,
.ldt-rtl body .ldt-skip-link {
    left: auto;
    right: 0;
    border-radius: 0 0 0 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. ACCESSIBILITY — sr-only utility
 * ═══════════════════════════════════════════════════════════════════════════════ */

.sr-only,
.ldt-sr-only,
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* But visible when focused */
.sr-only:focus,
.ldt-sr-only:focus,
.screen-reader-text:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. MOTION REDUCTION — global override
 *
 * For users with prefers-reduced-motion, disable ALL animations + transitions
 * + scroll-behavior. Per-session files already include this; this is the
 * catch-all sweep.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Specifically disable parallax, scroll-driven, and infinite animations */
    body [data-parallax],
    body .ldt-parallax,
    body .ldt-pulse,
    body .ldt-pulse-glow,
    body .ldt-icon-pulse,
    body [class*="-pulse"],
    body [class*="-shimmer"],
    body [class*="-float"],
    body canvas.ldt-particles,
    body .ldt-hero__particles {
        animation: none !important;
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 12. FORCED-COLORS MODE (Windows High Contrast)
 *
 * Users in forced-colors mode (Windows HC) need:
 * - All `transparent` borders to use system colors
 * - Background-image gradients fall back to solid colors
 * - Glass effects don't make text unreadable
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {

    /* Force interactive borders */
    body button,
    body a,
    body .ldt-btn,
    body .ldt-card,
    body .ldt-widget,
    body input,
    body textarea,
    body select {
        border: 1px solid CanvasText !important;
        background: Canvas !important;
        color: CanvasText !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Active / current states */
    body .is-active,
    body .is-current,
    body button:focus,
    body a:focus {
        border: 2px solid Highlight !important;
        background: Highlight !important;
        color: HighlightText !important;
    }

    /* Hide decorative gradients/blobs */
    body .ldt-hero__blob,
    body .ldt-hero__particles,
    body .ldt-hero__orb,
    body .ldt-hero__floater,
    body [class*="__blob"],
    body [class*="__decoration"] {
        display: none !important;
    }

    /* Gradient text → solid system color */
    body .ldt-section__title,
    body .ldt-fg__title,
    body .ldt-faq__title,
    body .ldt-about-h2 strong,
    body [class*="-stat__num"] {
        background: none !important;
        background-clip: initial !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        color: CanvasText !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 13. REDUCED-TRANSPARENCY (iOS / accessibility settings)
 *
 * Users with reduced-transparency setting need solid backgrounds instead of
 * glass / backdrop-filter blurs.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-transparency: reduce) {

    body .ldt-card,
    body .ldt-widget,
    body [class*="--card"],
    body [class*="__card"],
    body .ldt-fs__card,
    body .ldt-hs__card,
    body .ldt-cs__card,
    body .ldt-cc__form,
    body .ldt-tip__form,
    body .ldt-pyt-form,
    body .ldt-contact-form-wrap,
    body .ldt-srvtabs__inner {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
        border: 1px solid rgba(0, 53, 128, 0.16) !important;
    }

    /* Header / footer / overlays — solid */
    body .ldt-header.is-scrolled,
    body .ldt-bkh__overlay {
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 14. HIGH CONTRAST PREFERENCE — bumps text contrast
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: more) {

    body {
        color: #000000;
    }

    body p,
    body li {
        color: #1a1a1a;
    }

    /* Card borders darken */
    body .ldt-card,
    body .ldt-widget,
    body [class*="--card"] {
        border-color: rgba(0, 0, 0, 0.30) !important;
    }

    /* Buttons get heavier borders */
    body .ldt-btn,
    body button[class*="ldt-"]:not([class*="--primary"]):not([class*="--accent"]) {
        border-width: 2px !important;
    }

    /* Gradient text falls back to solid brand-blue */
    body .ldt-section__title,
    body .ldt-fg__title,
    body .ldt-faq__title,
    body [class*="-title"]:has(> strong),
    body .ldt-about-h2 strong {
        background: none !important;
        -webkit-text-fill-color: var(--ldt-primary, #003580) !important;
        color: var(--ldt-primary, #003580) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 15. ARIA-LIVE REGIONS — visible enough to read
 * ═══════════════════════════════════════════════════════════════════════════════ */

body [aria-live="polite"]:not([hidden]):not(:empty),
body [aria-live="assertive"]:not([hidden]):not(:empty) {
    /* Just ensure no display: none on populated live regions */
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 16. TARGET HIGHLIGHT — visual cue when an anchor link jumps to a section
 * ═══════════════════════════════════════════════════════════════════════════════ */

body :target {
    animation: ldt-target-pulse 1.6s ease-out;
}

@keyframes ldt-target-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.30); }
    50%  { box-shadow: 0 0 0 8px rgba(255, 140, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);   }
}

@media (prefers-reduced-motion: reduce) {
    body :target { animation: none; }
}


/* ─── END OF ldt-enhanced-rtl-polish.css ──────────────────────────────────── */