/*
 * Codex Reader - aspetto del lettore di codex-comic.com
 * (misure prese dal sito il 15/09/2026: contenitore 1140px, Cinzel, grigio #888, pulsanti neri).
 */

/*
 * Colori: grigi pensati per un fondo scuro (#888, #ccc, titoli bianchi) resi leggibili su fondo bianco.
 * Tavolozza chiara leggibile qui sotto; la scura in fondo al file (html.codex-dark), per tutto il sito.
 */
.codex-main {
	--codex-text: #5f5f5f;
	--codex-strong: #222;
	--codex-heading: #222;
	--codex-link: #333;
	--codex-bg: #fff;
	--codex-line: #dcdcdc;
	--codex-select-bg: rgba(0, 0, 0, 0.06);
	--codex-icon-bg: #ebebeb;
	--codex-icon-fg: #000;
	--codex-btn-bg: #000;
	--codex-btn-fg: #fff;
	--codex-badge-bg: #000;
	--codex-profile-bg: #0a0a0a;
	--codex-field-bg: #fff;
	--codex-field-border: #ccc;
	--codex-tab-bg: #f1f1f1;
	--codex-tab-fg: #333;
	--codex-accent-bg: #790000; /* scheda attiva e pulsanti della pagina utente: il rosso del menu */
	--codex-accent-fg: #fff;
	--codex-th-bg: #ececec;
	--codex-th-fg: #222;
	--codex-notice-bg: #ececec;
	--codex-notice-fg: #222;

	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px 40px;
	font-family: "Cinzel", serif;
	font-size: 14px;
	line-height: 21px;
	color: var(--codex-text);
}

.codex-main *,
.codex-main *::before,
.codex-main *::after {
	box-sizing: border-box;
}

.codex-main a {
	color: inherit;
	text-decoration: none;
}

.codex-main .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------ barra comandi */
/*
 * Misure del lettore a 1639px: blocco comandi alto 119px (16 + 45 + 14 + 44),
 * 50px fino alla tavola; lo stesso blocco si ripete sotto, 50px dopo l'ultima tavola.
 * Le regole "button/select" ripetono le proprietà perché Hello Elementor ne imposta di proprie.
 */

.codex-toolbar {
	margin: 0 0 50px;
}

.codex-toolbar-bottom {
	margin: 50px 0 0;
}

.codex-toolbar-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 16px;
}

.codex-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 3px;
	min-height: 45px;
	margin: 0 0 0 -15px;
	padding: 12px 16px;
	list-style: none;
	font-size: 14px;
	line-height: 21px;
}

.codex-breadcrumb li {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
}

.codex-breadcrumb li + li::before {
	content: "/";
	padding: 0 2px;
}

.codex-main .codex-breadcrumb a {
	color: var(--codex-text);
}

.codex-main .codex-breadcrumb a:hover {
	color: var(--codex-strong);
}

.codex-action-icons {
	display: flex;
	column-gap: 3px;
	margin: 3px -1px 0 0;
	padding: 0;
	list-style: none;
}

.codex-action-icons li {
	margin: 0;
	padding: 0 5px;
}

.codex-main button.codex-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--codex-icon-bg);
	color: var(--codex-icon-fg);
	font-size: 14px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.codex-icon-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.codex-main button.codex-icon-btn:hover,
.codex-main button.codex-icon-btn:focus,
.codex-main button.codex-icon-btn.is-saved {
	background: var(--codex-btn-bg);
	color: var(--codex-btn-fg);
	outline: none;
}

.codex-toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 20px;
	margin-top: 14px;
}

