/* App styles – consolidated from template revamp */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Bebas+Neue&family=Rajdhani:wght@500;700&family=Space+Grotesk:wght@400;600&display=swap");

:root {
	--avail-green: #0f3d2e;
	--avail-deep: #081f17;
	--avail-gold: #f0b429;
	--avail-ice: #f5f7fb;
	--avail-slate: #1c232b;
	--match-green: #0f3d2e;
	--match-deep: #081f17;
	--match-gold: #f0b429;
	--match-ice: #f5f7fb;
	--match-slate: #1c232b;
	--match-red: #d7262a;
	--sporty-red: #d7262a;
	--sporty-black: #0f1115;
	--sporty-gold: #f0b429;
	--sporty-slate: #1f2530;
	--sporty-ice: #f3f6f9;
	--board-wood: #8a5a2b;
	--board-cork: #b57b3a;
	--note-paper: #f7f1db;
	--note-ink: #1f2530;
	--admin-green: #0f3d2e;
	--admin-deep: #081f17;
	--admin-gold: #f0b429;
	--admin-red: #d7262a;
	--admin-ice: #f5f7fb;
	--admin-slate: #1d222b;
	--money-green: #0f3d2e;
	--money-deep: #081f17;
	--money-gold: #f0b429;
	--money-ink: #1d222b;
	--money-ice: #f5f7fb;
	--money-red: #d7262a;
	--pitch-green: #0f3d2e;
	--pitch-dark: #08261d;
	--accent-red: #d7262a;
	--accent-gold: #f0b429;
	--ice: #f7f8fb;
	--slate: #1d222b;
	--profile-green: #0f3d2e;
	--profile-deep: #0a2219;
	--profile-gold: #f0b429;
	--profile-red: #d7262a;
	--profile-ice: #f5f7fb;
	--profile-ink: #1d222b;
	--sport-red: #e23b2e;
	--sport-orange: #ff8a26;
	--sport-charcoal: #121416;
	--sport-steel: #2b2f35;
	--sport-ice: #f6f3ee;
}

/* ========== View Availability ========== */
#intro.availability-board {
	background: radial-gradient(circle at 12% 12%, rgba(240, 180, 41, 0.2), transparent 40%),
		linear-gradient(135deg, rgba(8, 31, 23, 0.96), rgba(15, 61, 46, 0.92));
	border-radius: 20px;
	padding: 2.6em;
	position: relative;
	overflow: hidden;
	color: var(--avail-ice);
}

#intro.availability-board::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.08),
		rgba(255, 255, 255, 0.08) 1px,
		transparent 1px,
		transparent 12px
	);
	opacity: 0.35;
	pointer-events: none;
}

#intro.availability-board .content {
	position: relative;
	z-index: 1;
}

.avail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	margin-bottom: 1.6em;
}

.avail-header h3 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 2.4em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
	color: var(--avail-ice);
}

.avail-filter {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 1em 1.2em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em 1.2em;
	margin-bottom: 1.4em;
	color: #ffffff;
}

.avail-filter label {
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.05em;
	color: #ffffff;
}

