/* BP Calculateur — Final CTA widget styles
 *
 * Width architecture (HARD CONSTRAINT):
 *   .bp-calc-fcta                   transparent outer section,
 *                                   sits on the page cream
 *                                   background.
 *     .bp-calc-fcta__card           ONE single 1140px centered
 *                                   card (max-width 1140px,
 *                                   width 100%, margin-inline:
 *                                   auto, rounded corners, soft
 *                                   shadow). The whole card uses
 *                                   ONE singular background
 *                                   image covering the entire
 *                                   card.
 *       .bp-calc-fcta__overlay      absolute; cream-to-clear
 *                                   L→R fade for readability
 *       .bp-calc-fcta__decor        absolute; subtle topographic
 *                                   + botanical overlays on the
 *                                   SAME image (no extra panel)
 *       .bp-calc-fcta__content      left-side copy block
 *         .bp-calc-fcta__eyebrow
 *         .bp-calc-fcta__title
 *         .bp-calc-fcta__paragraph
 *         .bp-calc-fcta__buttons
 *           .bp-calc-fcta__btn--primary
 *           .bp-calc-fcta__btn--secondary
 *
 * The CTA card is NOT full viewport width. The page background
 * remains visible on BOTH sides of the card. The whole box
 * feels like ONE cohesive photographic composition (NOT a left
 * panel + separate right image).
 *
 * Approved palette ONLY:
 *   #374F37  dark green
 *   #B8B25A  olive / gold
 *   #FBF6EC  cream
 *   #F4ECDC  cream tint
 *   #FFFFFF  white
 *   + existing neutrals (#1F2A1F, #5C6A5C, #E4DCCB).
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, border-inline-start, text-align start/end) so
 * the same stylesheet covers /ar/ without a separate RTL file.
 */

/* =========================================================
 * ROOT
 * ========================================================= */
.bp-calc-fcta {
	--bp-calc-fcta-green:        #374F37;
	--bp-calc-fcta-olive:        #B8B25A;
	--bp-calc-fcta-cream:        #FBF6EC;
	--bp-calc-fcta-cream-tint:   #F4ECDC;
	--bp-calc-fcta-text:         #1F2A1F;
	--bp-calc-fcta-text-muted:   #5C6A5C;
	--bp-calc-fcta-border:       #E4DCCB;
	--bp-calc-fcta-white:        #FFFFFF;

	--bp-calc-fcta-overlay:     #FBF6EC;
	--bp-calc-fcta-fade-0:      0.96;
	--bp-calc-fcta-fade-55:     0.55;
	--bp-calc-fcta-fade-100:    0;

	--bp-calc-fcta-card-max:    1140px;
	--bp-calc-fcta-card-radius: 28px;

	--bp-calc-fcta-font-body:    var(--bp-font-body,    'Manrope', system-ui, sans-serif);
	--bp-calc-fcta-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	overflow: visible;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	/* Section padding removed: open + integrated with page */
	padding: 0 24px;
	/* Section background removed: transparent to let page bg show through */
	background-color: transparent !important;
	background-image: none !important;
	color: var(--bp-calc-fcta-text);
	font-family: var(--bp-calc-fcta-font-body);
}

.bp-calc-fcta *,
.bp-calc-fcta *::before,
.bp-calc-fcta *::after {
	box-sizing: border-box;
}

/* Reset Elementor default container paddings so the centered
 * card sits flush inside the section without being pushed by
 * Elementor's outer padding. Scoped to the widget only. */
.elementor .elementor-widget.elementor-widget-bp-calculateur-final-cta,
.elementor-widget.elementor-widget-bp-calculateur-final-cta {
	position: relative;
	z-index: 1;
}

.elementor .elementor-widget.elementor-widget-bp-calculateur-final-cta {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
}

/* Force the OUTER section background to transparent at ALL
 * breakpoints so no Elementor / theme background bleeds in.
 * Scoped to the actual section that hosts this widget. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-final-cta),
.elementor-section:has(> .elementor-row .elementor-widget-bp-calculateur-final-cta),
.elementor-section:has(> .e-con .elementor-widget-bp-calculateur-final-cta),
.elementor-section:has(> .e-con-inner .elementor-widget-bp-calculateur-final-cta),
.e-con:has(> .elementor-widget-bp-calculateur-final-cta),
.e-con:has(> .e-con-inner > .elementor-widget-bp-calculateur-final-cta),
.e-con-inner:has(> .elementor-widget-bp-calculateur-final-cta) {
	background-color: transparent !important;
	background-image: none !important;
}

/* =========================================================
 * CARD — the single centered CTA card
 * ONE singular background image covers the whole card. The
 * readability overlay sits above it, the decor sits above
 * the overlay, the content sits above everything. There is
 * NO separate left panel + right image column.
 * ========================================================= */
