/*
 * AdvertUp site layer (all pages). Replaces Customizer > Additional CSS (#6277) and the CSS parts of
 * WPCode snippets 17429, 17435, 17437, 17442, 17444. Arabic-only rules live in rtl.css, focus/target/motion
 * rules in a11y.css. Tokens: docs/design-tokens.md (single source of truth).
 * Findings: THM-07, CUS-REV-01, GAP5-05, GAP5-08, GAP6-09, GAP6-11, GAP6-13.
 */

/* ---------- 1. Tokens ---------- */
:root {
	--au-brand: #3cc0c6;          /* brand teal (Customizer main_color, kit global 59cdacf) */
	--au-brand-hover: #00bcc6;    /* hover (Customizer main_hover_color) */
	--au-brand-ink: #16767b;      /* teal text on white, 5.4:1 */
	--au-on-brand: #111111;       /* text on teal, 8.6:1 */
	--au-ink: #111111;
	--au-black: #000000;
	--au-white: #ffffff;
	--au-charcoal: #302f2d;
	--au-text: #333333;
	--au-grey-600: #636363;
	--au-muted: #a4a3a6;          /* dark backgrounds only */
	--au-surface: #fbfbfb;
	--au-font-latin: "Montserrat", sans-serif;
	--au-font-heading: "Rubik", sans-serif;
	--au-font-hero: "Merriweather", serif;
	--au-font-ar: "Almarai", sans-serif;
	--au-space-1: 1rem;
	--au-space-2: 2rem;
	--au-space-3: 3rem;
	--au-space-5: 5rem;
	--au-space-8: 8rem;
	--au-space-12: 12rem;
}

/* ---------- 2. Former Additional CSS (#6277), same order ---------- */
.text-yellow {
	color: var(--au-brand) !important;
}

.text-yellow2 {
	color: var(--au-black) !important;
}

.royalstudio-portfolio {
	display: block;
}

.shape-container .shape,
.preloader .shape-container .shape {
	background-color: var(--au-brand) !important;
}

/* No-JS fallback: never leave the preloader or the magic cursor on screen. */
html.no-js .preloader,
html.no-js .preloader.open_preloader,
html.no-js #magic-cursor {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

html.no-js body {
	overflow: auto !important;
}

.meta-holder {
	display: none !important;
}

.main-navigation a {
	outline-offset: -8px;
	padding: 1.2rem 1.2rem;
	white-space: nowrap;
}

/* The theme's default active colour is the vendor red #d9092b. */
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a,
.main-navigation a span.btn-inner span:after,
.main-navigation a:hover,
.main-navigation li:hover > a:after,
#header.menu_style_light .main-navigation li.current-menu-item > a {
	color: var(--au-brand) !important;
}

