/**
 * Shared Ralify product components.
 * Components in this file are intentionally reusable across blocks and templates.
 */

/*
 * Entity index (Universes, Videos, Deals, Guides wrappers).
 *
 * These routes shipped with no stylesheet at all, so every one of them rendered
 * as an unstyled column. Styles live here rather than in a per-page file because
 * one shared index template backs several routes.
 */
.ralify-entity-index {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ralify-space-5, 24px);
	width: var(--ralify-content-width, clamp(320px, 94vw, 1720px));
	margin-inline: auto;
	padding-block: var(--ralify-space-6, 32px) var(--ralify-space-8, 64px);
	padding-inline: var(--ralify-page-gutter, 24px);
	font-family: var(--ralify-font, "Sora", sans-serif);
}

.ralify-entity-index .ralify-page__breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--ralify-space-2, 8px);
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.8125rem;
}

.ralify-entity-index .ralify-page__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ralify-entity-index .ralify-page__breadcrumb a:hover {
	color: var(--ralify-color-text, #f8fafc);
}

.ralify-entity-index__head {
	margin-block-end: var(--ralify-space-6, 32px);
}

.ralify-entity-index__title {
	margin: 0 0 var(--ralify-space-2, 8px);
	color: var(--ralify-color-text, #f8fafc);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ralify-entity-index__intro {
	max-width: 62ch;
	margin: 0;
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 1rem;
	line-height: 1.6;
}

.ralify-entity-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ralify-space-5, 24px);
}

.ralify-entity-index__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ralify-space-2, 8px);
	margin-block-start: var(--ralify-space-6, 32px);
}

.ralify-entity-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--ralify-space-3, 12px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-sm, 8px);
	background: var(--ralify-color-surface, #111827);
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	transition: var(--ralify-transition, 180ms ease);
}

