/**
 * FictionX page chrome - the page-rating control and the footer bar.
 *
 * These two sit on EVERY page, in both languages. One stamped sheet, linked from both
 * headers, so the Arabic and English chrome cannot drift apart again.
 *
 * NOTE, and do not undo this: the paths below are written out in full rather than
 * globbed. An earlier version of this comment said "global" followed by a star and a
 * slash, and that sequence ENDS a CSS comment. Everything after it became stray
 * declarations that swallowed the very next rule - the light-theme token block - so in
 * light mode every custom property below was undefined, "background: var(--fxc-surface)"
 * was invalid at computed-value time, and the card and its buttons rendered fully
 * transparent. Dark mode looked correct because only the light block was eaten, which
 * is exactly why it went unnoticed. The same trap is recorded in CLAUDE.md for PHP
 * block comments.
 *
 * Styles here replace what used to be inline attributes and an inline style block in
 * templates/fiction/global/ar/footer.dwt and templates/fiction/global/en/footer.dwt.
 *
 * Everything is scoped to #floatingRating or #kt_footer and written with logical
 * properties, so one file serves RTL and LTR with no direction-specific rules.
 */

#floatingRating,
#kt_footer {
	--fxc-teal: #26667c;        /* the site's own --bs-primary */
	--fxc-teal-deep: #0E3D4C;
	--fxc-ink: #0B2B33;
	--fxc-muted: #5B7076;
	--fxc-mist: #EFF3F4;
	--fxc-rule: #DCE4E6;
	--fxc-surface: #fff;

	/* The theme's --bs-primary-rgb is 40,84,109, which is NOT --bs-primary (#26667c). */
	--fxc-primary-rgb: 38, 102, 124;

	--fxc-up: #15794C;
	--fxc-up-rgb: 23, 139, 86;
	--fxc-down: #B32020;
	--fxc-down-rgb: 214, 57, 57;
}

[data-bs-theme="dark"] #floatingRating,
[data-bs-theme="dark"] #kt_footer {
	--fxc-teal: #4FA3BA;
	--fxc-ink: #E8F0F2;
	--fxc-muted: #9FB3B9;
	--fxc-mist: #22323A;
	--fxc-rule: rgba(255, 255, 255, .12);
	--fxc-surface: #16242A;

	--fxc-up: #5FD3A3;
	--fxc-down: #F08080;
}

/* ==============================================================================
   The rating card
   ============================================================================== */
#floatingRating {
	position: relative;
	/* The card and #kt_footer are siblings in the flex-column #kt_wrapper. The slack
	   is absorbed here, on the first of the pair, so the card stays welded to the
	   footer instead of being stranded mid-page on a short one. */
	margin-top: auto;
	/* The card is 64px tall, so -26px straddles the seam without hanging below it. */
	bottom: -26px;
	z-index: 111;
	/* 680, not 760: at the wider size the question and the control sat at opposite
	   ends of a space-between row with a dead gap between them. */
	width: min(680px, calc(100% - 32px));
	padding: 13px 18px !important;
	border: 1px solid var(--fxc-rule) !important;
	border-radius: 14px !important;
	/* White on the module band's #EFF3F4 is only a 6% step, which is why this needs a
	   real border and a real shadow to read as raised - the same combination every
	   module card uses. */
	background: var(--fxc-surface) !important;
	box-shadow: 0 10px 28px rgba(11, 43, 51, .10) !important;
}
[data-bs-theme="dark"] #floatingRating {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important;
}

.fx-rate-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
}

/* 15px, down from a hard-coded 1.6rem (25.6px). It is a question in a utility bar,
   not a heading. */
.fx-rate-q {
	flex: 1 1 auto;
	margin: 0;
	color: var(--fxc-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.7;
	text-align: start;
}

/* ==============================================================================
   The segmented control
   ============================================================================== */
/* One unit split in two rather than two loose buttons: it reads unmistakably as a
   control, and the voted half can fill without the pair coming apart. overflow:hidden
   clips each half's tint to the rounded ends. */
.fx-rate-seg {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--fxc-rule);
	border-radius: 999px;
	background: var(--fxc-mist);
}

.fx-rate-half {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 15px;
	border: 0;
	background: transparent;
	color: var(--fxc-ink);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	/* Declared on :hover as well: the theme's a:hover { transition: color .2s ease } is
	   (0,1,1) and REPLACES this list the moment the pointer lands, so a transition set
	   only at rest snaps instead of easing. */
	transition: background-color .2s ease, color .2s ease;
}
.fx-rate-half:hover {
	transition: background-color .2s ease, color .2s ease;
}
/* The divider between the halves, on the inline axis so it lands correctly in both
   directions. */
