/**
 * Football Utilities Styling for BaanPolball.net
 * Match cards, live indicators, timeline, stats bars, lineups, and standings tables.
 */

/* Quick Navigation */
.bpb-quick-nav-wrap {
	background-color: #0b6841; /* Deeper pitch emerald */
	border-bottom: 1px solid #085233;
}

.bpb-quick-nav {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 6px;
	padding: 4px 0;
}

.bpb-quick-nav::-webkit-scrollbar {
	display: none;
}

.bpb-quick-link {
	color: #ffffff;
	padding: 8px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	border-radius: var(--bpb-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	opacity: 0.9;
	transition: all 0.15s ease-in-out;
}

.bpb-quick-link:hover,
.bpb-quick-link.is-active {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

/* Date Navigation */
.bpb-date-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	padding: 8px 14px;
	box-shadow: var(--bpb-shadow-sm);
}

.bpb-date-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bpb-text);
	font-weight: 600;
	font-size: 0.875rem;
	padding: 6px 12px;
	border-radius: var(--bpb-radius-sm);
	background-color: var(--bpb-surface-alt);
}

.bpb-date-btn:hover {
	background-color: var(--bpb-border);
	color: var(--bpb-text);
}

.bpb-date-current {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 0.9375rem;
}

.bpb-today-badge {
	background-color: var(--bpb-primary);
	color: #ffffff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bpb-date-input {
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-sm);
	padding: 4px 8px;
	font-size: 0.8125rem;
	font-family: inherit;
	background-color: var(--bpb-surface);
	color: var(--bpb-text);
}

/* Filter Chips */
.bpb-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 20px 0;
}

.bpb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: 20px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bpb-text);
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.bpb-chip:hover {
	background-color: var(--bpb-surface-alt);
	color: var(--bpb-text);
}

.bpb-chip.is-active {
	background-color: var(--bpb-primary);
	border-color: var(--bpb-primary);
	color: #ffffff;
}

.bpb-chip.is-active .bpb-live-dot {
	background-color: #ffffff;
}

/* Badges */
.bpb-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bpb-badge-live {
	background-color: var(--bpb-live-soft);
	color: var(--bpb-live);
	border: 1px solid rgba(220, 38, 38, 0.25);
}

.bpb-badge-ft {
	background-color: var(--bpb-surface-alt);
	color: var(--bpb-text-muted);
}

.bpb-badge-upcoming {
	background-color: var(--bpb-primary-soft);
	color: var(--bpb-primary);
}

.bpb-badge-alert {
	background-color: #fef3c7;
	color: #92400e;
}

/* Team Crests */
.bpb-crest {
	border-radius: 50%;
	object-fit: contain;
	display: inline-block;
	flex-shrink: 0;
}

.bpb-crest-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bpb-surface-alt);
	color: var(--bpb-text);
	border: 1px solid var(--bpb-border);
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 700;
	flex-shrink: 0;
	text-align: center;
}

/* League Groups */
.bpb-league-group {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	margin-bottom: 20px;
	overflow: hidden;
	box-shadow: var(--bpb-shadow-sm);
}

.bpb-league-header {
	background-color: var(--bpb-surface-alt);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--bpb-border);
}

.bpb-league-name {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--bpb-text);
}

.bpb-league-country {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
	margin-left: 6px;
}

.bpb-league-view-all {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bpb-primary);
}

/* Match Card Rows */
.bpb-matches-list {
	display: flex;
	flex-direction: column;
}

.bpb-match-card {
	display: grid;
	grid-template-columns: 80px 1fr 68px;
	align-items: center;
	padding: 10px 16px;
	border-bottom: 1px solid var(--bpb-border-subtle);
	transition: background-color 0.1s ease;
}

.bpb-match-card:last-child {
	border-bottom: none;
}

.bpb-match-card:hover {
	background-color: #fafbfc;
}

.bpb-match-is-live {
	background-color: #fffdfd;
}

.bpb-match-status-col {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
}

.bpb-live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--bpb-live);
	font-weight: 700;
}

.bpb-ft-badge {
	font-weight: 700;
	color: var(--bpb-text-muted);
}

