/*
 * lmcp-frontend.css
 * Live Match Cards Pro — Frontend Styles
 *
 * Design system:
 *   Primary green  : #16a34a
 *   Live red        : #ff5c5c
 *   Header navy     : var(--lmcp-header-color, #1e40af)
 *   Stream red      : var(--lmcp-button-color, #dc2626)
 *   Font            : Inter (Google Fonts)
 *
 * Sections:
 *   1. Google Fonts
 *   2. CSS Custom Properties
 *   3. Utility reset
 *   4. Match List container
 *   5. Card link wrapper
 *   6. Card
 *   7. Card — Tournament header
 *   8. Card — Teams row
 *   9. Card — Team
 *  10. Card — Flag
 *  11. Card — Team name
 *  12. Card — Center column
 *  13. Card — LIVE badge & animation
 *  14. Card — Status labels
 *  15. Card — Time / Date / Countdown
 *  16. Card — END badge
 *  17. No-matches placeholder
 *  18. Single match page
 *  19. Single — Header hero
 *  20. Single — Status badge
 *  21. Single — Stream section
 *  22. Single — Stream button
 *  23. Single — Card wrap
 *  24. Responsive (≤640 px)
 *  25. Responsive (≤480 px)
 *  26. Dark mode
 *  27. RTL
 */

/* ============================================================
   1. Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   2. CSS Custom Properties
   ============================================================ */
