/* =========================================================
   Chess Event Registration — Frontend Stylesheet
   Compatible with WordPress themes via scoped .cer-* classes
   ========================================================= */

/* ── Custom Properties ─────────────────────────────────── */
.cer-wrap,
.cer-player-list {
	--cer-primary:       #1a3a5c;
	--cer-primary-light: #2563a8;
	--cer-accent:        #d4a017;
	--cer-accent-dark:   #b88a0e;
	--cer-success:       #1a6b3c;
	--cer-success-bg:    #e9f7ef;
	--cer-error:         #9b1c1c;
	--cer-error-bg:      #fdf2f2;
	--cer-surface:       #ffffff;
	--cer-surface-2:     #f8f9fb;
	--cer-border:        #dde3ee;
	--cer-text:          #1c2333;
	--cer-text-muted:    #6b7280;
	--cer-radius:        10px;
	--cer-radius-sm:     6px;
	--cer-shadow:        0 2px 12px rgba(26,58,92,.08);
	--cer-shadow-md:     0 4px 24px rgba(26,58,92,.13);
	font-family: 'Georgia', 'Times New Roman', serif;
	color: var(--cer-text);
	box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Form Wrapper ──────────────────────────────────────── */
.cer-wrap {
	max-width: 700px;
	margin: 0 auto;
}

/* ── Form Header ───────────────────────────────────────── */
.cer-form-header {
	text-align: center;
	padding: 32px 20px 24px;
}

.cer-chess-icon {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 12px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.cer-form-header h2 {
	margin: 0 0 8px;
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--cer-primary);
	letter-spacing: -0.02em;
}

.cer-event-meta {
	margin: 0;
	color: var(--cer-text-muted);
	font-size: 0.9rem;
}

/* ── Cards ─────────────────────────────────────────────── */
.cer-card {
	background: var(--cer-surface);
	border: 1px solid var(--cer-border);
	border-radius: var(--cer-radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: var(--cer-shadow);
	transition: box-shadow 0.2s;
}

.cer-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--cer-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cer-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--cer-primary);
	color: #fff;
	border-radius: 50%;
	font-size: 0.78rem;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Fields ────────────────────────────────────────────── */
.cer-field-group {
	margin-bottom: 18px;
}

.cer-field-group:last-child { margin-bottom: 0; }

.cer-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cer-field-group label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--cer-text);
	margin-bottom: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
}

.cer-required { color: #c0392b; margin-left: 2px; }

.cer-field-group input[type="text"],
.cer-field-group input[type="email"],
.cer-field-group input[type="tel"],
.cer-field-group input[type="number"],
.cer-field-group select,
.cer-field-group textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--cer-border);
	border-radius: var(--cer-radius-sm);
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--cer-text);
	background: var(--cer-surface);
	transition: border-color 0.18s, box-shadow 0.18s;
	-webkit-appearance: none;
	appearance: none;
}

.cer-field-group select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.cer-field-group input:focus,
.cer-field-group select:focus,
.cer-field-group textarea:focus {
	border-color: var(--cer-primary-light);
	box-shadow: 0 0 0 3px rgba(37,99,168,.12);
	outline: none;
}

.cer-field-group input[readonly] {
	background: var(--cer-surface-2);
	color: var(--cer-text-muted);
	cursor: not-allowed;
	border-style: dashed;
}

.cer-field-hint {
	display: block;
	font-size: 0.78rem;
	color: var(--cer-text-muted);
	margin-top: 5px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cer-save-notice {
	display: block;
	font-size: 0.78rem;
	color: var(--cer-text-muted);
	margin-bottom: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Toggle Switch ─────────────────────────────────────── */
.cer-toggle-group {
	margin-bottom: 8px;
}

.cer-toggle-group .cer-card { display: none; }

.cer-toggle-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 0.9rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	user-select: none;
	color: var(--cer-text);
	font-weight: 600;
}

.cer-toggle-switch {
	position: relative;
	flex-shrink: 0;
}

.cer-toggle-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.cer-toggle-slider {
	display: block;
	width: 44px;
	height: 24px;
	background: #cdd1d9;
	border-radius: 12px;
	transition: background 0.2s;
	cursor: pointer;
}

.cer-toggle-slider::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.cer-toggle-switch input:checked + .cer-toggle-slider {
	background: var(--cer-primary-light);
}

.cer-toggle-switch input:checked + .cer-toggle-slider::after {
	transform: translateX(20px);
}

/* ── Input Row (FIDE ID + Button) ──────────────────────── */
.cer-input-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.cer-input-row input { flex: 1; }

/* ── Buttons ───────────────────────────────────────────── */
.cer-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--cer-radius-sm);
	font-size: 0.9rem;
	font-weight: 700;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	cursor: pointer;
	border: none;
	transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
	text-decoration: none;
	white-space: nowrap;
}

