/* =========================================================
   INVITATION pages (/invitation, /retal-rise-invitation,
   /sales-center-invitations…): the "greeting system" card
   generator. A bare landing, like the live page — no header,
   no footer, just the Retal card on the patterned ground.

   The page is two sections: the imported logo (.wp-section)
   and the CMS form (.cms-form-section), stacked so they read
   as one card. `.invitation-page--ar` marks the two Arabic
   invitations, which have no `ar` slug of their own.
   ========================================================= */

/* The Arabic invitations are served under the English locale, so the shell
   marks the body `ltr` — and `.ltr` in style.css repoints the font tokens at
   Marcellus / Lucky Beauty, Latin faces with no Arabic glyphs. Put the site's
   Arabic faces back, so this page reads in the same type as every Arabic page. */
.invitation-page--ar { --font-head: "29LTZaridDisplayVF", sans-serif; --font-body: "29LTAzer-Light", sans-serif; }

/* ---------------- Bare landing ---------------- */
.header-wrapper, .site-footer { display: none; }

body {
	background-color: var(--beige);
	background-image:
		repeating-linear-gradient(45deg, rgba(133, 85, 58, .07) 0 1px, transparent 1px 86px),
		repeating-linear-gradient(-45deg, rgba(133, 85, 58, .07) 0 1px, transparent 1px 86px);
}
/* The card is two sibling sections, so a box-shadow on each would smudge the
   seam between them. A drop-shadow on <main> traces the opaque silhouette the
   two halves make together, and casts one shadow around the whole card. */
main { background: transparent; filter: drop-shadow(0 18px 44px rgba(44, 44, 44, .16)) drop-shadow(0 2px 6px rgba(44, 44, 44, .06)); }

/* ---------------- The card, in two halves ---------------- */
.wp-section, .cms-form-section { background: transparent; }
.wp-section { padding: 90px 20px 0; }
.cms-form-section { padding: 0 20px 90px; }

.wp-section > .container, .cms-form-section > .container {
	width: 100%; max-width: 750px; margin: 0 auto; background: #fff; border: 0;
}
/* flex column: the newlines the import left around the <img> would otherwise
   generate an empty line box under it, showing as a seam in the card. */
.wp-section > .container { display: flex; flex-direction: column; padding: 56px 70px 0; }
.cms-form-section > .container { padding: 0 70px 60px; }

/* ---------------- Logo ---------------- */
.wp-section > .container > img { width: 66px; height: auto; margin: 0 auto; display: block; }
/* the imported block keeps the page's "Invitation" heading, hidden on the live page */
.wp-section > .container > h2 { display: none; }

/* The form's own heading repeats the page title; the live invitation shows
   the logo alone. */
.cms-form-section .section-title, .cms-form-section__intro { display: none; }

/* ---------------- Form ----------------
   Underline fields, laid out by the widths set in the form builder (full,
   1/2, 1/3, 2/3) on a six-column grid: Title beside the name, Date beside
   Time, as on the live sales-center card. */
.cms-form-section .lead-form {
	grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 20px;
	background: transparent; border: 0; padding: 40px 0 0;
}
.cms-form-section .lead-form > * { grid-column: 1 / -1; }
.cms-form-section .lead-form > .w50 { grid-column: span 3; }
.cms-form-section .lead-form > .w33 { grid-column: span 2; }
.cms-form-section .lead-form > .w66 { grid-column: span 4; }
.cms-form-section .lead-form .full, .cms-form-section .lead-form .w100 { grid-column: 1 / -1; }
.invitation-page--ar .cms-form-section .lead-form { direction: rtl; text-align: right; font-family: var(--font-body); }
/* email / url / number fields are `dir="ltr"` so a typed address reads
   correctly — but on an Arabic form they still start at the right margin. */
.invitation-page--ar .cms-form-section .lead-form input[dir="ltr"] { text-align: right; }

/* Each field names itself with its placeholder, so the caption above the line
   goes — kept in the markup, off-screen, for screen readers. */
