/*
 * RomaFlow Lead Form 844 — the single site-wide lead widget.
 *
 * Mobile-first: the base block is the phone layout; every enhancement sits behind a
 * min-width query. RTL-safe throughout (logical properties only). All colour, radius
 * and spacing values are driven by custom properties the Elementor Style tab writes,
 * so nothing here needs re-editing to retune the look.
 */

.rflf844 {
	--rflf844-grad-a: #00E5CC;
	--rflf844-grad-b: #0057FF;
	--rflf844-gap: 18px;
	--rflf844-input-bg: #FFFFFF;
	--rflf844-input-ink: #0F172A;
	--rflf844-input-radius: 12px;
	--rflf844-focus: #0F172A;
	--rflf844-tile-bg: #FFFFFF;
	--rflf844-tile-ink: #0F172A;
	--rflf844-tile-accent: #1FBE5F;
	--rflf844-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	display: block;
	width: 100%;
	font-family: var(--rf-font, "Noto Sans Hebrew", system-ui, sans-serif);
}

/* v1.2.1 (2026-08-29): container queries removed. The widget previously read its OWN
   rendered width via `container-type: inline-size` (see git history) so it could sit
   correctly in a full-width footer or a narrow popup alike. On mobile this left a large
   empty gap between the widget and whatever followed it in the footer template — being
   tested as a container-query rendering issue on mobile. The old `@container rflf844
   (...)` breakpoints are deleted outright (they were tuned to the widget's own,
   narrower-than-viewport width); the file's separate viewport-tuned fallback block
   (previously gated behind `@supports not (container-type: inline-size)`, see below) is
   now unconditional and is the widget's only responsive behaviour — correct for its one
   confirmed placement (full-width, template #67). If this widget is later placed in a
   narrow popup on a wide screen, revisit: viewport queries would judge it "desktop"
   there and show the wider column layout. */

.rflf844 *,
.rflf844 *::before,
.rflf844 *::after { box-sizing: border-box; }

.rflf844-inner {
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
}

.rflf844-card {
	position: relative;
	overflow: hidden;
	padding: 26px 20px;
	border-radius: 20px;
	background-image: linear-gradient(135deg, var(--rflf844-grad-a), var(--rflf844-grad-b));
	color: #fff;
}

/* A quiet depth cue rather than a decorative blob: the gradient is darkened toward the
   block-end so the white form tiles keep a stable edge on every hue combination. */
.rflf844-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 45%;
	background-image: linear-gradient(to top, rgba(4, 12, 26, 0.28), rgba(4, 12, 26, 0));
	pointer-events: none;
}

.rflf844-card > * { position: relative; z-index: 1; }

/* ---------- head ---------- */

.rflf844-head { margin-block-end: calc(var(--rflf844-gap) * 1.15); }

.rflf844-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	margin-block-end: 12px;
}

.rflf844-title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.35rem, 5.2vw, 2.05rem);
	line-height: 1.22;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.rflf844-subtitle {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(0.95rem, 3.6vw, 1.05rem);
	line-height: 1.6;
	max-width: 62ch;
	overflow-wrap: anywhere;
}

/* ---------- body ---------- */

.rflf844-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--rflf844-gap) * 1.3);
	align-items: start;
}

.rflf844-form-col { min-width: 0; }

/* ---------- form ---------- */

.rflf844-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rflf844-gap);
}

.rflf844-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.rflf844-field > label {
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.35;
}

.rflf844-req {
	margin-inline-start: 3px;
	color: #FFE08A;
}

/* 16px minimum: anything smaller triggers iOS auto-zoom on focus. 48px min height
   keeps every control above the 44px tap-target floor. */
.rflf844-field input,
.rflf844-field select,
.rflf844-field textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 48px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--rflf844-input-ink);
	background-color: var(--rflf844-input-bg);
	border: 1px solid rgba(15, 23, 42, 0.14);
	border-radius: var(--rflf844-input-radius);
	appearance: none;
	transition: border-color 0.2s var(--rflf844-ease), box-shadow 0.2s var(--rflf844-ease);
}

.rflf844-field textarea {
	min-block-size: 116px;
	resize: vertical;
}

.rflf844-field select {
	/* Chevron drawn with a gradient pair so it needs no image request and mirrors in RTL. */
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 2px),
		calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-inline-end: 38px;
}

.rflf844-field :is(input, select, textarea)::placeholder {
	color: rgba(15, 23, 42, 0.42);
	opacity: 1;
}

.rflf844-field :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--rflf844-focus);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.rflf844-field.is-invalid :is(input, select, textarea) {
	border-color: #B3261E;
	box-shadow: 0 0 0 3px rgba(255, 205, 200, 0.6);
}

.rflf844-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rflf844-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 8px 14px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 0.92rem;
	cursor: pointer;
	transition: background-color 0.2s var(--rflf844-ease);
}

