/* ============================================================
   שנת מצווה - מערכת עיצוב פרונט (RTL)
   "ספר מזכרת": דיו כחול-לילה + זהב עלה על נייר שמנת.
   כותרות: Rubik | גוף: Heebo (נטענים מהתבנית)

   הטוקנים (‎:root) חיים ב-themes/bmv-theme/assets/tokens.css
   ונטענים לפני הקובץ הזה דרך תלות ‎bmv-tokens ב-BMV_Assets::frontend().
   ============================================================ */

/* ---------- בסיס ---------- */

.bmv-dashboard,
.bmv-station-page,
.bmv-auth,
.bmv-profile {
	font-family: var(--bmv-font);
	color: var(--bmv-text);
	line-height: 1.7;
}

.bmv-container {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 20px 64px;
}

.bmv-dashboard h1,
.bmv-station-page h1,
.bmv-auth h1,
.bmv-profile h1 {
	font-family: var(--bmv-font-display);
	font-size: 1.9rem;
	font-weight: 900;
	margin: 0 0 4px;
	color: var(--bmv-primary);
}

/* ---------- כפתורים ---------- */

.bmv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--bmv-font);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.bmv-btn:active {
	transform: translateY(1px);
}

.bmv-btn:focus-visible {
	outline: 3px solid var(--bmv-gold);
	outline-offset: 2px;
}

.bmv-btn-primary {
	background: var(--bmv-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(28, 42, 82, .25);
}

.bmv-btn-primary:hover {
	background: var(--bmv-primary-dark);
	color: #fff;
	box-shadow: 0 7px 20px rgba(28, 42, 82, .32);
}

.bmv-btn-secondary {
	background: var(--bmv-gold-foil);
	color: var(--bmv-primary-dark);
	border-color: transparent;
	box-shadow: 0 3px 10px rgba(154, 122, 36, .3);
}

.bmv-btn-secondary:hover {
	background: var(--bmv-gold);
	color: var(--bmv-primary-dark);
}

.bmv-btn-ghost {
	background: transparent;
	color: var(--bmv-primary);
	border-color: var(--bmv-border);
}

.bmv-btn-ghost:hover {
	border-color: var(--bmv-primary);
}

.bmv-btn-lg {
	padding: 14px 34px;
	font-size: 1.1rem;
}

.bmv-btn-block {
	width: 100%;
}

.bmv-btn-disabled {
	background: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
}

/* ---------- הודעות ---------- */

.bmv-notice {
	padding: 14px 18px;
	border-radius: var(--bmv-radius-sm);
	margin: 0 0 20px;
	border: 1px solid transparent;
	font-size: .95rem;
}

.bmv-notice ul {
	margin: 6px 0 0;
	padding-inline-start: 20px;
}

.bmv-notice-success {
	background: var(--bmv-success-bg);
	border-color: #a7f3d0;
	color: #065f46;
}

.bmv-notice-warn,
.bmv-notice-info {
	background: var(--bmv-warn-bg);
	border-color: #fde68a;
	color: #92400e;
}

.bmv-notice-error {
	background: var(--bmv-error-bg);
	border-color: #fecaca;
	color: #991b1b;
}

/* ---------- דשבורד ---------- */

.bmv-dash-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.bmv-dash-sub {
	margin: 0;
	color: var(--bmv-text-muted);
}

.bmv-dash-actions {
	display: flex;
	gap: 8px;
}

.bmv-progress-wrap {
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow);
	padding: 18px 22px;
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}

.bmv-progress-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--bmv-gold-foil);
}

.bmv-progress-info {
	display: flex;
	justify-content: space-between;
	font-size: .9rem;
	color: var(--bmv-text-muted);
	margin-bottom: 10px;
}

.bmv-progress-bar {
	height: 12px;
	background: var(--bmv-bg);
	border: 1px solid var(--bmv-border);
	border-radius: 999px;
	overflow: hidden;
}

.bmv-progress-bar span {
	display: block;
	height: 100%;
	background: var(--bmv-gold-foil);
	border-radius: 999px;
	transition: width .6s ease;
	box-shadow: 0 0 6px rgba(193, 154, 51, .55);
}

.bmv-complete {
	position: relative;
	background:
		radial-gradient(ellipse 80% 90% at 50% 0%, rgba(193, 154, 51, .14), transparent 60%),
		var(--bmv-card);
	border: 1.5px solid var(--bmv-gold);
	border-radius: var(--bmv-radius);
	padding: 32px 28px;
	text-align: center;
	margin-bottom: 28px;
	box-shadow: var(--bmv-shadow-lg);
	overflow: hidden;
}

.bmv-complete::before {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid var(--bmv-gold);
	border-radius: calc(var(--bmv-radius) - 5px);
	opacity: .45;
	pointer-events: none;
}

.bmv-complete-art {
	margin: 0 auto 4px;
}

.bmv-complete h2 {
	font-family: var(--bmv-font-display);
	font-weight: 900;
	color: var(--bmv-gold-deep);
	margin: 8px 0;
}

/* ---------- גריד תחנות ---------- */

.bmv-stations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 18px;
}