.avail-filter select {
	background: #beea9a;
	color: #ffffff;
	font-weight: 600;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.6em;
	background-image: linear-gradient(45deg, transparent 50%, #2b313a 50%),
		linear-gradient(135deg, #2b313a 50%, transparent 50%);
	background-position: right 1.2em center, right 0.95em center;
	background-size: 8px 8px, 8px 8px;
	background-repeat: no-repeat;
}

.avail-filter select::-ms-expand {
	display: none;
}

.avail-table-card {
	background: #fff;
	border-radius: 18px;
	padding: 1.4em;
	box-shadow: 0 18px 30px rgba(8, 31, 23, 0.25);
	color: var(--avail-slate);
}

.table-wrap {
	overflow-x: auto;
}

.avail-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.avail-table th {
	text-align: left;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85em;
	color: var(--avail-slate);
	padding: 0.8em;
	border-bottom: 1px solid rgba(28, 35, 43, 0.15);
	white-space: nowrap;
}

.avail-table td {
	padding: 0.85em;
	border-bottom: 1px solid rgba(28, 35, 43, 0.08);
	color: #2b313a;
	vertical-align: middle;
	white-space: nowrap;
}

.avail-table tbody tr:nth-child(even) {
	background: rgba(15, 61, 46, 0.04);
}

.avail-table tbody tr:hover {
	background: rgba(240, 180, 41, 0.15);
}

.avail-table select {
	min-width: 120px;
	background: #fff;
}

.avail-pill {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: rgba(15, 61, 46, 0.12);
	color: var(--avail-green);
}

.avail-pill.no {
	background: rgba(215, 38, 42, 0.12);
	color: #b01f23;
}

.avail-actions {
	margin-top: 1.6em;
	display: flex;
	justify-content: flex-end;
}

.avail-actions .button {
	background: var(--avail-gold);
	color: #1b1b1b;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.avail-actions .button.primary {
	background: var(--avail-gold);
	color: #1b1b1b;
}

/* Availability editor (update_availability) */
#intro.availability-editor {
	background: linear-gradient(140deg, rgba(240, 180, 41, 0.18), rgba(15, 61, 46, 0.08));
	border-radius: 20px;
	padding: 2.6em;
	position: relative;
	overflow: hidden;
}

#intro.availability-editor::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 12% 18%, rgba(15, 61, 46, 0.28), transparent 48%);
	opacity: 0.6;
	pointer-events: none;
}

#intro.availability-editor .content {
	position: relative;
	z-index: 1;
}

.avail-title h3 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 2.4em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.6em;
}

.avail-form {
	background: #fff;
	border-radius: 18px;
	padding: 1.4em;
	box-shadow: 0 18px 30px rgba(15, 61, 46, 0.18);
	color: var(--avail-slate);
}

.avail-actions .button.primary {
	background: var(--avail-gold);
	color: #1b1b1b;
}

/* ========== Matches ========== */
#intro.match-board {
	background: radial-gradient(circle at 10% 10%, rgba(240, 180, 41, 0.2), transparent 40%),
		linear-gradient(135deg, rgba(8, 31, 23, 0.96), rgba(15, 61, 46, 0.92));
	border-radius: 20px;
	padding: 2.8em;
	position: relative;
	overflow: hidden;
	color: var(--match-ice);
}

#intro.match-board::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.08),
		rgba(255, 255, 255, 0.08) 1px,
		transparent 1px,
		transparent 12px
	);
	opacity: 0.35;
	pointer-events: none;
}

#intro.match-board .content {
	position: relative;
	z-index: 1;
}

.match-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	margin-bottom: 1.6em;
}

.match-header h3 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 2.4em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
	color: var(--match-ice);
}

.match-header .button {
	background: var(--match-gold);
	color: #1b1b1b;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.match-table-card {
	background: #fff;
	border-radius: 18px;
	padding: 1.4em;
	box-shadow: 0 18px 30px rgba(8, 31, 23, 0.25);
	color: var(--match-slate);
}

.matches-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.matches-table th {
	text-align: left;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85em;
	color: var(--match-slate);
	padding: 0.8em;
	border-bottom: 1px solid rgba(28, 35, 43, 0.15);
}

.matches-table td {
	padding: 0.85em;
	border-bottom: 1px solid rgba(28, 35, 43, 0.08);
	color: #2b313a;
	vertical-align: middle;
}

.matches-table tbody tr:nth-child(even) {
	background: rgba(15, 61, 46, 0.04);
}

.matches-table tbody tr:hover {
	background: rgba(240, 180, 41, 0.15);
}

.match-pill {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: rgba(15, 61, 46, 0.12);
	color: var(--match-green);
}

.matches-table .button {
	background: var(--match-green);
	color: #fff;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.match-callout {
	margin-top: 1.6em;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 1em 1.2em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}

