/**
 * Frontend Stylesheet for Goal7 Sports Sync.
 * Structured to look elegant, modern, and fully responsive.
 * Avoids global class collisions using the "g7-" prefix.
 */

.g7-container {
	margin: 20px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #333;
}

/* Meta info layout (last updated status) */
.g7-meta-info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f8f9fa;
	padding: 6px 12px;
	border-radius: 20px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
	font-size: 12px;
	font-weight: 500;
	color: #6c757d;
}

.g7-live-pulse {
	width: 8px;
	height: 8px;
	background-color: #198754;
	border-radius: 50%;
	display: inline-block;
	animation: g7-pulse 1.8s infinite ease-in-out;
}

@keyframes g7-pulse {
	0% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 6px rgba(25, 135, 84, 0);
	}
	100% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
	}
}

/* League Section Card */
.g7-league-section {
	background: #fff;
	border: 1px solid #eef1f6;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	margin-bottom: 25px;
	overflow: hidden;
}

/* League Header styling */
.g7-league-header {
	background: #f8fafc;
	border-bottom: 1px solid #edf2f7;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.g7-league-flag {
	width: 24px;
	height: auto;
	max-height: 24px;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	object-fit: contain;
}

.g7-league-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.2;
}

/* Table styling */
.g7-responsive-table {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.g7-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 14px;
	border: none;
	margin: 0;
}

.g7-table th {
	background: #fff;
	color: #64748b;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 20px;
	border-bottom: 2px solid #edf2f7;
}

.g7-table td {
	padding: 14px 20px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}

.g7-match-row {
	transition: background-color 0.15s ease-in-out;
}

.g7-match-row:hover {
	background-color: #f8fafc;
}

/* Match Row Columns */
.col-time {
	width: 80px;
}

.col-match {
	min-width: 260px;
}

.col-odds {
	min-width: 110px;
	font-size: 13px;
	color: #475569;
	line-height: 1.4;
}

.col-score {
	width: 85px;
	text-align: center !important;
}

.col-tips {
	min-width: 160px;
}

.col-channel {
	min-width: 130px;
}

/* Time Badge */
.g7-time-badge {
	display: inline-block;
	background: #f1f5f9;
	color: #334155;
	font-weight: 600;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	text-align: center;
	border: 1px solid #e2e8f0;
}

/* Match Teams styling */
.g7-match-teams {
	display: flex;
	align-items: center;
	gap: 8px;
}

.g7-team {
	font-weight: 600;
	color: #0f172a;
}

.team-home {
	text-align: right;
	flex: 1;
}

.team-away {
	text-align: left;
	flex: 1;
}

.g7-vs {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 700;
	background: #f8fafc;
	border: 1px solid #edf2f7;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Score display */
.g7-score-half {
	font-size: 13px;
	font-weight: 500;
	color: #64748b;
}

.g7-score-full {
	display: inline-block;
	background: #f1f5f9;
	color: #334155;
	font-weight: 700;
	font-size: 13px;
	padding: 5px 10px;
	border-radius: 4px;
	min-width: 45px;
	text-align: center;
}

/* Live Score glowing status */
.g7-score-live {
	background: #fee2e2;
	color: #dc2626;
	border: 1px solid #fecaca;
	animation: g7-pulse-red 2s infinite ease-in-out;
}

@keyframes g7-pulse-red {
	0% { border-color: #fecaca; }
	50% { border-color: #ef4444; }
	100% { border-color: #fecaca; }
}

/* Tips and Analysis styling */
.g7-tips-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #d97706 !important;
	background: #fffbeb;
	border: 1px solid #fef3c7;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.15s ease-in-out;
}

.g7-tips-link:hover {
	background: #fef3c7;
	color: #b45309 !important;
	transform: translateY(-1px);
}

.g7-tips-link .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.g7-tips-text {
	color: #475569;
	font-size: 13px;
}

.g7-tips-empty, .g7-channel-empty {
	color: #cbd5e1;
}

/* Broadcast Channels */
.g7-channel-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #dbeafe;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
}

.g7-channel-badge .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Notices and Placeholders */
.g7-notice {
	padding: 15px 20px;
	border-radius: 8px;
	margin: 20px 0;
	font-weight: 500;
}

.g7-notice-warning {
	background: #fffbeb;
	border-left: 4px solid #d97706;
	color: #92400e;
}

.g7-notice p {
	margin: 0;
}

/* Responsive breakpoint for Mobile screens */
@media (max-width: 768px) {
	.g7-league-header {
		padding: 10px 15px;
	}

	.g7-table th {
		padding: 10px 12px;
		font-size: 11px;
	}

	.g7-table td {
		padding: 10px 12px;
		font-size: 13px;
	}

	.g7-match-teams {
		gap: 6px;
	}

	.g7-vs {
		width: 18px;
		height: 18px;
		font-size: 9px;
	}

	.g7-team {
		font-size: 13px;
	}
}