/**
 * Chef Eyad Fantasy — public styles.
 *
 * Fully scoped under .cefc-app (a self-contained dark "canvas") so the active
 * theme cannot leak in and the plugin cannot leak out. Mobile-first, RTL,
 * dark + gold. Brand colors come from CSS vars injected per-site from settings
 * (see CEFC_Public::maybe_enqueue()); the values below are safe fallbacks.
 *
 * Specificity strategy: customer-facing controls are written as
 * `.cefc-app .cefc-btn` / `.cefc-app .cefc-input` to beat typical theme rules
 * without using !important. If a very aggressive theme still overrides, bump
 * the prefix one more level (e.g. `.cefc-app .cefc-card .cefc-btn`).
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */
.cefc-app {
	--cefc-primary: #D4AF37;
	--cefc-accent: #E63946;
	--cefc-bg: #0E0E10;
	--cefc-cta: #D4AF37;
	--cefc-card: #15151a;
	--cefc-card-2: #1b1b21;
	--cefc-line: rgba( 212, 175, 55, 0.35 );
	--cefc-text: #f5f5f5;
	--cefc-muted: #b6b6b6;
}

/* ------------------------------------------------------------------ *
 * 2. Wrapper + internal reset + RTL defenses
 * ------------------------------------------------------------------ */
.cefc-app {
	box-sizing: border-box;
	direction: rtl;
	text-align: right;
	unicode-bidi: isolate;
	writing-mode: horizontal-tb;
	max-width: 1180px;
	margin: 24px auto;
	padding: 24px 16px 32px;
	background: var(--cefc-bg);
	color: var(--cefc-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	border-radius: 18px;
	isolation: isolate;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

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

/* Neutralize theme noise on common elements, only inside the app. */
.cefc-app h1,
.cefc-app h2,
.cefc-app h3,
.cefc-app p,
.cefc-app ul,
.cefc-app ol,
.cefc-app li,
.cefc-app label,
.cefc-app span,
.cefc-app strong,
.cefc-app a {
	writing-mode: horizontal-tb;
	letter-spacing: normal;
	word-break: normal;
	white-space: normal;
	text-align: right;
}

.cefc-app img {
	max-width: 100%;
	height: auto;
}

.cefc-app a {
	color: var(--cefc-primary);
	text-decoration: none;
}

/* Nested .cefc-app (a standalone view embedded inside the all-in-one app):
   drop its canvas chrome so it doesn't double-pad / double-paint / re-narrow. */
.cefc-app .cefc-app {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	isolation: auto;
}

/* ------------------------------------------------------------------ *
 * 3. Layout primitives
 * ------------------------------------------------------------------ */
.cefc-section {
	margin: 0 0 32px;
}

.cefc-section:last-child {
	margin-bottom: 0;
}

.cefc-wrap {
	max-width: 760px;
	margin-inline: auto;
}

.cefc-card {
	background: var(--cefc-card);
	border: 1px solid var(--cefc-line);
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.35 );
}

/* Isolated iframe render mode: parent shell (these classes are NOT .cefc-app). */
.cefc-iframe-shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}

.cefc-fantasy-frame {
	width: 100%;
	min-height: 900px;
	border: 0;
	display: block;
	overflow: hidden;
	background: transparent;
}

/* ------------------------------------------------------------------ *
 * 4. Typography
 * ------------------------------------------------------------------ */
.cefc-app .cefc-h1 {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.4;
}

.cefc-app .cefc-h2 {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
}

.cefc-app .cefc-h3 {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	border-right: 3px solid var(--cefc-primary);
	padding-right: 8px;
}

.cefc-muted {
	color: var(--cefc-muted);
	font-size: 14px;
}

.cefc-greeting {
	font-size: 18px;
	font-weight: 700;
	display: block;
}

.cefc-brand {
	display: block;
	color: var(--cefc-primary);
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 10px;
}

/* ------------------------------------------------------------------ *
 * 5. Buttons (high specificity to beat theme)
 * ------------------------------------------------------------------ */
.cefc-app .cefc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 48px;
	padding: 12px 18px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.05s ease, filter 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cefc-app .cefc-btn:active {
	transform: translateY( 1px );
}

.cefc-app .cefc-btn:disabled {
	opacity: 0.65;
	cursor: default;
}

.cefc-app .cefc-btn--primary {
	background: var(--cefc-cta);
	color: #1a1a1a;
	border-color: var(--cefc-cta);
}

.cefc-app .cefc-btn--primary:hover:not(:disabled) {
	filter: brightness( 1.07 );
}

