/**
 * 5GOTT Premium — rtl.css
 * Right-to-left overrides for the Arabic locale (loaded only when is_rtl()).
 *
 * Loaded AFTER main.css + responsive.css, so every rule here wins the
 * cascade by source order at equal specificity; html[dir="rtl"] scoping adds
 * specificity where main.css uses plain classes. No !important anywhere.
 *
 * Conventions:
 * - Flexbox and CSS Grid mirror automatically under direction: rtl — only
 *   physical properties (left/right, margin-left/right, …) are overridden.
 * - inset-inline-* logical properties need no overrides (already correct).
 * - Decorative radial/linear gradients with a horizontal bias are mirrored
 *   so the composition stays balanced.
 */

/* ============ 1. BASE: direction, Arabic font stack ============ */
html[dir="rtl"] {
	/* System-only Arabic stack — no external requests. Segoe UI and Tahoma
	   ship the best Arabic glyph coverage on Windows; Noto fallbacks cover
	   Linux/Android when installed. */
	--p8k-font-body: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
	--p8k-font-display: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont, "Arial Narrow", Arial, sans-serif;
}
html[dir="rtl"] body {
	direction: rtl;
	text-align: right;
}
/* Arabic script is cursive — letter-spacing disconnects letter joining,
   so neutralize the display letter-spacing used across the theme. */
html[dir="rtl"] body,
html[dir="rtl"] body * { letter-spacing: normal; }

/* Skip link: dock to the inline-start corner. */
html[dir="rtl"] .p8k-skip-link { left: auto; right: 16px; }

/* ============ 2. HEADER / NAV ============ */
/* Brand is pushed with margin-right:auto in LTR — mirror it. */
html[dir="rtl"] .p8k-brand { margin-right: 0; margin-left: auto; }
/* Nav link underline grows from the inline-start side. */
html[dir="rtl"] .p8k-nav__link::after { transform-origin: right center; }
/* Language dropdown: align to the trigger's inline-end (left in RTL). */
html[dir="rtl"] .p8k-langswitch__menu { right: auto; left: 0; }
html[dir="rtl"]:not(.js) .p8k-nav__list > li.lang-item { margin-left: 0; margin-right: 10px; }

/* ============ 3. MOBILE SLIDE-IN PANEL ============ */
/* Panel slides in from the left edge in RTL. */
html[dir="rtl"] .p8k-mobile-panel__sheet {
	right: auto;
	left: 0;
	border-left: 0;
	border-right: 1px solid var(--p8k-border-strong);
	box-shadow: 24px 0 64px rgba(0, 0, 0, 0.55);
	transform: translateX(-102%);
}
html[dir="rtl"] .p8k-mobile-panel.is-open .p8k-mobile-panel__sheet { transform: translateX(0); }

/* ============ 4. BUTTONS / DIRECTIONAL ICONS ============ */
/* CTA arrow nudge on hover points toward the inline-end (left in RTL). */
html[dir="rtl"] .p8k-header__cta:hover .p8k-btn__icon,
html[dir="rtl"] .p8k-mobile-panel__cta:hover .p8k-btn__icon,
html[dir="rtl"] .p8k-devices__cta a:hover .p8k-btn__icon,
html[dir="rtl"] .p8k-sports__cta a:hover .p8k-btn__icon { transform: translateX(-4px); }
html[dir="rtl"] .p8k-hero__cta:hover .p8k-btn__icon { transform: translateX(-5px); }
/* Arrow icons point left in RTL. */
html[dir="rtl"] .p8k-btn__icon svg,
html[dir="rtl"] .p8k-card__cta svg,
html[dir="rtl"] .p8k-hubcard__link svg,
html[dir="rtl"] .p8k-card__icon-inline,
html[dir="rtl"] .gott5-slider__link-icon,
html[dir="rtl"] .p8k-link__icon { transform: scaleX(-1); }
/* Announcement bar arrow: slides in from the right, points left. */
html[dir="rtl"] .p8k-announcement__arrow { transform: translateX(6px); }
html[dir="rtl"] .p8k-announcement__arrow svg { transform: scaleX(-1); }

/* ============ 5. HERO ============ */
/* .p8k-hero__grid and .p8k-split__grid are CSS Grid — columns mirror
   automatically under direction:rtl. No overrides needed. */