.bpb-match-time {
	font-weight: 600;
	color: var(--bpb-text);
}

/* Teams Col */
.bpb-match-teams-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-inline: 8px;
}

.bpb-team-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bpb-team-identity {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.bpb-team-name {
	font-weight: 600;
	font-size: 0.9375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--bpb-text);
}

.bpb-team-score {
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--bpb-text);
	width: 24px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	transition: all 0.3s ease;
}

.bpb-score-updated {
	animation: bpb-score-flash 1.2s ease;
}

@keyframes bpb-score-flash {
	0% { background-color: #fef08a; transform: scale(1.15); }
	100% { background-color: transparent; transform: scale(1); }
}

/* Match Action */
.bpb-match-action-col {
	text-align: right;
}

.bpb-match-centre-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--bpb-radius-sm);
	background-color: var(--bpb-surface-alt);
	color: var(--bpb-text);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--bpb-border);
}

.bpb-match-centre-btn:hover {
	background-color: var(--bpb-primary);
	border-color: var(--bpb-primary);
	color: #ffffff;
}

/* Match Centre Hero */
.bpb-match-hero {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	padding: 24px;
	margin: 16px 0 24px 0;
	box-shadow: var(--bpb-shadow-sm);
}

.bpb-match-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--bpb-text-muted);
	margin-bottom: 24px;
}

.bpb-hero-comp-link {
	font-weight: 700;
	color: var(--bpb-text);
}

.bpb-meta-sep {
	color: var(--bpb-text-subtle);
}

.bpb-match-hero-scoreboard {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.bpb-hero-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.bpb-hero-team-name {
	font-size: 1.25rem;
	margin: 0;
}

.bpb-hero-venue {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
}

.bpb-hero-scorebox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.bpb-hero-score-digits {
	font-size: 2.75rem;
	font-weight: 900;
	line-height: 1;
	color: var(--bpb-text);
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: center;
	gap: 8px;
}

.bpb-hero-venue-info,
.bpb-hero-referee-info {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
}

/* Match Centre Grid */
.bpb-match-centre-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 992px) {
	.bpb-match-centre-grid {
		grid-template-columns: 1fr 340px;
	}
}

.bpb-card-section {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: var(--bpb-shadow-sm);
}

.bpb-card-section-title {
	font-size: 1.125rem;
	margin: 0 0 16px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bpb-border);
}

.bpb-card-empty-note {
	color: var(--bpb-text-muted);
	font-style: italic;
	font-size: 0.9375rem;
	margin: 0;
}

/* Timeline */
.bpb-timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bpb-timeline-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}

.bpb-timeline-minute {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--bpb-text-muted);
	width: 36px;
	flex-shrink: 0;
}

.bpb-timeline-icon {
	font-size: 1.125rem;
	flex-shrink: 0;
}

.bpb-timeline-content {
	display: flex;
	flex-direction: column;
}

.bpb-event-player {
	font-size: 0.9375rem;
}

.bpb-event-assist,
.bpb-event-detail {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
}

/* Stats Comparison */
.bpb-stats-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	font-weight: 700;
	font-size: 0.875rem;
}

.bpb-stat-category-label {
	color: var(--bpb-text-muted);
	font-size: 0.8125rem;
	text-transform: uppercase;
}

.bpb-stats-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bpb-stat-values {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
	font-size: 0.875rem;
}

.bpb-stat-num {
	font-weight: 700;
	width: 40px;
}

.bpb-stat-home-num {
	text-align: left;
}

.bpb-stat-away-num {
	text-align: right;
}

.bpb-stat-label {
	color: var(--bpb-text-muted);
	font-weight: 500;
	font-size: 0.8125rem;
}

.bpb-stat-bar-track {
	height: 8px;
	background-color: var(--bpb-surface-alt);
	border-radius: 4px;
	display: flex;
	overflow: hidden;
}

.bpb-bar-home {
	background-color: var(--bpb-primary);
	height: 100%;
}

.bpb-bar-away {
	background-color: #64748b;
	height: 100%;
}

/* Lineups */
.bpb-lineups-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.bpb-lineups-container {
		grid-template-columns: 1fr 1fr;
	}
}