.bmv-station-card {
	position: relative;
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 4px solid var(--bmv-primary);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.bmv-station-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--bmv-shadow-lg);
	border-color: var(--bmv-gold);
	border-top-color: var(--bmv-primary);
}

.bmv-state-locked {
	opacity: .65;
	border-top-color: #cfc8b8;
}

.bmv-state-locked:hover {
	transform: none;
	box-shadow: var(--bmv-shadow);
}

.bmv-state-submitted {
	border-top-color: var(--bmv-success);
}

.bmv-station-num {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bmv-gold-foil);
	color: var(--bmv-primary-dark);
	font-family: var(--bmv-font-display);
	font-size: .9rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(154, 122, 36, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.bmv-state-locked .bmv-station-num {
	background: #cfc8b8;
	color: #43455a;
	box-shadow: none;
}

/* מדליון אייקון - עיגול דיו, טבעת זהב, אייקון קו מוזהב */
.bmv-medallion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #2a3a6b, var(--bmv-primary-dark) 72%);
	border: 2px solid var(--bmv-gold);
	box-shadow: 0 3px 10px rgba(28, 42, 82, .28), inset 0 0 0 1.5px rgba(232, 207, 127, .22);
	color: #e8cf7f;
	flex-shrink: 0;
}

.bmv-medallion svg {
	width: 28px;
	height: 28px;
}

.bmv-medallion-sm {
	width: 48px;
	height: 48px;
}

.bmv-medallion-sm svg {
	width: 24px;
	height: 24px;
}

.bmv-medallion-lg {
	width: 84px;
	height: 84px;
	border-width: 2.5px;
}

.bmv-medallion-lg svg {
	width: 40px;
	height: 40px;
}

.bmv-state-locked .bmv-medallion {
	background: #cfc8b8;
	border-color: #b8b0a0;
	color: #6d6f80;
	box-shadow: none;
}

.bmv-station-title {
	font-size: 1.1rem;
	margin: 0;
	color: var(--bmv-text);
}

.bmv-station-subtitle {
	margin: 0;
	font-size: .9rem;
	color: var(--bmv-text-muted);
}

.bmv-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	width: fit-content;
}

.bmv-badge-available {
	background: var(--bmv-j-denim-soft);
	color: var(--bmv-ink-deep);
}

.bmv-badge-submitted {
	background: var(--bmv-success-bg);
	color: var(--bmv-success);
}

.bmv-badge-locked {
	background: #f3f4f6;
	color: #555e6d;
}

.bmv-admin-note {
	background: var(--bmv-warn-bg);
	border: 1px solid #fde68a;
	border-radius: var(--bmv-radius-sm);
	padding: 10px 12px;
	font-size: .85rem;
	color: #92400e;
}

.bmv-station-actions {
	margin-top: auto;
	padding-top: 12px;
}

/* ---------- עמוד תחנה ---------- */

.bmv-breadcrumb {
	margin-bottom: 18px;
	font-size: .9rem;
}

.bmv-breadcrumb a {
	color: var(--bmv-primary);
	text-decoration: none;
}

.bmv-station-header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}

.bmv-station-art {
	flex-shrink: 0;
	width: 130px;
	height: 130px;
}

/* ---------- ברכת הגיבורה בדשבורד ---------- */

.bmv-dash-hello {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

/* ---------- פאנל "ברוכים הבאים" ---------- */

.bmv-welcome {
	display: flex;
	align-items: center;
	gap: 20px;
	background:
		radial-gradient(ellipse 70% 90% at 100% 0%, rgba(193, 154, 51, .12), transparent 60%),
		var(--bmv-card);
	border: 1px solid var(--bmv-gold);
	border-radius: var(--bmv-radius);
	padding: 22px 24px;
	margin-bottom: 24px;
	box-shadow: var(--bmv-shadow);
}

.bmv-welcome-art {
	flex-shrink: 0;
	width: 110px;
	height: 110px;
}

.bmv-welcome-body {
	flex: 1;
	min-width: 0;
}

.bmv-welcome-lead {
	font-family: var(--bmv-font-display);
	font-weight: 700;
	font-size: var(--bmv-t-xl);
	color: var(--bmv-ink);
	margin: 0 0 4px;
}

.bmv-welcome-body p {
	margin: 0 0 12px;
	color: var(--bmv-text-muted);
}

.bmv-welcome-body .bmv-btn {
	margin-top: 2px;
}

@media (max-width: 560px) {
	.bmv-welcome {
		flex-direction: column;
		text-align: center;
	}
}

.bmv-station-content {
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow);
	padding: 24px 28px;
	margin-bottom: 24px;
}

.bmv-station-content h3,
.bmv-station-content h4 {
	font-family: var(--bmv-font-display);
}

.bmv-station-content h3 {
	color: var(--bmv-primary);
	margin-top: 0;
}

.bmv-submission-status {
	border-radius: var(--bmv-radius-sm);
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: .95rem;
}

.bmv-submission-status.bmv-status-submitted {
	background: var(--bmv-j-denim-soft);
	color: var(--bmv-ink-deep);
}

.bmv-submission-status.bmv-status-reviewed {
	background: var(--bmv-success-bg);
	color: #065f46;
}

