/* Content pages chrome: dark background + centered readable shell */
:root {
	--ct-bg-start: #071427;
	--ct-bg-mid: #0c1d38;
	--ct-bg-end: #132a4f;
	--ct-surface: #f6f9ff;
	--ct-text: #10213f;
	--ct-text-soft: #4c5f82;
	--ct-border: #dfe7f4;
	--ct-shadow: 0 24px 60px rgba(6, 19, 40, 0.24);
	--ct-link: #1b4d9a;
	--ct-link-hover: #0f3570;
	--ct-radius-xl: 30px;
	--ct-radius-lg: 16px;
}

body {
	background:
		radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.08), transparent 42%),
		radial-gradient(circle at 85% 0%, rgba(240, 139, 29, 0.2), transparent 38%),
		linear-gradient(160deg, var(--ct-bg-start) 0%, var(--ct-bg-mid) 45%, var(--ct-bg-end) 100%);
	min-height: 100vh;
}

#container > header,
#container > main,
#container > footer {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	background: var(--ct-surface);
}

#container > header {
	margin-top: 30px;
	border-radius: var(--ct-radius-xl) var(--ct-radius-xl) 0 0;
	box-shadow: var(--ct-shadow);
	padding-left: 8px;
	padding-right: 8px;
}

#container > main {
	padding: 14px 12px 28px;
}

#container > footer {
	border-radius: 0 0 var(--ct-radius-xl) var(--ct-radius-xl);
	box-shadow: var(--ct-shadow);
	margin-bottom: 32px;
}

.ct-shell {
	max-width: 1160px;
	margin: 30px auto;
	background: var(--ct-surface);
	border-radius: var(--ct-radius-xl);
	box-shadow: var(--ct-shadow);
	padding: 22px;
}

main h1,
main h2,
main h3,
main h4,
main h5 {
	color: var(--ct-text);
	line-height: 1.2;
}

main p,
main li,
main .text-muted,
main .breadcrumb-item {
	color: var(--ct-text-soft);
}

main a {
	color: var(--ct-link);
	text-decoration: none;
}

main a:hover {
	color: var(--ct-link-hover);
	text-decoration: underline;
}

main .breadcrumb {
	background: #ffffff;
	border: 1px solid var(--ct-border);
	border-radius: 999px;
	padding: 10px 16px;
}

main .img-thumbnail {
	border-radius: var(--ct-radius-lg);
	border-color: var(--ct-border);
}

main .btn {
	border-radius: 999px;
}

main #content > .mb-3,
main .ct-card {
	background: #ffffff;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius-lg);
	padding: 18px;
	box-shadow: 0 8px 20px rgba(13, 33, 67, 0.06);
}

main .row {
	row-gap: 16px;
}

@media (max-width: 991px) {
	#container > header {
		margin-top: 16px;
		border-radius: 20px 20px 0 0;
	}

	#container > footer {
		border-radius: 0 0 20px 20px;
		margin-bottom: 18px;
	}
}

@media (max-width: 767px) {
	#container > main {
		padding-left: 6px;
		padding-right: 6px;
	}

	main .row {
		display: block;
	}

	main .row > [class*='col-'] {
		width: 100%;
		max-width: 100%;
	}
}

/* Compact language selector used in content header only */
.ct-lang {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.ct-lang .dropdown-toggle {
	height: 34px;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	line-height: 1;
	border-radius: 999px;
}

.ct-lang .dropdown-toggle::after {
	margin-left: 2px;
}

.ct-lang img,
.ct-lang .img-fluid {
	max-height: 18px;
	width: auto;
	vertical-align: middle;
}

.ct-lang .dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: auto;
	z-index: 1100;
	min-width: 150px;
	margin: 0;
	padding: 8px;
	background: #ffffff;
	border: 1px solid #dfe7f4;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(6, 19, 40, 0.16);
}

.ct-lang .dropdown-item,
.ct-lang .dropdown-menu button,
.ct-lang .dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 8px;
	border-radius: 8px;
	white-space: nowrap;
}

.ct-lang .dropdown-item:hover,
.ct-lang .dropdown-menu button:hover,
.ct-lang .dropdown-menu a:hover {
	background: #f3f7ff;
}

.ct-lang:hover .dropdown-menu,
.ct-lang:focus-within .dropdown-menu {
	display: block;
}