/* Mirror the horizontal bias of the decorative background glows. */
html[dir="rtl"] .p8k-hero {
	background: radial-gradient(1200px 600px at 30% -10%, rgba(59, 130, 246, 0.16), transparent 60%),
		radial-gradient(900px 500px at 85% 110%, rgba(139, 92, 246, 0.14), transparent 60%),
		var(--p8k-bg);
}
html[dir="rtl"] .p8k-hero--app {
	background:
		radial-gradient(60% 50% at 22% 30%, rgba(34, 197, 94, 0.10), transparent 70%),
		radial-gradient(50% 40% at 88% 85%, rgba(139, 92, 246, 0.10), transparent 70%),
		var(--p8k-bg);
}
html[dir="rtl"] .p8k-hero__shade {
	background:
		linear-gradient(180deg, rgba(10, 10, 15, 0.42) 0%, rgba(10, 10, 15, 0) 26%, rgba(10, 10, 15, 0) 52%, #0a0a0f 100%),
		linear-gradient(-90deg, rgba(10, 10, 15, 0.94) 0%, rgba(10, 10, 15, 0.82) 34%, rgba(10, 10, 15, 0.64) 66%, rgba(10, 10, 15, 0.60) 100%);
}
@media (max-width: 1023.98px) {
	html[dir="rtl"] .p8k-hero--photo .p8k-hero__shade {
		background:
			linear-gradient(180deg, rgba(10, 10, 15, 0.55) 0%, rgba(10, 10, 15, 0.25) 26%, rgba(10, 10, 15, 0.35) 52%, #0a0a0f 100%),
			linear-gradient(-90deg, rgba(10, 10, 15, 0.96) 0%, rgba(10, 10, 15, 0.88) 40%, rgba(10, 10, 15, 0.78) 70%, rgba(10, 10, 15, 0.74) 100%);
	}
}
/* Cinematic stat dividers move to the inline-start side. */
html[dir="rtl"] .p8k-hero--cinematic .p8k-hero__stat:first-child { padding-left: 18px; padding-right: 0; }
html[dir="rtl"] .p8k-hero--cinematic .p8k-hero__stat + .p8k-hero__stat { border-left: 0; border-right: 1px solid var(--p8k-border-strong); }
@media (max-width: 1023.98px) {
	html[dir="rtl"] .p8k-hero--cinematic .p8k-hero__stat:first-child { padding-left: 12px; padding-right: 0; }
}
/* Collage: tilt and edge-fade mirror with the flipped grid. */
html[dir="rtl"] .p8k-collage {
	transform: perspective(1200px) rotateY(8deg) rotateX(2deg) scale(1.06);
	mask-image: linear-gradient(-100deg, transparent 25%, #000 72%);
	-webkit-mask-image: linear-gradient(-100deg, transparent 25%, #000 72%);
}
/* App mockup: .p8k-appmock__body sidebar, .p8k-appmock__phone and the pills
   all use inset-inline-* logical properties — already correct in RTL. */

/* ============ 6. MARQUEE (scroll direction mirrors in RTL) ============ */
html[dir="rtl"] .p8k-genres__set { padding-right: 0; padding-left: 14px; }
@keyframes p8k-genres-scroll { to { transform: translateX(50%); } }
@keyframes p8k-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(50%, 0, 0); }
}

/* ============ 7. SLIDER CONTRACT (gott5-slider — parallel build) ============ */
/* Keep direction: rtl (NOT ltr) so cards read correctly; the slider JS
   handles scroll direction itself. */
html[dir="rtl"] .gott5-slider,
html[dir="rtl"] .gott5-slider__track { direction: rtl; }
html[dir="rtl"] .gott5-slider__card { direction: rtl; text-align: right; }
/* Arrow icons: in RTL "previous" points right and "next" points left.
   The LTR build flips the prev icon via .gott5-slider__icon--flip, so undo
   that flip here and mirror the next icon instead. */
html[dir="rtl"] .gott5-slider__prev .gott5-slider__icon--flip { transform: none; }
html[dir="rtl"] .gott5-slider__next svg { transform: scaleX(-1); }
/* NOTE (parallel slider CSS): if the prev/next buttons are positioned with
   physical left/right, mirror those declarations there. */

/* ============ 8. SPLIT / SPORTS SECTIONS ============ */
html[dir="rtl"] .p8k-split__copy .p8k-section__title,
html[dir="rtl"] .p8k-sports__title { text-align: right; }
/* Glow sits behind the copy column, which grid auto-moves to the right. */
html[dir="rtl"] .p8k-sports::before {
	left: auto;
	right: 0;
	background: radial-gradient(ellipse 60% 55% at 72% 45%, rgba(34, 197, 94, 0.08), transparent 70%);
}
html[dir="rtl"] .p8k-visual {
	background:
		radial-gradient(600px 300px at 20% 0%, rgba(59, 130, 246, 0.28), transparent 60%),
		radial-gradient(500px 300px at 90% 100%, rgba(139, 92, 246, 0.24), transparent 60%),
		linear-gradient(225deg, #101018, #0a0a12);
}

/* ============ 9. PRICING ============ */
html[dir="rtl"] .p8k-plans,
html[dir="rtl"] .p8k-pricing__included,
html[dir="rtl"] .p8k-pricing__included-title { text-align: right; }
html[dir="rtl"] .p8k-plan__save { margin-left: 0; margin-right: 8px; }

/* ============ 10. HOW-IT-WORKS TIMELINE ============ */
html[dir="rtl"] .p8k-timeline::before { left: auto; right: 27px; }
html[dir="rtl"] .p8k-timeline__item { padding: 0 88px 44px 0; }
html[dir="rtl"] .p8k-timeline__num { left: auto; right: 0; }

/* ============ 11. PROSE / ENTRY CONTENT ============ */
html[dir="rtl"] .p8k-prose ul,
html[dir="rtl"] .p8k-prose ol { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .p8k-prose th,
html[dir="rtl"] .p8k-prose td { text-align: right; }
html[dir="rtl"] .p8k-prose blockquote {
	border-left: 0;
	border-right: 3px solid var(--p8k-accent);
	padding: 8px 20px 8px 0;
}
html[dir="rtl"] .p8k-entry__content ul li { padding-left: 0; padding-right: 40px; }
html[dir="rtl"] .p8k-entry__content ul li::before { left: auto; right: 0; }
html[dir="rtl"] .p8k-entry__content ol li { padding-left: 0; padding-right: 88px; }
html[dir="rtl"] .p8k-entry__content ol li::before { left: auto; right: 0; }
html[dir="rtl"] .p8k-entry__content blockquote {
	border-left: 0;
	border-right: 3px solid var(--p8k-accent);
	border-radius: var(--p8k-radius-sm) 0 0 var(--p8k-radius-sm);
}
html[dir="rtl"] .p8k-entry__content th,
html[dir="rtl"] .p8k-entry__content td { text-align: right; }
@media (max-width: 639.98px) {
	html[dir="rtl"] .p8k-entry__content ol li { padding-left: 0; padding-right: 64px; }
	html[dir="rtl"] .p8k-entry__content ul li { padding-left: 0; padding-right: 34px; }
}

/* ============ 12. FAQ / ACCORDIONS ============ */
html[dir="rtl"] .p8k-accordion__button,
html[dir="rtl"] .p8k-faqblock__btn { text-align: right; }
html[dir="rtl"] .p8k-faqblock__panel-body ul li { padding-left: 0; padding-right: 32px; }
html[dir="rtl"] .p8k-faqblock__panel-body ul li::before { left: auto; right: 0; }

/* ============ 13. BREADCRUMBS / PAGINATION ============ */
/* Chevron separators point in the reading direction. */
html[dir="rtl"] .p8k-breadcrumbs__sep svg { transform: scaleX(-1); }
/* Prev/next arrows swap: prev points right, next points left. */
html[dir="rtl"] .p8k-pagination .prev .p8k-pagination__icon--flip { transform: none; }
html[dir="rtl"] .p8k-pagination .next .p8k-pagination__icon { transform: scaleX(-1); }

/* ============ 14. PAGE HERO / CTA ============ */
html[dir="rtl"] .p8k-pagehero__glow {
	background:
		radial-gradient(640px 340px at 84% 18%, rgba(34, 197, 94, 0.17), transparent 70%),
		radial-gradient(600px 320px at 16% 78%, rgba(245, 158, 11, 0.13), transparent 70%),
		radial-gradient(480px 280px at 30% 10%, rgba(139, 92, 246, 0.08), transparent 70%);
}
html[dir="rtl"] .p8k-cta__glow {
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent),
		radial-gradient(closest-side at 20% 20%, rgba(255, 255, 255, 0.14), transparent);
}

/* ============ 15. FOOTER ============ */
/* Grid columns mirror automatically; footer background glows are repositioned. */
html[dir="rtl"] .p8k-footer {
	background:
		radial-gradient(700px 320px at 88% 0%, rgba(34, 197, 94, 0.07), transparent 60%),
		radial-gradient(700px 320px at 12% 20%, rgba(245, 158, 11, 0.06), transparent 60%),
		#07070c;
}
html[dir="rtl"] .p8k-footer__list li:hover { transform: translateX(-5px); }

/* ============ 16. FLOATING BUTTONS ============ */
html[dir="rtl"] .p8k-to-top { right: auto; left: 22px; }
html[dir="rtl"] .p8k-wa-fab { right: auto; left: 22px; }
@media (max-width: 640px) {
	html[dir="rtl"] .p8k-wa-fab { right: auto; left: 16px; }
}
@media (max-width: 639.98px) {
	html[dir="rtl"] .p8k-wa-fab { right: auto; left: 18px; }
	html[dir="rtl"] .p8k-to-top { right: auto; left: 23px; }
}

/* ============ 17. PJAX PROGRESS BAR ============ */
html[dir="rtl"] .p8k-nav-progress {
	left: auto;
	right: 0;
	background: linear-gradient(-90deg, #22c55e, #86efac);
}