/*
 * KDLX content patterns.
 *
 * Styles the kdlx-* classes used by the theme block patterns
 * in /patterns/. Loaded on the front end and in the block
 * editor (see inc/blog-features/patterns-setup.php).
 */

/* Rank badge shared by toplist items and guide steps. */
.kdlx-toplist-rank,
.kdlx-guide-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	border-radius: 50%;
	background: #1e73be;
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.kdlx-toplist-item,
.kdlx-guide-step,
.kdlx-commercial-cta,
.kdlx-review-box {
	padding: 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: #fff;
}

.kdlx-toplist-item .wp-block-heading,
.kdlx-guide-step .wp-block-heading {
	margin-top: 0;
}

/* Commercial CTA price/badge. */
.kdlx-commercial-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 4px;
	background: #f5a623;
	color: #fff;
	font-weight: 700;
}

/* Information callouts: soft tinted boxes with a leading icon. */
.kdlx-callout {
	display: flex;
	gap: 0.75em;
	padding: 1em 1.25em;
	border-radius: 10px;
	background: #eef3fd;
	color: #2c3e50;
	font-size: 0.95rem;
}

.kdlx-callout-iconwrap {
	flex: 0 0 auto;
	line-height: 0;
	margin-top: 0.15em;
}

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

.kdlx-callout-title {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35em;
}

.kdlx-callout.kdlx-callout-info {
	background: #eef3fd;
	color: #2c3e50;
}

.kdlx-callout.kdlx-callout-note {
	background: #f4f5f6;
	color: #3a3f45;
}

.kdlx-callout.kdlx-callout-tip {
	background: #e9f6ec;
	color: #2b5233;
}

.kdlx-callout.kdlx-callout-warning {
	background: #fdf4dd;
	color: #5c4a1c;
}

.kdlx-callout.kdlx-callout-important {
	background: #f2edfa;
	color: #453a63;
}

.kdlx-callout.kdlx-callout-links {
	background: #eaf1fb;
	color: #2c3e50;
}

.kdlx-callout .kdlx-callout-content > *:first-child {
	margin-top: 0;
}

.kdlx-callout .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.35em;
	font-size: 1rem;
}

.kdlx-callout ul,
.kdlx-callout ol {
	margin: 0.5em 0;
	padding-left: 1.4em;
}

.kdlx-callout li + li {
	margin-top: 0.35em;
}

.kdlx-callout code {
	background: rgba(255, 255, 255, 0.7);
	padding: 0.1em 0.35em;
	border-radius: 4px;
	font-size: 0.92em;
}

.kdlx-callout p:last-of-type,
.kdlx-callout .kdlx-callout-content > :last-child,
.kdlx-callout > :last-child {
	margin-bottom: 0;
}

/* Numbered steps timeline — [kdlx_steps] > [kdlx_step]. */
.kdlx-steps {
	list-style: none;
	counter-reset: kdlx-step;
	margin: 1.5em 0;
	padding: 0 0 0 2.5em;
}

.kdlx-step {
	position: relative;
	counter-increment: kdlx-step;
	padding-bottom: 1.5em;
}

.kdlx-step:last-child {
	padding-bottom: 0;
}

/* Number bubble. */
.kdlx-step::before {
	content: counter(kdlx-step);
	position: absolute;
	left: -2.5em;
	top: -0.1em;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: #e7ebf0;
	color: #3a4654;
	font-size: 0.85em;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Connecting line between steps. */
.kdlx-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(-2.5em + 0.85em);
	top: 1.8em;
	bottom: -0.2em;
	width: 1.5px;
	background: #e3e6ea;
}

.kdlx-step-title {
	display: block;
	font-weight: 700;
	margin-bottom: 0.3em;
}

.kdlx-step-content > :first-child {
	margin-top: 0;
}

.kdlx-step-content > :last-child {
	margin-bottom: 0;
}

/* Review box rating + verdict. */
.kdlx-review-rating {
	font-size: 1.5rem;
	color: #f5a623;
	letter-spacing: 0.1em;
}

.kdlx-review-verdict {
	font-weight: 600;
}

.kdlx-review-pros .wp-block-heading,
.kdlx-review-cons .wp-block-heading {
	margin-top: 0;
	font-size: 1rem;
}

/* Key takeaways: accent-tinted summary box. */
.kdlx-takeaways {
	padding: 1em 1.25em;
	border-radius: 8px;
	background: #eef4fa;
}

.kdlx-takeaways .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.35em;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kdlx-takeaways > :last-child {
	margin-bottom: 0;
}

/* Checklist: green tick markers instead of bullets. */
.kdlx-checklist {
	list-style: none;
	padding-left: 0;
}

.kdlx-checklist li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.35em;
}

.kdlx-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #4dab4f;
	font-weight: 700;
}

/* FAQ: bordered Q&A stack. */
.kdlx-faq .kdlx-faq-item,
.kdlx-faq-item {
	padding: 0.75em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.kdlx-faq .kdlx-faq-item .wp-block-heading,
.kdlx-faq-item .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.35em;
	font-size: 1.05rem;
}

.kdlx-faq-item > :last-child {
	margin-bottom: 0;
}

/* Comparison table: accent header, clean row borders. */
.kdlx-compare {
	overflow-x: auto;
}

.kdlx-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.kdlx-compare th,
.kdlx-compare td {
	padding: 0.6em 0.8em;
	border: 1px solid rgba(0, 0, 0, 0.08);
	text-align: left;
}

.kdlx-compare thead th {
	background: #1e73be;
	border-color: #1e73be;
	color: #fff;
}

.kdlx-compare tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.03);
}

/* Deal / coupon box: dashed border + code chip. */
.kdlx-deal {
	padding: 1.5em;
	border: 2px dashed #f5a623;
	border-radius: 8px;
	background: #fdf4e3;
}

.kdlx-deal .wp-block-heading {
	margin-top: 0;
}

.kdlx-deal-code {
	display: inline-block;
	padding: 0.35em 1em;
	border: 2px dashed #f5a623;
	border-radius: 4px;
	background: #fff;
	font-family: monospace;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}