/**
 * Codes Hunter extension banner.
 * Copy/markup ported from PGG's inlineunitvariations_9.html (V2 social-proof,
 * V5 demo-static). Only color and font-family tokens changed to match
 * Destructoid's theme; radius/shadow zeroed to match its flat design language.
 * The .chx popup mock is left in its original colors — it depicts the real
 * extension UI, not a Destructoid surface.
 */

.ch-toggle {
	width: 100%;
	margin: 16px 0;
}

.ch-toggle .wp-block-gamurs-ab-testing__custom {
	display: none;
	width: 100%;
}

.ch-unit {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: var(--bg2);
	border: 1px solid var(--border1);
	border-left: 3px solid var(--primary-red);
	border-radius: 0;
	box-shadow: none;
	padding: 12px;
	overflow: hidden;
	font-family: var(--font-family-1);
	box-sizing: border-box;
}

.ch-mark {
	flex: 0 0 auto;
	width: 55px;
	height: 55px;
	border: 1px solid var(--border1);
	border-radius: 10px;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ch-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ch-body { flex: 1 1 auto; min-width: 0; }

.ch-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-family-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--primary-red-darker);
	background: var(--primary-red-light);
	border-radius: 5px;
	padding: 7px 10px;
	margin-bottom: 12px;
}

.ch-eyebrow--faces {
	background: transparent;
	padding: 0;
	color: var(--text2);
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 12px;
	font-family: var(--font-family-1);
	font-weight: 400;
}
.ch-faces { display: flex; align-items: center; margin-right: 2px; }
.ch-faces i {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--bg2);
	margin-left: -6px;
	display: block;
}
.ch-faces i:first-child { margin-left: 0; }

.ch-title {
	font-family: var(--font-family-2);
	font-weight: 600;
	margin: 0 0 5px 0 !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: var(--text1);
}
.ch-sub {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--text2);
	max-width: 56ch;
}
.ch-sub strong {
	color: var(--text1);
	font-weight: 600;
	font-size: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
}

.ch-stats {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border1);
}
.ch-stat { display: flex; flex-direction: column; line-height: 1.2; }
.ch-stat b { font-family: var(--font-family-2); font-size: 15px; font-weight: 600; color: var(--text1); }
.ch-stat b .ch-stars { font-size: 13px; }
.ch-stat span {
	font-family: var(--font-family-2);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--text3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

.ch-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.ch-actions--inline {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	align-self: flex-start;
}
.ch-actions--inline .ch-rating { margin: 0; }

.ch-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text3);
	margin-bottom: 1px;
}
.ch-stars { color: var(--secondary-yellow1); letter-spacing: 0.5px; font-size: 12.5px; line-height: 1; }
.ch-rating b { color: var(--text2); font-weight: 600; }
.ch-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border1); flex: 0 0 auto; }

.ch-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--primary-red);
	color: var(--text-button);
	font-family: var(--font-family-2);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 12px 18px;
	border-radius: 0;
	white-space: nowrap;
	box-shadow: none;
}
.ch-btn:hover { background: var(--primary-red-darker); }
.ch-btn:focus-visible { outline: 2px solid var(--primary-red); outline-offset: 2px; }

.ch-microcopy { font-size: 11px; color: var(--text3); text-align: center; }

.ch-x {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
	align-self: flex-start;
	width: 26px;
	height: 26px;
	margin: -2px -4px 0 0;
	border-radius: 0;
	color: var(--text3);
	font-size: 17px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-base);
}
.ch-x:hover { background: var(--bg3); color: var(--text2); }
.ch-x:focus-visible { outline: 2px solid var(--primary-red); outline-offset: 1px; }

/* ---- demo-static shot (V5) ---- */
.ch-unit--demo { align-items: center; gap: 20px; padding: 18px 20px 18px 22px; }
.ch-shot {
	flex: 0 0 246px;
	width: 246px;
	height: 211px;
	overflow: hidden;
	border-radius: 0;
	box-shadow: none;
	position: relative;
}

/* Popup mock: intentionally left in its original colors — depicts the real
   extension UI, not a Destructoid surface. */
