/* =========================================================
   "Register your interest" split-screen landing (body.ryi-landing)
   — register-your-interest-tej
   Values taken from the live Elementor CSS (page 20013 / AR 31384).
   Markup: src/seed/fix-register-interest-tej.ts
   The landing is standalone, so the site header and footer are hidden.
   ========================================================= */

body.ryi-landing { padding-top: 0 !important; background-color: #FFFFFF !important; }
body.ryi-landing #header,
body.ryi-landing .site-footer { display: none !important; }

/* main is one grid: photo | (welcome + form, centred vertically).
   The HTML block's wrapper steps aside so its children join the grid. */
.ryi-main {
	--ryi-brown: #85553A; --ryi-ink: #2C2C2C; --ryi-line: #7A7A7A6E;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto 1fr;
	min-height: 100vh;
	background: #FFFFFF;
	color: var(--ryi-ink);
}
.ryi-main > .cms-section { display: contents; }

/* ---------- photo + logo ---------- */
.ryi-media {
	grid-column: 1; grid-row: 1 / -1;
	background-color: #3B4A5A; background-position: center; background-repeat: no-repeat; background-size: cover;
}
/* the photo stays on the left in Arabic (grid column 2 is the left one in RTL) */
.rtl .ryi-media { grid-column: 2; }
.ryi-logo { display: block; margin: 20px; text-align: start; }
.rtl .ryi-logo { text-align: end; }
.ryi-logo img { display: inline-block; width: 10%; max-width: 100%; height: auto; vertical-align: top; }

/* ---------- welcome ---------- */
.ryi-intro, .ryi-main > .cms-form-section { grid-column: 2; padding-inline: 10%; }
.rtl .ryi-intro, .rtl .ryi-main > .cms-form-section { grid-column: 1; }
.ryi-intro { grid-row: 2; }
.ryi-title { margin: 0 0 20px; font-family: 'Lucky Beauty new', 'Lucky Beauty', serif; font-size: 50px; font-weight: 700; line-height: 1.2; color: var(--ryi-brown); }
.ryi-lead { margin: 0; font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--ryi-ink); }
.rtl .ryi-title { font-family: var(--font-head); line-height: 1.3; }
.rtl .ryi-lead { font-family: var(--font-body); font-size: 25px; line-height: 1.4; }

/* ---------- form ---------- */
.ryi-main > .cms-form-section { grid-row: 3; padding-block: 40px 0; }
.ryi-main > .cms-form-section .container { max-width: none; margin: 0; padding: 0; }
.ryi-main > .cms-form-section .section-title,
.ryi-main > .cms-form-section .cms-form-section__intro { display: none; }

.ryi-main .lead-form {
	grid-template-columns: 1fr 1fr; gap: 10px;
	width: 100%; max-width: 490px; padding: 0; border: 0; background: transparent;
	font-family: 'Marcellus', serif;
}
.rtl .ryi-main .lead-form { font-family: var(--font-body); }
.ryi-main .lead-form > .w100, .ryi-main .lead-form > .btn { grid-column: 1 / -1; }
.ryi-main .lead-form label, .ryi-main .lead-form .fselect, .ryi-main .lead-form .fphone { gap: 0; }
/* labels are screen-reader only on WordPress: the placeholders carry the text */
.ryi-main .lead-form :is(label, .fselect, .fphone) { position: relative; }
.ryi-main .lead-form :is(label, .fselect, .fphone) > .flbl {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Salesforce routing selects: kept in the form (their values are submitted), hidden as on WordPress */
.ryi-main .lead-form > .fselect:has(input[name='LeadSource']),
.ryi-main .lead-form > .fselect:has(input[name='channel']) { display: none; }

.ryi-main .lead-form input, .ryi-main .lead-form select, .ryi-main .lead-form .ss-trigger {
	min-height: 40px; padding: 5px 14px; border: 1px solid var(--ryi-line); border-radius: 3px;
	background: #FFFFFF; font-size: 14px; line-height: 1.4; color: #000;
}
.ryi-main .lead-form input::placeholder { color: #7A7A7A; opacity: 1; }
.ryi-main .lead-form .ss-ph { color: #000; }
.ryi-main .lead-form .ss-chev { color: #000; }
.ryi-main .lead-form :is(input, select):focus, .ryi-main .lead-form .ss-trigger:focus-visible { border-color: var(--ryi-brown); }

/* phone: one bordered box, flag + dial code + caret */
.ryi-main .lead-form .pi { border: 1px solid var(--ryi-line); border-radius: 3px; background: #FFFFFF; }
.ryi-main .lead-form .pi .pi-num, .ryi-main .lead-form .pi .ss-trigger { min-height: 38px; border: 0; border-radius: 0; }
.ryi-main .lead-form .pi .ss-trigger { gap: 4px; padding-inline: 8px 4px; }
.ryi-main .lead-form .pi .pi-num { padding-inline-start: 6px; }
.ryi-main .lead-form .pi .ss-chev { width: 8px; }
.rtl .ryi-main .lead-form .pi .pi-num { text-align: right; }

.ryi-main .lead-form .btn-solid {
	width: 100%; justify-self: stretch !important; justify-content: center;
	padding: 15px 30px; border-radius: 3px; background-color: var(--ryi-brown);
	font-family: 'Marcellus', serif; font-size: 16px; font-weight: 500; line-height: 1; text-align: center; color: #FFFFFF;
}
.ryi-main .lead-form .btn-solid:hover, .ryi-main .lead-form .btn-solid:focus { background-color: var(--ryi-ink); color: #FFFFFF; }
.rtl .ryi-main .lead-form .btn-solid { font-family: var(--font-body); font-weight: 700; }
.ryi-main .lead-form .btn-solid .arr { display: none; }

/* ---------- responsive (Elementor breakpoints 1200 / 767) ---------- */
@media (max-width: 1200px) {
	.ryi-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto 1fr; }
	.ryi-media, .rtl .ryi-media { grid-column: 1; grid-row: 1; min-height: 40vh; }
	.ryi-intro, .rtl .ryi-intro { grid-column: 1; grid-row: 3; padding: 60px 20px 0; text-align: center; }
	.ryi-main > .cms-form-section, .rtl .ryi-main > .cms-form-section { grid-column: 1; grid-row: 4; padding: 30px 20px 60px; }
	.ryi-main .lead-form { margin-inline: auto; }
	.ryi-logo, .rtl .ryi-logo { margin: 50px 20px 0; text-align: center; }
	.ryi-main .lead-form input, .ryi-main .lead-form .ss-trigger { font-size: 13px; }
}

@media (max-width: 767px) {
	.ryi-main { grid-template-rows: auto auto auto 1fr; }
	.ryi-media, .rtl .ryi-media { min-height: 0; padding: 20px 20px 200px; }
	.ryi-logo, .rtl .ryi-logo { margin: 0; text-align: start; }
	.rtl .ryi-logo { text-align: end; }
	.ryi-logo img { width: 80%; }
	.ryi-intro, .rtl .ryi-intro { grid-row: 2; padding: 20px 20px 0; text-align: start; }
	.ryi-title { margin-bottom: 20px; font-size: 20px; }
	.ryi-lead, .rtl .ryi-lead { font-size: 20px; line-height: 1.3; }
	.rtl .ryi-lead { font-size: 18px; }
	.ryi-main > .cms-form-section, .rtl .ryi-main > .cms-form-section { grid-row: 3; padding: 30px 20px 40px; }
	.ryi-main .lead-form { grid-template-columns: 1fr; max-width: none; }
	.ryi-main .lead-form > .w50 { grid-column: 1 / -1; }
}