/* =========================================================================
   Manga detail page — Madara child theme
   Loaded ONLY on single wp-manga pages (see mrm-single.php), so nothing here
   can reach the rest of the site.
   ========================================================================= */

:root {
	--mrm-accent: #4f7cff;
	--mrm-rank: #ff6b3d;

	--mrm-ink: #16181d;
	--mrm-muted: #6d7480;
	--mrm-line: #e4e6ea;
	--mrm-chip: #f2f3f5;
	--mrm-panel: #ffffff;

	--mrm-radius: 10px;

	/* Reading progress — the purple run of already-read chapters. */
	--mrm-progress: #8b5cf6;
	--mrm-progress-bg: rgba(139, 92, 246, .09);
	--mrm-progress-strong: rgba(139, 92, 246, .28);
	--mrm-progress-muted: rgba(139, 92, 246, .72);

	/* The cover box. Change these two and everything reflows around them. */
	--mrm-cover-w: 240px;
	--mrm-cover-ratio: 2 / 3;
}

body.dark {
	--mrm-progress-bg: rgba(139, 92, 246, .13);
	--mrm-progress-strong: rgba(139, 92, 246, .32);
	--mrm-progress-muted: rgba(178, 148, 255, .8);
	--mrm-ink: #eceff4;
	--mrm-muted: #99a1ae;
	--mrm-line: #2c313a;
	--mrm-chip: #23282f;
	--mrm-panel: #1c2027;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.mrm-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 26px 0 30px;
	background: #14161b;
}

.mrm-hero__backdrop {
	position: absolute;
	inset: -60px;
	z-index: 0;
	background-size: cover;
	background-position: center 22%;
	filter: blur(38px) saturate(1.3);
	transform: scale(1.15);
	opacity: .55;
}

.mrm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(12, 14, 18, .82) 0%, rgba(12, 14, 18, .90) 55%, rgba(12, 14, 18, .97) 100%);
}

.mrm-hero__container {
	position: relative;
	z-index: 2;
	max-width: 1640px;
}

/* Breadcrumb sits on dark artwork here. */
.mrm-hero .c-breadcrumb,
.mrm-hero .c-breadcrumb a,
.mrm-hero .c-breadcrumb span,
.mrm-hero .c-breadcrumb li {
	color: rgba(255, 255, 255, .62) !important;
	font-size: 12px;
}

.mrm-hero .c-breadcrumb a:hover {
	color: #fff !important;
}

.mrm-hero__grid {
	display: grid;
	grid-template-columns: var(--mrm-cover-w) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin-top: 14px;
}

/* -------------------------------------------------------------------------
   Cover — a fixed box the artwork fills exactly, whatever its own dimensions
   ---------------------------------------------------------------------- */

.mrm-hero__cover {
	width: var(--mrm-cover-w);
	aspect-ratio: var(--mrm-cover-ratio);
	border-radius: var(--mrm-radius);
	overflow: hidden;
	background: #23262d;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
	position: relative;
}

.mrm-hero__cover img,
.mrm-hero__cover-empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;      /* fills the box, crops overflow, never distorts */
	object-position: center;
}

.mrm-hero__cover-empty {
	background: linear-gradient(140deg, #2a2e36, #1c1f25);
}

/* -------------------------------------------------------------------------
   Title block
   ---------------------------------------------------------------------- */

.mrm-hero__body {
	min-width: 0;
}

.mrm-hero__badges:empty {
	display: none;
}

.mrm-hero__title {
	margin: 6px 0 6px;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff !important;
}

.mrm-hero__alt {
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .58) !important;
}

/* Facts row: rating, chapters, views, type */

.mrm-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.mrm-facts .mrm-facts__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, .78) !important;
}

.mrm-facts .mrm-facts__item i {
	color: rgba(255, 255, 255, .45);
	font-size: 15px;
}

/* Links inside the facts row inherit the row colour — without this the
   comment link fell back to the theme's dark link colour and vanished. */
