/* BP Product FAQ widget styles
 *
 * Tunisia product page "QUESTIONS FRÉQUENTES" section. Soft cream
 * background, centered header (eyebrow + serif title + subtitle),
 * 2-column FAQ grid (5 + 5 questions) and a rounded horizontal
 * bottom CTA. Two large olive-branch decorations sit behind the
 * FAQ: one at the top-left, one at the bottom-right, each fully
 * responsive (Width / X / Y / Rotation / Opacity).
 *
 * Each accordion row is a clean cream/light panel with a hairline
 * beige border, a dark-green semibold question, a circular + / −
 * control on the inline-end, and an animated open / close (the
 * answer expands INSIDE the same panel, no layout jump). Only
 * one item may be open at a time when the "only_one_open" toggle
 * is on.
 *
 * Layout:
 *   - soft cream section background (default #F4ECDD)
 *   - centered inner (max 1140px, inline-size: calc(100% - 40px))
 *   - 2-column grid on desktop, 1 column on tablet/mobile
 *   - mobile/tablet: 1 column, full-width, comfortable spacing
 *   - bottom CTA: rounded horizontal panel with left headset
 *     icon in a dark green circle, centered text, and a dark
 *     green pill button on the right
 *   - on mobile the CTA stacks vertically (icon | text | button)
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB, #1F2A1F,
 *   #5C6A5C). No invented greens or browns.
 *
 * All rules are scoped under `.bp-product-faq` and use logical
 * CSS properties (margin-inline, padding-inline, inset-inline …)
 * so LTR and RTL share the same ruleset. Botanical positions are
 * driven by per-instance CSS variables so Elementor can override
 * Width / X / Y / Rotation / Opacity per device.
 */

.bp-product-faq {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-pfaq-bg:             #F4ECDD;
	--bp-pfaq-cream:          #EDDBC3;
	--bp-pfaq-green:          #374F37;
	--bp-pfaq-olive:          #B8B25A;
	--bp-pfaq-white:          #FFFFFF;
	--bp-pfaq-text:           #1F2A1F;
	--bp-pfaq-text-muted:     #5C6A5C;
	--bp-pfaq-border:         #E4DCCB;
	--bp-pfaq-tint:           #FBF6EC;

	--bp-pfaq-inner-max:      1140px;
	--bp-pfaq-item-gap:       30px;
	--bp-pfaq-icon-size:      28px;

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

	/* Per-botanical defaults — every value is fully overridable
	 * from Elementor per-device (desktop / tablet / mobile). */
	--bp-pfaq-tl-leaf-width:    240px;
	--bp-pfaq-tl-leaf-x:        -40px;
	--bp-pfaq-tl-leaf-y:        0px;
	--bp-pfaq-tl-leaf-rotate:   0deg;
	--bp-pfaq-tl-leaf-opacity:  100%;
	--bp-pfaq-br-leaf-width:    280px;
	--bp-pfaq-br-leaf-x:        40px;
	--bp-pfaq-br-leaf-y:        0px;
	--bp-pfaq-br-leaf-rotate:   0deg;
	--bp-pfaq-br-leaf-opacity:  100%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding-block: 80px;
	background-color: var(--bp-pfaq-bg);
	color: var(--bp-pfaq-text);
	font-family: var(--bp-pfaq-font-body);
}

.bp-product-faq *,
.bp-product-faq *::before,
.bp-product-faq *::after {
	box-sizing: border-box;
}

/* ---------------- Elementor full-bleed breakout ----------------
 * The widget container must always span the full available width
 * of its Elementor column / page so the 1140px inner stays
 * centered and the decorations can bleed slightly outside. */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-product-faq,
.elementor-section .elementor-container,
.e-con.e-parent,
.e-con .e-con-inner,
.e-con-inner {
	box-sizing: border-box;
}

/* ---------------- Inner wrapper ----------------
 * 1140px centered inner with a 20px side gutter on small screens.
 * The CTA, the list, and the head all sit inside this wrapper so
 * the botanicals (which are absolutely positioned on the section
 * itself) can extend slightly outside without breaking the grid. */
.bp-product-faq__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-pfaq-inner-max);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ---------------- Decorative botanicals ----------------
 * Two absolutely-positioned wrappers (one top-left, one bottom-
 * right) that host the olive-branch decoration. The actual
 * position is driven by per-instance CSS variables
 * (--bp-pfaq-{tl,br}-leaf-{x,y,rotate,opacity}). pointer-events
 * and user-select are off so the decoration is purely visual. */
.bp-product-faq__decor {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 1;
}

.bp-product-faq__decor--tl {
	inset-block-start: 0;
	left: 0;
	right: auto;
	inline-size: auto;
}

.bp-product-faq__decor--br {
	inset-block-end: 0;
	right: 0;
	left: auto;
	inline-size: auto;
}

.bp-product-faq__botanical {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: 100%;
}