.codex-select-view {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.codex-select-pagination {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-left: auto;
}

.codex-selectpicker {
	position: relative;
	display: inline-block;
	margin: 0;
}

/* Freccia su/giù come l'icona "sort" di Font Awesome. */
.codex-selectpicker::before,
.codex-selectpicker::after {
	content: "";
	position: absolute;
	right: 13px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	pointer-events: none;
}

.codex-selectpicker::before {
	top: 50%;
	margin-top: -6px;
	border-bottom: 4px solid currentColor;
}

.codex-selectpicker::after {
	top: 50%;
	margin-top: 2px;
	border-top: 4px solid currentColor;
}

.codex-main .codex-selectpicker select {
	display: block;
	width: auto;
	height: 36px;
	margin: 0;
	padding: 10px 30px 10px 16px;
	border: 0;
	border-radius: 5px;
	background: var(--codex-select-bg);
	box-shadow: none;
	color: var(--codex-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 16px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Su PC il menu dei capitoli si allarga fino a mostrare il titolo intero, senza scavalcare le pagine. */
@media (min-width: 992px) {
	/* Menu alti come Prev/Next, tutti sulla stessa riga. */
	.codex-toolbar-row {
		align-items: center;
	}

	.codex-main .codex-toolbar-row .codex-selectpicker select {
		height: 44px;
	}

	.codex-toolbar-row .codex-select-view {
		flex: 1 1 0;
		flex-wrap: nowrap;
		min-width: 0;
	}

	.codex-main .codex-selectpicker-chapter {
		flex: 0 1 auto;
		min-width: 0;
	}

	.codex-main .codex-selectpicker-chapter select {
		width: 100%;
	}

	.codex-select-view .codex-selectpicker-style {
		flex: none;
	}
}

.codex-main .codex-selectpicker select:focus {
	outline: none;
}

.codex-selectpicker select option {
	color: #333;
	background: #fff;
}

.codex-nav-links {
	display: flex;
	gap: 3px;
}

.codex-main a.codex-btn {
	position: relative;
	display: inline-block;
	height: 44px;
	margin: 0;
	padding: 9px 17px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: var(--codex-btn-bg);
	color: var(--codex-btn-fg);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.codex-main a.codex-btn:hover,
.codex-main a.codex-btn:focus {
	color: var(--codex-btn-fg);
	opacity: 0.8;
}

.codex-main a.codex-btn.codex-prev {
	padding-left: 30px;
	border-radius: 5px 4px 4px 5px;
}

.codex-main a.codex-btn.codex-next {
	padding-right: 30px;
	border-radius: 4px 5px 5px 4px;
}

/* Frecce piene ("ion-md-arrow-back/forward"): SVG usato come maschera, prende il colore del testo. */
.codex-main a.codex-btn.codex-prev::before,
.codex-main a.codex-btn.codex-next::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.codex-main a.codex-btn.codex-prev::before {
	left: 11px;
}

.codex-main a.codex-btn.codex-next::before {
	right: 11px;
	transform: scaleX(-1);
}

/* Il pulsante resta normale anche quando non porta da nessuna parte. */
.codex-main a.codex-btn.is-disabled {
	pointer-events: none;
}

/* Pulsante del menu (solo telefono): mostra capitolo e stile di lettura. */
.codex-main button.codex-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 32px;
	margin: 0 7px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--codex-text);
	cursor: pointer;
}

.codex-menu-toggle svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.codex-menu-toggle .codex-menu-close,
.codex-toolbar.is-open .codex-menu-toggle .codex-menu-open {
	display: none;
}

.codex-toolbar.is-open .codex-menu-toggle .codex-menu-close {
	display: block;
}

/* In lettura a lista non si mostra la scelta della pagina. */
.codex-reader-list .codex-selectpicker-page {
	display: none;
}

/* --------------------------------------------------------------- tavole */

.codex-pages {
	position: relative;
	display: flow-root; /* il margine sotto l'ultima tavola non si somma a quello del blocco comandi */
	padding: 0 15px;
	line-height: 30px;
	text-align: center;
}

/*
 * La metà sinistra delle tavole porta alla pagina precedente, la destra alla successiva,
 * con un cursore a freccia (disegnato qui, colore #eb3349).
 */
.codex-main a.codex-hover-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 50%;
}

.codex-main a.codex-hover-prev {
	left: 0;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28'%3E%3Cpath fill='%23eb3349' stroke='%23eb3349' stroke-width='2' stroke-linejoin='round' d='M13.5 2 1 14l12.5 12 1.8-1.8L6.2 16H29v-4H6.2l9.1-8.2z'/%3E%3C/svg%3E"), pointer;
}

.codex-main a.codex-hover-next {
	right: 0;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28'%3E%3Cpath fill='%23eb3349' stroke='%23eb3349' stroke-width='2' stroke-linejoin='round' d='M16.5 2 29 14 16.5 26l-1.8-1.8 9.1-8.2H1v-4h22.8l-9.1-8.2z'/%3E%3C/svg%3E"), pointer;
}

.codex-main a.codex-hover-zone.is-disabled {
	cursor: default;
}

.codex-style-list .codex-hover-zone {
	display: none;
}

/* ------------------------------------------------ visore a schermo intero */

html.codex-viewer-open,
html.codex-viewer-open body {
	overflow: hidden;
}

.codex-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	background: #000;
	color: #fff;
	touch-action: none;
	overscroll-behavior: contain;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.codex-viewer[hidden] {
	display: none;
}

.codex-viewer-stage {
	position: absolute;
	inset: 0;
}

.codex-viewer.is-zoomed .codex-viewer-stage {
	cursor: grab;
}

.codex-viewer.is-dragging .codex-viewer-stage {
	cursor: grabbing;
}

.codex-viewer img.codex-viewer-img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	height: auto;
	transform-origin: 0 0;
	will-change: transform;
	-webkit-user-drag: none;
}

