/* BP Final CTA widget styles
 *
 * Single rounded CTA section. The product is a standalone,
 * freely positionable layer on top of the background:
 *
 *   .bp-final-cta            → the section itself
 *                              position: relative, overflow: visible,
 *                              owns border-radius, min-block-size,
 *                              padding and the dark-green fallback
 *                              background. overflow: visible lets the
 *                              product be placed outside the rounded
 *                              rectangle when the user wants.
 *
 *   .bp-final-cta__bg        → background photo (clipped to the
 *                              rounded corners via border-radius:
 *                              inherit + overflow: hidden so it stays
 *                              a perfect rounded rectangle even though
 *                              the section itself no longer clips).
 *
 *   .bp-final-cta__overlay   → dark green gradient overlay (same
 *                              border-radius: inherit + overflow:
 *                              hidden clip strategy).
 *
 *   .bp-final-cta__product   → standalone, editable product image.
 *                              Width comes from the Elementor
 *                              product_width slider; horizontal and
 *                              vertical position come from
 *                              product_offset_x / product_offset_y.
 *                              Negative values let the product
 *                              overflow the CTA on any side.
 *
 *   .bp-final-cta__inner     → the text column (title, description,
 *                              CTA buttons).
 *
 * All rules stay under .bp-final-cta. Logical properties keep
 * LTR/RTL aligned without an override file: the gradient
 * uses `to inline-end` so the dark side automatically follows
 * the text column on /ar/, and the product is positioned via
 * `inset-inline-end` / `inset-block-end` so the offsets
 * mirror automatically on the Arabic build.
 */

.bp-final-cta {
	--bp-fc-radius:          20px;
	--bp-fc-min-h:           480px;
	--bp-fc-pad:             60px;
	--bp-fc-inner-max:       1200px;
	--bp-fc-fg:              #FFFFFF;
	--bp-fc-overlay:         #1F2A1F;
	--bp-fc-overlay-alpha:   70;            /* percent (driven by Elementor slider) */
	--bp-fc-title:           #FFFFFF;
	--bp-fc-desc:            rgba(255, 255, 255, 0.92);
	--bp-fc-primary-bg:      #374F37;
	--bp-fc-primary-fg:      #FFFFFF;
	--bp-fc-secondary-bg:    #25D366;                    /* WhatsApp brand green for clear contrast */
	--bp-fc-secondary-fg:    #FFFFFF;
	--bp-fc-secondary-bd:    transparent;
	--bp-fc-secondary-hover: #1DA851;                    /* darker WhatsApp green on hover */
	--bp-fc-font:            var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-fc-display:         var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	--bp-fc-reveal-slide:    24px; /* subtle horizontal offset for the content + buttons */

	/* Product layer tokens. `product-shadow` and
	 * `product-width` are driven by Elementor. Horizontal and
	 * vertical offsets are written directly to the wrapper by
	 * Elementor's responsive selectors so the user can place
	 * the package anywhere, including partially outside the
	 * CTA. */
	--bp-fc-product-shadow: 28px;
	--bp-fc-product-width:  360px;

	/* Background image position tokens. The default values
	 * (100% / 50% = "right center") are also written by
	 * Elementor's bg_position_x / bg_position_y controls on
	 * .bp-final-cta__bg via longhand. Kept here as a fallback
	 * for the rare case where the Elementor inline styles
	 * have not yet been injected. */
	--bp-fc-bg-pos-x: 100%;
	--bp-fc-bg-pos-y: 50%;

	position: relative;
	isolation: isolate;
	overflow: visible; /* allow the product to be placed outside the rounded rectangle */
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: var(--bp-fc-min-h);
	padding: var(--bp-fc-pad);
	border-radius: var(--bp-fc-radius);
	background-color: #1F2A1F;
	color: var(--bp-fc-fg);
	font-family: var(--bp-fc-font);
}

/* ---- Background image layer ----
 * Filled by the PHP render with an inline background-image
 * style so the editor's MEDIA control drives the asset. The
 * image uses `cover` and is positioned via the
 * `--bp-fc-bg-pos-x` / `--bp-fc-bg-pos-y` custom properties
 * (driven by Elementor's bg_position_x / bg_position_y
 * sliders) so the user can move the photo anywhere. `border-
 * radius: inherit` + `overflow: hidden` clip the photo to
 * the section's rounded corners even though the section
 * itself has `overflow: visible` (so the product can
 * overflow). */
.bp-final-cta__bg {
	position: absolute;
	inset: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: var(--bp-fc-bg-pos-x);
	/* -70px shifts the photo up by 70px from the slider value
	 * (default = 50% - 70px, i.e. well above centre). The
	 * calc keeps the Elementor slider working — the offset is
	 * always applied, the user just picks where the photo
	 * sits relative to it. */
	background-position-y: calc(var(--bp-fc-bg-pos-y) - 70px);
	border-radius: inherit;
	overflow: hidden;
	z-index: 0;
}

