/* =========================================================
   "Register your interest" grey landings (body.rig-landing)
   — register-your-interest, register-your-interest-2,
     register-your-interest-cityscape, register-your-interest-ar,
     register-your-interest-wadeera
   The Nesaj landing (nesaj-landing.css) with the Retal logo:
   values taken from the live Elementor CSS of those pages.
   Markup: src/seed/fix-register-interest-landings.ts
   The landing has its own bar and footer, so the site header
   and footer are hidden here. An Arabic page served under the
   English locale (register-your-interest-ar) adds body.rig-rtl.
   ========================================================= */

body.rig-landing { padding-top: 0 !important; background-color: #f4f3f1 !important; }
body.rig-landing #header,
body.rig-landing .site-footer { display: none !important; }
/* the page's background photo (its URL is set inline by the markup) */
.rig-bg { position: fixed; inset: 0; z-index: -1; background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }

/* main is one grid: bar across, title | form, footer across.
   The HTML blocks' wrappers step aside so their children join the grid. */
.rig-main {
	--rig-ink: #2C2C2C; --rig-brown: #85553A; --rig-side: 50px;
	position: relative; z-index: 0; /* own stacking context, so .rig-bg (z-index -1, inside main) stays above the page ground */
	display: grid;
	grid-template-columns: var(--rig-side) minmax(0, 1fr) minmax(0, 1fr) var(--rig-side);
	grid-template-rows: auto minmax(62vh, auto) auto;
	min-height: 100vh;
	color: var(--rig-ink);
}
body.rig-rtl .rig-main { direction: rtl; }
.rig-main > .cms-section { display: contents; }
.rig-main img { display: block; max-width: 100%; height: auto; }

/* ---------- top bar: line + logo (at the end; the Cityscape page keeps it at the start) ---------- */
.rig-top {
	grid-column: 1 / -1; grid-row: 1;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px;
	margin-top: 2%; padding-inline: 20px;
	position: relative; z-index: 9;
}
.rig-top__line { height: 1px; margin-bottom: 15px; background: #000; }
.rig-top__logo { margin: 0 2% 0 0; }
.rig-top__logo img { width: 70px; }
.rig-top--logo-start { grid-template-columns: auto minmax(0, 1fr); }
.rig-top--logo-start .rig-top__logo { order: -1; margin: 0 0 0 2%; }
.rig-top--no-logo { grid-template-columns: minmax(0, 1fr); min-height: 60px; }

/* language switch: a small brown button at the top start corner (a plain link on -2) */
.rig-lang {
	position: fixed; top: 10px; inset-inline-start: 20px; z-index: 99;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 10px; background: var(--rig-brown); color: #fff;
	font-family: '29LTAzer-Light', sans-serif; font-size: 14px; line-height: 1.4;
	transition: background-color .3s;
}
.rig-lang:hover, .rig-lang:focus-visible { background: var(--rig-ink); color: #fff; }
.rig-lang--plain { padding: 5px 10px; background: transparent; color: #000; font-family: 'Marcellus', serif; }
.rig-lang--plain:hover, .rig-lang--plain:focus-visible { background: transparent; color: var(--rig-brown); }
.rig-lang img { width: 18px; height: 12px; }
/* -2 in Arabic keeps the English bar: link on the left, line, logo on the right */
.rtl .rig-lang--plain { inset-inline-start: auto; inset-inline-end: 20px; }
.rtl .rig-main--wide .rig-top { direction: ltr; }
/* Wadeera (no logo): the button sits in the bar, 20px down and 50px in, with the line running from it to the end */
.rig-lang:not(.rig-lang--plain):has(+ .rig-top--no-logo) {
	position: absolute; top: 20px; inset-inline-start: 50px;
	padding: 15px; font-size: 18px; line-height: 22px;
}
.rig-lang:not(.rig-lang--plain) + .rig-top--no-logo { align-items: center; min-height: 52px; margin-top: 0; padding: 20px 45px 0 155px; }
.rtl .rig-lang:not(.rig-lang--plain) + .rig-top--no-logo { padding-inline: 155px 45px; }
.rig-lang:not(.rig-lang--plain) + .rig-top--no-logo .rig-top__line { margin-bottom: 0; }
/* register-your-interest (button + logo): one centred row, 20px in — button, line, 100px logo */
.rig-lang:not(.rig-lang--plain):has(+ .rig-top:not(.rig-top--no-logo)) {
	position: static; grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: center;
	margin-inline-start: 20px; padding: 15px; font-size: 18px; line-height: 22px;
}
.rig-lang:not(.rig-lang--plain) + .rig-top:not(.rig-top--no-logo) { align-items: center; margin-top: 0; padding: 20px; padding-inline-start: 140px; }
.rig-lang:not(.rig-lang--plain) + .rig-top:not(.rig-top--no-logo) .rig-top__line { margin-bottom: 0; }
.rig-lang:not(.rig-lang--plain) + .rig-top:not(.rig-top--no-logo) .rig-top__logo { margin: 0; }
.rig-lang:not(.rig-lang--plain) + .rig-top:not(.rig-top--no-logo) .rig-top__logo img { width: 100px; }

/* ---------- title + form ---------- */
.rig-title {
	grid-column: 2; grid-row: 2; align-self: start;
	margin: 30px 0 0;
	font-family: 'Lucky Beauty new', 'Lucky Beauty', serif; font-size: 80px; font-weight: 400; line-height: 81px; color: var(--rig-ink);
}
/* Arabic image title: on the live page it sits ~120px under the top line, level with the form (desktop; ≤1200px resets it below) */
.rig-title--img { margin-top: 100px; }
.rig-title--img img { width: 800px; }

.rig-main > .cms-form-section { grid-column: 3; grid-row: 2; align-self: center; padding: 44px 10% 0; }
.rig-main > .cms-form-section .container { max-width: 490px; margin: 0; padding: 0; }
.rig-main--wide > .cms-form-section .container { max-width: 520px; }
/* the Arabic side of register-your-interest / -wadeera is its own WordPress page (78285): the form fills
   its column (padded 10%) instead of the English 490px, in Azer Light with a Zarid button */
.rtl .rig-main:not(.rig-main--wide, .rig-main--dark-btn, .rig-main--brand) > .cms-form-section .container { max-width: none; }
.rig-main > .cms-form-section .section-title,
.rig-main > .cms-form-section .cms-form-section__intro { display: none; }

.rig-main .lead-form { gap: 10px; padding: 0; border: 0; background: transparent; font-family: 'Marcellus', serif; }
.rig-main:not(.rig-main--wide, .rig-main--brand) .lead-form { grid-template-columns: 1fr; }
/* -2: the full-width fields (national ID, payment method, Sakani) and the
   "تاريخ الميلاد" line above the date take a row of their own, as on WordPress */
.rig-main:is(.rig-main--wide, .rig-main--brand) .lead-form > .w100 { grid-column: 1 / -1; }
.rig-main .lead-form > .fmsg { font-size: 14px; font-weight: 700; line-height: 1.4; color: #000; }
/* the live Arabic form keeps Marcellus, so its Arabic text falls back to the browser sans-serif — larger and darker than Azer Light */
.rtl .rig-main .lead-form, body.rig-rtl .rig-main .lead-form { font-family: 'Marcellus', sans-serif; }
/* WordPress shows the fields without labels (placeholders only) */
.rig-main .lead-form .flbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rig-main .lead-form label, .rig-main .lead-form .fselect, .rig-main .lead-form .fphone { gap: 0; }
.rig-main .lead-form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rig-main .lead-form input, .rig-main .lead-form select, .rig-main .lead-form textarea,
.rig-main .lead-form .ss-trigger, .rig-main .lead-form .dp-trigger, .rig-main .lead-form .tp {
	min-height: 40px; padding: 5px 14px;
	border: 1px solid #7A7A7A6E; border-radius: 3px; background: transparent;
	font-size: 14px; line-height: 1.4; color: #000;
}
.rig-main .lead-form textarea { min-height: 90px; }
.rig-main .lead-form :is(input, select, textarea):focus, .rig-main .lead-form .ss-trigger:focus-visible { border-color: var(--rig-ink); }
/* phone: one outlined box, country picker and number inside */
.rig-main .lead-form .pi { border-color: #7A7A7A6E; border-radius: 3px; background: transparent; }
.rig-main .lead-form .pi:focus-within { border-color: var(--rig-ink); }
.rig-main .lead-form .pi .pi-num, .rig-main .lead-form .pi .ss-trigger { border: 0; background: transparent; }
.rig-main .lead-form .pi .ss-trigger { border-inline-end: 1px solid #7A7A7A6E; }
.rig-main .lead-form ::placeholder, .rig-main .lead-form .ss-ph, .rig-main .lead-form .dp-ph { color: #7A7A7A; opacity: 1; }
.rig-main .lead-form .dp-trigger:focus-visible, .rig-main .lead-form .dp.is-open .dp-trigger, .rig-main .lead-form .tp:focus-within { border-color: var(--rig-ink); }
/* selects read dark, with Elementor's small filled caret instead of the chevron */
.rig-main .lead-form .ss-ph { color: #000; }
.rig-main .lead-form .ss-chev { display: none; }
.rig-main .lead-form .ss-trigger::after {
	content: ''; flex: none; width: 0; height: 0;
	border-inline: 5px solid transparent; border-top: 6px solid #000;
}
/* phone: flag and caret, no divider — WordPress's intl-tel-input shows no dial code (no separateDialCode) */
.rig-main .lead-form .pi .ss-trigger { gap: 4px; padding-inline: 10px 4px; border-inline-end: 0; }
.rig-main .lead-form .pi .ss-trigger .pi-dial { display: none; }
.rig-main .lead-form .pi .ss-trigger::after { border-inline-width: 4px; border-top-width: 5px; }
/* Arabic: every field reads from the right, the ltr ones (phone, email) included, as on WordPress */
.rtl .rig-main .lead-form input, .rtl .rig-main .lead-form textarea,
body.rig-rtl .rig-main .lead-form input, body.rig-rtl .rig-main .lead-form textarea { text-align: right; }
/* LeadSource is a tracking select WordPress keeps out of sight (channel is a Hidden field) */
.rig-main .lead-form .fselect:has(input[name="LeadSource"]) { position: absolute; z-index: 0; opacity: 0; visibility: hidden; }

.rig-main .lead-form .btn-solid {
	grid-column: 1 / -1; justify-self: stretch !important; justify-content: center; width: 100%;
	padding: 15px 30px; border: 0; border-radius: 4px; background: var(--rig-brown);
	font-family: 'Marcellus', serif; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff;
	transition: background-color .3s;
}
.rig-main .lead-form .btn-solid:hover, .rig-main .lead-form .btn-solid:focus-visible { background: var(--rig-ink); color: #fff; }
.rtl .rig-main .lead-form .btn-solid, body.rig-rtl .rig-main .lead-form .btn-solid { font-family: 'Marcellus', sans-serif; }
.rig-main .lead-form .btn-solid .arr { display: none; }
.rtl .rig-main:not(.rig-main--wide, .rig-main--dark-btn, .rig-main--brand) .lead-form { font-family: '29LTAzer-Light', sans-serif; }
.rtl .rig-main:not(.rig-main--wide, .rig-main--dark-btn, .rig-main--brand) .lead-form .btn-solid { font-family: '29LTZaridDisplayVF', sans-serif; }
/* the Cityscape page: a small black button */
.rig-main--dark-btn .lead-form .btn-solid { justify-self: start !important; width: auto; min-width: 60px; padding: 8px 18px; background: var(--rig-ink); font-size: 13px; }
.rig-main--dark-btn .lead-form .btn-solid:hover { background: var(--rig-brown); }

/* ---------- brand landing (Adara, WordPress page 57684) ----------
   its own logo at ~11% of the bar (70% of that column), the English title in Marcellus
   against the end of its column, the Arabic title image in black, a full-width black button */
.rig-main--brand .rig-top__logo img { width: 7.7vw; }
.rig-main--brand .rig-title:not(.rig-title--img) { font-family: 'Marcellus', serif; text-align: end; }
.rig-main--brand .rig-title--img img { filter: brightness(0); }
.rig-main--brand .lead-form .btn-solid { background: #000; }
.rig-main--brand .lead-form .btn-solid:hover, .rig-main--brand .lead-form .btn-solid:focus-visible { background: var(--rig-ink); }

/* ---------- footer: "نبني للأجيال" badge at the start, social icons at the end ---------- */
.rig-foot {
	grid-column: 2 / 4; grid-row: 3;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
	min-height: 15vh; padding-bottom: 20px;
}
.rig-foot__badge img { width: 80px; }
.rig-foot__badge--boxed img { width: 60px; }
/* pushed to the far end: the right in English, the left in Arabic */
.rig-social { display: flex; align-items: center; gap: 5px; margin: 5px 0 0; margin-inline-start: auto; padding: 0; list-style: none; }
.rig-social a { display: flex; align-items: center; justify-content: center; min-width: 22px; padding: 0 2px; font-size: 18px; color: var(--rig-ink); transition: color .3s; }
.rig-social a:hover, .rig-social a:focus-visible { color: var(--rig-brown); }

/* The Arabic register-your-interest / -wadeera (WordPress page 31784): no tall
   middle row — title and form start 50px under the bar (the title column 10px
   lower), and the 15vh footer follows the form instead of the foot of the screen. */
@media (min-width: 1201px) {
	.rtl .rig-main:not(.rig-main--wide, .rig-main--dark-btn, .rig-main--brand) { grid-template-rows: auto auto auto; align-content: start; }
	.rtl .rig-main:not(.rig-main--wide, .rig-main--dark-btn, .rig-main--brand) .rig-title { margin-top: 60px; }
	.rtl .rig-main:not(.rig-main--wide, .rig-main--dark-btn, .rig-main--brand) > .cms-form-section { align-self: start; padding-top: 50px; }
}

/* ---------- responsive (Elementor breakpoints 1200 / 767) ---------- */
@media (max-width: 1200px) {
	.rig-main { --rig-side: 0px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
	.rig-top { margin-top: 0; padding-top: 50px; }
	.rig-lang:not(.rig-lang--plain):has(+ .rig-top:not(.rig-top--no-logo)) { margin-inline-start: 10px; }
	.rig-lang:not(.rig-lang--plain) + .rig-top:not(.rig-top--no-logo) { padding: 10px; padding-inline-start: 120px; }
	.rig-lang:not(.rig-lang--plain) + .rig-top:not(.rig-top--no-logo) .rig-top__logo img { width: 83px; }
	.rig-title { grid-column: 1; grid-row: 2; margin: 0; padding: 10% 10% 0; font-size: 49px; line-height: 1.2; }
	.rig-title--img img { width: min(800px, 100%); }
	.rig-main > .cms-form-section { grid-column: 1; grid-row: 3; align-self: start; padding: 10% 10% 10%; }
	.rig-foot { grid-column: 1; grid-row: 4; padding: 0 50px 20px; }
	.rig-main .lead-form input, .rig-main .lead-form select, .rig-main .lead-form .ss-trigger { font-size: 13px; }
	.rig-main--brand .rig-top__logo img { width: 10.5vw; }
	.rig-main--brand .rig-title:not(.rig-title--img) { font-size: 30px; text-align: start; }
}

@media (max-width: 767px) {
	.rig-top { padding: 50px 20px 0; }
	.rig-top__logo img { width: 56px; }
	/* Wadeera: WordPress drops the line on a phone and pulls the button into the corner */
	.rig-lang:not(.rig-lang--plain):has(+ .rig-top--no-logo) { top: 10px; inset-inline-start: 10px; }
	.rig-lang:not(.rig-lang--plain) + .rig-top--no-logo,
	.rtl .rig-lang:not(.rig-lang--plain) + .rig-top--no-logo { padding: 10px 10px 0; }
	.rig-lang:not(.rig-lang--plain) + .rig-top--no-logo .rig-top__line { visibility: hidden; }
	.rig-title { margin-top: 20px; padding: 30px 20px 0; font-size: 36px; line-height: 40px; }
	.rig-main > .cms-form-section { padding: 15px 20px 10px; }
	.rig-main > .cms-form-section .container { max-width: none; }
	.rig-main .lead-form { grid-template-columns: 1fr; }
	.rig-main--brand .rig-top__logo img { width: 20vw; }
	.rig-foot { flex-wrap: wrap; justify-content: center; align-items: center; min-height: 0; padding: 20px 20px 30px; }
	.rig-foot__badge, .rig-social { flex: 1 1 100%; display: flex; justify-content: center; margin: 0; }
}