.bp-calc-fcta__card {
	position: relative;
	isolation: isolate;
	inline-size: 100%;
	max-inline-size: var(--bp-calc-fcta-card-max);
	margin-inline: auto;
	background-color: var(--bp-calc-fcta-cream);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	border: 1px solid #B8B25A;
	border-radius: 22px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: 460px;
	box-shadow: none;
}

/* =========================================================
 * DECOR — subtle topographic + botanical overlays
 * Painted on the SAME single image composition. Never create
 * a separate visual panel.
 * ========================================================= */
.bp-calc-fcta__decor {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	color: var(--bp-calc-fcta-green);
	opacity: 0.10;
}

.bp-calc-fcta__decor-svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bp-calc-fcta__decor--topo .bp-calc-fcta__decor-svg {
	opacity: 0.55;
}

.bp-calc-fcta__decor--botanical {
	inset-inline-start: auto;
	inset-block-start: 0;
	inset-inline-end: 0;
	inset-block-end: auto;
	inline-size: 240px;
	block-size: 240px;
	transform: translate(28%, 14%);
	opacity: 0.18;
}

.bp-calc-fcta__decor--botanical .bp-calc-fcta__decor-svg {
	inline-size: 100%;
	block-size: 100%;
}

/* =========================================================
 * OVERLAY — the single L→R cream readability fade
 * In RTL the logical properties flip the gradient
 * automatically.
 * ========================================================= */
.bp-calc-fcta__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgb(from var(--bp-calc-fcta-overlay) r g b / var(--bp-calc-fcta-fade-0))    0%,
		rgb(from var(--bp-calc-fcta-overlay) r g b / var(--bp-calc-fcta-fade-0))   32%,
		rgb(from var(--bp-calc-fcta-overlay) r g b / var(--bp-calc-fcta-fade-55))  58%,
		rgb(from var(--bp-calc-fcta-overlay) r g b / var(--bp-calc-fcta-fade-100)) 100%
	);
}

/* Fallback for browsers without `rgb(from ...)` (older
 * WebKit builds). The cream overlay is rebuilt with rgba()
 * alpha stops so the gradient always renders. */
@supports not (background: rgb(from #000 r g b / 1)) {
	.bp-calc-fcta__overlay {
		background: linear-gradient(
			to right,
			rgba(251, 246, 236, var(--bp-calc-fcta-fade-0))    0%,
			rgba(251, 246, 236, var(--bp-calc-fcta-fade-0))   32%,
			rgba(251, 246, 236, var(--bp-calc-fcta-fade-55))  58%,
			rgba(251, 246, 236, var(--bp-calc-fcta-fade-100)) 100%
		);
	}
}

/* =========================================================
 * CONTENT — left text block
 * ========================================================= */
.bp-calc-fcta__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-inline-size: 560px;
	min-inline-size: 0;
	padding: 56px;
}

.bp-calc-fcta__eyebrow {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: var(--bp-calc-fcta-green);
	font-family: var(--bp-calc-fcta-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-calc-fcta__eyebrow-text {
	display: inline-block;
}

.bp-calc-fcta__eyebrow-line {
	display: inline-block;
	inline-size: 28px;
	block-size: 1px;
	background-color: var(--bp-calc-fcta-olive);
}

.bp-calc-fcta__title {
	margin: 4px 0 0;
	font-family: var(--bp-calc-fcta-font-display);
	font-weight: 400;
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: #374F3C;
}

.bp-calc-fcta__paragraph {
	margin: 6px 0 0;
	color: var(--bp-calc-fcta-text);
	font-family: var(--bp-calc-fcta-font-body);
	font-size: 15px;
	line-height: 1.65;
	max-inline-size: 480px;
}

/* =========================================================
 * BUTTONS — primary (dark green, cream icon) + secondary
 * (cream surface, dark green text + trailing arrow)
 * ========================================================= */
.bp-calc-fcta__buttons {
	margin-block-start: 14px;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	max-inline-size: 100%;
}

.bp-calc-fcta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 50px;
	padding-inline: 22px;
	padding-block: 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--bp-calc-fcta-font-body);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
}