.owl-carousel .owl-stage-outer {
	position: relative;
	color: var(--au-brand);
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

/* Role and name of a testimonial: dark on light sections, white on dark ones (it was dark on both). */
.royalstudio-testimonials-dark-bg.elementor-widget-ft-testimonials h4 {
	color: #424040 !important;
}

.dark-background .royalstudio-testimonials-dark-bg.elementor-widget-ft-testimonials h4 {
	color: var(--au-white) !important;
}

/* Was ".elementor-button :hover" (stray space: it recoloured any hovered child). */
.elementor-button:hover {
	text-decoration: inherit;
	color: var(--au-white);
}

.wpcf7-form-control-wrap textarea {
	height: 100px;
}

.wpcf7-form-control-wrap {
	width: 100%;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Was ".smooth", which also matched the page wrapper div.viewport.smooth (3 s transition on the whole page). */
.smooth:not(.viewport) {
	-webkit-transition: ease-in-out 3s !important;
	transition: ease-in-out 3s !important;
}

.smooth:not(.viewport):hover {
	background-position: center bottom !important;
}

.wpcf7-form label {
	color: var(--au-ink);
	margin-bottom: -20px !important;
}

.wpcf7-form .head {
	margin-top: 50px;
}

.wpcf7-form .title {
	margin-bottom: -60px !important;
}

.wpcf7-form h3 {
	color: var(--au-brand);
}

.wpcf7-form h4 {
	font-size: 16px;
	margin-bottom: 10px;
}

.img-form img {
	box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
	border-radius: 20px;
	width: 80%;
}

/* Arabic navigation labels only (was unscoped: English navigation rendered in Almarai, GAP6-11). */
.btn-inner span:lang(ar) {
	font-family: var(--au-font-ar) !important;
}

/* ---------- 3. Near-black text on teal (GAP6-09: white on #3cc0c6 is 2.2:1) ---------- */
/* .au-on-brand is added server-side to Elementor buttons whose fill is the brand teal (i18n.php). */
.elementor .elementor-element.elementor-widget.au-on-brand a.btn,
.elementor .elementor-element.elementor-widget.au-on-brand .elementor-button,
.elementor .elementor-element.elementor-widget.au-on-brand-hover a.btn:hover,
.elementor .elementor-element.elementor-widget.au-on-brand-hover .elementor-button:hover {
	color: var(--au-on-brand) !important;
}

/* Hover of a teal button is the dark fill with a white label, unless the widget sets a teal hover fill. */
.elementor .elementor-element.elementor-widget.au-on-brand:not(.au-on-brand-hover) a.btn:hover,
.elementor .elementor-element.elementor-widget.au-on-brand:not(.au-on-brand-hover) .elementor-button:hover {
	color: var(--au-white) !important;
}

.elementor .elementor-element.elementor-widget.au-on-brand .elementor-button svg,
.elementor .elementor-element.elementor-widget.au-on-brand-hover .elementor-button:hover svg {
	fill: currentColor;
}

.elementor .elementor-element.elementor-widget.au-brand-ink a.btn,
.elementor .elementor-element.elementor-widget.au-brand-ink a.btn:hover {
	color: var(--au-brand-ink) !important;
}

/* Contact-form submit (EN and AR contact pages): teal with near-black text. Was an element-ID rule for #12506
   with white text; the hover state keeps the widget's own colours. */
.elementor .elementor-element.elementor-widget-ft-cf7 .wpcf7 .wpcf7-submit:not(:hover) {
	background-color: var(--au-brand);
	color: var(--au-on-brand);
}

.elementor .elementor-element.elementor-widget-ft-cf7 .wpcf7 .wpcf7-submit:hover {
	background-color: var(--au-ink);
	color: var(--au-white);
}

/* ---------- 4. Header and fullscreen menu (from WPCode 17442; GAP6-13) ---------- */
/* The menu list drew a permanent empty scrollbar box (theme.css: overflow-y: scroll). */
.fullscreen-menu {
	overflow-y: auto;
}

body.open-big-menu .site-header.clone-fixed.open-menu {
	z-index: 999999 !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu,
body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu-panel,
body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu-content {
	pointer-events: auto !important;
}

body.open-big-menu .fullscreen-menu {
	z-index: 99999 !important;
	pointer-events: auto !important;
}

body.open-big-menu .fullscreen-menu-panel {
	z-index: 100000 !important;
	pointer-events: auto !important;
}

body.open-big-menu .fullscreen-menu-content {
	z-index: 100001 !important;
	pointer-events: auto !important;
}

body.open-big-menu .fullscreen-menu-bg,
body.open-big-menu .fullscreen-menu .shape-container {
	pointer-events: none !important;
}

body.open-big-menu ul.fullscreen-menu li a {
	position: relative !important;
	z-index: 100002 !important;
	pointer-events: auto !important;
}

body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu-btn,
body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu-btn > a,
body.open-big-menu .site-header.clone-fixed.open-menu #menu-main-right-menu {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu-btn {
	position: relative !important;
	z-index: 1000005 !important;
	display: block !important;
}

body.open-big-menu .site-header.clone-fixed.open-menu .fullscreen-menu-btn > a {
	position: relative !important;
	z-index: 1000006 !important;
	display: flex !important;
}

body.open-big-menu .site-header.clone-fixed.open-menu #menu-main-right-menu {
	position: relative !important;
	z-index: 1000006 !important;
}

#magic-cursor,
#ball,
#ball-inner {
	pointer-events: none !important;
}