:root {
	/* colours */
	--lmcp-bg-color        : #ffffff;
	--lmcp-hover-bg-color  : #f0fdf4;
	--lmcp-border-color    : #d7f0e2;
	--lmcp-text-color      : #111827;
	--lmcp-muted-color     : #6b7280;
	--lmcp-live-color      : #ff5c5c;
	--lmcp-live-label-color: #16a34a;
	--lmcp-finished-color  : #16a34a;
	--lmcp-countdown-color : #16a34a;
	--lmcp-header-color    : #1e40af;
	--lmcp-button-color    : #dc2626;
	--lmcp-button-hover    : #b91c1c;

	/* shape */
	--lmcp-card-radius     : 14px;
	--lmcp-button-radius   : 8px;
	--lmcp-card-width      : 640px;

	/* shadow */
	--lmcp-shadow          : 0 2px 8px rgba(0, 0, 0, 0.06);
	--lmcp-shadow-hover    : 0 6px 20px rgba(0, 0, 0, 0.12);

	/* font */
	--lmcp-font            : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   3. Utility reset (scoped to plugin)
   ============================================================ */
.lmcp-matches *,
.lmcp-single *,
.lmcp-card-link * {
	box-sizing: border-box;
}

.lmcp-matches,
.lmcp-single {
	font-family: var(--lmcp-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   4. Match List container
   ============================================================ */
.lmcp-matches {
	max-width    : var(--lmcp-card-width, 640px);
	margin       : 0 auto;
	display      : flex;
	flex-direction: column;
	gap          : 16px;
	padding      : 0 12px;
}

/* ============================================================
   5. Card link wrapper
   ============================================================ */
.lmcp-card-link {
	display        : block;
	text-decoration: none;
	color          : inherit;
	border-radius  : var(--lmcp-card-radius);
	transition     : transform 0.2s ease;
	outline        : none;
}

.lmcp-card-link:hover .lmcp-card {
	border-color: #86efac;
	box-shadow  : var(--lmcp-shadow-hover);
	background  : var(--lmcp-hover-bg-color);
	transform   : translateY(-2px);
}

.lmcp-card-link:focus-visible {
	outline       : 2px solid var(--lmcp-header-color);
	outline-offset: 3px;
	border-radius : var(--lmcp-card-radius);
}

.lmcp-card-link:focus-visible .lmcp-card {
	border-color: var(--lmcp-header-color);
}

/* ============================================================
   6. Card
   ============================================================ */
.lmcp-card {
	background   : var(--lmcp-bg-color, #ffffff);
	border       : 1.5px solid var(--lmcp-border-color, #d7f0e2);
	border-radius: var(--lmcp-card-radius, 14px);
	padding      : 18px 20px 16px;
	box-shadow   : var(--lmcp-shadow);
	transition   : all 0.2s ease;
	position     : relative;
	overflow     : hidden;
}

/* Live card left accent strip */
.lmcp-card--live::before {
	content         : '';
	position        : absolute;
	inset-inline-start: 0;
	top             : 0;
	bottom          : 0;
	width           : 3px;
	background      : var(--lmcp-live-color, #ff5c5c);
	border-radius   : 2px 0 0 2px;
}

/* ============================================================
   7. Card — Tournament header
   ============================================================ */
.lmcp-card__tournament {
	text-align     : center;
	font-weight    : 700;
	font-size      : 14px;
	color          : #333333;
	margin-bottom  : 16px;
	display        : flex;
	align-items    : center;
	justify-content: center;
	gap            : 6px;
	letter-spacing : 0.2px;
	line-height    : 1.3;
}

/* ============================================================
   8. Card — Teams row
   ============================================================ */
.lmcp-card__teams {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	gap            : 8px;
}

/* ============================================================
   9. Card — Individual team column
   ============================================================ */
.lmcp-card__team {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 8px;
	width          : 90px;
	flex-shrink    : 0;
}

/* ============================================================
   10. Card — Flag
   ============================================================ */
.lmcp-card__flag {
	position: relative;
}

.lmcp-card__flag img {
	width        : 52px;
	height       : 52px;
	border-radius: 50%;
	object-fit   : cover;
	border       : 2px solid #eeeeee;
	box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.10);
	display      : block;
	transition   : transform 0.2s ease;
}

.lmcp-card-link:hover .lmcp-card__flag img {
	transform: scale(1.05);
}

.lmcp-card__flag-placeholder {
	width           : 52px;
	height          : 52px;
	border-radius   : 50%;
	background      : linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
	display         : flex;
	align-items     : center;
	justify-content : center;
	color           : #ffffff;
	font-weight     : 700;
	font-size       : 20px;
	font-family     : var(--lmcp-font);
	box-shadow      : 0 2px 4px rgba(22, 163, 74, 0.25);
	user-select     : none;
	transition      : transform 0.2s ease;
}

.lmcp-card-link:hover .lmcp-card__flag-placeholder {
	transform: scale(1.05);
}

/* ============================================================
   11. Card — Team name
   ============================================================ */
.lmcp-card__team-name {
	font-size  : 13px;
	font-weight: 600;
	text-align : center;
	color      : var(--lmcp-text-color, #111827);
	line-height: 1.3;
	word-break : break-word;
}

/* ============================================================
   12. Card — Center column
   ============================================================ */
.lmcp-card__center {
	flex           : 1;
	text-align     : center;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 6px;
	min-width      : 0;
	padding        : 0 4px;
}

/* ============================================================
   13. Card — LIVE badge & blink animation
   ============================================================ */
@keyframes lmcpBlink {
	0%, 100% { opacity: 1;    }
	50%       { opacity: 0.15; }
}

.lmcp-card__live-badge {
	font-size     : 22px;
	font-weight   : 900;
	color         : var(--lmcp-live-color, #ff5c5c);
	letter-spacing: 3px;
	font-family   : 'Courier New', Courier, monospace;
	animation     : lmcpBlink 1s ease-in-out infinite;
	will-change   : opacity;
	line-height   : 1;
}

/* Disable blink when admin setting is off */
[data-blinking='false'] .lmcp-card__live-badge {
	animation: none;
}

/* ============================================================
   14. Card — Status labels
   ============================================================ */
.lmcp-card__status-label {
	font-size     : 12px;
	font-weight   : 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height   : 1;
}

.lmcp-card__status-label--live {
	color: var(--lmcp-live-label-color, #16a34a);
}

.lmcp-card__status-label--finished {
	color: var(--lmcp-finished-color, #16a34a);
}

/* ============================================================
   15. Card — Time / Date / Countdown
   ============================================================ */
.lmcp-card__time {
	font-size  : 20px;
	font-weight: 800;
	color      : var(--lmcp-text-color, #111827);
	line-height: 1.1;
	letter-spacing: -0.3px;
}

.lmcp-card__date {
	font-size  : 12px;
	color      : var(--lmcp-muted-color, #6b7280);
	font-weight: 500;
	line-height: 1.3;
}

.lmcp-card__countdown {
	font-size     : 12px;
	font-weight   : 700;
	color         : var(--lmcp-countdown-color, #16a34a);
	letter-spacing: 0.2px;
	line-height   : 1.3;
}

/* ============================================================
   16. Card — END badge
   ============================================================ */
.lmcp-card__end-badge {
	font-size     : 22px;
	font-weight   : 800;
	color         : var(--lmcp-muted-color, #6b7280);
	letter-spacing: 3px;
	font-family   : 'Courier New', Courier, monospace;
	line-height   : 1;
}

/* ============================================================
   17. No-matches placeholder
   ============================================================ */
.lmcp-no-matches {
	text-align: center;
	padding   : 40px 24px;
	color     : var(--lmcp-muted-color, #6b7280);
	font-size : 16px;
	font-weight: 500;
}

/* ============================================================
   18. Single match page — outer wrapper
   ============================================================ */
.lmcp-single {
	max-width: 800px;
	margin   : 0 auto;
	padding  : 0 16px 60px;
	font-family: var(--lmcp-font);
}

/* ============================================================
   19. Single — Header hero
   ============================================================ */
.lmcp-single__header {
	background   : linear-gradient(135deg, var(--lmcp-header-color, #1e40af) 0%, #1e3a8a 100%);
	color        : #ffffff;
	padding      : 36px 28px 32px;
	border-radius: 0 0 20px 20px;
	margin-bottom: 36px;
	text-align   : center;
	position     : relative;
	overflow     : hidden;
}

/* Subtle decorative circle */
.lmcp-single__header::before {
	content      : '';
	position     : absolute;
	top          : -60px;
	right        : -60px;
	width        : 180px;
	height       : 180px;
	border-radius: 50%;
	background   : rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.lmcp-single__header::after {
	content      : '';
	position     : absolute;
	bottom       : -40px;
	left         : -40px;
	width        : 140px;
	height       : 140px;
	border-radius: 50%;
	background   : rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

.lmcp-single__header-inner {
	position: relative;
	z-index : 1;
}

.lmcp-single__title {
	font-size    : 20px;
	font-weight  : 700;
	margin       : 0 0 14px;
	line-height  : 1.3;
	opacity      : 0.95;
	color        : #ffffff;
}

.lmcp-single__matchup {
	font-size     : 30px;
	font-weight   : 900;
	letter-spacing: 1px;
	line-height   : 1.1;
	color         : #ffffff;
	display       : flex;
	align-items   : center;
	justify-content: center;
	flex-wrap     : wrap;
	gap           : 0;
}

.lmcp-vs {
	margin     : 0 14px;
	opacity    : 0.65;
	font-size  : 18px;
	font-weight: 700;
}

/* ============================================================
   20. Single — Status badge
   ============================================================ */
.lmcp-single__status-badge {
	display      : inline-block;
	padding      : 5px 18px;
	border-radius: 100px;
	font-size    : 12px;
	font-weight  : 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-top   : 14px;
}

.lmcp-single__status-badge--live {
	background: rgba(255, 92, 92, 0.20);
	color     : #ff5c5c;
	border    : 1px solid #ff5c5c;
	animation : lmcpBlink 1.4s ease-in-out infinite;
}

.lmcp-single__status-badge--upcoming {
	background: rgba(99, 102, 241, 0.15);
	color     : #6366f1;
	border    : 1px solid rgba(99, 102, 241, 0.35);
}

.lmcp-single__status-badge--finished {
	background: rgba(22, 163, 74, 0.15);
	color     : #16a34a;
	border    : 1px solid rgba(22, 163, 74, 0.35);
}

/* ============================================================
   21. Single — Stream section
   ============================================================ */
.lmcp-single__streams {
	margin-bottom: 36px;
}

.lmcp-single__streams-inner {
	/* intentionally no max-width — fills .lmcp-single */
}

.lmcp-single__streams-title {
	text-align   : center;
	font-size    : 18px;
	font-weight  : 700;
	margin       : 0 0 20px;
	color        : var(--lmcp-text-color, #111827);
	letter-spacing: 0.2px;
}

.lmcp-single__streams-grid {
	display              : grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap                  : 12px;
}

.lmcp-no-streams {
	text-align: center;
	color     : var(--lmcp-muted-color, #6b7280);
	font-size : 15px;
	padding   : 24px 0;
	margin    : 0;
}

/* ============================================================
   22. Single — Stream button
   ============================================================ */
.lmcp-stream-btn {
	display        : flex;
	align-items    : center;
	gap            : 12px;
	background     : var(--lmcp-button-color, #dc2626);
	color          : #ffffff;
	text-decoration: none;
	padding        : 16px 20px;
	border-radius  : var(--lmcp-button-radius, 8px);
	font-family    : var(--lmcp-font);
	font-weight    : 700;
	font-size      : 15px;
	line-height    : 1.3;
	transition     : transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	box-shadow     : 0 4px 12px rgba(220, 38, 38, 0.30);
	outline        : none;
	cursor         : pointer;
	word-break     : break-word;
}

.lmcp-stream-btn:hover {
	background : var(--lmcp-button-hover, #b91c1c);
	transform  : translateY(-2px);
	box-shadow : 0 6px 20px rgba(220, 38, 38, 0.40);
	color      : #ffffff;
}

.lmcp-stream-btn:active {
	transform : translateY(0);
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.lmcp-stream-btn:focus-visible {
	outline       : 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow    : 0 0 0 4px rgba(220, 38, 38, 0.40);
}

.lmcp-stream-btn__icon {
	font-size  : 18px;
	flex-shrink: 0;
	line-height: 1;
}

.lmcp-stream-btn__label {
	flex: 1;
}

/* ============================================================
   23. Single — Card wrap (preview)
   ============================================================ */
.lmcp-single__card-wrap {
	max-width: 500px;
	margin   : 0 auto;
}

.lmcp-single__card-wrap .lmcp-matches {
	/* flatten the list container when used inside single */
	padding: 0;
}

/* ============================================================
   24. Responsive — ≤ 640 px (tablet portrait / large mobile)
   ============================================================ */
@media (max-width: 640px) {

	.lmcp-card__team {
		width: 72px;
	}

	.lmcp-card__flag img,
	.lmcp-card__flag-placeholder {
		width : 44px;
		height: 44px;
	}

	.lmcp-card__flag-placeholder {
		font-size: 17px;
	}

	.lmcp-card__live-badge,
	.lmcp-card__end-badge {
		font-size: 18px;
	}

	.lmcp-card__time {
		font-size: 17px;
	}

	.lmcp-card__team-name {
		font-size: 12px;
	}

	.lmcp-single__streams-grid {
		grid-template-columns: 1fr;
	}

	.lmcp-stream-btn {
		width          : 100%;
		justify-content: center;
	}

	.lmcp-single__matchup {
		font-size: 22px;
	}

	.lmcp-single__title {
		font-size: 17px;
	}
}

/* ============================================================
   25. Responsive — ≤ 480 px (small mobile)
   ============================================================ */
@media (max-width: 480px) {

	.lmcp-card {
		padding: 14px 14px 12px;
	}

	.lmcp-card__tournament {
		font-size    : 12px;
		margin-bottom: 12px;
	}

	.lmcp-card__team {
		width: 62px;
	}

	.lmcp-card__flag img,
	.lmcp-card__flag-placeholder {
		width : 38px;
		height: 38px;
	}

	.lmcp-card__flag-placeholder {
		font-size: 14px;
	}

	.lmcp-single__header {
		padding      : 24px 16px 20px;
		border-radius: 0 0 14px 14px;
	}

	.lmcp-single__matchup {
		font-size: 19px;
	}

	.lmcp-vs {
		margin   : 0 8px;
		font-size: 15px;
	}

	.lmcp-single__streams-title {
		font-size: 16px;
	}

	.lmcp-stream-btn {
		font-size: 14px;
		padding  : 14px 16px;
	}
}

/* ============================================================
   26. Dark Mode
   ============================================================ */
@media (prefers-color-scheme: dark) {

	/* Card */
	.lmcp-card {
		background  : #1f2937;
		border-color: #374151;
	}

	.lmcp-card-link:hover .lmcp-card {
		background  : #263447;
		border-color: #4b5563;
	}

	/* Card internals */
	.lmcp-card__tournament {
		color: #e5e7eb;
	}

	.lmcp-card__team-name {
		color: #d1d5db;
	}

	.lmcp-card__date {
		color: #9ca3af;
	}

	.lmcp-card__time {
		color: #f9fafb;
	}

	.lmcp-card__end-badge {
		color: #9ca3af;
	}

	.lmcp-no-matches {
		color: #9ca3af;
	}

	/* Flag placeholder (use a darker green in dark mode) */
	.lmcp-card__flag-placeholder {
		background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
	}

	.lmcp-card__flag img {
		border-color: #4b5563;
	}

	/* Single page */
	.lmcp-single__header {
		background: linear-gradient(135deg, #1e3a8a 0%, #172554 100%);
	}

	.lmcp-single__streams-title {
		color: #f3f4f6;
	}

	.lmcp-no-streams {
		color: #9ca3af;
	}

	/* Stream button — slightly lighter in dark mode for contrast */
	.lmcp-stream-btn {
		box-shadow: 0 4px 12px rgba(220, 38, 38, 0.20);
	}
}

/* ============================================================
   27. RTL (Right-to-Left) support
   ============================================================ */
[dir='rtl'] .lmcp-card__teams {
	flex-direction: row-reverse;
}

[dir='rtl'] .lmcp-card--live::before {
	inset-inline-start: auto;
	inset-inline-end  : 0;
	border-radius     : 0 2px 2px 0;
}

[dir='rtl'] .lmcp-card__tournament {
	flex-direction: row-reverse;
}

[dir='rtl'] .lmcp-stream-btn {
	flex-direction: row-reverse;
}

[dir='rtl'] .lmcp-single__matchup {
	flex-direction: row-reverse;
}

/* Focus-visible RTL: outline-offset works automatically */