.bmv-submission-status.bmv-status-needs_fix {
	background: var(--bmv-warn-bg);
	color: #92400e;
}

/* ---------- תצוגת מזכרת (הגשה שהושלמה) ---------- */

.bmv-showcase {
	position: relative;
	background:
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(193, 154, 51, .07), transparent 60%),
		var(--bmv-card);
	border: 1.5px solid var(--bmv-gold);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow-lg);
	padding: 30px 32px 26px;
	margin-bottom: 26px;
	overflow: hidden;
}

.bmv-showcase::before {
	content: '';
	position: absolute;
	inset: 9px;
	border: 1px solid var(--bmv-gold);
	border-radius: calc(var(--bmv-radius) - 5px);
	opacity: .4;
	pointer-events: none;
}

.bmv-showcase-head {
	text-align: center;
	margin-bottom: 22px;
}

.bmv-showcase-head h2 {
	font-family: var(--bmv-font-display);
	font-weight: 700;
	color: var(--bmv-primary);
	margin: 0 0 4px;
	font-size: 1.4rem;
}

.bmv-showcase-head p {
	margin: 0;
	color: var(--bmv-text-muted);
	font-size: .9rem;
}

.bmv-showcase-head::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	margin: 14px auto 0;
	background: var(--bmv-gold-foil);
}

.bmv-showcase-item {
	margin-bottom: 20px;
}

.bmv-showcase-item:last-child {
	margin-bottom: 0;
}

.bmv-showcase-label {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--bmv-gold-deep);
	margin-bottom: 6px;
}

.bmv-showcase-value {
	background: var(--bmv-bg);
	border: 1px solid var(--bmv-border);
	border-inline-start: 3px solid var(--bmv-gold);
	border-radius: var(--bmv-radius-sm);
	padding: 14px 18px;
	line-height: 1.85;
	white-space: normal;
}

.bmv-showcase-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bmv-showcase-photo {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: var(--bmv-radius-sm);
	overflow: hidden;
	border: 3px solid #fff;
	box-shadow: var(--bmv-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.bmv-showcase-photo:hover {
	transform: scale(1.03) rotate(-1deg);
	box-shadow: var(--bmv-shadow-lg);
}

.bmv-showcase-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bmv-showcase-doc {
	width: 100%;
}

.bmv-showcase-doc iframe {
	width: 100%;
	height: 420px;
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	background: #fff;
}

.bmv-showcase-doc-link {
	display: inline-block;
	margin-top: 6px;
	font-size: .88rem;
	color: var(--bmv-primary);
}

.bmv-showcase-attachment {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--bmv-bg);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	padding: 12px 18px;
	text-decoration: none;
	color: var(--bmv-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bmv-showcase-attachment:hover {
	border-color: var(--bmv-gold);
	box-shadow: var(--bmv-shadow);
}

.bmv-showcase-attachment-icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	color: var(--bmv-gold-deep);
}

.bmv-showcase-attachment-icon svg {
	width: 100%;
	height: 100%;
}

.bmv-showcase-attachment small {
	display: block;
	color: var(--bmv-text-muted);
}

/* טופס עריכה מתקפל אחרי הגשה */
.bmv-edit-details {
	margin-top: 4px;
}

.bmv-edit-details > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: 999px;
	border: 1.5px solid var(--bmv-border);
	background: var(--bmv-card);
	font-weight: 600;
	color: var(--bmv-primary);
	transition: border-color .15s ease;
	margin-bottom: 16px;
}

.bmv-edit-details > summary::-webkit-details-marker {
	display: none;
}

.bmv-edit-details > summary::before {
	content: '✎';
	color: var(--bmv-gold-deep);
}

.bmv-edit-details > summary:hover {
	border-color: var(--bmv-gold);
}

.bmv-edit-details[open] > summary {
	border-color: var(--bmv-gold);
}

/* ---------- טפסים ---------- */

.bmv-form {
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow);
	padding: 26px 28px;
	position: relative;
	overflow: hidden;
}

.bmv-form::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--bmv-gold-foil);
}

.bmv-form fieldset {
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	padding: 18px;
	margin: 0 0 20px;
}

.bmv-form legend {
	font-weight: 700;
	color: var(--bmv-primary);
	padding: 0 8px;
}

.bmv-field {
	margin-bottom: 16px;
}

.bmv-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.bmv-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: .95rem;
}

.bmv-req {
	color: var(--bmv-error);
	margin-inline-start: 2px;
}

.bmv-field input[type="text"],
.bmv-field input[type="email"],
.bmv-field input[type="tel"],
.bmv-field input[type="password"],
.bmv-field input[type="number"],
.bmv-field input[type="date"],
.bmv-field input[type="url"],
.bmv-field select,
.bmv-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	font-family: var(--bmv-font);
	font-size: 1rem;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}

.bmv-field input:focus,
.bmv-field select:focus,
.bmv-field textarea:focus {
	outline: none;
	border-color: var(--bmv-gold);
	box-shadow: 0 0 0 3px rgba(193, 154, 51, .18);
}

.bmv-field input:disabled {
	background: #f3f4f6;
	color: var(--bmv-text-muted);
}