/* ---- Dark green overlay ----
 * Logical gradient: transparent on inline-end (where the
 * product sits), dark on inline-start (under the text).
 *
 * color-mix() lets the picker-driven hex var feed the rgba
 * stops, and the alpha slider controls the strength without
 * losing the chosen hue. Well-supported in modern browsers
 * (Chrome 111+, Firefox 113+, Safari 16.2+). */
.bp-final-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;
	background: linear-gradient(
		to inline-end,
		transparent 0%,
		transparent 35%,
		color-mix(in srgb, var(--bp-fc-overlay) calc(var(--bp-fc-overlay-alpha) * 0.6%), transparent) 65%,
		color-mix(in srgb, var(--bp-fc-overlay) calc(var(--bp-fc-overlay-alpha) * 1%), transparent) 100%
	);
}

/* ---- Product layer ----
 * Standalone, editable visual anchored to the bottom inline-end
 * corner of the CTA. The wrapper itself defines the size and
 * default position; the Elementor product_offset_x /
 * product_offset_y / product_width controls override these
 * per-breakpoint so the user can move the package anywhere,
 * including partially outside the rounded rectangle (the
 * section has `overflow: visible`). `max-block-size: 100%` keeps
 * the wrapper from being taller than the section by default —
 * users can still break out of the section vertically by
 * setting a negative product_offset_y. `pointer-events: none`
 * keeps the layer purely visual so it never intercepts clicks
 * on the CTAs. */
.bp-final-cta__product {
	position: absolute;
	inline-size: var(--bp-fc-product-width);
	max-block-size: 100%;
	inset-block-end: 0;
	inset-inline-end: 40px;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 3;
}

/* The product image itself.
 *
 *   • `object-fit: contain` keeps the package's natural
 *     aspect ratio so transparent PNG exports render exactly
 *     as designed — no cropping, stretching or letterboxing.
 *   • `object-position: bottom center` anchors the image to
 *     the bottom of its box so the package always rests on
 *     the same baseline.
 *   • `transform: perspective(1200px) rotateX(-2deg)
 *     rotateY(-1deg)` keeps the existing 3D perspective tilt
 *     that makes the package read as a physical object on
 *     the CTA surface. The whole transform is anchored at
 *     `bottom center` so the tilt stays glued to the ground
 *     line and the drop-shadow follows the silhouette.
 *   • `filter: drop-shadow(...)` follows the alpha shape of
 *     the PNG (not a rectangular halo) and tucks neatly
 *     under the package silhouette. The colour matches the
 *     section's fallback background so the package reads as
 *     sitting on the same surface.
 *   • `will-change: transform` promotes the image to its
 *     own compositor layer so the drop-shadow remains
 *     crisp at any scale.
 *   • `[dir="rtl"]` mirrors the Y rotation so the package
 *     always tilts toward the text column (inline-start). */
.bp-final-cta__product-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	object-position: bottom center;
	transform: perspective(1200px) rotateX(-2deg) rotateY(-1deg);
	transform-origin: bottom center;
	will-change: transform;
	filter: drop-shadow(
		0 calc(var(--bp-fc-product-shadow) * 0.55)
		calc(var(--bp-fc-product-shadow) * 1.0)
		rgba(20, 28, 20, 0.45)
	);
}

[dir="rtl"] .bp-final-cta__product-img {
	transform: perspective(1200px) rotateX(-2deg) rotateY(1deg);
}

/* ---- Content wrapper ----
 * Single left-aligned column. The max-inline-size keeps the
 * text at a comfortable measure on ultra-wide displays; the
 * flex centring on .bp-final-cta__inner vertically aligns the
 * text inside the banner. The product layer is absolutely
 * positioned and does not participate in this flex flow, so
 * text and product can be resized independently without
 * pushing each other around. */
.bp-final-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	block-size: 100%;
	min-block-size: inherit;
	max-inline-size: var(--bp-fc-inner-max);
	margin-inline: auto;
}

.bp-final-cta__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-inline-size: 560px;
	text-align: start;
}

.bp-final-cta__title {
	margin: 0;
	font-family: var(--bp-fc-display);
	font-weight: 400;
	font-size: clamp(28px, 4.2vw, 48px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--bp-fc-title);
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bp-final-cta__description {
	margin: 0;
	font-family: var(--bp-fc-font);
	font-weight: 400;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.55;
	color: var(--bp-fc-desc);
	max-inline-size: 48ch;
}

/* ---- Button row ---- */
.bp-final-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 10px;
}

/* ---- Buttons ----
 * Pill-shaped, 48px tall (clears the 44px touch target),
 * uppercase, transitions on background + border + colour.
 * Focus ring uses the title colour so the contrast stays
 * high against the dark overlay. */