.mrm-facts .mrm-facts__item a {
	color: inherit !important;
	text-decoration: none !important;
}

.mrm-facts .mrm-facts__item a:hover {
	color: #fff !important;
}

.mrm-facts .mrm-facts__item--rating i {
	color: #ffc043;
}

.mrm-facts .mrm-facts__item--rating strong {
	font-size: 14.5px;
	color: #fff !important;
}

.mrm-facts .mrm-facts__sub {
	font-weight: 500;
	color: rgba(255, 255, 255, .5) !important;
}

/* -------------------------------------------------------------------------
   Actions: reading list + read buttons
   ---------------------------------------------------------------------- */

.mrm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.mrm-hero__actions .nav-links,
.mrm-hero__actions #init-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.mrm-hero__actions .c-btn,
.mrm-s-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 42px;
	padding: 0 18px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .1);
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background .14s ease, border-color .14s ease;
}

.mrm-hero__actions .c-btn:hover,
.mrm-s-btn:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .3);
}

.mrm-s-btn--primary {
	background: var(--mrm-accent);
	border-color: var(--mrm-accent);
	box-shadow: 0 6px 18px rgba(79, 124, 255, .38);
}

.mrm-s-btn--primary:hover {
	background: #4069e6;
	border-color: #4069e6;
}

.mrm-s-btn--primary.is-set {
	background: #1f8f5f;
	border-color: #1f8f5f;
	box-shadow: 0 6px 18px rgba(31, 143, 95, .34);
}

.mrm-s-btn--primary.is-set:hover {
	background: #1b7d53;
	border-color: #1b7d53;
}

/* -------------------------------------------------------------------------
   Reading list dropdown (<details> — opens without JavaScript)
   ---------------------------------------------------------------------- */

.mrm-status {
	position: relative;
	display: inline-block;
}

.mrm-status > summary {
	list-style: none;
}

.mrm-status > summary::-webkit-details-marker,
.mrm-status > summary::marker {
	display: none;
	content: "";
}

.mrm-status__caret {
	font-size: 15px;
	opacity: .8;
	transition: transform .15s ease;
}

.mrm-status[open] .mrm-status__caret {
	transform: rotate(180deg);
}

.mrm-status.is-saving > summary {
	opacity: .6;
	pointer-events: none;
}

.mrm-status__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 216px;
	padding: 6px;
	border: 1px solid var(--mrm-line);
	border-radius: 10px;
	background: var(--mrm-panel);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}

.mrm-status__option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 11px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--mrm-ink) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.mrm-status__option i {
	font-size: 17px;
	color: var(--mrm-muted);
	width: 18px;
	text-align: center;
}

.mrm-status__option:hover {
	background: var(--mrm-chip);
}

.mrm-status__option.is-current {
	background: var(--mrm-accent);
	color: #fff !important;
}

.mrm-status__option.is-current i {
	color: #fff;
}

.mrm-status__option--remove {
	margin-top: 4px;
	border-top: 1px solid var(--mrm-line);
	border-radius: 0 0 7px 7px;
	color: #d8443a !important;
}

.mrm-status__option--remove i {
	color: #d8443a;
}

.mrm-status__msg {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
}

.mrm-status__msg.is-ok {
	color: #3ad07e !important;
}

.mrm-status__msg.is-error {
	color: #ff7a6e !important;
}

/* -------------------------------------------------------------------------
   Meta rows — the plugin prints .post-content_item pairs; this lays them out
   as a tidy label/value table instead of a loose stack.
   ---------------------------------------------------------------------- */

.mrm-hero__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2px 26px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	/* Rows size to their own content instead of the tallest cell in the row,
	   so a long value can never leave a gap beside the short ones. */
	grid-auto-rows: min-content;
	align-content: start;
	align-items: start;
}

.mrm-hero__meta .post-content_item,
.mrm-hero__status .post-content_item {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	margin: 0;
	padding: 7px 0;
}

.mrm-hero__meta .summary-heading,
.mrm-hero__status .summary-heading {
	margin: 0;
}