.cefc-app .cefc-btn--ghost {
	background: transparent;
	color: var(--cefc-primary);
	border-color: var(--cefc-primary);
}

.cefc-app .cefc-btn--ghost:hover:not(:disabled) {
	background: rgba( 212, 175, 55, 0.1 );
}

.cefc-app .cefc-wa-cta,
.cefc-app .cefc-cta--wa {
	background: #25D366;
	border-color: #25D366;
	color: #06311a;
}

.cefc-linkbtn {
	background: none;
	border: none;
	color: var(--cefc-primary);
	text-decoration: underline;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	padding: 0;
}

/* ------------------------------------------------------------------ *
 * 6. Forms
 * ------------------------------------------------------------------ */
.cefc-field {
	display: block;
	margin: 0 0 16px;
}

.cefc-label {
	display: block;
	font-size: 13px;
	color: #d8d8d8;
	margin-bottom: 6px;
}

.cefc-app .cefc-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	color: #fff;
	background: #101015;
	border: 1px solid #33333a;
	border-radius: 12px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cefc-app select.cefc-input {
	background-image: none;
}

.cefc-app .cefc-input:focus {
	border-color: var(--cefc-primary);
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.2 );
}

.cefc-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	color: #cfcfcf;
	margin: 4px 0 16px;
	cursor: pointer;
}

.cefc-consent input {
	margin-top: 4px;
	flex: 0 0 auto;
	width: auto;
	min-height: 0;
}

.cefc-help {
	margin: 14px 0 0;
	font-size: 13px;
	color: #9c9c9c;
}

.cefc-help a {
	color: var(--cefc-primary);
}

/* ------------------------------------------------------------------ *
 * 7. Messages
 * ------------------------------------------------------------------ */
.cefc-msg {
	border-radius: 12px;
	padding: 10px 12px;
	margin: 0 0 14px;
	font-size: 14px;
}

.cefc-msg--error {
	background: rgba( 230, 57, 70, 0.15 );
	border: 1px solid rgba( 230, 57, 70, 0.5 );
	color: #ffd7da;
}

.cefc-msg--ok {
	background: rgba( 46, 160, 67, 0.15 );
	border: 1px solid rgba( 46, 160, 67, 0.5 );
	color: #d7f7de;
}

.cefc-empty {
	text-align: center;
	padding: 28px 16px;
	border: 1px dashed var(--cefc-line);
	border-radius: 14px;
}

/* ------------------------------------------------------------------ *
 * 8. Auth widget + strict structural classes
 * ------------------------------------------------------------------ */
.cefc-auth .cefc-card,
.cefc-auth--in .cefc-card,
.cefc-auth-card {
	max-width: 520px;
	margin-inline: auto;
}

.cefc-auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.cefc-field-label {
	display: block;
	width: 100%;
	font-size: 14px;
	color: #e6e6e6;
	margin-bottom: 6px;
	text-align: right;
}

.cefc-checkbox-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	font-size: 13px;
	color: #cfcfcf;
	line-height: 1.7;
	text-align: right;
	cursor: pointer;
}

.cefc-checkbox-row input[type="checkbox"] {
	width: 18px;
	min-width: 18px;
	height: 18px;
	margin: 4px 0 0;
	flex: 0 0 auto;
}

.cefc-checkbox-row span {
	flex: 1 1 auto;
	display: block;
	text-align: right;
}

.cefc-form-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
	width: 100%;
}

/* Dedicated auth containers — MUST NOT reuse .cefc-step (that is the score
   stepper button, 38px). These keep the auth form full width. */
.cefc-auth-section {
	display: block;
	width: 100%;
	margin: 24px auto;
	clear: both;
}

.cefc-auth-step {
	display: block;
	width: 100%;
	clear: both;
}

body .cefc-app .cefc-auth-section {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	clear: both !important;
	margin: 24px auto !important;
	position: relative !important;
}

body .cefc-app .cefc-auth-card {
	width: 100% !important;
	max-width: 560px !important;
	min-width: 0 !important;
	margin: 0 auto !important;
	display: block !important;
	position: relative !important;
	float: none !important;
	clear: both !important;
}

body .cefc-app .cefc-auth-step {
	width: 100% !important;
	display: block !important;
	float: none !important;
	clear: both !important;
}

body .cefc-app .cefc-auth-form {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	align-items: stretch !important;
}

body .cefc-app .cefc-auth-section .cefc-field {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	position: relative !important;
	float: none !important;
	clear: both !important;
}

/* ------------------------------------------------------------------ *
 * 9. Hero
 * ------------------------------------------------------------------ */
