.fbx-notice {
	padding: 10px 14px;
	background: #fff3cd;
	border: 1px dashed #d4a72c;
	color: #6b5900;
	font-size: 13px;
}

/*
 * The "Najbližší domáci zápas" widget's optional countdown - markup/theming
 * itself is the theme's own ".lte-countdown" (see class-widget-upcoming-home.php's
 * render_countdown()), this just adds breathing room from the match time
 * line above it, which that widget doesn't need on its own (LTE-Ext's
 * Countdown widget is normally used standalone, not stacked under other
 * content).
 */
.fbx-countdown {
	margin-top: 20px;
	margin-bottom: 20px;
}

/*
 * archive-links.js wraps EVERY theme-rendered match card (a.lte-item) in
 * .fbx-card-wrap and appends .fbx-links as a SIBLING of the card, not a
 * descendant - nesting the icon <a> tags inside the card's own <a> would
 * be invalid HTML and break click targets.
 *
 * .fbx-card-wrap, not .lte-item, is now the actual flex item inside
 * ".lte-football-matches.inner-page" (display:flex;flex-wrap:wrap), so it
 * needs the SAME flex-basis the theme gives .lte-item directly at every
 * breakpoint (style.css: 32% / 49% / 100%) - otherwise a wrapped card
 * sizes to its own content instead of the grid column, which is what made
 * cards render at uneven widths.
 */
.fbx-card-wrap {
	display: flex;
	flex-direction: column;
	flex: 0 0 32%;
}

@media (max-width: 1599px) {

	.fbx-card-wrap {
		flex: 0 0 49%;
	}
}

@media (max-width: 991px) {

	.fbx-card-wrap {
		flex: 0 0 100%;
	}
}

/*
 * The card's own bottom margin (theme CSS: ".lte-football-matches.inner-page
 * .lte-item { margin-bottom: 1%; }", 3 classes) would otherwise push
 * .fbx-links further down than intended - remove it here and give
 * .fbx-links the bottom margin instead, so the card + icon row together
 * still take up the same amount of vertical space as an unenhanced card.
 * Its bottom border is disabled too, so only .fbx-links' own border draws
 * the seam between card and icon row (avoids a doubled-up border line).
 * Needs the ".lte-football-matches.inner-page" prefix to out-specify that
 * theme rule (4 classes vs its 3) regardless of stylesheet load order.
 */
.lte-football-matches.inner-page .fbx-card-wrap .lte-item {
	margin-bottom: 0;
	border-bottom: 0;
}

.fbx-links {
	display: flex;
	justify-content: center;
	align-items: center;
	/*
	 * Always reserves the same height as a filled-in row (44px icon +
	 * this row's own 10px bottom padding + 1px border) even with 0 icons
	 * in it, so every card is the same height regardless of whether that
	 * match has any links set.
	 */
	min-height: 55px;
	gap: 10px;
	margin-top: 0;
	margin-bottom: 24px;
	padding-bottom: 10px;
	/*
	 * Continues the card's own border (1px solid rgba(0, 0, 0, 0.1), see
	 * ".lte-football-matches.inner-page .lte-item" in the theme's
	 * style.css) down around the icon row, so together they read as one
	 * seamless box. No top border - the card's own bottom border already
	 * closes that edge, a second one here would double up.
	 */
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 0;
}

/*
 * The theme itself hides the category ribbon on the archive grid
 * (style.css: ".lte-football-matches.inner-page .lte-item .lte-header-upcoming
 * { opacity: 0; }", with no hover reveal) - pre-existing behavior,
 * unrelated to archive-links.js. Overriding it here per request; the
 * repeated class selector matches the theme rule's specificity (4 classes)
 * without depending on stylesheet load order or !important.
 */
.lte-football-matches.inner-page .lte-item .lte-header-upcoming.lte-header-upcoming {
	opacity: 1;
}

/*
 * Extra top/bottom padding for the ribbon (theme default: "padding: 0px
 * 16px", no vertical padding) - covers both the archive grid and the
 * slider, since both share this same base selector (only the grid also
 * needs the opacity override above).
 */
.lte-football-matches .lte-item .lte-header-upcoming.lte-header-upcoming {
	padding-top: 5px;
	padding-bottom: 5px;
}

/*
 * Slider cards: .fbx-links is appended INSIDE the existing .lte-item
 * (itself already display:flex;flex-wrap:wrap - see archive-links.js for
 * why it isn't wrapped like a grid card), so it needs none of the
 * grid variant's "continue the card's border below it" treatment - just
 * a full-width row that wraps onto its own line at the bottom, with a
 * little breathing room from the content above it.
 */