.bpb-lineup-team-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.bpb-lineup-team-title {
	font-size: 1rem;
	margin: 0;
}

.bpb-formation-badge {
	background-color: var(--bpb-surface-alt);
	border: 1px solid var(--bpb-border);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
}

.bpb-lineup-coach {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
	margin-bottom: 12px;
}

.bpb-lineup-section-title {
	font-size: 0.875rem;
	text-transform: uppercase;
	color: var(--bpb-text-muted);
	letter-spacing: 0.04em;
	margin: 12px 0 8px 0;
}

.bpb-player-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bpb-player-item {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	padding: 3px 0;
}

.bpb-player-number {
	width: 24px;
	font-weight: 700;
	color: var(--bpb-text-muted);
}

.bpb-player-name {
	flex: 1;
	font-weight: 500;
}

.bpb-player-pos {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bpb-text-subtle);
	width: 20px;
	text-align: right;
}

/* Standings Table */
.bpb-table-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bpb-standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	text-align: left;
}

.bpb-standings-table th,
.bpb-standings-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--bpb-border-subtle);
}

.bpb-standings-table th {
	background-color: var(--bpb-surface-alt);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--bpb-text-muted);
	border-bottom: 1px solid var(--bpb-border);
}

.bpb-col-pos {
	width: 30px;
	text-align: center;
}

.bpb-col-num,
.bpb-col-pts {
	text-align: center;
	width: 36px;
}

.bpb-col-team {
	min-width: 140px;
}

.bpb-team-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bpb-team-table-link {
	font-weight: 600;
	color: var(--bpb-text);
}

.bpb-form-guide {
	display: flex;
	gap: 4px;
	justify-content: center;
}

.bpb-form-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #ffffff;
}

.bpb-form-win { background-color: var(--bpb-success); }
.bpb-form-draw { background-color: var(--bpb-warning); }
.bpb-form-loss { background-color: var(--bpb-danger); }

/* Qualification & Relegation Strip */
.bpb-zone-ucl td.bpb-col-pos { border-left: 3px solid #2563eb; }
.bpb-zone-uel td.bpb-col-pos { border-left: 3px solid #d97706; }
.bpb-zone-rel td.bpb-col-pos { border-left: 3px solid #dc2626; }

@media (max-width: 640px) {
	.bpb-hide-mobile {
		display: none;
	}
}

/* Standings Card & Legend */
.bpb-standings-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bpb-border);
}

.bpb-legend-guide {
	display: flex;
	gap: 12px;
	font-size: 0.75rem;
	color: var(--bpb-text-muted);
}

.bpb-legend-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
}