.mrm-hero__meta .summary-heading h5,
.mrm-hero__status .summary-heading h5 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45) !important;
}

.mrm-hero__meta .summary-content,
.mrm-hero__status .summary-content {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88) !important;
}

.mrm-hero__meta .summary-content a,
.mrm-hero__status .summary-content a {
	color: rgba(255, 255, 255, .88) !important;
}

.mrm-hero__meta .summary-content a:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

/* Genres and tags read better as chips than as a comma list. */
.mrm-hero__meta .genres-content a,
.mrm-hero__meta .tags-content a {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .9) !important;
	text-decoration: none !important;
}

.mrm-hero__meta .genres-content a:hover,
.mrm-hero__meta .tags-content a:hover {
	background: var(--mrm-accent);
	color: #fff !important;
	text-decoration: none !important;
}

/* The rating widget the plugin prints inside the meta block is already
   shown up in the facts row. */
.mrm-hero__meta .post-rating,
.mrm-hero__meta .post-total-rating {
	display: none;
}

.mrm-hero__status {
	margin-top: 4px;
}

/* Removed via remove_action() in the template; this is only a safety net in
   case another plugin hooks it back on. */
.mrm-hero .manga-action {
	display: none !important;
}

/* Hide the loader the theme prints before the properties block. */
.mrm-hero .loader-inner,
.mrm-hero .ball-pulse {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Summary panel below the hero
   ---------------------------------------------------------------------- */

.mrm-panel {
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line);
	border-radius: var(--mrm-radius);
	padding: 18px 20px;
	margin-bottom: 22px;
}

.mrm-panel .mrm-panel__title {
	margin: 0 0 12px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--mrm-line);
	font-size: 16px;
	font-weight: 700;
	color: var(--mrm-ink) !important;
}

.mrm-panel .description-summary,
.mrm-panel .summary__content {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--mrm-ink) !important;
}

.mrm-panel .summary__content p {
	color: var(--mrm-ink) !important;
	margin-bottom: 12px;
}

.mrm-panel .c-content-readmore {
	margin-top: 6px;
}

