/* =========================================================
   Landing blocks (app/Core/Retal/LandingSpecs.php): what the old
   app's src/app/(frontend)/site.css gave every page around the
   copied page stylesheets — the transparent `.cms-section`
   wrapper and the CMS form (`.lead-form`) — plus the native
   controls standing in for the old React pickers, and the
   builder canvas. Loaded before the page's own stylesheet.
   ========================================================= */

.cms-section { display: contents; }

/* ---------- CMS forms (.lead-form), as site.css drew them ---------- */
.btn-solid { background-color: #85553a; color: #fff; border: 0; }
.btn-solid:hover, .btn-solid:focus { background-color: #2c2c2c; color: #fff; }
.ltr .btn-solid { font-family: var(--font-head); font-weight: 400; }
.btn:disabled, .btn[disabled] { opacity: 0.65; cursor: default; }

.cms-form-section { padding: 60px 0; }
.cms-form-section .container { max-width: 1140px; margin: 0 auto; padding: 0 10px; }
.cms-form-section .section-title { margin: 0 0 12px; }
.cms-form-section__intro { margin: 0 0 24px; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: #7A7A7A; }
@media (max-width: 1200px) { .cms-form-section { padding: 50px 20px; } }
@media (max-width: 767px) { .cms-form-section { padding: 40px 20px; } }

.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; background: #fff; padding: 30px; border: 1px solid #d9d9d9; font-family: 'Marcellus', serif; }
.rtl .lead-form { font-family: '29LTAzer-Light', sans-serif; }
.lead-form .full { grid-column: 1 / -1; }
.lead-form label, .lead-form .flbl, .lead-form .fselect, .lead-form .fphone, .lead-form .ffile, .lead-form .fdate { display: grid; gap: 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7a7a; min-width: 0; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d9d9d9; background: #fff; font: inherit; font-size: 15px; color: #2c2c2c; border-radius: 0; text-transform: none; letter-spacing: 0; }
.lead-form :is(input, select, textarea):focus { outline: none; border-color: #85553a; }
.lead-form textarea { min-height: 110px; resize: vertical; }
.lead-form .flbl { display: block; }
.lead-form .choice { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 15px; color: #2c2c2c; }
.lead-form .choice input { width: auto; }
.lead-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lead-form legend { padding: 0; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7a7a; }
.lead-form .fchoices .choice + .choice { margin-top: 8px; }
.lead-form .fchoices.inline .choice { display: inline-flex; margin-inline-end: 22px; }
.lead-form .fchoices.inline .choice + .choice { margin-top: 0; }
.lead-form .btn { justify-self: start; cursor: pointer; }
.lead-form .btn.full { grid-column: 1 / -1; }
.lead-form .ferr { font-size: 13px; text-transform: none; letter-spacing: 0; color: #b3261e; }
.lead-form .ok { grid-column: 1 / -1; padding: 14px 0; border-top: 1px solid #85553a; color: #2c2c2c; font-size: 16px; margin: 0; }
.lead-form .err { grid-column: 1 / -1; color: #b3261e; font-size: 14px; margin: 0; }
.rtl input[dir="ltr"]:placeholder-shown { text-align: right; }
.lead-form .ffile-box { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 10px 14px; border: 1px solid #d9d9d9; }
.lead-form .ffile-box input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.lead-form .ffile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 15px; color: #2c2c2c; }
.lead-form .ffile-name.empty { color: #a0a2a3; }
.lead-form .ffile-btn { flex: none; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #85553a; border: 1px solid #85553a; padding: 6px 12px; }
@media (max-width: 767px) { .lead-form { grid-template-columns: 1fr; } }

/* hidden by a "show only when" rule (assets/js/site-forms.js); the field rules above set a display */
.lead-form [hidden] { display: none !important; }
.lead-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead-form .field-error[data-form-check] { font-size: 13px; text-transform: none; letter-spacing: 0; color: #b3261e; }

/* ---------- native controls in place of the old pickers ----------
   The select keeps the old trigger's look (a small filled caret at the end),
   the date and time inputs read as the old date / time boxes. */
.lead-form select:not([multiple]) {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	padding-inline-end: 36px;
	/* !important: the page stylesheets reset `background` on the fields */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 10px 6px !important;
}
.rtl .lead-form select:not([multiple]), body.rig-rtl .lead-form select:not([multiple]), .invitation-page--ar .lead-form select:not([multiple]) { background-position: left 14px center !important; }
.lead-form input[type="date"], .lead-form input[type="time"] { min-height: 46px; }
.lead-form input[type="date"]::-webkit-calendar-picker-indicator, .lead-form input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* ---------- phone: intl-tel-input, the flag, a caret and the country code (+966) inside the field ---------- */
.lead-form .iti { display: block; width: 100%; }
.lead-form .iti input[type="tel"] { width: 100%; }
.lead-form .iti__selected-country { background: transparent; }
.lead-form .iti__dropdown-content { text-transform: none; letter-spacing: 0; font-size: 14px; color: #2c2c2c; }
/* Arabic: the flag stays on the left, as on the live pages */
.rtl .lead-form .iti__country-container, body.rig-rtl .lead-form .iti__country-container, .invitation-page--ar .lead-form .iti__country-container { left: 0 !important; right: auto !important; }
/* …as on the Contact form (contact.css): flag, arrow and +966 read left to right with room around the arrow, the list
   opens under the field (not off the form) and stays right to left, and a dial code never turns into "966+" */
:is(.rtl, body.rig-rtl, .invitation-page--ar) .lead-form .iti__selected-country { direction: ltr; }
:is(.rtl, body.rig-rtl, .invitation-page--ar) .lead-form .iti__arrow { margin: 0 8px 0 6px; }
:is(.rtl, body.rig-rtl, .invitation-page--ar) .lead-form .iti__dropdown-content { left: 0 !important; right: auto !important; }
:is(.rtl, body.rig-rtl, .invitation-page--ar) .lead-form :is(.iti__dial-code, .iti__selected-dial-code) { direction: ltr; unicode-bidi: isolate; }

/* ---------- builder canvas (no scripts run, blocks are wrapped one by one) ----------
   The landing grids place the sections' children; in the canvas each block sits in its own
   wrapper, so the landings stack instead, with their fixed grounds kept inside the canvas. */
.site-page:is(.rig-main, .nsj-main, .ryi-main, .efg-main, .csb-main, .csl-main, .data-deletion) { display: block; min-height: 0; }
.site-page :is(.rig-bg, .nsj-bg, .efg-bg) { position: absolute; }
.site-page .rig-lang { position: static; display: inline-flex; margin: 10px 20px; }
.site-page .csl-modal { display: none !important; }
.site-page .ryi-media { min-height: 320px; }
.site-page .dd { display: block; }
.site-page .wp-section--bg { min-height: 0; }

/* A field's "Hide the label" option: kept for screen readers, not shown. */
.lead-form .flbl--hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }