/* ============================================================
   WinningPC — editor block styles & patterns
   Loaded on all singulars + in the block editor.

   - Answer box / Methodology  -> Rehub Info box variations
       Quick Answer:  type="answer"      -> .wpsm_box.answer_type
       How We Verify: type="methodology" -> .wpsm_box.methodology_type
       Legacy .is-style-* selectors stay for old content.
   - Trust badges / Safety grid → block patterns (core Group/Columns)
   ============================================================ */

/* ---------- Answer box ---------- */
.wpsm_box.answer_type,
.wpsm_box.is-style-wpc-answer,
.is-style-wpc-answer .wpsm_box {
	background: rgba(255, 77, 23, .06) !important;
	border: 1px solid rgba(255, 77, 23, .28) !important;
	border-radius: 12px;
	padding: 16px 18px 14px !important;
	font-size: 15px;
	line-height: 1.62;
	color: #16181d;
}
.wpsm_box.answer_type::before,
.wpsm_box.is-style-wpc-answer::before,
.is-style-wpc-answer .wpsm_box::before {
	content: "Quick answer";
	display: block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #c5360b;
	margin-bottom: 7px;
}
.wpsm_box.answer_type > i,
.wpsm_box.is-style-wpc-answer > i,
.is-style-wpc-answer .wpsm_box > i {
	display: none !important;
}
.wpsm_box.answer_type > div,
.wpsm_box.is-style-wpc-answer > div,
.is-style-wpc-answer .wpsm_box > div {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}
.wpsm_box.answer_type b,
.wpsm_box.answer_type strong,
.wpsm_box.is-style-wpc-answer b,
.wpsm_box.is-style-wpc-answer strong,
.is-style-wpc-answer .wpsm_box b,
.is-style-wpc-answer .wpsm_box strong {
	color: #16181d;
}

/* ---------- Methodology ("How we verify") ---------- */
.wpsm_box.methodology_type,
.wpsm_box.is-style-wpc-methodology,
.is-style-wpc-methodology .wpsm_box {
	background: rgba(119, 178, 29, .07) !important;
	border: 1px solid rgba(119, 178, 29, .30) !important;
	border-radius: 12px;
	padding: 13px 16px 11px !important;
	font-size: 15px;
	line-height: 1.55;
	color: #5c6270;
}
.wpsm_box.methodology_type::before,
.wpsm_box.is-style-wpc-methodology::before,
.is-style-wpc-methodology .wpsm_box::before {
	content: "How we verify";
	display: block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: #4f7d12;
	margin-bottom: 6px;
}
.wpsm_box.methodology_type > i,
.wpsm_box.is-style-wpc-methodology > i,
.is-style-wpc-methodology .wpsm_box > i {
	display: none !important;
}
.wpsm_box.methodology_type > div,
.wpsm_box.is-style-wpc-methodology > div,
.is-style-wpc-methodology .wpsm_box > div {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}
.wpsm_box.methodology_type b,
.wpsm_box.methodology_type strong,
.wpsm_box.is-style-wpc-methodology b,
.wpsm_box.is-style-wpc-methodology strong,
.is-style-wpc-methodology .wpsm_box b,
.is-style-wpc-methodology .wpsm_box strong {
	color: #16181d;
}

