/**
 * MMA Elementor widgets — default styling.
 *
 * Tokens measured off the MMA Magazine 2 demo so a widget dropped on a blank
 * page already matches the theme: Oswald throughout, italic uppercase titles,
 * fully-rounded red category pills, red italic date badges, and dark panels on
 * a light page. Every value here is also exposed as an Elementor style control,
 * so this is a starting point rather than a lock-in.
 */

/*
 * Tokens are also declared on :root because the theme renders some of these
 * widgets straight from PHP (the header events strip, the MMA fallback
 * templates). A standalone render_content() emits only .elementor-widget-container,
 * so the .elementor-widget[class*="mma-"] hook never matches and every var()
 * would resolve to nothing.
 */
:root,
.elementor-widget[class*="mma-"] {
	--mma-el-red: #e5192c;
	--mma-el-red-dark: #b81223;
	--mma-el-panel: #222329;
	--mma-el-panel-2: #1a1b21;
	--mma-el-panel-3: #2b2c33;
	--mma-el-ink: #101010;
	--mma-el-ink-soft: #333333;
	--mma-el-line: #e7e7ea;
	--mma-el-line-dark: rgba( 255, 255, 255, 0.08 );
	--mma-el-soft: rgba( 255, 255, 255, 0.035 );
	--mma-el-text: #ffffff;
	--mma-el-muted: rgba( 255, 255, 255, 0.6 );
	--mma-el-win: #17a44a;
	--mma-el-loss: #e5192c;
	--mma-el-draw: #8b8f9c;
	--mma-el-font: "Oswald", "Arial Narrow", sans-serif;
}

.elementor-widget[class*="mma-"],
.mma-el-bar,
.mma-el-card,
.mma-el-history,
.mma-el-rankings,
.mma-el-results,
.mma-el-next,
.mma-el-counters {
	font-family: var( --mma-el-font );
}

/* Shared type roles ------------------------------------------------------- */

.mma-el-title,
.mma-el-name,
.mma-el-tile-name,
.mma-el-event-item-title,
.mma-el-corner-name,
.mma-el-bout-name,
.mma-el-rank-name,
.mma-el-event-title,
.mma-el-compare-name {
	font-family: var( --mma-el-font );
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.2px;
}

/* Panel heading: small italic label over a hairline rule with a red stub. */
.mma-el-section-title,
.mma-el-history-title,
.mma-el-card-title,
.mma-el-results-title,
.mma-el-rank-group-title,
.mma-el-bracket-title,
.mma-el-next-title {
	position: relative;
	display: block;
	margin: 0 0 14px;
	padding: 0 0 9px;
	border-bottom: 1px solid var( --mma-el-line );
	color: var( --mma-el-ink );
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	background: none;
}

.mma-el-section-title::after,
.mma-el-history-title::after,
.mma-el-card-title::after,
.mma-el-results-title::after,
.mma-el-rank-group-title::after,
.mma-el-bracket-title::after,
.mma-el-next-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	background: var( --mma-el-red );
}

/* On a dark panel the heading flips to white. */
.mma-el-on-dark .mma-el-section-title,
.mma-el-rankings--dark .mma-el-rank-group-title,
.mma-el-card--dark .mma-el-card-title,
.mma-el-results--dark .mma-el-results-title {
	border-bottom-color: var( --mma-el-line-dark );
	color: var( --mma-el-text );
}

/* Category / status pill -------------------------------------------------- */