/* --- Language dropdown UX fix (content header only) --- */
.ct-lang .dropdown-menu {
	margin-top: 0 !important;          /* removes the tiny hover gap */
	top: 100% !important;
	transform: none !important;
}

.ct-lang .dropdown:hover > .dropdown-menu,
.ct-lang .dropdown-menu:hover {
	display: block;
}

.ct-lang .dropdown-toggle {
	padding-bottom: 6px;               /* extends hover area under the icon */
}

/* ===== Blog Header (Landing-like) ===== */
#container > header.lp-nav.lp-nav--outside,
.lp-nav.lp-nav--outside {
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 12px 24px;
	background: rgba(10, 16, 26, 0.55);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lp-nav.lp-nav--outside .lp-nav-inner {
	max-width: 1350px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lp-logo {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: #fff;
	text-decoration: none;
}

.lp-logo .lp-logo-btc { color: #ffffff; padding-right: 1px; }
.lp-logo .lp-logo-style { color: #f7931a; }

.lp-nav.lp-nav--outside .lp-menu {
	display: flex;
	align-items: center;
	gap: 18px;
}

.lp-nav.lp-nav--outside .lp-menu a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.lp-nav.lp-nav--outside .lp-menu a:hover {
	color: #fff;
}

.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.lp-btn:hover { transform: translateY(-1px); }

.lp-btn-primary {
	background: #f08b1d;
	color: #fff !important;
}

.lp-btn-primary:hover { background: #d97706; }

.lp-lang {
	position: relative;
	display: inline-flex;
	align-items: center;
	z-index: 20;
}

.lp-lang .dropdown-toggle {
	height: 34px;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	line-height: 1;
}

.lp-lang img,
.lp-lang .img-fluid {
	max-height: 18px;
	width: auto;
	vertical-align: middle;
}

.lp-lang .dropdown-menu {
	min-width: 160px;
	margin: 0;
	padding: 8px;
	background: #ffffff;
	border: 1px solid #dfe7f4;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(6, 19, 40, 0.16);
}

.lp-lang .dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 8px;
	border-radius: 8px;
	white-space: nowrap;
}

.lp-lang .dropdown-item:hover {
	background: #f3f7ff;
}

.lp-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255,255,255,0.22);
	background: rgba(255,255,255,0.08);
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
}

.lp-nav-toggle__bar {
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 999px;
	display: block;
}

@media (max-width: 992px) {
	.lp-nav.lp-nav--outside .lp-nav-inner {
		flex-wrap: wrap;
		align-items: center;
	}

	.lp-nav-toggle {
		display: inline-flex;
	}

	.lp-nav .lp-menu {
		display: none !important;
		width: 100%;
		margin-top: 10px;
		padding: 12px;
		border: 1px solid rgba(255,255,255,0.12);
		border-radius: 12px;
		background: rgba(7, 14, 26, 0.92);
		flex-direction: column;
		align-items: stretch;
	}

	.lp-nav.is-open .lp-menu {
		display: flex !important;
		gap: 10px;
	}
}

/* ===== Blog Ambient Background (outside white content card only) ===== */
body {
	background:
		radial-gradient(1200px 600px at 50% 0%, rgba(247,147,26,0.10), rgba(0,0,0,0) 60%),
		linear-gradient(180deg, #0b1420 0%, #0f2238 100%);
}

/* Keep article/cards white; remove the light grey page slab around them */
#container > main {
	background: transparent;
}

/* ===== BLOG-ONLY REFINEMENTS ===== */
body.is-blog .lp-nav.lp-nav--outside .lp-nav-inner {
	gap: 20px;
}

body.is-blog .lp-header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

body.is-blog .lp-header-right .lp-menu {
	display: flex;
	align-items: center;
	gap: 16px;
	order: 1;
}

body.is-blog .lp-header-right .lp-lang {
	order: 0;
}

/* Breadcrumb: darker, slimmer, less pill-like */
body.is-blog .is-blog .breadcrumb {
	background: rgba(12, 24, 40, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 7px 12px;
	margin-bottom: 12px;
}

body.is-blog .is-blog .breadcrumb .breadcrumb-item,
body.is-blog .is-blog .breadcrumb .breadcrumb-item a {
	color: rgba(230, 237, 243, 0.82);
	font-size: 0.9rem;
}

body.is-blog .is-blog .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(230, 237, 243, 0.5);
}

/* Remove large intro-to-content gap */
body.is-blog .is-blog .blog-divider {
	margin: 10px 0 8px;
	border-color: rgba(0, 0, 0, 0.08);
}

body.is-blog .is-blog #content > .mb-3:first-of-type {
	margin-top: 6px !important;
}

/* Soften panels from pure white to off-white */
body.is-blog .is-blog #content > .mb-3,
body.is-blog .is-blog #content > .mb-2,
body.is-blog .is-blog #comment-container,
body.is-blog .is-blog .img-thumbnail {
	background: #f6f7f9;
	border: 1px solid rgba(15, 34, 56, 0.10);
	box-shadow: 0 6px 18px rgba(6, 19, 40, 0.08);
}

body.is-blog .is-blog #content > .mb-3,
body.is-blog .is-blog #comment-container {
	border-radius: 14px;
}