.bmv-field-help {
	margin: 5px 0 0;
	font-size: .82rem;
	color: var(--bmv-text-muted);
}

.bmv-field input[type="file"] {
	width: 100%;
	padding: 12px;
	border: 2px dashed var(--bmv-gold);
	border-radius: var(--bmv-radius-sm);
	background: var(--bmv-bg);
	cursor: pointer;
}

.bmv-file-list {
	font-size: .85rem;
	color: var(--bmv-text-muted);
	margin-top: 6px;
}

.bmv-existing-files {
	margin-top: 10px;
	background: #f8fafc;
	border-radius: var(--bmv-radius-sm);
	padding: 10px 14px;
	font-size: .88rem;
}

.bmv-existing-files ul {
	margin: 6px 0 0;
	padding-inline-start: 18px;
}

.bmv-radio-group {
	display: flex;
	gap: 14px;
}

.bmv-radio,
.bmv-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400 !important;
	cursor: pointer;
}

.bmv-radio input,
.bmv-checkbox input {
	width: 18px;
	height: 18px;
	accent-color: var(--bmv-primary);
}

.bmv-hp {
	position: absolute;
	right: -9999px;
	top: -9999px;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.bmv-form-actions {
	margin-top: 8px;
}

/* ---------- אימות (הרשמה/התחברות) ---------- */

.bmv-auth {
	display: flex;
	justify-content: center;
	padding: 32px 16px 64px;
}

.bmv-auth-card {
	width: 100%;
	max-width: 560px;
}

.bmv-auth-card > h1 {
	text-align: center;
}

.bmv-auth-sub {
	text-align: center;
	color: var(--bmv-text-muted);
	margin-top: 0;
}

.bmv-auth-alt {
	text-align: center;
	margin-top: 18px;
	font-size: .92rem;
	color: var(--bmv-text-muted);
}

.bmv-auth-alt a {
	color: var(--bmv-primary);
}

/* ---------- פרופיל ---------- */

.bmv-profile {
	max-width: 720px;
}

.bmv-profile-meta {
	margin-top: 20px;
	font-size: .88rem;
	color: var(--bmv-text-muted);
}

/* ---------- רספונסיבי ---------- */

@media (max-width: 640px) {
	.bmv-field-row {
		grid-template-columns: 1fr;
	}

	.bmv-dash-header {
		flex-direction: column;
	}

	.bmv-station-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.bmv-form {
		padding: 20px 16px;
	}
}

/* ============================================================
   מסך חגיגה - הרגע שבין משימה למשימה
   ============================================================ */

.bmv-celebrate {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(193, 154, 51, .13), transparent 62%),
		var(--bmv-card);
	border: 1.5px solid var(--bmv-gold);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow-lg);
	padding: var(--bmv-s-9) var(--bmv-s-7);
	margin-bottom: var(--bmv-s-8);
}

/* מסגרת זהב כפולה - אותה שפה של כרטיס הסיום ועטיפת הספר */
.bmv-celebrate::before {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid var(--bmv-gold);
	border-radius: calc(var(--bmv-radius) - 5px);
	opacity: .4;
	pointer-events: none;
}

.bmv-celebrate-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 56px);
	max-width: 900px;
	margin: 0 auto;
}

/* ---------- הדמות + טבעת ההתקדמות ---------- */

.bmv-celebrate-figure {
	position: relative;
	flex-shrink: 0;
	width: clamp(190px, 30vw, 260px);
}

.bmv-celebrate-figure .bmv-art {
	width: 100%;
	height: auto;
}

/* כשאין עדיין איור - הטבעת לבדה נושאת את הרגע */
.bmv-celebrate-figure:not(.has-art) {
	width: 160px;
}

.bmv-ring {
	position: absolute;
	inset-block-end: -10px;
	inset-inline-end: -10px;
	width: 92px;
	height: 92px;
}

.bmv-celebrate-figure:not(.has-art) .bmv-ring {
	position: static;
	width: 160px;
	height: 160px;
}

.bmv-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.bmv-ring-track {
	fill: var(--bmv-card);
	stroke: var(--bmv-border);
	stroke-width: 9;
}

.bmv-ring-fill {
	fill: none;
	stroke: var(--bmv-gold);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: var(--circ);
	stroke-dashoffset: var(--off);
}

.bmv-ring-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bmv-font-display);
	font-weight: 700;
	font-size: var(--bmv-t-sm);
	color: var(--bmv-ink);
}

.bmv-celebrate-figure:not(.has-art) .bmv-ring-label {
	font-size: var(--bmv-t-2xl);
}

/* ---------- הטקסט ---------- */

.bmv-celebrate-body {
	min-width: 0;
}

.bmv-celebrate-kicker {
	margin: 0 0 var(--bmv-s-2);
	font-size: var(--bmv-t-sm);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--bmv-gold-deep);
}

.bmv-celebrate h1 {
	margin: 0 0 var(--bmv-s-3);
	font-family: var(--bmv-font-display);
	font-weight: 900;
	font-size: var(--bmv-t-3xl);
	letter-spacing: -.02em;
	color: var(--bmv-ink);
	text-wrap: balance;
}

