/* ============================================================
   Valabi AI Product Importer — product page content (front end)
   Styles the .vpi-* blocks the importer writes into descriptions
   and the how-to tab. Follows the theme's primary colour (Flatsome
   --fs-color-primary / --primary-color), RTL-first, mobile-first.
   ============================================================ */

.vpi-desc {
	--vpi-accent: var(--fs-color-primary, var(--primary-color, #28a35b));
	--vpi-ink: #1b291d;
	--vpi-muted: #4e5d52;
	--vpi-soft: color-mix(in srgb, var(--vpi-accent) 9%, #fff);
	--vpi-line: color-mix(in srgb, var(--vpi-accent) 18%, #e7ebe8);
	--vpi-radius: 16px;
	color: var(--vpi-ink);
	line-height: 2;
	font-size: 15px;
	max-width: 880px;
	overflow-wrap: anywhere; /* long ingredient names (Hydroxypinacolone Retinoate) must never widen the page */
}
.vpi-desc * { box-sizing: border-box; min-width: 0; }
.vpi-desc p { margin: 0 0 10px; }

.vpi-desc .vpi-block { margin: 0 0 28px; }
.vpi-desc .vpi-h {
	position: relative;
	margin: 0 0 14px;
	padding-inline-start: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--vpi-ink);
}
.vpi-desc .vpi-h::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.25em;
	bottom: 0.25em;
	width: 4px;
	border-radius: 4px;
	background: var(--vpi-accent);
}

/* Intro */
.vpi-desc .vpi-intro {
	padding: 20px 22px;
	border-radius: var(--vpi-radius);
	background: linear-gradient(135deg, var(--vpi-soft), #fff 70%);
	border: 1px solid var(--vpi-line);
}
.vpi-desc .vpi-lead { font-size: 16px; font-weight: 600; color: var(--vpi-ink); }
.vpi-desc .vpi-intro p:last-child { margin-bottom: 0; color: var(--vpi-muted); }

/* Feature checklist */
.vpi-desc .vpi-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vpi-desc .vpi-checks li {
	position: relative;
	margin: 0;
	padding: 10px 14px;
	padding-inline-start: 44px;
	background: #fff;
	border: 1px solid var(--vpi-line);
	border-radius: 12px;
}
.vpi-desc .vpi-checks li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vpi-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* Ingredient / technology cards */
.vpi-desc .vpi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.vpi-desc .vpi-card {
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--vpi-soft);
	border: 1px solid var(--vpi-line);
}
.vpi-desc .vpi-card__name { margin: 0 0 4px; font-weight: 700; color: var(--vpi-accent); line-height: 1.6; }
.vpi-desc .vpi-card__text { margin: 0; font-size: 14px; line-height: 1.9; color: var(--vpi-muted); }

/* Suitable-for callout */
.vpi-desc .vpi-callout {
	padding: 16px 20px;
	border-radius: var(--vpi-radius);
	background: #fff;
	border: 1px dashed var(--vpi-accent);
}
.vpi-desc .vpi-callout__title { margin: 0 0 4px; font-weight: 700; color: var(--vpi-accent); }
.vpi-desc .vpi-callout p:last-child { margin: 0; }

/* Numbered steps */
.vpi-desc .vpi-steps { list-style: none; counter-reset: vpi-step; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.vpi-desc .vpi-steps li {
	counter-increment: vpi-step;
	position: relative;
	margin: 0;
	padding: 12px 16px;
	padding-inline-start: 56px;
	background: #fff;
	border: 1px solid var(--vpi-line);
	border-radius: 12px;
	min-height: 48px;
}
.vpi-desc .vpi-steps li::before {
	content: counter(vpi-step);
	position: absolute;
	inset-inline-start: 12px;
	top: 12px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--vpi-accent);
	color: #fff;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

/* Warning box */
.vpi-desc .vpi-warn {
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff8ec;
	border: 1px solid #f1d7a8;
}
.vpi-desc .vpi-warn__title { margin: 0 0 6px; font-weight: 700; color: #9a5b00; }
.vpi-desc .vpi-warn__title::before { content: "⚠ "; }
.vpi-desc .vpi-warn ul { margin: 0; padding-inline-start: 20px; }
.vpi-desc .vpi-warn li { margin: 0 0 4px; color: #5b4521; }

/* FAQ accordion */
.vpi-desc .vpi-faq { display: grid; gap: 8px; }
.vpi-desc .vpi-faq__item { border: 1px solid var(--vpi-line); border-radius: 12px; background: #fff; overflow: hidden; }
.vpi-desc .vpi-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 12px 16px;
	padding-inline-end: 44px;
	font-weight: 600;
	position: relative;
}
.vpi-desc .vpi-faq__item summary::-webkit-details-marker { display: none; }
.vpi-desc .vpi-faq__item summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--vpi-accent);
	font-size: 20px;
	font-weight: 700;
}
.vpi-desc .vpi-faq__item[open] summary { background: var(--vpi-soft); }
.vpi-desc .vpi-faq__item[open] summary::after { content: "−"; }
.vpi-desc .vpi-faq__item p { margin: 0; padding: 10px 16px 14px; color: var(--vpi-muted); }

@media (max-width: 549px) {
	.vpi-desc { font-size: 14px; }
	.vpi-desc .vpi-intro { padding: 16px; }
	.vpi-desc .vpi-cards { grid-template-columns: 1fr; }
}


/* ============ Persian infographic block (.vpi-info) ============ */
.vpi-desc .vpi-info { padding: 18px; border-radius: var(--vpi-radius); background: var(--vpi-soft); border: 1px solid var(--vpi-line); }
.vpi-desc .vpi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; margin: 0 0 14px; }
.vpi-desc .vpi-stat { background: #fff; border-radius: 14px; padding: 12px 10px; text-align: center; border: 1px solid var(--vpi-line); }
.vpi-desc .vpi-stat__v { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.3; color: var(--vpi-accent); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.vpi-desc .vpi-stat__u { font-size: 13px; font-weight: 700; color: var(--vpi-muted); }
.vpi-desc .vpi-stat__l { margin: 2px 0 0; font-size: 13px; color: var(--vpi-muted); line-height: 1.6; }
.vpi-desc .vpi-badges { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vpi-desc .vpi-badges li { margin: 0; padding: 4px 14px; border-radius: 99px; background: var(--vpi-accent); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.8; }
.vpi-desc .vpi-flow__title { margin: 0 0 8px; font-weight: 700; }
.vpi-desc .vpi-flow { list-style: none; counter-reset: vpi-flow; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.vpi-desc .vpi-flow li { counter-increment: vpi-flow; position: relative; margin: 0; padding: 34px 12px 12px; background: #fff; border-radius: 14px; border: 1px solid var(--vpi-line); font-size: 13.5px; line-height: 1.8; }
.vpi-desc .vpi-flow li::before { content: counter(vpi-flow); position: absolute; top: 8px; inset-inline-start: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--vpi-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
@media (max-width: 549px) {
	.vpi-desc .vpi-info { padding: 12px; }
	.vpi-desc .vpi-stat__v { font-size: 20px; }
}

/* Promotional infographic image */
.vpi-promo { margin: 0 0 28px; }
.vpi-promo img { display: block; width: 100%; height: auto; border-radius: 16px; }