.cms-form-section .lead-form .flbl, .cms-form-section .lead-form legend {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* the live form marks nothing as required */
.cms-form-section .lead-form .flbl span[aria-hidden], .cms-form-section .lead-form legend span[aria-hidden] { display: none; }

.cms-form-section .lead-form :is(input, select, textarea) {
	padding: 8px 2px; font-size: 16px;
	background: transparent; border: 0; border-bottom: 1px solid #85553A; border-radius: 0;
	color-scheme: light;
}
.cms-form-section .lead-form :is(input, select, textarea):focus { border-bottom-color: #2C2C2C; }
.cms-form-section .lead-form :is(input, textarea)::placeholder { color: #2C2C2C; opacity: 1; }
/* the English sales-center card greys its text-field hints */
.invitation-page:not(.invitation-page--ar) .cms-form-section .lead-form :is(input, textarea)::placeholder { color: #7A7A7A; }

/* dropdowns (SearchSelect.tsx) wear the same underline, the chevron filled
   dark as on the live card */
.cms-form-section .lead-form .ss-trigger {
	padding: 8px 2px; font-size: 16px;
	background: transparent; border: 0; border-bottom: 1px solid #85553A; border-radius: 0;
}
.cms-form-section .lead-form .ss.open .ss-trigger,
.cms-form-section .lead-form .ss-trigger:focus-visible { border-bottom-color: #2C2C2C; }
.cms-form-section .lead-form .ss-ph { color: #2C2C2C; }
.cms-form-section .lead-form .ss-chev { color: #2C2C2C; }

/* radio / checkbox rows (ذكر · انثى) */
.cms-form-section .lead-form .fchoices.inline .choice { margin-inline-end: 30px; }
.cms-form-section .lead-form .fchoices.inline .choice:last-of-type { margin-inline-end: 0; }
.cms-form-section .lead-form .choice { gap: 10px; font-size: 16px; }
.cms-form-section .lead-form .choice input { width: 16px; height: 16px; accent-color: #85553A; cursor: pointer; }

/* the date field (DatePicker.tsx) wears the same underline as the text fields */
.cms-form-section .lead-form .dp-trigger {
	padding: 8px 2px; font-size: 16px;
	background: transparent; border: 0; border-bottom: 1px solid #85553A; border-radius: 0;
}
.cms-form-section .lead-form .dp.is-open .dp-trigger,
.cms-form-section .lead-form .dp-trigger:focus-visible { border-bottom-color: #2C2C2C; }
.cms-form-section .lead-form .dp-ph { color: #2C2C2C; }
.invitation-page--ar .cms-form-section .lead-form .dp-pop { inset-inline-start: auto; inset-inline-end: 0; }

/* the time field (TimePicker.tsx) wears the same underline as the text fields:
   its boxed look belongs to the .lead-form card, not to this bare one, and the
   rule above would otherwise underline each hour / minute segment on its own. */
.cms-form-section .lead-form .tp {
	padding: 8px 2px; font-size: 16px; gap: 4px;
	background: transparent; border: 0; border-bottom: 1px solid #85553A; border-radius: 0;
}
.cms-form-section .lead-form .tp:focus-within { border-bottom-color: #2C2C2C; }
.cms-form-section .lead-form .tp.is-invalid { border-bottom-color: #B3261E; }
.cms-form-section .lead-form .tp-seg { padding: 0; border: 0; font-size: inherit; }
.cms-form-section .lead-form .tp-seg:focus { background: transparent; }
.cms-form-section .lead-form .tp-seg::placeholder, .cms-form-section .lead-form .tp-sep { color: #2C2C2C; opacity: 1; }
.cms-form-section .lead-form .tp-period {
	margin-inline-start: 10px; padding: 0; border: 0; background: none; font-size: 15px; letter-spacing: .04em;
}
/* a clock reads hour:minute left to right in Arabic too, so the segments keep
   their order: only the row moves, starting at the right margin with the icon
   at the far end, the way the date row above it sits. */
.invitation-page--ar .cms-form-section .lead-form .tp { justify-content: flex-end; }
.invitation-page--ar .cms-form-section .lead-form .tp-clear { margin-inline-start: 10px; }
.invitation-page--ar .cms-form-section .lead-form .tp-icon,
.invitation-page--ar .cms-form-section .lead-form .tp:not(:has(.tp-clear)) .tp-icon {
	order: -1; margin-inline: 0 auto;
}

/* ---------------- Submit ---------------- */
.cms-form-section .lead-form .btn {
	justify-self: center !important; width: auto; min-width: 165px; margin-top: 30px; padding: 14px 30px;
	font-size: 17px; background: #85553A; color: #fff; border: 1px solid #85553A;
}
.cms-form-section .lead-form .btn:hover, .cms-form-section .lead-form .btn:focus { background: #2C2C2C; border-color: #2C2C2C; }
.cms-form-section .lead-form .btn .arr { display: none; }

.cms-form-section .lead-form .ok, .cms-form-section .lead-form .err { text-align: center; }

/* ---------------- Greeting system: welcome card ----------------
   /greeting-system-page-4 is a single section — logo, the welcome line and
   Start — so it is the whole card, closed at the bottom too, and keeps its
   heading (the rule above hides the invitations' "Invitation"). */
.invitation-page--welcome .wp-section { padding-bottom: 90px; }
.invitation-page--welcome .wp-section > .container { align-items: center; padding: 40px 70px 40px; text-align: center; }
.invitation-page--welcome .wp-section > .container > h2 {
	display: block; margin: 110px 0 80px;
	font-family: var(--font-head); font-size: 30px; font-weight: 400; line-height: 1.35; color: #2C2C2C;
}
.invitation-page--welcome .wp-section > .container > .btn { min-width: 165px; justify-content: center; padding: 10px 30px; font-size: 15px; }
.invitation-page--welcome .wp-section > .container > .btn .arr { display: none; }

/* ---------------- Greeting system: card generator ----------------
   /greeting-system ends with a third section, the العربية button, which
   closes the card under the form instead of opening a second one. */
.invitation-page--generator .cms-form-section { padding-bottom: 0; }
.invitation-page--generator .cms-form-section > .container { padding-bottom: 20px; }
.invitation-page--generator .cms-form-section ~ .cms-section .wp-section { padding: 0 20px 90px; }
.invitation-page--generator .cms-form-section ~ .cms-section .wp-section > .container { align-items: center; padding: 0 70px 60px; }
.invitation-page--generator .cms-form-section ~ .cms-section .btn { min-width: 165px; justify-content: center; }

/* ---------------- Fallback: the inert imported form ----------------
   `npm run import:wp pages` puts the raw Elementor markup back until
   `npm run import:wp forms` bridges it to the Forms builder again. Give that
   in-between state the same look, so the page is never a row of naked inputs.
   Flex, not grid: the radio/label pairs then share the first row on their own
   and every other control takes a row of its own. */
.wp-section .wp-form {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
	gap: 40px 10px; margin: 0; padding: 54px 0 0;
	direction: rtl; text-align: right;
}
.wp-section .wp-form :is(input, select) {
	flex: 1 1 100%; width: 100%; padding: 8px 2px; font: inherit; font-size: 16px; color: #2C2C2C;
	background: transparent; border: 0; border-bottom: 1px solid #85553A; border-radius: 0;
}
.wp-section .wp-form :is(input, select):focus { border-bottom-color: #2C2C2C; }
.wp-section .wp-form input::placeholder { color: #C4C0BB; }
.wp-section .wp-form input[type="radio"] {
	flex: 0 0 auto; width: 16px; height: 16px; padding: 0; border-bottom: 0;
	accent-color: #85553A; cursor: pointer;
}
.wp-section .wp-form label { flex: 0 0 auto; margin-inline-end: 26px; font-size: 16px; color: #2C2C2C; cursor: pointer; }
.wp-section .wp-form label:last-of-type { margin-inline-end: 0; }
.wp-section .wp-form button {
	flex: 0 0 auto; margin: 30px auto 0; min-width: 165px; padding: 14px 30px; font-size: 17px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 767px) {
	.wp-section { padding: 40px 16px 0; }
	.cms-form-section { padding: 0 16px 60px; }
	.wp-section > .container { padding: 36px 26px 0; }
	.cms-form-section > .container { padding: 0 26px 40px; }
	.cms-form-section .lead-form { gap: 34px; padding-top: 40px; }
	.invitation-page--welcome .wp-section { padding-bottom: 60px; }
	.invitation-page--welcome .wp-section > .container { padding: 36px 26px 40px; }
	.invitation-page--welcome .wp-section > .container > h2 { margin: 70px 0 50px; font-size: 24px; }
	.invitation-page--generator .cms-form-section ~ .cms-section .wp-section { padding: 0 16px 60px; }
	.invitation-page--generator .cms-form-section ~ .cms-section .wp-section > .container { padding: 0 26px 40px; }
	.cms-form-section .lead-form :is(input, select, textarea), .cms-form-section .lead-form .dp-trigger,
	.cms-form-section .lead-form .tp, .cms-form-section .lead-form .flbl, .cms-form-section .lead-form .choice { font-size: 15px; }
}