.cefc-hero {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	background: linear-gradient( 160deg, rgba( 212, 175, 55, 0.16 ), rgba( 14, 14, 16, 0.4 ) ), #121216;
	border: 1px solid var(--cefc-line);
	border-radius: 18px;
	padding: 30px 20px;
}

.cefc-hero-title {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.45;
	text-align: center;
}

.cefc-hero-sub {
	color: #e6e6e6;
	font-size: 15px;
	margin: 0 0 14px;
	text-align: center;
}

.cefc-matches-title {
	text-align: center;
	color: var(--cefc-primary);
	margin-bottom: 10px;
}

.cefc-points-reminder {
	text-align: center;
	color: var(--cefc-primary);
	font-weight: 700;
	background: rgba( 212, 175, 55, 0.1 );
	border: 1px solid var(--cefc-line);
	border-radius: 12px;
	padding: 10px 12px;
	margin: 0 0 14px;
	font-size: 14px;
}

.cefc-hero-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.cefc-hero-auth,
.cefc-hero-welcome {
	max-width: 520px;
	margin: 16px auto 0;
}

/* ------------------------------------------------------------------ *
 * 10. How it works (steps grid)
 * ------------------------------------------------------------------ */
.cefc-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.cefc-step-card {
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 14px;
	padding: 16px;
	text-align: center;
}

.cefc-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cefc-primary);
	color: #1a1a1a;
	font-weight: 800;
	margin-bottom: 8px;
}

.cefc-step-card p {
	margin: 0;
	font-size: 14px;
	color: #ddd;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * 11. Top 3 preview
 * ------------------------------------------------------------------ */
.cefc-top3-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 8px;
	max-width: 520px;
	margin-inline: auto;
}

.cefc-top3-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.07 );
	border-radius: 10px;
	padding: 8px 12px;
}

.cefc-top3-medal {
	font-size: 20px;
}

.cefc-top3-name {
	font-weight: 700;
	flex: 1;
}

.cefc-top3-points {
	color: var(--cefc-primary);
	font-weight: 700;
}

.cefc-terms-link {
	text-align: center;
	margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 * 12. Matches
 * ------------------------------------------------------------------ */
.cefc-match-list {
	display: grid;
	gap: 12px;
	max-width: 760px;
	margin-inline: auto;
}

.cefc-match-card {
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 14px;
	padding: 16px;
}

.cefc-match-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.cefc-match-round {
	font-size: 12px;
	color: #9c9c9c;
}

.cefc-badge {
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: #2a2a30;
	color: #ddd;
	white-space: nowrap;
}

.cefc-badge--open {
	background: rgba( 46, 160, 67, 0.2 );
	color: #9be3ad;
}

.cefc-badge--locked,
.cefc-badge--live {
	background: rgba( 230, 57, 70, 0.2 );
	color: #ffb3b8;
}

.cefc-badge--finished {
	background: rgba( 212, 175, 55, 0.2 );
	color: #f0d98a;
}

.cefc-match-teams {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

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

.cefc-team-b {
	flex-direction: row-reverse;
}

.cefc-team-name {
	font-weight: 700;
	font-size: 16px;
	overflow-wrap: anywhere;
}

.cefc-flag {
	width: 28px;
	height: 20px;
	object-fit: cover;
	border-radius: 3px;
	flex: 0 0 auto;
}

.cefc-flag-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1b1b21;
	border: 1px solid var(--cefc-line);
	font-size: 20px;
	line-height: 1;
	flex: 0 0 auto;
}

.cefc-team {
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.cefc-team-b {
	flex-direction: column;
}

.cefc-vs {
	font-size: 18px;
	font-weight: 800;
	color: var(--cefc-primary);
	min-width: 48px;
	text-align: center;
	flex: 0 0 auto;
}

.cefc-match-meta {
	margin-top: 12px;
	font-size: 13px;
	color: #c4c4c4;
	text-align: center;
}

.cefc-countdown {
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--cefc-accent);
	direction: ltr;
}

.cefc-countdown--closed {
	color: #9c9c9c;
}

.cefc-predict-soon,
.cefc-match-final,
.cefc-predict-login {
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
}

/* Prediction panel — one integrated box inside the match card. */
.cefc-predict-form {
	margin-top: 14px;
}

.cefc-predict-panel {
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid var(--cefc-line);
	border-radius: 14px;
	padding: 14px;
}

.cefc-predict-points {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--cefc-primary);
	margin: 0 0 12px;
}

.cefc-predict-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
}

.cefc-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
}

.cefc-score-team {
	font-size: 13px;
	font-weight: 700;
	color: #e6e6e6;
	text-align: center;
	overflow-wrap: anywhere;
}