.fx-rate-half + .fx-rate-half {
	border-inline-start: 1px solid var(--fxc-rule);
}
.fx-rate-half i {
	font-size: 14px;
	transition: color .2s ease;
}
.fx-rate-up i    { color: var(--fxc-up); }
.fx-rate-down i  { color: var(--fxc-down); }

.fx-rate-up:hover {
	background: rgba(var(--fxc-up-rgb), .10);
	color: var(--fxc-up);
}
.fx-rate-down:hover {
	background: rgba(var(--fxc-down-rgb), .10);
	color: var(--fxc-down);
}
[data-bs-theme="dark"] .fx-rate-up:hover {
	background: rgba(var(--fxc-up-rgb), .22);
}
[data-bs-theme="dark"] .fx-rate-down:hover {
	background: rgba(var(--fxc-down-rgb), .22);
}

/* The whole control lifts, not the half - lifting one half of a joined control tears
   it in two. */
.fx-rate-seg:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(11, 43, 51, .10);
	transition: transform .2s ease, box-shadow .2s ease;
}
.fx-rate-seg {
	transition: transform .2s ease, box-shadow .2s ease;
}
[data-bs-theme="dark"] .fx-rate-seg:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

.fx-rate-half:focus-visible {
	outline: 3px solid rgba(var(--fxc-primary-rgb), .55);
	outline-offset: -3px;
}

/* The count. tabular-nums so 1 and 408 do not change the control's width as the
   numbers come back from the server. */
.fx-rate-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 19px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--fxc-surface);
	color: var(--fxc-muted);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color .2s ease, color .2s ease;
}
[data-bs-theme="dark"] .fx-rate-count {
	background: rgba(255, 255, 255, .10);
}

/* ---------------------------------------------------------- the voted state ---- */
/* Set by the rating script from checkIfRated() on load and after a successful POST, so
   a returning visitor sees the choice they already made rather than a fresh control. */
.fx-rate-seg.is-voted .fx-rate-half {
	cursor: default;
}
.fx-rate-seg.is-voted .fx-rate-half:not(.is-chosen) {
	opacity: .5;
	pointer-events: none;
}
.fx-rate-seg.is-voted .fx-rate-seg:hover,
.fx-rate-seg.is-voted:hover {
	transform: none;
	box-shadow: none;
}
.fx-rate-up.is-chosen {
	background: var(--fxc-up);
	color: #fff;
}
.fx-rate-down.is-chosen {
	background: var(--fxc-down);
	color: #fff;
}
.fx-rate-half.is-chosen i {
	color: #fff;
}
.fx-rate-half.is-chosen .fx-rate-count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* The dark palette lifts the two tones so they read as INK on a dark surface
   (--fxc-up #5FD3A3, --fxc-down #F08080). Filled and given white text they measure
   1.88:1 and 2.59:1, so the chosen half takes dark ink instead - 9.5:1 and 6.9:1. The
   light theme keeps white text, where its deeper tones carry it comfortably. */
[data-bs-theme="dark"] .fx-rate-half.is-chosen,
[data-bs-theme="dark"] .fx-rate-half.is-chosen i {
	color: #0F1B1F;
}
[data-bs-theme="dark"] .fx-rate-half.is-chosen .fx-rate-count {
	background: rgba(0, 0, 0, .20);
	color: #0F1B1F;
}

@media (max-width: 767.98px) {
	#floatingRating {
		bottom: 0;
		margin-bottom: 18px;
		padding: 14px 16px !important;
	}
	/* Question above, control below at full width: side by side at 390px the question
	   had about ten characters to live in. */
	.fx-rate-q {
		flex: 1 1 100%;
		text-align: center;
	}
	.fx-rate-seg {
		width: 100%;
	}
	.fx-rate-half {
		flex: 1 1 50%;
		justify-content: center;
	}
}

/* ==============================================================================
   The footer bar - hover
   ============================================================================== */
/* A colour hover is not available here. The bar is a teal gradient, and the theme's
   .text-hover-primary resolves to #26667c, which measures 1.13:1 against it - hovering
   the Sitemap link made it disappear. The hero breadcrumbs hit the identical
   white-on-teal problem and solved it on opacity and an underline; this follows them. */
