/**
 * RTL-only stylesheet (Arabic, Hebrew, etc.).
 *
 * Enqueued last on RTL views via `hs_enqueue_rtl_styles()` in inc/assets/assets.php (priority 999).
 * Add layout or third-party plugin RTL fixes here instead of scattering
 * `:dir(rtl)` rules across the main bundle.
 *
 * @package HeshamSaad
 * @author Hesham Saad <hesham@heshamsaad.com>
 * @link https://heshamsaad.com
 */

/*
 * Prevent horizontal page scroll from off-canvas transforms, 100vw widths, or
 * plugin widgets that extend past the viewport in RTL.
 */
html[dir="rtl"] {
	overflow-x: clip;
}

html[dir="rtl"] body {
	overflow-x: clip;
	max-width: 100%;
}

/*
 * Arabic / RTL typography: negative or wide `letter-spacing` (e.g. Tailwind
 * `tracking-tight`, `tracking-[0.2em]`) breaks cursive joining and makes stems
 * look overlapped. Reset tracking site-wide; keep monospace/code untouched.
 */
html[dir="rtl"] body :where(
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	a,
	span,
	li,
	label,
	blockquote,
	figcaption,
	small,
	div,
	input,
	textarea,
	button,
	td,
	th
) {
	letter-spacing: normal !important;
	word-spacing: normal !important;
}

/*
 * We only ship IBM Plex Sans Arabic masters through 700. Browsers synthesize
 * 800/900 (e.g. `font-extrabold` / `font-black`), which thickens strokes and
 * can crowd joins — keep synthesis off for clearer Arabic joins.
 */
html[dir="rtl"] body,
html[dir="rtl"] body * {
	font-synthesis-weight: none;
}

html[dir="rtl"] body {
	text-rendering: optimizeLegibility;
}

/*
 * Display headings use tight Latin-friendly leading (`leading-[1.05]`, etc.) —
 * too tight for Arabic multi-line titles (ascenders/descenders collide).
 * `!important` wins over utility classes (e.g. arbitrary leading) only in RTL.
 */
html[dir="rtl"] body :where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.35 !important;
}

/* Large display subheads rendered as `p` (e.g. tech stack panels). */
html[dir="rtl"] body p.font-extrabold.text-balance {
	line-height: 1.3 !important;
}

/*
 * Hero `h1` (all hero variants): one consistent RTL line-height value.
 */
:dir(rtl) #hs-page-hero h1 {
	line-height: 1.4 !important;
}

:dir(rtl) #hs-page-hero p.leading-relaxed {
	line-height: 1.85;
}

:dir(rtl) #hs-page-hero.hs-hero-main .hs-hero-inner p.text-brand {
	line-height: 1.55;
}

:dir(rtl) #hs-page-hero.hs-hero-main .hs-hero-inner p.text-sm.italic {
	line-height: 1.7;
}

:dir(rtl) #hs-page-hero.hs-hero-main .hs-hero-inner .flex.flex-wrap > div > p + p {
	line-height: 1.55;
}

/* Prose / @tailwindcss/typography: cancel physical `padding-left` on lists in RTL. */
:where(:dir(rtl)) .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	padding-left: 0;
	padding-inline-start: 1.625em;
}

:where(:dir(rtl)) .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	padding-left: 0;
	padding-inline-start: 1.375em;
}

/*
 * Inline CTAs (text then arrow-right in markup): keep default flex order on RTL
 * so the icon sits on the visual left; hs_icon() rtl:scale-x-[-1] points forward (←).
 */

/* Home hero: horizontal photo scrim fades toward inline-end (photo side in RTL). */
:dir(rtl) #hs-page-hero.hs-hero-main .hs-hero-scrim-h {
	background-image: linear-gradient(
		to left,
		var(--hs-surface-dark),
		color-mix(in oklab, var(--hs-surface-dark) 70%, transparent),
		transparent
	);
}

/* Fluent Booking: slot picker padding in RTL (consultation calendar). */
.rtl .fcal_slot_picker {
	padding: 0 0 20px 20px;
}

/*
 * Fluent Booking phone field: country code selector stays LTR (flag + dial code)
 * even when the page is RTL.
 */
html[dir="rtl"] .fcal_country_select,
.rtl .fcal_country_select {
	direction: ltr;
	text-align: left;
	unicode-bidi: isolate;
}

html[dir="rtl"] .fcal_phone_wrapper .fcal_country_select,
.rtl .fcal_phone_wrapper .fcal_country_select {
	left: 1px !important;
	right: auto !important;
	border-right: 1px solid var(--fcal_slot_border, #d6dae1) !important;
	border-left: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

html[dir="rtl"] .fcal_phone_wrapper .fcal_country_select .svelte-select .value-container .selected-item,
.rtl .fcal_phone_wrapper .fcal_country_select .svelte-select .value-container .selected-item {
	padding-left: 20px !important;
	padding-right: 0 !important;
}

.rtl .fcal_slot_picker {
	padding: 0 0 20px 20px;
}

.rtl .fcal_country_select{
	direction: ltr!important
}


.rtl .fct-nice-select .list li {
    text-align: right;
}

.rtl input#billing_phone{
	text-align: right
}

.rtl .fct_address_wrapper .fct_address_modal_open_btn {
	left: 0;
	right: auto;
}

.rtl .fct_address_modal_close_btn {
	left: 0;
	right: auto;
}