.cefc-score-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.cefc-lock-hint {
	margin: 10px 0 0;
	text-align: center;
	font-size: 12px;
}

.cefc-app .cefc-step {
	width: 38px;
	height: 38px;
	min-height: 0;
	border-radius: 50%;
	border: 1px solid var(--cefc-primary);
	background: transparent;
	color: var(--cefc-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.cefc-app .cefc-score-input {
	width: 56px;
	height: 46px;
	min-height: 46px;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	background: #101015;
	border: 1px solid #33333a;
	border-radius: 10px;
	-moz-appearance: textfield;
	padding: 0;
}

.cefc-app .cefc-score-input::-webkit-outer-spin-button,
.cefc-app .cefc-score-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cefc-winner-hint {
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--cefc-primary);
}

.cefc-current-pred {
	margin: 8px 0 0;
	text-align: center;
	font-size: 12px;
}

.cefc-predict-form .cefc-btn {
	margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * 13. Leaderboard
 * ------------------------------------------------------------------ */
.cefc-leaderboard-inner,
.cefc-lb-title {
	max-width: 760px;
	margin-inline: auto;
}

/* Podium (top 3) */
.cefc-podium {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
	max-width: 760px;
	margin: 0 auto 16px;
	align-items: end;
}

.cefc-podium-card {
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 14px;
	padding: 14px 8px;
	text-align: center;
}

.cefc-podium-1 {
	border-color: #d4af37;
	box-shadow: 0 0 0 2px rgba( 212, 175, 55, 0.3 );
	order: 2;
	padding-top: 22px;
}

.cefc-podium-2 {
	border-color: #c0c0c0;
	order: 1;
}

.cefc-podium-3 {
	border-color: #cd7f32;
	order: 3;
}

.cefc-podium-me {
	outline: 2px solid var(--cefc-accent);
}

.cefc-podium-medal {
	font-size: 30px;
	line-height: 1;
}

.cefc-podium-name {
	font-weight: 700;
	font-size: 14px;
	margin-top: 6px;
	overflow-wrap: anywhere;
}

.cefc-podium-points {
	color: var(--cefc-primary);
	font-weight: 800;
	margin-top: 4px;
}

.cefc-podium-sub {
	font-size: 11px;
	margin-top: 2px;
}

/* Hide the detail columns on small screens to avoid table overflow. */
@media ( max-width: 480px ) {
	.cefc-lb-table .cefc-col-correct,
	.cefc-lb-table .cefc-col-exact {
		display: none;
	}
}

.cefc-lb-title {
	text-align: center;
	color: var(--cefc-primary);
	margin-bottom: 14px;
}

.cefc-myrank {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto 14px;
	background: rgba( 212, 175, 55, 0.1 );
	border: 1px solid var(--cefc-line);
	border-radius: 12px;
	padding: 12px 16px;
}

.cefc-myrank-num {
	font-size: 22px;
	font-weight: 800;
	color: var(--cefc-primary);
}

.cefc-myrank-of {
	display: block;
	font-size: 12px;
	color: #b6b6b6;
}

.cefc-myrank-stats {
	text-align: left;
}

.cefc-myrank-stats strong {
	display: block;
}

.cefc-lb-table {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	border-collapse: collapse;
	font-size: 14px;
}

.cefc-lb-table th,
.cefc-lb-table td {
	padding: 10px 8px;
	text-align: center;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
}

.cefc-lb-table th {
	color: #b6b6b6;
	font-size: 12px;
	font-weight: 700;
}

.cefc-lb-table .cefc-col-name {
	text-align: right;
}

.cefc-lb-table .cefc-col-rank {
	width: 44px;
	font-weight: 700;
}

.cefc-lb-top3 td {
	background: rgba( 212, 175, 55, 0.06 );
}

.cefc-lb-rank-1 td {
	background: rgba( 212, 175, 55, 0.14 );
}

.cefc-lb-me td {
	background: rgba( 230, 57, 70, 0.12 );
	box-shadow: inset 2px 0 0 var(--cefc-accent);
}

.cefc-you-badge {
	display: inline-block;
	margin-right: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #1a1a1a;
	background: var(--cefc-accent);
	border-radius: 999px;
	padding: 1px 8px;
}

.cefc-col-points strong {
	color: var(--cefc-primary);
	font-size: 16px;
}

/* ------------------------------------------------------------------ *
 * 14. Dashboard
 * ------------------------------------------------------------------ */
.cefc-dashboard .cefc-dash-head,
.cefc-dash-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto 16px;
}

.cefc-dash-branch {
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

.cefc-app .cefc-logout--sm {
	width: auto;
	min-height: 0;
	padding: 8px 14px;
	font-size: 13px;
}

.cefc-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	max-width: 760px;
	margin: 0 auto 16px;
}

.cefc-stat {
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.07 );
	border-radius: 12px;
	padding: 12px 6px;
	text-align: center;
}