.bpb-dot-ucl { background-color: #2563eb; }
.bpb-dot-uel { background-color: #d97706; }
.bpb-dot-rel { background-color: #dc2626; }

/* Standings League Selector Tabs */
.bpb-league-selector-bar {
	margin-bottom: 20px;
}

.bpb-league-tabs {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	gap: 8px;
	padding-bottom: 4px;
}

.bpb-league-tabs::-webkit-scrollbar {
	display: none;
}

.bpb-league-tab {
	padding: 8px 16px;
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bpb-text);
	white-space: nowrap;
	text-decoration: none;
}

.bpb-league-tab.is-active {
	background-color: var(--bpb-primary);
	border-color: var(--bpb-primary);
	color: #ffffff;
}

/* Featured Match Analysis Card */
.bpb-analysis-card {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	padding: 20px;
	box-shadow: var(--bpb-shadow-sm);
}

.bpb-analysis-badge {
	display: inline-block;
	background-color: var(--bpb-primary-soft);
	color: var(--bpb-primary);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.bpb-analysis-title {
	font-size: 1.1875rem;
	margin-bottom: 8px;
}

.bpb-analysis-excerpt {
	color: var(--bpb-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 16px;
}

.bpb-analysis-metrics-preview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	background-color: var(--bpb-surface-alt);
	border-radius: var(--bpb-radius-sm);
	padding: 12px 16px;
}

.bpb-metric-item {
	display: flex;
	flex-direction: column;
}

.bpb-metric-label {
	font-size: 0.75rem;
	color: var(--bpb-text-muted);
	margin-bottom: 2px;
}

.bpb-metric-val {
	font-size: 0.9375rem;
	color: var(--bpb-text);
}

/* News Articles Grid */
.bpb-articles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 600px) {
	.bpb-grid-two-col { grid-template-columns: repeat(2, 1fr); }
	.bpb-grid-three-col { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.bpb-article-card {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--bpb-shadow-sm);
}

.bpb-article-thumb-wrap {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--bpb-surface-alt);
}

.bpb-article-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.bpb-article-card:hover .bpb-article-thumb {
	transform: scale(1.03);
}

.bpb-article-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bpb-article-category {
	margin-bottom: 6px;
}

.bpb-category-badge {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bpb-primary);
	text-transform: uppercase;
}

.bpb-article-title {
	font-size: 1.0625rem;
	margin: 0 0 8px 0;
	line-height: 1.35;
}

.bpb-article-title a {
	color: var(--bpb-text);
}

.bpb-article-title a:hover {
	color: var(--bpb-primary);
}

.bpb-article-excerpt {
	color: var(--bpb-text-muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin-bottom: 14px;
	flex: 1;
}

.bpb-article-meta {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

/* ==========================================================================
   Interactive Football Tools & Calculator UI Components
   ========================================================================== */

.bpb-tool-hero {
	text-align: center;
	padding: 32px 0 24px;
	max-width: 800px;
	margin: 0 auto;
}

.bpb-tool-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 9999px;
	background-color: var(--bpb-primary-soft);
	color: var(--bpb-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 12px;
}

.bpb-tool-card {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-lg);
	box-shadow: var(--bpb-shadow-sm);
	padding: 24px;
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.bpb-tool-card {
		padding: 32px;
	}
}

.bpb-tool-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--bpb-border);
	padding-bottom: 16px;
	margin-bottom: 24px;
}

.bpb-tool-card-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bpb-text);
	margin: 0;
}

/* H2H Selector & Clash Display */
.bpb-h2h-selector-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: center;
	margin-bottom: 28px;
}

@media (min-width: 768px) {
	.bpb-h2h-selector-wrap {
		grid-template-columns: 1fr auto 1fr;
	}
}

.bpb-team-select-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bpb-team-select-box label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bpb-text);
}

.bpb-select-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 0.9375rem;
	color: var(--bpb-text);
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	outline: none;
	transition: border-color 0.15s ease;
}

.bpb-select-input:focus {
	border-color: var(--bpb-primary);
}

.bpb-swap-btn {
	background-color: var(--bpb-surface-alt);
	border: 1px solid var(--bpb-border);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--bpb-text);
	font-weight: 700;
	transition: background-color 0.15s ease, transform 0.2s ease;
	margin: 0 auto;
}

.bpb-swap-btn:hover {
	background-color: var(--bpb-primary);
	color: #ffffff;
	transform: rotate(180deg);
}

/* Head-to-Head Clash Banner */
.bpb-h2h-clash-banner {
	background: linear-gradient(135deg, #0b1329 0%, #0e8754 100%);
	color: #ffffff;
	border-radius: var(--bpb-radius-md);
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	text-align: center;
	margin-bottom: 28px;
}

.bpb-clash-side {
	flex: 1;
}

.bpb-clash-crest {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 auto 8px;
}

.bpb-clash-name {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 4px;
}

.bpb-clash-divider {
	font-size: 1.125rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
	padding: 0 16px;
}

/* Prediction Probability Gauge */
.bpb-pred-gauge-card {
	background-color: var(--bpb-surface-alt);
	border-radius: var(--bpb-radius-md);
	padding: 20px;
	margin-bottom: 28px;
}

.bpb-gauge-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-size: 0.9375rem;
	font-weight: 700;
}

.bpb-multi-bar {
	display: flex;
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--bpb-border);
	margin-bottom: 10px;
}

.bpb-bar-segment {
	transition: width 0.4s ease;
}