/* ---------- Trust badges (pattern: group + paragraphs) ---------- */
.wpc-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 6px 0 26px;
}
.wpc-trust-list p.wpc-trust-item,
p.wpc-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	font-size: 13px;
	font-weight: 600;
	color: #5c6270;
	background: #fff;
	border: 1px solid #e5e4dd;
	box-shadow: none;
	padding: 8px 13px;
	border-radius: 12px;
	line-height: 1.35;
}
p.wpc-trust-item::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: #77b21d;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
}
/* editor: paragraphs are stacked — keep chips inline for preview */
.editor-styles-wrapper .wpc-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/* ---------- Safety grid (pattern: columns 2×2) ---------- */
.wpc-safety-grid {
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 12px 0 24px;
}
.wpc-safety-grid > .wp-block-column {
	flex-basis: calc(50% - 6px) !important;
	flex-grow: 0;
	margin: 0 !important;
	border: 1px solid #e5e4dd;
	border-radius: 12px;
	padding: 14px 16px 12px 44px;
	background: #fff;
	position: relative;
}
.wpc-safety-grid > .wp-block-column::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 17px;
	width: 20px;
	height: 20px;
	background-color: #4f7d12;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>') no-repeat center / contain;
}
.wpc-safety-grid > .wp-block-column:nth-child(1)::before {
	background-color: #c5360b;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M5.7 5.7l12.6 12.6"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M5.7 5.7l12.6 12.6"/></svg>');
}
.wpc-safety-grid > .wp-block-column:nth-child(2)::before {
	background-color: #4f7d12;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>');
}
.wpc-safety-grid > .wp-block-column:nth-child(3)::before {
	background-color: #5c6270;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>');
}
.wpc-safety-grid > .wp-block-column:nth-child(4)::before {
	background-color: #4f7d12;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v6h6"/><path d="M9 12l2 2 4-4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v6h6"/><path d="M9 12l2 2 4-4"/></svg>');
}
.wpc-safety-grid p.wpc-safety-title {
	margin: 0 0 3px !important;
	font-size: 14.5px;
	color: #16181d;
}
.wpc-safety-grid p.wpc-safety-text {
	margin: 0 !important;
	font-size: 13px;
	color: #7c818c;
	line-height: 1.5;
}
@media (max-width: 620px) {
	.wpc-safety-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Disclosure (Info box style) ---------- */
.wpsm_box.is-style-wpc-disclosure,
.is-style-wpc-disclosure .wpsm_box {
	background: #f7f6f1 !important;
	border: 1px solid #e5e4dd !important;
	border-radius: 8px;
	padding: 15px 18px !important;
	font-size: 13.5px !important;
	line-height: 1.55;
	color: #5c6270;
}
.wpsm_box.is-style-wpc-disclosure > i,
.is-style-wpc-disclosure .wpsm_box > i {
	display: none !important;
}
.wpsm_box.is-style-wpc-disclosure > div,
.is-style-wpc-disclosure .wpsm_box > div {
	padding: 0 !important;
	background: none !important;
}
.wpsm_box.is-style-wpc-disclosure b,
.is-style-wpc-disclosure .wpsm_box b {
	color: #16181d;
}

/* ---------- Hero / section CTA row ---------- */
.wpc-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 26px;
}
.wpc-cta-row .wp-block-button__link,
.wpc-cta-row .wp-block-button.is-style-wpc-primary .wp-block-button__link {
	border-radius: 10px;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 22px;
}
.wpc-cta-row .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #ff4d17;
	color: #fff;
}
.wpc-cta-row .wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff;
	color: #16181d;
	border: 1px solid #e5e4dd;
	box-shadow: none;
}

/* ---------- Mini label ---------- */
.mini-label,
p.mini-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #5b6472;
	margin: 24px 0 8px !important;
	line-height: 1.35;
}

/* ---------- Key features list ---------- */
.wpc-features {
	list-style: none !important;
	margin: 10px 0 20px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.wpc-features li {
	position: relative;
	padding-left: 26px;
	line-height: 1.55;
	font-size: 15.5px;
	color: #16181d;
	list-style: none;
	margin: 0;
}
.wpc-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	background-color: #77b21d;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
}

/* ---------- Steps (ordered list, pattern) ---------- */
ol.wpc-steps {
	list-style: none !important;
	counter-reset: wpc-s;
	padding: 0 !important;
	margin: 10px 0 20px !important;
}
ol.wpc-steps li {
	position: relative;
	padding: 11px 0 11px 46px;
	border-bottom: 1px solid #e5e4dd;
	list-style: none;
	margin: 0;
	line-height: 1.55;
}
ol.wpc-steps li:last-child {
	border-bottom: none;
}
ol.wpc-steps li::before {
	counter-increment: wpc-s;
	content: counter(wpc-s);
	position: absolute;
	left: 0;
	top: 9px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ff4d17;
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

/* ---------- Tables ---------- */
.wp-block-table.wpc-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	margin: 8px 0 18px;
}
.wp-block-table.wpc-table thead {
	border-bottom: 0;
}
.wp-block-table.wpc-table table th,
.wp-block-table.wpc-table table td {
	border: 1px solid #e5e4dd;
	padding: 10px;
	text-align: left;
}
.wp-block-table.wpc-table table th {
	background: #f7f6f2;
	color: #16181d;
	font-weight: 700;
}
.wp-block-table.wpc-table table tbody tr td {
	background: #fff;
}
.wp-block-table.wpc-buying-table table tbody tr:nth-child(2) td,
.wp-block-table.wpc-compare-table table tbody tr:first-child td {
	background: color-mix(in srgb, #ff4d17 6%, #fff);
}
.wp-block-table.wpc-buying-table table tbody tr:nth-child(2) td:first-child,
.wp-block-table.wpc-compare-table table tbody tr:first-child td:first-child,
.wp-block-table.wpc-tech-table table tbody td:first-child {
	font-weight: 700;
}
.wp-block-table.wpc-tech-table table tbody td:first-child {
	width: 34%;
	background: #f7f6f2;
	color: #16181d;
}