/* ---------- 5. Case-study filter (from WPCode 17435; behaviour in site.js; GAP6-16) ---------- */
.case-study-controls {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	position: relative;
	z-index: 20;
}

.case-study-search-wrap {
	flex: 1;
	max-width: 420px;
}

.case-study-search {
	width: 100%;
	height: 48px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	padding: 0 22px;
	font-size: 15px;
	background: var(--au-white);
	color: var(--au-ink);
}

.case-study-search:focus {
	border-color: var(--au-brand);
}

.case-study-filter-wrap {
	position: relative;
}

.case-study-filter-toggle {
	height: 48px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	padding: 0 22px;
	background: var(--au-white);
	color: var(--au-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.case-study-filter-icon {
	color: var(--au-brand);
	font-size: 18px;
}

.case-study-filter-menu {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-start: 0;
	min-width: 220px;
	background: var(--au-white);
	border: 1px solid #eee;
	border-radius: 16px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
	padding: 8px;
	margin: 0;
	list-style: none;
	z-index: 999;
}

.case-study-filter-menu[hidden] {
	display: none;
}

.case-study-filter-option {
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--au-ink);
	text-align: start;
	padding: 12px 14px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 14px;
}

.case-study-filter-option:hover,
.case-study-filter-option[aria-pressed="true"] {
	background: rgba(60, 192, 198, 0.12);
	color: var(--au-brand-ink);
}

.case-study-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--au-text);
	font-size: 18px;
}

/* The search/filter reads in the page language (17435 forced RTL and Almarai on the English page). */
.case-study-controls-ar .case-study-search,
.case-study-controls-ar .case-study-filter-toggle,
.case-study-controls-ar .case-study-filter-option {
	font-family: var(--au-font-ar);
}

@media (max-width: 767px) {
	.case-study-controls {
		flex-direction: column;
		align-items: stretch;
		padding: 0 20px;
		margin-bottom: 35px;
	}

	.case-study-search-wrap {
		max-width: 100%;
	}

	.case-study-filter-toggle {
		width: 100%;
		justify-content: space-between;
	}

	.case-study-filter-menu {
		width: 100%;
	}
}

/* ---------- 6. Home team slider (markup and behaviour in site.js) ----------
   The current member is a little larger than the following ones. All cards stand on one baseline with one gap,
   positions follow from the sizes below, and the row mirrors in RTL. */
.au-custom-team {
	--au-team-w: 280px;   /* following cards */
	--au-team-h: 380px;
	--au-team-aw: 360px;  /* current card */
	--au-team-ah: 480px;
	--au-team-gap: 24px;
	color: var(--au-white);
	width: 100%; /* the column's width, so the cards start on the heading's line */
	margin: 0 auto;
	padding: 8px 0 16px;
	overflow: hidden;
}

/* The heading row above the slider: the page sets 90px under it; 40px keeps heading, button and cards together. */
.elementor-inner-section.elementor-element:has(+ .elementor-inner-section .ft-team .team-items-wrapper) {
	padding-bottom: 40px;
}

.au-team-slider {
	position: relative;
	display: block;
}

.au-team-stage {
	position: relative;
	height: var(--au-team-ah);
}

.au-team-card {
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: var(--au-team-w);
	height: var(--au-team-h);
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--au-ink);
	opacity: 0;
	pointer-events: none;
	transition: inset-inline-start 0.55s ease, width 0.55s ease, height 0.55s ease, opacity 0.55s ease;
}

.au-custom-team .au-team-card img { /* two classes: Elementor's own img rule sets height: auto */
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: grayscale(1);
}

.au-team-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 5%, rgba(60, 192, 198, 0.72) 0 18%, transparent 19%),
		radial-gradient(circle at 50% 108%, rgba(60, 192, 198, 0.82) 0 39%, transparent 40%);
	opacity: 0.92;
	pointer-events: none;
}

.au-team-overlay {
	position: absolute;
	inset-inline: 22px;
	bottom: 20px;
	z-index: 2;
	text-align: start;
}

.au-team-overlay h3 {
	color: var(--au-white);
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 6px;
	font-weight: 700;
	transition: font-size 0.55s ease;
}

.au-team-overlay p {
	color: var(--au-white);
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	font-weight: 600;
}