.ralify-entity-index__pagination .page-numbers:hover,
.ralify-entity-index__pagination .page-numbers.current {
	border-color: color-mix(in srgb, var(--ralify-color-cyan, #00e5ff) 50%, transparent);
	color: var(--ralify-color-text, #f8fafc);
}

.ralify-entity-index__empty {
	padding: var(--ralify-space-7, 48px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-lg, 16px);
	background: var(--ralify-color-surface, #111827);
	text-align: center;
}

.ralify-entity-index__empty-title {
	margin: 0 0 var(--ralify-space-2, 8px);
	color: var(--ralify-color-text, #f8fafc);
	font-size: 1.25rem;
	font-weight: 700;
}

.ralify-entity-index__empty-body {
	max-width: 54ch;
	margin: 0 auto var(--ralify-space-5, 24px);
	color: var(--ralify-color-text-muted, #94a3b8);
	line-height: 1.6;
}

.ralify-entity-index__empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ralify-space-3, 12px);
}

.ralify-entity-index__empty-cta,
.ralify-entity-index__empty-link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding-inline: var(--ralify-space-5, 24px);
	border-radius: var(--ralify-radius-pill, 999px);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.ralify-entity-index__empty-cta {
	background: var(--ralify-gradient-brand, linear-gradient(135deg, #2563eb, #885cf6));
	color: #fff;
}

.ralify-entity-index__empty-link {
	border: 1px solid var(--ralify-color-border, #273142);
	color: var(--ralify-color-text-muted, #94a3b8);
}

/* Universe cards. */
.ralify-universe-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--ralify-space-4, 16px);
}

.ralify-universe-card {
	display: flex;
	align-items: flex-start;
	gap: var(--ralify-space-4, 16px);
	padding: var(--ralify-space-4, 16px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-lg, 16px);
	background: var(--ralify-color-surface, #111827);
	color: inherit;
	text-decoration: none;
	transition: var(--ralify-transition, 180ms ease);
}

.ralify-universe-card:hover {
	border-color: color-mix(in srgb, var(--ralify-color-cyan, #00e5ff) 45%, transparent);
	background: var(--ralify-color-surface-raised, #182233);
	transform: translateY(-2px);
}

.ralify-universe-card__mark {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-md, 12px);
	background: var(--ralify-color-midnight, #0b0f17);
}

.ralify-universe-card__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.ralify-universe-card__initial {
	color: var(--ralify-color-text, #f8fafc);
	font-size: 1.25rem;
	font-weight: 800;
}

.ralify-universe-card__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 6px;
}

.ralify-universe-card__name {
	color: var(--ralify-color-text, #f8fafc);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.ralify-universe-card__desc {
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.875rem;
	line-height: 1.5;
}

.ralify-universe-card__meta {
	display: flex;
	align-items: center;
	gap: var(--ralify-space-2, 8px);
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ralify-status-badge {
	--ralify-status-color: var(--ralify-color-text-muted, #94a3b8);
	--ralify-status-background: rgba(148, 163, 184, 0.12);
	--ralify-status-border: rgba(148, 163, 184, 0.34);

	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	min-height: 26px;
	padding: 5px 10px;
	border: 1px solid var(--ralify-status-border);
	border-radius: var(--ralify-radius-pill, 999px);
	background: var(--ralify-status-background);
	color: var(--ralify-status-color);
	font-family: var(--ralify-font, "Sora", sans-serif);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.ralify-status-badge__dot {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 12px color-mix(in srgb, currentColor 68%, transparent);
}

.ralify-status-badge--compact {
	min-height: 22px;
	padding: 4px 8px;
	font-size: 0.5625rem;
}

.ralify-status-badge--breaking {
	--ralify-status-color: #ff91a2;
	--ralify-status-background: rgba(255, 77, 103, 0.18);
	--ralify-status-border: rgba(255, 77, 103, 0.55);
}

.ralify-status-badge--official,
.ralify-status-badge--live {
	--ralify-status-color: #73e88d;
	--ralify-status-background: rgba(48, 209, 88, 0.15);
	--ralify-status-border: rgba(48, 209, 88, 0.48);
}

.ralify-status-badge--confirmed {
	--ralify-status-color: var(--ralify-color-cyan, #00e5ff);
	--ralify-status-background: rgba(0, 229, 255, 0.13);
	--ralify-status-border: rgba(0, 229, 255, 0.44);
}

.ralify-status-badge--rumor {
	--ralify-status-color: #c4b5fd;
	--ralify-status-background: rgba(167, 139, 250, 0.16);
	--ralify-status-border: rgba(167, 139, 250, 0.46);
}

.ralify-status-badge--report,
.ralify-status-badge--latest,
.ralify-status-badge--released {
	--ralify-status-color: #93c5fd;
	--ralify-status-background: rgba(37, 99, 235, 0.17);
	--ralify-status-border: rgba(37, 99, 235, 0.5);
}

.ralify-status-badge--featured {
	--ralify-status-color: #c4b5fd;
	--ralify-status-background: rgba(136, 92, 246, 0.18);
	--ralify-status-border: rgba(136, 92, 246, 0.52);
}

.ralify-status-badge--upcoming {
	--ralify-status-color: #ffd080;
	--ralify-status-background: rgba(255, 176, 32, 0.14);
	--ralify-status-border: rgba(255, 176, 32, 0.46);
}

.ralify-status-badge--neutral,
.ralify-status-badge--active {
	--ralify-status-color: var(--ralify-color-text, #f8fafc);
	--ralify-status-background: rgba(11, 15, 23, 0.78);
	--ralify-status-border: rgba(255, 255, 255, 0.16);
}

.ralify-status-badge-showcase {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ralify-space-3, 12px);
	padding: var(--ralify-space-5, 24px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-lg, 16px);
	background:
		linear-gradient(145deg, rgba(136, 92, 246, 0.05), transparent 50%),
		var(--ralify-color-surface, #111827);
}

.ralify-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ralify-space-2, 8px);
	min-width: 0;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--ralify-radius-sm, 8px);
	font-family: var(--ralify-font, "Sora", sans-serif);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--ralify-transition, 180ms ease),
		border-color var(--ralify-transition, 180ms ease),
		background-color var(--ralify-transition, 180ms ease),
		color var(--ralify-transition, 180ms ease),
		box-shadow var(--ralify-transition, 180ms ease);
}

.ralify-button:hover {
	transform: translateY(-1px);
}

.ralify-button:active {
	transform: translateY(0);
}

.ralify-button:focus-visible {
	outline: 2px solid var(--ralify-color-cyan, #00e5ff);
	outline-offset: 3px;
}

.ralify-button--primary {
	border-color: color-mix(in srgb, var(--ralify-color-purple, #885cf6) 70%, transparent);
	background: var(--ralify-gradient-brand);
	color: var(--ralify-color-text, #f8fafc);
	box-shadow: 0 10px 28px rgba(37, 99, 235, 0.18);
}

.ralify-button--primary:hover {
	border-color: color-mix(in srgb, var(--ralify-color-cyan, #00e5ff) 55%, transparent);
	color: #fff;
	box-shadow: 0 12px 34px rgba(136, 92, 246, 0.25);
}

.ralify-button--secondary {
	border-color: var(--ralify-color-border, #273142);
	background: rgba(24, 34, 51, 0.72);
	color: var(--ralify-color-text, #f8fafc);
}

.ralify-button--secondary:hover {
	border-color: color-mix(in srgb, var(--ralify-color-purple, #885cf6) 60%, var(--ralify-color-border, #273142));
	background: var(--ralify-color-surface-raised, #182233);
	color: #fff;
}

.ralify-button--ghost {
	border-color: transparent;
	background: transparent;
	color: var(--ralify-color-cyan, #00e5ff);
}

.ralify-button--ghost:hover {
	background: rgba(0, 229, 255, 0.08);
	color: #72f1ff;
}

.ralify-button--icon {
	width: 44px;
	padding: 0;
	border-color: var(--ralify-color-border, #273142);
	background: rgba(24, 34, 51, 0.72);
	color: var(--ralify-color-text, #f8fafc);
}

.ralify-button--icon:hover {
	border-color: var(--ralify-color-cyan, #00e5ff);
	background: var(--ralify-color-surface-raised, #182233);
	color: var(--ralify-color-cyan, #00e5ff);
}

.ralify-button--small {
	min-height: 36px;
	padding-right: 14px;
	padding-left: 14px;
	font-size: 0.6875rem;
}

.ralify-button--large {
	min-height: 52px;
	padding-right: 24px;
	padding-left: 24px;
	font-size: 0.8125rem;
}

.ralify-button--icon.ralify-button--small {
	width: 36px;
	padding: 0;
}

.ralify-button--icon.ralify-button--large {
	width: 52px;
	padding: 0;
}

.ralify-button--full {
	width: 100%;
}

.ralify-button__icon {
	display: inline-grid;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	place-items: center;
}

.ralify-button__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.ralify-button-showcase {
	display: grid;
	gap: var(--ralify-space-5, 24px);
	padding: var(--ralify-space-5, 24px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-lg, 16px);
	background:
		linear-gradient(145deg, rgba(37, 99, 235, 0.06), transparent 54%),
		var(--ralify-color-surface, #111827);
}

.ralify-button-showcase__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ralify-space-3, 12px);
}

.ralify-button-showcase__label {
	width: 100%;
	margin: 0;
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.ralify-button-showcase {
		padding: var(--ralify-space-4, 16px);
	}

	.ralify-button-showcase__row .ralify-button:not(.ralify-button--icon) {
		width: 100%;
	}
}

/* PCL-011 — Tag and Chip System. */
.ralify-tag {
	--ralify-tag-color: var(--ralify-color-text-muted, #94a3b8);
	--ralify-tag-background: rgba(24, 34, 51, 0.7);
	--ralify-tag-border: var(--ralify-color-border, #273142);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	min-height: 30px;
	padding: 6px 11px;
	border: 1px solid var(--ralify-tag-border);
	border-radius: var(--ralify-radius-pill, 999px);
	background: var(--ralify-tag-background);
	color: var(--ralify-tag-color);
	font-family: var(--ralify-font, "Sora", sans-serif);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--ralify-transition, 180ms ease), background-color var(--ralify-transition, 180ms ease), color var(--ralify-transition, 180ms ease), transform var(--ralify-transition, 180ms ease);
}

a.ralify-tag:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, currentColor 48%, var(--ralify-color-border, #273142));
	color: var(--ralify-color-text, #f8fafc);
}

a.ralify-tag:focus-visible {
	outline: 2px solid var(--ralify-color-cyan, #00e5ff);
	outline-offset: 3px;
}

.ralify-tag--compact {
	min-height: 24px;
	padding: 5px 9px;
	font-size: 0.625rem;
}

.ralify-tag--platform {
	--ralify-tag-color: #8beeff;
	--ralify-tag-background: rgba(0, 229, 255, 0.08);
	--ralify-tag-border: rgba(0, 229, 255, 0.3);
}

.ralify-tag--genre {
	--ralify-tag-color: #c4b5fd;
	--ralify-tag-background: rgba(136, 92, 246, 0.1);
	--ralify-tag-border: rgba(136, 92, 246, 0.34);
}

.ralify-tag--content {
	--ralify-tag-color: #93c5fd;
	--ralify-tag-background: rgba(37, 99, 235, 0.1);
	--ralify-tag-border: rgba(37, 99, 235, 0.34);
}

.ralify-tag--filter {
	--ralify-tag-background: transparent;
	cursor: pointer;
}

.ralify-tag--selected {
	--ralify-tag-color: var(--ralify-color-text, #f8fafc);
	--ralify-tag-background: rgba(136, 92, 246, 0.2);
	--ralify-tag-border: rgba(136, 92, 246, 0.65);
	box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.ralify-tag__dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

.ralify-tag__count {
	display: inline-grid;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	place-items: center;
	border-radius: var(--ralify-radius-pill, 999px);
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.5625rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.ralify-tag-showcase {
	display: grid;
	gap: var(--ralify-space-5, 24px);
	padding: var(--ralify-space-5, 24px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-lg, 16px);
	background: linear-gradient(145deg, rgba(136, 92, 246, 0.05), transparent 52%), var(--ralify-color-surface, #111827);
}

.ralify-tag-showcase__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ralify-space-2, 8px);
}

.ralify-tag-showcase__label {
	width: 100%;
	margin: 0 0 var(--ralify-space-1, 4px);
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.ralify-tag-showcase {
		padding: var(--ralify-space-4, 16px);
	}
}

/* PCL-012 — Navigation Item. */
.ralify-navigation-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ralify-space-3, 12px);
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--ralify-radius-md, 12px);
	background: transparent;
	color: var(--ralify-color-text-muted, #94a3b8);
	font-family: var(--ralify-font, "Sora", sans-serif);
	font-size: 0.8125rem;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--ralify-transition, 180ms ease), border-color var(--ralify-transition, 180ms ease), color var(--ralify-transition, 180ms ease), transform var(--ralify-transition, 180ms ease);
}
.ralify-navigation-item:hover {
	transform: translateX(2px);
	border-color: rgba(136, 92, 246, 0.2);
	background: rgba(136, 92, 246, 0.08);
	color: var(--ralify-color-text, #f8fafc);
}
.ralify-navigation-item:focus-visible {
	outline: 2px solid var(--ralify-color-cyan, #00e5ff);
	outline-offset: 2px;
}
.ralify-navigation-item--pending { cursor: default; opacity: 0.55; }
.ralify-navigation-item--pending:hover { background: none; border-color: transparent; }
.ralify-navigation-item__soon { margin-left: auto; padding: 2px 7px; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 999px; color: var(--ralify-color-text-muted, #94a3b8); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ralify-navigation-item--active {
	border-color: rgba(136, 92, 246, 0.34);
	background: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(136, 92, 246, 0.12));
	color: var(--ralify-color-text, #f8fafc);
	box-shadow: inset 3px 0 0 var(--ralify-color-purple, #885cf6);
}
.ralify-navigation-item__icon {
	display: inline-grid;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	place-items: center;
	color: currentColor;
}
.ralify-navigation-item__icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}
.ralify-navigation-item__label {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ralify-navigation-item__badge {
	display: inline-grid;
	min-width: 22px;
	height: 20px;
	margin-left: auto;
	padding: 0 6px;
	place-items: center;
	border: 1px solid rgba(0, 229, 255, 0.25);
	border-radius: var(--ralify-radius-pill, 999px);
	background: rgba(0, 229, 255, 0.08);
	color: #8beeff;
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}
.ralify-navigation-item--compact {
	width: 44px;
	padding-inline: 11px;
	justify-content: center;
}
.ralify-navigation-item--compact .ralify-navigation-item__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.ralify-navigation-item--compact .ralify-navigation-item__badge {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 0.5rem;
}
@media (max-width: 767px) {
	.ralify-navigation-item { min-height: 48px; }
	.ralify-navigation-item:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ralify-navigation-item { transition: none; }
}

/* Shared horizontal scroll row: arrows + dots, used by Breaking Now and Latest Stories. */
.ralify-scroll { position: relative; min-width: 0; max-width: 100%; }
.ralify-scroll__track { display: flex; gap: 12px; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.ralify-scroll__track::-webkit-scrollbar { display: none; }
.ralify-scroll__track > * { flex: 0 0 auto; scroll-snap-align: start; scroll-snap-stop: always; }

/*
 * While a pointer drag is in progress, snapping and smooth scrolling both fight
 * the drag: snap yanks the row back to the nearest card on every frame, and
 * smooth behaviour turns each scrollLeft write into an animation. Both are
 * suspended for the duration and restored on release. Images also get their
 * native drag suppressed so the browser doesn't start a ghost-image drag
 * instead of scrolling the row.
 */
.ralify-scroll__track.is-grabbing { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ralify-scroll__track.is-grabbing img { pointer-events: none; }

/*
 * Arrows.
 *
 * These are <button> elements, and Astra styles every button on the site with
 * its own padding, radius and accent background. That is why the two arrows on
 * one row could render at different widths, and why a clicked arrow turned
 * purple: Astra's focus background was winning. Everything the parent theme
 * sets is reset explicitly here rather than relying on cascade order.
 */
.ralify-scroll .ralify-scroll__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	width: 40px;
	min-width: 0;
	height: 40px;
	box-sizing: border-box;
	padding: 0;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	appearance: none;
	background: rgba(11, 15, 23, 0.82);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	color: var(--ralify-color-text, #f8fafc);
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	backdrop-filter: blur(6px);
	transform: translateY(-50%);
	transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

.ralify-scroll .ralify-scroll__arrow[data-scroll-prev] { left: 6px; }
.ralify-scroll .ralify-scroll__arrow[data-scroll-next] { right: 6px; }
.ralify-scroll .ralify-scroll__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.ralify-scroll .ralify-scroll__arrow:hover:not(:disabled),
.ralify-scroll .ralify-scroll__arrow:focus:not(:disabled) {
	border-color: var(--ralify-color-cyan, #00e5ff);
	background: rgba(11, 15, 23, 0.95);
	color: var(--ralify-color-cyan, #00e5ff);
}

.ralify-scroll .ralify-scroll__arrow:focus-visible {
	outline: 2px solid var(--ralify-color-cyan, #00e5ff);
	outline-offset: 2px;
}

.ralify-scroll .ralify-scroll__arrow:disabled { opacity: 0; pointer-events: none; }

.ralify-scroll__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.ralify-scroll__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--ralify-color-border, #273142); cursor: pointer; transition: background-color 180ms ease, width 180ms ease; }
.ralify-scroll__dot:hover { background: color-mix(in srgb, var(--ralify-color-cyan, #00e5ff) 55%, var(--ralify-color-border, #273142)); }
.ralify-scroll__dot--active { width: 18px; background: var(--ralify-color-cyan, #00e5ff); }
@media (max-width: 640px) { .ralify-scroll .ralify-scroll__arrow { display: none; } }

/* Site-wide launch announcement banner, sits above the header row. */
.ralify-launch-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 10px var(--ralify-page-gutter, 24px); margin-bottom: 16px; border-radius: var(--ralify-radius-md, 12px); background: linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(136, 92, 246, 0.16)); color: var(--ralify-color-text, #f8fafc); font-family: var(--ralify-font, "Sora", sans-serif); }
.ralify-launch-banner__message { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 0.8125rem; font-weight: 600; }
.ralify-launch-banner__badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(0, 229, 255, 0.16); color: var(--ralify-color-cyan, #00e5ff); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ralify-launch-banner__form { display: flex; align-items: center; gap: 8px; }
.ralify-launch-banner__form input { height: 34px; padding-inline: 12px; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: var(--ralify-radius-sm, 8px); background: rgba(11, 15, 23, 0.6); color: var(--ralify-color-text, #f8fafc); font-size: 0.75rem; min-width: 200px; }
.ralify-launch-banner__form input::placeholder { color: var(--ralify-color-text-muted, #94a3b8); }
.ralify-launch-banner__form button { height: 34px; padding-inline: 14px; border: 0; border-radius: var(--ralify-radius-sm, 8px); background: var(--ralify-gradient-brand); color: #fff; font-size: 0.72rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
@media (max-width: 640px) { .ralify-launch-banner { justify-content: flex-start; } .ralify-launch-banner__form input { min-width: 0; flex: 1; } }

/* Full-width header row: floating logo + Topbar, sits above the sidebar/content grid. */
.ralify-header-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.ralify-header-row__logo { display: flex; flex: 0 0 auto; align-items: center; }
.ralify-header-row__logo img { display: block; height: 34px; width: auto; }
.ralify-header-row__logo-fallback { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ralify-color-text, #f8fafc); }
.ralify-header-row__topbar { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
	/* Logo + hamburger on row one, the topbar on row two. Tighter gaps here
	   because the launch banner already sits above this and every pixel spent
	   on chrome is a pixel the first story does not get. */
	.ralify-header-row { flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
	.ralify-header-row__topbar { flex-basis: 100%; order: 2; }
	.ralify-header-row__logo img { height: 28px; }
}

/* Shared small icon glyph prefixed to a section eyebrow (Breaking Now, Trending Worlds, Hot Deals, Latest Stories, Featured Videos). */
.ralify-eyebrow-icon { display: inline-flex; margin-right: 5px; vertical-align: -2px; }
.ralify-eyebrow-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }

.ralify-notfound__head { display: grid; gap: 12px; justify-items: start; }
.ralify-notfound__code { margin: 0; color: var(--ralify-color-purple, #885cf6); font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.ralify-notfound__title { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.ralify-notfound__body { margin: 0; max-width: 58ch; color: var(--ralify-color-text-muted, #94a3b8); font-size: 0.9375rem; line-height: 1.65; text-wrap: pretty; }
.ralify-notfound__search { width: min(100%, 520px); margin-top: 6px; }
.ralify-notfound__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ralify-notfound__links a { display: inline-grid; min-height: 42px; align-items: center; padding: 0 18px; border: 1px solid var(--ralify-color-border, #273142); border-radius: var(--ralify-radius-sm, 8px); color: var(--ralify-color-text, #f8fafc); font-size: 0.8125rem; font-weight: 700; text-decoration: none; transition: border-color var(--ralify-transition, 180ms ease); }
.ralify-notfound__links a:first-child { border-color: transparent; background: var(--ralify-gradient-brand, linear-gradient(135deg, #2563eb, #885cf6)); }
.ralify-notfound__links a:hover { border-color: var(--ralify-color-purple, #885cf6); }
.ralify-notfound__section-title { margin: 0 0 16px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ralify-color-text-muted, #94a3b8); }
/* Holds story cards (media + body), which need ~420px to keep the headline
   column readable. 268px collapsed the body to roughly 17px. */
.ralify-notfound__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 20px; min-width: 0; }

/* Shared entity index (Guides, Videos, Deals). Shell classes come from rails.css. */
.ralify-entity-index__head { display: grid; gap: 8px; }
.ralify-entity-index__title { margin: 0; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.ralify-entity-index__intro { margin: 0; max-width: 62ch; color: var(--ralify-color-text-muted, #94a3b8); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.ralify-entity-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; min-width: 0; }
.ralify-entity-index__pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.ralify-entity-index__pagination a, .ralify-entity-index__pagination span { display: grid; min-width: 40px; height: 40px; place-items: center; padding: 0 12px; border: 1px solid var(--ralify-color-border, #273142); border-radius: var(--ralify-radius-sm, 8px); color: var(--ralify-color-text, #f8fafc); font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.ralify-entity-index__pagination .current { border-color: var(--ralify-color-cyan, #00e5ff); color: var(--ralify-color-cyan, #00e5ff); }
.ralify-entity-index__empty { display: grid; gap: 12px; justify-items: start; padding: clamp(28px, 5vw, 56px); border: 1px dashed rgba(148, 163, 184, 0.24); border-radius: var(--ralify-radius-lg, 16px); background: radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.1), transparent 58%), rgba(17, 24, 39, 0.5); }
.ralify-entity-index__empty-title { margin: 0; font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; }
.ralify-entity-index__empty-body { margin: 0; max-width: 56ch; color: var(--ralify-color-text-muted, #94a3b8); font-size: 0.875rem; line-height: 1.65; text-wrap: pretty; }
.ralify-entity-index__empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.ralify-entity-index__empty-cta { display: inline-grid; min-height: 42px; align-items: center; padding: 0 18px; border-radius: var(--ralify-radius-sm, 8px); background: var(--ralify-gradient-brand, linear-gradient(135deg, #2563eb, #885cf6)); color: #fff; font-size: 0.8125rem; font-weight: 800; text-decoration: none; }
.ralify-entity-index__empty-cta:hover { color: #fff; }
.ralify-entity-index__empty-link { color: var(--ralify-color-cyan, #00e5ff); font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.ralify-entity-index__empty-link:hover { text-decoration: underline; }

/* Form controls: specificity repair
   ------------------------------------------------------------------------
   Astra styles inputs with attribute selectors — input[type="search"],
   input[type="email"] and friends — which score 0,1,1. Every field in this
   theme is styled by a single class (.ralify-topbar__search-input,
   .ralify-rail-newsletter__input), which scores 0,1,0 and loses. The result
   on the live site was a white 40px-tall box inside a dark rounded search
   shell, on both the header search and every Morning Brief signup, in both
   languages. These rules pair a class with the attribute selector so the
   theme wins on specificity rather than on !important, which would then have
   to be fought again the next time a field needs a variant. */
.ralify-ui input[type="search"],
.ralify-ui input[type="email"],
.ralify-ui input[type="text"],
.ralify-ui input[type="url"],
.ralify-ui input[type="tel"],
.ralify-ui select,
.ralify-ui textarea {
	height: auto;
	border-color: var(--ralify-color-border, #273142);
	background-color: rgba(11, 15, 23, 0.72);
	background-image: none;
	color: var(--ralify-color-text, #f8fafc);
	box-shadow: none;
}

.ralify-ui input::placeholder,
.ralify-ui textarea::placeholder {
	color: var(--ralify-color-text-muted, #94a3b8);
	opacity: 1;
}

/* The header search input is a bare text field sitting inside its own styled
   shell, so it must stay transparent and unpadded — Astra's 12px/16px padding
   and 40px height pushed it out of the 46px pill. */
.ralify-ui input[type="search"].ralify-topbar__search-input {
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.ralify-ui input[type="email"].ralify-rail-newsletter__input {
	min-height: 44px;
	padding: 0 12px;
}

/* iOS Safari zooms the viewport whenever a focused field renders below 16px,
   and never zooms back out. Every filter select and signup field on this site
   is 13px, so the whole layout was jumping on first tap on mobile. */
@media (max-width: 782px) {
	.ralify-ui input[type="search"],
	.ralify-ui input[type="email"],
	.ralify-ui input[type="text"],
	.ralify-ui input[type="url"],
	.ralify-ui input[type="tel"],
	.ralify-ui select,
	.ralify-ui textarea {
		font-size: 16px;
	}
}

/* Inline icon sizing
   ------------------------------------------------------------------------
   Every icon in this theme is an inline <svg viewBox> with no width/height
   attribute, sized entirely by CSS. When a broad `svg { width: 100% }` rule
   from Astra or the Gutenberg addons outranks the theme's single-class
   selector, the glyph inherits the flex container's full width — that is what
   turned the Trending Stories trend arrow into a ~300px green chevron on
   mobile. This is the floor: any icon inside a link, button or icon span is
   capped at a sane glyph size unless a more specific rule says otherwise. */
.ralify-ui a > svg,
.ralify-ui button > svg,
.ralify-ui summary > svg,
.ralify-ui [class*="__icon"] > svg,
.ralify-ui [class*="__glyph"] > svg,
.ralify-ui [class*="-trend"] > svg {
	flex: 0 0 auto;
	max-width: 2.25em;
	max-height: 2.25em;
}

/* Popular searches / chip rows
   ------------------------------------------------------------------------
   A flex row of pills inside a grid or flex parent will not wrap if the
   parent never establishes a zero minimum width: the last chip ("League of
   Legends") ran past the shell edge and was clipped by the viewport in RTL. */
.ralify-site-footer__searches,
.ralify-site-footer__search-list {
	min-width: 0;
	max-width: 100%;
}

.ralify-site-footer__search-list a {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Product marks must not be reordered by the bidi algorithm
   ------------------------------------------------------------------------
   "Rally+" and "Ralify+" render as "+Rally" / "+RALIFY" inside an RTL
   paragraph, because a trailing "+" is bidi-neutral and gets resolved into
   the surrounding Arabic run. Isolating the mark pins it left-to-right. */
[dir="rtl"] .ralify-site-footer__column-title,
[dir="rtl"] .ralify-sidebar-shell__upgrade-copy strong,
[dir="rtl"] .ralify-topbar__rally-plus,
[dir="rtl"] .ralify-site-footer__logo-fallback,
[dir="rtl"] .ralify-header-row__logo-fallback {
	unicode-bidi: isolate;
}

[dir="rtl"] .ralify-site-footer__promo .ralify-site-footer__column-title {
	direction: ltr;
	text-align: right;
}

/* Latin runs inside Arabic sentences (game titles, dates, "GTA 6") drag their
   sentence-final period to the front — ".August 4, 2026". Isolating the run
   is the correct fix; this covers the common containers. */
[dir="rtl"] .ralify-story__meta,
[dir="rtl"] .ralify-rail-trending__meta,
[dir="rtl"] .ralify-rail-trending__time,
[dir="rtl"] time {
	unicode-bidi: isolate;
}

/* Mobile: keep the back-to-top control clear of footer content
   ------------------------------------------------------------------------
   The floating scroll-to-top button sat on top of the last row of popular
   search chips on small screens. */
@media (max-width: 700px) {
	.ralify-site-footer__searches {
		padding-bottom: 72px;
	}
}