.bpb-bar-team1 { background-color: var(--bpb-primary); }
.bpb-bar-draw { background-color: #94a3b8; }
.bpb-bar-team2 { background-color: #2563eb; }

.bpb-gauge-legend {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* H2H Stat Comparison Bars */
.bpb-h2h-stats-matrix {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}

.bpb-stat-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bpb-stat-values {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	font-weight: 600;
}

.bpb-stat-dual-bar {
	display: flex;
	height: 8px;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--bpb-border);
}

/* Form Pills */
.bpb-form-pills-row {
	display: flex;
	gap: 6px;
}

.bpb-form-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 800;
	color: #ffffff;
}

.bpb-form-w { background-color: #16a34a; }
.bpb-form-d { background-color: #d97706; }
.bpb-form-l { background-color: #dc2626; }

/* Historical Matches Table in H2H */
.bpb-h2h-match-row {
	display: grid;
	grid-template-columns: 120px 1fr 140px;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--bpb-border-subtle);
	font-size: 0.875rem;
}

.bpb-h2h-match-date {
	color: var(--bpb-text-muted);
	font-weight: 500;
}

.bpb-h2h-match-comp {
	font-weight: 600;
	color: var(--bpb-text);
}

.bpb-h2h-match-clash {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.bpb-h2h-clash-score {
	font-weight: 800;
	padding: 2px 8px;
	background-color: var(--bpb-surface-alt);
	border-radius: var(--bpb-radius-sm);
}

.bpb-h2h-clash-t1.is-winner,
.bpb-h2h-clash-t2.is-winner {
	font-weight: 800;
	color: var(--bpb-primary);
}

/* Kickoff Timezone Converter Styles */
.bpb-tz-presets-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.bpb-tz-preset-btn {
	padding: 6px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	background-color: var(--bpb-surface-alt);
	color: var(--bpb-text);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bpb-tz-preset-btn:hover,
.bpb-tz-preset-btn.is-active {
	background-color: var(--bpb-primary);
	color: #ffffff;
	border-color: var(--bpb-primary);
}

.bpb-converted-box {
	background-color: var(--bpb-surface-alt);
	border: 2px solid var(--bpb-primary);
	border-radius: var(--bpb-radius-md);
	padding: 24px;
	text-align: center;
	margin-bottom: 24px;
}

.bpb-converted-label {
	font-size: 0.8125rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--bpb-primary);
	margin-bottom: 6px;
}

.bpb-converted-time-display {
	font-size: 2.25rem;
	font-weight: 900;
	color: var(--bpb-text);
	line-height: 1.1;
	margin-bottom: 4px;
}

.bpb-converted-date-display {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--bpb-text-muted);
	margin-bottom: 16px;
}

.bpb-countdown-grid {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.bpb-countdown-metric {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	padding: 8px 12px;
	min-width: 60px;
	text-align: center;
}

.bpb-metric-val {
	display: block;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--bpb-text);
	line-height: 1.1;
}

.bpb-metric-lbl {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bpb-text-muted);
}

/* Odds Calculator Styles */
.bpb-odds-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.bpb-odds-card-item {
	background-color: var(--bpb-surface-alt);
	border-radius: var(--bpb-radius-md);
	padding: 16px;
	text-align: center;
}

.bpb-odds-item-title {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.bpb-odds-input {
	width: 100%;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 8px;
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-sm);
	margin-bottom: 8px;
}

.bpb-implied-pct-label {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
	margin-bottom: 2px;
}

.bpb-implied-pct-val {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--bpb-primary);
}

.bpb-margin-summary-box {
	background-color: var(--bpb-surface-alt);
	border-radius: var(--bpb-radius-md);
	padding: 18px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 16px;
	margin-bottom: 28px;
	border-left: 4px solid var(--bpb-primary);
}

.bpb-margin-metric {
	text-align: center;
}

.bpb-margin-metric span {
	display: block;
}

.bpb-margin-metric .bpb-margin-title {
	font-size: 0.8125rem;
	color: var(--bpb-text-muted);
	font-weight: 600;
}

.bpb-margin-metric .bpb-margin-value {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--bpb-text);
}