/* Keep readability strong on softened panels */
body.is-blog .is-blog #content h1,
body.is-blog .is-blog #content h2,
body.is-blog .is-blog #content h3 {
	color: #10213f;
}

body.is-blog .is-blog #content p,
body.is-blog .is-blog #content li {
	color: #445974;
}

@media (max-width: 992px) {
	body.is-blog .lp-header-right {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	body.is-blog .lp-header-right .lp-lang {
		order: 0;
		align-self: flex-start;
		margin-top: 8px;
	}
}

/* ===== Blog Footer (identical to landing newsletter footer) ===== */
body.is-blog #container > footer {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* ===== BLOG FOOTER NEWSLETTER ===== */

body.is-blog #container > footer {
	padding: 0 24px 24px;
}

body.is-blog #container > footer footer.lp-newsletter {
	background: #122a50;
	border-radius: 20px;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	color: #f5f8ff;
}

body.is-blog #container > footer footer.lp-newsletter h3 {
	margin: 0;
	font-size: 1.3rem;
}

body.is-blog #container > footer footer.lp-newsletter p {
	margin: 6px 0 0;
	color: #d4dff5;
}

body.is-blog #container > footer footer.lp-newsletter form.lp-newsletter-form {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	justify-content: flex-end;
	min-width: 260px;
	flex-wrap: wrap;
}

body.is-blog #container > footer footer.lp-newsletter input[type="email"] {
	width: min(320px, 100%);
	height: 44px;
	border-radius: 999px;
	border: 1px solid #2f4e7f;
	padding: 0 18px;
	font-size: 0.95rem;
	color: #132a4f;
	background: #ffffff;
}

body.is-blog #container > footer footer.lp-newsletter input[type="email"]:focus {
	outline: 2px solid rgba(240, 139, 29, 0.45);
	outline-offset: 1px;
}

body.is-blog #container > footer footer.lp-newsletter button.lp-btn {
	height: 44px;
	border-radius: 999px;
	white-space: nowrap;
}

body.is-blog #container > footer .lp-newsletter-consent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.84);
}

body.is-blog #container > footer .lp-newsletter-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

body.is-blog #container > footer .lp-newsletter-result {
	width: 100%;
	min-height: 1.2em;
	margin-top: 4px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.86);
}

body.is-blog #container > footer .lp-newsletter-result.is-success {
	color: #9fe6b8;
}

body.is-blog #container > footer .lp-newsletter-result.is-error {
	color: #ff9da1;
}

@media (max-width: 900px) {
	body.is-blog #container > footer footer.lp-newsletter {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	body.is-blog #container > footer footer.lp-newsletter form.lp-newsletter-form {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	body.is-blog #container > footer footer.lp-newsletter form.lp-newsletter-form {
		flex-direction: column;
		align-items: stretch;
	}

	body.is-blog #container > footer footer.lp-newsletter input[type="email"],
	body.is-blog #container > footer footer.lp-newsletter button.lp-btn {
		width: 100%;
	}
}

/* ===== CHECKOUT ===== */
#checkout-checkout {
	background: var(--ct-surface);
	border-radius: var(--ct-radius-xl);
	padding: 28px 22px;
	max-width: 1160px;
	margin: 30px auto;
	box-shadow: var(--ct-shadow);
}