/* הכותרת מקבלת פוקוס תכנותי כדי שקוראי מסך יכריזו עליה. היא לא
   אינטראקטיבית ולא נמצאת בסדר ה-Tab, ולכן טבעת פוקוס נראית רק מבלבלת -
   ההכרזה היא כל המטרה. */
.bmv-celebrate h1:focus,
.bmv-celebrate h1:focus-visible {
	outline: none;
}

.bmv-celebrate-lead {
	margin: 0 0 var(--bmv-s-6);
	color: var(--bmv-text-muted);
}

/* ---------- כרטיס התחנה הבאה ---------- */

.bmv-next-card {
	display: flex;
	align-items: center;
	gap: var(--bmv-s-4);
	padding: var(--bmv-s-4) var(--bmv-s-5);
	background: var(--bmv-bg);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

a.bmv-next-card:hover {
	border-color: var(--bmv-gold);
	transform: translateY(-2px);
	box-shadow: var(--bmv-shadow);
}

.bmv-next-card .bmv-art,
.bmv-next-card .bmv-medallion {
	flex-shrink: 0;
}

.bmv-next-body {
	flex: 1;
	min-width: 0;
}

.bmv-next-eyebrow {
	display: block;
	font-size: var(--bmv-t-xs);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--bmv-gold-deep);
	margin-bottom: 2px;
}

.bmv-next-card h2 {
	margin: 0;
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-lg);
	font-weight: 700;
	color: var(--bmv-ink);
}

.bmv-next-card p {
	margin: 2px 0 0;
	font-size: var(--bmv-t-sm);
	color: var(--bmv-text-muted);
}

.bmv-next-go {
	flex-shrink: 0;
	font-size: 1.4rem;
	color: var(--bmv-gold);
	transition: transform .2s ease;
}

a.bmv-next-card:hover .bmv-next-go {
	transform: translateX(-4px);
}

.bmv-next-card.is-book {
	background: var(--bmv-gold-light);
	border-color: var(--bmv-gold);
}

.bmv-celebrate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bmv-s-3);
	margin-top: var(--bmv-s-5);
}

/* כשחוגגים - שאר העמוד מתרחק ומתעמעם מעט */
.bmv-station-recap {
	margin: var(--bmv-s-6) 0 var(--bmv-s-3);
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-lg);
	font-weight: 700;
	color: var(--bmv-text-muted);
}

.bmv-celebrating .bmv-station-recap {
	margin-top: var(--bmv-s-9);
}

.bmv-stations-title {
	margin: var(--bmv-s-8) 0 var(--bmv-s-4);
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-2xl);
	color: var(--bmv-ink);
}

.bmv-celebrating .bmv-edit-details {
	opacity: .75;
}

/* ---------- קונפטי ---------- */

.bmv-confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.bmv-confetti span {
	position: absolute;
	top: -24px;
	inset-inline-start: var(--x);
	width: 3px;
	height: 10px;
	border-radius: 1px;
	background: var(--c);
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.bmv-confetti span {
		animation: bmv-confetti-fall var(--t) cubic-bezier(.35, .1, .5, 1) var(--d) forwards;
	}

	.bmv-celebrate-figure .bmv-art,
	.bmv-celebrate-figure .bmv-ring {
		animation: bmv-pop .5s cubic-bezier(.2, .9, .3, 1.1) both;
	}

	.bmv-ring-fill {
		animation: bmv-ring-draw .9s ease-out .2s both;
	}
}

@keyframes bmv-confetti-fall {
	0% {
		opacity: 0;
		transform: translate3d(0, -20px, 0) rotate(0deg);
	}

	12% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(0, 420px, 0) rotate(var(--r));
	}
}

/* keyframes מקומיים לתוסף - הגיליון הזה לא תלוי ב-bmv-rise של התבנית */
@keyframes bmv-pop {
	from {
		opacity: 0;
		transform: scale(.94);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bmv-ring-draw {
	from {
		stroke-dashoffset: var(--circ);
	}

	to {
		stroke-dashoffset: var(--off);
	}
}

@media (max-width: 640px) {
	.bmv-celebrate {
		padding: var(--bmv-s-7) var(--bmv-s-5);
	}

	.bmv-celebrate-inner {
		flex-direction: column;
		text-align: center;
	}

	.bmv-celebrate-figure {
		width: clamp(160px, 55vw, 220px);
	}

	.bmv-next-card {
		text-align: start;
	}

	.bmv-celebrate-actions {
		justify-content: center;
	}
}

/* ---------- נגישות ---------- */

@media (prefers-reduced-motion: reduce) {
	.bmv-btn,
	.bmv-station-card,
	.bmv-progress-bar span {
		transition: none;
	}

	/* הקונפטי נעלם לגמרי; הטבעת מצוירת מיד במצבה הסופי */
	.bmv-confetti span {
		display: none;
	}
}

/* ============================================================
   המעטפה - שני מכתבים ובורר החוויות
   ראה docs/VOICE.md. הקול של הטקסט הוא שורות קצרות ושבירות
   מכוונות, ולכן line-height נדיב ו-max-width צר הם חלק מהתוכן
   ולא קישוט: מכתב שנפרש על כל רוחב המסך מפסיק להיקרא כמכתב.
   ============================================================ */

.bmv-station-circle {
	margin: 0 0 var(--bmv-s-1);
	font-size: var(--bmv-t-xs);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--bmv-gold-deep);
}

/* ---------- המכתבים ---------- */

.bmv-letter {
	margin: var(--bmv-s-7) 0;
	padding: var(--bmv-s-7) var(--bmv-s-6);
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow);
}