.codex-viewer.is-animating img.codex-viewer-img {
	transition: transform 0.2s ease-out;
}

/* Metà sinistra / destra per indietro / avanti; con lo zoom restano solo due fasce ai bordi. */
.codex-viewer button.codex-viewer-zone,
.codex-viewer button.codex-viewer-zone:hover,
.codex-viewer button.codex-viewer-zone:focus {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 50%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline: none;
}

.codex-viewer.is-zoomed button.codex-viewer-zone {
	width: 12%;
}

.codex-viewer button.codex-viewer-prev {
	left: 0;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28'%3E%3Cpath fill='%23eb3349' stroke='%23eb3349' stroke-width='2' stroke-linejoin='round' d='M13.5 2 1 14l12.5 12 1.8-1.8L6.2 16H29v-4H6.2l9.1-8.2z'/%3E%3C/svg%3E"), pointer;
}

.codex-viewer button.codex-viewer-next {
	right: 0;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28'%3E%3Cpath fill='%23eb3349' stroke='%23eb3349' stroke-width='2' stroke-linejoin='round' d='M16.5 2 29 14 16.5 26l-1.8-1.8 9.1-8.2H1v-4h22.8l-9.1-8.2z'/%3E%3C/svg%3E"), pointer;
}

.codex-viewer button.codex-viewer-zone.is-disabled {
	cursor: default;
}

/* Freccia visibile al passaggio del mouse (e, tenue, sugli schermi a tocco). */
.codex-viewer-zone::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55) no-repeat center / 22px;
	opacity: 0;
	transition: opacity 0.2s;
}

.codex-viewer-prev::after {
	left: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M328 112 184 256l144 144 32-32-112-112 112-112z'/%3E%3C/svg%3E");
}

.codex-viewer-next::after {
	right: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M184 112l144 144-144 144-32-32 112-112-112-112z'/%3E%3C/svg%3E");
}

.codex-viewer-zone:hover::after {
	opacity: 1;
}

.codex-viewer-zone.is-disabled::after {
	display: none;
}

@media (hover: none) {
	.codex-viewer-zone::after {
		opacity: 0.5;
	}
}

.codex-viewer-bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 10px 16px;
	background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	font-size: 15px;
	line-height: 1;
	pointer-events: none;
}

.codex-viewer-bar > * {
	pointer-events: auto;
}

.codex-viewer button.codex-viewer-close,
.codex-viewer button.codex-viewer-close:hover,
.codex-viewer button.codex-viewer-close:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
}

.codex-viewer button.codex-viewer-close:hover {
	background: #790000;
}

.codex-viewer-close svg {
	fill: currentColor;
}

.codex-page {
	margin: 0;
}

.codex-page[hidden] {
	display: none;
}

.codex-page img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 20px;
}

.codex-page-link {
	display: block;
	cursor: pointer;
}

.codex-style-list .codex-page-link {
	cursor: default;
}

/* Link 10px sotto la tavola, senza spostare il blocco comandi sottostante. */
.codex-full-size {
	position: relative;
	height: 0;
	text-align: center;
}