.bp-product-faq__botanical--tl {
	inline-size: var(--bp-pfaq-tl-leaf-width);
	transform: translate(
		var(--bp-pfaq-tl-leaf-x, -40px),
		var(--bp-pfaq-tl-leaf-y, 0px)
	) rotate(var(--bp-pfaq-tl-leaf-rotate, 0deg));
	opacity: var(--bp-pfaq-tl-leaf-opacity, 100%);
	color: var(--bp-pfaq-olive);
}

.bp-product-faq__botanical--br {
	inline-size: var(--bp-pfaq-br-leaf-width);
	transform: translate(
		var(--bp-pfaq-br-leaf-x, 40px),
		var(--bp-pfaq-br-leaf-y, 0px)
	) rotate(var(--bp-pfaq-br-leaf-rotate, 0deg));
	opacity: var(--bp-pfaq-br-leaf-opacity, 100%);
	color: var(--bp-pfaq-olive);
}

.bp-product-faq__leaf-svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* ---------------- Header ----------------
 * Eyebrow + serif title + description share the visual scale of
 * the other Barbary Plante section headings. Centered, with a
 * short bottom margin before the FAQ list. */
.bp-product-faq__head {
	position: relative;
	z-index: 2;
	text-align: center;
	margin-block-end: 36px;
}

.bp-product-faq__eyebrow {
	margin: 0 0 12px;
	font-family: var(--bp-pfaq-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bp-pfaq-green);
}

.bp-product-faq__title {
	position: relative;
	z-index: 2;
	margin: 0 0 12px;
	font-family: var(--bp-pfaq-font-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: #374F3C;
}

.bp-product-faq__subtitle {
	margin: 0 auto;
	max-inline-size: 640px;
	font-family: var(--bp-pfaq-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bp-pfaq-text-muted);
}

/* ---------------- FAQ list ----------------
 * 2-column grid on desktop, single column on tablet/mobile.
 * Logical gap keeps LTR/RTL aligned without an override file. */
.bp-product-faq__list {
	position: relative;
	z-index: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bp-pfaq-item-gap);
	/* Each item keeps its own height; opening a long answer
	 * in one column must NOT stretch the matching row item in
	 * the other column. */
	align-items: start;
}

/* ---------------- Single item ----------------
 * Cream surface with a hairline beige border. The item is a flex
 * column so the button (top) and the panel (bottom) sit flush and
 * animate cleanly. The "is-open" modifier drives the visual state
 * of the question (border, icon, etc.). */
.bp-product-faq__item {
	background-color: var(--bp-pfaq-tint);
	border: 1px solid var(--bp-pfaq-border);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.bp-product-faq__item.is-open {
	border-color: var(--bp-pfaq-olive);
}

/* ---------------- Question button ----------------
 * Real <button> for keyboard + AT support. Question is at the
 * inline-start, the circular + / − control sits at the inline-
 * end. Hover and focus-visible get a subtle background tint and
 * a 2px outline that respects the page language. */
.bp-product-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	inline-size: 100%;
	padding: 18px 22px;
	background: transparent;
	border: 0;
	border-radius: 0;
	font: inherit;
	font-family: var(--bp-pfaq-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bp-pfaq-text);
	text-align: start;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.bp-product-faq__question:hover {
	background-color: rgba(55, 79, 55, 0.04);
}

.bp-product-faq__question:focus-visible {
	outline: 2px solid var(--bp-pfaq-green);
	outline-offset: -2px;
}

.bp-product-faq__question-text {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* ---------------- + / − control ----------------
 * The control is a soft circle drawn from the icon element. The
 * "+" itself is built from two pseudo-elements (horizontal + /
 * vertical bar). The vertical bar rotates 90deg and fades to
 * become a clean "−" when the item is open. The default color
 * inherits from .bp-product-faq__icon which the Elementor color
 * control drives via currentColor. */
.bp-product-faq__icon {
	position: relative;
	flex: none;
	inline-size: var(--bp-pfaq-icon-size);
	block-size: var(--bp-pfaq-icon-size);
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--bp-pfaq-green);
}

.bp-product-faq__icon::before,
.bp-product-faq__icon::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.bp-product-faq__icon::before {
	inline-size: 50%;
	block-size: 1.5px;
	transform: translate(-50%, -50%);
}

.bp-product-faq__icon::after {
	inline-size: 1.5px;
	block-size: 50%;
	transform: translate(-50%, -50%);
}

.bp-product-faq__item.is-open .bp-product-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.bp-product-faq__item.is-open .bp-product-faq__icon {
	background-color: var(--bp-pfaq-green);
	color: var(--bp-pfaq-white);
}

/* Force the +/- bars to white when the item is open so the
 * minus glyph stays white even when the Elementor "icon_color"
 * control has set a custom colour. Elementor emits a
 * (0,4,1) selector like
 *   .elementor-N .elementor-element.elementor-element-XXXX .bp-product-faq__icon::before
 * so a plain (0,3,1) rule is not enough — we need !important
 * to win the cascade. */
.bp-product-faq__item.is-open .bp-product-faq__icon::before,
.bp-product-faq__item.is-open .bp-product-faq__icon::after {
	background-color: var(--bp-pfaq-white) !important;
}

/* ---------------- Answer panel ----------------
 * Region controlled by the button via aria-controls. The panel
 * uses a grid-template-rows: 0fr -> 1fr transition so the answer
 * expands and collapses smoothly (no display:none jump, no layout
 * reflow on the rest of the list). The inner wrapper hides its
 * overflow and animates opacity + a tiny translate to match the
 * rest of the page's animation language. aria-hidden toggles in
 * lockstep with is-open so screen readers and keyboard users see
 * the right state. */
.bp-product-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms ease, padding 320ms ease;
}

