/* CMS forms in Retal's design, with the old Retal app's sizes (retal-website-old: site.css .lead-form / .lead-modal,
   pages/article.css for a form's own page).
   Loaded by layouts/retal.php and layouts/front.php for the <dialog> that site.js opens (.site-form-modal),
   by layouts/front.php inside the popup's iframe (body.site-popup), and by layouts/retal.php on a form's own page
   (front/retal-form, .retal-form-page). */
@font-face { font-family: '29LTZaridDisplayVF'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/29LTZaridDisplayVF.woff2') format('woff2'), url('../fonts/29LTZaridDisplayVF.ttf') format('truetype'); }
@font-face { font-family: '29LTAzer-Light'; font-style: normal; font-weight: normal; font-display: swap; src: url('../fonts/29LTAzer-Light-2.woff2') format('woff2'), url('../fonts/29LTAzer-Light-2.otf') format('opentype'); }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: normal; font-display: swap; src: url('../fonts/Marcellus-Regular.woff2') format('woff2'), url('../fonts/Marcellus-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lucky Beauty new'; font-style: normal; font-weight: normal; font-display: swap; src: url('../fonts/Lucky-Beauty-new.woff2') format('woff2'), url('../fonts/Lucky-Beauty.otf') format('opentype'); }

/* ---------- the dialog, on the host page (.lead-modal__box: 640px, square, dark backdrop) ---------- */
dialog.site-form-modal {
	position: fixed;
	box-sizing: border-box;
	width: 640px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: #2c2c2c;
}
dialog.site-form-modal::backdrop { background: rgba(44, 44, 44, .8); }
dialog.site-form-modal[open] { animation: retal-popup-in .3s ease; }
dialog.site-form-modal[open]::backdrop { animation: retal-popup-fade .3s ease; }
@keyframes retal-popup-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes retal-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	dialog.site-form-modal[open], dialog.site-form-modal[open]::backdrop { animation: none; }
}
dialog.site-form-modal iframe { display: block; width: 100%; height: 400px; border: 0; background: #fff; }
dialog.site-form-modal .site-form-modal-close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: #2c2c2c;
	font-family: Arial, sans-serif;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease;
}
dialog.site-form-modal .site-form-modal-close:hover,
dialog.site-form-modal .site-form-modal-close:focus-visible { color: #85553a; }

/* ---------- what the popup and the page share (.lead-form) ---------- */
body.site-popup:has(.site-form-page),
.retal-form-page {
	--primary: #85553a;
	--primary-soft: rgba(133, 85, 58, .12);
	--bg-card: #fff;
	--bg-muted: #f9f7f3;
	--border: #d9d9d9;
	--t-base: #2c2c2c;
	--t-muted: #7a7a7a;
	--danger: #b3261e;
	color: #2c2c2c;
	color-scheme: light;
	font-family: 'Marcellus', serif;
}
body.site-popup:has(.site-form-page) { background: #fff; }
html[dir="rtl"] body.site-popup:has(.site-form-page),
html[dir="rtl"] .retal-form-page { font-family: '29LTAzer-Light', sans-serif; }

:is(body.site-popup, .retal-form-page) .site-form .input,
:is(body.site-popup, .retal-form-page) .site-form .textarea,
:is(body.site-popup, .retal-form-page) .site-form .select,
:is(body.site-popup, .retal-form-page) .site-form .fld-trigger {
	height: auto;
	padding: 12px 14px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: #2c2c2c;
	font: inherit;
	font-size: 15px;
	line-height: normal;
}
:is(body.site-popup, .retal-form-page) .site-form .textarea { min-height: 110px; }
:is(body.site-popup, .retal-form-page) .site-form ::placeholder { color: #a0a2a3; opacity: 1; }
:is(body.site-popup, .retal-form-page) .site-form .input:focus-visible,
:is(body.site-popup, .retal-form-page) .site-form .textarea:focus-visible,
:is(body.site-popup, .retal-form-page) .site-form .select:focus-visible,
:is(body.site-popup, .retal-form-page) .site-form .fld-trigger:focus-visible { border-color: #85553a; box-shadow: none; outline: none; }
:is(body.site-popup, .retal-form-page) .site-form .is-invalid { border-color: var(--danger); }
:is(body.site-popup, .retal-form-page) .site-form .field-error { color: var(--danger); font-size: 13px; }

/* Phone: the flag and a caret, no dial code. */
:is(body.site-popup, .retal-form-page) .site-form .iti { width: 100%; }
:is(body.site-popup, .retal-form-page) .site-form .iti__selected-dial-code { display: none; }
:is(body.site-popup, .retal-form-page) .site-form .iti input.iti__tel-input { padding-left: 62px !important; }
:is(body.site-popup, .retal-form-page) .site-form .iti__selected-country-primary { padding: 0 8px 0 14px; }
:is(body.site-popup, body:has(.retal-form-page)) .iti__country-selector { border: 1px solid #d9d9d9; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-size: 14px; }
:is(body.site-popup, body:has(.retal-form-page)) .iti__country-list { max-height: 180px; }

/* The submit button (.btn .btn-solid): brown, square, Zarid bold; dark on hover. */
:is(body.site-popup, .retal-form-page) .site-form .btn--primary,
:is(body.site-popup, .retal-form-page) .site-form-done .btn--primary {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid #85553a;
	border-radius: 0;
	background: #85553a;
	color: #fff;
	font-family: '29LTZaridDisplayVF', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	filter: none;
	transition: all .3s;
}
html[dir="ltr"] :is(body.site-popup, .retal-form-page) .site-form .btn--primary,
html[dir="ltr"] :is(body.site-popup, .retal-form-page) .site-form-done .btn--primary { font-weight: 400; }
:is(body.site-popup, .retal-form-page) .site-form .btn--primary:hover,
:is(body.site-popup, .retal-form-page) .site-form .btn--primary:focus-visible,
:is(body.site-popup, .retal-form-page) .site-form-done .btn--primary:hover { border-color: #2c2c2c; background: #2c2c2c; color: #fff; filter: none; }
:is(body.site-popup, .retal-form-page) .site-form .btn--primary .arr { display: none; }
:is(body.site-popup, .retal-form-page) .site-form .site-form-back { padding: 12px 24px; border: 1px solid #2c2c2c; border-radius: 0; background: transparent; color: #2c2c2c; font: inherit; font-size: 14px; cursor: pointer; }
:is(body.site-popup, .retal-form-page) .site-form-success { padding: 14px 0; border-top: 1px solid #85553a; border-radius: 0; background: none; color: #2c2c2c; font-size: 16px; }

/* ---------- the popup (.lead-modal): brown centred 30px title, placeholder-only fields, full-width button ---------- */
body.site-popup .site-form-page { padding: 48px 34px 36px; }
body.site-popup .site-form-page .site-form-title {
	margin: 0 0 26px;
	padding: 0;
	color: #85553a;
	font-family: 'Lucky Beauty new', 'Marcellus', serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}
html[dir="rtl"] body.site-popup .site-form-page .site-form-title { font-family: '29LTZaridDisplayVF', sans-serif; font-weight: 700; }
body.site-popup .site-form-page .site-form-intro { margin: -14px 0 20px; color: #7a7a7a; font-family: 'Marcellus', serif; font-size: 16px; text-align: center; }
html[dir="rtl"] body.site-popup .site-form-page .site-form-intro { font-family: '29LTAzer-Light', sans-serif; }
body.site-popup .site-form-page .site-form,
body.site-popup .site-form-page .site-form-done { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; }
body.site-popup .site-form > .site-field { grid-column: 1 / -1; gap: 4px; }
body.site-popup .site-form .field-label,
body.site-popup .site-form legend.field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.site-popup .site-form .input,
body.site-popup .site-form .textarea,
body.site-popup .site-form .select,
body.site-popup .site-form .fld-trigger { padding: 13px 16px; font-size: 16px; }
body.site-popup .site-form .btn--primary,
body.site-popup .site-form-done .btn--primary { width: 100%; justify-self: stretch; margin-top: 6px; padding: 15px; font-size: 18px; }
body.site-popup .site-form .site-form-nav .btn--primary { width: auto; flex: 1; margin-top: 0; }
body.site-popup .site-form-success { text-align: center; }

/* ---------- a form's own page (pages/article.css + .form-page): title and intro, then the bordered form ---------- */
/* site-forms.css gives any body holding a form its CMS font and colour; the Retal page keeps its own. */
body.inner-page:has(.retal-form-page) { font-family: var(--font-body); color: var(--e-global-color-text); line-height: normal; }
.retal-form-page { padding: 60px 0 40px; }
.retal-form-page .container { max-width: 1140px; margin: 0 auto; padding: 0 10px; }
.retal-form-page .site-form-title {
	max-width: 900px;
	margin: 10px 0 6px;
	color: #2c2c2c;
	font-family: 'Lucky Beauty new', 'Marcellus', serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 45px;
}
html[dir="rtl"] .retal-form-page .site-form-title { font-family: '29LTZaridDisplayVF', sans-serif; font-weight: 700; }
.retal-form-page .site-form-intro { max-width: 820px; margin: 0 0 24px; color: #2c2c2c; font-family: 'Marcellus', serif; font-size: 19px; line-height: 1.6; }
html[dir="rtl"] .retal-form-page .site-form-intro { font-family: '29LTAzer-Light', sans-serif; }
.retal-form-page .site-form-page { max-width: 760px; margin: 30px 0 60px; padding: 0; }
.retal-form-page .site-form,
.retal-form-page .site-form-done { gap: 18px 24px; padding: 30px; border: 1px solid #d9d9d9; border-radius: 0; background: #fff; }
.retal-form-page .site-form > .site-field { gap: 4px; }
.retal-form-page .site-form .field-label,
.retal-form-page .site-form legend { color: #7a7a7a; font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.retal-form-page .site-form .btn--primary { justify-self: start; }
@media (max-width: 767px) {
	.retal-form-page { padding: 40px 0 20px; }
	.retal-form-page .container { padding: 0 20px; }
	.retal-form-page .site-form-title { font-size: 22px; line-height: 32px; }
	.retal-form-page .site-form > .site-field { grid-column: 1 / -1; }
}