.codex-main .codex-full-size a {
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	display: block;
	height: 30px;
	color: var(--codex-text);
	font-size: 14px;
	line-height: 30px;
}

.codex-main .codex-full-size a:hover {
	color: var(--codex-strong);
}

.codex-style-list ~ .codex-full-size {
	display: none;
}

.codex-empty {
	padding: 60px 0;
	text-align: center;
}

.codex-chapter-notes,
.codex-comments {
	max-width: 940px;
	margin: 40px auto 0;
}

/* --------------------------------------------------- pagina della serie */
/* Misure della pagina /webcomic/codex/ a 1639px. */

.codex-main.codex-main-archive {
	max-width: none;
	padding: 0;
}

.codex-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

.codex-profile {
	display: flow-root;
	margin: 0 0 50px;
	background: var(--codex-profile-bg);
}

.codex-profile-title h1 {
	margin: 14px 0 13.4px;
	color: #fff;
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
}

.codex-summary {
	display: flex;
	padding: 15px 0 50px;
}

.codex-summary-image {
	flex: 0 0 225px;
	padding: 15px;
	background: rgba(235, 235, 235, 0.3);
}

.codex-summary-image img {
	display: block;
	width: 193px;
	height: 273px;
	margin: 7px 0 0;
	object-fit: cover;
}

.codex-summary-content {
	display: flex;
	flex: 1;
	min-height: 318px;
	margin-left: 30px;
	padding: 20px 30px 30px;
	background: rgba(235, 235, 235, 0.3);
}

.codex-summary-items {
	flex: 0 0 557px;
	max-width: 70%;
}

.codex-summary-item {
	display: flex;
	margin: 0 0 3px;
	min-height: 28px;
}

.codex-summary-heading {
	flex: 0 0 106px;
}

.codex-summary-heading h5 {
	margin: 3px 0 8px;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 16.8px;
}

.codex-summary-value,
.codex-main .codex-summary-value a {
	color: #e6e6e6;
	font-size: 14px;
	line-height: 21px;
}

.codex-summary-status {
	flex: 1;
	margin-top: 56px;
}

.codex-manga-action {
	display: flex;
	margin: 0 -15px;
	padding-top: 16px;
}

.codex-action {
	flex: 0 0 134px;
	padding: 0 15px;
	text-align: center;
}

.codex-action + .codex-action {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.codex-main a.codex-action-icon {
	display: block;
	width: 36px;
	height: 48px;
	margin: 0 auto 1px;
	color: #fff;
}

.codex-action-icon svg {
	display: block;
	width: 36px;
	height: 48px;
	fill: currentColor;
}

/* Il riquadro della serie resta scuro in entrambi i temi: testi chiari. */
.codex-action-detail {
	color: #ddd;
	font-size: 14px;
	line-height: 19px;
}

.codex-blog-heading {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 35px;
	border-bottom: 2px solid #7b7b7b;
	text-transform: uppercase;
}

.codex-heading-star {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 16px -2px 0;
	background: var(--codex-badge-bg);
	color: #fff;
}

.codex-heading-star::after {
	content: "";
	position: absolute;
	top: 10px;
	right: -5px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid var(--codex-badge-bg);
}

.codex-heading-star svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.codex-blog-heading h2 {
	flex: 0 0 245px;
	margin: 0;
	color: var(--codex-heading);
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 21.6px;
}

.codex-main button.codex-reverse-order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--codex-strong);
	cursor: pointer;
}

.codex-reverse-order svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	transform: rotate(90deg);
}

.codex-listing-chapters {
	margin: -15px 0 40px; /* 20px + lo spazio di un "Show more" */
	padding: 0;
	list-style: none;
}

.codex-listing-chapters li {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 60px;
	margin: 0;
	line-height: 30px;
}

.codex-listing-chapters li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--codex-line);
}

.codex-main .codex-listing-chapters a {
	padding: 15px 0;
	color: var(--codex-link);
	font-weight: 600;
}

.codex-release-date {
	color: var(--codex-text);
	white-space: nowrap;
}

.codex-main a.codex-edit-link {
	display: inline-block;
	padding: 20px 0;
	color: var(--codex-link);
}

.codex-discussion {
	min-height: 81px;
	padding-bottom: 40px;
}