.match-callout p {
	margin: 0;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.05em;
}

.match-callout .button {
	background: var(--match-gold);
	color: #1b1b1b;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Match editor & match manager */
#intro.match-editor,
#intro.match-manager {
	background: linear-gradient(140deg, rgba(8, 31, 23, 0.92), rgba(15, 61, 46, 0.86));
	border-radius: 20px;
	padding: 2.6em;
	color: #fff;
	position: relative;
	overflow: hidden;
}

#intro.match-editor {
	background: linear-gradient(140deg, rgba(8, 31, 23, 0.92), rgba(15, 61, 46, 0.86));
}

#intro.match-manager {
	background: linear-gradient(140deg, rgba(240, 180, 41, 0.18), rgba(15, 61, 46, 0.08));
}

#intro.match-editor::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 20%, rgba(240, 180, 41, 0.25), transparent 45%);
	opacity: 0.6;
	pointer-events: none;
}

#intro.match-manager::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 12% 18%, rgba(15, 61, 46, 0.28), transparent 48%);
	opacity: 0.6;
	pointer-events: none;
}

#intro.match-editor .content,
#intro.match-manager .content {
	position: relative;
	z-index: 1;
}

.match-title h2,
.match-title h3 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.6em;
}

.match-title h3 {
	font-size: 2.4em;
	letter-spacing: 0.06em;
	margin-bottom: 0.2em;
}

.match-subtitle {
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.05em;
	margin-bottom: 1.5em;
}

.match-form {
	background: #fff;
	color: var(--match-slate);
	border-radius: 16px;
	padding: 1.4em;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 16px 28px rgba(8, 31, 23, 0.3);
}

.match-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.6em 1.2em;
}

.match-grid .field label {
	font-weight: 600;
	color: var(--match-slate);
}

.match-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	margin-top: 1.2em;
}

.match-actions .button {
	background: var(--match-green);
	color: #fff;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.match-actions .button.primary {
	background: var(--match-gold);
	color: #1b1b1b;
}

.match-delete {
	margin-top: 1em;
	text-align: right;
}

.match-delete .button.danger {
	background: var(--match-red);
	color: #fff;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.match-collection {
	display: grid;
	gap: 1.4em;
}

.match-card {
	background: #fff;
	border-radius: 16px;
	padding: 1.2em 1.4em;
	border: 1px solid rgba(15, 61, 46, 0.1);
	box-shadow: 0 12px 26px rgba(15, 61, 46, 0.12);
}

.match-card legend {
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--match-green);
	margin-bottom: 0.6em;
}

.match-card .fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.6em 1.2em;
}

.match-card .field label {
	font-weight: 600;
	color: var(--match-slate);
}

/* ========== Announcements & Notice board ========== */
#intro.notice-board {
	background: linear-gradient(135deg, rgba(138, 90, 43, 0.95), rgba(181, 123, 58, 0.92)),
		url("../images/pic04.jpg") center/cover no-repeat;
	border-radius: 18px;
	color: var(--sporty-ice);
	padding: 3.2em 3em;
	position: relative;
	overflow: hidden;
}

#intro.notice-board .content {
	position: relative;
	z-index: 1;
}

#intro.notice-board::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 45%),
		radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08), transparent 48%);
	pointer-events: none;
}

.notice-title h2 {
	font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
	font-size: 3em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.4em;
}

.notice-title p {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
	max-width: 640px;
}

.notice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.4em;
	list-style: none;
	margin: 2em 0 0;
	padding: 0;
}