.mrm-panel .content-readmore {
	color: var(--mrm-accent) !important;
	font-weight: 700;
	font-size: 13px;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 991px) {
	:root {
		--mrm-cover-w: 180px;
	}

	.mrm-hero__grid {
		gap: 20px;
	}

	.mrm-hero__title {
		font-size: 25px;
	}

	.mrm-hero__meta {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	:root {
		--mrm-cover-w: 116px;
	}

	.mrm-hero {
		padding: 18px 0 22px;
	}

	.mrm-hero__grid {
		grid-template-columns: var(--mrm-cover-w) minmax(0, 1fr);
		gap: 14px;
	}

	.mrm-hero__title {
		font-size: 19px;
		margin-top: 0;
	}

	.mrm-hero__alt {
		font-size: 12px;
		margin-bottom: 10px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.mrm-facts {
		gap: 6px 12px;
		margin-bottom: 14px;
	}

	.mrm-facts .mrm-facts__item {
		font-size: 12px;
	}

	/* Actions drop below the cover so the buttons get full width to breathe. */
	.mrm-hero__actions {
		grid-column: 1 / -1;
	}

	.mrm-hero__meta {
		grid-column: 1 / -1;
	}

	.mrm-hero__actions .c-btn,
	.mrm-s-btn {
		height: 38px;
		padding: 0 14px;
		font-size: 12.5px;
	}

	.mrm-status,
	.mrm-status > summary {
		width: 100%;
	}

	.mrm-status__menu {
		left: 0;
		right: 0;
		min-width: 0;
	}

	.mrm-hero__meta .post-content_item,
	.mrm-hero__status .post-content_item {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 10px;
		padding: 6px 0;
	}

	.mrm-panel {
		padding: 14px 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrm-hero *,
	.mrm-status * {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   Chapter list

   The plugin's markup is:
     .listing-chapters_wrap > ul.version-chap > li.wp-manga-chapter > a + span.chapter-release-date
   with class "reading" on the chapter the reader last opened, and a
   li.chapter-bookmark slipped in after it (which is not a chapter row).

   "mrm-read" is added by the progress script to the current chapter and
   everything at or below it.
   ---------------------------------------------------------------------- */

.mrm-single .listing-chapters_wrap {
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line);
	border-radius: var(--mrm-radius);
	padding: 6px 4px;
	margin-bottom: 22px;
}

.mrm-single .listing-chapters_wrap ul.version-chap {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The theme draws each row separator with `li:after` — absolutely positioned,
   1px tall, full width, and with NO top/bottom offset, so it relies on its
   static position. Making the row a flex container turns that pseudo-element
   into a flex item, which parks the line in the middle of the row instead of
   at its bottom edge. Ours is a plain border-bottom, so switch theirs off. */
.mrm-single .listing-chapters_wrap ul.version-chap > li::after {
	display: none !important;
	content: none !important;
}

.mrm-single li.wp-manga-chapter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--mrm-line);
}

.mrm-single li.wp-manga-chapter:last-child {
	border-bottom: 0;
}

/* Transparent edge on unread rows so adding the purple one shifts nothing. */
.mrm-single li.wp-manga-chapter {
	border-left: 3px solid transparent;
}

/* The whole row is the hit area, not just the words. */
.mrm-single li.wp-manga-chapter > a {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 12px 12px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mrm-ink) !important;
	text-decoration: none !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-single li.wp-manga-chapter .chapter-release-date {
	flex: none;
	padding-right: 14px;
}

.mrm-single li.wp-manga-chapter .chapter-release-date i {
	font-style: normal;
	font-size: 12px;
	color: var(--mrm-muted) !important;
}

.mrm-single li.wp-manga-chapter:hover {
	background: var(--mrm-chip);
}

.mrm-single li.wp-manga-chapter:hover > a {
	color: var(--mrm-accent) !important;
}

/* The bookmark marker the plugin injects after the current chapter. */
.mrm-single li.chapter-bookmark {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.mrm-single li.chapter-bookmark:empty,
.mrm-single li.chapter-bookmark .chapter-bookmark-content:empty {
	display: none;
}

/* --- reading progress --- */

.mrm-single li.wp-manga-chapter.mrm-read > a {
	color: var(--mrm-progress) !important;
}

.mrm-single li.wp-manga-chapter.mrm-read {
	background: var(--mrm-progress-bg);
	border-left: 3px solid var(--mrm-progress);
}

.mrm-single li.wp-manga-chapter.mrm-read .chapter-release-date i {
	color: var(--mrm-progress-muted) !important;
}

/* The one they stopped on, called out from the rest of the read block. */
.mrm-single li.wp-manga-chapter.reading {
	background: var(--mrm-progress-strong);
	border-left: 3px solid var(--mrm-progress);
}

.mrm-single li.wp-manga-chapter.reading > a {
	color: #fff !important;
	font-weight: 700;
}

.mrm-single li.wp-manga-chapter.reading > a::after {
	content: attr(data-mrm-label);
	margin-left: 9px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mrm-progress);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.mrm-single li.wp-manga-chapter.reading .chapter-release-date i {
	color: rgba(255, 255, 255, .72) !important;
}

/* --- "Show more" --- */

.mrm-single .c-chapter-readmore {
	text-align: center;
	padding: 10px 0 4px;
}

.mrm-single .chapter-readmore {
	color: var(--mrm-accent) !important;
	font-weight: 700;
	font-size: 13px;
}

/* The theme fades the bottom of a collapsed list with a light gradient that
   reads as a grey smear on a dark page. Match the panel instead. */
.mrm-single .listing-chapters_wrap.show-more .version-chap::after,
.mrm-single .listing-chapters_wrap.show-more .version-chap::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--mrm-panel)) !important;
}

/* --- section headings above the list --- */

.mrm-single .c-page__content .font-heading h2,
.mrm-single .c-page__content .font-heading .h4,
.mrm-single .main-col-inner .font-heading h2 {
	color: var(--mrm-ink) !important;
}

/* =========================================================================
   Hero text is always light

   The hero sits on dark artwork in BOTH colour modes, so its text must not
   follow the theme. The child theme's style.css contains:

       body:not(.dark) h1, …, p, span, a { color: #000 !important; }

   That is one class + two elements (0,1,2). A single-class rule of mine is
   (0,1,0), so even with !important the theme won out and light mode painted
   the hero text black on black. Every selector below carries an extra class
   to outrank it.

   The dropdown MENU is deliberately excluded — it floats on a light panel,
   so its text must stay dark.
   ========================================================================= */

.mrm-single .mrm-hero__title,
.mrm-single .mrm-hero__title *,
.mrm-single .mrm-hero__badges,
.mrm-single .mrm-hero__badges * {
	color: #fff !important;
}

.mrm-single .mrm-hero__alt,
.mrm-single .mrm-hero__alt * {
	color: rgba(255, 255, 255, .58) !important;
}

/* Breadcrumb */
.mrm-single .mrm-hero .c-breadcrumb,
.mrm-single .mrm-hero .c-breadcrumb * {
	color: rgba(255, 255, 255, .62) !important;
}

.mrm-single .mrm-hero .c-breadcrumb a:hover {
	color: #fff !important;
}

/* Facts row */
.mrm-single .mrm-facts,
.mrm-single .mrm-facts * {
	color: rgba(255, 255, 255, .78) !important;
}

.mrm-single .mrm-facts .mrm-facts__item i {
	color: rgba(255, 255, 255, .45) !important;
}

.mrm-single .mrm-facts .mrm-facts__item--rating i {
	color: #ffc043 !important;
}

.mrm-single .mrm-facts .mrm-facts__item--rating strong {
	color: #fff !important;
}

.mrm-single .mrm-facts .mrm-facts__sub {
	color: rgba(255, 255, 255, .5) !important;
}

.mrm-single .mrm-facts .mrm-facts__item a:hover {
	color: #fff !important;
}

/* Property rows: labels, values, and anything the plugin nests inside them */
.mrm-single .mrm-hero__meta .summary-heading,
.mrm-single .mrm-hero__meta .summary-heading *,
.mrm-single .mrm-hero__status .summary-heading,
.mrm-single .mrm-hero__status .summary-heading * {
	color: rgba(255, 255, 255, .45) !important;
}

.mrm-single .mrm-hero__meta .summary-content,
.mrm-single .mrm-hero__meta .summary-content *,
.mrm-single .mrm-hero__status .summary-content,
.mrm-single .mrm-hero__status .summary-content * {
	color: rgba(255, 255, 255, .88) !important;
}

.mrm-single .mrm-hero__meta .summary-content a:hover {
	color: #fff !important;
}

/* Genre and tag chips */
.mrm-single .mrm-hero__meta .genres-content a,
.mrm-single .mrm-hero__meta .tags-content a {
	color: rgba(255, 255, 255, .9) !important;
}

.mrm-single .mrm-hero__meta .genres-content a:hover,
.mrm-single .mrm-hero__meta .tags-content a:hover {
	color: #fff !important;
}

/* Buttons that sit on the artwork */
.mrm-single .mrm-hero__actions .c-btn,
.mrm-single .mrm-hero__actions .c-btn *,
.mrm-single .mrm-hero__actions .nav-links a,
.mrm-single .mrm-hero__actions > .mrm-s-btn,
.mrm-single .mrm-hero__actions > .mrm-s-btn *,
.mrm-single .mrm-status > summary,
.mrm-single .mrm-status > summary * {
	color: #fff !important;
}

/* Save confirmation sits on the artwork too */
.mrm-single .mrm-status__msg {
	color: rgba(255, 255, 255, .7) !important;
}

.mrm-single .mrm-status__msg.is-ok {
	color: #3ad07e !important;
}

.mrm-single .mrm-status__msg.is-error {
	color: #ff7a6e !important;
}

/* --- the dropdown panel is LIGHT: keep this text theme-coloured --- */

.mrm-single .mrm-status__menu .mrm-status__option {
	color: var(--mrm-ink) !important;
}

.mrm-single .mrm-status__menu .mrm-status__option i {
	color: var(--mrm-muted) !important;
}

.mrm-single .mrm-status__menu .mrm-status__option.is-current,
.mrm-single .mrm-status__menu .mrm-status__option.is-current i {
	color: #fff !important;
}

.mrm-single .mrm-status__menu .mrm-status__option--remove,
.mrm-single .mrm-status__menu .mrm-status__option--remove i {
	color: #d8443a !important;
}

/* =========================================================================
   Rate control, genre row, and the read-more caret
   ========================================================================= */

/* --- "Rate this" --------------------------------------------------------
   This control used to live in the property grid, where an earlier rule hid
   it — which removed the only way to rate a series. It now sits beside the
   action buttons. */

.mrm-single .mrm-rate {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 15px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .07);
}

