/**
 * Blog The Tech — Classic Editor Tools
 *
 * Shared styles for markup inserted by the "BTT Tools" editor button.
 * Loaded both as an editor style (so it looks right inside the Classic
 * Editor's TinyMCE iframe) and as a front-end stylesheet, so what you see
 * while writing matches what visitors see.
 */

/* ── Inline button ─────────────────────────────────────────────────── */

.btt-inline-btn {
	display: inline-block;
	vertical-align: middle;
	margin: 0 2px;
	padding: 0.45em 1.1em;
	background: #2271b1;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.4;
	text-decoration: none !important;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.btt-inline-btn:hover,
.btt-inline-btn:focus {
	background: #135e96;
	color: #fff !important;
	transform: translateY(-1px);
}

/* ── Callout box ───────────────────────────────────────────────────── */

.btt-callout {
	margin: 1.25em 0;
	padding: 1em 1.25em;
	border-left: 4px solid #2271b1;
	background: #f0f6fc;
	border-radius: 4px;
}
.btt-callout p:first-child { margin-top: 0; }
.btt-callout p:last-child { margin-bottom: 0; }
.btt-callout--info    { border-left-color: #2271b1; background: #f0f6fc; }
.btt-callout--warning { border-left-color: #dba617; background: #fcf6e8; }
.btt-callout--success { border-left-color: #2a9d58; background: #eef8f1; }
.btt-callout--danger  { border-left-color: #cc1818; background: #fbeaea; }

/* ── Copy-code block ───────────────────────────────────────────────── */

.btt-code-copy {
	position: relative;
	margin: 1.25em 0;
}
.btt-code-copy pre {
	margin: 0;
	padding: 1em 5.5em 1em 1.25em;
	background: #1e1e1e;
	color: #e5e5e5;
	border-radius: 6px;
	overflow-x: auto;
	font-size: 0.9em;
	line-height: 1.5;
}
.btt-code-copy code {
	background: none;
	color: inherit;
	padding: 0;
	font-family: Consolas, Monaco, "Courier New", monospace;
}
.btt-code-copy__btn {
	position: absolute;
	top: 0.6em;
	right: 0.6em;
	padding: 0.35em 0.8em;
	background: #333;
	color: #fff;
	border: 1px solid #555;
	border-radius: 4px;
	font-size: 0.8em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.btt-code-copy__btn:hover { background: #444; }
.btt-code-copy__btn--copied { background: #2a9d58; border-color: #2a9d58; }

/* ── Table of contents ─────────────────────────────────────────────── */

.btt-toc {
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}
.btt-toc__title { margin: 0 0 0.5em; font-weight: 700; }
.btt-toc__list { margin: 0; padding-left: 1.25em; }
.btt-toc__item { margin: 0.25em 0; }
.btt-toc__item--h3 { margin-left: 1em; }
.btt-toc__item--h4 { margin-left: 2em; }
.btt-toc__list a { text-decoration: none; }
.btt-toc__list a:hover { text-decoration: underline; }

/* ── Collapsible section ───────────────────────────────────────────── */

.btt-collapsible {
	margin: 1.25em 0;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	overflow: hidden;
}
.btt-collapsible summary {
	cursor: pointer;
	padding: 0.85em 2.2em 0.85em 1.1em;
	font-weight: 600;
	background: #f6f7f7;
	list-style: none;
	position: relative;
}
.btt-collapsible summary::-webkit-details-marker { display: none; }
.btt-collapsible summary::after {
	content: "+";
	position: absolute;
	right: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
}
.btt-collapsible[open] summary::after {
	content: "\2212"; /* minus sign */
}
.btt-collapsible__content {
	padding: 1em 1.1em;
	border-top: 1px solid #dcdcde;
}
.btt-collapsible__content p:last-child { margin-bottom: 0; }

/* ── Call-to-action ────────────────────────────────────────────────── */

.btt-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	background: #f0f6fc;
	border: 1px solid #c5dcf0;
	border-radius: 8px;
}
.btt-cta__body { flex: 1 1 260px; min-width: 0; }
.btt-cta__heading {
	margin: 0 0 0.25em;
	font-size: 1.15em;
	font-weight: 700;
}
.btt-cta__desc {
	margin: 0;
	color: #3c434a;
}
.btt-cta__btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.7em 1.5em;
	background: #2271b1;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none !important;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.btt-cta__btn:hover,
.btt-cta__btn:focus {
	background: #135e96;
	color: #fff !important;
	transform: translateY(-1px);
}
@media ( max-width: 480px ) {
	.btt-cta { flex-direction: column; align-items: stretch; text-align: center; }
	.btt-cta__btn { text-align: center; }
}

/* ── Table ─────────────────────────────────────────────────────────── */

.btt-table-wrap {
	margin: 1.25em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.btt-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}
.btt-table th,
.btt-table td {
	padding: 0.6em 0.9em;
	border: 1px solid #dcdcde;
	text-align: left;
	vertical-align: top;
}
.btt-table thead th {
	background: #f0f6fc;
	font-weight: 700;
}
.btt-table tbody tr:nth-child(even) {
	background: #f9f9f9;
}

/* ── Notice boxes (author / disclaimer / affiliate) ───────────────── */

.btt-disclosure {
	margin: 1.25em 0;
	padding: 0.85em 1.1em;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #f6f7f7;
	font-size: 0.92em;
	color: #3c434a;
}
.btt-disclosure p { margin: 0; }
.btt-disclosure--disclaimer {
	border-color: #f0d58c;
	background: #fcf6e8;
}
.btt-disclosure--affiliate {
	border-color: #cfe0ce;
	background: #eef8f1;
}

/* ── Review Tools (BTT only) ──────────────────────────────────────── */

/* Pros & Cons */
.btt-proscons {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 1.5em 0;
}
.btt-proscons__col {
	flex: 1 1 240px;
	min-width: 0;
	padding: 1em 1.25em;
	border-radius: 8px;
	border: 1px solid #dcdcde;
}
.btt-proscons__col--pros {
	background: #eef8f1;
	border-color: #cfe6d6;
}
.btt-proscons__col--cons {
	background: #fbeaea;
	border-color: #f0c9c9;
}
.btt-proscons__heading {
	margin: 0 0 0.5em;
	font-weight: 700;
	font-size: 1.05em;
}
.btt-proscons__col--pros .btt-proscons__heading { color: #1c7c3f; }
.btt-proscons__col--cons .btt-proscons__heading { color: #c02f2f; }
.btt-proscons__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.btt-proscons__list li {
	position: relative;
	margin: 0 0 0.5em;
	padding-left: 1.6em;
	line-height: 1.5;
}
.btt-proscons__list li:last-child { margin-bottom: 0; }
.btt-proscons__col--pros .btt-proscons__list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #1c7c3f;
	font-weight: 700;
}
.btt-proscons__col--cons .btt-proscons__list li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	color: #c02f2f;
	font-weight: 700;
}
@media ( max-width: 480px ) {
	.btt-proscons { flex-direction: column; }
}

/* Rating / score badge */
.btt-rating {
	display: flex;
	align-items: center;
	gap: 1.1em;
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}
.btt-rating__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	justify-content: center;
	min-width: 4.2em;
	padding: 0.4em 0.6em;
	background: #1d2327;
	color: #fff;
	font-size: 1.6em;
	font-weight: 800;
	border-radius: 8px;
	line-height: 1;
}
.btt-rating__max {
	font-size: 0.5em;
	font-weight: 600;
	opacity: 0.75;
	margin-left: 0.1em;
}
.btt-rating__body { flex: 1 1 auto; min-width: 0; }
.btt-rating__label {
	margin: 0 0 0.4em;
	font-weight: 700;
}
.btt-rating__bar {
	height: 8px;
	background: #e2e4e7;
	border-radius: 4px;
	overflow: hidden;
}
.btt-rating__bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #2271b1, #1c7c3f);
	border-radius: 4px;
}

/* "Our Verdict" box */
.btt-verdict {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	background: #f5f0fb;
	border: 1px solid #ddc9f2;
	border-left: 4px solid #7b3fb8;
	border-radius: 6px;
}
.btt-verdict__label {
	margin: 0 0 0.5em;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.82em;
	letter-spacing: 0.04em;
	color: #7b3fb8;
}
.btt-verdict__body p:first-child { margin-top: 0; }
.btt-verdict__body p:last-child { margin-bottom: 0; }

/* Quick Take / TL;DR */
.btt-quicktake {
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #eef3fb;
	border: 1px solid #c9d9f0;
	border-radius: 6px;
}
.btt-quicktake__label {
	margin: 0 0 0.4em;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.82em;
	letter-spacing: 0.04em;
	color: #35548f;
}
.btt-quicktake__text {
	margin: 0;
	line-height: 1.6;
}

/* Checklist */
.btt-checklist {
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}
.btt-checklist__heading {
	margin: 0 0 0.6em;
	font-weight: 700;
	font-size: 1.05em;
}
/* !important throughout this list block is deliberate: the theme's own
   article CSS (article-with-sidebar.css / full-width-article.css) styles
   every <ul>/<li> inside post content with its own custom bullet marker,
   and it was winning the cascade over a plain .btt-checklist__list rule —
   the tell was the small blue triangle bullet showing instead of the
   checkmark tile. Forcing it here guarantees this component always looks
   the same regardless of what the surrounding article CSS does to lists. */
.btt-checklist__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
}
.btt-checklist__list li {
	display: flex !important;
	align-items: flex-start;
	gap: 0.65em;
	margin: 0 0 0.55em !important;
	padding: 0 !important;
	line-height: 1.5;
	list-style: none !important;
}
.btt-checklist__list li::marker { content: none; }
.btt-checklist__list li:last-child { margin-bottom: 0 !important; }
/* The tick is drawn with plain CSS borders (classic rotated-box checkmark)
   rather than a Unicode glyph in `content` (font-dependent — this is what
   rendered as an empty block last time) or an inline <svg> in the actual
   post content (this theme's the_content pipeline round-trips post HTML
   through PHP's DOMDocument for its mobile-table-card feature, which
   silently dropped the <svg> on save/render). A CSS-only shape on an
   empty <span> can't be stripped or mangled by either of those. */
.btt-checklist__icon {
	position: relative;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.18em;
	background: #1c7c3f;
	border-radius: 4px;
}
.btt-checklist__icon::after {
	content: "";
	position: absolute;
	left: 0.36em;
	top: 0.2em;
	width: 0.3em;
	height: 0.56em;
	border: solid #fff;
	border-width: 0 0.15em 0.15em 0;
	transform: rotate(45deg);
}
.btt-checklist__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Buying guide / price box */
.btt-buybox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #f0f6fc;
	border: 1px solid #c5dcf0;
	border-radius: 8px;
}
.btt-buybox__info { flex: 1 1 200px; min-width: 0; }
.btt-buybox__store {
	margin: 0 0 0.2em;
	font-weight: 700;
}
.btt-buybox__price {
	margin: 0;
	font-size: 1.15em;
	font-weight: 800;
	color: #1c7c3f;
}
.btt-buybox__btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.7em 1.5em;
	background: #2271b1;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none !important;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.btt-buybox__btn:hover,
.btt-buybox__btn:focus {
	background: #135e96;
	color: #fff !important;
	transform: translateY(-1px);
}
@media ( max-width: 480px ) {
	.btt-buybox { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── Anchor offset ─────────────────────────────────────────────────── */

/* Keeps a jumped-to heading from landing flush under a sticky header. */
h2[id], h3[id], h4[id] {
	scroll-margin-top: 100px;
}