.cer-btn:active { transform: scale(0.98); }
.cer-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.cer-btn-lookup {
	background: var(--cer-surface-2);
	color: var(--cer-primary);
	border: 1.5px solid var(--cer-border);
}

.cer-btn-lookup:hover { background: var(--cer-border); }

.cer-submit-wrap { margin-top: 8px; }

.cer-btn-submit {
	width: 100%;
	padding: 15px 24px;
	font-size: 1.05rem;
	background: var(--cer-primary);
	color: #fff;
	box-shadow: var(--cer-shadow-md);
	border-radius: var(--cer-radius);
}

.cer-btn-submit:hover { background: var(--cer-primary-light); box-shadow: 0 6px 28px rgba(26,58,92,.22); }

/* ── Spinner ───────────────────────────────────────────── */
.cer-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cer-spin .65s linear infinite;
	vertical-align: middle;
}

@keyframes cer-spin { to { transform: rotate(360deg); } }

/* ── Messages ──────────────────────────────────────────── */
#cer-messages { min-height: 0; }

.cer-alert {
	padding: 14px 18px;
	border-radius: var(--cer-radius-sm);
	margin-bottom: 18px;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.5;
	animation: cer-fadein .25s ease;
}

@keyframes cer-fadein { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.cer-alert-success {
	background: var(--cer-success-bg);
	border-left: 4px solid var(--cer-success);
	color: var(--cer-success);
}

.cer-alert-error {
	background: var(--cer-error-bg);
	border-left: 4px solid var(--cer-error);
	color: var(--cer-error);
}

/* ── Section Info ──────────────────────────────────────── */
.cer-section-info {
	font-size: 0.82rem;
	color: var(--cer-text-muted);
	margin-top: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ======================================================
   Player List
   ====================================================== */
.cer-player-list { max-width: 960px; margin: 0 auto; }

.cer-section-block {
	margin-bottom: 48px;
}

.cer-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.cer-section-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cer-primary);
	border-bottom: 3px solid var(--cer-accent);
	padding-bottom: 6px;
}

.cer-section-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cer-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 0.75rem;
	font-weight: 700;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.03em;
}

.cer-badge-rating { background: #eef2ff; color: #3730a3; }
.cer-badge-fee    { background: #fefce8; color: #854d0e; }
.cer-badge-count  { background: var(--cer-surface-2); color: var(--cer-text-muted); border: 1px solid var(--cer-border); }

.cer-section-desc {
	font-size: 0.88rem;
	color: var(--cer-text-muted);
	margin: 0 0 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.cer-players-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cer-players-table thead tr {
	background: #1a3a5c;
	color: #fff;
}

.cer-players-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #1a3a5c;
	color: #fff !important; /* override column-specific colour rules e.g. cer-col-seed */
	padding: 12px 16px;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cer-players-table th {
	padding: 12px 16px;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cer-players-table tbody tr {
	border-bottom: 1px solid var(--cer-border);
	transition: background .12s;
}

.cer-players-table tbody tr:last-child { border-bottom: none; }

.cer-players-table tbody tr:hover { background: var(--cer-surface-2); }

.cer-players-table tbody tr:nth-child(even) { background: #fafbfd; }
.cer-players-table tbody tr:nth-child(even):hover { background: var(--cer-surface-2); }

.cer-players-table td {
	padding: 11px 16px;
	color: var(--cer-text);
}

.cer-col-seed { width: 40px; color: var(--cer-text-muted); font-size: 0.8rem; }
.cer-col-rating { font-variant-numeric: tabular-nums; }
.cer-player-name { font-weight: 600; }

.cer-unrated { color: var(--cer-text-muted); font-style: italic; font-size: 0.83rem; }
.cer-dash    { color: #ccc; }

.cer-players-table a { color: var(--cer-primary-light); text-decoration: none; }
.cer-players-table a:hover { text-decoration: underline; }

.cer-status-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 99px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cer-status-confirmed { background: #d1fae5; color: #065f46; }
.cer-status-pending   { background: #fef9c3; color: #713f12; }
.cer-status-cancelled { background: #fee2e2; color: #991b1b; }

.cer-no-players, .cer-empty {
	color: var(--cer-text-muted);
	font-style: italic;
	padding: 16px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
	.cer-field-row    { grid-template-columns: 1fr; }
	.cer-form-header h2 { font-size: 1.4rem; }
	.cer-card         { padding: 16px; }

	.cer-col-fed,
	.cer-col-fide,
	.cer-col-status   { display: none; }

	.cer-section-header { flex-direction: column; align-items: flex-start; }
}

/* Rankings refresh spin */
.cer-spinning {
	display: inline-block;
	animation: cer-spin .65s linear infinite;
}

.cer-badge-warning { background: #fff8e1; color: #b45309; border: 1px solid #fcd34d; }