.au-team-card.is-active {
	width: var(--au-team-aw);
	height: var(--au-team-ah);
	opacity: 1;
	z-index: 5;
	pointer-events: auto;
}

.au-team-card.is-active .au-team-overlay h3 {
	font-size: 26px;
}

.au-team-card.is-next-1 {
	inset-inline-start: calc(var(--au-team-aw) + var(--au-team-gap));
	opacity: 1;
	z-index: 4;
	pointer-events: auto;
}

.au-team-card.is-next-2 {
	inset-inline-start: calc(var(--au-team-aw) + var(--au-team-w) + 2 * var(--au-team-gap));
	opacity: 1;
	z-index: 3;
	pointer-events: auto;
}

.au-team-card.is-next-3 {
	inset-inline-start: calc(var(--au-team-aw) + 2 * var(--au-team-w) + 3 * var(--au-team-gap));
	opacity: 0.45;
	z-index: 2;
}

/* Controls: the two arrows, then the progress line, in one row under the cards. */
.au-team-arrow,
.au-team-arrow:focus {
	position: absolute;
	top: calc(100% + 28px);
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: none;
	color: var(--au-white);
	cursor: pointer;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.au-team-arrow:hover {
	background: var(--au-brand);
	border-color: var(--au-brand);
	color: var(--au-on-brand);
}

.au-team-arrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-block-start: 2px solid currentColor;
	border-inline-start: 2px solid currentColor;
}

.au-team-prev {
	inset-inline-start: 0;
}

.au-team-prev::before {
	transform: translateX(2px) rotate(-45deg);
}

.au-team-next {
	inset-inline-start: 60px;
}

.au-team-next::before {
	transform: translateX(-2px) rotate(135deg);
}

[dir="rtl"] .au-team-prev::before {
	transform: translateX(-2px) rotate(45deg);
}

[dir="rtl"] .au-team-next::before {
	transform: translateX(2px) rotate(-135deg);
}

.au-team-progress {
	width: min(360px, 100% - 136px);
	height: 2px;
	background: rgba(255, 255, 255, 0.22);
	margin-block: 51px 23px;
	margin-inline-start: 136px;
	overflow: hidden;
}

.au-team-progress span {
	display: block;
	height: 100%;
	background: var(--au-white);
	transition: width 0.45s ease;
}

@media (max-width: 1024px) {
	.au-custom-team {
		--au-team-w: 220px;
		--au-team-h: 300px;
		--au-team-aw: 300px;
		--au-team-ah: 400px;
		--au-team-gap: 20px;
	}

}

@media (max-width: 899px) {
	.au-team-card.is-next-2 {
		opacity: 0.45;
	}

	.au-team-card.is-next-3 {
		opacity: 0;
	}
}