.rflf844-radio:hover { background-color: rgba(255, 255, 255, 0.26); }
.rflf844-radio input { accent-color: #fff; min-block-size: 0; inline-size: auto; }

.rflf844-desc {
	font-size: 0.8rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: anywhere;
}

.rflf844-error {
	display: none;
	font-size: 0.8rem;
	font-weight: 600;
	color: #FFD7D2;
}

.rflf844-field.is-invalid .rflf844-error { display: block; }

/* Honeypot — removed from the visual and accessibility trees alike. */
.rflf844-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rflf844-submit {
	inline-size: 100%;
	min-block-size: 52px;
	margin-block-start: calc(var(--rflf844-gap) * 1.1);
	padding: 14px 22px;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	color: #fff;
	background-color: #0B1220;
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	transition: background-color 0.22s var(--rflf844-ease), transform 0.22s var(--rflf844-ease);
}

.rflf844-submit:hover { background-color: #111C33; }
.rflf844-submit:active { transform: translateY(1px); }
.rflf844-submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rflf844-submit[disabled] { opacity: 0.65; cursor: progress; }

.rflf844-status {
	margin: 10px 0 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
	min-block-size: 1.2em;
}

.rflf844-status.is-error { color: #FFD7D2; }

.rflf844-note {
	margin: 12px 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.rflf844-note a { color: #fff; text-decoration: underline; }

/* ---------- direct contact rail ---------- */

.rflf844-direct { min-width: 0; }

.rflf844-direct-title {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.92);
}

.rflf844-direct-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* A nested light tile inside a gradient surface must take its own colours back —
   the parent forces white text on every descendant. */
.rflf844-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 92px;
	padding: 14px 10px;
	border-radius: 16px;
	background-color: var(--rflf844-tile-bg);
	color: var(--rflf844-tile-ink);
	text-align: center;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
	/* break-word, not anywhere: `anywhere` also shrinks the min-content size, which lets a
	   grid column collapse far enough to split "WhatsApp" across two lines. */
	overflow-wrap: break-word;
	transition: box-shadow 0.22s var(--rflf844-ease), background-color 0.22s var(--rflf844-ease);
}

.rflf844-tile:hover,
.rflf844-tile:focus-visible {
	color: var(--rflf844-tile-ink);
	box-shadow: 0 8px 22px rgba(4, 12, 26, 0.22);
}

.rflf844-tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.rflf844-tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background-color: rgba(15, 23, 42, 0.06);
	color: inherit;
	flex-shrink: 0;
}

.rflf844-tile-icon svg {
	inline-size: 22px;
	block-size: 22px;
	display: block;
}

.rflf844-tile-icon i { font-size: 20px; line-height: 1; }

/* The accented tile inverts: filled surface, white chip. Only one item should carry it. */
.rflf844-tile-accent {
	background-color: var(--rflf844-tile-accent);
	color: #fff;
}

.rflf844-tile-accent:hover,
.rflf844-tile-accent:focus-visible { color: #fff; }

.rflf844-tile-accent .rflf844-tile-icon {
	background-color: #fff;
	color: var(--rflf844-tile-accent);
}

.rflf844-direct-note {
	margin: 12px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- responsive breakpoints ----------
   v1.2.1: these were the container-query fallback (see git history for the removed
   @container versions and their narrower, container-width-tuned breakpoints). Now the
   widget's only responsive behaviour — viewport-based, tuned for its one confirmed
   placement (full-width, template #67). */

@media (min-width: 768px) {
	.rflf844-card { padding: 36px 32px; border-radius: 24px; }
	.rflf844-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rflf844-w-full { grid-column: 1 / -1; }
	.rflf844-submit { inline-size: auto; min-inline-size: 260px; }
	.rflf844-direct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.rflf844-tile {
		flex-direction: row;
		justify-content: flex-start;
		text-align: start;
		min-block-size: 68px;
		padding: 12px 14px;
	}
}

@media (min-width: 1024px) {
	.rflf844-card { padding: 48px; border-radius: 28px; }
	.rflf844-split .rflf844-body {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: calc(var(--rflf844-gap) * 1.6);
	}
	.rflf844-split .rflf844-direct-grid { grid-template-columns: minmax(0, 1fr); }
	.rflf844-split .rflf844-direct {
		padding-inline-start: calc(var(--rflf844-gap) * 1.2);
		border-inline-start: 1px solid rgba(255, 255, 255, 0.22);
	}
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.rflf844 *,
	.rflf844 *::before,
	.rflf844 *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.rflf844-submit:active { transform: none; }
}

/* ---------- forced colors ---------- */

@media (forced-colors: active) {
	.rflf844-tile,
	.rflf844-submit { border: 1px solid CanvasText; }
}