/**
 * Front-end styling for AI-written product descriptions.
 *
 * Scoped entirely under .warya-doc so it cannot leak into the theme, and
 * built on CSS custom properties so the shop can restyle it from one place.
 *
 * Reference: lootbar.com product pages — trust strip, spec grid, numbered
 * procedure, accordion FAQ. Adapted to RTL and to a Persian gaming shop.
 */

.warya-doc {
	--w-accent: #2F6FED;
	--w-accent-soft: rgba(47, 111, 237, .08);
	--w-accent-line: rgba(47, 111, 237, .22);
	--w-ink: #16202E;
	--w-dim: #64748B;
	--w-line: #E3E8EF;
	--w-surface: #FFFFFF;
	--w-surface-2: #F7F9FC;
	--w-ok: #14875A;
	--w-warn: #B4530A;

	direction: rtl;
	text-align: right;
	color: var(--w-ink);
	font-size: 15px;
	line-height: 2.05;
}

.warya-doc * {
	box-sizing: border-box;
}

.warya-doc > p {
	margin: 0 0 14px;
}

.warya-doc h2 {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.6;
	margin: 32px 0 12px;
	padding-right: 13px;
	border-right: 4px solid var(--w-accent);
	color: var(--w-ink);
}

.warya-doc h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 20px 0 8px;
	color: var(--w-ink);
}

.warya-doc ul,
.warya-doc ol {
	margin: 0 0 14px;
	padding-right: 0;
}

.warya-doc ul {
	list-style: none;
}

.warya-doc ul li {
	position: relative;
	padding: 3px 22px 3px 0;
}

.warya-doc ul li::before {
	content: "";
	position: absolute;
	right: 4px;
	top: 15px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--w-accent);
}

.warya-doc a {
	color: var(--w-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--w-accent-line);
	font-weight: 600;
}

.warya-doc a:hover {
	border-bottom-color: var(--w-accent);
}

/* ---------------------------------------------------------------
 * Lead paragraph — the hook gets visual weight
 * ------------------------------------------------------------- */

.warya-lead {
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.95;
	margin: 0 0 18px;
	color: var(--w-ink);
}

/* ---------------------------------------------------------------
 * Trust strip
 * ------------------------------------------------------------- */

.warya-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.warya-trust li {
	flex: 1 1 150px;
	padding: 11px 14px;
	border: 1px solid var(--w-line);
	border-radius: 12px;
	background: var(--w-surface-2);
	font-size: 13px;
	line-height: 1.6;
}

.warya-trust li::before {
	display: none;
}

.warya-trust b {
	display: block;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--w-ink);
	margin-bottom: 1px;
}

.warya-trust span {
	color: var(--w-dim);
	font-size: 12px;
}

/* ---------------------------------------------------------------
 * Myth-buster callout
 * ------------------------------------------------------------- */

.warya-myth {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--w-accent-line);
	border-right-width: 4px;
	border-radius: 12px;
	background: var(--w-accent-soft);
	line-height: 1.95;
}

.warya-myth .warya-myth-claim {
	display: block;
	color: var(--w-warn);
	font-weight: 700;
	margin-bottom: 4px;
}

.warya-myth .warya-myth-truth {
	display: block;
	color: var(--w-ink);
}

.warya-myth b {
	font-weight: 800;
}

/* ---------------------------------------------------------------
 * Spec grid
 * ------------------------------------------------------------- */

.warya-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.warya-spec li {
	padding: 12px 14px;
	border: 1px solid var(--w-line);
	border-radius: 12px;
	background: var(--w-surface);
}

.warya-spec li::before {
	display: none;
}

.warya-spec .warya-spec-k {
	display: block;
	font-size: 12px;
	color: var(--w-dim);
	margin-bottom: 3px;
	font-weight: 500;
}

.warya-spec .warya-spec-v {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--w-ink);
	line-height: 1.7;
}

.warya-spec li.is-price .warya-spec-v {
	color: var(--w-accent);
}

.warya-spec li.is-stock .warya-spec-v {
	color: var(--w-ok);
}

.warya-spec li.is-out .warya-spec-v {
	color: var(--w-warn);
}

/* ---------------------------------------------------------------
 * Numbered procedure
 * ------------------------------------------------------------- */

.warya-steps {
	counter-reset: warya-step;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.warya-steps li {
	counter-increment: warya-step;
	position: relative;
	padding: 4px 42px 4px 0;
	margin-bottom: 10px;
	min-height: 30px;
}

.warya-steps li::before {
	content: counter(warya-step);
	position: absolute;
	right: 0;
	top: 2px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--w-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.warya-note {
	margin: 0 0 20px;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--w-surface-2);
	border: 1px solid var(--w-line);
	font-size: 13.5px;
	line-height: 1.9;
}

/* ---------------------------------------------------------------
 * FAQ accordion — content stays in the DOM, so it is fully indexable
 * ------------------------------------------------------------- */

.warya-faq {
	margin: 0 0 8px;
	border: 1px solid var(--w-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--w-surface);
}

.warya-faq + .warya-faq {
	margin-top: -1px;
}

.warya-faq > summary {
	list-style: none;
	cursor: pointer;
	padding: 13px 16px 13px 42px;
	font-weight: 700;
	font-size: 14.5px;
	position: relative;
	color: var(--w-ink);
}

.warya-faq > summary::-webkit-details-marker {
	display: none;
}

.warya-faq > summary::after {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--w-dim);
	border-bottom: 2px solid var(--w-dim);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.warya-faq[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.warya-faq[open] > summary {
	color: var(--w-accent);
}

.warya-faq > div {
	padding: 0 16px 14px;
	color: var(--w-ink);
	font-size: 14px;
	line-height: 2;
}

/* ---------------------------------------------------------------
 * Related-products paragraph
 * ------------------------------------------------------------- */

.warya-related {
	padding: 16px;
	border: 1px dashed var(--w-line);
	border-radius: 12px;
	background: var(--w-surface-2);
	margin: 0 0 20px;
}

.warya-related p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * Dark mode — follow the theme, not the OS, when the theme says so
 * ------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.warya-doc {
		--w-ink: #E6EDF7;
		--w-dim: #94A3B8;
		--w-line: #2A3546;
		--w-surface: #141B26;
		--w-surface-2: #1A2331;
		--w-accent-soft: rgba(96, 150, 255, .12);
		--w-ok: #3DD68C;
		--w-warn: #F0A868;
	}
}

body.wd-dark .warya-doc,
[data-theme="dark"] .warya-doc {
	--w-ink: #E6EDF7;
	--w-dim: #94A3B8;
	--w-line: #2A3546;
	--w-surface: #141B26;
	--w-surface-2: #1A2331;
	--w-accent-soft: rgba(96, 150, 255, .12);
	--w-ok: #3DD68C;
	--w-warn: #F0A868;
}

/* ---------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------- */

@media (max-width: 600px) {
	.warya-doc { font-size: 14.5px; }
	.warya-doc h2 { font-size: 18px; margin-top: 26px; }
	.warya-spec { grid-template-columns: 1fr 1fr; }
	.warya-trust li { flex-basis: 100%; }
}