/**
 * Partner-review blocks — defensive skin.
 *
 * Stable pley-rev-* hooks that must render correctly even if the Tailwind
 * bundle predates the blades. Tailwind utilities carry the layout; this file
 * covers scanner blind spots and the branded, non-utility bits: the big
 * overall score, the per-category score bars, the pros/cons green + red
 * panels, the FAQ accordion, the Trustpilot facade.
 *
 * Loaded alongside pley-ext-tailwind + pley-affiliate-blocks (this file
 * declares the latter as a dependency, so the shared .pley-aff-cta button and
 * .pley-aff-stars component are available here). Green is the theme token
 * #4EBA00; the cons red (#E5484D) is scoped to these classes so it never
 * competes with the Valorant red, which stays reserved.
 */

/* Advertising disclosure inside a review block. The affiliate flex layout is
   scoped to .pley-aff-block, which reviews don't use, so restate it here so the
   icon and text sit on one line (not the icon orphaned above the text). */
.pley-rev-block .pley-aff-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1rem 0 0.25rem;
}
.pley-rev-block .pley-aff-disclosure-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	color: #7E7D77;
}
.pley-rev-block .pley-aff-disclosure p {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: #7E7D77;
}
.pley-rev-block .pley-aff-disclosure-label {
	font-weight: 600;
	color: #A2A19A;
}

/* Surfaces stay FLAT — PLEY's article language is bg-gray-950 cards with a
   quiet border and bg-gray-900 nested rows. No gradients, no glass edges, no
   drop shadows; the Tailwind utilities on the blades carry it all. */

/* Overall rating panel — a quiet nested row (PLEY pattern: bg-gray-900 inside
   a bg-gray-950 card, no extra border). The stars + score carry it. */
.pley-rev-overall {
	background: #1D1D1B;
}
.pley-rev-overall-num {
	font-size: 1.875rem;
	font-weight: 800;
	color: #F18805;
}
/* "/5" matches the 4.0 size, just muted, sitting on the same baseline. */
.pley-rev-overall-max {
	font-size: 1.875rem;
	font-weight: 800;
	color: #7E7D77;
}
/* Larger star row for the overall panel (children inherit the size). */
.pley-rev-stars-lg {
	font-size: 20px;
	letter-spacing: 3px;
}

/* The wysiwyg review renders <p> tags that the theme prose gives their own
   top/bottom margin. Inside a flex column that margin STACKS on top of the
   flex `gap`, so the space above the review reads as double. Zero the first
   child's top margin and the last child's bottom margin so the flex gap is the
   only spacing. */
.pley-rev-block .pley-rev-prose > :first-child { margin-top: 0 !important; }
.pley-rev-block .pley-rev-prose > :last-child { margin-bottom: 0 !important; }

/* The theme's post-content prose styles underline every <a> and re-add list
   markers to every <ul>. Neutralise both on our structural links and lists.
   Links inside the editorial prose (.pley-rev-prose) keep their normal styling. */
