/* CBF Member Profile — front-end styles.
   Visual language matches the approved Member Portal Mockup:
   deep teal + gold, Newsreader serif headings, DM Sans body. */

.cbf-profile {
	--cbf-navy: #102f3a;
	--cbf-navy-2: #1a4655;
	--cbf-gold: #d5a323;
	--cbf-gold-soft: #fff3cf;
	--cbf-red: #c23a30;
	--cbf-red-soft: #fae8e5;
	--cbf-green: #2e7558;
	--cbf-green-soft: #e5f3ec;
	--cbf-surface: #ffffff;
	--cbf-surface-2: #f7f9f9;
	--cbf-line: #d5dedf;
	--cbf-ink: #132229;
	--cbf-muted: #56666d;
	--cbf-shadow: 0 18px 48px rgba(17, 43, 52, 0.12);
	max-width: 880px;
	margin: 0 auto;
	padding-top: 28px;
	font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cbf-ink);
}

.cbf-profile h2,
.cbf-profile h3 {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	letter-spacing: -0.01em;
}

/* ---- Membership status card (dark) ---- */
.cbf-status-card {
	background: linear-gradient(135deg, #060606 0%, #1e1e1e 100%);
	color: #fff;
	border-radius: 22px;
	padding: 28px;
	margin-bottom: 22px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 26px;
	align-items: center;
	box-shadow: var(--cbf-shadow);
}

.cbf-status-card small {
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 12px;
	font-weight: 700;
	color: #f1c556;
}

.cbf-status-card h2 {
	color: #fff;
	margin: 8px 0 6px;
	font-size: 2em;
	line-height: 1.1;
}

.cbf-status-card .cbf-member-name {
	margin: 0 0 14px;
}

.cbf-status-card .cbf-status-state {
	color: #fff;
	font-size: 1.35em;
	font-weight: 700;
	margin: 6px 0 2px;
}

.cbf-status-card > div > p {
	color: #c5d5d9;
	margin: 0;
}

.cbf-status-meta {
	display: flex;
	gap: 28px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.cbf-status-meta strong {
	display: block;
	color: #fff;
	font-size: 1.05em;
}

/* ACBL number: fixed-width with a slashed/dotted zero so 0 can't read as O. */
.cbf-status-meta .cbf-meta-acbl strong {
	font-family: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
	font-variant-numeric: slashed-zero;
	letter-spacing: 0.04em;
}

.cbf-status-meta span {
	font-size: 0.82em;
	color: #b8cbd1;
}

/* ---- Cards ---- */
.cbf-card {
	background: var(--cbf-surface);
	border: 1px solid var(--cbf-line);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 20px;
}

.cbf-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.cbf-card-title h3 {
	margin: 0;
	font-size: 1.3em;
}

.cbf-card-lede {
	color: var(--cbf-muted);
	margin: -8px 0 16px;
}

/* ---- Buttons (scoped) ---- */
.cbf-profile .button {
	border: 0;
	border-radius: 10px;
	padding: 12px 20px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
	font-size: 1em;
	font-family: inherit;
	background: var(--cbf-gold);
	color: #14242a;
	white-space: nowrap;
}

.cbf-profile .button:hover {
	filter: brightness(0.94);
	color: #14242a;
	text-decoration: none;
}

.cbf-profile .button-secondary {
	background: var(--cbf-surface);
	color: var(--cbf-ink);
	border: 1px solid var(--cbf-line);
}

.cbf-profile .button-secondary:hover {
	background: var(--cbf-surface-2);
	color: var(--cbf-ink);
}

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

.cbf-profile .button-red:hover {
	filter: brightness(0.92);
	color: #fff;
}

.cbf-btn-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* ---- Stat row (Masterpoints & Rank) ---- */
.cbf-stats-card {
	padding: 0;
	overflow: hidden;
}

.cbf-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
}

.cbf-stat {
	padding: 22px 24px;
	border-right: 1px solid var(--cbf-line);
}

.cbf-stat:last-child {
	border-right: 0;
}

.cbf-stat .label {
	font-size: 0.76em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cbf-muted);
	font-weight: 700;
}

.cbf-stat strong {
	display: block;
	font-family: "Newsreader", Georgia, serif;
	font-weight: 600;
	font-size: 1.75em;
	margin: 6px 0 2px;
	line-height: 1.1;
}

.cbf-stat span {
	font-size: 0.85em;
	color: var(--cbf-muted);
}

.cbf-stat-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.cbf-stat-action .button {
	min-width: 230px;
	text-align: center;
}