.bp-calc-fcta__btn:focus-visible {
	outline: 2px solid var(--bp-calc-fcta-green);
	outline-offset: 3px;
}

.bp-calc-fcta__btn-label {
	display: inline-block;
	min-inline-size: 0;
}

/* Primary button: leading icon + label must fit together.
 * Allow the label to wrap to a new line so the icon and
 * text never overflow on narrow widths. */
.bp-calc-fcta__btn--primary {
	min-inline-size: 0;
	white-space: normal;
}
.bp-calc-fcta__btn--primary .bp-calc-fcta__btn-label {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

/* Secondary button: allow label to wrap so long text fits
 * inside the pill without overflow. */
.bp-calc-fcta__btn--secondary {
	min-inline-size: 0;
}
.bp-calc-fcta__btn--secondary .bp-calc-fcta__btn-label {
	white-space: normal;
	text-align: center;
}

.bp-calc-fcta__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
}

/* Force icon color to follow the button surface. Scoped to
 * this widget only. No global rules. */
.bp-calc-fcta__btn,
.bp-calc-fcta__btn i,
.bp-calc-fcta__btn svg,
.bp-calc-fcta__btn svg * {
	color: currentColor;
	fill: currentColor;
	stroke: currentColor;
}

.bp-calc-fcta__btn-icon i,
.bp-calc-fcta__btn-icon svg {
	inline-size: 100%;
	block-size: 100%;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Primary — dark green surface, cream text + cream icon. */
.bp-calc-fcta__btn--primary {
	background-color: var(--bp-calc-fcta-green);
	color: var(--bp-calc-fcta-cream);
	border-color: var(--bp-calc-fcta-green);
	box-shadow: 0 8px 18px -10px rgba(31, 42, 31, 0.55);
}

a.bp-calc-fcta__btn--primary:hover,
a.bp-calc-fcta__btn--primary:focus-visible {
	background-color: #2C3F2C;
	border-color: #2C3F2C;
	transform: translateY(-1px);
	box-shadow: 0 12px 22px -10px rgba(31, 42, 31, 0.65);
}

/* Secondary — cream surface, dark green border + text + arrow. */
.bp-calc-fcta__btn--secondary {
	background-color: rgba(251, 246, 236, 0.78);
	color: var(--bp-calc-fcta-green);
	border-color: var(--bp-calc-fcta-green);
}

a.bp-calc-fcta__btn--secondary:hover,
a.bp-calc-fcta__btn--secondary:focus-visible {
	background-color: var(--bp-calc-fcta-cream);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -12px rgba(31, 42, 31, 0.45);
}

/* =========================================================
 * TABLET (≤ 1024px)
 * Tighten the card padding, keep the two buttons inline.
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-calc-fcta { padding: 0 20px; }

	.bp-calc-fcta__card {
		padding: 0;
		border-radius: 22px;
		min-block-size: 420px;
	}

	.bp-calc-fcta__content {
		padding: 44px 40px;
		max-inline-size: 540px;
		gap: 14px;
	}

	.bp-calc-fcta__title { font-size: clamp(30px, 4.4vw, 44px); }
	.bp-calc-fcta__paragraph { font-size: 14.5px; max-inline-size: 100%; }
}

/* =========================================================
 * TABLET PORTRAIT (≤ 860px)
 * Content spans the full card width. Buttons stay inline
 * but the card keeps its rounded shape.
 * ========================================================= */
@media (max-width: 860px) {
	.bp-calc-fcta { padding: 0 18px; }

	.bp-calc-fcta__card {
		border-radius: 22px;
		min-block-size: 400px;
	}

	.bp-calc-fcta__content {
		padding: 40px 32px;
		max-inline-size: 100%;
		gap: 14px;
	}

	.bp-calc-fcta__title { font-size: clamp(28px, 5.6vw, 38px); }
	.bp-calc-fcta__paragraph { font-size: 14px; }

	.bp-calc-fcta__decor--botanical {
		inline-size: 180px;
		block-size: 180px;
		transform: translate(34%, 12%);
		opacity: 0.14;
	}
}

/* =========================================================
 * MOBILE (≤ 600px)
 * Full stacking. Buttons become full-width with comfortable
 * tap targets. Outer gutters tightened to 16-18px so the
 * card fills the available inner width without touching
 * the physical phone edges. The agricultural image is still
 * visible on the right (and slightly into the middle).
 *
 * MOBILE WIDTH ARCHITECTURE: explicit `inline-size: 100% /
 * max-inline-size: 100% / min-inline-size: 0` on every key
 * element so the CTA card fills the available inner width
 * (≈ viewport − 2 × gutter) on every phone — not a squeezed
 * desktop column. */
@media (max-width: 600px) {
	.bp-calc-fcta { padding: 40px 16px 48px; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

	.bp-calc-fcta__card {
		padding: 0;
		border-radius: 22px;
		min-block-size: 0;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		background-position: 70% center;
	}

	.bp-calc-fcta__overlay {
		background: linear-gradient(
			to right,
			rgba(251, 246, 236, 0.94)   0%,
			rgba(251, 246, 236, 0.78)  40%,
			rgba(251, 246, 236, 0.40)  72%,
			rgba(251, 246, 236, 0.20) 100%
		);
	}

	.bp-calc-fcta__content {
		padding: 32px 22px;
		gap: 14px;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
	}

	.bp-calc-fcta__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
	.bp-calc-fcta__title { font-size: clamp(26px, 7.2vw, 32px); line-height: 1.1; }
	.bp-calc-fcta__paragraph { font-size: 13.5px; line-height: 1.6; max-inline-size: 100%; }
	.bp-calc-fcta__eyebrow-line { inline-size: 22px; }

	.bp-calc-fcta__decor--botanical {
		inline-size: 130px;
		block-size: 130px;
		transform: translate(40%, 10%);
		opacity: 0.12;
	}

	.bp-calc-fcta__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		margin-block-start: 10px;
	}

	.bp-calc-fcta__btn {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		min-block-size: 50px;
		padding-block: 12px;
		font-size: 13.5px;
		justify-content: center;
	}
}

/* =========================================================
 * SMALL MOBILE (≤ 380px)
 * Final tightening. The card uses every available pixel of
 * the inner content width with the 16px outer gutter.
 * ========================================================= */
@media (max-width: 380px) {
	.bp-calc-fcta { padding: 0 16px; }

	.bp-calc-fcta__card {
		border-radius: 20px;
	}

	.bp-calc-fcta__content {
		padding: 28px 18px;
	}

	.bp-calc-fcta__title { font-size: 26px; }
	.bp-calc-fcta__btn { min-block-size: 48px; padding-block: 11px; }
}

/* =========================================================
 * Safe-area insets (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-calc-fcta {
		padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
	}
}

/* =========================================================
 * ARABIC / RTL
 * Logical properties handle the visual flip automatically.
 * Display family falls back to the Arabic Noto Sans. The
 * agricultural background photo is NOT mirrored.
 * ========================================================= */
[lang="ar"] .bp-calc-fcta__title,
[dir="rtl"] .bp-calc-fcta__title,
[lang="ar"] .bp-calc-fcta__eyebrow,
[dir="rtl"] .bp-calc-fcta__eyebrow {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
}

[lang="ar"] .bp-calc-fcta__title,
[dir="rtl"] .bp-calc-fcta__title {
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

[lang="ar"] .bp-calc-fcta__eyebrow,
[dir="rtl"] .bp-calc-fcta__eyebrow {
	letter-spacing: 0;
	text-transform: none;
}

[lang="ar"] .bp-calc-fcta__paragraph,
[dir="rtl"] .bp-calc-fcta__paragraph,
[lang="ar"] .bp-calc-fcta__btn,
[dir="rtl"] .bp-calc-fcta__btn {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	letter-spacing: 0;
}

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.bp-calc-fcta [data-bp-reveal] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.bp-calc-fcta__btn { transition: none !important; }
}

/* =========================================================
 * Print
 * ========================================================= */
@media print {
	.bp-calc-fcta { padding: 0 16px; }
	.bp-calc-fcta__card { box-shadow: none; }
	.bp-calc-fcta__overlay,
	.bp-calc-fcta__decor { display: none; }
}