.cefc-stat--primary {
	background: rgba( 212, 175, 55, 0.12 );
	border-color: var(--cefc-line);
}

.cefc-stat-num {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.cefc-stat--primary .cefc-stat-num {
	color: var(--cefc-primary);
}

.cefc-stat-label {
	display: block;
	font-size: 11px;
	color: #b6b6b6;
	margin-top: 3px;
}

.cefc-dashboard .cefc-wa-cta {
	max-width: 760px;
	margin: 0 auto 18px;
}

.cefc-dash-section {
	max-width: 760px;
	margin: 18px auto 0;
}

/* Stacked input + full-width button (mobile-safe on all breakpoints). */
.cefc-bonus-row,
.cefc-ref-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.cefc-bonus-row .cefc-input,
.cefc-ref-row .cefc-input {
	width: 100%;
}

.cefc-bonus-row .cefc-btn,
.cefc-ref-row .cefc-btn {
	width: 100%;
}

.cefc-need-list,
.cefc-pred-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.cefc-need-item,
.cefc-pred-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	border-radius: 10px;
	padding: 10px 12px;
}

.cefc-need-teams,
.cefc-pred-teams {
	font-weight: 700;
	font-size: 14px;
}

.cefc-need-time {
	font-size: 12px;
}

.cefc-pred-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cefc-pred-mine {
	font-size: 12px;
	color: #b6b6b6;
}