#kt_footer a {
	opacity: .85;
	text-decoration: none;
	transition: opacity .2s ease;
}
#kt_footer a:hover,
#kt_footer a:focus-visible {
	opacity: 1;
	/* !important is required, not stylistic: style.bundle.rtl.css carries
	   body a:active, body a:focus, body a:hover { text-decoration: none !important },
	   which kills the underline on every anchor site-wide. Only another important
	   declaration can beat it, and an opacity shift on its own is too quiet to read
	   as a hover. */
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transition: opacity .2s ease;
}
/* The "Related Links" popover trigger is a span, not an anchor. */
#kt_footer .fx-links-trigger {
	opacity: .85;
	transition: opacity .2s ease;
}
#kt_footer .fx-links-trigger:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Keyboard users had nothing at all in this bar.

   The !important is not decoration: .menu-item .menu-link in style.bundle.rtl.css
   carries outline: 0 !important, so the four social links took no ring at all while
   the five text links did - a partial focus trail is worse than none, because it
   reads as the end of the bar. An important declaration can only be beaten by
   another, and this one is scoped to #kt_footer. */
#kt_footer a:focus-visible,
#kt_footer .fx-links-trigger:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .9) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

/* The social icons carry .text-light, whose rule is color: var(--bs-text-light)
   !important, so the icon could never take a colour or an opacity from its link. This
   is the one place an !important is warranted, and it is scoped to the footer. */
#kt_footer .menu-link .fa-2x,
#kt_footer .menu-link i {
	transition: transform .2s ease, opacity .2s ease;
}
#kt_footer .menu-link {
	/* .menu-item .menu-link sets transition: none at (0,2,0), which outranks
	   .hover-scale at (0,1,0) - so the icons grew smoothly and snapped back. */
	transition: transform .2s ease, opacity .2s ease !important;
	opacity: .85;
}
#kt_footer .menu-link:hover {
	opacity: 1;
	text-decoration: none !important;
}
/* An underline under a bare icon reads as a stray rule, so the icons keep opacity and
   scale only. */
#kt_footer .menu-link:hover,
#kt_footer .menu-link:focus-visible {
	text-decoration: none !important;
}

/* The phone and WhatsApp marks sit inside one span with the number; underlining the
   whole run would underline the icons too. */
#kt_footer .hover-scale {
	transition: transform .2s ease, opacity .2s ease;
}
#kt_footer .hover-scale:hover {
	transform: scale(1.1);
	transition: transform .2s ease, opacity .2s ease;
}

/* The bar is six cells on one line; at ~1100px the labels were breaking mid-phrase. */
@media (min-width: 768px) {
	#kt_footer .container-xxl > div {
		white-space: nowrap;
	}
}

/* The icons were painting #99A1B7 - a grey-blue - beside white text, because
   style.bundle.rtl.css carries i[class] { color: var(--kt-text-muted) }. That is an
   attribute selector PLUS a type selector, (0,1,1), so it beats plain inheritance and
   every icon in the bar ignored the colour of the link holding it. The id here makes
   this (1,1,1) with no !important needed.

   Two inline colours are deliberately left to win, since an inline style outranks this:
   the WhatsApp mark keeps its brand green, and .text-light carries its own !important
   on the four social marks, which are already white. */
#kt_footer .container-xxl i {
	color: inherit;
}
/* The glyphs sit a touch high against the label at this size. */
#kt_footer .container-xxl a i,
#kt_footer .container-xxl .fx-links-trigger i {
	vertical-align: -1px;
}

/* ==============================================================================
   The footer bar - narrow screens
   ============================================================================== */
/* Six cells separated by "|". On one line that reads as a bar; stacked it read as a
   list with a stray pipe after every item. */
@media (max-width: 767.98px) {
	#kt_footer .container-xxl {
		flex-direction: column;
		gap: 14px;
		padding-bottom: 8px;
		text-align: center;
	}
	#kt_footer .container-xxl > div {
		justify-content: center !important;
		width: 100%;
	}
	.fx-foot-sep {
		display: none !important;
	}
	/* The cells are just over 1rem each; stacked that is a tall column of large type,
	   and the bar is secondary navigation, not body copy. */
	#kt_footer .container-xxl .fs-5 {
		font-size: 14px !important;
	}
	/* An empty cell is left over from the markup; it only adds a gap. */
	#kt_footer .container-xxl > div:empty {
		display: none;
	}
	#kt_footer .menu {
		justify-content: center;
		margin-bottom: 0 !important;
	}
	#kt_footer .menu .menu-link {
		padding-inline: 10px !important;
	}
	/* The social icons are fa-2x (32px) in a row of six - wider than the phone. */
	#kt_footer .menu .fa-2x {
		font-size: 1.4em !important;
	}
	#kt_footer img {
		max-width: 100%;
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion means no MOVEMENT, not a dead page: the travel goes and the short
	   colour and opacity fades stay. */
	.fx-rate-seg:hover {
		transform: none;
	}
	#kt_footer .hover-scale:hover {
		transform: none;
	}
	.fx-rate-seg,
	.fx-rate-half,
	.fx-rate-half i,
	.fx-rate-count,
	#kt_footer .hover-scale {
		transition: none;
	}
}