.bmv-letter > h2 {
	margin: 0 0 var(--bmv-s-4);
	font-size: var(--bmv-t-2xl);
}

.bmv-letter-body {
	max-width: 62ch;
	line-height: 1.85;
}

.bmv-letter-body p {
	margin: 0 0 var(--bmv-s-5);
}

.bmv-letter-body p:last-child {
	margin-bottom: 0;
}

/* המכתב לילד/ה הוא הפריט שנכנס למעטפה - מסגרת זהב מסמנת אותו ככזה. */
.bmv-letter-child {
	border: 1.5px solid var(--bmv-gold);
	box-shadow: var(--bmv-shadow-lg);
}

.bmv-letter-note,
.bmv-letter-lock-note {
	margin: 0 0 var(--bmv-s-5);
	font-size: var(--bmv-t-sm);
	color: var(--bmv-text-muted);
}

.bmv-letter-locked {
	border-style: dashed;
	background: var(--bmv-paper-deep);
	box-shadow: none;
}

/* ---------- הריבוע: הבחירה של ההורים בתוך המכתב ---------- */

.bmv-choice-block {
	margin: var(--bmv-s-6) 0;
	padding: var(--bmv-s-5);
	background: var(--bmv-bg);
	border: 1px solid var(--bmv-gold);
	border-radius: var(--bmv-radius-sm);
}

.bmv-choice-block-label {
	display: block;
	margin-bottom: var(--bmv-s-1);
	font-size: var(--bmv-t-xs);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--bmv-gold-deep);
}

.bmv-choice-block strong {
	display: block;
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-lg);
	color: var(--bmv-primary);
}

.bmv-choice-block p {
	margin: var(--bmv-s-2) 0 0;
}

/* ---------- בורר החוויות ---------- */

.bmv-choices {
	margin: var(--bmv-s-7) 0;
	padding: var(--bmv-s-6);
	background: var(--bmv-paper-deep);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
}

.bmv-choices-head h2 {
	margin: 0 0 var(--bmv-s-2);
	font-size: var(--bmv-t-2xl);
}

.bmv-choices-head p {
	margin: 0 0 var(--bmv-s-5);
	color: var(--bmv-text-muted);
}

.bmv-chosen-summary {
	margin-bottom: var(--bmv-s-5);
	padding: var(--bmv-s-5);
	background: var(--bmv-card);
	border-inline-start: 3px solid var(--bmv-gold);
	border-radius: var(--bmv-radius-sm);
}

.bmv-chosen-label {
	display: block;
	margin-bottom: var(--bmv-s-1);
	font-size: var(--bmv-t-xs);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--bmv-gold-deep);
}

.bmv-chosen-title {
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-lg);
}

.bmv-chosen-body {
	margin: var(--bmv-s-2) 0 0;
	color: var(--bmv-text-muted);
}

.bmv-choices-details > summary {
	cursor: pointer;
	padding: var(--bmv-s-2) 0;
	font-weight: 600;
	color: var(--bmv-primary);
}

.bmv-choice-list {
	margin: var(--bmv-s-4) 0 var(--bmv-s-5);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--bmv-s-3);
}

.bmv-choice label {
	display: flex;
	gap: var(--bmv-s-3);
	align-items: flex-start;
	padding: var(--bmv-s-4);
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.bmv-choice label:hover {
	border-color: var(--bmv-gold);
}

/* :has נתמך בכל הדפדפנים הירוקים; בלעדיו הכרטיס פשוט לא מודגש,
   וכפתור הרדיו עדיין מראה את הבחירה. */
.bmv-choice label:has(input:checked) {
	border-color: var(--bmv-gold);
	box-shadow: 0 0 0 1px var(--bmv-gold);
}

.bmv-choice label:has(input:focus-visible) {
	outline: 3px solid var(--bmv-gold);
	outline-offset: 2px;
}

.bmv-choice input[type="radio"] {
	margin-top: 5px;
	flex-shrink: 0;
}

.bmv-choice-text {
	display: block;
}

.bmv-choice-title {
	display: block;
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-lg);
	color: var(--bmv-primary);
}

.bmv-choice-body {
	display: block;
	margin-top: var(--bmv-s-1);
	color: var(--bmv-text-muted);
	line-height: 1.65;
}

.bmv-capture-lock-note {
	margin: var(--bmv-s-6) 0;
	padding: var(--bmv-s-4);
	background: var(--bmv-paper-deep);
	border: 1px dashed var(--bmv-border);
	border-radius: var(--bmv-radius-sm);
	color: var(--bmv-text-muted);
	text-align: center;
}