.bp-product-faq__panel-inner {
	overflow: hidden;
	min-block-size: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 320ms ease, transform 320ms ease;
}

.bp-product-faq__item.is-open .bp-product-faq__panel {
	grid-template-rows: 1fr;
}

.bp-product-faq__item.is-open .bp-product-faq__panel-inner {
	opacity: 1;
	transform: none;
}

.bp-product-faq__answer {
	padding: 0 22px 20px;
	font-family: var(--bp-pfaq-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--bp-pfaq-text-muted);
	white-space: pre-line;
}

/* ---------------- Bottom CTA ----------------
 * Rounded horizontal panel: dark-green circular icon (left),
 * text, action button (right). Visual shell provided by the
 * site-wide `.bp-info-strip` utility. Only the CTA button,
 * button arrow, title/subtitle hierarchy and outline focus
 * ring remain as variant-specific overrides. */
.bp-product-faq__cta {
	position: relative;
	z-index: 2;
	margin-inline: auto;
	margin-block-start: 36px;
}

.bp-product-faq__cta-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.bp-product-faq__cta-subtitle {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.bp-product-faq__cta-button:focus-visible {
	outline-offset: 2px;
}

.bp-product-faq__cta-button-arrow {
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.bp-product-faq__cta-button:hover .bp-product-faq__cta-button-arrow {
	transform: translateX(3px);
}

/* ============================================================
 * Tablet
 * ------------------------------------------------------------
 * Single column, comfortable spacing, botanicals scaled down so
 * they don't overlap the column. CTA stays horizontal.
 * ============================================================ */
@media (max-width: 880px) {
	.bp-product-faq {
		padding-block: 64px;
		--bp-pfaq-item-gap: 18px;
		--bp-pfaq-tl-leaf-width: 180px;
		--bp-pfaq-br-leaf-width: 220px;
	}

	.bp-product-faq__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bp-product-faq__head {
		margin-block-end: 28px;
	}
}

/* ============================================================
 * Mobile
 * ------------------------------------------------------------
 * Single column, full-width accordion items, touch-friendly +/-
 * controls, comfortable typography. CTA stacks vertically.
 * Botanicals stay but get smaller so they never overlap content
 * or cause horizontal overflow.
 * ============================================================ */
@media (max-width: 560px) {
	.bp-product-faq {
		padding-block: 48px;
		--bp-pfaq-item-gap: 14px;
		--bp-pfaq-icon-size: 26px;
		--bp-pfaq-tl-leaf-width: 130px;
		--bp-pfaq-tl-leaf-x:     -20px;
		--bp-pfaq-br-leaf-width: 150px;
		--bp-pfaq-br-leaf-x:     10px;
	}

	.bp-product-faq__inner {
		padding-inline: 16px;
	}

	.bp-product-faq__title {
		font-size: clamp(24px, 7vw, 32px);
	}

	.bp-product-faq__subtitle {
		font-size: 14px;
	}

	.bp-product-faq__question {
		padding: 16px 18px;
		font-size: 14px;
	}

	.bp-product-faq__answer {
		padding: 0 18px 16px;
		font-size: 13px;
	}

	/* CTA: stack icon → text → button vertically so each row is
	 * tappable and nothing is clipped. */
	.bp-product-faq__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ============================================================
 * Safe-area insets (notched devices) — never touch screen
 * edges on phones with notches / cutouts.
 * ============================================================ */
@supports (padding: max(0px)) {
	.bp-product-faq__inner {
		padding-inline-start: max(16px, env(safe-area-inset-left));
		padding-inline-end:   max(16px, env(safe-area-inset-right));
	}
}

/* ---------------- SMALL MOBILE (≤ 480px) ----------------
 * Centred `calc(100% - 36px)` inner + 1 column list
 * matching the About pattern. */
@media ( max-width: 480px ) {
	.bp-product-faq__inner {
		inline-size: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
	.bp-product-faq__list {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.bp-product-faq__item {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
	}
	.bp-product-faq__question { padding: 16px 18px; font-size: 14px; }
	.bp-product-faq__answer { padding: 0 18px 16px; font-size: 14px; }

	.bp-faq,
	.bp-product-faq,
	.bp-product-faq * {
		min-inline-size: 0 !important;
	}
}