.bpb-ev-badge {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--bpb-radius-md);
	font-weight: 700;
	font-size: 0.9375rem;
}

.bpb-ev-badge.is-positive {
	background-color: var(--bpb-primary-soft);
	color: var(--bpb-primary);
	border: 1px solid rgba(14, 135, 84, 0.3);
}

.bpb-ev-badge.is-negative {
	background-color: var(--bpb-live-soft);
	color: var(--bpb-live);
	border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Match Countdown Board */
.bpb-cd-board {
	background: linear-gradient(135deg, #0b1329 0%, #1e293b 100%);
	color: #ffffff;
	border-radius: var(--bpb-radius-lg);
	padding: 36px 20px;
	text-align: center;
	margin-bottom: 32px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}

.bpb-cd-comp-badge {
	display: inline-block;
	padding: 4px 14px;
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 700;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.bpb-cd-title {
	font-size: 1.75rem;
	font-weight: 900;
	margin: 0 0 6px;
	letter-spacing: -0.02em;
}

.bpb-cd-venue {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 28px;
}

.bpb-cd-timer-grid {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
}

@media (min-width: 600px) {
	.bpb-cd-timer-grid {
		gap: 20px;
	}
}

.bpb-cd-box {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--bpb-radius-md);
	padding: 14px 10px;
	min-width: 68px;
}

@media (min-width: 600px) {
	.bpb-cd-box {
		padding: 18px 16px;
		min-width: 90px;
	}
}

.bpb-cd-digits {
	font-size: 2rem;
	font-weight: 900;
	line-height: 1;
	display: block;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) {
	.bpb-cd-digits {
		font-size: 2.75rem;
	}
}

.bpb-cd-tag {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 6px;
	display: block;
}

/* Tools Directory Hub Grid */
.bpb-tools-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}

.bpb-tool-directory-card {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.bpb-tool-directory-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bpb-shadow-md);
	border-color: var(--bpb-primary);
}

.bpb-tool-icon-circle {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background-color: var(--bpb-primary-soft);
	color: var(--bpb-primary);
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.bpb-tool-card-heading {
	font-size: 1.1875rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.bpb-tool-card-heading a {
	color: var(--bpb-text);
}

.bpb-tool-card-heading a:hover {
	color: var(--bpb-primary);
}

.bpb-tool-card-text {
	color: var(--bpb-text-muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin-bottom: 20px;
	flex: 1;
}

.bpb-tool-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--bpb-primary);
}

/* FAQ Accordion Component */
.bpb-faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0 36px;
}

.bpb-faq-item {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	overflow: hidden;
}

.bpb-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bpb-text);
	transition: background-color 0.15s ease;
}

.bpb-faq-question:hover {
	background-color: var(--bpb-surface-alt);
}

.bpb-faq-icon {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bpb-primary);
	transition: transform 0.2s ease;
}

.bpb-faq-question[aria-expanded="true"] .bpb-faq-icon {
	transform: rotate(45deg);
}

.bpb-faq-answer {
	padding: 0 20px 18px;
	color: var(--bpb-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Step by Step Guide Component */
.bpb-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 24px 0 36px;
}

.bpb-step-card {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-md);
	padding: 20px;
	position: relative;
}

.bpb-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--bpb-primary);
	color: #ffffff;
	font-weight: 800;
	font-size: 0.875rem;
	margin-bottom: 12px;
}

.bpb-step-title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--bpb-text);
}

.bpb-step-desc {
	font-size: 0.875rem;
	color: var(--bpb-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* Rich Editorial Sections on Tool Pages */
.bpb-rich-editorial-section {
	background-color: var(--bpb-surface);
	border: 1px solid var(--bpb-border);
	border-radius: var(--bpb-radius-lg);
	padding: 28px;
	margin-bottom: 32px;
}

.bpb-rich-editorial-section h2 {
	font-size: 1.375rem;
	font-weight: 800;
	margin-top: 0;
	margin-bottom: 14px;
}

.bpb-rich-editorial-section h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 10px;
}

.bpb-rich-editorial-section p {
	color: var(--bpb-text-muted);
	line-height: 1.65;
	margin-bottom: 14px;
}