@media (max-width: 640px) {
	.bmv-letter {
		padding: var(--bmv-s-5) var(--bmv-s-4);
	}

	.bmv-choices {
		padding: var(--bmv-s-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmv-choice label {
		transition: none;
	}
}

/* המכתב לילד/ה נועד להדפסה - כל השאר נעלם. */
@media print {
	.bmv-breadcrumb,
	.bmv-choices,
	.bmv-letter-parent,
	.bmv-letter-note,
	.bmv-form,
	.bmv-edit-details,
	.bmv-showcase,
	.bmv-submission-status {
		display: none !important;
	}

	.bmv-letter-child {
		border: none;
		box-shadow: none;
		padding: 0;
	}
}

/* ============================================================
   המעטפה - הקונספט המרכזי של המוצר.

   כרטיס התחנה הוא מעטפה סגורה. לחיצה פותחת את הדש, שולפת את
   הגיליון שמקופל בפנים, ומעבירה לדף. עמוד התחנה ממשיך את
   התנועה בפתיחת המכתב.

   שלושה דברים קריטיים לכך שזה ייראה כמו מעטפה ולא כמו גליץ':
   1. perspective על הכרטיס. בלעדיו rotateX מתרנדר שטוח, והדש
      נראה כמו משולש שנמעך במקום דש שנפתח.
   2. אין overflow:hidden על הכרטיס. הדש מסתובב מעבר לקצה
      העליון והגיליון עף כלפי מעלה - שניהם נחתכו בלעדי זה.
   3. אין backface-visibility:hidden על הדש. הוא נעלם לגמרי
      אחרי 90 מעלות במקום להמשיך להסתובב מול העין.
   ============================================================ */

.bmv-envelope {
	--env-flap: 62px;

	position: relative;
	display: flex;
	flex-direction: column;
	padding: calc(var(--env-flap) + var(--bmv-s-4)) var(--bmv-s-5) var(--bmv-s-5);
	background: var(--bmv-card);
	border: 1px solid var(--bmv-border);
	border-radius: var(--bmv-radius);
	box-shadow: var(--bmv-shadow);
	isolation: isolate;

	/* בלי זה הדש מסתובב שטוח. ראה הערה 1 למעלה. */
	perspective: 900px;

	transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease;
}

/* הכרטיס כולו הוא יעד הלחיצה - חיוני במובייל, שם אף אחד לא
   מכוון לקישור קטן. הקישור עצמו נשאר יעד המקלדת והקורא מסך. */
.bmv-envelope.bmv-state-available,
.bmv-envelope.bmv-state-submitted {
	cursor: pointer;
}

/* ---------- הדש ---------- */

.bmv-envelope-flap {
	position: absolute;
	inset-inline: -1px;
	top: -1px;
	height: var(--env-flap);
	z-index: 3;
	background: var(--bmv-gold-foil);
	/* משולש: הקצה העליון מלא, ומתכנס לנקודה במרכז התחתון. */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: top center;
	transform: rotateX(0deg);
	transition: transform .5s cubic-bezier(.34, 1.06, .64, 1);
}

/* קו קיפול עדין שנותן לדש נפח */
.bmv-envelope-flap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(28, 42, 82, .12));
	clip-path: inherit;
}

/* ---------- הבול ---------- */

.bmv-envelope-stamp {
	position: absolute;
	top: calc(var(--env-flap) + var(--bmv-s-2));
	inset-inline-end: var(--bmv-s-5);
	z-index: 4;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	font-family: var(--bmv-font-display);
	font-size: var(--bmv-t-sm);
	font-weight: 700;
	color: var(--bmv-gold-deep);
	background: var(--bmv-bg);
	border: 1px dashed var(--bmv-gold);
	border-radius: 6px;
}

/* ---------- הגיליון שבפנים ---------- */

.bmv-envelope-sheet {
	position: absolute;
	inset-inline: 18%;
	top: calc(var(--env-flap) - 10px);
	height: 46px;
	z-index: 1;
	background: #fff;
	border: 1px solid var(--bmv-border);
	border-radius: 4px 4px 0 0;
	box-shadow: 0 -2px 8px rgba(28, 42, 82, .08);
	transform: translateY(0) scale(1);
	transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}

/* שורות "כתב" על הגיליון */
.bmv-envelope-sheet::after {
	content: "";
	position: absolute;
	inset: 10px 12px auto;
	height: 22px;
	background: repeating-linear-gradient(
		180deg,
		var(--bmv-border) 0 1px,
		transparent 1px 7px
	);
	opacity: .8;
}

.bmv-envelope-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--bmv-s-2);
	flex: 1;
	transition: opacity .3s ease, transform .3s ease;
}

.bmv-envelope-circle {
	margin: 0;
	font-size: var(--bmv-t-xs);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--bmv-gold-deep);
}

.bmv-envelope .bmv-station-actions {
	margin-top: auto;
	padding-top: var(--bmv-s-4);
}

/* ---------- מצבים ---------- */

/* רמז שאפשר לפתוח. hover לעכבר, active למגע. */
@media (hover: hover) {
	.bmv-envelope.bmv-state-available:hover,
	.bmv-envelope.bmv-state-submitted:hover {
		transform: translateY(-3px);
		box-shadow: var(--bmv-shadow-lg);
	}

	.bmv-envelope.bmv-state-available:hover .bmv-envelope-flap,
	.bmv-envelope.bmv-state-submitted:hover .bmv-envelope-flap {
		transform: rotateX(-26deg);
	}
}