.chx {
	width: 300px;
	height: 257px;
	padding: 10px;
	transform: scale(0.82);
	transform-origin: top left;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(100% 52% at 12% -14%, rgba(255, 140, 30, 0.10), transparent 70%),
		linear-gradient(166deg, #FFFAF3 0%, #FFEDD6 22%, #FFDCB0 56%, #FFC98C 82%, #FFBE72 100%);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #2A1A08;
}
.chx-head { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.chx-logo { width: 19px; height: 19px; flex: 0 0 auto; display: block; }
.chx-name { line-height: 1.15; }
.chx-name b { display: block; font-size: 11px; font-weight: 800; letter-spacing: -0.01em; color: #2A1A08; }
.chx-name span { display: block; font-size: 7.5px; font-weight: 600; color: #6C5126; }
.chx-name span i { font-style: normal; font-weight: 800; color: #5A4320; }
.chx-icons { margin-left: auto; display: flex; gap: 5px; }
.chx-icons i { width: 15px; height: 15px; border-radius: 50%; display: block; border: 1px solid rgba(42, 26, 8, 0.14); }

.chx-field {
	margin-top: 9px;
	flex: 0 0 auto;
	height: 28px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 9px;
	background: #FFF9F0;
	border: 1px solid rgba(42, 26, 8, 0.10);
	border-radius: 8px;
}
.chx-field > svg { width: 11px; height: 11px; color: #6C5126; flex: 0 0 auto; }
.chx-typed { font-size: 10px; font-weight: 600; color: #2A1A08; white-space: pre; }
.chx-typed:empty::before { content: "Search for Roblox codes"; color: #6C5126; font-weight: 500; opacity: 0.8; }
.chx-caret { display: none; }

.chx-meta { margin-top: 9px; flex: 0 0 auto; height: 17px; display: flex; align-items: baseline; gap: 8px; }
.chx-meta b { font-size: 12.5px; font-weight: 800; letter-spacing: -0.015em; }
.chx-meta em { margin-left: auto; font-style: normal; font-size: 8px; font-weight: 800; color: #7E3D03; letter-spacing: 0.02em; }
.chx-meta .chx-found { font-size: 8.5px; font-weight: 800; color: #6C5126; display: none; }

.chx-card { margin-top: 5px; flex: 1 1 auto; position: relative; overflow: hidden; background: #FFFDF9; border: 1px solid rgba(42, 26, 8, 0.08); border-radius: 9px; }
.chx-view { position: absolute; inset: 0; }
.chx-view--games { display: none; }

.chx-row { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px; border-bottom: 1px solid rgba(42, 26, 8, 0.08); }
.chx-row:last-child { border-bottom: 0; }
.chx-row > span:first-child { min-width: 0; flex: 1 1 auto; }
.chx-row code { display: block; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 9.5px; font-weight: 800; color: #2A1A08; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chx-row small { display: block; font-size: 7.5px; font-weight: 600; color: #635340; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chx-copy { flex: 0 0 auto; width: 19px; height: 17px; border-radius: 5px; border: 1px solid rgba(42, 26, 8, 0.14); background: #FFFDF9; display: flex; align-items: center; justify-content: center; }
.chx-copy svg { width: 9px; height: 9px; color: #6C5126; }
.chx-chev { flex: 0 0 auto; width: 8px; height: 8px; color: #8A6A3C; }

.chx-toast { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #2A1A08; color: #FFE9CE; font-size: 8.5px; font-weight: 800; letter-spacing: 0.01em; transform: translateY(100%); }
.chx-toast code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; }

.chx-game { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px; border-bottom: 1px solid rgba(42, 26, 8, 0.08); }
.chx-game b { display: block; font-size: 9.5px; font-weight: 800; color: #2A1A08; }
.chx-game small { display: block; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 7.5px; color: #635340; margin-top: 1px; }
.chx-game > span { flex: 1 1 auto; min-width: 0; }

/* ---- newsletter (Problox) ---- */
.ch-unit--news {
	border-left-color: var(--primary-red);
	gap: 16px;
	padding: 16px;
}

.ch-wordmark {
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	width: 140px;
	height: 48px;
	border-radius: 0;
	background: none;
	border: none;
}
.ch-wordmark img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 130px;
	max-width: none;
	display: block;
}

.ch-done { display: none; }
.ch-unit.is-done .ch-live { display: none; }
.ch-unit.is-done .ch-done { display: block; }
.ch-unit.is-done .ch-actions--form { display: none; }

.ch-actions--form { width: 252px; }

.ch-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}
.ch-form input[type="email"] {
	background: var(--bg1);
	border: 1.5px solid var(--border1);
	border-radius: 0;
	color: var(--text1);
	font-family: var(--font-family-1);
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 10px;
	font-size: 14px;
	transition: var(--transition-base);
}
.ch-form input[type="email"]::placeholder { color: var(--text3); }
.ch-form input[type="email"]:focus {
	outline: none;
	border-color: var(--primary-red);
	box-shadow: 0 0 0 3px var(--primary-red-light);
}
.ch-form.has-error input[type="email"] {
	border-color: #d93b30;
}
.ch-form .ch-btn { padding: 12px 18px; }

.ch-error {
	display: none;
	margin: 7px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #d93b30;
	text-align: center;
}
.ch-form.has-error ~ .ch-error { display: block; }

@media (max-width: 680px) {
	.ch-unit { flex-wrap: wrap; padding: 15px; gap: 13px; }
	.ch-mark { align-self: flex-start; }
	.ch-body { flex: 1 1 200px; }
	.ch-actions { flex: 1 1 100%; }
	.ch-btn { width: 100%; padding: 13px 18px; font-size: 14px; }
	.ch-sub { font-size: 13px; }
	.ch-stats { gap: 14px; }
	.ch-x { position: absolute; top: 8px; right: 8px; margin: 0; align-self: auto; }

	.ch-unit--demo { padding: 16px 38px 16px 18px; }
	.ch-shot { width: 100%; flex: 0 0 100%; height: 235px; order: 3; }
	.chx { transform-origin: unset; margin: 0 auto; }
	.ch-unit--demo .ch-actions { order: 4; }
	.ch-actions--inline { flex-wrap: wrap; width: 100%; align-self: stretch; gap: 10px; }
	.ch-actions--inline .ch-btn { width: 100%; }
	.ch-actions--inline .ch-rating { width: 100%; justify-content: flex-start; }
}

@media (max-width: 991px) {
	.ch-unit--news .ch-title { text-align: center; }
	.ch-unit--news .ch-sub { text-align: center; }
	.ch-unit--news .ch-wordmark { margin: 0 auto; }
}