/* ============================================================
   Chapterwise Book Notes — Frontend Styles
   Theme: Deep navy / charcoal base with warm gold accent,
   matching The Book Notes premium academic branding.
   ============================================================ */

/* GTranslate shortcode wrapper — centered above the header */
.cbn-gtranslate-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 10px;
}

.cbn-reader {
	--cbn-accent: #d4af37;
	--cbn-navy-900: #0b1220;
	--cbn-navy-800: #101a2e;
	--cbn-navy-700: #16223b;
	--cbn-navy-600: #1c2c4a;
	--cbn-text: #e9edf5;
	--cbn-text-dim: #aab4c8;
	--cbn-radius: 14px;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--cbn-text);
	max-width: 100%;
	isolation: isolate;
}

.cbn-reader * { box-sizing: border-box; }

/* ---------------- Sticky / 3D Header ---------------- */

.cbn-header {
	position: sticky; /* desktop default; JS switches to fixed positioning below 782px for reliable mobile pinning */
	top: 0;
	z-index: 9999;
	background: linear-gradient(135deg, var(--cbn-navy-900) 0%, var(--cbn-navy-800) 55%, var(--cbn-navy-700) 100%);
	border-bottom: 1px solid rgba(212,175,55,0.25);
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
	border-radius: var(--cbn-radius) var(--cbn-radius) 0 0;
	transform-style: preserve-3d;
	transition: box-shadow .3s ease, border-radius .3s ease;
}

.cbn-header.cbn-is-stuck {
	border-radius: 0;
	box-shadow: 0 14px 34px -10px rgba(0,0,0,0.65);
}

.cbn-header-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	position: relative;
}

/* subtle animated gold sheen line */
.cbn-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cbn-accent), transparent);
	background-size: 200% 100%;
	animation: cbnSheen 5s linear infinite;
	opacity: .8;
}
@keyframes cbnSheen {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* TOC toggle button */
.cbn-toc-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(212,175,55,0.08);
	border: 1px solid rgba(212,175,55,0.35);
	color: var(--cbn-accent);
	padding: 9px 14px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
	transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
	transform: translateZ(0);
	flex-shrink: 0;
}
.cbn-toc-toggle:hover {
	background: rgba(212,175,55,0.16);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px rgba(212,175,55,0.4);
}
.cbn-toc-toggle:active { transform: translateY(0) scale(.97); }