.mma-el-pill,
.mma-el-term,
.mma-el-event-status,
.mma-el-outcome,
.mma-el-result {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 999px;
	background: var( --mma-el-red );
	color: #fff;
	font-family: var( --mma-el-font );
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.mma-el-outcome.win,
.mma-el-result.win {
	background: var( --mma-el-win );
}

.mma-el-outcome.loss,
.mma-el-result.loss {
	background: var( --mma-el-loss );
}

.mma-el-outcome.draw,
.mma-el-result.draw,
.mma-el-outcome.no-contest,
.mma-el-result.no-contest {
	background: var( --mma-el-draw );
}

.mma-el-event-status.is-over {
	background: #6b6f7d;
}

/* Editor placeholder ------------------------------------------------------ */

.mma-el-notice {
	padding: 12px 14px;
	border: 1px dashed rgba( 128, 128, 128, 0.6 );
	color: #8a8a8a;
	font-family: var( --mma-el-font );
	font-size: 13px;
	font-style: italic;
	line-height: 1.4;
}

/* ------------------------------------------------------------------ fighter */

.mma-el-fighter-name .mma-el-name {
	margin: 0;
	font-size: 30px;
	letter-spacing: -1px;
	line-height: 1.08;
}

.mma-el-fighter-name .mma-el-name a {
	color: inherit;
	text-decoration: none;
}

.mma-el-nickname {
	color: var( --mma-el-red );
	font-style: italic;
	font-weight: 600;
}

.mma-el-nickname--block {
	display: block;
	font-size: 0.62em;
}

.mma-el-fighter-image img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* record ------------------------------------------------------------------ */

.mma-el-record {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mma-el-record--inline {
	display: block;
	font-style: italic;
	font-weight: 700;
}

.mma-el-record-item {
	flex: 1 1 0;
	min-width: 62px;
	padding: 16px 6px;
	background: var( --mma-el-soft );
	border: 1px solid var( --mma-el-line-dark );
	text-align: center;
}

.mma-el-record-number {
	display: block;
	color: var( --mma-el-text );
	font-size: 34px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.mma-el-record-label {
	display: block;
	margin-top: 6px;
	color: var( --mma-el-muted );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ratio + stat bars ------------------------------------------------------- */

.mma-el-ratio-head,
.mma-el-stat-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mma-el-ratio-values,
.mma-el-stat-values {
	display: inline-flex;
	gap: 10px;
	font-style: italic;
	font-weight: 700;
}

.mma-el-ratio-track,
.mma-el-stat-track {
	display: block;
	width: 100%;
	height: 6px;
	overflow: hidden;
	background: rgba( 128, 128, 128, 0.25 );
}

.mma-el-ratio-fill,
.mma-el-stat-fill {
	display: block;
	height: 100%;
	background: var( --mma-el-red );
	transition: width 0.4s ease;
}

.mma-el-stats {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* history ----------------------------------------------------------------- */

.mma-el-history-row {
	display: flex;
	align-items: center;
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
	font-size: 12px;
}

.mma-el-history-body .mma-el-history-row:nth-child( odd ) {
	background: var( --mma-el-panel-3 );
}

.mma-el-history-row--head {
	background: var( --mma-el-panel-2 );
	color: var( --mma-el-muted );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mma-el-history-cell {
	flex: 1 1 0;
	padding: 13px 8px;
	text-align: center;
}

.mma-el-history-cell--opponent,
.mma-el-history-cell--event {
	flex: 3 1 0;
	font-style: italic;
	font-weight: 600;
	text-transform: uppercase;
}

.mma-el-history-cell a {
	color: inherit;
	text-decoration: none;
}

.mma-el-history-cell a:hover {
	color: var( --mma-el-red );
}

.mma-el-history-cell .mma-el-result {
	padding: 4px 10px;
	font-size: 10px;
}

/* info list --------------------------------------------------------------- */

.mma-el-info-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var( --mma-el-line-dark );
}

.mma-el-info--stacked .mma-el-info-item {
	display: block;
}

.mma-el-info-label {
	color: var( --mma-el-muted );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mma-el-info-value {
	font-style: italic;
	font-weight: 600;
	text-transform: uppercase;
}

.mma-el-info-value a {
	color: inherit;
	text-decoration: none;
}

.mma-el-info-value a:hover {
	color: var( --mma-el-red );
}

/* next fight -------------------------------------------------------------- */

.mma-el-next {
	padding: 18px;
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
}

.mma-el-next .mma-el-next-title {
	border-bottom-color: var( --mma-el-line-dark );
	color: var( --mma-el-text );
}

.mma-el-next-opponent-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.mma-el-next-img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
}

.mma-el-next-vs {
	color: var( --mma-el-muted );
	font-size: 11px;
	font-style: italic;
	text-transform: uppercase;
}

.mma-el-next-opponent {
	color: inherit;
	font-style: italic;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.mma-el-next-event a {
	color: inherit;
	font-style: italic;
	text-decoration: none;
}

.mma-el-next-date,
.mma-el-next-location {
	color: var( --mma-el-muted );
	font-size: 12px;
}

/* compare ----------------------------------------------------------------- */

.mma-el-compare-head {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.mma-el-compare-fighter {
	flex: 1 1 0;
	text-align: center;
}

.mma-el-compare-img {
	max-width: 100%;
	height: auto;
}

.mma-el-compare-name {
	margin-top: 8px;
	font-size: 16px;
}

.mma-el-compare-name a {
	color: inherit;
	text-decoration: none;
}

.mma-el-compare-vs {
	flex: 0 0 auto;
	padding-bottom: 20px;
	color: var( --mma-el-red );
	font-size: 22px;
	font-style: italic;
	font-weight: 700;
}

.mma-el-compare-row {
	display: flex;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var( --mma-el-line-dark );
}

.mma-el-compare-row .mma-el-compare-value {
	flex: 1 1 0;
	font-style: italic;
	font-weight: 700;
	text-align: center;
}

.mma-el-compare-label {
	flex: 0 0 auto;
	min-width: 120px;
	color: var( --mma-el-muted );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- event */

.mma-el-event-title {
	margin: 0;
	font-size: 28px;
	letter-spacing: -0.6px;
	line-height: 1.1;
}

.mma-el-event-title a {
	color: inherit;
	text-decoration: none;
}

.mma-el-event-title-sub {
	display: block;
	color: var( --mma-el-red );
	font-size: 0.6em;
}

.mma-el-event-date,
.mma-el-event-location {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-style: italic;
}

.mma-el-pin {
	width: 9px;
	height: 9px;
	background: var( --mma-el-red );
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
}

/* countdown --------------------------------------------------------------- */

.mma-el-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mma-el-countdown-item {
	flex: 1 1 0;
	min-width: 70px;
	padding: 15px 8px;
	background: var( --mma-el-soft );
	border: 1px solid var( --mma-el-line-dark );
	color: var( --mma-el-text );
	text-align: center;
}

.mma-el-countdown-number {
	display: block;
	font-size: 34px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.mma-el-countdown-label {
	display: block;
	margin-top: 6px;
	color: var( --mma-el-muted );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.mma-el-countdown-expired {
	font-style: italic;
}

/* face-off + fight card --------------------------------------------------- */

.mma-el-faceoff {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.mma-el-corner {
	flex: 1 1 0;
	padding: 16px;
	background: var( --mma-el-soft );
	color: var( --mma-el-text );
	text-align: center;
}

.mma-el-corner-img {
	max-width: 100%;
	height: auto;
}

.mma-el-corner-name {
	margin-top: 10px;
	font-size: 15px;
}

.mma-el-corner-name a {
	color: inherit;
	text-decoration: none;
}

.mma-el-corner-record {
	margin-top: 2px;
	color: var( --mma-el-muted );
	font-size: 12px;
	font-style: italic;
}

.mma-el-vs,
.mma-el-bout-vs {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	color: var( --mma-el-red );
	font-size: 20px;
	font-style: italic;
	font-weight: 700;
}

.mma-el-faceoff-details,
.mma-el-bout-details {
	padding: 8px 4px;
	color: var( --mma-el-muted );
	font-size: 11px;
	font-style: italic;
	text-align: center;
}

.mma-el-card-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mma-el-bout {
	display: flex;
	align-items: stretch;
}

.mma-el-bout-corner {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	overflow: hidden;
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
}

.mma-el-bout-corner--one {
	flex-direction: row-reverse;
	text-align: right;
}

.mma-el-bout-img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 50%;
}

.mma-el-bout-name {
	display: block;
	font-size: 13px;
}

.mma-el-bout-name a {
	color: inherit;
	text-decoration: none;
}

.mma-el-bout-record {
	display: block;
	color: var( --mma-el-muted );
	font-size: 11px;
	font-style: italic;
}

/* --------------------------------------------------------- loops and lists */

.mma-el-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 20px;
}

.mma-el-tile {
	overflow: hidden;
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
}

.mma-el-grid--card .mma-el-tile {
	display: flex;
	flex-direction: column;
}

.mma-el-grid--card .mma-el-tile-body {
	margin-top: auto;
}

.mma-el-grid--row .mma-el-tile {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mma-el-tile-media {
	display: block;
	position: relative;
}

.mma-el-tile-img {
	display: block;
	width: 100%;
	height: auto;
}

.mma-el-grid--row .mma-el-tile-img {
	width: 62px;
	height: 62px;
	object-fit: cover;
}

.mma-el-tile-media--empty {
	display: block;
	aspect-ratio: 298 / 400;
	background:
		linear-gradient( 135deg, rgba( 255, 255, 255, 0.04 ) 25%, transparent 25% ) 0 0 / 14px 14px,
		var( --mma-el-panel-3 );
}

.mma-el-grid--row .mma-el-tile-media--empty {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	aspect-ratio: auto;
}

.mma-el-tile-body {
	padding: 12px 14px 14px;
}

.mma-el-grid--row .mma-el-tile-body {
	padding: 0 12px 0 0;
}

.mma-el-tile-name {
	display: block;
	font-size: 13px;
	line-height: 1.35;
}

.mma-el-tile-name a {
	color: inherit;
	text-decoration: none;
}

.mma-el-tile-name a:hover {
	color: var( --mma-el-red );
}

.mma-el-tile-nickname {
	display: block;
	color: var( --mma-el-red );
	font-size: 11px;
	font-style: italic;
}

.mma-el-tile-meta {
	display: block;
	margin-top: 5px;
	color: var( --mma-el-muted );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mma-el-tile .mma-el-ratio-track {
	margin-top: 9px;
	height: 4px;
}

/* events ------------------------------------------------------------------ */

.mma-el-events {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mma-el-events--grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.mma-el-event-item {
	overflow: hidden;
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
}

.mma-el-event-media img {
	display: block;
	width: 100%;
	height: auto;
}

.mma-el-event-body {
	padding: 13px 16px;
}

.mma-el-event-promotion {
	display: block;
	color: var( --mma-el-red );
	font-size: 11px;
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mma-el-event-item-title {
	display: block;
	font-size: 14px;
	line-height: 1.3;
}

.mma-el-event-item-title a {
	color: inherit;
	text-decoration: none;
}

.mma-el-event-item-title a:hover {
	color: var( --mma-el-red );
}

.mma-el-event-item-sub {
	display: block;
	color: var( --mma-el-muted );
	font-size: 12px;
	font-style: italic;
}

.mma-el-event-meta {
	display: block;
	margin-top: 6px;
	color: var( --mma-el-muted );
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* events "rows" skin: red italic date badge + status pill ----------------- */

.mma-el-events--rows .mma-el-event-item {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.mma-el-event-daybadge {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 54px;
	background: var( --mma-el-red );
	color: #fff;
	line-height: 1;
}

.mma-el-event-daybadge-day {
	font-size: 18px;
	font-style: italic;
	font-weight: 700;
}

.mma-el-event-daybadge-mon {
	margin-top: 3px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.85;
}

.mma-el-events--rows .mma-el-event-body {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 14px;
}

.mma-el-event-rowmain {
	min-width: 0;
}

.mma-el-event-rowmeta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	color: var( --mma-el-muted );
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.mma-el-event-rowside {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	text-align: right;
}

.mma-el-event-year {
	color: var( --mma-el-muted );
	font-size: 11px;
	font-style: italic;
}

.mma-el-event-countdown-pill {
	padding: 5px 10px;
	background: var( --mma-el-red );
	border-radius: 999px;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.mma-el-event-countdown-pill.is-soon {
	background: #fff;
	color: var( --mma-el-red );
}

/* events bar -------------------------------------------------------------- */

.mma-el-bar {
	display: flex;
	flex-wrap: wrap;
	background: var( --mma-el-panel-2 );
	color: var( --mma-el-text );
}

.mma-el-bar-item {
	display: flex;
	flex: 1 1 0;
	min-width: 220px;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
}

.mma-el-bar-daybadge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var( --mma-el-red );
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
}

.mma-el-bar-promotion {
	color: var( --mma-el-muted );
	font-size: 10px;
	font-style: italic;
}

.mma-el-bar-images {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}

.mma-el-bar-img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 50%;
}

.mma-el-bar-image + .mma-el-bar-image .mma-el-bar-img {
	margin-left: -10px;
}

.mma-el-bar-fighters {
	color: inherit;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.25;
	text-decoration: none;
	text-transform: uppercase;
}

.mma-el-bar-date {
	margin-left: auto;
	color: var( --mma-el-muted );
	font-size: 10px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* rankings ---------------------------------------------------------------- */

.mma-el-rankings {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mma-el-rank-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 0;
	border-bottom: 1px solid var( --mma-el-line-dark );
	color: var( --mma-el-text );
}

.mma-el-rank-row:last-child {
	border-bottom: 0;
}

.mma-el-rank-position {
	flex: 0 0 auto;
	min-width: 20px;
	color: var( --mma-el-red );
	font-size: 14px;
	font-style: italic;
	font-weight: 700;
	text-align: center;
}

.mma-el-rank-img {
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.mma-el-rank-main {
	min-width: 0;
	flex: 1 1 auto;
}

.mma-el-rank-name {
	display: block;
	font-size: 13px;
}

.mma-el-rank-name a {
	color: inherit;
	text-decoration: none;
}

.mma-el-rank-name a:hover {
	color: var( --mma-el-red );
}

/* W / L / D boxes under the ranked fighter's name. */
.mma-el-rank-wld {
	display: flex;
	gap: 3px;
	margin-top: 5px;
}

.mma-el-rank-wld span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	padding: 3px 7px;
	background: var( --mma-el-red );
	color: rgba( 255, 255, 255, 0.75 );
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}

.mma-el-rank-wld .is-loss {
	background: var( --mma-el-panel-3 );
}

.mma-el-rank-wld .is-draw {
	background: var( --mma-el-draw );
}

.mma-el-rank-record {
	flex: 0 0 auto;
	color: var( --mma-el-muted );
	font-size: 11px;
	font-style: italic;
}

/* results ----------------------------------------------------------------- */

.mma-el-result-row {
	padding: 11px 0;
	border-bottom: 1px solid var( --mma-el-line-dark );
	color: var( --mma-el-text );
}

.mma-el-result-fighters {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
}

.mma-el-result-fighter {
	flex: 1 1 0;
}

.mma-el-result-fighter:last-child {
	text-align: right;
}

.mma-el-result-fighter a {
	color: inherit;
	text-decoration: none;
}

.mma-el-result-fighter.is-winner {
	color: var( --mma-el-red );
}

.mma-el-result-vs {
	flex: 0 0 auto;
	color: var( --mma-el-muted );
	font-size: 10px;
	font-weight: 400;
	text-transform: lowercase;
}

.mma-el-result-meta {
	display: block;
	margin-top: 4px;
	color: var( --mma-el-muted );
	font-size: 10px;
	letter-spacing: 0.4px;
	text-decoration: none;
	text-transform: uppercase;
}

/* counters ---------------------------------------------------------------- */

.mma-el-counters {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 16px;
}

.mma-el-counter {
	padding: 24px 14px;
	background: var( --mma-el-soft );
	border: 1px solid var( --mma-el-line-dark );
	text-align: center;
}

.mma-el-counter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border: 2px solid var( --mma-el-red );
	border-radius: 50%;
	color: var( --mma-el-red );
}

.mma-el-counter-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.mma-el-counter-number {
	display: block;
	color: var( --mma-el-text );
	font-size: 36px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.mma-el-counter-label {
	display: block;
	margin-top: 8px;
	color: var( --mma-el-muted );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* term list --------------------------------------------------------------- */

.mma-el-terms {
	display: flex;
	gap: 8px;
}

.mma-el-terms--list {
	flex-direction: column;
	align-items: flex-start;
}

.mma-el-terms--inline {
	flex-wrap: wrap;
}

.mma-el-term {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.mma-el-term a {
	color: inherit;
	text-decoration: none;
}

.mma-el-term-count {
	opacity: 0.65;
}

/* bracket ----------------------------------------------------------------- */

.mma-el-bracket-rounds {
	display: flex;
	gap: 16px;
	overflow-x: auto;
}

.mma-el-bracket-round {
	display: flex;
	flex: 1 0 180px;
	flex-direction: column;
	justify-content: space-around;
	gap: 12px;
}

.mma-el-bracket-round-label {
	color: var( --mma-el-muted );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-align: center;
	text-transform: uppercase;
}

.mma-el-bracket-match {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mma-el-bracket-slot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
	font-size: 12px;
	font-style: italic;
	font-weight: 600;
	text-transform: uppercase;
}

.mma-el-bracket-slot.is-winner {
	background: var( --mma-el-red );
}

.mma-el-bracket-slot a {
	color: inherit;
	text-decoration: none;
}

.mma-el-bracket-img {
	width: 26px;
	height: 26px;
	object-fit: cover;
	border-radius: 50%;
}

.mma-el-bracket-record {
	margin-left: auto;
	font-size: 10px;
	font-style: normal;
	opacity: 0.7;
}

.mma-el-bracket-tba {
	opacity: 0.45;
}

/* -------------------------------------------------------------- responsive */

@media ( max-width: 1024px ) {
	.mma-el-counters {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.mma-el-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mma-el-events--grid {
		grid-template-columns: 1fr;
	}

	.mma-el-history-cell--method,
	.mma-el-history-cell--time {
		display: none;
	}

	.mma-el-compare-label {
		min-width: 80px;
		font-size: 9px;
	}

	.mma-el-bar-item {
		min-width: 100%;
	}

	.mma-el-events--rows .mma-el-event-body {
		flex-wrap: wrap;
	}
}

/* events bar: text block + trailing red total ----------------------------- */

.mma-el-bar-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.mma-el-bar-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var( --mma-el-muted );
	font-size: 10px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mma-el-bar-meta .mma-el-pin {
	width: 7px;
	height: 7px;
}

.mma-el-bar-total {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: var( --mma-el-red );
	color: #fff;
	text-align: center;
}

.mma-el-bar-total-number {
	font-size: 20px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.mma-el-bar-total-label {
	margin-top: 2px;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Attribute card grid — the fighter profile stat boxes. */
.mma-el-info--cards {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 10px;
}

.mma-el-info--cards .mma-el-info-item {
	display: block;
	padding: 10px 14px;
	background: rgba( 255, 255, 255, 0.05 );
	border: 0;
	border-radius: 10px;
}

.mma-el-info--cards .mma-el-info-label {
	display: block;
	margin-bottom: 3px;
	color: #838c8e;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
}

.mma-el-info--cards .mma-el-info-value {
	display: block;
	min-height: 22px;
	color: #fff;
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
}

/* Division pill sitting over a fighter card image. */
.mma-el-tile {
	position: relative;
}

.mma-el-tile-pill {
	position: absolute;
	bottom: 100%;
	left: 12px;
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 10px;
}

.mma-el-grid--card .mma-el-tile-body {
	position: relative;
}

.mma-el-tile .mma-el-rank-wld {
	margin-top: 7px;
}

@media ( max-width: 1024px ) {
	.mma-el-info--cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ------------------------------------------------ compact event rows (demo) */

/*
 * Measured off the demo: a 614x72 row, red day badge on the left, title and
 * meta stacked, then a numeric "8 / 2026" over the countdown pill on the right.
 */
.mma-el-events--rows {
	gap: 6px;
}

.mma-el-events--rows .mma-el-event-item {
	min-height: 72px;
	align-items: stretch;
}

.mma-el-event-daybadge {
	width: 58px;
	justify-content: center;
}

.mma-el-event-daybadge-day {
	font-size: 22px;
	line-height: 1;
}

.mma-el-events--rows .mma-el-event-body {
	padding: 10px 14px;
	gap: 10px;
}

.mma-el-events--rows .mma-el-event-item-title {
	font-size: 14px;
	line-height: 1.25;
}

.mma-el-events--rows .mma-el-event-item-sub {
	font-size: 11px;
	line-height: 1.3;
}

.mma-el-event-rowmeta {
	margin-top: 4px;
	color: #838c8e;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
}

.mma-el-event-rowside {
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
}

.mma-el-event-monthyear {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: #fff;
	font-size: 13px;
	font-style: italic;
	font-weight: 700;
}

.mma-el-event-sep,
.mma-el-event-year {
	color: #838c8e;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
}

.mma-el-event-countdown-pill {
	padding: 2px 9px 3px;
	font-size: 9px;
	letter-spacing: 0.6px;
}

/* ==========================================================================
   Responsive — widget internals
   ========================================================================== */

@media ( max-width: 1024px ) {
	.mma-el-faceoff {
		gap: 6px;
	}

	.mma-el-corner {
		padding: 12px 8px;
	}

	.mma-el-corner-name {
		font-size: 13px;
	}
}

@media ( max-width: 767px ) {
	/* Event rows: the day badge narrows and the right column drops beneath. */
	.mma-el-events--rows .mma-el-event-body {
		flex-wrap: wrap;
		gap: 6px;
	}

	.mma-el-event-rowside {
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: flex-start;
		gap: 10px;
	}

	.mma-el-event-daybadge {
		width: 46px;
	}

	.mma-el-events--rows .mma-el-event-item {
		min-height: 0;
	}

	/* The face-off stacks rather than squeezing two portraits side by side. */
	.mma-el-faceoff {
		flex-direction: column;
	}

	.mma-el-vs {
		min-height: 34px;
	}

	/* Fight card rows keep both corners but lose the portraits. */
	.mma-el-bout-img,
	.mma-el-bout-img-link {
		display: none;
	}

	.mma-el-bout-corner {
		padding: 9px 10px;
	}

	.mma-el-bout-name {
		font-size: 12px;
	}

	.mma-el-record-number,
	.mma-el-countdown-number {
		font-size: 26px;
	}

	.mma-el-rank-img {
		width: 32px;
		height: 32px;
	}
}

@media ( max-width: 560px ) {
	/* One column reads better than two half-width cards on a phone. */
	.mma-el-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px;
	}

	.mma-el-info--cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* Only the columns that carry the result survive the narrowest screens. */
	.mma-el-history-cell--round {
		display: none;
	}

	.mma-el-tile-name,
	.mma-el-event-item-title {
		font-size: 12px;
	}

	.mma-el-compare-label {
		min-width: 64px;
		font-size: 9px;
	}

	.mma-el-bracket-round {
		flex: 1 0 150px;
	}
}

/* ------------------------------------------------- face-off carries its own surface */

/*
 * The corners used a translucent white tint, which only reads on a dark panel —
 * on the white single-event panel it rendered white name on white ground. The
 * widget now paints its own dark surface so it works on either.
 */
.mma-el-faceoff {
	padding: 14px;
	background: var( --mma-el-panel-2 );
}

.mma-el-faceoff .mma-el-corner {
	background: var( --mma-el-panel );
	color: var( --mma-el-text );
}

.mma-el-faceoff .mma-el-corner-name,
.mma-el-faceoff .mma-el-corner-name a {
	color: var( --mma-el-text );
}

.mma-el-faceoff .mma-el-corner-record {
	color: var( --mma-el-muted );
}

/* Same reasoning for the record boxes and countdown when placed on white. */
.mma-el-record--boxes .mma-el-record-item,
.mma-el-countdown-item {
	background: var( --mma-el-panel );
	border-color: rgba( 255, 255, 255, 0.08 );
}

.mma-el-record--boxes .mma-el-record-number,
.mma-el-countdown-number {
	color: var( --mma-el-text );
}

.mma-el-record--boxes .mma-el-record-label,
.mma-el-countdown-label {
	color: var( --mma-el-muted );
}