.notice-card {
	background: var(--note-paper);
	border-radius: 12px;
	box-shadow: 0 16px 26px rgba(15, 17, 21, 0.25);
	color: var(--note-ink);
	padding: 1.2em 1.1em 1.3em;
	position: relative;
	transform: rotate(-1deg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notice-card:nth-child(2n) {
	transform: rotate(1.2deg);
}

.notice-card:nth-child(3n) {
	transform: rotate(-0.6deg);
}

.notice-card::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sporty-red);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.notice-card a {
	color: var(--note-ink);
	text-decoration: none;
}

.notice-card h3 {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.25em;
	margin: 0.6em 0 0;
}

.notice-card:hover {
	transform: translateY(-6px) rotate(0deg);
	box-shadow: 0 22px 34px rgba(15, 17, 21, 0.3);
}

.notice-actions .button,
.notice-actions a.button {
	background: var(--sporty-red);
	color: #fff;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.notice-actions .button.primary {
	background: var(--sporty-gold);
	color: #101217;
}

.notice-remove {
	color: var(--sporty-red);
	font-weight: 700;
	margin-left: 0.5em;
}

.notice-body {
	background: var(--note-paper);
	border-radius: 12px;
	box-shadow: 0 18px 32px rgba(15, 17, 21, 0.25);
	color: var(--note-ink);
	padding: 1.6em 1.5em;
	position: relative;
}

.notice-body::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--sporty-red);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.notice-body p {
	color: var(--note-ink);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin-top: 2em;
	flex-wrap: wrap;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	background: #fff;
	color: var(--note-ink);
	border: 1px solid rgba(15, 17, 21, 0.12);
	text-decoration: none;
	box-shadow: 0 6px 12px rgba(15, 17, 21, 0.12);
}

.page-link.active {
	background: var(--sporty-red);
	color: #fff;
	border-color: transparent;
}

.page-link.disabled {
	opacity: 0.5;
	cursor: default;
	box-shadow: none;
}

.page-ellipsis {
	color: var(--sporty-ice);
	font-weight: 600;
}

/* show_announcement uses pic05 */
body:has(#intro.notice-board.show-announcement) #intro.notice-board,
#intro.notice-board.show-announcement {
	background: linear-gradient(135deg, rgba(138, 90, 43, 0.95), rgba(181, 123, 58, 0.92)),
		url("../images/pic05.jpg") center/cover no-repeat;
}

/* ========== Admin ========== */
#intro.admin-dashboard {
	background: radial-gradient(circle at 10% 10%, rgba(240, 180, 41, 0.18), transparent 40%),
		linear-gradient(135deg, rgba(8, 31, 23, 0.96), rgba(15, 61, 46, 0.92));
	border-radius: 20px;
	color: var(--admin-ice);
	padding: 3em;
	position: relative;
	overflow: hidden;
}

#intro.admin-dashboard::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.06) 1px,
		transparent 1px,
		transparent 11px
	);
	opacity: 0.4;
	pointer-events: none;
}

#intro.admin-dashboard .content {
	position: relative;
	z-index: 1;
}

.admin-title h2 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 3em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.3em;
}

.admin-subtitle {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
	max-width: 680px;
	margin-bottom: 2em;
}

.admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.4em;
	margin-bottom: 2em;
}

.team-panel {
	background: #fff;
	border-radius: 18px;
	padding: 1.2em 1.4em;
	box-shadow: 0 18px 30px rgba(8, 31, 23, 0.25);
	color: var(--admin-slate);
}

.team-panel h3 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 1.5em;
	margin-top: 0;
}

.team-panel ol {
	margin: 0.8em 0 0;
	padding-left: 1.2em;
}

.team-panel li {
	margin-bottom: 0.4em;
}

.team-panel a {
	color: var(--admin-slate);
	text-decoration: none;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.05em;
}

.team-panel a:hover {
	color: var(--admin-red);
}

.team-panel.full {
	grid-column: 1 / -1;
}

.admin-callout {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 1em 1.2em;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.05em;
	margin-bottom: 2em;
}

.admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	justify-content: center;
}

.admin-actions .button {
	background: #fff;
	color: #3b4552;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 10px 20px rgba(8, 31, 23, 0.2);
}