.bmv-envelope.bmv-state-available:active,
.bmv-envelope.bmv-state-submitted:active {
	transform: scale(.985);
}

/* מעטפה חתומה: הדש נשאר סגור והמעטפה מעומעמת */
.bmv-envelope.bmv-state-locked {
	opacity: .62;
	filter: saturate(.5);
}

.bmv-envelope.bmv-state-locked .bmv-envelope-flap {
	background: var(--bmv-paper-deep);
}

/* חותם שעווה על מעטפה חתומה */
.bmv-envelope.bmv-state-locked .bmv-envelope-flap::before {
	content: "";
	position: absolute;
	top: calc(var(--env-flap) - 22px);
	inset-inline-start: calc(50% - 9px);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bmv-gold-deep);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

/* מעטפה שכבר נפתחה: הדש נשאר פתוח למחצה */
.bmv-envelope.bmv-state-submitted .bmv-envelope-flap {
	transform: rotateX(-155deg);
}

/* ---------- אנימציית הפתיחה ---------- */

.bmv-envelope.is-opening {
	z-index: 20;
	box-shadow: var(--bmv-shadow-lg);
	will-change: transform, opacity;
}

/* 1. הדש נפתח לאחור */
.bmv-envelope.is-opening .bmv-envelope-flap {
	transform: rotateX(-168deg);
	transition-duration: .4s;
}

/* 2. הגיליון נשלף החוצה כלפי מעלה וגדל קצת, אחרי שהדש כבר בדרך */
.bmv-envelope.is-opening .bmv-envelope-sheet {
	transform: translateY(-72%) scale(1.14);
	opacity: 0;
	transition:
		transform .52s cubic-bezier(.32, .9, .3, 1) .16s,
		opacity .3s ease .38s;
	will-change: transform, opacity;
}

/* 3. תוכן הכרטיס נסוג */
.bmv-envelope.is-opening .bmv-envelope-body {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .28s ease .14s, transform .28s ease .14s;
}

/* שאר העמוד נסוג כדי שהמעטפה הנפתחת תהיה במוקד */
.bmv-dashboard.is-opening-envelope .bmv-envelope:not(.is-opening),
.bmv-dashboard.is-opening-envelope .bmv-progress-wrap,
.bmv-dashboard.is-opening-envelope .bmv-dash-header,
.bmv-dashboard.is-opening-envelope .bmv-dash-hello,
.bmv-dashboard.is-opening-envelope .bmv-stations-title {
	opacity: .2;
	transition: opacity .32s ease;
}

/* ---------- המשך התנועה בעמוד התחנה ---------- */

/* המכתב "נפרש" - כאילו הוצא מהמעטפה ונפתח */
.bmv-letter-child {
	animation: bmv-unfold .6s cubic-bezier(.2, .8, .3, 1) both;
	transform-origin: top center;
}

@keyframes bmv-unfold {
	from {
		opacity: 0;
		transform: perspective(900px) rotateX(-30deg) translateY(-14px);
	}
	to {
		opacity: 1;
		transform: perspective(900px) rotateX(0) translateY(0);
	}
}

@media (max-width: 640px) {
	.bmv-envelope {
		--env-flap: 52px;
		perspective: 620px;
	}
}

/* ---------- נגישות ---------- */

@media (prefers-reduced-motion: reduce) {
	/*
	 * לא מבטלים את הפתיחה לגמרי. המעטפה היא הקונספט של המוצר ולא
	 * קישוט, ומשתמש שכיבה אנימציות במערכת ההפעלה עדיין צריך לקבל
	 * משוב שהלחיצה נקלטה. מה שמבטלים זו התנועה עצמה: אין סיבוב,
	 * אין הזזה, אין שינוי גודל. נשארת רק העלמה קצרה.
	 */
	.bmv-envelope,
	.bmv-envelope-flap,
	.bmv-envelope-sheet,
	.bmv-envelope-body {
		transition: none !important;
	}

	.bmv-letter-child {
		animation: none;
	}

	.bmv-envelope.bmv-state-available:active,
	.bmv-envelope.bmv-state-submitted:active {
		transform: none;
	}

	.bmv-envelope.is-opening .bmv-envelope-flap,
	.bmv-envelope.is-opening .bmv-envelope-sheet,
	.bmv-envelope.is-opening .bmv-envelope-body {
		transform: none;
	}

	.bmv-envelope.is-opening {
		opacity: .4;
		transition: opacity .16s linear !important;
	}
}

/* ---------- ראש המכתב + כפתור ההדפסה ---------- */

.bmv-letter-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bmv-s-4);
	flex-wrap: wrap;
}

.bmv-letter-head > div {
	flex: 1 1 260px;
}

.bmv-letter-head h2 {
	margin: 0 0 var(--bmv-s-1);
	font-size: var(--bmv-t-2xl);
}

.bmv-letter-print {
	flex-shrink: 0;
}
