/**
 * 2026 World Cup Predictor — dark stadium theme.
 */
.wcp {
	--wcp-green: #004d00;
	--wcp-green-bright: #0a6b0a;
	--wcp-gold: #ffd700;
	--wcp-bg: #0c0f0c;
	--wcp-surface: #151a15;
	--wcp-border: #2a332a;
	--wcp-text: #e8f0e8;
	--wcp-muted: #9aaa9a;
	--wcp-radius: 10px;
	--wcp-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--wcp-font);
	color: var(--wcp-text);
	background: var(--wcp-bg);
	border: 1px solid var(--wcp-border);
	border-radius: var(--wcp-radius);
	padding: 1.25rem;
	margin: 1.5rem 0;
}

.wcp *,
.wcp *::before,
.wcp *::after {
	box-sizing: border-box;
}

.wcp-inner {
	max-width: 640px;
	margin: 0 auto;
}

.wcp-header {
	margin-bottom: 1.25rem;
}

.wcp-title {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wcp-text);
}

.wcp-sub {
	margin: 0;
	color: var(--wcp-muted);
	font-size: 0.95rem;
}

.wcp-notice {
	padding: 0.85rem 1rem;
	border-radius: 8px;
	background: #1e241e;
	border: 1px solid var(--wcp-border);
}

.wcp-notice--warn {
	border-color: rgba(255, 215, 0, 0.35);
}

.wcp-notice--success {
	border-color: rgba(34, 197, 94, 0.45);
}

.wcp-link {
	color: var(--wcp-gold);
	font-weight: 600;
}

.wcp-progress {
	margin-bottom: 1.25rem;
}

.wcp-progress-track {
	height: 6px;
	background: #1a221a;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--wcp-border);
}

.wcp-progress-fill {
	display: block;
	height: 100%;
	width: 33%;
	background: linear-gradient(90deg, var(--wcp-green), var(--wcp-green-bright));
	transition: width 0.25s ease;
}

.wcp-steps-label {
	display: flex;
	justify-content: space-between;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	color: var(--wcp-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wcp-panel-title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--wcp-gold);
}

.wcp-field {
	margin-bottom: 1rem;
}

.wcp-field label,
.wcp-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.wcp-hint {
	margin: 0 0 1rem;
	color: var(--wcp-muted);
	font-size: 0.9rem;
}

.wcp-select-wrap {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.wcp-flag-preview {
	width: 36px;
	height: 27px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--wcp-border);
	background: #0a0d0a;
}

.wcp select,
.wcp input[type='text'],
.wcp input[type='number'] {
	width: 100%;
	max-width: 100%;
	border-radius: 8px;
	border: 1px solid var(--wcp-border);
	background: var(--wcp-surface);
	color: var(--wcp-text);
	font-size: 1rem;
}

.wcp input[type='text'],
.wcp input[type='number'] {
	padding: 0.65rem 0.75rem;
}

/* Extra right padding so the native dropdown chevron does not crowd text */
.wcp select {
	padding: 0.65rem 2.5rem 0.65rem 0.75rem;
}

.wcp select:focus,
.wcp input:focus {
	outline: 2px solid rgba(255, 215, 0, 0.35);
	outline-offset: 1px;
	border-color: var(--wcp-gold);
}

.wcp-grid-four {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.65rem;
}

@media (min-width: 520px) {
	.wcp-grid-four {
		grid-template-columns: 1fr 1fr;
	}
}

.wcp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	align-items: center;
	margin-top: 1.25rem;
}