.admin-actions .button.primary {
	background: var(--admin-gold);
	color: #101217;
}

.admin-actions .button.danger {
	background: var(--admin-red);
	color: #fff;
}

.admin-form {
	margin-top: 1.2em;
	display: flex;
	justify-content: center;
}

.admin-form form {
	background: #fff;
	padding: 1.2em;
	border-radius: 14px;
	box-shadow: 0 12px 24px rgba(8, 31, 23, 0.2);
}

.admin-flash {
	color: var(--admin-ice);
	text-align: center;
	margin-top: 0.8em;
}

/* ========== Payment ========== */
#intro.payment-dashboard {
	background: radial-gradient(circle at 10% 10%, rgba(240, 180, 41, 0.16), transparent 45%),
		linear-gradient(135deg, rgba(8, 31, 23, 0.96), rgba(15, 61, 46, 0.92));
	border-radius: 20px;
	color: var(--money-ice);
	padding: 3em;
	position: relative;
	overflow: hidden;
}

#intro.payment-dashboard::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.06) 1px,
		transparent 1px,
		transparent 11px
	);
	opacity: 0.35;
	pointer-events: none;
}

#intro.payment-dashboard .content {
	position: relative;
	z-index: 1;
}

.payment-title h2 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 3em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.2em;
}

.payment-subtitle {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
	max-width: 720px;
	margin-bottom: 1.6em;
}

.payment-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1.5em;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.payment-hint {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 0.25em 0.8em;
}

.payment-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em;
	justify-content: center;
	margin-top: 1.6em;
}

.payment-actions .button {
	background: #fff;
	color: #3b4552;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 10px 20px rgba(8, 31, 23, 0.2);
	padding: 0.9em 2.6em;
	font-size: 1.05em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.payment-actions .button.primary {
	background: var(--money-gold);
	color: #101217;
}

.payment-table {
	width: 100%;
	border-collapse: collapse;
	color: var(--money-ink);
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.03em;
}

.payment-table thead th {
	background: var(--money-ice);
	color: var(--money-ink);
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.08em;
	padding: 0.9em;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.payment-table tbody tr:nth-child(even) {
	background: rgba(15, 61, 46, 0.06);
}

.payment-table td {
	padding: 0.7em 0.9em;
	border-bottom: 1px solid rgba(15, 61, 46, 0.08);
	white-space: nowrap;
}

.payment-table input {
	background: transparent;
	border: 1px solid rgba(29, 34, 43, 0.15);
	border-radius: 10px;
	padding: 0.35em 0.6em;
	font-family: "Barlow Condensed", sans-serif;
	width: 100%;
	min-width: 120px;
}

.payment-table input[readonly] {
	background: rgba(29, 34, 43, 0.06);
	border-color: transparent;
	color: var(--money-ink);
}

.table-wrap.payment-wrap {
	background: #fff;
	border-radius: 18px;
	padding: 0.6em;
	box-shadow: 0 18px 30px rgba(8, 31, 23, 0.25);
}

/* ========== Team pages (team-hero: odi/t20/youth) ========== */
#intro.team-hero {
	background: radial-gradient(circle at top right, rgba(240, 180, 41, 0.22), transparent 42%),
		linear-gradient(135deg, rgba(8, 38, 29, 0.96), rgba(15, 61, 46, 0.92));
	border-radius: 20px;
	color: var(--ice);
	padding: 3em 3em 3.4em;
	position: relative;
	overflow: hidden;
}

#intro.team-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.06) 1px,
		transparent 1px,
		transparent 10px
	);
	opacity: 0.45;
	pointer-events: none;
}

#intro.team-hero .content {
	position: relative;
	z-index: 1;
}

.team-title h2 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 3em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.2em;
}

.team-subtitle {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
	max-width: 640px;
	margin-bottom: 1.2em;
}

.team-tags {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
	margin-bottom: 2em;
}

.team-tag {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 0.2em 0.8em;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.9em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.4em;
}