.bp-final-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--bp-fc-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bp-final-cta__btn:focus-visible {
	outline: 2px solid var(--bp-fc-title);
	outline-offset: 2px;
}

.bp-final-cta__btn--primary {
	background-color: var(--bp-fc-primary-bg);
	color: var(--bp-fc-primary-fg);
}

a.bp-final-cta__btn--primary:hover,
a.bp-final-cta__btn--primary:focus-visible {
	background-color: #2a3d2a;
	transform: translateY(-1px);
}

.bp-final-cta__btn--whatsapp {
	background-color: var(--bp-fc-secondary-bg);
	color: var(--bp-fc-secondary-fg);
	border-color: var(--bp-fc-secondary-bd);
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

a.bp-final-cta__btn--whatsapp:hover,
a.bp-final-cta__btn--whatsapp:focus-visible {
	background-color: var(--bp-fc-secondary-hover);
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(29, 168, 81, 0.45);
	transform: translateY(-1px);
}

.bp-final-cta__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

.bp-final-cta__btn-icon i,
.bp-final-cta__btn-icon svg {
	font-size: 16px;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.bp-final-cta__btn-label {
	display: inline-block;
}

/* ---- Entrance animation overrides ----
 * The shared `bp-reveal.css` already drives the root section
 * (vertical fade-in via translateY) and the staggered content
 * / button reveals. These rules only override the starting
 * transform so the text column and CTA buttons enter
 * horizontally from inline-start. Background image, overlay
 * and rounded clip stay completely static (no scale, no zoom)
 * so the photo never moves. The `.is-revealed` trigger, the
 * 600ms ease, the stagger steps and the `prefers-reduced-motion`
 * skip are all owned by the shared system. `[dir="rtl"]`
 * mirrors the offset so the content still enters from
 * inline-start on the Arabic build. */
.bp-final-cta__content[data-bp-reveal] {
	transform: translateX(calc(-1 * var(--bp-fc-reveal-slide)));
}
[dir="rtl"] .bp-final-cta__content[data-bp-reveal] {
	transform: translateX(var(--bp-fc-reveal-slide));
}
.bp-final-cta__content[data-bp-reveal].is-revealed {
	transform: none;
}

/* The two CTA buttons keep the same inline-start slide-in as
 * the content column so they read as a single coherent group
 * (one extra stagger step is applied via the markup). The
 * `:not(.is-revealed)` selector wins over the button's own
 * `transform 0.2s ease` transition so the reveal itself runs
 * at the shared 600ms; once `.is-revealed` lands the faster
 * transition takes over again for hover. */
.bp-final-cta__btn[data-bp-reveal] {
	transform: translateX(calc(-1 * var(--bp-fc-reveal-slide)));
	transition: opacity 600ms ease, transform 600ms ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
[dir="rtl"] .bp-final-cta__btn[data-bp-reveal] {
	transform: translateX(var(--bp-fc-reveal-slide));
}
.bp-final-cta__btn[data-bp-reveal].is-revealed {
	transform: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* ---- Tablet ----
 * The split layout (text on inline-start, product on
 * inline-end) is preserved. Product width and position are
 * driven by the Elementor responsive controls
 * (product_width, product_offset_x, product_offset_y), so the
 * breakpoint only owns the section-level min-height / padding
 * and the text column's max-inline-size. */
@media (max-width: 960px) {
	.bp-final-cta {
		--bp-fc-min-h: 440px;
		--bp-fc-pad:   48px;
	}

	.bp-final-cta__content {
		max-inline-size: 480px;
	}
}

/* ---- Mobile ----
 * Product width and position are driven by the Elementor
 * responsive controls. The breakpoint only owns:
 *   • section min-height / padding (tighter stack on phone),
 *   • the background gradient flip (top-to-bottom fade so
 *     the text stays readable when the product is centered
 *     in the image),
 *   • the CTA button layout (full-width stacked on tap). */
@media (max-width: 720px) {
	.bp-final-cta {
		--bp-fc-min-h: 560px;
		--bp-fc-pad:   32px;
	}

	.bp-final-cta__bg {
		background-position-x: 50%;
		background-position-y: calc(50% - 70px);
	}

	.bp-final-cta__overlay {
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--bp-fc-overlay) calc(var(--bp-fc-overlay-alpha) * 1%), transparent) 0%,
			color-mix(in srgb, var(--bp-fc-overlay) calc(var(--bp-fc-overlay-alpha) * 0.7%), transparent) 50%,
			color-mix(in srgb, var(--bp-fc-overlay) calc(var(--bp-fc-overlay-alpha) * 0.3%), transparent) 100%
		);
	}

	.bp-final-cta__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.bp-final-cta__btn {
		inline-size: 100%;
	}

	.bp-final-cta__content {
		gap: 14px;
		max-inline-size: 100%;
	}
}