/* Football CV Builder — front-end / print styles
   Mirrors the Mellow Yellow Sports player-CV template: red/grey
   accents, diagonal photo header, icon key-skills grid, career
   table and ratings grid. */

:root {
	--fcvb-red: #ED1B21;
	--fcvb-grey: #808080;
	--fcvb-blue: #1a73e8;
	--fcvb-bg-light: #F2F2F2;
	--fcvb-bg-footer: #D9D9D9;
	--fcvb-text: #3A3A3A;
	--fcvb-page-w: 210mm;
	--fcvb-page-h: 297mm;
	--fcvb-margin: 16mm;
}

* { box-sizing: border-box; }

html, body.fcvb-body {
	margin: 0;
	padding: 0;
	background: #6b6b6b;
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
	color: var(--fcvb-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------------- Toolbar (screen only) ---------------- */
.fcvb-toolbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #1c1c1c;
	color: #fff;
	padding: 10px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.fcvb-toolbar-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.fcvb-toolbar-title { font-weight: 700; font-size: 15px; }
.fcvb-toolbar-actions { display: flex; gap: 10px; }
.fcvb-btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	font-family: inherit;
}
.fcvb-btn-primary { background: var(--fcvb-red); color: #fff; }
.fcvb-btn-primary:hover { background: #c8161b; color: #fff; }
.fcvb-btn-ghost { background: transparent; color: #fff; border-color: #666; }
.fcvb-btn-ghost:hover { border-color: #fff; }
.fcvb-toolbar-help {
	max-width: 900px;
	margin: 6px auto 0;
	font-size: 12px;
	color: #bbb;
}
.fcvb-export-status {
	max-width: 900px;
	margin: 8px auto 0;
	font-size: 13px;
	font-weight: 700;
	color: #ffd479;
	min-height: 1em;
}

.fcvb-notice {
	max-width: 900px;
	margin: 16px auto 0;
	background: #fff8e1;
	border: 1px solid #f0d78c;
	border-radius: 4px;
	padding: 12px 16px;
	color: #5c4b12;
	font-size: 13px;
}
.fcvb-notice p { margin: 0; }
.fcvb-notice-success {
	background: #fdeceb;
	border-color: var(--fcvb-red, #ED1B21);
	color: #7a0f11;
	font-size: 14px;
}

/* ================= Landing / paywall card ================= */
.fcvb-landing-card {
	max-width: 360px;
	margin: 24px auto;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-top: 4px solid var(--fcvb-red, #ED1B21);
	border-radius: 6px;
	padding: 28px 26px;
	text-align: center;
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
	box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.fcvb-landing-price { font-size: 40px; font-weight: 800; color: var(--fcvb-red, #ED1B21); line-height: 1; }
.fcvb-landing-label { margin: 6px 0 20px; font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: .5px; }
.fcvb-landing-btn { width: 100%; padding: 14px; font-size: 16px; border-radius: 4px; }
.fcvb-landing-fine { margin: 14px 0 0; font-size: 11px; color: #999; }
.fcvb-landing-admin-note { font-size: 12px; background: #fff8e1; border: 1px solid #f0d78c; color: #5c4b12; padding: 8px 10px; border-radius: 4px; margin-bottom: 16px; }

/* ================= Thank-you screen ================= */
.fcvb-thankyou {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1c1c1c;
	padding: 24px;
}
.fcvb-thankyou-card {
	max-width: 420px;
	background: #fff;
	border-radius: 8px;
	padding: 40px 32px;
	text-align: center;
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
.fcvb-thankyou-check {
	width: 56px; height: 56px; line-height: 56px;
	border-radius: 50%;
	background: var(--fcvb-red, #ED1B21);
	color: #fff;
	font-size: 28px;
	margin: 0 auto 18px;
}
.fcvb-thankyou-card h1 { color: #1a1a1a; font-size: 26px; margin: 0 0 12px; }
.fcvb-thankyou-card p { color: #444; font-size: 14px; line-height: 1.6; }
.fcvb-thankyou-card .fcvb-btn { display: inline-block; margin-top: 8px; padding: 12px 30px; }
.fcvb-thankyou-fine { font-size: 11px; color: #999; margin-top: 18px; }

/* ---------------- Page container ---------------- */
.fcvb-pages {
	max-width: var(--fcvb-page-w);
	margin: 24px auto;
}
.fcvb-page {
	position: relative;
	width: var(--fcvb-page-w);
	min-height: var(--fcvb-page-h);
	background: #fff;
	overflow: hidden;
	margin: 0 auto 24px;
	box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* ---------------- Header (page 1: big photo header) ---------------- */
.fcvb-header-hero {
	position: relative;
	height: 62mm;
	background: var(--fcvb-bg-light);
	overflow: hidden;
}
.fcvb-accent-red,
.fcvb-accent-grey {
	position: absolute;
	left: 0;
	width: 5mm;
	z-index: 3;
}
.fcvb-accent-red { top: 0; height: 16mm; background: var(--fcvb-red); }
.fcvb-accent-grey { top: 16mm; height: 12mm; background: var(--fcvb-grey); }

.fcvb-name-block {
	position: absolute;
	left: var(--fcvb-margin);
	top: 9mm;
	width: 118mm;
	z-index: 2;
}
.fcvb-name {
	margin: 0 0 3mm;
	color: var(--fcvb-red);
	font-size: 25pt;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.fcvb-name-rule {
	width: 100mm;
	height: 0;
	border-top: 2px solid var(--fcvb-red);
	margin-bottom: 4.5mm;
}
.fcvb-meta-lines p {
	margin: 0 0 1.6mm;
	font-size: 9.2pt;
	color: #333;
}
.fcvb-meta-lines strong { font-weight: 700; }
.fcvb-flag {
	width: 14px;
	height: auto;
	vertical-align: middle;
	margin: 0 2px 2px 0;
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
table.fcvb-table .fcvb-flag { margin-right: 5px; }
.fcvb-position-line {
	margin-top: 2.5mm !important;
	font-size: 10pt !important;
}

.fcvb-photo-panel {
	position: absolute;
	inset: 0;
	clip-path: polygon(64% 0, 100% 0, 100% 100%, 50% 100%);
	overflow: hidden;
	z-index: 1;
}
.fcvb-photo-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.fcvb-portrait-wrap {
	/* top/right/width/height are tuned together so this box (a) sits
	   fully inside the header's diagonal clip-path with no slice taken
	   off its left edge -- which previously happened near the top and
	   made the photo look off-center/lopsided -- and (b) its bottom
	   edge lines up exactly with the top of the red email banner below
	   it, with no gap. If you ever change .fcvb-photo-panel's
	   clip-path or .fcvb-email-banner's height, these four numbers
	   need to be re-derived to match (they're not independent of
	   those). This box's own ~1.64 landscape ratio is just the frame
	   shape -- the portrait crop tool is free-form (see
	   .fcvb-portrait-wrap img below), so submitted photos are usually a
	   different (typically taller) shape and are fit inside via
	   object-fit:contain rather than stretched or re-cropped to match. */
	position: absolute;
	right: 4%;
	top: 15%;
	width: 34%;
	height: 70%;
	overflow: hidden;
	border-radius: 2px;
}
.fcvb-portrait-wrap img {
	width: 100%;
	height: 100%;
	/* contain (not cover): the portrait crop tool is free-form, so a
	   submitted photo is rarely the exact ~1.64 landscape shape of this
	   box. object-fit:cover would silently re-crop whatever the player
	   selected -- with object-position anchored to the top, that always
	   sliced off the BOTTOM of the photo, which is exactly where a
	   head+jersey crop puts the jersey. contain scales the whole
	   submitted crop down to fit inside the box with no further
	   cropping, so what was selected in the crop tool is exactly what
	   shows here; .fcvb-photo-bg's texture (behind, same panel) shows
	   through any leftover letterbox gap instead of empty space. */
	object-fit: contain;
	object-position: top center;
	display: block;
}
.fcvb-portrait-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.08);
	color: #ddd;
	font-size: 8pt;
	text-align: center;
}
.fcvb-email-banner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 15%;
	background: var(--fcvb-red);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #fff;
	font-size: 9pt;
	font-weight: 600;
	letter-spacing: .2px;
	white-space: nowrap;
	padding-right: 6mm;
}

/* ---------------- Header (page 2/3: compact) ---------------- */
.fcvb-header-compact {
	position: relative;
	background: var(--fcvb-bg-light);
	padding: 8mm var(--fcvb-margin) 6mm;
}
.fcvb-header-compact-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.fcvb-header-compact .fcvb-name {
	font-size: 17pt;
	margin: 0;
}
.fcvb-header-compact-tag {
	font-size: 17pt;
	font-weight: 800;
	color: #333;
}
.fcvb-header-compact-tag::before {
	content: '|';
	color: #333;
	margin-right: 6px;
	font-weight: 400;
}
.fcvb-header-compact-rule-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 5mm;
}
.fcvb-header-compact-rule {
	flex: 1;
	height: 0;
	border-top: 2px solid var(--fcvb-red);
	margin-right: 10mm;
}
.fcvb-header-compact-blocks { display: flex; gap: 3mm; }
.fcvb-header-compact-blocks span { display: block; width: 16mm; height: 4mm; }
.fcvb-header-compact-blocks .b-grey { background: var(--fcvb-grey); }
.fcvb-header-compact-blocks .b-red { background: var(--fcvb-red); }

/* ---------------- Content ---------------- */
.fcvb-content {
	padding: 7mm var(--fcvb-margin) 0;
}
.fcvb-section { margin-bottom: 3mm; }
.fcvb-section-title {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--fcvb-red);
	font-size: 13.5pt;
	font-weight: 800;
	margin: 0 0 4mm;
}
.fcvb-section-title .plus { font-weight: 800; }
.fcvb-divider {
	border: none;
	border-top: 1px solid #ccc;
	margin: 5mm 0;
}
.fcvb-profile-text {
	font-size: 10pt;
	line-height: 1.5;
	margin: 0;
	white-space: pre-line;
}

/* Key skills */
.fcvb-skills-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4mm 2mm;
	justify-items: center;
	padding: 2mm 0 4mm;
}
.fcvb-skills-grid img { width: 26mm; height: auto; display: block; }

/* Three column footer info */
.fcvb-threecol {
	display: flex;
	gap: 0;
	margin-top: 2mm;
}
.fcvb-threecol > div {
	flex: 1;
	padding: 0 6mm;
}
.fcvb-threecol > div:first-child { padding-left: 0; }
.fcvb-threecol > div:not(:first-child) { border-left: 2px solid var(--fcvb-red); }
.fcvb-threecol > div:last-child { border-left: 2px solid var(--fcvb-grey); }
.fcvb-threecol h3 {
	color: var(--fcvb-red);
	font-size: 12pt;
	font-weight: 800;
	margin: 0 0 3mm;
}
.fcvb-threecol ul { margin: 0; padding-left: 4mm; font-size: 9.5pt; line-height: 1.5; }
.fcvb-threecol p { margin: 0; font-size: 9.5pt; line-height: 1.5; }
.fcvb-threecol a { color: var(--fcvb-blue, #1a73e8); text-decoration: underline; word-break: break-all; }

/* Career table */
table.fcvb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 9.5pt;
	margin-bottom: 6mm;
}
table.fcvb-table th {
	background: var(--fcvb-red);
	color: #fff;
	text-align: left;
	padding: 2.5mm 3mm;
	font-weight: 700;
}
table.fcvb-table td {
	padding: 2.5mm 3mm;
	border-bottom: 1px solid #e2e2e2;
}
table.fcvb-table tr:nth-child(even) td { background: #f7f7f7; }

/* Photo showcase */
.fcvb-showcase {
	display: flex;
	flex-wrap: wrap;
	gap: 4mm;
}
.fcvb-showcase-item {
	width: calc(50% - 2mm);
	height: 78mm;
	overflow: hidden;
	background: #eee;
}
.fcvb-showcase-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Specifications table */
table.fcvb-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 9pt;
}
table.fcvb-specs th {
	text-align: center;
	padding: 2mm;
	border-bottom: 2px solid #333;
	font-weight: 700;
}
table.fcvb-specs th:first-child { text-align: left; }
table.fcvb-specs td {
	padding: 1.8mm 2mm;
	border-bottom: 1px solid #e6e6e6;
	text-align: center;
}
table.fcvb-specs td:first-child { text-align: left; }
table.fcvb-specs tr.fcvb-cat td {
	background: #ececec;
	font-weight: 800;
	text-align: left;
	padding-top: 2.6mm;
	padding-bottom: 2.6mm;
}
table.fcvb-specs .mark { color: var(--fcvb-red); font-weight: 800; }

/* Footer band, all pages */
.fcvb-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 20mm;
	background: var(--fcvb-bg-footer);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--fcvb-margin);
}
.fcvb-footer-text { font-size: 7.6pt; line-height: 1.5; color: #333; }
.fcvb-footer-text strong { font-weight: 700; }
.fcvb-footer-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.8mm; }
.fcvb-footer-powered-by { font-size: 6pt; letter-spacing: 0.03em; text-transform: uppercase; color: #888; }
.fcvb-footer-logo { height: 11mm; width: auto; }
.fcvb-footer-divider {
	width: 1px;
	align-self: stretch;
	background: var(--fcvb-red);
	margin: 4mm 6mm;
}

/* ================= Public submission form ================= */
.fcvb-form-wrap {
	max-width: 760px;
	margin: 0 auto;
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
	color: #333;
}
.fcvb-form-wrap * { box-sizing: border-box; }
.fcvb-form-intro { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
/* Its own light card (like .fcvb-field-info below) rather than plain
   text, since this sits directly on the page's dark background
   (body.fcvb-body, #6b6b6b) -- not inside one of the white
   .fcvb-form-section boxes -- where plain muted text reads as
   near-invisible. */
.fcvb-form-intro-note {
	background: #fff8e6;
	border: 1px solid #f0dfa8;
	border-radius: 4px;
	padding: 10px 14px;
	margin-bottom: 24px;
	font-size: 13px;
	line-height: 1.5;
	color: #5c4a12;
}
.fcvb-form-section {
	background: #fff;
	border: 1px solid #e4e4e4;
	border-top: 3px solid var(--fcvb-red, #ED1B21);
	border-radius: 4px;
	padding: 20px 24px;
	margin-bottom: 20px;
}
.fcvb-form-section h3 {
	margin: 0 0 16px;
	color: var(--fcvb-red, #ED1B21);
	font-size: 17px;
	font-weight: 800;
}
.fcvb-form-row { margin-bottom: 14px; }
.fcvb-form-row label.fcvb-field-label {
	display: block;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 5px;
	color: #333;
}
.fcvb-form-row .fcvb-hint { font-weight: 400; color: #888; font-size: 12px; }
.fcvb-form-row input[type=text],
.fcvb-form-row input[type=email],
.fcvb-form-row input[type=date],
.fcvb-form-row input[type=number],
.fcvb-form-row select,
.fcvb-form-row textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
}
.fcvb-form-row input[type=file] { display: block; margin-top: 4px; }
.fcvb-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .fcvb-form-2col { grid-template-columns: 1fr; } }
.fcvb-radio-group label, .fcvb-checkbox-inline label {
	display: inline-block;
	margin-right: 18px;
	font-weight: 400;
	font-size: 14px;
}
.fcvb-form-skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}
.fcvb-form-skill-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 10px 6px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
}
.fcvb-form-skill-choice img { width: 44px; height: 44px; }
.fcvb-form-skill-choice input { margin: 0; }
/* Season fields (years) use <input list="..."> so a season can be
   picked from the prefilled list or typed freely. Not every browser
   draws its own dropdown indicator for that (Firefox and Safari don't),
   so a consistent chevron is added here to make it read as a dropdown
   everywhere, on top of whatever native affordance a browser adds. */
input[list] {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	padding-right: 30px;
}

.fcvb-career-field-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; align-items: center; }
.fcvb-career-field-row input,
.fcvb-career-field-row select { flex: 1 1 160px; min-width: 140px; }
.fcvb-career-remove { background: none; border: none; color: #c0392b; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.fcvb-add-career-row {
	background: none; border: 1px dashed #bbb; color: #555; border-radius: 3px;
	padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.fcvb-nt-field-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.fcvb-nt-field-row input,
.fcvb-nt-field-row select { flex: 1; }
.fcvb-nt-remove { background: none; border: none; color: #c0392b; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.fcvb-add-nt-row-public {
	background: none; border: 1px dashed #bbb; color: #555; border-radius: 3px;
	padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.fcvb-ai-generate-row { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.fcvb-ai-generate-profile {
	background: #fff; border: 1px solid #bbb; color: #333; border-radius: 3px;
	padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.fcvb-ai-generate-profile:disabled { opacity: 0.6; cursor: default; }
.fcvb-ai-status { font-size: 12px; color: #666; }
table.fcvb-form-specs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fcvb-form-specs th, table.fcvb-form-specs td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #eee; }
table.fcvb-form-specs th:first-child, table.fcvb-form-specs td:first-child { text-align: left; }
table.fcvb-form-specs tr.fcvb-form-cat td { background: #f5f5f5; font-weight: 700; text-align: left; }
.fcvb-honeypot-field { position: absolute !important; left: -9999px !important; top: -9999px !important; }
.fcvb-form-submit-row { text-align: center; margin-top: 24px; }
.fcvb-form-submit-row button {
	background: var(--fcvb-red, #ED1B21);
	color: #fff;
	border: none;
	padding: 14px 40px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 4px;
	cursor: pointer;
}
.fcvb-form-submit-row button:hover { background: #c8161b; }
.fcvb-form-submit-row button:disabled { opacity: 0.75; cursor: default; }
.fcvb-form-submit-row button.fcvb-btn-spinning { position: relative; color: transparent; }
.fcvb-form-submit-row button.fcvb-btn-spinning::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 3px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fcvb-spin .7s linear infinite;
}
@keyframes fcvb-spin { to { transform: rotate(360deg); } }
.fcvb-submit-status { display: block; margin-top: 10px; font-size: 13px; color: #555; }
.fcvb-form-errors {
	background: #fdecea;
	border: 1px solid #f5c6c3;
	color: #8a1f11;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 13px;
}

/* ---------------- "i" field-info boxes ---------------- */
.fcvb-field-info {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	background: #f2f7fb;
	border: 1px solid #dbe8f2;
	border-radius: 4px;
	padding: 8px 10px;
	margin: 6px 0 10px;
	font-size: 12px;
	color: #42607a;
	line-height: 1.55;
}
.fcvb-info-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 50%;
	background: #5b8bb0;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	font-style: normal;
	text-align: center;
}

/* ---------------- Photo crop / background-removal tools ---------------- */
.fcvb-photo-field-single { margin-bottom: 16px; }
.fcvb-photo-field-single:last-child { margin-bottom: 0; }
.fcvb-photo-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
.fcvb-photo-preview-wrap:empty { display: none; }
.fcvb-photo-preview {
	max-width: 90px;
	max-height: 90px;
	border-radius: 4px;
	border: 1px solid #ddd;
	object-fit: cover;
	display: block;
	background:
		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
		linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee);
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
}
.fcvb-photo-tool-btn {
	background: #fff;
	border: 1px solid #c7d3dc;
	border-radius: 3px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #345;
	cursor: pointer;
}
.fcvb-photo-tool-btn:hover:not(:disabled) { background: #f2f7fb; border-color: #5b8bb0; }
.fcvb-photo-tool-btn:disabled { opacity: .45; cursor: not-allowed; }
.fcvb-photo-status { font-size: 11px; color: #888; }
.fcvb-photo-status.is-error { color: #b3261e; }
.fcvb-photo-status.is-busy { color: #5b8bb0; }

.fcvb-crop-modal {
	position: fixed;
	inset: 0;
	background: rgba(20, 24, 28, .78);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.fcvb-crop-modal[hidden] { display: none; }
.fcvb-crop-modal-inner {
	background: #fff;
	border-radius: 6px;
	width: 100%;
	max-width: 720px;
	max-height: 92vh;
	overflow: auto;
	padding: 20px;
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
.fcvb-crop-modal-inner h4 { margin: 0 0 8px; color: var(--fcvb-red, #ED1B21); font-size: 16px; }
/* max-height is repeated on the <img> itself (not just the wrapper) so
   the crop tool's initial working area is never taller than what's
   actually visible here -- otherwise, for a tall photo, the crop box's
   lower drag-handles could end up positioned below the visible area
   (clipped away by this wrapper's overflow:hidden) and be impossible to
   grab. Both values must stay in sync if either one changes. */
.fcvb-crop-image-wrap {
	max-height: 65vh;
	overflow: hidden;
	background: #2a2a2a;
}
.fcvb-crop-image-wrap img { display: block; max-width: 100%; max-height: 65vh; }
.fcvb-crop-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.fcvb-crop-actions button {
	padding: 9px 18px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.fcvb-crop-cancel { background: #eee; border: 1px solid #ccc; color: #333; }
.fcvb-crop-apply { background: var(--fcvb-red, #ED1B21); border: none; color: #fff; }

/* ---------------- Print ----------------
   Each .fcvb-page still always starts a new physical page (so, for
   example, Photo Showcase -- its own .fcvb-page-2b div -- always
   lands on a fresh page, never sharing one with Career/National Team
   or getting clipped by it). What changed here: a page no longer gets
   forced to a fixed 297mm (a full A4 sheet) with its footer pinned to
   that fixed bottom edge -- a page with less content (a short Career
   history, only a couple of photos, etc.) now only takes up as much
   of the page as its content actually needs, with the grey footer
   band following directly after it instead of leaving a large empty
   gap above a footer stranded at the very bottom of the sheet. */
@media print {
	.no-print { display: none !important; }
	html, body.fcvb-body { background: #fff; }
	.fcvb-pages { margin: 0; max-width: none; }
	.fcvb-page {
		box-shadow: none;
		margin: 0;
		page-break-after: always;
		width: auto;
		min-height: 0;
		height: auto;
		overflow: visible;
	}
	.fcvb-page:last-child { page-break-after: auto; }
	.fcvb-footer {
		position: static;
		margin-top: 6mm;
	}
	/* Never split a table row, the photo grid, or a whole named
	   section awkwardly across two physical pages -- if one of these
	   doesn't fit in the room left on the current page, it moves to
	   the next page as a whole rather than being cut mid-way. */
	.fcvb-section,
	table.fcvb-table tr,
	table.fcvb-specs tr,
	.fcvb-showcase {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	@page { size: A4; margin: 0; }
	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
}