.fbx-links.fbx-links-inline {
	width: 100%;
	flex-basis: 100%;
	margin-top: 10px;
	margin-bottom: 0;
	padding-bottom: 0;
	border: 0;
}

/*
 * Grid cards only: the ribbon is physically moved into its own <a>
 * (extractRibbonAsLink() in archive-links.js) when its league has an
 * official URL - reset the default <a> look so wrapping it doesn't change
 * how the ribbon itself appears.
 */
.fbx-league-link {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

/*
 * Slider cards only: the ribbon stays in place and becomes a synthetic
 * click target instead (makeRibbonClickableInline()) - just needs a
 * pointer cursor, since it's not a real <a>.
 */
.fbx-clickable {
	cursor: pointer;
}

.fbx-league-logo {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 6px;
	vertical-align: middle;
	object-fit: contain;
}

/*
 * Same look/hover as the theme's own slider arrows (style.css:
 * ".lte-arrow-left, .lte-arrow-right" and their :hover) - gray by default,
 * solid black with a white icon on hover, same transition.
 */
.fbx-link-icon {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 8px;
	font-size: 18px;
	/*
	 * Slider cards use a <span> (not a real <a>) for this, so the pointer
	 * cursor needs to be explicit - see buildIconButton() in
	 * archive-links.js.
	 */
	cursor: pointer;
	background-color: var(--gray, #f5f5f5);
	color: var(--black, #222222);
	transition: all 0.2s ease;
}

.fbx-link-icon .fa {
	color: inherit;
}

.fbx-link-icon:hover,
.fbx-link-icon:focus {
	background-color: var(--black, #222222);
	color: var(--white, #fff);
}

.fbx-link-icon .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Simple CSS tooltip, shown above the icon on hover/focus. */
.fbx-link-icon[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 3;
}

.fbx-link-icon[data-tooltip]::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 5px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 3;
}

.fbx-link-icon:hover[data-tooltip]::after,
.fbx-link-icon:focus[data-tooltip]::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.fbx-link-icon:hover[data-tooltip]::before,
.fbx-link-icon:focus[data-tooltip]::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/*
 * "Najbližší domáci zápas" only (scoped via ".lte-football-upcoming", not a
 * global ".fbx-link-icon" change) - 2x the archive grid/slider's icon size.
 * Gap is doubled to match, so the row stays visually proportionate instead
 * of the larger icons crowding together.
 */
.lte-football-upcoming .fbx-links {
	gap: 20px;
}

.lte-football-upcoming .fbx-link-icon {
	width: 88px;
	height: 88px;
	padding: 16px;
	font-size: 36px;
}

/*
 * Single "Football Match" fallback template (templates/single-football-match.php)
 * - matches the ".ptr-archive-wrap"/".vx-archive-wrap" convention used by
 * this codebase's other fallback templates: its own simple centered
 * max-width wrap, rather than the theme's Bootstrap row/col system.
 */
.fbx-match-single-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* Breathing room around the buy/stream/stats row between the reused
   ".lte-match-summary" header above it and the post's own content below. */
.fbx-match-single-wrap > .fbx-links {
	margin-top: 24px;
	margin-bottom: 40px;
}

.fbx-match-content {
	margin-bottom: 40px;
}

.fbx-venue {
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.fbx-venue__heading {
	font-family: var(--font-headers, 'Sofia Sans Extra Condensed'), sans-serif;
	letter-spacing: var(--font-headers-letterspacing, 0);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 22px;
	margin: 0 0 10px;
}

.fbx-venue__name {
	font-weight: 700;
	margin: 0 0 4px;
}

.fbx-venue__address {
	opacity: 0.65;
	margin: 0 0 16px;
}

/*
 * ".lte-header-type" (LTE-Ext's own "Football Summary" league badge, see
 * Football_Extend_Match_Render::render_summary()) has no vertical padding
 * by default (style.css: "padding: 0px 20px") since it was only ever plain
 * text before - needed here so the spliced-in ".fbx-league-logo" doesn't
 * overflow the badge, and to vertically center it against the text.
 */
.lte-match-summary .lte-header-type {
	display: inline-flex;
	align-items: center;
	padding-top: 6px;
	padding-bottom: 6px;
}

.fbx-venue-map {
	position: relative;
	width: 100%;
	padding-top: 40%;
	overflow: hidden;
	border-radius: 4px;
}

.fbx-venue-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {

	.fbx-venue-map {
		padding-top: 65%;
	}
}