/**
 * Front-end styles for the [satta_live_results] section.
 *
 * Lightweight, responsive and mobile-first. EVERY visual property reads from a
 * CSS custom property (--slr-*) with a sensible fallback. The plugin injects
 * those variables inline from the Visual Appearance panel, so the whole design
 * is themeable without editing this file. The fallbacks keep the default look
 * intact if no appearance is saved.
 *
 * @package SattaLiveResults
 */

.slr-wrap {
	/* Fallback defaults (overridden by the injected inline variables). */
	--slr-max-width: 760px;
	--slr-radius: 12px;
	--slr-section-gap: 24px;
	--slr-margin-top: 0px;
	--slr-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--slr-font-size: 15px;
	--slr-font-weight: 400;
	--slr-line-height: 1.5;
	--slr-text-color: #1a1a1a;
	--slr-letter-spacing: 0px;

	/* Semantic palette (used for links + as sensible fallbacks). */
	--slr-c-primary: #1d3557;
	--slr-c-secondary: #457b9d;
	--slr-c-accent: #e63946;
	--slr-c-bg: #ffffff;
	--slr-c-surface: #f8f9fb;
	--slr-c-text: #1a1a1a;
	--slr-c-muted: #6b7280;
	--slr-c-border: #e5e7eb;
	--slr-c-link: #2563eb;
	--slr-c-hover: #1d4ed8;
	--slr-c-success: #16a34a;
	--slr-c-warning: #f59e0b;
	--slr-c-danger: #dc2626;

	/* Interaction + motion. */
	--slr-row-hover-bg: #eef4ff;
	--slr-btn-hover-bg: #e63946;
	--slr-latest-lift: 3px;
	--slr-transition: 200ms;
	--slr-anim-duration: 900ms;
	--slr-anim-easing: ease;

	/* Mobile. */
	--slr-m-font-size: 14px;
	--slr-m-cell-pad: 10px;
	--slr-m-radius: 10px;
	--slr-m-row-h: 44px;

	--slr-title-color: #1d3557;
	--slr-title-size: 26px;
	--slr-title-weight: 800;
	--slr-title-transform: none;
	--slr-date-color: #e63946;
	--slr-date-size: 20px;

	--slr-th-bg: #1d3557;
	--slr-th-color: #ffffff;
	--slr-th-size: 15px;
	--slr-row-bg: #ffffff;
	--slr-row-alt-bg: #f8f9fb;
	--slr-td-color: #1a1a1a;
	--slr-game-color: #1d3557;
	--slr-time-color: #555555;
	--slr-result-color: #e63946;
	--slr-result-size: 18px;
	--slr-result-weight: 800;
	--slr-cell-pad-y: 12px;
	--slr-cell-pad-x: 14px;

	--slr-latest-bg1: #e63946;
	--slr-latest-bg2: #b71c2b;
	--slr-latest-color: #ffffff;
	--slr-latest-radius: 12px;
	--slr-latest-heading-size: 18px;
	--slr-latest-result-size: 40px;

	--slr-badge-bg: #e63946;
	--slr-badge-color: #ffffff;
	--slr-badge-radius: 4px;
	--slr-badge-size: 10px;

	--slr-btn-bg: #1d3557;
	--slr-btn-color: #ffffff;
	--slr-btn-radius: 6px;
	--slr-btn-pad-y: 10px;
	--slr-btn-pad-x: 18px;

	--slr-border-color: #eef0f3;
	--slr-border-width: 1px;
	--slr-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );

	max-width: var( --slr-max-width );
	margin: var( --slr-margin-top ) auto var( --slr-section-gap );
	font-family: var( --slr-font-family );
	font-size: var( --slr-font-size );
	font-weight: var( --slr-font-weight );
	color: var( --slr-text-color );
	line-height: var( --slr-line-height );
	box-sizing: border-box;
}
/* Links inside the section use the palette. */
.slr-wrap a {
	color: var( --slr-c-link );
	transition: color var( --slr-transition ) ease;
}
.slr-wrap a:hover {
	color: var( --slr-c-hover );
}
.slr-wrap *,
.slr-wrap *::before,
.slr-wrap *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Latest Result Bar
 * ------------------------------------------------------------------------- */