/* Commenti WordPress in "MANGA DISCUSSION": la pagina ha il fondo bianco; testo #888, nomi e titoli #333, riquadri come i select. */
.codex-discussion .codex-comment-list,
.codex-discussion .codex-comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.codex-discussion .codex-comment-list .children {
	margin-left: 40px;
}

.codex-discussion .comment-body {
	position: relative;
	margin: 0 0 20px;
	padding: 15px 15px 15px 78px;
	min-height: 78px;
	border-radius: 5px;
	background: var(--codex-select-bg);
	color: var(--codex-text);
	font-size: 14px;
	line-height: 1.6;
}

.codex-discussion .comment-author .avatar {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.codex-discussion .comment-author .fn,
.codex-discussion .comment-author .fn a {
	color: var(--codex-strong);
	font-style: normal;
	font-weight: 600;
}

.codex-discussion .comment-author .says {
	display: none;
}

.codex-discussion .comment-metadata,
.codex-discussion .comment-metadata a,
.codex-discussion .comment-awaiting-moderation {
	color: var(--codex-text);
	font-size: 12px;
}

.codex-discussion .comment-content p {
	margin: 8px 0 0;
}

.codex-discussion .reply {
	margin-top: 8px;
	font-size: 12px;
	text-transform: uppercase;
}

.codex-discussion .codex-reply-title {
	margin: 10px 0 15px;
	color: var(--codex-strong);
	font-size: 16px;
	font-weight: 600;
}

.codex-discussion .codex-reply-title small {
	margin-left: 10px;
	font-size: 12px;
	font-weight: 400;
}

.codex-discussion .comment-form {
	color: var(--codex-text);
	font-size: 14px;
}

.codex-discussion .comment-form p {
	margin: 0 0 15px;
}

.codex-discussion .comment-form label {
	display: block;
	margin: 0 0 5px;
}

.codex-discussion .comment-form .comment-form-cookies-consent label {
	display: inline;
	margin-left: 5px;
}

.codex-discussion .comment-form input[type="text"],
.codex-discussion .comment-form input[type="email"],
.codex-discussion .comment-form input[type="url"],
.codex-discussion .comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--codex-field-border);
	border-radius: 5px;
	background: var(--codex-field-bg);
	color: var(--codex-strong);
	font-family: inherit;
	font-size: 14px;
}

.codex-discussion .comment-form textarea {
	min-height: 120px;
}

.codex-discussion .codex-turnstile {
	margin: 0 0 15px;
}