.mrm-single .mrm-rate .mrm-rate__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5) !important;
	white-space: nowrap;
}

/* Make sure nothing hides the widget in its new home. */
.mrm-single .mrm-rate .post-rating,
.mrm-single .mrm-rate .post-total-rating,
.mrm-single .mrm-rate .user-rating {
	display: inline-flex !important;
	align-items: center;
	margin: 0;
	line-height: 1;
}

.mrm-single .mrm-rate .ratings_stars,
.mrm-single .mrm-rate .user-rating i {
	font-size: 17px;
	color: rgba(255, 255, 255, .3) !important;
	cursor: pointer;
	transition: color .1s ease, transform .1s ease;
}

.mrm-single .mrm-rate .rating_current,
.mrm-single .mrm-rate .rating_current_half,
.mrm-single .mrm-rate .user-rating i:hover,
.mrm-single .mrm-rate .user-rating i.rating_current {
	color: #ffc043 !important;
}

.mrm-single .mrm-rate .user-rating i:hover {
	transform: scale(1.14);
}

/* --- Genres on their own full-width line -------------------------------- */

.mrm-single .mrm-genres {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.mrm-single .mrm-genres .mrm-genres__label {
	flex: none;
	width: 108px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45) !important;
}

/* font-size:0 swallows the ", " separators the term list prints between
   links; the links themselves set their own size back. */