.slr-latest-bar {
	background: linear-gradient( 135deg, var( --slr-latest-bg1 ), var( --slr-latest-bg2 ) );
	color: var( --slr-latest-color );
	border-radius: var( --slr-latest-radius );
	padding: 16px 18px;
	text-align: center;
	margin-bottom: 16px;
	box-shadow: var( --slr-shadow );
}
.slr-latest-heading {
	font-size: var( --slr-latest-heading-size );
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.slr-latest-date {
	font-size: 14px;
	opacity: 0.92;
	margin-top: 2px;
}
.slr-latest-body {
	margin-top: 12px;
	background: rgba( 255, 255, 255, 0.14 );
	border-radius: 10px;
	padding: 12px;
}
.slr-latest-meta {
	display: flex;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	opacity: 0.95;
}
.slr-latest-label {
	font-weight: 600;
}
.slr-latest-game {
	font-size: 20px;
	font-weight: 800;
	margin-top: 6px;
	text-transform: uppercase;
}
.slr-latest-result {
	font-size: var( --slr-latest-result-size );
	font-weight: 900;
	line-height: 1.1;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Heading + Date
 * ------------------------------------------------------------------------- */
.slr-head {
	text-align: center;
	margin-bottom: 12px;
}
.slr-title {
	font-size: var( --slr-title-size );
	font-weight: var( --slr-title-weight );
	text-transform: var( --slr-title-transform );
	letter-spacing: var( --slr-letter-spacing );
	margin: 0;
	color: var( --slr-title-color );
}
.slr-date {
	font-size: var( --slr-date-size );
	font-weight: 700;
	color: var( --slr-date-color );
	margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Results Table
 * ------------------------------------------------------------------------- */
.slr-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.slr-table {
	width: 100%;
	border-collapse: collapse;
	background: var( --slr-row-bg );
	border-radius: var( --slr-radius );
	overflow: hidden;
	box-shadow: var( --slr-shadow );
}
.slr-table thead th {
	background: var( --slr-th-bg );
	color: var( --slr-th-color );
	font-size: var( --slr-th-size );
	font-weight: 700;
	padding: var( --slr-cell-pad-y ) var( --slr-cell-pad-x );
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.slr-table tbody td {
	padding: var( --slr-cell-pad-y ) var( --slr-cell-pad-x );
	text-align: center;
	background: var( --slr-row-bg );
	color: var( --slr-td-color );
	border-bottom: var( --slr-border-width ) solid var( --slr-border-color );
	font-size: var( --slr-font-size );
}
.slr-table tbody tr:last-child td {
	border-bottom: 0;
}
.slr-table tbody tr:nth-child( even ) td {
	background: var( --slr-row-alt-bg );
}
.slr-game {
	font-weight: 700;
	text-transform: uppercase;
	color: var( --slr-game-color );
}
.slr-time {
	color: var( --slr-time-color );
	white-space: nowrap;
}
.slr-result-val {
	font-weight: var( --slr-result-weight );
	font-size: var( --slr-result-size );
	color: var( --slr-result-color );
	word-break: break-word;
}
.slr-row-latest td {
	background: var( --slr-row-alt-bg );
	animation: slr-flash 1.2s ease-in-out;
}
@keyframes slr-flash {
	0%   { filter: brightness( 1.15 ); }
	100% { filter: brightness( 1 ); }
}
.slr-empty {
	color: var( --slr-c-muted );
	font-style: italic;
}

/* NEW badge */
.slr-badge-new {
	display: inline-block;
	background: var( --slr-badge-bg );
	color: var( --slr-badge-color );
	font-size: var( --slr-badge-size );
	font-weight: 800;
	letter-spacing: 0.5px;
	padding: 2px 6px;
	border-radius: var( --slr-badge-radius );
	vertical-align: middle;
	margin-left: 4px;
	text-transform: uppercase;
}
.slr-badge-lg {
	font-size: calc( var( --slr-badge-size ) + 3px );
	padding: 3px 9px;
	border-radius: calc( var( --slr-badge-radius ) + 2px );
	background: rgba( 255, 255, 255, 0.25 );
	color: var( --slr-latest-color );
}

/* Generic button (used for admin preview + any button placed in the section) */
.slr-btn {
	display: inline-block;
	background: var( --slr-btn-bg );
	color: var( --slr-btn-color );
	border-radius: var( --slr-btn-radius );
	padding: var( --slr-btn-pad-y ) var( --slr-btn-pad-x );
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background var( --slr-transition ) ease, transform var( --slr-transition ) ease;
}

/* ---------------------------------------------------------------------------
 * Hover effects + transitions
 * ------------------------------------------------------------------------- */
.slr-table tbody td {
	transition: background var( --slr-transition ) ease;
}
.slr-table tbody tr:hover td {
	background: var( --slr-row-hover-bg );
}
.slr-btn:hover {
	background: var( --slr-btn-hover-bg );
	transform: translateY( -1px );
}
.slr-latest-bar {
	transition: transform var( --slr-transition ) ease, box-shadow var( --slr-transition ) ease;
}
.slr-latest-bar:hover {
	transform: translateY( calc( -1 * var( --slr-latest-lift ) ) );
}

/* ---------------------------------------------------------------------------
 * Animation keyframes (applied to NEW results by the dynamic stylesheet)
 * ------------------------------------------------------------------------- */
@keyframes slr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slr-slide { from { opacity: 0; transform: translateX( -18px ); } to { opacity: 1; transform: translateX( 0 ); } }
@keyframes slr-pulse { 0%, 100% { transform: scale( 1 ); } 50% { transform: scale( 1.09 ); } }
@keyframes slr-glow { 0%, 100% { box-shadow: 0 0 0 rgba( 0, 0, 0, 0 ); } 50% { box-shadow: 0 0 20px 2px var( --slr-badge-bg ); } }

/* ---------------------------------------------------------------------------
 * Responsive: tablet
 * ------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	/* Apply the admin's mobile-specific settings. */
	.slr-wrap {
		--slr-font-size: var( --slr-m-font-size );
		--slr-cell-pad-x: var( --slr-m-cell-pad );
		--slr-cell-pad-y: var( --slr-m-cell-pad );
		--slr-radius: var( --slr-m-radius );
	}
	.slr-title { font-size: calc( var( --slr-title-size ) - 4px ); }
	.slr-date { font-size: calc( var( --slr-date-size ) - 2px ); }
	.slr-latest-result { font-size: calc( var( --slr-latest-result-size ) - 6px ); }
	.slr-latest-game { font-size: 18px; }
	.slr-table tbody td { height: var( --slr-m-row-h ); }
}

/* ---------------------------------------------------------------------------
 * Responsive: mobile "card" layout for very small screens
 * ------------------------------------------------------------------------- */
@media ( max-width: 430px ) {
	.slr-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
	}
	.slr-table,
	.slr-table tbody,
	.slr-table tr,
	.slr-table td {
		display: block;
		width: 100%;
	}
	.slr-table tr {
		margin-bottom: 10px;
		border: 1px solid var( --slr-border-color );
		border-radius: 10px;
		overflow: hidden;
	}
	.slr-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: right;
		border-bottom: 1px solid var( --slr-border-color );
	}
	.slr-table tbody td::before {
		content: attr( data-label );
		font-weight: 700;
		color: var( --slr-th-bg );
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: 0.3px;
	}
	.slr-table tbody tr:nth-child( even ) td {
		background: var( --slr-row-bg );
	}
}