/* ---- Canadian Championship Qualifications ---- */
.cbf-champ-quals {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.cbf-champ-qual {
	display: flex;
	align-items: center;
	gap: 18px;
}

.cbf-champ-badge {
	width: 78px;
	height: 78px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.05em;
	letter-spacing: 0.04em;
	background: #e9edee;
	color: #9aa6a8;
	flex: none;
	filter: grayscale(1);
	opacity: 0.75;
}

.cbf-champ-qual.is-qualified .cbf-champ-badge {
	background: linear-gradient(135deg, #d5a323 0%, #f1c556 100%);
	color: #3d2f05;
	filter: none;
	opacity: 1;
	box-shadow: 0 6px 18px rgba(213, 163, 35, 0.35);
}

.cbf-champ-badge a {
	color: inherit;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Hover affordance, only when the badge is a real link. */
.cbf-champ-badge {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cbf-champ-badge:has(a):hover {
	transform: translateY(-2px);
}
.cbf-champ-badge:has(a):hover a,
.cbf-champ-badge a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cbf-champ-note {
	color: var(--cbf-muted);
	font-weight: 500;
}

.cbf-champ-qual.is-qualified .cbf-champ-note {
	color: var(--cbf-ink);
	font-weight: 700;
}

/* ---- Records (collapsible) ---- */
.cbf-records-head {
	margin-bottom: 0;
}

.cbf-records-toggle {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font: inherit;
	color: inherit;
	text-align: left;
}

.cbf-records-title {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-size: 1.3em;
	letter-spacing: -0.01em;
}

.cbf-chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--cbf-muted);
	border-bottom: 2px solid var(--cbf-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex: none;
}

.cbf-records-toggle[aria-expanded="true"] .cbf-chevron {
	transform: rotate(225deg);
}

#cbf-profile-records-body {
	margin-top: 14px;
}

.cbf-records-empty {
	color: var(--cbf-muted);
	margin: 0;
}

.cbf-records-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cbf-record {
	border: 1px solid var(--cbf-line);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--cbf-surface);
}

.cbf-record-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 8px;
}

.cbf-record-number {
	font-weight: 700;
	color: var(--cbf-navy-2);
}

.cbf-record-date {
	color: var(--cbf-muted);
	font-size: 0.92em;
}

.cbf-record-status {
	margin-left: auto;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--cbf-muted);
	background: var(--cbf-surface-2);
	border: 1px solid var(--cbf-line);
	border-radius: 999px;
	padding: 2px 10px;
}

.cbf-record-status-processing,
.cbf-record-status-on-hold {
	color: #7a5c10;
	background: var(--cbf-gold-soft);
	border-color: var(--cbf-gold);
}

.cbf-record-status-completed {
	color: var(--cbf-green);
	background: var(--cbf-green-soft);
	border-color: var(--cbf-green);
}

.cbf-record-status-cancelled,
.cbf-record-status-refunded,
.cbf-record-status-failed {
	color: var(--cbf-red);
	background: var(--cbf-red-soft);
	border-color: var(--cbf-red);
}

.cbf-record-lines {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cbf-record-fee {
	color: var(--cbf-muted);
}

.cbf-record-total {
	font-weight: 700;
}

/* ---- Qualification badges ---- */
.cbf-profile-quals {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cbf-qual-badge {
	display: inline-block;
	background: var(--cbf-gold-soft);
	border: 1px solid var(--cbf-gold);
	color: #7a5c10;
	border-radius: 999px;
	padding: 9px 20px;
	font-weight: 700;
}

.cbf-quals-empty {
	color: var(--cbf-muted);
	margin: 0;
}

/* ---- Read-only fact rows ---- */
.cbf-profile-facts {
	margin: 0;
}

.cbf-profile-facts .cbf-fact {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eef2f3;
}

.cbf-profile-facts .cbf-fact:last-child {
	border-bottom: 0;
}

.cbf-profile-facts dt {
	font-weight: 700;
	color: var(--cbf-muted);
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-top: 4px;
}

.cbf-profile-facts dd {
	margin: 0;
	font-size: 1.02em;
	font-weight: 500;
	color: var(--cbf-ink);
}

.cbf-profile-readonly-note {
	font-size: 0.88em;
	color: #8a8a8a;
	margin: 0 0 6px;
}

/* ---- Notices ---- */
.cbf-profile-notice {
	border-radius: 10px;
	padding: 13px 18px;
	margin-bottom: 20px;
	font-weight: 600;
}

.cbf-profile-notice-success {
	background: var(--cbf-green-soft);
	border: 1px solid #bfe6cc;
	color: var(--cbf-green);
}

.cbf-profile-notice-error {
	background: var(--cbf-red-soft);
	border: 1px solid #f5c6c0;
	color: var(--cbf-red);
}

/* ---- Update Info form (toggled) ---- */
.cbf-profile-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 22px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #eef2f3;
}

.cbf-profile-form .cbf-profile-field {
	margin-bottom: 12px;
}

.cbf-profile-form .cbf-profile-submit {
	grid-column: 1 / -1;
	margin-top: 6px;
}

.cbf-profile-form label {
	font-weight: 600;
	font-size: 0.9em;
	color: #444;
}

.cbf-profile-form input[type="text"],
.cbf-profile-form input[type="email"],
.cbf-profile-form input[type="tel"] {
	width: 100%;
	max-width: 100%;
	border: 1px solid #cfcfcf;
	border-radius: 9px;
	padding: 10px 13px;
	font-size: 1em;
	box-sizing: border-box;
	font-family: inherit;
}

.cbf-profile-form input:focus {
	border-color: var(--cbf-gold);
	outline: 2px solid rgba(213, 163, 35, 0.35);
}

@media (max-width: 680px) {
	.cbf-status-card {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.cbf-status-card .button {
		justify-content: center;
	}

	.cbf-stats {
		grid-template-columns: 1fr;
	}

	.cbf-stat {
		border-right: 0;
		border-bottom: 1px solid var(--cbf-line);
	}

	.cbf-stat:last-child {
		border-bottom: 0;
	}

	.cbf-profile-facts .cbf-fact {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.cbf-profile-form {
		grid-template-columns: 1fr;
	}
}