.codex-discussion .comment-form input.codex-comment-submit {
	height: 44px;
	padding: 9px 17px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: var(--codex-btn-bg);
	color: var(--codex-btn-fg);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.codex-discussion .comment-form input.codex-comment-submit:hover,
.codex-discussion .comment-form input.codex-comment-submit:focus {
	opacity: 0.8;
}

.codex-discussion .codex-comments-closed {
	color: var(--codex-text);
}

/* ---------------------------------------------------------- pagina utente */

/* Misure della pagina "User Settings"; il -10px annulla il margine interno della pagina di Hello Elementor. */
.codex-main.codex-user-page {
	max-width: 1160px;
	margin: 50px -12px 0 -8px;
	padding: 0 15px 50px;
}

/* Hello Elementor sottolinea i link e colora le righe delle tabelle dentro le pagine. */
.page-content .codex-main a,
.codex-main a {
	text-decoration: none;
}

.codex-main .codex-table,
.codex-main .codex-table th,
.codex-main .codex-table td {
	border: 0;
	background-color: transparent;
}

.codex-main .codex-table thead th {
	background-color: var(--codex-th-bg);
}

.codex-user-header {
	margin: 0 0 30px;
	border-bottom: 1px solid var(--codex-line);
}

.codex-user-header h1 {
	margin: 0 0 8px;
	color: var(--codex-heading);
	font-family: inherit;
	font-size: 30px;
	font-weight: 400;
	line-height: 36px;
}

/* Pagina utente: testi più grandi, più marcati e grigio scuro (richiesta di Giuseppe, 16/09/2026). */
.codex-main.codex-user-page {
	--codex-text: #333;
	font-size: 15px;
	font-weight: 600;
}

html.codex-dark .codex-main.codex-user-page {
	--codex-text: #d6d6d6;
}

.codex-user-page .codex-table {
	font-size: 15px;
}

.codex-main.codex-user-page button.codex-submit,
.codex-main.codex-user-page button.codex-link-button {
	font-size: 15px;
	font-weight: 600;
}

.codex-user-page .codex-user-header h1 {
	font-weight: 600;
}

.codex-user-page .codex-settings-heading h3,
.codex-user-page .codex-settings-title h3 {
	font-size: 17px;
	font-weight: 700;
}

.codex-user-page .codex-settings-title p {
	font-size: 13px;
}

.codex-main .codex-item-title,
.codex-main .codex-history-info h3 a {
	color: var(--codex-strong);
	font-size: 17px;
	font-weight: 700;
}

.codex-main .codex-item-chapter,
.codex-main .codex-history-chapter a {
	color: var(--codex-text);
}

.codex-user-notice {
	margin: -20px 0 20px;
	padding: 10px 15px;
	background: var(--codex-notice-bg);
	color: var(--codex-notice-fg);
}

.codex-settings {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	line-height: 30px;
}

.codex-nav-tabs {
	flex: 0 0 255px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.codex-nav-tabs li {
	margin: 0;
}

.codex-main .codex-nav-tabs a {
	position: relative;
	display: flex;
	align-items: center;
	height: 52px;
	padding: 10px 15px 8px;
	border-bottom: 1px solid var(--codex-bg);
	background: var(--codex-tab-bg);
	color: var(--codex-tab-fg);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.codex-main .codex-nav-tabs li:not(.is-active) a:hover {
	color: var(--codex-accent-bg);
}

.codex-nav-tabs svg {
	width: 16px;
	height: 16px;
	margin-right: 15px;
	fill: currentColor;
}

.codex-main .codex-nav-tabs li.is-active a {
	background: var(--codex-accent-bg);
	color: var(--codex-accent-fg);
}

.codex-nav-tabs li.is-active a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -8px;
	margin-top: -8px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid var(--codex-accent-bg);
}

.codex-tab-content {
	flex: 1;
	min-width: 0;
}

.codex-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 21px;
}

.codex-table th {
	padding: 5px;
	background: var(--codex-th-bg);
	color: var(--codex-th-fg);
	font-weight: 600;
	text-align: left;
}

.codex-main .codex-table td {
	padding: 10px 5px;
	vertical-align: middle;
}

.codex-table-empty {
	color: var(--codex-text);
	text-align: center;
}

.codex-bookmark-item,
.codex-history-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.codex-thumb img {
	display: block;
	width: 55px;
	height: 78px;
	object-fit: cover;
}

.codex-item-title,
.codex-item-chapter {
	display: block;
}

.codex-history {
	display: flex;
	flex-wrap: wrap;
}

.codex-history-item {
	width: 255px;
	padding: 10px;
}

.codex-history-info h3 {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
}

.codex-history-chapter {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 15.4px;
}

.codex-history-time {
	margin-top: 5px;
	font-size: 11px;
	line-height: 16.5px;
}

.codex-settings-heading h3,
.codex-settings-title h3 {
	margin: 10px 0 5px;
	color: var(--codex-strong);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
}

.codex-settings-title p {
	margin: 0;
	font-size: 12px;
}

.codex-radio {
	display: flex;
	align-items: center;
	gap: 8px;
}

.codex-radio label {
	margin: 0;
}

.codex-main button.codex-submit,
.codex-main button.codex-link-button {
	margin: 10px 0 20px;
	padding: 6px 18px;
	border: 0;
	border-radius: 3px;
	background: var(--codex-accent-bg);
	color: var(--codex-accent-fg);
	font-family: inherit;
	font-size: 14px;
	line-height: 24px;
	cursor: pointer;
}

.codex-main button.codex-submit:hover,
.codex-main button.codex-submit:focus {
	background: var(--codex-accent-bg);
	color: var(--codex-accent-fg);
	opacity: 0.85;
}

.codex-main button.codex-link-button {
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--codex-text);
	text-decoration: underline;
}

.codex-account-block {
	margin: 0 0 20px;
}

.codex-avatar img {
	display: block;
	width: 195px;
	height: 195px;
	object-fit: cover;
}