.mrm-single .mrm-genres .mrm-genres__list {
	font-size: 0;
	line-height: 0;
}

.mrm-single .mrm-genres .mrm-genres__list a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: 12px;
	line-height: 1.5;
	font-weight: 600;
	color: rgba(255, 255, 255, .9) !important;
	text-decoration: none !important;
}

.mrm-single .mrm-genres .mrm-genres__list a:hover {
	background: var(--mrm-accent);
	color: #fff !important;
}

@media (max-width: 640px) {
	.mrm-single .mrm-genres {
		grid-column: 1 / -1;
		flex-direction: column;
		gap: 7px;
	}

	.mrm-single .mrm-genres .mrm-genres__label {
		width: auto;
	}
}

/* --- Read-more caret ----------------------------------------------------
   The theme draws it with a Font Awesome glyph (content: "\f0d7", weight
   900). Font Awesome isn't loading here, so it rendered as an empty box.
   Replace it with a CSS triangle, which needs no icon font at all. */

.mrm-single .chapter-readmore::after,
.mrm-single .content-readmore::after,
.mrm-single .chapter-readmore.more::after,
.mrm-single .content-readmore.more::after {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 7px;
	vertical-align: middle;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	border-bottom: 0;
	transition: transform .15s ease;
}

/* Expanded state points the caret back up. */
.mrm-single .chapter-readmore.more::after,
.mrm-single .content-readmore.more::after {
	transform: rotate(180deg);
}