#checkout-checkout h1,
#checkout-checkout h2,
#checkout-checkout h3,
#checkout-checkout h4,
#checkout-checkout legend,
#checkout-checkout label {
	color: var(--ct-text);
}

#checkout-checkout p,
#checkout-checkout .text-muted,
#checkout-checkout .breadcrumb-item,
#checkout-checkout .breadcrumb-item a {
	color: var(--ct-text-soft);
}

#checkout-checkout a {
	color: var(--ct-link);
}

#checkout-checkout a:hover {
	color: var(--ct-link-hover);
}

@media (max-width: 767px) {
	#checkout-checkout {
		border-radius: 20px;
		padding: 16px 12px;
		margin: 16px auto;
	}
}

/* ===== Mobile Topic Nav ===== */
.blog-topic-nav {
  margin-bottom: 14px;
}

.blog-topic-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: rgba(10, 22, 40, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: rgba(230, 237, 243, 0.9);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s;
}

.blog-topic-toggle:hover {
  background: rgba(10, 22, 40, 0.92);
}

.blog-topic-toggle__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-topic-toggle__chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.22s ease;
}

.blog-topic-nav.is-open .blog-topic-toggle__chevron {
  transform: rotate(180deg);
}

.blog-topic-menu {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  padding: 7px;
  background: rgba(7, 14, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.blog-topic-nav.is-open .blog-topic-menu {
  display: flex;
}

.blog-topic-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(220, 232, 245, 0.82) !important;
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}

.blog-topic-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff !important;
  text-decoration: none !important;
}

.blog-topic-item.is-active {
  background: rgba(240, 139, 29, 0.18);
  color: #f08b1d !important;
  font-weight: 700;
}

/* ===== QUICKCHECKOUT ===== */
#quickcheckoutconfirm {
	background: var(--ct-surface);
	border-radius: var(--ct-radius-xl);
	padding: 28px 22px;
	max-width: 1160px;
	margin: 30px auto;
	box-shadow: var(--ct-shadow);
	color: var(--ct-text);
}

#quickcheckoutconfirm h1,
#quickcheckoutconfirm h2,
#quickcheckoutconfirm h3,
#quickcheckoutconfirm h4,
#quickcheckoutconfirm h5,
#quickcheckoutconfirm h6,
#quickcheckoutconfirm legend,
#quickcheckoutconfirm label,
#quickcheckoutconfirm .panel-title,
#quickcheckoutconfirm .panel-heading {
	color: var(--ct-text);
}

#quickcheckoutconfirm p,
#quickcheckoutconfirm span,
#quickcheckoutconfirm li,
#quickcheckoutconfirm td,
#quickcheckoutconfirm th,
#quickcheckoutconfirm .text-muted,
#quickcheckoutconfirm .breadcrumb-item,
#quickcheckoutconfirm .breadcrumb-item a,
#quickcheckoutconfirm .radio label,
#quickcheckoutconfirm .checkbox label {
	color: var(--ct-text-soft);
}

#quickcheckoutconfirm a {
	color: var(--ct-link);
}

#quickcheckoutconfirm a:hover {
	color: var(--ct-link-hover);
}

#quickcheckoutconfirm input[type="text"],
#quickcheckoutconfirm input[type="email"],
#quickcheckoutconfirm input[type="tel"],
#quickcheckoutconfirm input[type="password"],
#quickcheckoutconfirm select,
#quickcheckoutconfirm textarea {
	color: var(--ct-text);
	background-color: #fff;
	border-color: var(--ct-border);
}

#quickcheckoutconfirm .panel,
#quickcheckoutconfirm .card {
	background: #fff;
	border-color: var(--ct-border);
	border-radius: var(--ct-radius-lg);
}

#quickcheckoutconfirm .panel-body,
#quickcheckoutconfirm .card-body {
	color: var(--ct-text);
}

/* shipping & payment method lists */
#quickcheckoutconfirm #shipping_method_quickcheckout,
#quickcheckoutconfirm #payment_method_quickcheckout {
	color: var(--ct-text);
}

#quickcheckoutconfirm #shipping_method_quickcheckout label,
#quickcheckoutconfirm #payment_method_quickcheckout label {
	color: var(--ct-text);
}

@media (max-width: 767px) {
	#quickcheckoutconfirm {
		border-radius: 20px;
		padding: 16px 12px;
		margin: 16px auto;
	}
}