.codex-field {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 15px;
	margin: 0 0 8px;
}

.codex-field label {
	min-width: 180px;
}

.codex-main .codex-field input {
	width: 100%;
	max-width: 360px;
	padding: 6px 10px;
	border: 1px solid var(--codex-field-border);
	border-radius: 3px;
	background: var(--codex-field-bg);
	color: var(--codex-strong);
	font-family: inherit;
	font-size: 14px;
}

/* ------------------------------------------------------------ tema scuro */
/* Classe messa su <html> dal pulsante "Dark/Light Mode" o dalla preferenza dell'utente (vale per tutto il sito). */

html.codex-dark .codex-main {
	--codex-text: #b5b5b5;
	--codex-strong: #eee;
	--codex-heading: #f2f2f2;
	--codex-link: #e2e2e2;
	--codex-bg: #121212;
	--codex-line: #383838;
	--codex-select-bg: rgba(255, 255, 255, 0.1);
	--codex-icon-bg: #333;
	--codex-icon-fg: #eee;
	--codex-btn-bg: #3a3a3a;
	--codex-btn-fg: #fff;
	--codex-badge-bg: #444;
	--codex-profile-bg: #1d1d1d;
	--codex-field-bg: #1e1e1e;
	--codex-field-border: #444;
	--codex-tab-bg: #262626;
	--codex-tab-fg: #e2e2e2;
	--codex-th-bg: #2a2a2a;
	--codex-th-fg: #eee;
	--codex-notice-bg: #2a2a2a;
	--codex-notice-fg: #eee;
}

html.codex-dark .codex-main button.codex-icon-btn:hover,
html.codex-dark .codex-main button.codex-icon-btn:focus,
html.codex-dark .codex-main button.codex-icon-btn.is-saved {
	background: #eee;
	color: #111;
}

html.codex-dark .codex-selectpicker select option {
	color: #eee;
	background: #222;
}

/* ------------------------------------------------- lettore: tablet e telefono */
/*
 * Misure del lettore a 390, 600 e 768px. Larghezza come il "container" di Bootstrap
 * (960 / 720 / 540px); sotto i 992px percorso al centro, menu e pagine centrati su righe proprie;
 * sotto i 576px capitolo e stile stanno dietro il pulsante del menu e Prev/Next mostrano solo la freccia.
 */

@media (max-width: 1199px) {
	.codex-main.codex-main-chapter {
		max-width: 960px;
	}
}

@media (max-width: 991px) {
	.codex-main.codex-main-chapter {
		max-width: 720px;
	}

	.codex-toolbar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "bc icons" "view view" "pag pag";
	}

	.codex-toolbar-top,
	.codex-toolbar-row {
		display: contents;
	}

	.codex-breadcrumb {
		grid-area: bc;
		padding-top: 16px;
	}

	/* Testo continuo centrato: un titolo lungo va a capo restando in mezzo. */
	.codex-breadcrumb ol {
		display: block;
		margin: 0;
		padding-top: 13.5px;
		padding-bottom: 13.5px;
		font-size: 12px;
		line-height: 18px;
		text-align: center;
	}

	.codex-breadcrumb li {
		display: inline;
	}

	.codex-action-icons {
		grid-area: icons;
		align-self: start;
		margin-top: 19px;
	}

	.codex-select-view {
		grid-area: view;
		justify-content: center;
		gap: 0 7px;
		margin-top: 14px;
	}

	.codex-select-view .codex-selectpicker,
	.codex-select-pagination .codex-selectpicker {
		padding: 5px 0;
	}

	.codex-main .codex-selectpicker-chapter select {
		width: 450px;
		max-width: 100%;
	}

	.codex-select-pagination {
		grid-area: pag;
		justify-content: center;
		gap: 9px;
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.codex-main.codex-main-chapter {
		max-width: 540px;
	}

	.codex-pages {
		padding: 0;
	}
}