.player-card {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 30px rgba(8, 38, 29, 0.25);
	color: var(--slate);
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.player-photo {
	position: relative;
	background: var(--pitch-dark);
}

.player-photo img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
}

.player-number {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: var(--accent-red);
	color: #fff;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85em;
}

.player-info {
	padding: 1.1em 1.2em 1.4em;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.player-name {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 1.3em;
	margin: 0;
}

.player-link {
	align-self: flex-start;
	background: var(--accent-gold);
	color: #101217;
	text-decoration: none;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ========== Batcc home (sporty-hero) ========== */
#intro.sporty-hero {
	background: linear-gradient(135deg, rgba(15, 17, 21, 0.92), rgba(31, 37, 48, 0.88)),
		url("../images/Ground.jpg") center/cover no-repeat;
	border-radius: 18px;
	color: var(--sporty-ice);
	padding: 3.2em 3em;
	position: relative;
	overflow: hidden;
}

#intro.sporty-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		rgba(215, 38, 42, 0.08),
		rgba(215, 38, 42, 0.08) 14px,
		transparent 14px,
		transparent 28px
	);
	pointer-events: none;
}

#intro.sporty-hero .content {
	position: relative;
	z-index: 1;
}

#intro.sporty-hero h2 {
	font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
	font-size: 3em;
	letter-spacing: 0.06em;
	margin-bottom: 0.35em;
	text-transform: uppercase;
}

#intro.sporty-hero p,
#intro.sporty-hero li {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
}

.sporty-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	margin: 1.4em 0 1.8em;
}

.sporty-badge {
	background: rgba(15, 17, 21, 0.78);
	border: 1px solid rgba(240, 180, 41, 0.5);
	border-radius: 999px;
	color: var(--sporty-ice);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95em;
	letter-spacing: 0.08em;
	padding: 0.4em 1em;
	text-transform: uppercase;
}

.sporty-callout {
	border-left: 4px solid var(--sporty-red);
	padding: 0.6em 1em;
	margin: 1.4em 0;
	background: rgba(15, 17, 21, 0.55);
}

.sporty-card {
	background: linear-gradient(160deg, rgba(31, 37, 48, 0.95), rgba(15, 17, 21, 0.95));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	box-shadow: 0 18px 36px rgba(15, 17, 21, 0.18);
	padding: 1.6em 1.4em;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sporty-card h3,
.sporty-card p {
	color: var(--sporty-ice);
}

.sporty-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 44px rgba(15, 17, 21, 0.28);
}

.sporty-card img {
	border-radius: 12px;
	width: 100%;
	height: 180px;
	object-fit: cover;
	margin-bottom: 0.8em;
}

.sporty-card a {
	color: var(--sporty-gold);
	font-weight: 600;
}

.sporty-section-title h2 {
	font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sporty-match {
	background: radial-gradient(circle at top, rgba(215, 38, 42, 0.15), transparent 55%);
	border-radius: 18px;
	padding: 2.5em 2em;
}

.sporty-match img {
	border-radius: 12px;
	box-shadow: 0 14px 28px rgba(15, 17, 21, 0.2);
}

.sporty-actions .button,
.sporty-actions a.button {
	background: var(--sporty-red);
	color: #fff;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sporty-actions .button.primary {
	background: var(--sporty-gold);
	color: #101217;
}

.sporty-sponsors img {
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.sporty-sponsors img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Index (home) uses IMG_0269.jpeg for hero */
.index-hero#intro.sporty-hero {
	background: linear-gradient(135deg, rgba(15, 17, 21, 0.92), rgba(31, 37, 48, 0.88)),
		url("../images/IMG_0269.jpeg") center/cover no-repeat;
}

#main .index-hero#intro.sporty-hero {
	background: linear-gradient(135deg, rgba(15, 17, 21, 0.92), rgba(31, 37, 48, 0.88)),
		url("../images/IMG_0269.jpeg") center/cover no-repeat;
}