@media (max-width: 767px) {
	.au-custom-team {
		--au-team-aw: 100%;
		--au-team-ah: min(480px, 118vw);
		max-width: 420px;
	}

	.au-team-card.is-next-1,
	.au-team-card.is-next-2,
	.au-team-card.is-next-3 {
		inset-inline-start: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
	}

	.au-team-card.is-active .au-team-overlay h3 {
		font-size: 24px;
	}

	/* Progress line first, arrows centred under it (clear of the floating chat and search buttons). */
	.au-team-progress {
		width: 100%;
		margin: 24px 0 88px;
	}

	.au-team-arrow,
	.au-team-arrow:focus {
		top: calc(100% + 50px);
	}

	.au-team-prev {
		inset-inline-start: calc(50% - 54px);
	}

	.au-team-next {
		inset-inline-start: calc(50% + 6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.au-team-card,
	.au-team-overlay h3 {
		transition: none;
	}
}

/* ---------- 7. About team grid: leadership first while the grid is one column (< 992 px: phones and
   portrait tablets; GAP6-10; toggle in site.js). Two/three-column desktop grid unchanged. ---------- */
.au-team-more {
	display: none;
}

@media (max-width: 991px) {
	.au-team-collapsible:not(.is-expanded) > .team-card.au-team-extra {
		display: none;
	}

	.au-team-more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin: 10px auto 40px;
		min-height: 48px;
		padding: 0 28px;
		border: 0;
		border-radius: 0;
		background: var(--au-brand);
		color: var(--au-on-brand);
		font-weight: 700;
		cursor: pointer;
	}
}

/* ---------- 8. Websites page #15750: see assets/css/web-15750.css (loaded on that page only by inc/content.php). ---------- */

/* ---------- 9. Chaty on phones (GAP6-12): closer to the corner, bubble only (the "Contact us" label covered
   text). The bubble keeps its accessible name ("Open chaty"). ---------- */
@media (max-width: 767px) {
	.chaty .chaty-widget.left-position {
		left: 12px !important;
		bottom: 12px !important;
	}

	.chaty .chaty-widget.right-position {
		right: 12px !important;
		bottom: 12px !important;
	}

	.chaty .chaty-cta-main .on-hover-text {
		display: none !important;
	}
}

/* Branding questionnaire form: the Bootstrap row's negative margins scrolled the page sideways by 5 px at every width
   up to 1366 px (GAP6-12). Only the end margin goes, so the first column stays aligned with the fields below. */
.wpcf7 .row.img-form { margin-inline-end: 0; }
@media (max-width: 767px) {
	.wpcf7 .row.img-form { margin-inline: 0; }
}

/* The fullscreen menu is desktop-only (its button shows from 1271 px). Below that its hidden panel is not needed,
   and on AR posts at tablet widths it stuck out 60 px and scrolled the page sideways (GAP6-03). */
@media (max-width: 1270px) {
	.fullscreen-menu-panel { display: none; }
}

/* ---------- 10. Visual correction pass (5 Oct 2026) ---------- */
/* Arabic: the carousel library forces left-to-right on its slides; quotes and names read right-to-left. */
[dir="rtl"] .owl-carousel .item-testimonials {
	direction: rtl;
}

/* Arabic: "forward" arrows point left. Icons that are chosen as left arrows in the page stay as they are. */
[dir="rtl"] #content :is(.fa-arrow-right, .fa-long-arrow-alt-right, .fa-angle-right, .fa-chevron-right, .e-fas-arrow-right) {
	transform: scaleX(-1);
}

/* Phone numbers keep their digit order inside Arabic text (wrapped by inc/rtl.php). */
.au-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
}

/* Chat button label: the site font instead of the plugin's Tahoma (a serif fallback where Tahoma is missing). */
.chaty .chaty-widget,
.chaty .chaty-widget .on-hover-text,
.chaty .chaty-widget span {
	font-family: var(--au-font-latin, Montserrat, sans-serif);
}

/* Branding questionnaire: a readable column and the same quiet fields as the contact form
   (it had 1380px-wide fields with a hard black border, and labels closer to the previous field than to their own). */
.wpcf7-form:has(#au-q-your-email) {
	max-width: 860px;
	margin-inline: auto;
}

.wpcf7-form:has(#au-q-your-email) h3 {
	margin: 56px 0 8px;
}

.wpcf7-form:has(#au-q-your-email) p > br {
	display: none;
}

.wpcf7-form:has(#au-q-your-email) label {
	display: block;
	margin: 22px 0 8px !important; /* the site-wide label rule sets -20px with !important */
	line-height: 1.5;
}

.wpcf7-form:has(#au-q-your-email) .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0; /* the site-wide rule pulls fields 10px up, onto the label */
}

.wpcf7-form:has(#au-q-your-email) :is(input:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
	width: 100%;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: #f4f4f4;
}

.wpcf7-form:has(#au-q-your-email) :is(input, select, textarea):focus {
	border-color: var(--au-brand-ink);
	background-color: var(--au-white);
	outline: 0;
}

.wpcf7-form:has(#au-q-your-email) .wpcf7-submit {
	margin-block: 32px 64px;
}

/* Service rows alternate image and text on wide screens. On phones every service reads text first, then its
   image (the alternation put two images back to back and separated each image from its text). */
@media (max-width: 767px) {
	.elementor-inner-section > .elementor-container:has(> .elementor-column > .elementor-widget-wrap > .elementor-widget-icon-list) > .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image:only-child) {
		order: 2;
	}
}