.cefc-pred-side {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.cefc-pred-actual {
	font-weight: 800;
	color: #fff;
}

.cefc-pts {
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.cefc-pts--exact {
	background: rgba( 46, 160, 67, 0.25 );
	color: #b6f0c4;
}

.cefc-pts--winner {
	background: rgba( 212, 175, 55, 0.22 );
	color: #f0d98a;
}

.cefc-pts--zero {
	background: #2a2a30;
	color: #aaa;
}

/* ------------------------------------------------------------------ *
 * 15. Offers
 * ------------------------------------------------------------------ */
.cefc-offers-title {
	text-align: center;
	color: var(--cefc-primary);
	margin-bottom: 14px;
}

.cefc-offer-shortcuts {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 18px;
}

.cefc-offer-shortcuts .cefc-btn {
	width: auto;
	flex: 1 1 220px;
}

.cefc-offer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.cefc-offer-card {
	background: var(--cefc-card);
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.cefc-offer-card--rec {
	border-color: var(--cefc-primary);
	box-shadow: 0 0 0 2px rgba( 212, 175, 55, 0.22 );
}

.cefc-offer-img {
	height: 160px;
	background-size: cover;
	background-position: center;
}

.cefc-offer-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.cefc-offer-rec {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	color: #1a1a1a;
	background: var(--cefc-primary);
	border-radius: 999px;
	padding: 2px 10px;
}

.cefc-offer-avail {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: #e6e6e6;
}

.cefc-offer-avail--riyadh {
	background: rgba( 46, 160, 67, 0.18 );
	color: #b6f0c4;
}

.cefc-offer-avail--khobar {
	background: rgba( 56, 132, 255, 0.18 );
	color: #bcd4ff;
}

.cefc-offer-avail--both {
	background: rgba( 212, 175, 55, 0.18 );
	color: #f0d98a;
}

.cefc-hs-cta {
	background: #E94B35;
	border-color: #E94B35;
	color: #fff;
}

.cefc-offer-name {
	font-size: 17px;
	margin: 0;
	color: #fff;
}

.cefc-offer-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.cefc-offer-price {
	font-weight: 800;
	color: var(--cefc-primary);
	font-size: 16px;
}

.cefc-offer-branch {
	font-size: 12px;
	color: #c4c4c4;
}

.cefc-offer-days {
	font-size: 12px;
	margin: 0;
}

.cefc-offer-desc {
	font-size: 14px;
	color: #ddd;
	margin: 4px 0;
}

.cefc-offer-terms {
	font-size: 11px;
	margin: 0;
}

.cefc-offer-cta {
	margin-top: auto;
}

/* --- Rewards --------------------------------------------------------- */
.cefc-rewards {
	max-width: 760px;
}

.cefc-rewards-title {
	text-align: center;
	color: var(--cefc-primary);
	margin-bottom: 14px;
}

.cefc-reward-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media ( min-width: 560px ) {
	.cefc-reward-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.cefc-reward-card {
	background: var(--cefc-card);
	border: 1px solid var(--cefc-line);
	border-radius: 14px;
	padding: 16px;
}

.cefc-reward-type {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #1a1a1a;
	background: var(--cefc-primary);
	border-radius: 999px;
	padding: 2px 10px;
}

.cefc-reward-name {
	font-size: 17px;
	color: #fff;
	margin: 8px 0 4px;
}

.cefc-reward-desc {
	font-size: 14px;
	color: #ddd;
	margin: 0 0 6px;
}

.cefc-reward-how {
	font-size: 13px;
	color: var(--cefc-primary);
	font-weight: 700;
	margin: 0;
}

.cefc-prize-status {
	max-width: 760px;
	margin: 0 auto 14px;
	text-align: center;
	font-weight: 700;
	color: #1a1a1a;
	background: var(--cefc-primary);
	border-radius: 12px;
	padding: 10px 14px;
}

/* --- Groups ---------------------------------------------------------- */
.cefc-groups {
	max-width: 760px;
}

.cefc-groups-title {
	text-align: center;
	color: var(--cefc-primary);
	margin-bottom: 12px;
}

.cefc-group-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 8px;
}

@media ( min-width: 560px ) {
	.cefc-group-actions {
		grid-template-columns: 1fr 1fr;
	}
}

.cefc-group-card {
	margin-bottom: 10px;
}

.cefc-group-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 6px;
}

.cefc-group-board {
	margin-top: 8px;
}

.cefc-link,
details > summary.cefc-link {
	cursor: pointer;
	color: var(--cefc-primary);
	font-size: 13px;
	margin: 4px 0;
}

/* ------------------------------------------------------------------ *
 * 16. Terms
 * ------------------------------------------------------------------ */
.cefc-terms-short {
	max-width: 760px;
	margin: 0 auto 14px;
	background: rgba( 212, 175, 55, 0.08 );
	border: 1px solid var(--cefc-line);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
}

.cefc-terms-full {
	max-width: 760px;
	margin-inline: auto;
}

.cefc-terms-full p {
	margin: 0 0 10px;
	color: #d8d8d8;
	font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * 17. All-in-one app (SPA) + navigation
 * ------------------------------------------------------------------ */
.cefc-spa {
	display: flex;
	flex-direction: column;
	padding-bottom: 100px; /* clearance for fixed bottom nav on mobile */
}

.cefc-tab {
	animation: cefc-fade 0.2s ease;
}

.cefc-tab[hidden] {
	display: none;
}

@keyframes cefc-fade {
	from { opacity: 0; transform: translateY( 4px ); }
	to   { opacity: 1; transform: none; }
}

/* Bottom nav — mobile-first: fixed, centered, compact. */
.cefc-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 60;
	width: calc( 100% - 24px );
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	gap: 2px;
	background: rgba( 14, 14, 16, 0.97 );
	border: 1px solid var(--cefc-line);
	border-radius: 16px;
	padding: 6px 4px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.5 );
	backdrop-filter: blur( 8px );
}

.cefc-app .cefc-nav-item {
	flex: 1;
	background: none;
	border: none;
	color: #b6b6b6;
	cursor: pointer;
	padding: 6px 2px;
	min-height: 0;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 11px;
	font-family: inherit;
	border-radius: 10px;
}

.cefc-app .cefc-nav-item.is-active {
	color: var(--cefc-primary);
	background: rgba( 212, 175, 55, 0.12 );
}

.cefc-nav-icon {
	font-size: 18px;
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 * 18. Responsive
 * ------------------------------------------------------------------ */

/* Tablet+ : multi-column grids, row CTAs. */
@media ( min-width: 560px ) {
	.cefc-steps {
		grid-template-columns: repeat( 2, 1fr );
	}
	.cefc-stats {
		grid-template-columns: repeat( 5, 1fr );
	}
	.cefc-hero-cta {
		flex-direction: row;
		justify-content: center;
	}
	.cefc-hero-cta .cefc-btn {
		width: auto;
		flex: 0 1 220px;
	}
	.cefc-offer-grid {
		grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	}
}

@media ( min-width: 900px ) {
	.cefc-steps {
		grid-template-columns: repeat( 5, 1fr );
	}
}

/* Desktop : render the SPA nav as a STATIC TOP tab bar (no fixed overlay). */
@media ( min-width: 769px ) {
	.cefc-spa {
		padding-bottom: 32px;
	}
	.cefc-bottom-nav {
		position: static;
		order: -1; /* move above the panels */
		width: 100%;
		max-width: none;
		margin: 0 0 24px;
		bottom: auto;
		box-shadow: none;
		border-radius: 14px;
		justify-content: center;
		gap: 6px;
		padding: 8px;
	}
	.cefc-app .cefc-nav-item {
		flex: 0 1 auto;
		flex-direction: row;
		gap: 6px;
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* Small phones : keep everything single-column, no horizontal scroll. */
@media ( max-width: 400px ) {
	.cefc-app {
		padding: 18px 12px 28px;
	}
	.cefc-hero-title {
		font-size: 22px;
	}
}

/* ------------------------------------------------------------------ *
 * 19. Theme override hard-reset (form controls)
 * ------------------------------------------------------------------ *
 * Some themes force `input/select/label/button { width:auto !important }`
 * (or vertical writing-mode), which collapses our fields to a tiny box and
 * makes Arabic wrap one glyph per line. The escape hatch documented at the
 * top of this file: match with !important, scoped strictly to .cefc-app and
 * to OUR classes only (the consent checkbox is explicitly excluded).
 */

/* Force horizontal text everywhere inside the app (kills vertical stacking). */
.cefc-app,
.cefc-app * {
	writing-mode: horizontal-tb !important;
	-webkit-writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
}

/* Field label wrapper + inner label text must be full-width blocks. */
.cefc-app .cefc-field {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 0 16px !important;
}

.cefc-app .cefc-label {
	display: block !important;
	width: 100% !important;
	float: none !important;
	text-align: right !important;
}

/* Text inputs / selects / textareas: always full width, readable height. */
.cefc-app input.cefc-input,
.cefc-app select.cefc-input,
.cefc-app textarea.cefc-input,
.cefc-app .cefc-field input.cefc-input,
.cefc-app .cefc-field select.cefc-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 48px !important;
	height: auto !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	text-align: right !important;
}

/* Phone field stays LTR for digit entry. */
.cefc-app input.cefc-phone {
	text-align: left !important;
	direction: ltr !important;
}

/* Consent row: checkbox stays small; text flows beside it. */
.cefc-app .cefc-consent {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 8px !important;
	width: 100% !important;
	float: none !important;
}

.cefc-app input.cefc-consent-box,
.cefc-app .cefc-consent input[type="checkbox"] {
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 3px 0 0 !important;
	flex: 0 0 auto !important;
	display: inline-block !important;
}

.cefc-app .cefc-consent span {
	display: block !important;
	flex: 1 1 auto !important;
	text-align: right !important;
	line-height: 1.5 !important;
}

/* Buttons inside the auth/predict cards: full-width, properly aligned. */
.cefc-app .cefc-auth .cefc-btn,
.cefc-app .cefc-auth-step .cefc-btn,
.cefc-app .cefc-predict-form .cefc-btn {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 48px !important;
	float: none !important;
	margin-top: 8px !important;
}

/* The auth card itself should be a normal full-width block. */
.cefc-app .cefc-auth .cefc-card {
	display: block !important;
	width: 100% !important;
	float: none !important;
}

/* ------------------------------------------------------------------ *
 * Toasts (v1.5.0) — appended to <body>, so NOT scoped under .cefc-app.
 * RTL, mobile-first, above the bottom nav / floating CTAs.
 * ------------------------------------------------------------------ */
.cefc-toast-wrap {
	position: fixed;
	right: 0;
	left: 0;
	bottom: calc(86px + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	pointer-events: none;
	direction: rtl;
}

.cefc-toast {
	pointer-events: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, #1b170c, #111111);
	border: 1px solid rgba(212, 175, 55, .45);
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	text-align: right;
	direction: rtl;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .25s ease, transform .25s ease;
}

.cefc-toast--in {
	opacity: 1;
	transform: translateY(0);
}

.cefc-toast--out {
	opacity: 0;
	transform: translateY(14px);
}

.cefc-toast-text {
	flex: 1 1 auto;
}

.cefc-toast--success {
	border-color: #2ecc71;
	border-inline-start: 4px solid #2ecc71;
}

.cefc-toast--error {
	border-color: #e74c3c;
	border-inline-start: 4px solid #e74c3c;
}

.cefc-toast--warning {
	border-color: #f1c40f;
	border-inline-start: 4px solid #f1c40f;
}

.cefc-toast--info {
	border-color: rgba(212, 175, 55, .45);
	border-inline-start: 4px solid #d4af37;
}

.cefc-toast-close {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.cefc-toast-close:hover {
	background: rgba(255, 255, 255, .18);
}

@media (min-width: 768px) {
	.cefc-toast-wrap {
		right: auto;
		left: 24px;
		bottom: 24px;
		align-items: flex-start;
		padding: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Notification Center (v1.5.0) — scoped under .cefc-app.
 * ------------------------------------------------------------------ */
.cefc-app .cefc-dash-head-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cefc-app .cefc-notif-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 55, .4);
	background: rgba(212, 175, 55, .08);
	color: #d4af37;
	font-size: 18px;
	cursor: pointer;
}

.cefc-app .cefc-notif-badge {
	position: absolute;
	top: -4px;
	inset-inline-start: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #e74c3c;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	font-weight: 700;
}

.cefc-app .cefc-notif {
	margin: 12px 0;
	padding: 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(212, 175, 55, .25);
}

.cefc-app .cefc-notif-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.cefc-app .cefc-notif-readall {
	background: none;
	border: 0;
	color: #d4af37;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

.cefc-app .cefc-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}

.cefc-app .cefc-notif-item {
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .06);
	background: rgba(255, 255, 255, .02);
	margin-bottom: 8px;
	text-align: right;
	direction: rtl;
}

.cefc-app .cefc-notif-item.is-unread {
	border-color: rgba(212, 175, 55, .5);
	background: rgba(212, 175, 55, .08);
	cursor: pointer;
}

.cefc-app .cefc-notif-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cefc-app .cefc-notif-item-title {
	font-weight: 700;
	color: #fff;
}

.cefc-app .cefc-notif-new {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	color: #111;
	background: #d4af37;
	border-radius: 8px;
	padding: 2px 8px;
}

.cefc-app .cefc-notif-item-msg {
	margin: 6px 0 4px;
	color: #ddd;
	font-size: 14px;
	line-height: 1.6;
}

.cefc-app .cefc-notif-item-time {
	display: block;
	color: #999;
	font-size: 12px;
}

/* ------------------------------------------------------------------ *
 * Weekly / Tournament leaderboard sub-tabs (v1.7.0).
 * ------------------------------------------------------------------ */
.cefc-app .cefc-lb-tabs {
	display: flex;
	gap: 8px;
	margin: 8px 0 14px;
}

.cefc-app .cefc-lb-tabbtn {
	flex: 1 1 0;
	min-height: 44px;
	padding: 10px 8px;
	border: 1px solid rgba(212, 175, 55, .45);
	border-radius: 12px;
	background: transparent;
	color: #d4af37;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.cefc-app .cefc-lb-tabbtn.is-active {
	background: #d4af37;
	color: #111;
}

.cefc-app .cefc-lb-week {
	color: #EAEAEA;
	font-weight: 700;
	margin: 4px 0;
}

.cefc-app .cefc-lb-countdown {
	margin: 0 0 12px;
	color: #d4af37;
	font-weight: 700;
}

@media (max-width: 600px) {
	.cefc-app .cefc-lb-table .cefc-col-branch,
	.cefc-app .cefc-lb-table--components .cefc-col-pred,
	.cefc-app .cefc-lb-table--components .cefc-col-bonus,
	.cefc-app .cefc-lb-table--components .cefc-col-ref {
		display: none;
	}
}

.cefc-app .cefc-pts-breakdown {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(255, 255, 255, .12);
}

.cefc-app .cefc-pts-breakdown p {
	font-size: 13px;
	line-height: 1.7;
	margin: 4px 0;
}

/* Dashboard official points cards (weekly + tournament). */
.cefc-app .cefc-pts-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 10px 0;
}

.cefc-app .cefc-pts-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border-radius: 14px;
	background: rgba(212, 175, 55, .07);
	border: 1px solid rgba(212, 175, 55, .3);
	text-align: center;
}

.cefc-app .cefc-pts-title {
	color: #EAEAEA;
	font-size: 13px;
}

.cefc-app .cefc-pts-value {
	color: #d4af37;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
}

.cefc-app .cefc-pts-help {
	font-size: 11px;
	line-height: 1.5;
}

.cefc-app .cefc-eng-breakdown {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(255, 255, 255, .12);
	font-size: 13px;
}

@media (min-width: 700px) {
	.cefc-app .cefc-pts-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Reward ranking-basis badge (weekly / tournament / stage). */
.cefc-app .cefc-reward-basis {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(212, 175, 55, .15);
	border: 1px solid rgba(212, 175, 55, .45);
	color: #d4af37;
	font-size: 12px;
	font-weight: 700;
}

.cefc-app .cefc-reward-basis-help {
	font-size: 12px;
	line-height: 1.6;
	margin-top: 6px;
}

.cefc-app .cefc-reward-lblinks {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}