.wcp-btn {
	appearance: none;
	border-radius: 999px;
	padding: 0.65rem 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wcp-btn--primary {
	background: var(--wcp-green);
	color: #f4fff4;
	border-color: #0f5c0f;
}

.wcp-btn--primary:hover {
	background: var(--wcp-green-bright);
}

.wcp-btn--gold {
	background: linear-gradient(180deg, #ffe066, var(--wcp-gold));
	color: #1a1400;
	border-color: #b39700;
}

.wcp-btn--gold:hover {
	filter: brightness(1.05);
}

.wcp-btn--ghost {
	background: transparent;
	color: var(--wcp-text);
	border-color: var(--wcp-border);
}

.wcp-btn--ghost:hover {
	border-color: var(--wcp-gold);
	color: var(--wcp-gold);
}

.wcp-msg {
	min-height: 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.95rem;
	color: var(--wcp-gold);
}

.wcp-hidden {
	display: none !important;
}

/* Auth forms styled closer to Elementor default forms */
.wcp-auth.wcp-auth--elementor {
	--wcp-auth-field-border: #d5d8dc;
	--wcp-auth-field-bg: #ffffff;
	--wcp-auth-field-text: #1f2937;
	--wcp-auth-btn-bg: var(--e-global-color-primary, #2563eb);
	--wcp-auth-btn-text: #ffffff;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.wcp-auth.wcp-auth--elementor .wcp-inner {
	max-width: 100%;
}

.wcp-auth.wcp-auth--elementor .wcp-field label {
	color: var(--e-global-color-text, #374151);
	font-weight: 500;
}

.wcp-auth.wcp-auth--elementor input[type='text'],
.wcp-auth.wcp-auth--elementor input[type='email'],
.wcp-auth.wcp-auth--elementor input[type='password'] {
	width: 100%;
	min-height: 44px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wcp-auth-field-border);
	border-radius: 3px;
	background: var(--wcp-auth-field-bg);
	color: var(--wcp-auth-field-text);
}

.wcp-auth.wcp-auth--elementor input:focus {
	outline: 0;
	border-color: var(--e-global-color-primary, #2563eb);
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.wcp-auth.wcp-auth--elementor .wcp-btn {
	border-radius: 3px;
	padding: 0.8rem 1.2rem;
}

.wcp-auth.wcp-auth--elementor .wcp-btn--primary {
	background: var(--wcp-auth-btn-bg);
	border-color: var(--wcp-auth-btn-bg);
	color: var(--wcp-auth-btn-text);
}

/* Leaderboard */
.wcp-leaderboard .wcp-title {
	margin-bottom: 1rem;
}

.wcp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--wcp-border);
	border-radius: var(--wcp-radius);
}

.wcp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.wcp-table thead th {
	text-align: left;
	padding: 0.65rem 0.75rem;
	background: var(--wcp-surface);
	border-bottom: 1px solid var(--wcp-border);
	color: var(--wcp-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wcp-table tbody td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--wcp-border);
	vertical-align: middle;
}

.wcp-table tbody tr:last-child td {
	border-bottom: none;
}

.wcp-winner-cell {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.wcp-footnote {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--wcp-muted);
}


/* Full-width shortcode variant */
.wcp.wcp-fullwidth {
	--wcp-el-primary: var(--e-global-color-primary, #2563eb);
	--wcp-el-secondary: var(--e-global-color-secondary, #111827);
	--wcp-el-text: var(--e-global-color-text, #374151);
	--wcp-el-accent: var(--e-global-color-accent, #14b8a6);
	--wcp-el-bg: var(--e-global-color-6, #f6f7fb);
	--wcp-el-surface: #ffffff;
	--wcp-el-border: #dfe3ea;
	--wcp-el-shadow: 0 12px 34px rgba(16, 24, 40, 0.08);

	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	padding: clamp(2.25rem, 4vw, 4rem) 1.25rem;
	min-height: 70vh;
	border: 0;
	background: linear-gradient(180deg, #ffffff 0%, var(--wcp-el-bg) 100%);
	color: var(--wcp-el-text);
}

.wcp.wcp-fullwidth .wcp-inner {
	max-width: 1200px;
}

.wcp.wcp-fullwidth .wcp-header {
	margin-bottom: 1.5rem;
	padding: 0 clamp(0.25rem, 1.2vw, 0.75rem);
}

.wcp.wcp-fullwidth .wcp-title {
	color: var(--wcp-el-secondary);
	font-size: clamp(1.6rem, 2.2vw, 2.3rem);
	font-weight: 700;
	letter-spacing: 0;
}

.wcp.wcp-fullwidth .wcp-sub {
	color: var(--wcp-el-text);
	font-size: 1rem;
	max-width: 70ch;
}

.wcp.wcp-fullwidth .wcp-progress {
	margin-bottom: 1.4rem;
}

.wcp.wcp-fullwidth .wcp-progress-track {
	height: 8px;
	border: 1px solid var(--wcp-el-border);
	background: #f3f4f8;
}

.wcp.wcp-fullwidth .wcp-progress-fill {
	background: linear-gradient(90deg, var(--wcp-el-primary), var(--wcp-el-accent));
}

.wcp.wcp-fullwidth .wcp-notice {
	background: #ffffff;
	border-color: var(--wcp-el-border);
	color: var(--wcp-el-text);
	box-shadow: var(--wcp-el-shadow);
}

.wcp.wcp-fullwidth .wcp-panel {
	background: var(--wcp-el-surface);
	border: 1px solid var(--wcp-el-border);
	border-radius: 18px;
	box-shadow: var(--wcp-el-shadow);
	padding: clamp(1rem, 2vw, 1.5rem);
}

.wcp.wcp-fullwidth .wcp-panel-title {
	color: var(--wcp-el-secondary);
	font-size: 1.14rem;
	margin-bottom: 1.2rem;
}

.wcp.wcp-fullwidth .wcp-grid-four {
	gap: 1rem;
}

.wcp.wcp-fullwidth .wcp-field label,
.wcp.wcp-fullwidth .wcp-label {
	margin-bottom: 0.45rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wcp-el-secondary);
}

.wcp.wcp-fullwidth .wcp-select-wrap {
	gap: 0.8rem;
}

.wcp.wcp-fullwidth .wcp-flag-preview {
	width: 38px;
	height: 28px;
	border-color: var(--wcp-el-border);
	background: #eef1f6;
}

.wcp.wcp-fullwidth select,
.wcp.wcp-fullwidth input[type='text'],
.wcp.wcp-fullwidth input[type='number'] {
	border: 1px solid var(--wcp-el-border);
	background: #ffffff;
	color: var(--wcp-el-secondary);
	border-radius: 10px;
	min-height: 48px;
	padding: 0.72rem 0.85rem;
}

.wcp.wcp-fullwidth select:focus,
.wcp.wcp-fullwidth input:focus {
	outline: 0;
	border-color: var(--wcp-el-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.wcp.wcp-fullwidth .wcp-actions {
	margin-top: 1rem;
}

.wcp.wcp-fullwidth .wcp-btn {
	border-radius: 10px;
	padding: 0.8rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	min-height: 46px;
}

.wcp.wcp-fullwidth .wcp-btn--primary {
	background: var(--wcp-el-primary);
	border-color: var(--wcp-el-primary);
	color: #ffffff;
}

.wcp.wcp-fullwidth .wcp-btn--primary:hover {
	filter: brightness(0.95);
}

.wcp.wcp-fullwidth .wcp-btn--gold {
	background: var(--wcp-el-accent);
	border-color: var(--wcp-el-accent);
	color: #ffffff;
}

.wcp.wcp-fullwidth .wcp-btn--gold:hover {
	filter: brightness(0.94);
}

.wcp.wcp-fullwidth .wcp-btn--ghost {
	background: #ffffff;
	color: var(--wcp-el-secondary);
	border-color: var(--wcp-el-border);
}

.wcp.wcp-fullwidth .wcp-btn--ghost:hover {
	background: #f7f8fb;
	border-color: #c6cfdb;
	color: var(--wcp-el-secondary);
}

.wcp.wcp-fullwidth .wcp-msg {
	margin-top: 0.9rem;
	color: var(--wcp-el-primary);
}

@media (min-width: 900px) {
	.wcp.wcp-fullwidth .wcp-grid-four {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.wcp.wcp-fullwidth .wcp-inner {
		max-width: 1360px;
	}

	.wcp.wcp-fullwidth .wcp-panel {
		padding: 1.5rem;
	}
}