.cbn-toc-icon { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
.cbn-toc-icon span {
	display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}
.cbn-toc-toggle[aria-expanded="true"] .cbn-toc-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.cbn-toc-toggle[aria-expanded="true"] .cbn-toc-icon span:nth-child(2) { opacity: 0; }
.cbn-toc-toggle[aria-expanded="true"] .cbn-toc-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.cbn-toc-toggle-label { white-space: nowrap; }
@media (max-width: 560px) { .cbn-toc-toggle-label { display: none; } }

/* Title — centered in the header */
.cbn-header-title {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.25;
	text-align: center;
}
.cbn-title-text {
	font-size: 16px;
	font-weight: 700;
	color: var(--cbn-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
@media (max-width: 480px) { .cbn-title-text { font-size: 13px; } }

/* ---------------- TOC Panel (top-left dropdown) ---------------- */

.cbn-toc-panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 320px;
	max-width: 90vw;
	max-height: 0;
	overflow: hidden;
	background: var(--cbn-navy-800);
	border-radius: 0 0 var(--cbn-radius) var(--cbn-radius);
	border: 1px solid rgba(212,175,55,0.2);
	border-top: none;
	box-shadow: 0 24px 60px -16px rgba(0,0,0,0.65);
	transition: max-height .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
	opacity: 0;
	z-index: 9998;
}
.cbn-toc-panel.cbn-open { max-height: 70vh; opacity: 1; }

.cbn-toc-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px 10px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cbn-accent);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cbn-toc-close {
	background: none; border: none; color: var(--cbn-text-dim);
	font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.cbn-toc-close:hover { color: var(--cbn-text); background: rgba(255,255,255,0.08); }

.cbn-toc-list {
	list-style: none; margin: 0; padding: 10px 8px 16px;
	max-height: calc(70vh - 50px);
	overflow-y: auto;
	overflow-x: hidden;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}
.cbn-toc-item {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.cbn-toc-item a,
.cbn-toc-link-disabled {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
}
.cbn-toc-item a > span:last-child,
.cbn-toc-link-disabled {
	line-height: 1.45;
}
.cbn-toc-list::-webkit-scrollbar { width: 6px; }
.cbn-toc-list::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.4); border-radius: 6px; }

.cbn-toc-item a {
	display: flex; align-items: center; gap: 8px;
	color: #eef1f8;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	padding: 8px 10px;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cbn-toc-item a:hover { background: rgba(212,175,55,0.16); color: #fff; transform: translateX(2px); }
.cbn-toc-item a.cbn-active-link { color: #10182a; background: var(--cbn-accent); font-weight: 700; }
.cbn-toc-item a.cbn-active-link .cbn-toc-dot { background: #10182a; opacity: 1; }

.cbn-toc-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--cbn-accent); opacity: .5; flex-shrink: 0;
}
.cbn-toc-h4 a { padding-left: 26px; font-size: 13px; color: #d7dceb; }
.cbn-toc-h4 .cbn-toc-dot { width: 5px; height: 5px; opacity: .6; }
.cbn-toc-h5 a { padding-left: 40px; font-size: 12.5px; color: #c3cadd; }
.cbn-toc-h5 .cbn-toc-dot { width: 4px; height: 4px; opacity: .5; }
.cbn-toc-h4 a:hover,
.cbn-toc-h5 a:hover { color: #fff; }

/* Locked headings (members-only, shown but not clickable) */
.cbn-toc-link-disabled {
	display: flex; align-items: center; gap: 8px;
	color: #8b93a8;
	font-size: 13.5px;
	font-weight: 500;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: not-allowed;
	user-select: none;
}
.cbn-toc-locked.cbn-toc-h4 .cbn-toc-link-disabled { padding-left: 26px; font-size: 13px; }
.cbn-toc-locked.cbn-toc-h5 .cbn-toc-link-disabled { padding-left: 40px; font-size: 12.5px; }
.cbn-toc-lock-icon { flex-shrink: 0; opacity: .75; }
.cbn-toc-locked .cbn-toc-dot { background: #8b93a8; }

.cbn-toc-empty { padding: 16px; color: var(--cbn-text-dim); font-size: 13px; font-style: italic; }

.cbn-toc-overlay {
	position: fixed; inset: 0; background: rgba(4,8,16,0.5);
	backdrop-filter: blur(2px);
	opacity: 0; visibility: hidden; transition: opacity .25s ease;
	z-index: 9997;
}
.cbn-toc-overlay.cbn-open { opacity: 1; visibility: visible; }

/* ---------------- Introduction box (centered, below header) ---------------- */

.cbn-intro-box {
	background: #ffffff;
	border: 1px solid var(--cbn-accent);
	border-radius: 12px;
	margin: 18px auto;
	padding: 20px 28px;
	max-width: 720px;
	text-align: center;
	box-shadow: 0 14px 34px -18px rgba(16,24,42,0.35);
}
.cbn-intro-line {
	font-weight: 700;
	font-size: 17px;
	color: #7a1f2b;
	margin: 6px 0;
}
.cbn-intro-subject {
	font-weight: 800;
	font-size: 17px;
	letter-spacing: .02em;
	color: #7a1f2b;
	margin: 10px 0 2px;
}

/* ---------------- Body content ---------------- */

.cbn-body {
	/* Theming variables — changed only by the user's palette picker.
	   Headings never reference these, so they stay fixed. */
	--cbn-content-bg: #ffffff;
	--cbn-content-bg-2: #fbfbfd;
	--cbn-content-text: #1c2333;
	--cbn-content-text-dim: #4a5266;
	--cbn-content-border: #e6e8ee;

	background: linear-gradient(180deg, var(--cbn-content-bg) 0%, var(--cbn-content-bg-2) 100%);
	color: var(--cbn-content-text);
	padding: clamp(14px, 2vw, 28px);
	border-radius: 0 0 var(--cbn-radius) var(--cbn-radius);
	box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.5) inset;
	line-height: 1.65;
	font-size: 16px;
	transition: background .3s ease, color .3s ease;
}

/* Force real text selection to work inside the reader body even if a
   separate "copy protection" plugin sets user-select:none globally. */
.cbn-body,
.cbn-body p,
.cbn-body li,
.cbn-body td,
.cbn-body th,
.cbn-body span,
.cbn-body div {
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	user-select: text !important;
}

/* Headings ALWAYS render as fixed white cards, regardless of the
   content theme — deliberately not wired to the theme variables. */
.cbn-body h3,
.cbn-body h4,
.cbn-body h5 {
	scroll-margin-top: 110px;
	position: relative;
	font-weight: 800;
	color: #10182a;
	background: transparent;
	border-radius: 8px;
	box-shadow: 0 8px 22px -14px rgba(16,24,42,0.35);
}

.cbn-body h3 {
	font-size: 1.5em;
	margin: 1.35em 0 .65em;
	padding: 10px 14px;
	border-left: 5px solid var(--cbn-accent);
}
.cbn-body h4 {
	font-size: 1.22em;
	margin: 1.2em 0 .5em;
	padding: 8px 12px;
	border-left: 4px solid var(--cbn-accent);
	color: #1c2c4a;
}
.cbn-body h5 {
	font-size: 1.05em;
	margin: 1.05em 0 .45em;
	padding: 7px 10px;
	border-left: 3px solid var(--cbn-accent);
	color: #2a3a5c;
}

.cbn-body p { margin: 0 0 1.1em; color: var(--cbn-content-text); }

/* Preserve formatting supplied by the editor instead of flattening pasted
 * rich text into the reader's visual theme. Inline styles/classes from the
 * editor are allowed to win naturally over the base typography. */
.cbn-body [style] {
	font-family: inherit;
}
.cbn-body strong,
.cbn-body b { font-weight: 700; }
.cbn-body em,
.cbn-body i { font-style: italic; }
.cbn-body u { text-decoration: underline; }
.cbn-body s,
.cbn-body del { text-decoration: line-through; }
.cbn-body pre { white-space: pre-wrap; overflow-x: auto; }
.cbn-body figure { max-width: 100%; margin: 1em 0; }
.cbn-body figcaption { font-size: .9em; color: var(--cbn-content-text-dim); }
.cbn-body img[style] { max-width: 100%; height: auto; }

.cbn-body ul,
.cbn-body ol { margin: 0 0 1.2em; padding-left: 1.4em; color: var(--cbn-content-text); }
.cbn-body li { margin-bottom: .5em; }
.cbn-body ul > li::marker { color: var(--cbn-accent); }
.cbn-body ol > li::marker { color: var(--cbn-accent); font-weight: 700; }

.cbn-body table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 1.4em 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 30px -16px rgba(16,24,42,0.25);
	border: 1px solid var(--cbn-content-border);
}
.cbn-body table th {
	background: linear-gradient(135deg, var(--cbn-navy-800), var(--cbn-navy-600));
	color: #fff;
	padding: 12px 14px;
	text-align: left;
	font-size: 13.5px;
	letter-spacing: .02em;
}
.cbn-body table td {
	padding: 11px 14px;
	border-top: 1px solid var(--cbn-content-border);
	font-size: 14.5px;
	color: var(--cbn-content-text);
}
.cbn-body table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

.cbn-body blockquote {
	border-left: 4px solid var(--cbn-accent);
	background: rgba(212,175,55,0.08);
	margin: 1.4em 0;
	padding: .9em 1.2em;
	border-radius: 0 10px 10px 0;
	color: var(--cbn-content-text);
}

.cbn-body code {
	background: rgba(0,0,0,0.06);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: .92em;
	color: var(--cbn-content-text);
}

.cbn-body img {
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 20px 40px -20px rgba(0,0,0,0.3);
}

.cbn-body mjx-container {
	overflow-x: auto;
	overflow-y: hidden;
}

/* ---- Content theme presets (applied via data-cbn-bg-theme / data-cbn-text-theme on .cbn-reader) ---- */
.cbn-reader[data-cbn-bg-theme="ivory"] .cbn-body { --cbn-content-bg: #faf3e4; --cbn-content-bg-2: #f6ecd8; --cbn-content-border: #ecdfc4; }
.cbn-reader[data-cbn-bg-theme="mint"] .cbn-body { --cbn-content-bg: #eaf6ef; --cbn-content-bg-2: #dff1e6; --cbn-content-border: #cfe9d9; }
.cbn-reader[data-cbn-bg-theme="sky"] .cbn-body { --cbn-content-bg: #eaf2fb; --cbn-content-bg-2: #dfebf9; --cbn-content-border: #cfe0f2; }
.cbn-reader[data-cbn-bg-theme="sepia"] .cbn-body { --cbn-content-bg: #f1e7d0; --cbn-content-bg-2: #ecdec1; --cbn-content-border: #e0cfa8; }
.cbn-reader[data-cbn-bg-theme="lavender"] .cbn-body { --cbn-content-bg: #f1ecfa; --cbn-content-bg-2: #e9e1f6; --cbn-content-border: #ddceef; }
.cbn-reader[data-cbn-bg-theme="rose"] .cbn-body { --cbn-content-bg: #fbebee; --cbn-content-bg-2: #f6dde2; --cbn-content-border: #f0cdd3; }
.cbn-reader[data-cbn-bg-theme="sand"] .cbn-body { --cbn-content-bg: #f4ece0; --cbn-content-bg-2: #ede0cd; --cbn-content-border: #e2d0b4; }
.cbn-reader[data-cbn-bg-theme="slate"] .cbn-body { --cbn-content-bg: #e7ebf0; --cbn-content-bg-2: #dbe1e9; --cbn-content-border: #cbd3de; }
.cbn-reader[data-cbn-bg-theme="dark"] .cbn-body { --cbn-content-bg: #1b2436; --cbn-content-bg-2: #161e2d; --cbn-content-text: #dde3ef; --cbn-content-text-dim: #aab4c8; --cbn-content-border: #2a3550; }

.cbn-reader[data-cbn-text-theme="navy"] .cbn-body { --cbn-content-text: #1c2c4a; }
.cbn-reader[data-cbn-text-theme="brown"] .cbn-body { --cbn-content-text: #4a3826; }
.cbn-reader[data-cbn-text-theme="forest"] .cbn-body { --cbn-content-text: #204030; }
.cbn-reader[data-cbn-text-theme="plum"] .cbn-body { --cbn-content-text: #3a2140; }
.cbn-reader[data-cbn-text-theme="maroon"] .cbn-body { --cbn-content-text: #5c1f2b; }
.cbn-reader[data-cbn-text-theme="teal"] .cbn-body { --cbn-content-text: #0f3d3e; }
.cbn-reader[data-cbn-text-theme="slate-text"] .cbn-body { --cbn-content-text: #3a4152; }
.cbn-reader[data-cbn-text-theme="light"] .cbn-body { --cbn-content-text: #e9edf5; }

/* ---------------- Locked (members-only) notice ---------------- */

.cbn-locked-box {
	margin: 2.4em 0 1em;
	padding: 34px 30px;
	text-align: center !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(247,244,236,.92));
	border: 1.5px solid rgba(212,175,55,0.42);
	border-radius: 16px;
	color: var(--cbn-content-text);
}
.cbn-locked-box svg { color: var(--cbn-accent); margin: 0 auto 12px; display: block; }
.cbn-locked-text {
	display: block;
	box-sizing: border-box;
	width: min(100%, 760px) !important;
	max-width: 760px !important;
	margin: 0 auto 20px !important;
	padding: 0 18px;
	text-align: center !important;
	font-size: 15px;
	line-height: 1.65;
	color: var(--cbn-content-text);
}
.cbn-locked-text strong {
	display: block;
	margin: 0 0 6px;
	text-align: center !important;
}
@media (max-width: 640px) {
	.cbn-locked-text {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 12px;
	}
}
.cbn-locked-actions { display: flex; gap: 10px; justify-content: center; align-items: center; width: 100%; flex-wrap: wrap; }
.cbn-locked-btn {
	display: inline-block;
	background: linear-gradient(135deg, var(--cbn-accent), #f3d878);
	color: #10182a !important;
	font-weight: 700;
	text-decoration: none !important;
	padding: 10px 22px;
	border-radius: 9px;
	font-size: 13.5px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cbn-locked-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(212,175,55,0.6); }
.cbn-locked-btn-ghost {
	background: transparent;
	border: 1.5px solid rgba(0,0,0,0.15);
	color: var(--cbn-content-text) !important;
}

/* ---------------- Theme / Palette switcher ---------------- */

.cbn-theme-wrap { position: relative; flex-shrink: 0; }
.cbn-theme-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.06));
	border: 1px solid rgba(212,175,55,0.45);
	color: var(--cbn-accent);
	border-radius: 10px;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
}
.cbn-theme-toggle:hover {
	background: rgba(212,175,55,0.24);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px rgba(212,175,55,0.45);
}
.cbn-palette-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cbn-theme-toggle-label { white-space: nowrap; }
@media (max-width: 620px) { .cbn-theme-toggle-label { display: none; } .cbn-theme-toggle { padding: 0 10px; } }

.cbn-theme-dropdown-head {
	font-size: 13px;
	font-weight: 700;
	color: var(--cbn-text);
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cbn-theme-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 252px;
	max-width: 85vw;
	background: var(--cbn-navy-800);
	border: 1px solid rgba(212,175,55,0.25);
	border-radius: 12px;
	box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
	padding: 14px;
	display: none;
	z-index: 10000;
	animation: cbnPopIn .18s ease;
}
.cbn-theme-dropdown.cbn-open { display: block; }
@keyframes cbnPopIn { from { opacity: 0; transform: scale(.94) translateY(-4px);} to { opacity: 1; transform: scale(1) translateY(0);} }

.cbn-theme-section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cbn-text-dim);
	margin: 4px 0 8px;
}
.cbn-theme-section-title:not(:first-child) { margin-top: 14px; }

.cbn-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cbn-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.25);
	cursor: pointer;
	padding: 0;
	transition: transform .15s ease, border-color .15s ease;
	position: relative;
}
.cbn-swatch:hover { transform: scale(1.12); }
.cbn-swatch.cbn-swatch-active { border-color: var(--cbn-accent); box-shadow: 0 0 0 2px rgba(212,175,55,0.3); }

.cbn-theme-reset {
	margin-top: 16px;
	width: 100%;
	background: rgba(212,175,55,0.1);
	border: 1px solid rgba(212,175,55,0.3);
	color: var(--cbn-accent);
	padding: 8px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease;
}
.cbn-theme-reset:hover { background: rgba(212,175,55,0.18); }

/* Responsive header stacking on very small screens */
@media (max-width: 400px) {
	.cbn-header-inner { padding: 10px 12px; gap: 8px; }
	.cbn-toc-toggle { padding: 8px 10px; }
}

/* Mobile: header is pinned via JS (position:fixed) for reliability across
   Elementor sections / WebViews where sticky can silently fail. This just
   ensures no odd border-radius while fixed at the very top of the screen. */
@media (max-width: 782px) {
	.cbn-header.cbn-is-stuck { border-radius: 0; }
}

/* Mobile: slightly smaller headings so long topic titles and heading text
   don't overwhelm the narrower content area. */
@media (max-width: 600px) {
	.cbn-body { padding: 10px 12px; margin-left: 0; margin-right: 0; border-radius: 10px; line-height: 1.58; font-size: 15.5px; }
	.cbn-body h3 { font-size: 1.2em; padding: 8px 10px; margin: 1.15em 0 .55em; }
	.cbn-body h4 { font-size: 1.06em; padding: 7px 9px; margin: 1em 0 .45em; }
	.cbn-body h5 { font-size: 0.97em; padding: 6px 8px; margin: .9em 0 .4em; }
	.cbn-title-text { font-size: 12.5px; }
	.cbn-intro-box { padding: 16px 18px; margin: 14px auto; }
	.cbn-intro-line,
.cbn-intro-subject { font-size: 14.5px; }
}

/* ============================================================
   GTranslate widget banner — keep it from pushing the page down
   or overlaying content, regardless of which layout the [gtranslate]
   shortcode is configured to use.
   ============================================================ */
html.translated-ltr,
html.translated-rtl,
html { top: 0 !important; }
body { top: 0 !important; position: static !important; }
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe[id^="goog-gt-"],
.skiptranslate > iframe,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	opacity: 0 !important;
}

/* ================================================================
   Chapterwise Book Notes 2.3.0 refinements
   Inspired by The Book Notes visual language: deep navy, warm gold,
   restrained burgundy accents, soft cards, and subtle gradients.
   ================================================================ */

/* Topic introduction: richer academic card with animated gradient edge. */
.cbn-reader > .cbn-intro-box {
	position: relative;
	isolation: isolate;
	margin: 0 auto 13px;
	max-width: 860px;
	padding: 22px 28px 20px;
	border: 1px solid transparent;
	border-radius: 16px;
	background:
		linear-gradient(180deg, #fffdfa 0%, #ffffff 52%, #f8f9fc 100%) padding-box,
		linear-gradient(110deg, #9b7a20 0%, #d4af37 28%, #8b1e2d 62%, #17233d 100%) border-box;
	box-shadow:
		0 14px 34px -22px rgba(16,24,42,.42),
		0 1px 0 rgba(255,255,255,.95) inset;
	overflow: hidden;
}
.cbn-reader > .cbn-intro-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, rgba(212,175,55,.08), transparent 36%, rgba(139,30,45,.055) 68%, rgba(23,35,61,.05));
	background-size: 220% 220%;
	animation: cbnIntroFlow 9s ease-in-out infinite alternate;
	pointer-events: none;
}
.cbn-reader > .cbn-intro-box::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, #d4af37 18%, #8b1e2d 52%, #17233d 82%, transparent);
	opacity: .78;
}
@keyframes cbnIntroFlow {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}
.cbn-intro-line {
	position: relative;
	margin: 5px 0;
	font-weight: 750;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.45;
	letter-spacing: .01em;
	color: #18243c;
}
.cbn-intro-line:first-child::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin: 0 auto 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #d4af37, #8b1e2d);
}
.cbn-intro-subject {
	margin: 11px 0 0;
	font-weight: 850;
	font-size: clamp(14px, 1.45vw, 17px);
	letter-spacing: .055em;
	text-transform: uppercase;
	color: #7c1d2b;
}

/* Language selector remains left aligned directly below the introduction. */
.cbn-reader > .cbn-gtranslate-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 12px;
	padding: 0 4px;
	min-height: 34px;
}

/* Thin double content boundary: 1px outer gradient + 1px inset highlight.
   The gradient shifts slowly so the edge feels alive without being flashy. */
.cbn-body {
	position: relative;
	border: 1px solid transparent;
	border-radius: 14px;
	background:
		linear-gradient(180deg, var(--cbn-content-bg) 0%, var(--cbn-content-bg-2) 100%) padding-box,
		linear-gradient(115deg, #17233d 0%, #8b1e2d 34%, #d4af37 68%, #17233d 100%) border-box;
	background-size: 100% 100%, 240% 240%;
	animation: cbnContentBorderFlow 12s ease-in-out infinite alternate;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.82),
		0 16px 38px -26px rgba(18,28,48,.42);
	margin: 8px 3px 18px;
}
@keyframes cbnContentBorderFlow {
	0% { background-position: 0 0, 0% 50%; }
	100% { background-position: 0 0, 100% 50%; }
}

/* Locked TOC entries: hover locally to reveal the custom subscription text. */
.cbn-toc-link-disabled {
	position: relative;
}
.cbn-toc-link-disabled::after { display: none !important; }

/* Locked-heading subscription tooltip is rendered into <body> by JS so it
 * can never be clipped by the TOC's scroll container or run off-screen. */
.cbn-toc-hover-tip {
	position: fixed;
	z-index: 2147483000;
	box-sizing: border-box;
	width: min(360px, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	padding: 11px 14px;
	border: 1px solid rgba(212,175,55,.72);
	border-radius: 11px;
	background: linear-gradient(135deg, #111a2d 0%, #202d49 58%, #3c1b28 100%);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 600;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	box-shadow: 0 18px 38px -14px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity .14s ease, transform .14s ease;
}
.cbn-toc-hover-tip.cbn-visible { opacity: 1; transform: translateY(0); }

/* One plan button per topic, even when several plans are configured. */
.cbn-locked-btn {
	background: linear-gradient(115deg, #17233d 0%, #7f2030 48%, #d4af37 100%);
	background-size: 220% 220%;
	color: #fff !important;
	box-shadow: 0 8px 18px -12px rgba(23,35,61,.8);
	transition: transform .18s ease, box-shadow .18s ease, background-position .45s ease;
}
.cbn-locked-btn:hover {
	transform: translateY(-1px);
	background-position: 100% 50%;
	box-shadow: 0 11px 24px -11px rgba(127,32,48,.65);
}

@media (max-width: 600px) {
	.cbn-reader > .cbn-intro-box { padding: 18px 17px 17px; border-radius: 13px; }
	.cbn-reader > .cbn-intro-box::after { left: 12px; right: 12px; }
	.cbn-body { margin-left: 0; margin-right: 0; border-radius: 10px; padding-left: 12px; padding-right: 12px; }
	.cbn-intro-line,
.cbn-intro-subject { font-size: 14.5px; }
}

/* ================================================================
   GTranslate cleanup
   ================================================================ */
html.translated-ltr,
html.translated-rtl,
html { top: 0 !important; }
body { top: 0 !important; position: static !important; }
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe[id^="goog-gt-"],
.skiptranslate > iframe,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	opacity: 0 !important;
}

/* ================================================================
   2.4.0 UI refinements
   ================================================================ */
.cbn-reader {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.cbn-reader > .cbn-intro-box {
	margin-top: 0 !important;
}
.cbn-reader > .cbn-intro-box .cbn-intro-line {
	font-size: clamp(16px, 1.7vw, 19px);
	line-height: 1.5;
}
.cbn-reader > .cbn-intro-box .cbn-intro-subject {
	font-size: clamp(15px, 1.55vw, 18px);
}

/* ================================================================
   2.6.0 — Plain frontend content
   H3/H4/H5 remain normal headings. No accordion UI is applied.
   ================================================================ */

/* Reduce the excessive top gap without pulling the reader into the
   surrounding page/header. Keep normal document spacing intact. */
.cbn-reader {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ---------------- Language converter ---------------- */
.cbn-reader > .cbn-gtranslate-wrap {
	display: block;
	margin: 0 0 13px;
	padding: 0 2px;
}

.cbn-language-card {
	display: flex;
	align-items: center;
	gap: 11px;
	width: fit-content;
	max-width: 100%;
	min-height: 48px;
	padding: 7px 9px 7px 10px;
	border: 1px solid rgba(23,35,61,.12);
	border-radius: 13px;
	background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,249,252,.96));
	box-shadow: 0 9px 22px -18px rgba(16,24,42,.72), inset 0 1px 0 rgba(255,255,255,.9);
}

.cbn-language-icon {
	width: 32px; height: 32px; flex: 0 0 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9px;
	background: linear-gradient(135deg, #17233d, #7f2030);
	color: #f5d66d;
	box-shadow: 0 5px 12px -8px rgba(23,35,61,.8);
}
.cbn-language-icon svg { width: 18px; height: 18px; }
.cbn-language-copy { display: flex; flex-direction: column; gap: 1px; min-width: 130px; }
.cbn-language-label { font-size: 12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; color: #18243c; }
.cbn-language-hint { font-size: 10.5px; line-height: 1.3; color: #70798b; }
.cbn-language-control { display: flex; align-items: center; min-width: 120px; }
.cbn-language-control .gtranslate_wrapper,
.cbn-language-control .gt_switcher,
.cbn-language-control .gt_selector,
.cbn-language-control .goog-te-gadget,
.cbn-language-control .goog-te-combo,
.cbn-language-control select { font-family: inherit !important; }
.cbn-language-control select,
.cbn-language-control .gt_selector {
	min-width: 128px !important; max-width: 190px; height: 36px !important;
	padding: 0 34px 0 11px !important; border: 1px solid rgba(23,35,61,.16) !important;
	border-radius: 9px !important; background: #fff !important; color: #18243c !important;
	font-size: 12px !important; font-weight: 700 !important; line-height: 34px !important;
	box-shadow: 0 5px 12px -10px rgba(16,24,42,.8) !important; outline: none !important; cursor: pointer !important;
}
.cbn-language-control select:focus,
.cbn-language-control .gt_selector:focus {
	border-color: rgba(212,175,55,.8) !important;
	box-shadow: 0 0 0 3px rgba(212,175,55,.14) !important;
}
.cbn-language-control .gt_switcher { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.cbn-language-control .gt_switcher { position: relative !important; max-width: 100% !important; }
.cbn-language-control .gt_switcher .gt_selected,
.cbn-language-control .gt_switcher .gt_selected a { box-sizing: border-box !important; max-width: 100% !important; overflow: hidden !important; }
.cbn-language-control .gt_switcher .gt_selected a { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cbn-language-control .gt_switcher .gt_option { box-sizing: border-box !important; left: auto !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
.cbn-language-control .gt_switcher .gt_option a { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; box-sizing: border-box !important; }
.cbn-language-control .gt_switcher .gt_selected,
.cbn-language-control .gt_switcher .gt_selected a {
	border: 1px solid rgba(23,35,61,.16) !important; border-radius: 9px !important; background: #fff !important;
	color: #18243c !important; font-size: 12px !important; font-weight: 700 !important;
}
.cbn-language-control .gt_switcher .gt_selected a { padding: 8px 30px 8px 11px !important; }
.cbn-language-control .gt_switcher .gt_option {
	border: 1px solid rgba(23,35,61,.12) !important; border-radius: 9px !important; background: #fff !important;
	box-shadow: 0 12px 25px -14px rgba(16,24,42,.65) !important; overflow: hidden !important;
}
.cbn-language-control .gt_switcher .gt_option a { padding: 7px 10px !important; font-size: 12px !important; }

@media (max-width: 600px) {
	.cbn-language-card { width: 100%; }
	.cbn-language-copy { min-width: 0; flex: 1 1 auto; }
	.cbn-language-hint { display: none; }
	.cbn-language-control { flex: 0 0 auto; }
	.cbn-language-control select,
.cbn-language-control .gt_selector { min-width: 112px !important; max-width: 145px; }
}

/* 2.6.0: safety reset for markup cached from older plugin versions. */
.cbn-body .cbn-acc-section { display: contents !important; margin: 0 !important; }
.cbn-body .cbn-acc-content { display: contents !important; max-height: none !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
.cbn-body h3.cbn-acc-heading { display: block !important; cursor: default !important; user-select: text !important; transform: none !important; box-shadow: none !important; margin: 1.35em 0 .65em !important; padding: 10px 14px !important; }
.cbn-body h3.cbn-acc-heading .cbn-acc-chevron { display: none !important; }
@media (max-width: 600px) {
  .cbn-body { padding: 10px 12px !important; }
  .cbn-body h3.cbn-acc-heading { margin: 1.15em 0 .55em !important; padding: 8px 10px !important; }
}

.cbn-utility-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 13px;
	position: relative;
	z-index: 30;
}
.cbn-utility-row .cbn-gtranslate-wrap { flex: 1 1 auto; margin: 0; min-width: 0; }
.cbn-utility-row .cbn-language-card { max-width: 100%; }

@media (max-width: 600px) {
	.cbn-utility-row { align-items: stretch; gap: 8px; }
	.cbn-utility-row .cbn-gtranslate-wrap { min-width: 0; }
	.cbn-language-card { width: 100%; gap: 7px; padding: 6px; }
	.cbn-language-copy { min-width: 0; }
	.cbn-language-hint { display:none; }
	.cbn-language-control { min-width: 0; flex:1 1 auto; }
	.cbn-language-control select,
.cbn-language-control .gt_selector { min-width: 0 !important; width: 100%; max-width: none; }
	
	
	
}

.cbn-utility-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	position: relative;
	z-index: 99990;
}
.cbn-utility-row .cbn-gtranslate-wrap {
	width: 100%;
	flex: none;
}

@media (max-width: 600px) {
	.cbn-utility-row { gap: 9px; }
	
	
	
}

/* ================================================================
   2.9.0 — Premium utility layout + navigation polish
   ================================================================ */
.cbn-reader > .cbn-utility-row {
	margin: 0 0 16px;
	padding: 0;
	position: relative;
	z-index: 40;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 14px;
}

.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap {
	width: 100%;
	min-width: 0;
	margin: 0;
}
.cbn-reader > .cbn-utility-row .cbn-language-card {
	width: 100%;
	min-height: 58px;
	padding: 8px 11px;
	border: 1px solid transparent;
	border-radius: 15px;
	background:
		linear-gradient(#fff, #f8fafc) padding-box,
		linear-gradient(135deg, #caa95b, #304968 48%, #7b3348) border-box;
	box-shadow: 0 14px 32px -22px rgba(11,18,32,.75), inset 0 1px 0 rgba(255,255,255,.95);
}
.cbn-reader > .cbn-utility-row .cbn-language-control {
	min-width: 0;
	max-width: 100%;
	flex: 0 1 auto;
	overflow: visible;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gtranslate_wrapper,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_selector,
.cbn-reader > .cbn-utility-row .cbn-language-control select {
	max-width: 100%;
}
.cbn-reader > .cbn-utility-row .cbn-language-control select,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_selector {
	width: auto;
	min-width: 128px !important;
	max-width: 220px;
}

/* The panel is fixed so it can never be clipped by a sticky header/container.
   JS places it below the visible reader header when that header has crossed. */

/* Dynamic 3-D accordion cards with animated gradient borders. */

/* TOC target headings: sticky header must never cover the destination. */
.cbn-body h3,
.cbn-body h4,
.cbn-body h5 { scroll-margin-top: 110px; }

@media (max-width: 782px) {
	
	.cbn-reader > .cbn-utility-row {
		display: flex;
		flex-direction: column;
		gap: 9px;
	}
	.cbn-reader > .cbn-utility-row .cbn-language-card { width: 100%; }
	.cbn-reader > .cbn-utility-row .cbn-language-card { padding-right: 7px; }
	.cbn-reader > .cbn-utility-row .cbn-language-control { flex: 1 1 auto; }
	.cbn-reader > .cbn-utility-row .cbn-language-control select,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_selector {
		min-width: 112px !important;
		max-width: 100%;
		width: 100%;
	}
	
	.cbn-body h3,
.cbn-body h4,
.cbn-body h5 { scroll-margin-top: 92px; }
}

/* ================================================================
   2.9.1 — Final mobile header + language control correction
   ================================================================ */
.cbn-mobile-header-spacer {
	display: block;
	height: 0;
	width: 100%;
	pointer-events: none;
}

/* Mobile header becomes a true viewport-fixed bar only after the user
   has crossed the original reader header position. */
@media (max-width: 782px) {
	.cbn-header.cbn-mobile-fixed {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		z-index: 2147482000 !important;
		border-radius: 0 !important;
		margin: 0 !important;
	}

	.cbn-header.cbn-mobile-fixed .cbn-header-inner {
		width: 100%;
		max-width: 100%;
	}

	/* TOC opened from the fixed mobile header must sit beneath it. */
	.cbn-header.cbn-mobile-fixed .cbn-toc-panel {
		z-index: 2147481999;
	}

	/* Keep heading destinations safely below the fixed mobile header. */
	.cbn-body h3,
.cbn-body h4,
.cbn-body h5 {
		scroll-margin-top: 96px !important;
	}
}

/* GTranslate: give the selector its own shrink-safe lane so its right edge,
   arrow and dropdown trigger can never be clipped by the language card. */
.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap,
.cbn-reader > .cbn-utility-row .cbn-language-card,
.cbn-reader > .cbn-utility-row .cbn-language-control {
	min-width: 0 !important;
	overflow: visible !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-card {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-copy {
	min-width: 0 !important;
	flex: 1 1 auto !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control {
	flex: 0 1 230px !important;
	width: 230px !important;
	max-width: 42% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control > * {
	min-width: 0 !important;
	max-width: 100% !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gtranslate_wrapper,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_selector,
.cbn-reader > .cbn-utility-row .cbn-language-control select {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a {
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a {
	padding-right: 34px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

@media (max-width: 782px) {
	.cbn-reader > .cbn-utility-row .cbn-language-control {
		flex: 1 1 170px !important;
		width: auto !important;
		max-width: 48% !important;
	}
	.cbn-reader > .cbn-utility-row .cbn-language-control .gtranslate_wrapper,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_selector,
.cbn-reader > .cbn-utility-row .cbn-language-control select {
		width: 100% !important;
	}
}

@media (max-width: 420px) {
	.cbn-reader > .cbn-utility-row .cbn-language-card {
		gap: 7px !important;
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
	.cbn-reader > .cbn-utility-row .cbn-language-icon {
		flex: 0 0 30px !important;
	}
	.cbn-reader > .cbn-utility-row .cbn-language-control {
		max-width: 54% !important;
	}
}

.cbn-reader > .cbn-utility-row .cbn-language-card {
	border: 1px solid transparent !important;
	border-radius: 15px !important;
	background:
		linear-gradient(135deg, #ffffff 0%, #f5f8fc 62%, #f8f2e7 100%) padding-box,
		linear-gradient(110deg, #caa95b, #5d789a 48%, #7b3348 82%, #d8bd7c) border-box !important;
	box-shadow: 0 16px 34px -22px rgba(5,12,24,.78), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-icon {
	background: linear-gradient(145deg, #07111f 0%, #263f5e 52%, #7b3348 100%) !important;
	border: 1px solid rgba(202,169,91,.32) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px -12px rgba(5,12,24,.85) !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-label { color: #101a2d !important; }
.cbn-reader > .cbn-utility-row .cbn-language-hint { color: #68758a !important; }

/* GTranslate: use ONE visible rounded selector shell. The nested selected
   link is transparent so its own border cannot create a second curved box. */
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher {
	width: 100% !important;
	max-width: 100% !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 40px !important;
	box-sizing: border-box !important;
	border: 1px solid rgba(23,35,61,.17) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 7px 16px -13px rgba(5,12,24,.75) !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a {
	width: 100% !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 8px 34px 8px 11px !important;
	color: #18243c !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a:hover,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a:focus {
	background: transparent !important;
}

@media (max-width: 782px) {
	.cbn-reader > .cbn-utility-row .cbn-language-card {
		border-radius: 14px !important;
	}
	.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected {
		border-radius: 11px !important;
	}
	.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a {
		border-radius: 10px !important;
	}
}

/* Language selector uses the same centered reading width as the Topic Introduction. */
.cbn-reader > .cbn-utility-row {
	width: 100%;
	max-width: 860px;
	margin: 0 auto 16px;
	padding: 0;
	position: relative;
	z-index: 45;
}
.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.cbn-reader > .cbn-utility-row .cbn-language-card {
	width: 100%;
	min-width: 0;
}

@media (max-width: 782px) {
	
	
	
	
	
	.cbn-reader > .cbn-utility-row .cbn-language-copy { display: none !important; }
	.cbn-reader > .cbn-utility-row .cbn-language-icon { flex: 0 0 32px; }
	.cbn-reader > .cbn-utility-row .cbn-language-control {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
	}
	}

/* ------------------------------------------------------------------ *
 * Info Box annotations (reader side)
 * ------------------------------------------------------------------ */
.cbn-annot {
	position: relative;
	cursor: pointer;
	background: linear-gradient(180deg, rgba(212,175,55,.20), rgba(212,175,55,.07));
	border-bottom: 2px dotted #8a6f00;
	border-radius: 2px;
	padding: 0 2px;
	transition: background .15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.cbn-annot:hover,
.cbn-annot:focus-visible {
	background: rgba(212,175,55,.32);
	outline: none;
}
.cbn-annot::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8a6f00;
	margin-left: 4px;
	vertical-align: super;
	animation: cbn-annot-pulse 1.8s ease-in-out infinite;
}
@keyframes cbn-annot-pulse {
	0%, 100% { opacity: .55; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.35); }
}

.cbn-annot-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	perspective: 1400px;
}
.cbn-annot-overlay.cbn-open { display: flex; }
.cbn-annot-backdrop {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 40%, rgba(10,10,15,.6), rgba(5,5,8,.82));
	opacity: 0;
	transition: opacity .25s ease;
	backdrop-filter: blur(2px);
}
.cbn-annot-overlay.cbn-visible .cbn-annot-backdrop { opacity: 1; }
.cbn-annot-scene {
	position: relative;
	width: min(560px, 92vw);
	max-height: 84vh;
}
.cbn-annot-card {
	transform: translateZ(0) scale(.96);
	opacity: 0;
	transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .2s ease;
	will-change: transform, opacity;
	position: relative;
	background: #ffffff;
	color: #1d2634;
	border-radius: 16px;
	padding: 30px 26px 24px;
	max-height: 84vh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 2px solid var(--cbn-accent, #d4af37);
	box-shadow: 0 24px 60px rgba(15,23,42,.22), 0 6px 18px rgba(15,23,42,.12);
	scrollbar-width: thin;
	scrollbar-color: var(--cbn-accent, #d4af37) rgba(15,23,42,.06);
}
.cbn-annot-overlay.cbn-visible .cbn-annot-card {
	transform: translateZ(0) scale(1);
	opacity: 1;
}
.cbn-annot-card::-webkit-scrollbar { width: 6px; }
.cbn-annot-card::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cbn-accent, #d4af37); }
.cbn-annot-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #10182a;
	background: var(--cbn-accent, #d4af37);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.cbn-annot-content { font-size: 15px; line-height: 1.65; }
.cbn-annot-content img { max-width: 100%; height: auto; border-radius: 8px; }
.cbn-annot-content table { max-width: 100%; overflow-x: auto; display: block; }
.cbn-annot-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,23,42,.06);
	border: 1.5px solid rgba(15,23,42,.14);
	border-radius: 50%;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	color: #1d2634;
	box-shadow: none;
	transition: transform .15s ease, background .15s ease, color .15s ease;
	z-index: 2;
}
.cbn-annot-close:hover {
	background: var(--cbn-accent, #d4af37);
	border-color: var(--cbn-accent, #d4af37);
	color: #10182a;
	transform: scale(1.08);
}
@media (max-width: 600px) {
	.cbn-annot-card { padding: 44px 18px 20px; border-radius: 14px; }
	.cbn-annot-close { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 18px; }
	.cbn-annot-label { padding-right: 0; }
}

/* Image alignment set from the admin Info Box editor's align toolbar
 * carries through automatically via inline styles on the <img>; this just
 * makes sure floated images clear cleanly at the end of the note. */
.cbn-annot-content::after { content: ""; display: table; clear: both; }

/* Typewriter reveal for Info Box content (see frontend.js). Text nodes are
 * revealed progressively; non-text elements (images, tables, headings...)
 * simply fade in the moment the typing reaches them so nothing pops in
 * abruptly or jumps the layout around. */
.cbn-annot-content.cbn-tw-active [data-cbn-tw-pending] {
	opacity: 0;
	transition: opacity .25s ease;
}
.cbn-annot-content.cbn-tw-active [data-cbn-tw-shown] {
	opacity: 1;
}
 }

/* ================================================================
   2.16.2 — Language width matches Topic Introduction
   The dedicated Practice Questions utility has been removed. The language
   card now follows the same centered 860px reading width as the intro card
   on desktop,
tablet,
and mobile.
   ================================================================ */
.cbn-reader > .cbn-utility-row,
.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap,
.cbn-reader > .cbn-utility-row .cbn-language-card {
	width: 100% !important;
	max-width: 860px !important;
	box-sizing: border-box;
}
.cbn-reader > .cbn-utility-row {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	grid-template-columns: none !important;
}
.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap {
	max-width: 100% !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-card {
	max-width: 100% !important;
}
@media (max-width: 600px) {
	.cbn-reader > .cbn-utility-row,
.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap,
.cbn-reader > .cbn-utility-row .cbn-language-card {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Refined Info Box palette: professional academic navy, sapphire and warm gold. */
.cbn-annot-overlay .cbn-annot-backdrop {
	background: radial-gradient(circle at 50% 18%, rgba(31,55,88,.52), rgba(6,12,24,.86));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.cbn-annot-card {
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 55%, #f5f7fb 100%);
	color: #17243a;
	border: 1px solid rgba(202,169,91,.72);
	box-shadow: 0 30px 80px rgba(7,18,38,.34), 0 8px 24px rgba(31,55,88,.16), inset 0 1px 0 rgba(255,255,255,.96);
}
.cbn-annot-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	border-radius: 16px 16px 0 0;
	background: linear-gradient(90deg, #17233d, #42698f 48%, #caa95b 100%);
	box-shadow: 0 2px 10px rgba(23,35,61,.12);
	pointer-events: none;
}
.cbn-annot-label {
	color: #fff;
	background: linear-gradient(135deg, #17233d, #35577d 62%, #8f6d27);
	box-shadow: 0 6px 14px rgba(23,35,61,.16);
}
.cbn-annot-content {
	font-size: 15px;
	line-height: 1.72;
	color: #25344b;
}
.cbn-annot-content strong { color: #17233d; }
.cbn-annot-content a { color: #315f8c; }
.cbn-annot-close {
	background: rgba(23,35,61,.07);
	border-color: rgba(23,35,61,.14);
	color: #23324a;
}
.cbn-annot-close:hover {
	background: #17233d;
	border-color: #17233d;
	color: #fff;
}

/* ================================================================
   2.16.5 — Remove frontend copy-protection notice and blocking.
   No other reader/header styling is changed here.
   ================================================================ */
.cbn-header {
	background: linear-gradient(135deg, var(--cbn-navy-900) 0%, var(--cbn-navy-800) 55%, var(--cbn-navy-700) 100%);
	color: var(--cbn-text);
	border-bottom: 1px solid rgba(212,175,55,0.25);
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
}
.cbn-header .cbn-title-text { color: var(--cbn-text) !important; }

/* Google Translate can inject its own blue selection/highlight inline. */
.goog-text-highlight,
.goog-text-highlight * {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	border-color: transparent !important;
}

/* Keep Info Box annotation triggers gold; never allow a blue tap/focus flash. */
.cbn-annot,
.cbn-annot:focus,
.cbn-annot:focus-visible,
.cbn-annot:hover {
	-webkit-tap-highlight-color: transparent !important;
	background: linear-gradient(180deg, rgba(212,175,55,.20), rgba(212,175,55,.07)) !important;
}
.cbn-annot::selection,
.cbn-annot *::selection {
	background: rgba(212,175,55,.22) !important;
	color: inherit !important;
}

/* Fast, stable typewriter: avoid animation-induced layout jumps. */
.cbn-annot-content.cbn-tw-active {
	overflow-anchor: none;
	contain: layout paint;
}

.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_option {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
	overflow-y: visible !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_option {
	z-index: 2147483000 !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_option a {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* 2.17.1 — Keep GTranslate's dropdown above the reader/page containers. */
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_option {
	position: absolute !important;
	max-height: none !important;
}

/* 2.17.3 — Keep the language dropdown above the sticky reader header.
   The dropdown was already given a high z-index, but its parent utility row
   was below the header's stacking layer. This changes only that stacking
   order so the configured language list is not visually covered by the header. */
.cbn-reader > .cbn-utility-row {
	z-index: 10000 !important;
	overflow: visible !important;
}
.cbn-reader > .cbn-utility-row .cbn-gtranslate-wrap,
.cbn-reader > .cbn-utility-row .cbn-language-control,
.cbn-reader > .cbn-utility-row .cbn-language-control .gtranslate_wrapper,
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher {
	overflow: visible !important;
}
.cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_option {
	z-index: 2147483000 !important;
}

/* 2.17.4 — Mobile: make tables inside the reader content horizontally
   scrollable instead of being clipped. Only the table overflow behaviour is
   changed; the table's look (borders, header colours, shadow, radius) is
   untouched. Applies at the plugin's existing mobile breakpoint. */
@media (max-width: 782px) {
	.cbn-reader .cbn-body table {
		display: block !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		table-layout: auto;
	}
}


/* ================================================================
   1.0.0 — Chapterwise Book Notes: View All Books / View All Chapter
   Two equal-size buttons, side by side, at the top of every topic.
   ================================================================ */
.cbn-reader > .cbn-chapter-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0 0 14px;
	position: relative;
	z-index: 70;
}
.cbn-chapter-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid #1e3a5f;
	border-radius: 10px;
	background: #1e3a5f;
	box-shadow: 0 1px 2px rgba(15,30,50,.12);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: .01em;
	text-align: center;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cbn-chapter-btn:hover {
	background: #2a4d7a;
	border-color: #2a4d7a;
	color: #fff !important;
	box-shadow: 0 4px 12px -4px rgba(15,30,50,.35);
}
.cbn-chapter-btn:focus-visible { outline: 3px solid rgba(42,77,122,.35); outline-offset: 2px; }
.cbn-chapter-btn-icon { display: inline-flex; flex: 0 0 auto; }
.cbn-chapter-btn-icon svg { width: 18px; height: 18px; }
.cbn-chapter-btn-label { min-width: 0; overflow-wrap: anywhere; }
.cbn-chapter-btn-arrow { display: none; }

/* Stay side by side on phones too — just more compact. */
@media (max-width: 640px) {
	.cbn-reader > .cbn-chapter-links { gap: 8px; margin: 0 0 10px; }
	.cbn-chapter-btn { min-height: 44px; padding: 8px 8px; font-size: 12.5px; gap: 6px; }
	.cbn-chapter-btn-icon svg { width: 16px; height: 16px; }
}

/* Link not set yet: keep the two-up layout, but show the button as inactive. */
.cbn-chapter-btn.cbn-chapter-btn-disabled {
	background: #8a9bb2;
	border-color: #8a9bb2;
	box-shadow: none;
	opacity: .65;
	cursor: not-allowed;
}


/* ================================================================
   1.0.4 — Mobile: wider reading area (more words per line)
   The reader itself is stretched to the screen width by frontend.js;
   here the inner padding and list indents are trimmed as well.
   ================================================================ */
@media (max-width: 782px) {
	.cbn-reader .cbn-body {
		padding: 10px 9px;
		border-radius: 10px;
	}
	.cbn-reader .cbn-body ul,
	.cbn-reader .cbn-body ol {
		padding-left: 1.15em;
	}
	.cbn-reader .cbn-body li > ul,
	.cbn-reader .cbn-body li > ol {
		padding-left: 1em;
	}
	.cbn-reader .cbn-body blockquote {
		margin-left: 0;
		margin-right: 0;
	}
	.cbn-reader .cbn-body table { max-width: 100%; }
}

/* -----------------------------------------------------------------
 * Embedded Practice Questions switch
 * ----------------------------------------------------------------- */
.cbn-practice-module{margin:14px 0 22px;width:100%;}
.cbn-practice-switch-row{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;}
.cbn-practice-switch-btn{appearance:none;border:1px solid rgba(10,89,194,.16);background:linear-gradient(180deg,#fff,#f5f8fc);color:#0a59c2;border-radius:11px;padding:10px 17px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:750;line-height:1.2;cursor:pointer;box-shadow:0 2px 8px rgba(16,24,40,.07);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;border-left:4px solid #AD5207;}
.cbn-practice-switch-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,24,40,.11);background:#fff;color:#AD5207;}
.cbn-practice-switch-btn:focus-visible{outline:3px solid rgba(10,89,194,.18);outline-offset:2px;}
.cbn-practice-switch-icon{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0a59c2;color:#fff;font-size:12px;font-weight:800;}
.cbn-practice-return .cbn-practice-switch-icon{background:#AD5207;}
.cbn-practice-view{width:100%;margin-top:12px;}
.cbn-practice-view .pq-app{width:100%;}
.cbn-notes-hidden{display:none!important;}
@media (max-width:767px){
 .cbn-practice-module{margin:12px 0 18px;}
 .cbn-practice-switch-row{width:100%;}
 .cbn-practice-switch-btn{width:100%;min-height:44px;padding:11px 14px;font-size:14px;}
 .cbn-practice-view{margin-top:8px;}
}

/* ================================================================
 * 1.1.1 — Practice Questions utility layout polish
 * Desktop/tablet: Language and Practice Questions sit side-by-side.
 * Mobile: Language remains above Practice Questions.
 * ================================================================ */
.cbn-practice-module{margin:14px 0 22px;width:100%;}
.cbn-practice-module .cbn-utility-row{
	margin:0 0 16px;
	padding:0;
	position:relative;
	z-index:40;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:stretch;
	gap:14px;
}
.cbn-practice-module .cbn-gtranslate-wrap,
.cbn-practice-module .cbn-practice-switch-row{width:100%;min-width:0;}
.cbn-practice-module .cbn-practice-switch-row{
	display:flex;
	align-items:stretch;
	justify-content:stretch;
	gap:0;
	flex-wrap:nowrap;
}
.cbn-practice-module .cbn-practice-switch-btn{
	width:100%;
	min-height:58px;
}
.cbn-practice-view{width:100%;margin-top:8px;}
.cbn-practice-view .pq-app{width:100%;}
.cbn-notes-hidden{display:none!important;}

/* When Practice Questions are open, the Notes sticky header must not appear
   underneath the flashcard reader. It is restored automatically on Return. */
.cbn-reader.cbn-practice-active .cbn-header{display:none!important;}

@media (max-width:782px){
	.cbn-practice-module{margin:12px 0 18px;}
	.cbn-practice-module .cbn-utility-row{
		display:flex;
		flex-direction:column;
		gap:9px;
		margin-bottom:10px;
	}
	.cbn-practice-module .cbn-gtranslate-wrap,
	.cbn-practice-module .cbn-practice-switch-row{width:100%;}
	.cbn-practice-module .cbn-practice-switch-btn{min-height:48px;}
	.cbn-practice-view{margin-top:8px;}
}

/* ================================================================
 * 1.1.1 — Practice Questions utility layout polish
 * Desktop/tablet: Language and Practice Questions sit side-by-side.
 * Mobile: Language remains above Practice Questions.
 * ================================================================ */
.cbn-practice-module{margin:14px 0 22px;width:100%;}
.cbn-practice-module .cbn-utility-row{margin:0 0 16px;padding:0;position:relative;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:14px;}
.cbn-practice-module .cbn-gtranslate-wrap,.cbn-practice-module .cbn-practice-switch-row{width:100%;min-width:0;}
.cbn-practice-module .cbn-practice-switch-row{display:flex;align-items:stretch;justify-content:stretch;gap:0;flex-wrap:nowrap;}
.cbn-practice-module .cbn-practice-switch-btn{width:100%;min-height:58px;}
.cbn-practice-view{width:100%;margin-top:8px;}
.cbn-practice-view .pq-app{width:100%;}
.cbn-notes-hidden{display:none!important;}
.cbn-reader.cbn-practice-active .cbn-header{display:none!important;}
@media (max-width:782px){
 .cbn-practice-module{margin:12px 0 18px;}
 .cbn-practice-module .cbn-utility-row{display:flex;flex-direction:column;gap:9px;margin-bottom:10px;}
 .cbn-practice-module .cbn-gtranslate-wrap,.cbn-practice-module .cbn-practice-switch-row{width:100%;}
 .cbn-practice-module .cbn-practice-switch-btn{min-height:48px;}
 .cbn-practice-view{margin-top:8px;}
}


/* ================================================================
 * 1.1.2 — Language dropdown containment
 * Keep the language selector compact. GTranslate's option list is
 * positioned below the selector instead of increasing the language
 * card/reader border height.
 * ================================================================ */
.cbn-reader > .cbn-practice-module .cbn-language-card,
.cbn-reader > .cbn-practice-module .cbn-gtranslate-wrap {
	position: relative !important;
	overflow: visible !important;
}
.cbn-reader > .cbn-practice-module .cbn-language-card {
	z-index: 10001 !important;
}
.cbn-reader > .cbn-practice-module .cbn-language-control,
.cbn-reader > .cbn-practice-module .cbn-language-control .gtranslate_wrapper,
.cbn-reader > .cbn-practice-module .cbn-language-control .gt_switcher {
	position: relative !important;
	overflow: visible !important;
}
.cbn-reader > .cbn-practice-module .cbn-language-control .gt_switcher .gt_option {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	bottom: auto !important;
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	min-width: 100% !important;
	max-width: min(220px, 72vw) !important;
	height: auto !important;
	max-height: 280px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	z-index: 2147483000 !important;
	box-sizing: border-box !important;
}
.cbn-reader > .cbn-practice-module .cbn-language-control .gt_switcher .gt_option a {
	display: block !important;
	box-sizing: border-box !important;
	min-height: 38px !important;
	padding: 8px 10px !important;
	white-space: nowrap !important;
}
/* Do not let a third-party language list create a second large outer border. */
.cbn-reader > .cbn-practice-module .cbn-language-card:has(.gt_switcher .gt_option) {
	min-height: 48px !important;
}

/* Practice Questions now use the same GTranslate control as Notes. */
.cbn-practice-view .pq-lang-switch,
.cbn-practice-view .pq-lang-loading {
	display: none !important;
}


/* ================================================================
 * 1.1.3 — Final language dropdown stacking + containment correction
 * The GTranslate option list must sit above the sticky reader header.
 * The practice utility row creates its own stacking context, so it needs
 * to be above the header as a complete layer, not just the dropdown itself.
 * ================================================================ */
.cbn-practice-module {
	position: relative !important;
	z-index: 10001 !important;
	overflow: visible !important;
}
.cbn-practice-module .cbn-utility-row {
	position: relative !important;
	z-index: 10002 !important;
	overflow: visible !important;
}
.cbn-practice-module .cbn-gtranslate-wrap,
.cbn-practice-module .cbn-language-card,
.cbn-practice-module .cbn-language-control,
.cbn-practice-module .cbn-language-control .gtranslate_wrapper,
.cbn-practice-module .cbn-language-control .gt_switcher {
	position: relative !important;
	overflow: visible !important;
}
.cbn-practice-module .cbn-language-control .gt_switcher .gt_option {
	position: absolute !important;
	top: calc(100% + 7px) !important;
	bottom: auto !important;
	left: 0 !important;
	right: auto !important;
	z-index: 2147483647 !important;
	width: 100% !important;
	min-width: 100% !important;
	max-width: 220px !important;
	max-height: 280px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}
.cbn-practice-module .cbn-language-control .gt_switcher .gt_option a {
	position: relative !important;
	z-index: 2147483647 !important;
}

/* ================================================================
 * 1.1.3 — More restrained question-number hover state
 * Keep the active number prominent while making hover neutral and
 * professional instead of using the primary brown accent.
 * ================================================================ */
.pq-palette-btn:hover:not(.is-locked) {
	transform: translateY(-1px) !important;
	background: #f7f8fa !important;
	border-color: #9aa4b2 !important;
	color: #263246 !important;
	box-shadow: 0 3px 8px rgba(16,24,40,.09) !important;
}
.pq-palette-btn.is-current:hover:not(.is-locked) {
	background: #f1f4f8 !important;
	border-color: #7b8797 !important;
	color: #263246 !important;
	box-shadow: 0 0 0 4px rgba(10,89,194,.12), 0 3px 8px rgba(16,24,40,.10) !important;
}


/* ================================================================
 * 1.1.4 — Single language-selector border + refined question hover
 * The language card itself is now borderless in the integrated reader so
 * the GTranslate selected control is the only visible rounded shell.
 * ================================================================ */
.cbn-practice-module .cbn-language-card {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Keep the selector itself crisp and single-layered. */
.cbn-practice-module .cbn-language-control .gt_switcher .gt_selected {
	border: 1px solid #cbd3dd !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
}

/* A restrained slate-blue hover gives the question palette a polished UI
 * treatment without competing with the active question state. */
.cbn-practice-module .pq-palette-btn:hover:not(.is-locked) {
	background: #eef3f8 !important;
	border-color: #64748b !important;
	color: #1e293b !important;
	box-shadow: 0 3px 9px rgba(30,41,59,.10) !important;
}
.cbn-practice-module .pq-palette-btn.is-current:hover:not(.is-locked) {
	background: #e8eef5 !important;
	border-color: #52677f !important;
	color: #1e293b !important;
	box-shadow: 0 0 0 3px rgba(82,103,127,.13), 0 3px 9px rgba(30,41,59,.10) !important;
}


/* ================================================================
 * 1.1.6 — Language card elevated outer border
 * Keep the Chapterwise language card as the single visible frame with an elevated outer border.
 * The GTranslate selected control itself is borderless so it does
 * not create a second nested frame.
 * ================================================================ */
.cbn-reader > .cbn-utility-row .cbn-language-card {
	border: 2px solid #d1d8e2 !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
	box-shadow: 0 10px 24px -18px rgba(15,23,42,.55), 0 1px 0 rgba(255,255,255,.96) inset !important;
}
.cbn-language-control .gt_switcher .gt_selected,
.cbn-language-control .gt_switcher .gt_selected a {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	outline: none !important;
}
.cbn-language-control .gt_switcher .gt_selected a {
	padding: 8px 30px 8px 11px !important;
}
.cbn-language-control .gt_switcher .gt_selected:hover,
.cbn-language-control .gt_switcher .gt_selected a:hover {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ================================================================
 * 1.1.7 — Definitive single-border language card
 * Keep the Chapterwise outer language card as the ONLY visible frame.
 * GTranslate's internal selected shell must never draw a second border.
 * High-specificity rules intentionally override third-party GTranslate CSS.
 * ================================================================ */
html body .cbn-reader .cbn-practice-module .cbn-language-card,
html body .cbn-reader > .cbn-utility-row .cbn-language-card {
	border: 2px solid #d1d8e2 !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
	box-shadow: 0 10px 24px -18px rgba(15,23,42,.55), 0 1px 0 rgba(255,255,255,.96) inset !important;
}

html body .cbn-reader .cbn-practice-module .cbn-language-control .gt_switcher,
html body .cbn-reader .cbn-practice-module .cbn-language-control .gt_switcher .gt_selected,
html body .cbn-reader .cbn-practice-module .cbn-language-control .gt_switcher .gt_selected a,
html body .cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher,
html body .cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected,
html body .cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

html body .cbn-reader .cbn-practice-module .cbn-language-control .gt_switcher .gt_selected,
html body .cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected {
	border-radius: 0 !important;
}

html body .cbn-reader .cbn-practice-module .cbn-language-control .gt_switcher .gt_selected a,
html body .cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_selected a {
	border-radius: 0 !important;
	padding: 8px 30px 8px 11px !important;
}

/* Keep the dropdown itself as a separate floating list; only the trigger is
   borderless inside the elevated Chapterwise language card. */
html body .cbn-reader .cbn-practice-module .cbn-language-control .gt_switcher .gt_option,
html body .cbn-reader > .cbn-utility-row .cbn-language-control .gt_switcher .gt_option {
	border: 1px solid rgba(23,35,61,.12) !important;
	border-radius: 9px !important;
	background: #fff !important;
	box-shadow: 0 12px 25px -14px rgba(16,24,42,.65) !important;
}

/* Professional question-number hover: restrained slate blue. */
html body .cbn-practice-module .pq-palette-btn:hover:not(.is-locked) {
	background: #eef3f8 !important;
	border-color: #64748b !important;
	color: #1e293b !important;
	box-shadow: 0 3px 9px rgba(30,41,59,.10) !important;
}


/* 1.1.8: refined members-only access card. */
.cbn-locked-box {
	position: relative;
	margin: 2.6em 0 1.2em;
	padding: 34px 30px 28px;
	background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,249,251,.98));
	border: 1px solid #d9dee7;
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(20,31,51,.08), 0 2px 7px rgba(20,31,51,.04);
	color: var(--cbn-content-text);
	overflow: hidden;
}
.cbn-locked-box::before {
	content: ''; position: absolute; inset: 0 0 auto; height: 3px;
	background: linear-gradient(90deg, transparent, var(--cbn-accent), transparent);
	opacity: .85;
}
.cbn-locked-icon {
	width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px;
	display: grid; place-items: center; color: #344054;
	background: #eef1f5; border: 1px solid #d9dee7;
}
.cbn-locked-icon svg { width: 24px; height: 24px; margin: 0; display: block; }
.cbn-locked-eyebrow {
	margin-bottom: 7px; text-transform: uppercase; letter-spacing: .12em;
	font-size: 11px; font-weight: 800; color: #667085;
}
.cbn-locked-title {
	margin: 0 0 9px !important; font-size: clamp(20px, 2.2vw, 25px) !important;
	line-height: 1.25 !important; color: #182230 !important; font-weight: 750 !important;
}
.cbn-locked-text {
	margin: 0 auto 16px !important; padding: 0 !important; width: min(100%, 650px) !important;
	font-size: 14px; line-height: 1.65; color: #667085;
}
.cbn-locked-membership {
	display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
	max-width: 100%; margin: 0 auto 20px; padding: 8px 13px;
	border: 1px solid #d9dee7; border-radius: 999px; background: #f7f8fa;
	font-size: 12.5px; color: #667085;
}
.cbn-locked-membership strong { color: #344054; font-weight: 750; }
.cbn-locked-actions { gap: 9px; }
.cbn-locked-btn {
	padding: 10px 19px; border-radius: 9px; font-size: 13px;
	background: #26364d; color: #fff !important; box-shadow: 0 5px 14px rgba(38,54,77,.16);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cbn-locked-btn:hover { transform: translateY(-1px); background: #1f2d41; box-shadow: 0 8px 18px rgba(38,54,77,.18); }
.cbn-locked-btn-ghost {
	background: #fff; color: #344054 !important; border: 1px solid #d0d5dd; box-shadow: none;
}
.cbn-locked-btn-ghost:hover { background: #f7f8fa; color: #1d2939 !important; border-color: #b9c0ca; }
.cbn-locked-note {
	margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: #98a2b3;
}
@media (max-width: 640px) {
	.cbn-locked-box { padding: 30px 18px 24px; border-radius: 15px; }
	.cbn-locked-membership { border-radius: 12px; }
	.cbn-locked-actions { width: 100%; }
	.cbn-locked-btn { flex: 1 1 150px; text-align: center; }
}

/* 1.2.0 — Stable mobile reader width.
 * Keep the full-width mobile layout in CSS so opening a topic never causes
 * a post-paint JS width correction (the old correction produced a brief
 * shrink/expand flash on phones).
 */
@media (max-width: 782px) {
	.cbn-reader {
		width: calc(100vw - 12px) !important;
		max-width: none !important;
		margin-left: calc(50% - 50vw + 6px) !important;
		margin-right: 0 !important;
	}
}


/* Info Box card: keep pasted bullets, numbering and bold visible even when
 * the theme resets list styles or font weight. */
.cbn-annot-content ul { list-style: disc outside; margin: 0 0 1em 1.4em; padding: 0; }
.cbn-annot-content ol { list-style: decimal outside; margin: 0 0 1em 1.4em; padding: 0; }
.cbn-annot-content ul ul { list-style-type: circle; }
.cbn-annot-content li { display: list-item; margin: 0 0 .35em; }
.cbn-annot-content li > p { margin: 0; }
.cbn-annot-content strong, .cbn-annot-content b { font-weight: 700; }
.cbn-annot-content em, .cbn-annot-content i { font-style: italic; }