/**
 * jbz-video-pitch — front-end styles.
 * Part of jbz-video-pitch v1.1.0. Generated by Claude (Code) 2026-07-30, updated 2026-08-25.
 * .jbzvp-player is shared by the local <video> element AND the Cloudflare
 * Stream <iframe> embed (border:0 added so the iframe doesn't grow a default
 * browser border the <video> never had).
 *
 * Scoped entirely under .jbzvp-* so nothing here can leak into the Astra theme
 * or an Elementor layout. Uses JobZone green (#2e7d32) as the accent. Light
 * surfaces only — these blocks sit on the site's normal white content areas, so
 * the ecosystem "no grey text on dark backgrounds" rule does not apply here;
 * body copy is near-black on white for maximum readability at a career fair on
 * a phone in daylight.
 */

.jbzvp-wrap,
.jbzvp-apply-box,
.jbzvp-profile-pitch {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #111827;
	box-sizing: border-box;
}

.jbzvp-wrap *,
.jbzvp-apply-box *,
.jbzvp-profile-pitch * { box-sizing: border-box; }

/* ------------------------------------------------------------------ notices */
.jbzvp-notice {
	background: #f1f5f9;
	border-left: 4px solid #2e7d32;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 15px;
}
.jbzvp-loading { color: #6b7280; font-size: 14px; margin: 0; }

/* -------------------------------------------------------------------- shell */
.jbzvp-wrap {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px;
	background: #fff;
	max-width: 900px;
}

.jbzvp-existing {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 18px;
}
.jbzvp-existing h4 { margin: 0 0 10px; font-size: 15px; color: #14532d; }
.jbzvp-meta { font-size: 13px; color: #4b5563; margin: 8px 0 10px; }

/* --------------------------------------------------------------------- tabs */
.jbzvp-tabs {
	display: flex;
	gap: 6px;
	border-bottom: 2px solid #e5e7eb;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.jbzvp-tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
}
.jbzvp-tab:hover { color: #111827; }
.jbzvp-tab.is-active { color: #2e7d32; border-bottom-color: #2e7d32; }

.jbzvp-hint { font-size: 14px; color: #4b5563; margin: 0 0 12px; line-height: 1.5; }

/* ------------------------------------------------------------------- stage */
.jbzvp-preview,
.jbzvp-player {
	width: 100%;
	max-width: 520px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 10px;
	border: 0;
	display: block;
}
/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
	.jbzvp-preview, .jbzvp-player { min-height: 240px; }
}

.jbzvp-timer {
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	color: #4b5563;
	margin: 8px 0;
}

.jbzvp-controls,
.jbzvp-saverow {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 10px 0;
}

/* ------------------------------------------------------------------ buttons */
.jbzvp-btn {
	background: #fff;
	color: #374151;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
}
.jbzvp-btn:hover:not(:disabled) { background: #f9fafb; }
.jbzvp-btn:disabled { opacity: .5; cursor: not-allowed; }

.jbzvp-btn-primary { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.jbzvp-btn-primary:hover:not(:disabled) { background: #276b2a; }

.jbzvp-btn-danger { color: #b91c1c; border-color: #fecaca; background: #fff; }
.jbzvp-btn-danger:hover:not(:disabled) { background: #fef2f2; }

/* ------------------------------------------------------------------- upload */
.jbzvp-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px dashed #cbd5e1;
	border-radius: 10px;
	padding: 28px 18px;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, background .15s;
}
.jbzvp-drop:hover { border-color: #2e7d32; background: #f8fdf8; }
.jbzvp-drop-title { font-size: 16px; font-weight: 700; color: #2e7d32; }
.jbzvp-drop-sub { font-size: 13px; color: #6b7280; }
.jbzvp-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ----------------------------------------------------------------- progress */
.jbzvp-prog {
	height: 8px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
	margin: 10px 0;
	max-width: 520px;
}
.jbzvp-prog-bar { height: 100%; width: 0; background: #2e7d32; transition: width .3s ease; }

/* ------------------------------------------------------------------- status */
.jbzvp-status { font-size: 14px; color: #4b5563; margin: 8px 0 0; min-height: 20px; line-height: 1.5; }
.jbzvp-status.is-ok { color: #15803d; font-weight: 600; }
.jbzvp-status.is-err { color: #b91c1c; font-weight: 600; }

/* -------------------------------------------------------------- teleprompter */
.jbzvp-tele {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}
.jbzvp-tele h4 { margin: 0 0 10px; font-size: 15px; }
.jbzvp-select,
.jbzvp-notes {
	width: 100%;
	max-width: 520px;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	padding: 9px 11px;
	font-size: 14px;
	font-family: inherit;
	color: #111827;
	background: #fff;
}
.jbzvp-notes { margin-top: 10px; resize: vertical; line-height: 1.5; }
.jbzvp-counter { font-size: 12px; color: #6b7280; margin-top: 5px; }
.jbzvp-notes-status { font-size: 12px; color: #15803d; min-height: 16px; margin-top: 4px; }

.jbzvp-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: #374151;
	margin-top: 8px;
	cursor: pointer;
}

/* -------------------------------------------------------------------- apply */
.jbzvp-apply {
	margin: 16px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.jbzvp-apply-guest,
.jbzvp-apply-none {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 9px;
	padding: 13px 16px;
	font-size: 14px;
	line-height: 1.55;
	color: #14532d;
}
.jbzvp-apply-box {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 9px;
	padding: 14px 16px;
}
.jbzvp-apply-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 11px;
	font-size: 15px;
	color: #14532d;
	flex-wrap: wrap;
}
.jbzvp-apply-msg { font-size: 13px; color: #4b5563; margin-top: 9px; min-height: 18px; line-height: 1.5; }
.jbzvp-apply-msg.is-ok { color: #15803d; font-weight: 600; }
.jbzvp-apply-msg.is-err { color: #b91c1c; font-weight: 600; }

.jbzvp-link { color: #2e7d32; font-weight: 600; }

/* ------------------------------------------------------------------ profile */
.jbzvp-profile-pitch { margin: 20px 0; }
.jbzvp-profile-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
	margin: 0 0 11px;
	flex-wrap: wrap;
}
.jbzvp-badge {
	background: #2e7d32;
	color: #fff;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.jbzvp-hidden-note {
	font-size: 13px;
	color: #92400e;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 6px;
	padding: 8px 11px;
	margin: 0 0 10px;
}
.jbzvp-profile-notes {
	margin-top: 12px;
	font-size: 14px;
	background: #f9fafb;
	border-radius: 8px;
	padding: 12px 14px;
	line-height: 1.55;
}
.jbzvp-profile-notes strong { display: block; margin-bottom: 5px; }
.jbzvp-profile-notes p { margin: 0; }

/* -------------------------------------------------------------------- small */
@media (max-width: 600px) {
	.jbzvp-wrap { padding: 14px; border-radius: 10px; }
	.jbzvp-tab { padding: 9px 12px; font-size: 14px; }
	.jbzvp-btn { width: 100%; text-align: center; }
	.jbzvp-controls .jbzvp-check { width: auto; }
}

/* ---------------------------------------------------------------------------
 * v1.3.0 — the PROFILE variant of the job-page block.
 *
 * Shown on vacancies the employer takes applications for on their own site or
 * inbox, where there is no JobZone application to attach a pitch to. Blue
 * rather than the green "attach" treatment, so the two read as different
 * actions at a glance. Server-rendered only — jbzvp.js never touches it.
 * ------------------------------------------------------------------------- */
.jbzvp-apply-profile {
	background: #f0f6ff;
	border: 1px solid #c7dbff;
	border-left: 5px solid #0F2555;
	border-radius: 9px;
	padding: 15px 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #13294b;
}
.jbzvp-apply-profile p { margin: 0 0 10px; }
.jbzvp-apply-profile p:last-child { margin-bottom: 0; }
.jbzvp-apply-h {
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 8px;
	color: #0F2555;
}
.jbzvp-why {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.jbzvp-why li {
	position: relative;
	padding-left: 20px;
	margin: 0 0 4px;
}
.jbzvp-why li:before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #2e7d32;
	font-weight: 700;
}
.jbzvp-apply-profile .jbzvp-btn {
	background: #0F2555;
	border-color: #0F2555;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
}
.jbzvp-apply-profile .jbzvp-btn:hover { background: #1b3a7a; border-color: #1b3a7a; color: #fff; }
.jbzvp-copy-url code {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	background: #fff;
	border: 1px solid #dbe6f7;
	border-radius: 5px;
	padding: 4px 7px;
	font-size: 12.5px;
}
.jbzvp-apply-none .jbzvp-apply-h { color: #14532d; }