/* BP Barbary Calculator CTA widget styles
 *
 * Standalone Elementor widget for the Product page. A 1140px
 * centered cream card with two columns:
 *
 *   - left:  copy + primary/secondary CTAs + 4 benefits
 *   - right: agricultural field image + floating info card
 *
 * Approved palette only:
 *   DEEP GREEN  #374F37
 *   CREAM       #EDDBC3 / #FBF6EC
 *   OLIVE/GOLD  #B8B25A
 *   INK         #1F2A1F
 *   WHITE       #FFFFFF
 *
 * Design tokens reused from the rest of the site:
 *   - 1140px max-width container
 *   - 48px button height, 999px radius, 13px uppercase
 *     text, 0.06em letter-spacing
 *   - 24px section radius
 *   - soft cream card with thin warm border + soft shadow
 *
 * Logical CSS properties (margin-inline, padding-inline,
 * inset-inline-*) so the same ruleset covers /ar/ without
 * a separate RTL stylesheet. The image is never mirrored.
 *
 * No form, no calculator, no fake result numbers.
 */

.bp-calculator-cta {
	--bp-cc-bg:        #FBF6EC;
	--bp-cc-border:    #E4DCCB;
	--bp-cc-fg:        #1F2A1F;
	--bp-cc-muted:     #5C6A5C;
	--bp-cc-accent:    #374F37;
	--bp-cc-gold:      #B8B25A;
	--bp-cc-radius:    24px;
	--bp-cc-shadow:    0 8px 24px rgba(31, 42, 31, 0.08);
	--bp-cc-font:      var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-cc-display:   var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	font-family: var(--bp-cc-font);
	color: var(--bp-cc-fg);
	box-sizing: border-box;
	padding-block: 56px;
	background: var(--bp-cc-bg);
}

.bp-calculator-cta *,
.bp-calculator-cta *::before,
.bp-calculator-cta *::after { box-sizing: border-box; }

.bp-calculator-cta__inner {
	inline-size: 100%;
	max-inline-size: 1140px;
	margin-inline: auto;
	padding-inline: 24px;
}

.bp-calculator-cta__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.10fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	background: #FFFFFF;
	border: 1px solid var(--bp-cc-border);
	border-radius: var(--bp-cc-radius);
	box-shadow: var(--bp-cc-shadow);
	padding: 44px 48px;
	overflow: hidden;
}

/* ---------- Subtle botanical line decoration ---------- */
.bp-calculator-cta__decor {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: -32px;
	inline-size: 180px;
	block-size: 180px;
	color: var(--bp-cc-gold);
	opacity: 0.55;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.bp-calculator-cta__decor-svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* ---------- Left column ---------- */
.bp-calculator-cta__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-inline-size: 0;
}

.bp-calculator-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-cc-accent);
}

.bp-calculator-cta__eyebrow::before,
.bp-calculator-cta__eyebrow::after {
	content: "";
	block-size: 1px;
	inline-size: 28px;
	background: var(--bp-cc-gold);
	opacity: 0.8;
}

.bp-calculator-cta__title {
	margin: 0;
	font-family: var(--bp-cc-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.18;
	letter-spacing: 0.005em;
	color: var(--bp-cc-fg);
	max-inline-size: 18ch;
}

.bp-calculator-cta__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bp-cc-muted);
	max-inline-size: 52ch;
}

.bp-calculator-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 4px;
}

.bp-calculator-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-inline: 24px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease,
		border-color 0.2s ease, transform 0.2s ease;
}

.bp-calculator-cta__btn--primary {
	background: #374F37 !important;
	color: #FFFFFF !important;
	border: 1px solid #374F37;
}
.bp-calculator-cta__btn--primary:hover,
.bp-calculator-cta__btn--primary:focus-visible {
	background: #2A3F2A !important;
	border-color: #2A3F2A;
	transform: translateY(-1px);
}

.bp-calculator-cta__btn--ghost {
	background: transparent !important;
	color: #374F37 !important;
	border: 1.5px solid #374F37;
}
.bp-calculator-cta__btn--ghost:hover,
.bp-calculator-cta__btn--ghost:focus-visible {
	background: rgba(55, 79, 55, 0.06) !important;
}

.bp-calculator-cta__btn-icon {
	display: inline-flex;
	align-items: center;
}
.bp-calculator-cta__btn-icon i,
.bp-calculator-cta__btn-icon svg {
	inline-size: 14px;
	block-size: 14px;
}

.bp-calculator-cta__benefits {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}

.bp-calculator-cta__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--bp-cc-fg);
}

.bp-calculator-cta__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 999px;
	background: rgba(55, 79, 55, 0.08);
	color: var(--bp-cc-accent);
	flex: 0 0 26px;
}

.bp-calculator-cta__benefit-icon i,
.bp-calculator-cta__benefit-icon svg {
	inline-size: 13px;
	block-size: 13px;
}

/* ---------- Right column: visual + floating card ---------- */
.bp-calculator-cta__visual {
	position: relative;
	z-index: 1;
	min-inline-size: 0;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: #F6EFE3;
	box-shadow: 0 12px 32px rgba(31, 42, 31, 0.12);
}

.bp-calculator-cta__visual-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-calculator-cta__floating-card {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 16px;
	inset-inline-end: 16px;
	margin: 0;
	padding: 12px 14px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	border: 1px solid var(--bp-cc-border);
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(31, 42, 31, 0.10);
}

.bp-calculator-cta__floating-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bp-cc-fg);
	padding-inline: 8px;
	padding-block: 4px;
	background: rgba(55, 79, 55, 0.06);
	border-radius: 999px;
}

.bp-calculator-cta__floating-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-cc-accent);
}
.bp-calculator-cta__floating-icon i,
.bp-calculator-cta__floating-icon svg {
	inline-size: 12px;
	block-size: 12px;
}

/* ---------- Tablet (≤ 960px) ---------- */
@media (max-width: 960px) {
	.bp-calculator-cta__card {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 36px 32px;
	}
	.bp-calculator-cta__title { max-inline-size: none; }
	.bp-calculator-cta__visual { aspect-ratio: 16 / 10; }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px) {
	.bp-calculator-cta { padding-block: 40px; }
	.bp-calculator-cta__card { padding: 28px 22px; gap: 24px; }
	.bp-calculator-cta__benefits { grid-template-columns: 1fr; gap: 8px; }
	.bp-calculator-cta__actions { flex-direction: column; align-items: stretch; }
	.bp-calculator-cta__btn { inline-size: 100%; }
	.bp-calculator-cta__decor { display: none; }
}

/* ---------- Small mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
	.bp-calculator-cta__card { padding: 24px 18px; border-radius: 18px; }
	.bp-calculator-cta__visual { border-radius: 14px; }
	.bp-calculator-cta__floating-card {
		inset-block-end: 12px;
		inset-inline-start: 12px;
		inset-inline-end: 12px;
		padding: 10px 12px;
	}
}