/* RevQuiz — advertising blocks (CTA buttons + banners) */

/* ------------------------------------------------------------------ *
 * CTA buttons. Colors/border come from CSS variables set per site in
 * Quizzes → Publicidad; text + URL are stored per post.
 * ------------------------------------------------------------------ */
.revquiz-cta-wrap {
	margin: 1.5rem 0;
	text-align: center;
}

.revquiz-cta {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.875rem 1.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-style: solid;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.revquiz-cta:hover {
	text-decoration: none;
}

.revquiz-cta:active {
	transform: scale(0.97);
}

/* Variant 1 */
.revquiz-cta--v1 {
	background-color: var(--revquiz-cta1-bg);
	color: var(--revquiz-cta1-text);
	border-color: var(--revquiz-cta1-border);
	border-width: var(--revquiz-cta1-bw);
	border-radius: var(--revquiz-cta1-radius);
}
.revquiz-cta--v1:hover,
.revquiz-cta--v1:focus {
	background-color: var(--revquiz-cta1-bg-hover);
	color: var(--revquiz-cta1-text-hover);
	border-color: var(--revquiz-cta1-border-hover);
}
.revquiz-cta--v1:focus-visible {
	outline: 3px solid var(--revquiz-cta1-border-hover);
	outline-offset: 3px;
}

/* Variant 2 */
.revquiz-cta--v2 {
	background-color: var(--revquiz-cta2-bg);
	color: var(--revquiz-cta2-text);
	border-color: var(--revquiz-cta2-border);
	border-width: var(--revquiz-cta2-bw);
	border-radius: var(--revquiz-cta2-radius);
}
.revquiz-cta--v2:hover,
.revquiz-cta--v2:focus {
	background-color: var(--revquiz-cta2-bg-hover);
	color: var(--revquiz-cta2-text-hover);
	border-color: var(--revquiz-cta2-border-hover);
}
.revquiz-cta--v2:focus-visible {
	outline: 3px solid var(--revquiz-cta2-border-hover);
	outline-offset: 3px;
}

/* Variant 3 */
.revquiz-cta--v3 {
	background-color: var(--revquiz-cta3-bg);
	color: var(--revquiz-cta3-text);
	border-color: var(--revquiz-cta3-border);
	border-width: var(--revquiz-cta3-bw);
	border-radius: var(--revquiz-cta3-radius);
}
.revquiz-cta--v3:hover,
.revquiz-cta--v3:focus {
	background-color: var(--revquiz-cta3-bg-hover);
	color: var(--revquiz-cta3-text-hover);
	border-color: var(--revquiz-cta3-border-hover);
}
.revquiz-cta--v3:focus-visible {
	outline: 3px solid var(--revquiz-cta3-border-hover);
	outline-offset: 3px;
}

/* Variant 4 */
.revquiz-cta--v4 {
	background-color: var(--revquiz-cta4-bg);
	color: var(--revquiz-cta4-text);
	border-color: var(--revquiz-cta4-border);
	border-width: var(--revquiz-cta4-bw);
	border-radius: var(--revquiz-cta4-radius);
}
.revquiz-cta--v4:hover,
.revquiz-cta--v4:focus {
	background-color: var(--revquiz-cta4-bg-hover);
	color: var(--revquiz-cta4-text-hover);
	border-color: var(--revquiz-cta4-border-hover);
}
.revquiz-cta--v4:focus-visible {
	outline: 3px solid var(--revquiz-cta4-border-hover);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.revquiz-cta {
		display: block;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Banner wrapper (front-end).
 * ------------------------------------------------------------------ */
.revquiz-banner {
	margin: 1.5rem 0;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Editor-only placeholder for the synced banner block.
 * ------------------------------------------------------------------ */
.revquiz-admin-placeholder {
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	background: #f6f7f7;
	padding: 16px 18px;
	color: #1d2327;
	text-align: center;
}

.revquiz-admin-placeholder strong {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
}

.revquiz-admin-placeholder__note {
	margin: 0;
	color: #646970;
	font-size: 12px;
}