@media (max-width: 575px) {
	.codex-main.codex-main-chapter {
		max-width: none;
	}

	.codex-toolbar {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "bc bc" "icons pag" "view view";
		margin-bottom: 10px;
	}

	.codex-toolbar.is-open {
		grid-template-areas: "bc bc" "icons icons" "view view" "pag pag";
	}

	.codex-toolbar-bottom {
		margin-top: 30px;
	}

	.codex-breadcrumb {
		padding-top: 10px;
	}

	.codex-breadcrumb ol {
		min-height: 21px;
		margin: 0 -15px 5px;
		padding: 1.5px 0;
	}

	.codex-action-icons {
		margin-top: 3px;
		margin-left: 0;
		padding-bottom: 6px;
	}

	.codex-select-view {
		display: none;
		flex-direction: column;
		align-items: center;
		margin-top: 0;
	}

	.codex-toolbar.is-open .codex-select-view {
		display: flex;
	}

	.codex-main .codex-selectpicker-chapter {
		align-self: stretch;
	}

	.codex-main .codex-selectpicker-chapter select {
		width: 100%;
	}

	.codex-select-view .codex-selectpicker,
	.codex-select-pagination .codex-selectpicker {
		padding: 5px 0;
	}

	.codex-main .codex-selectpicker select {
		height: 26px;
		padding: 5px 30px 5px 16px;
	}

	.codex-select-pagination {
		align-self: start;
		justify-content: flex-end;
		gap: 0;
		margin-top: -2px;
	}

	.codex-toolbar.is-open .codex-select-pagination {
		margin-top: 0;
	}

	.codex-main button.codex-menu-toggle {
		display: inline-flex;
		margin-top: 3px;
	}

	.codex-selectpicker-page {
		margin-right: 8px;
	}

	.codex-nav-links {
		gap: 2px;
		margin-top: 2px;
	}

	/* Prev/Next: solo la freccia. */
	.codex-main a.codex-btn.codex-prev,
	.codex-main a.codex-btn.codex-next {
		width: 35px;
		height: 32px;
		padding: 3px 0;
		overflow: hidden;
		color: transparent;
		font-size: 16px;
		line-height: 24px;
	}

	.codex-main a.codex-btn.codex-prev::before,
	.codex-main a.codex-btn.codex-next::before {
		left: 50%;
		right: auto;
		width: 16px;
		height: 16px;
		margin: -8px 0 0 -8px;
		background-color: var(--codex-btn-fg);
	}

	.codex-main a.codex-btn.codex-back {
		height: 32px;
		padding: 3px 10px;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------- telefono */

@media (max-width: 767px) {
	.codex-summary,
	.codex-summary-content,
	.codex-settings {
		flex-direction: column;
	}

	.codex-summary-image {
		flex: none;
		align-self: center;
	}

	.codex-summary-content {
		margin: 20px 0 0;
	}

	.codex-summary-items {
		flex: none;
		max-width: none;
	}

	.codex-summary-status {
		margin-top: 10px;
	}

	.codex-listing-chapters li {
		flex-wrap: wrap;
	}

	/* Segnalibri: la tabella diventa una scheda (copertina e titolo sopra, data ed "Elimina" sotto). */
	.codex-user-page .codex-table thead {
		display: none;
	}

	.codex-user-page .codex-table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 12px 16px;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid var(--codex-line);
	}

	.codex-main.codex-user-page .codex-table td {
		padding: 0;
	}

	.codex-user-page .codex-table td:first-child {
		grid-column: 1 / -1;
	}

	.codex-user-page .codex-table td:last-child:not(:first-child) {
		text-align: right;
	}

	.codex-user-page .codex-bookmark-item {
		gap: 14px;
		align-items: center;
	}

	.codex-user-page .codex-item-title {
		margin-bottom: 4px;
		line-height: 22px;
	}

	.codex-user-page .codex-item-chapter {
		line-height: 22px;
	}

	.codex-user-page .codex-history-item {
		width: 100%;
		padding: 14px 0;
		border-bottom: 1px solid var(--codex-line);
	}
}

/* Pagina utente sotto i 1024px: le schede vanno sopra il contenuto, così la tabella ha tutta la larghezza. */
@media (max-width: 1023px) {
	.codex-settings {
		flex-direction: column;
		gap: 30px;
	}

	.codex-nav-tabs,
	.codex-tab-content {
		flex: none;
		width: 100%;
	}

	.codex-nav-tabs li.is-active a::after {
		display: none;
	}
}