.pley-rev-block .pley-rev-cta,
.pley-rev-block .pley-rev-compare-link,
.pley-rev-block .pley-rev-row,
.pley-rev-block .pley-rev-iconcard-link {
	text-decoration: none !important;
}
.pley-rev-block .pley-rev-breakdown,
.pley-rev-block .pley-rev-breakdown > li,
.pley-rev-block .pley-rev-pros ul,
.pley-rev-block .pley-rev-pros li,
.pley-rev-block .pley-rev-cons ul,
.pley-rev-block .pley-rev-cons li,
.pley-rev-block .pley-rev-iconlist-grid,
.pley-rev-block .pley-rev-compare-list,
.pley-rev-block .pley-rev-compare-list > li {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
/* The icon-list / card <li> IS the padded card, so it must keep its own
   p-5/p-6 padding, only strip the marker + any theme-added left margin, never
   the card padding. */
.pley-rev-block .pley-rev-iconlist-grid > li {
	list-style: none !important;
	margin-left: 0 !important;
}
.pley-rev-block .pley-rev-breakdown > li::marker,
.pley-rev-block .pley-rev-pros li::marker,
.pley-rev-block .pley-rev-cons li::marker,
.pley-rev-block .pley-rev-iconlist-grid li::marker { content: ""; }

/* The theme's post-content prose adds a bottom margin to <li> and the last
   <ul>. Inside the pros/cons cards that trailing margin reads as extra padding
   at the bottom of the box, so the box looks lopsided (more air below than
   above). Zero the vertical list margins, flex `gap` already spaces the rows,
   so top and bottom padding stay equal. */
.pley-rev-block .pley-rev-pros ul,
.pley-rev-block .pley-rev-cons ul { margin-bottom: 0 !important; }
.pley-rev-block .pley-rev-pros li,
.pley-rev-block .pley-rev-cons li { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Verdict breakdown rows are table-of-contents jump links. Each row is one
   tinted band (so label + score read together); hovering tints the whole band
   and lights the chevron so it clearly reads as clickable. */
.pley-rev-row-jump { color: #52514C; }
.pley-rev-row:hover { background: #222220; }
.pley-rev-row:hover .pley-rev-row-jump { color: #F18805; transform: translateX(2px); }

/* Each section block owns its <h2>. Tighten the gap to the card below and
   clear the sticky site header when a TOC row jumps to it. */
.pley-rev-block .pley-rev-sec-h2 {
	scroll-margin-top: 6.5rem;
	margin-bottom: 0.85rem;
}

/* Breakdown = a compact 2-column table-of-contents on desktop (halves the
   height), one column on phone. Kept in this defensive layer so the columns
   are immune to Tailwind build/cache timing. */
.pley-rev-block .pley-rev-breakdown {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.375rem;
}
@media (min-width: 640px) {
	.pley-rev-block .pley-rev-breakdown { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}

/* Review -> affiliate hub links: quiet by default, brand on hover. The colour
   is pinned at .pley-rev-block specificity (0,2,0) because the theme's editor
   stylesheet sets `.editor-styles-wrapper a { color: brand }` (0,1,1), which
   otherwise beats the `text-gray-light` utility and makes every one of these
   render orange in the editor but grey on the site. */
.pley-rev-block .pley-rev-compare-link { color: #949494; transition: color 0.2s ease; }
.pley-rev-block .pley-rev-compare-link:hover,
.pley-rev-block .pley-rev-compare-link:focus-visible { color: #F18805; }
.pley-rev-compare-link:hover svg { transform: translateX(2px); }

/* Dot separator between the hub links, so a run of them reads as a list
   without needing an arrow on each one. */
.pley-rev-block .pley-rev-compare-list > li + li::before {
	content: "\00B7";
	color: #52514C;
	margin-right: 0.5rem;
}

/* Kill the theme's block margins on this row. `ul { margin-bottom: 1rem }` and
   `li { margin-bottom: 0.5rem }` both outrank the m-0 utility (0,1,1 beats
   0,1,0), and on a one-line flex row that 24px lands as pure dead height under
   the links. Same for the score list directly above, whose trailing margin
   padded out the gap over the divider. */
.pley-rev-block .pley-rev-compare-list,
.pley-rev-block .pley-rev-compare-list > li,
.pley-rev-block .pley-rev-breakdown > li {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/* Bottom only on the score list: its mt-5 top margin is intentional. */
.pley-rev-block .pley-rev-breakdown {
	margin-bottom: 0 !important;
}

/* Pros / cons — subtle green and red wash so the two columns read instantly.
   Kept low-saturation to stay on-brand (minimalist, professional). */
.pley-rev-pros {
	background: rgba(78, 186, 0, 0.07);
	border: 1px solid rgba(78, 186, 0, 0.32);
}
.pley-rev-cons {
	background: rgba(229, 72, 77, 0.07);
	border: 1px solid rgba(229, 72, 77, 0.32);
}
.pley-rev-pc-badge--pro { background: rgba(78, 186, 0, 0.16); color: #4EBA00; }
.pley-rev-pc-badge--con { background: rgba(229, 72, 77, 0.16); color: #E5484D; }
.pley-rev-tick--pro { color: #4EBA00; }
.pley-rev-tick--con { color: #E5484D; }

/* Cards are static, no hover lift, so the section reads as one cohesive set
   of surfaces rather than individually reactive boxes. */
.pley-rev-iconcard-link:hover { text-decoration: underline; }

/* Icon list = a PLAIN list of icon-chip + text rows, no card frame, no
   dividers - just spacing. Two columns on desktop, one on phone. Kept in this
   defensive layer (not Tailwind grid utilities) so the layout is immune to the
   Tailwind build/cache timing that bit us before. Scales to any count. */
.pley-rev-block .pley-rev-iconlist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem 2rem;
}
@media (min-width: 640px) {
	.pley-rev-block .pley-rev-iconlist-grid { grid-template-columns: 1fr 1fr; }
}
/* The theme's prose margins on the <li> and the description <p> survive the
   m-0 utility and open uneven gaps; the grid `gap` is the only spacing. */
.pley-rev-block .pley-rev-iconlist-grid > li {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.pley-rev-block .pley-rev-iconrow p { margin: 0 !important; }

/* The <ul> keeps a theme-prose top margin (it beats the m-0 utility). Kill it
   so the flex gap on the score card is the only space above the feature list. */
.pley-rev-block .pley-rev-cat-cards .pley-rev-iconlist-grid { margin: 0 !important; }

/* FAQ accordion — ONE cohesive card of stacked questions divided by
   hairlines (the same language as the icon list), not a pile of separate
   bordered boxes. Native <details> with a rotating chevron and a hover tint
   on the question row. */
.pley-rev-faq-item + .pley-rev-faq-item { border-top: 1px solid #2D2D2A; }
.pley-rev-faq-item > summary { list-style: none; transition: background-color 0.15s ease; }
.pley-rev-faq-item > summary::-webkit-details-marker { display: none; }
.pley-rev-faq-item > summary:hover { background: rgba(255, 255, 255, 0.02); }
.pley-rev-faq-chevron { transition: transform 0.2s ease, color 0.2s ease; }
.pley-rev-faq-item[open] > summary .pley-rev-faq-chevron { transform: rotate(180deg); }

/* An open question and its answer are ONE thing, so they share ONE surface.
   Tinting just the summary (which is all hover did) split the open item into
   two shades and made the answer read as loose text under the card rather
   than as part of it. Same nested-row tone the score rows use. */
.pley-rev-block .pley-rev-faq-item[open] { background: #1D1D1B; }
/* ...and the hover tint must not stack a second shade on top of it. */
.pley-rev-block .pley-rev-faq-item[open] > summary:hover { background: transparent; }
.pley-rev-block .pley-rev-faq-a { padding-top: 2px; }

/* Five brand chevrons stacked under a brand heading is more orange than the
   section needs, and it spends the accent on the four rows that are NOT the
   one being read. Keep them quiet until they matter. */
.pley-rev-block .pley-rev-faq-chevron { color: #52514C; }
.pley-rev-block .pley-rev-faq-item > summary:hover .pley-rev-faq-chevron { color: #7E7D77; }
.pley-rev-block .pley-rev-faq-item[open] > summary .pley-rev-faq-chevron { color: #F18805; }

/* The theme appends its in-article ad straight after the last block, so the
   card had a banner butted against its bottom edge. */
.pley-rev-block .pley-rev-faq { margin-bottom: 1.5rem; }

/* Keyboard focus — a clear brand ring on every interactive element. The
   outline follows each element's own border-radius, so the pill CTA keeps its
   pill shape and the rows keep their rounded corners. */
.pley-rev-block .pley-rev-row:focus-visible,
.pley-rev-block .pley-rev-cta:focus-visible,
.pley-rev-block .pley-rev-compare-link:focus-visible,
.pley-rev-block .pley-rev-iconcard-link:focus-visible,
.pley-rev-block .pley-rev-faq-item > summary:focus-visible,
.pley-rev-block .pley-rev-prose a:focus-visible {
	outline: 2px solid #F18805;
	outline-offset: 2px;
}
/* Section headings receive programmatic focus after a TOC jump (tabindex=-1),
   purely to move the reading position - no ring needed there. */
.pley-rev-block .pley-rev-sec-h2:focus { outline: none; }

/* Respect reduced-motion: keep state changes (the FAQ chevron still flips,
   colors still change) but drop the animated part. */
@media (prefers-reduced-motion: reduce) {
	.pley-rev-block .pley-rev-row,
	.pley-rev-block .pley-rev-row-jump,
	.pley-rev-block .pley-rev-compare-link,
	.pley-rev-block .pley-rev-compare-link svg,
	.pley-rev-block .pley-rev-faq-chevron,
	.pley-rev-block .pley-rev-faq-item > summary,
	.pley-rev-block .pley-rev-cta,
	.pley-rev-block .pley-rev-cta svg {
		transition: none !important;
	}
	.pley-rev-block .pley-rev-row:hover .pley-rev-row-jump,
	.pley-rev-block .pley-rev-compare-link:hover svg,
	.pley-rev-block .pley-rev-cta:hover svg {
		transform: none !important;
	}
}

/* Editor iframe: the .lazyload blur-up never gets its JS trigger in the
   editor, so screenshots would stay permanently blurred. Unblur inside our
   blocks only. */
.pley-rev-block .lazyload,
.pley-rev-block .lazyloading { filter: none; }