/* ========== Player profile ========== */
#intro.player-profile {
	background: radial-gradient(circle at 15% 12%, rgba(240, 180, 41, 0.18), transparent 45%),
		linear-gradient(135deg, rgba(10, 34, 25, 0.97), rgba(15, 61, 46, 0.92));
	border-radius: 22px;
	color: var(--profile-ice);
	padding: 3em;
	position: relative;
	overflow: hidden;
}

#intro.player-profile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.06) 1px,
		transparent 1px,
		transparent 11px
	);
	opacity: 0.4;
	pointer-events: none;
}

#intro.player-profile .content {
	position: relative;
	z-index: 1;
}

.profile-header {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 2em;
	align-items: center;
	margin-bottom: 2.4em;
}

.profile-photo {
	background: #fff;
	border-radius: 20px;
	padding: 0.6em;
	box-shadow: 0 18px 32px rgba(8, 31, 23, 0.3);
}

.profile-photo img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	display: block;
	border-radius: 16px;
}

.profile-title h2 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 3em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.2em;
}

.profile-tagline {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.1em;
	max-width: 620px;
}

.profile-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-top: 1.4em;
}

.profile-badge {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 0.2em 0.8em;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.4em;
}

.profile-card {
	background: #fff;
	color: var(--profile-ink);
	border-radius: 18px;
	padding: 1.3em 1.4em;
	box-shadow: 0 18px 32px rgba(8, 31, 23, 0.24);
}

.profile-card h3 {
	font-family: "Rajdhani", "Barlow Condensed", sans-serif;
	font-size: 1.4em;
	margin-top: 0;
}

.profile-card ul {
	list-style: none;
	padding: 0;
	margin: 0.8em 0 0;
	display: grid;
	gap: 0.6em;
	font-family: "Barlow Condensed", sans-serif;
}

.profile-card li span {
	font-weight: 600;
	color: var(--profile-ink);
}

.profile-card .highlight {
	background: rgba(240, 180, 41, 0.2);
	border-left: 4px solid var(--profile-gold);
	padding: 0.6em 0.8em;
	border-radius: 10px;
	font-family: "Barlow Condensed", sans-serif;
	margin-top: 0.6em;
}

.profile-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--profile-gold);
	color: #101217;
	text-decoration: none;
	padding: 0.4em 0.8em;
	border-radius: 999px;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-right: 0.6em;
}

.profile-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8em;
}

.profile-actions .button {
	background: #fff;
	color: #3b4552;
	border: none;
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 10px 20px rgba(8, 31, 23, 0.2);
}

.profile-actions .button.primary {
	background: var(--profile-gold);
	color: #101217;
}

.profile-actions .button.danger {
	background: var(--profile-red);
	color: #fff;
}

/* ========== Login ========== */
#login-hero {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: radial-gradient(circle at 20% 10%, rgba(255, 138, 38, 0.4), transparent 50%),
		linear-gradient(135deg, #101214 0%, #1b1f24 60%, #2f1d1a 100%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

#login-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/Team.jpeg") center/cover no-repeat;
	opacity: 0.18;
	filter: grayscale(100%) contrast(120%);
}

#login-hero::after {
	content: "";
	position: absolute;
	inset: -40% -20% auto auto;
	width: 70%;
	height: 140%;
	background: repeating-linear-gradient(120deg,
			rgba(226, 59, 46, 0.18),
			rgba(226, 59, 46, 0.18) 12px,
			rgba(18, 20, 22, 0.1) 12px,
			rgba(18, 20, 22, 0.1) 24px);
	transform: rotate(-10deg);
}

.login-shell {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 2.5rem;
	align-items: stretch;
	padding: 3.5rem 3.5rem 3rem;
}

.login-copy {
	flex: 1.2;
	color: var(--sport-ice);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.login-kicker {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	color: rgba(246, 243, 238, 0.7);
	margin-bottom: 1rem;
}

.login-title {
	font-family: "Bebas Neue", sans-serif;
	font-size: 3.5rem;
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
}

.login-subtitle {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 24rem;
	margin-bottom: 2rem;
	color: rgba(246, 243, 238, 0.8);
}

.login-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	font-family: "Space Grotesk", sans-serif;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: rgba(246, 243, 238, 0.6);
}

.login-stats strong {
	display: block;
	font-size: 1.2rem;
	color: var(--sport-ice);
	letter-spacing: 0.08em;
	margin-bottom: 0.35rem;
}

.login-card {
	flex: 0.9;
	background: rgba(18, 20, 22, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.25rem;
	padding: 2.5rem 2.25rem;
	backdrop-filter: blur(6px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	color: var(--sport-ice);
}

.login-card h2 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
	color: var(--sport-ice);
}

.login-card label {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(246, 243, 238, 0.6);
}

#login-hero input,
#login-hero select,
#login-hero textarea {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--sport-ice);
	border-radius: 0.75rem;
	padding: 0.85rem 1rem;
}

#login-hero input:focus,
#login-hero select:focus,
#login-hero textarea:focus {
	border-color: rgba(255, 138, 38, 0.8);
	box-shadow: 0 0 0 2px rgba(255, 138, 38, 0.25);
}

#login-hero .btn,
#login-hero .button,
#login-hero button[type="submit"] {
	background: linear-gradient(120deg, var(--sport-red), var(--sport-orange));
	border: none;
	color: #101214;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 0.9rem 1.6rem;
	border-radius: 999px;
}

#login-hero .btn:hover,
#login-hero .button:hover,
#login-hero button[type="submit"]:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

.login-alert {
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	background: rgba(255, 138, 38, 0.15);
	border: 1px solid rgba(255, 138, 38, 0.4);
	color: var(--sport-ice);
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.9rem;
}

/* ========== Media queries (global) ========== */
@media screen and (max-width: 980px) {
	#intro.availability-board {
		padding: 2em;
	}
	.avail-header h3 {
		font-size: 2em;
	}
	#intro.match-board {
		padding: 2.2em;
	}
	.match-header h3 {
		font-size: 2em;
	}
	#intro.notice-board {
		padding: 2.4em 2em;
	}
	.notice-title h2 {
		font-size: 2.4em;
	}
	#intro.admin-dashboard {
		padding: 2.4em 2em;
	}
	.admin-title h2 {
		font-size: 2.4em;
	}
	#intro.payment-dashboard {
		padding: 2.4em 2em;
	}
	.payment-title h2 {
		font-size: 2.4em;
	}
	#intro.team-hero {
		padding: 2.4em 2em 2.8em;
	}
	.team-title h2 {
		font-size: 2.4em;
	}
	#intro.sporty-hero {
		padding: 2.4em 2em;
	}
	#intro.sporty-hero h2 {
		font-size: 2.4em;
	}
	.sporty-badges {
		justify-content: center;
	}
	#intro.player-profile {
		padding: 2.4em 2em;
	}
	.profile-header {
		grid-template-columns: 1fr;
	}
	.profile-photo img {
		height: 280px;
	}
	.profile-title h2 {
		font-size: 2.4em;
	}
	#intro.availability-editor {
		padding: 2em;
	}
	.avail-title h3 {
		font-size: 2em;
	}
	#intro.match-editor {
		padding: 2em;
	}
	#intro.match-manager {
		padding: 2em;
	}
	.match-title h3 {
		font-size: 2em;
	}
}

@media (max-width: 980px) {
	.login-shell {
		flex-direction: column;
		padding: 3rem 2.2rem 2.5rem;
	}
	.login-title {
		font-size: 2.8rem;
	}
	.login-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.login-shell {
		padding: 2.4rem 1.6rem 2rem;
	}
	.login-title {
		font-size: 2.4rem;
	}
	.login-stats {
		grid-template-columns: 1fr;
	}
}