@charset "utf-8";



/* ==== /css/lib/components/buttons.css ==== */


/*
	button — מערכת הכפתורים הגנרית.
	מבנה אחד, סקין דרך --my_* בלבד. וריאנט חדש = הצבת משתנים.
	<button class="button button--primary">...</button>
*/

@layer components{

.button{
	--my_background_color: var(--color_white);
	--my_color: var(--text_color1);
	--my_border_color: transparent;
	--my_font_size: var(--font_size_base);
	--my_padding_block: 0.55em;
	--my_padding_inline: 1.4em;
	--my_border_radius: var(--border_radius_base);
	--my_box_shadow: var(--shadow_2);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	font-family: inherit;
	font-size: var(--my_font_size);
	font-weight: var(--font_weight_semi_bold);
	line-height: var(--line_height_loose);
	text-decoration: none;
	cursor: pointer;

	padding-block: var(--my_padding_block);
	padding-inline: var(--my_padding_inline);
	color: var(--my_color);
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--my_border_radius);
	box-shadow: var(--my_box_shadow);

	transition: scale 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.button:hover{
	scale: 1.03;
	box-shadow: var(--shadow_3);
}

.button:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

.button:active{
	scale: 0.98;
}

.button__icon{
	font-size: 1.1em;
	line-height: 1;
}

/* --- מצבים --- */

.button:disabled,
.button.is_disabled{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1_brightest);
	--my_box_shadow: none;
	cursor: not-allowed;
	pointer-events: none;
	scale: 1;
}

/*
	מצב טעינה — נשלט ע"י api.setButtonLoading (js/api.js) על כל פעולה
	שעוברת בשכבת ה-api. הספינר נוסף כפסאודו-אלמנט כדי שלא נדרש שינוי
	ב-HTML של אף כפתור קיים.
*/
.button.is_loading{
	pointer-events: none;
	opacity: 0.72;
	position: relative;
}

.button.is_loading::after{
	content: "";
	inline-size: 1.05em;
	block-size: 1.05em;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: buttonSpinner 0.72s linear infinite;
	flex-shrink: 0;
}

@keyframes buttonSpinner{
	to{ rotate: 360deg; }
}

/* אנימציה מכובדת להעדפת מערכת — ספינר קופא, אך המצב עדיין מסומן חזותית */
@media (prefers-reduced-motion: reduce){
	.button.is_loading::after{
		animation: none;
		opacity: 0.5;
	}
}

/* --- וריאנטים סמנטיים --- */

.button--primary{
	--my_background_color: var(--color_primary);
	--my_color: var(--color_white);
}

.button--secondary{
	--my_background_color: var(--color_secondary);
	--my_color: var(--color_white);
}

.button--success{
	--my_background_color: var(--color_success);
	--my_color: var(--color_white);
}

.button--info{
	--my_background_color: var(--color_info);
	--my_color: var(--color_white);
}

.button--warning{
	--my_background_color: var(--color_warning);
	--my_color: var(--color_warning_deeper);
}

.button--error,
.button--destructive{
	--my_background_color: var(--color_danger);
	--my_color: var(--color_white);
}

/* --- משפחת outline --- */

.button--outline{
	--my_background_color: transparent;
	--my_border_color: currentColor;
	--my_box_shadow: var(--shadow_1);
}

.button--outline.button--primary{ --my_color: var(--color_primary_deep); }
.button--outline.button--secondary{ --my_color: var(--color_warning_deep); }
.button--outline.button--error{ --my_color: var(--color_danger); }

/* --- רך / קישור טקסטואלי --- */

.button--soft{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_primary_deep);
	--my_box_shadow: var(--shadow_1);
}

.button--link{
	--my_background_color: transparent;
	--my_box_shadow: none;
	--my_padding_block: 0.2em;
	--my_padding_inline: 0.2em;
	text-decoration: underline dotted;
}

/* --- גדלים --- */

.button--narrow{
	--my_font_size: var(--font_size_small);
	--my_padding_block: 0.35em;
	--my_padding_inline: 0.9em;
}

.button--large{
	--my_font_size: var(--font_size_large);
	--my_padding_block: 0.7em;
	--my_padding_inline: 1.8em;
}

/* --- עגול (אישור/ביטול/מחיקה) --- */

.button--round{
	--my_padding_block: 0;
	--my_padding_inline: 0;
	--my_border_radius: 100%;
	width: 2.8em;
	aspect-ratio: 1 / 1;
}

/* --- צף (FAB) --- */

.button--fab{
	--my_background_color: var(--color_primary);
	--my_color: var(--color_white);
	--my_border_radius: var(--border_radius_roundest);
	--my_box_shadow: var(--shadow_4);
	--my_font_size: var(--font_size_large);

	position: fixed;
	inset-block-end: calc( var(--space_7) + var(--space_2) );
	inset-inline-start: var(--space_3);
	z-index: 50;
}


/* --- like_burst: חלקיקים שמתפוצצים סביב כפתור "לייק" (likeBurst.js) --- */

.js_like_burst{
	position: relative;
	overflow: visible;
}

.js_like_burst.is_bursting{
	animation: likeBurstPulse 0.35s ease-out;
}

.like_burst__particles{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.like_burst__particle{
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	width: 6px;
	height: 6px;
	margin: -3px;
	border-radius: 100%;
	background: var(--color_danger);
	animation-name: likeBurstFly;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
	animation-fill-mode: forwards;
}

.like_burst__particle:nth-child(3n){ background: var(--color_warning); }
.like_burst__particle:nth-child(3n+1){ background: var(--color_secondary); }

@keyframes likeBurstPulse{
	0%{ scale: 1; }
	35%{ scale: 1.35; }
	100%{ scale: 1; }
}

@keyframes likeBurstFly{
	0%{ translate: 0 0; opacity: 1; scale: 1; }
	100%{ translate: var(--particle-x) var(--particle-y); opacity: 0; scale: 0.4; }
}


/* --- לייק (מציל/איש קשר) — לב מלא אדום כשמסומן --- */

.button.is_liked{
	--my_color: var(--color_danger);
	--my_border_color: var(--color_danger);
}

.button.is_liked i{
	animation: likeBurstPulse 0.3s ease-out;
}

}


/* ==== /css/lib/components/fancy_button.css ==== */


/*
	fancy_button — כפתור בחירה ראשי.
	מבנה קבוע + סקין דרך משתני --my_* בלבד.
	וריאנטים: (ברירת מחדל = primary), secondary, success, info, warning,
	error/destructive, is_disabled.

	וריאנטים ספציפיים לדומיין (lifeguard, hold — תלויים בטוקנים
	שמוגדרים רק ב-app/css/app/themes) יושבים ב-
	app/css/app/components/status_variants.css — ראו ההערה שם.
*/

@layer components{

.fancy_button{
	--my_color: var(--color_primary_deeper);
	--my_background_color: var(--color_white);
	--my_border_radius: var(--border_radius_base);
	--my_box_shadow: var(--box_shadow1);
	--my_accent_color: var(--color_primary);
	--my_icon: "\e545";

	display: grid;
	grid-template-columns: 88% 13%;
	align-items: center;
	width: 85%;
	padding: 4%;
	cursor: pointer;
	margin-block: 26px;
	margin-inline: auto;
	font-size: var(--font_size);
	text-decoration: none;

	border-radius: var(--my_border_radius);
	box-shadow: var(--my_box_shadow);
	background: var(--my_background_color);
	border-inline-end: 10px solid var(--my_accent_color);

	transition: scale 0.35s ease-in-out, border-inline-end-width 0.35s ease-in-out;
}

.fancy_button:hover{
	scale: 1.03;
	border-inline-end-width: 0px;
	background: var(--my_background_color);
}

.fancy_button::after{
	font-family: "FontAwesome";
	font-weight: 900;
	content: var(--my_icon);
	font-size: calc( var(--font_size) * 2 );
	text-decoration: none;

	border-radius: 100%;
	background: var(--my_accent_color);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	align-items: center;
	color: var(--color_white);
	display: flex;
	justify-content: center;
}

.fancy_button__text{
	display: flex;
	flex-direction: column;
	text-align: start;
	color: var(--text_color1_brighter);
}

.fancy_button__title{
	font-size: calc( var(--font_size) * 1.1 );
	font-weight: var(--font_weight_black);
	color: var(--my_color);
}

.fancy_button__description{
	font-size: calc( var(--font_size) * 1 );
	font-weight: var(--font_weight_thin);
}

/* --- variants --- */

.fancy_button--secondary{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_softer);
	--my_accent_color: var(--color_secondary);
}

.fancy_button--success{
	--my_color: var(--color_success_deep);
	--my_background_color: var(--color_success_softer);
	--my_accent_color: var(--color_success);
}

.fancy_button--info{
	--my_color: var(--color_info);
	--my_background_color: var(--color_primary_softer);
	--my_accent_color: var(--color_info);
}

.fancy_button--warning{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_soft);
	--my_accent_color: var(--color_warning_deep);
}

.fancy_button--error,
.fancy_button--destructive{
	--my_color: var(--color_danger_deep);
	--my_background_color: var(--color_danger_softer);
	--my_accent_color: var(--color_danger);
}

.fancy_button.is_disabled{
	--my_color: var(--text_color1_brightest);
	--my_background_color: var(--color_primary_softer);
	--my_accent_color: var(--text_color1_brightest);
	pointer-events: none;
}

}


/* ==== /css/lib/components/links.css ==== */


/* ===== links — משפחת הקישורים ===== */

@layer components{

.link{
	--my_color: var(--text_color1_brighter);
	color: var(--my_color);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.link:hover{
	text-decoration-style: solid;
}

.link:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.link--content{
	--my_color: var(--color_primary_deep);
	text-decoration-style: solid;
}

.link--external::after{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f35d";
	font-size: 0.75em;
	margin-inline-start: 0.35em;
}

.link--action{
	--my_color: var(--color_primary_deep);
	text-decoration: none;
	font-weight: var(--font_weight_semi_bold);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.link--back{
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: var(--font_weight_semi_bold);
}

.link--back::before{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f061"; /* חץ ימינה = "אחורה" ב-RTL */
}

.link--legal{
	font-size: var(--font_size_small);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.link--destructive{
	--my_color: var(--color_danger);
}

.link.is_disabled{
	--my_color: var(--text_color1_brightest);
	pointer-events: none;
	text-decoration: none;
}

}


/* ==== /css/lib/components/forms.css ==== */


/* ===== forms — שדות קלט, טפסים ומצביהם ===== */

@layer components{

#root > #screens > .screen > .cotnent > form{
	text-align: center;
}

.field{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
	margin-block-end: var(--space_2);
}

.field__label{
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_bright);
}

.field__input{
	--my_box_shadow: var(--box_shadow1);
	--my_accent_color: var(--color_primary_deepest);
	border: 2px solid var(--color_primary);
	color: var(--color_primary);
	font-weight: var(--font_weight_bold);

	font-family: inherit;
	font-size: var(--font_size_base);
	background: var(--color_white);
	border-radius: var(--border_radius_base);
	padding-block: 0.55em;
	padding-inline: 0.8em;
	width: 100%;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	box-shadow: var(--my_box_shadow);
}

.field__input::placeholder{
	color: var(--text_color1_brightest);
}

.field__input:focus-visible{
	outline: none;
	border-color: var(--color_primary);
	box-shadow: 0 0 0 3px var(--color_primary_soft);
}

.field__hint{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.field__error{
	display: none;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	color: var(--color_error);
}

/* מצב שגיאה: חיווי ויזואלי + מילולי (חובת אפיון 3.2.5.2) */
.field.is_invalid .field__input{
	border-color: var(--color_error);
	box-shadow: 0 0 0 3px rgb(238 68 51 / 0.15);
}

.field.is_invalid .field__error{
	display: block;
}

.field.is_disabled .field__label{
	color: var(--text_color1_brightest);
}

.field__input:disabled{
	background: var(--color_primary_softer);
	color: var(--text_color1_brightest);
	cursor: not-allowed;
}

/* --- שדה טלפון מפוצל: קידומת מימין, מספר משמאל, ספרות LTR --- */

.phone_field{
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: var(--space_1);
	direction: ltr;
}

.phone_field .field__input{
	direction: ltr;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- OTP: 6 משבצות --- */

.otp_field{
	direction: ltr;
	display: flex;
	gap: var(--space_1);
	justify-content: center;
}

.otp_field__digit{
	width: 2.4em;
	aspect-ratio: 3 / 4;
	text-align: center;
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
	color: var(--text_color1);
	background: var(--color_white);
	border: 1px solid var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.otp_field__digit:focus-visible{
	outline: none;
	border-color: var(--color_primary);
	box-shadow: 0 0 0 3px var(--color_primary_soft);
}

.otp_field.is_invalid .otp_field__digit{
	border-color: var(--color_error);
}

/* --- טיימר שליחה חוזרת --- */

.resend_timer{
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.resend_timer__count{
	direction: ltr;
	font-variant-numeric: tabular-nums;
	font-weight: var(--font_weight_bold);
}

/* --- שדה סכום ₪ --- */

.amount_field{
	position: relative;
}

.amount_field .field__input{
	direction: ltr;
	text-align: end;
	padding-inline-end: 2em;
	font-variant-numeric: tabular-nums;
}

.amount_field::after{
	content: "₪";
	position: absolute;
	inset-inline-end: 0.8em;
	inset-block-start: 50%;
	translate: 0 -50%;
	color: var(--text_color1_brighter);
	pointer-events: none;
}

/* --- מתג (Toggle) --- */

.toggle{
	display: inline-flex;
	align-items: center;
	gap: var(--space_1);
	cursor: pointer;
}

.toggle__input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.toggle__track{
	width: 3em;
	height: 1.6em;
	border-radius: var(--border_radius_roundest);
	background: var(--text_color1_brightest);
	position: relative;
	transition: background-color 0.2s ease-in-out;
}

.toggle__track::after{
	content: "";
	position: absolute;
	inset-block-start: 0.15em;
	inset-inline-start: 0.15em;
	width: 1.3em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_white);
	box-shadow: var(--shadow_1);
	transition: translate 0.2s ease-in-out;
}

.toggle__input:checked + .toggle__track{
	background: var(--my_checked_color, var(--color_success));
}

/* --- צבעי Toggle --- */
.toggle--primary{ --my_checked_color: var(--color_primary); }
.toggle--secondary{ --my_checked_color: var(--color_secondary); }
.toggle--success{ --my_checked_color: var(--color_success); }
.toggle--info{ --my_checked_color: var(--color_info); }
.toggle--warning{ --my_checked_color: var(--color_warning); }
.toggle--error{ --my_checked_color: var(--color_danger); }

.toggle__input:checked + .toggle__track::after{
	translate: calc( -1 * 1.4em ) 0;
}

.toggle__input:focus-visible + .toggle__track{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- checkbox / radio --- */

.check_field{
	display: flex;
	align-items: flex-start;
	gap: var(--space_1);
	cursor: pointer;
	text-align: start;
	font-size: var(--font_size_small);
}

.check_field input{
	inline-size: 1.2em;
	block-size: 1.2em;
	margin-block-start: 0.15em;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* --- תיבת טקסט עם מונה --- */

.textarea_field .field__input{
	min-height: 6em;
	resize: vertical;
	line-height: var(--line_height_loose);
}

.textarea_field .field__counter{
	align-self: flex-end;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.textarea_field.is_over_limit .field__counter{
	color: var(--color_error);
	font-weight: var(--font_weight_bold);
}

.textarea_field.is_over_limit .field__input{
	border-color: var(--color_error);
}

/* --- העלאת מסמך: 4 מצבים --- */

.upload_field{
	display: flex;
	align-items: center;
	gap: var(--space_2);
	padding: var(--space_2);
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	text-align: start;
	transition: border-color 0.2s ease-in-out;
}

.upload_field__icon{
	font-size: var(--font_size_largest);
	color: var(--color_primary);
}

.upload_field__name{
	font-weight: var(--font_weight_semi_bold);
	flex: 1;
}

.upload_field__status{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.upload_field.is_uploading{
	border-style: solid;
	border-color: var(--color_info);
}

.upload_field.is_uploaded{
	border-style: solid;
	border-color: var(--color_success);
}

.upload_field.is_uploaded .upload_field__icon{
	color: var(--color_success);
}

.upload_field.is_invalid{
	border-style: solid;
	border-color: var(--color_error);
}

.upload_field.is_invalid .upload_field__icon{
	color: var(--color_error);
}


/* --- משטח לכידה: חתימה / צילום נוכחות --- */

.capture_box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space_1);
	min-height: 150px;
	width: 100%;
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
	cursor: pointer;
	transition: border-color 0.2s ease-in-out;
}

.capture_box:hover{
	border-color: var(--color_primary);
}

.capture_box__icon{
	font-size: calc( var(--font_size) * 1.8 );
	color: var(--color_primary);
	line-height: 1;
}


/* --- choice_list: רשימת בחירה (radio/checkbox) בכרטיס --- */

.choice_list{
	display: flex;
	flex-direction: column;
}

.choice_list--boxed{
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_round);
	padding: var(--space_1);
}

.choice_list__option{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	padding: var(--space_2);
	cursor: pointer;
	font-size: var(--font_size_small);
	line-height: var(--line_height_loose);
	text-align: start;
	border-radius: var(--border_radius_base);
}

.choice_list__option input{
	inline-size: 1.4em;
	block-size: 1.4em;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* וריאנט כרטיסים נפרדים (בחירת אזורי עבודה) */
.choice_list--cards{
	gap: var(--space_1);
}

.choice_list--cards .choice_list__option{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_1);
}

.choice_list--cards .choice_list__option:has(input:checked){
	background: var(--color_success_softer);
	box-shadow: 0 0 0 2px var(--color_success_soft);
}

/* --- אינדיקטור בחירה מונפש (רדיו/צ'קבוקס בעיצוב אחיד עם check_animated) ---
   ה-input האמיתי נשאר בשקיפות מלאה מעל/לפני האינדיקטור לנגישות מלאה. */

.choice_list__option input.js_choice_input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choice_indicator{
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
}

.choice_indicator__ring{
	fill: var(--color_white);
	stroke: var(--text_color1_brightest);
	stroke-width: 1.5;
	transition: stroke 0.2s ease-in-out;
	transform-origin: center;
	transform-box: fill-box;
}

/* רדיו: נקודה פנימית שקופצת פנימה בבחירה */
.choice_indicator__dot{
	fill: var(--color_primary);
	scale: 0;
	transform-origin: center;
	transform-box: fill-box;
	transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot קליל — אותה משפחת תנועה כמו check_animated */
}

/* צ'קבוקס בכרטיס: וי מצויר (כמו check_animated, בגרסת badge קטנה) */
.choice_indicator__mark{
	fill: none;
	stroke: var(--color_white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__ring{
	stroke: var(--color_primary);
	animation: checkAnimatedPop 0.3s ease-out;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__dot{
	scale: 1;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__mark{
	stroke-dashoffset: 0;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__ring--checkbox{
	fill: var(--color_success);
	stroke: var(--color_success);
}

.js_choice_input:focus-visible ~ .choice_indicator .choice_indicator__ring{
	stroke: var(--color_primary);
	stroke-width: 2.5;
}

/* --- capture_box: וריאנטים --- */

/* עיגול הוספת תמונה (אונבורדינג שלב 3) */
.capture_box--round{
	width: min(190px, 52dvw);
	min-height: 0;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	margin-inline: auto;
	background: var(--color_primary_softer);
	border-color: var(--color_primary);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_semi_bold);
}

/* משטח חתימה גבוה (חתימה על הסכם) */
.capture_box--tall{
	min-height: 220px;
	align-items: center;
	justify-content: flex-start;
	padding-block-start: var(--space_3);
	border-style: solid;
	border-color: var(--color_primary_softer);
	color: var(--text_color1_brightest);
}


/* --- signature pad: canvas בתוך capture_box --- */

.js_signature_pad{
	position: relative;
	touch-action: none;
	cursor: crosshair;
}

.js_signature_pad .signature_pad__canvas{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.js_signature_pad .signature_pad__placeholder{
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

.js_signature_pad.is_signed .signature_pad__placeholder{
	opacity: 0;
}


/* --- capture_box: מצב עם תמונה שנבחרה (client-side, ראו profilePhoto.js) --- */

.capture_box.has_photo{
	border-style: solid;
	border-color: var(--color_primary_soft);
	color: transparent;
}


/* --- star_rating_input: דירוג כוכבים אינטראקטיבי (לחיצה לבחירה) --- */

.star_rating_input{
	display: flex;
	justify-content: center;
	gap: 6px;
}

.star_rating_input__star{
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	font-size: var(--font_size_largest);
	color: var(--color_primary_softer);
	transition: color 0.15s ease-in-out, scale 0.15s ease-in-out;
}

.star_rating_input__star.is_filled{
	color: var(--color_warning);
}

.star_rating_input__star.is_hover_preview{
	color: var(--color_warning_soft);
}

.star_rating_input__star:active{
	scale: 1.2;
}

.star_rating_input__star:focus-visible{
	outline: 2px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: 4px;
}

}


/* ==== /css/lib/components/check_animated.css ==== */


/*
	check_animated — תיבת סימון עם וי מצויר באנימציה (השראה: SVG checkbox).
	input[type=checkbox] אמיתי מתחת (נגיש, עובד עם מקלדת/קורא מסך) +
	SVG עיצובי מעליו. הציור מבוסס transition על stroke-dashoffset —
	לא @keyframes — כדי שיתחדש נכון בכל סימון/ביטול, בלי טריקים.
*/

@layer components{

.check_animated{
	display: flex;
	align-items: flex-start;
	gap: var(--space_1);
	cursor: pointer;
	text-align: start;
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
}

.check_animated input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.check_animated__box{
	--my_size: 22px;
	flex-shrink: 0;
	width: var(--my_size);
	height: var(--my_size);
	margin-block-start: 1px;
}

.check_animated__circle{
	fill: var(--color_white);
	stroke: var(--text_color1_brightest);
	stroke-width: 1.5;
	transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
	transform-origin: center;
	transform-box: fill-box;
}

.check_animated__mark{
	fill: none;
	stroke: var(--color_white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

/* --- מצב מסומן: המעגל "קופץ" קלות והוי נצבע --- */

.check_animated input:checked ~ .check_animated__box .check_animated__circle{
	fill: var(--color_primary);
	stroke: var(--color_primary);
	animation: checkAnimatedPop 0.3s ease-out;
}

.check_animated input:checked ~ .check_animated__box .check_animated__mark{
	stroke-dashoffset: 0;
}

.check_animated input:focus-visible ~ .check_animated__box .check_animated__circle{
	stroke: var(--color_primary);
	stroke-width: 2.5;
}

@keyframes checkAnimatedPop{
	0%{ scale: 1; }
	40%{ scale: 1.15; }
	100%{ scale: 1; }
}

}


/* ==== /css/lib/components/tags.css ==== */


/* ===== tags — תגיות, צ'יפים והודעות מצב ===== */

@layer components{

.tag{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_primary_deep);

	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	line-height: 1;
	padding-block: 0.45em;
	padding-inline: 0.9em;
	border-radius: var(--border_radius_roundest);
	color: var(--my_color);
	background: var(--my_background_color);
	white-space: nowrap;
}

.tag--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.tag--info{ --my_background_color: var(--color_primary_soft); --my_color: var(--color_info); }
.tag--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.tag--error{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }
.tag--neutral{ --my_background_color: #EBEFF2; --my_color: var(--text_color1_brighter); }

/* --- צ'יפ סינון --- */

.chip{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_small);
	padding-block: 0.4em;
	padding-inline: 1em;
	border-radius: var(--border_radius_roundest);
	border: 1px solid var(--text_color1_brightest);
	background: var(--color_white);
	color: var(--text_color1_bright);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.chip:hover{
	border-color: var(--color_primary);
}

.chip.is_selected{
	background: var(--color_primary);
	border-color: var(--color_primary);
	color: var(--color_white);
	font-weight: var(--font_weight_semi_bold);
}

.chip:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- Badge: נקודה / מספר --- */

.badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding-inline: 0.4em;
	border-radius: var(--border_radius_roundest);
	background: var(--color_danger);
	color: var(--color_white);
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.badge--dot{
	min-width: 0.7em;
	width: 0.7em;
	height: 0.7em;
	padding: 0;
}

/* --- הודעת מצב (4 וריאנטים) --- */

.status_message{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_info);

	display: flex;
	gap: var(--space_1);
	align-items: flex-start;
	text-align: start;
	padding: var(--space_2);
	border-radius: var(--border_radius_base);
	background: var(--my_background_color);
	border-inline-start: 4px solid var(--my_color);
}

.status_message__icon{
	color: var(--my_color);
	font-size: var(--font_size_large);
	line-height: 1;
}

.status_message__title{
	display: block;
	font-weight: var(--font_weight_bold);
	color: var(--my_color);
	margin-block-end: 2px;
}

.status_message__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
	line-height: var(--line_height_loose);
}

.status_message--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.status_message--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.status_message--error{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }

}


/* ==== /css/lib/components/cards.css ==== */


/* ===== cards — כרטיסים: בסיס, כרטיס משרה, KPI ===== */

@layer components{

.card{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_2);
	padding: var(--space_2);
	text-align: start;
}

/* --- כרטיס KPI --- */

.kpi_card{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	min-width: 110px;
}

.kpi_card__value{
	font-size: var(--font_size_largest);
	font-weight: var(--font_weight_black);
	color: var(--color_primary_deep);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.kpi_card__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}


/* --- spec_list: שורות תווית/ערך (פרטי משמרת) --- */

.spec_list{
	display: flex;
	flex-direction: column;
}

.spec_list__row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space_2);
	padding-block: 9px;
	border-block-end: 1px solid var(--color_primary_softer);
}

.spec_list__row:last-child{
	border-block-end: 0;
}

.spec_list__label{
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
}

.spec_list__value{
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
	text-align: end;
}

.spec_list__value.is_highlight{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_black);
	direction: ltr;
	unicode-bidi: isolate;
}

/* --- doc_card: מסמך לשיתוף/העלאה --- */

.doc_card{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

.doc_card__head{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.doc_card__icon{
	color: var(--color_primary_deep);
	font-size: var(--font_size_larger);
	width: 1.3em;
	text-align: center;
	flex-shrink: 0;
}

.doc_card--required .doc_card__icon{
	color: var(--color_danger);
}

.doc_card__title{
	font-weight: var(--font_weight_bold);
	flex: 1;
}

.doc_card__subtitle{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: end;
}

.doc_card .capture_box{
	min-height: 90px;
}

/* --- contact_card: איש קשר במקום --- */

.contact_card{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.contact_card__info{
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: start;
}

.contact_card__role{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.contact_card__name{
	font-weight: var(--font_weight_bold);
	font-size: var(--font_size_large);
}

.contact_card__actions{
	display: flex;
	gap: var(--space_1);
}


/* תגיות מרובות בכותרת כרטיס משרה */
/* --- rating: כוכבים + ממוצע --- */

.rating{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.rating__stars{
	color: var(--color_warning);
	letter-spacing: 1px;
}

.rating__value{
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

/* --- gallery: תמונה ראשית + כפתור "+N" --- */

.gallery_trigger{
	position: absolute;
	inset-inline-start: var(--space_1);
	inset-block-end: var(--space_1);
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgb(7 61 90 / 0.55);
	color: var(--color_white);
	border: none;
	border-radius: var(--border_radius_base);
	padding: 0.4em 0.8em;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	backdrop-filter: blur(2px);
}

.gallery_strip{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: 4px;
}

.gallery_strip__item{
	flex-shrink: 0;
	width: 96px;
	height: 72px;
	border-radius: var(--border_radius_base);
	background-size: cover;
	background-position: center;
	scroll-snap-align: start;
}

/* --- review: חוות דעת בודדת --- */

.review{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--space_1);
	border-block-end: 1px solid var(--color_primary_softer);
}

.review:last-child{ border-block-end: 0; }

.review__head{
	display: flex;
	align-items: center;
	gap: 8px;
}

.review__author{
	font-weight: var(--font_weight_semi_bold);
	font-size: var(--font_size_small);
}

.review__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loose);
}

/* --- highlight_row: הדגשת שדה קריטי (שכר/שעות/נסיעות) --- */

.highlight_row{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	padding: var(--space_1) var(--space_2);
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_base);
}

.highlight_row__icon{
	color: var(--color_primary_deep);
	font-size: var(--font_size_large);
	width: 1.3em;
	text-align: center;
}

.highlight_row__label{
	flex: 1;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.highlight_row__value{
	font-weight: var(--font_weight_black);
	font-size: var(--font_size_large);
	color: var(--color_primary_deep);
	direction: ltr;
	unicode-bidi: isolate;
}


/* --- הערת שוליים משפטית תחת "שכר משוער" --- */

/* --- compare_table: השוואת מועמדים, עמודה לכל מועמד --- */

.compare_table{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.compare_table__row{
	display: grid;
	grid-template-columns: 90px repeat(auto-fit, minmax(80px, 1fr));
	align-items: center;
	gap: 4px;
	padding-block: 8px;
	border-block-end: 1px solid var(--color_primary_softer);
}

.compare_table__row--header{
	border-block-end-width: 2px;
	border-block-end-color: var(--color_primary_soft);
}

.compare_table__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.compare_table__col{
	text-align: center;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1);
}

.compare_table__col--header{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
}

.compare_table__col.is_best{
	color: var(--color_success_deep);
	background: var(--color_success_softer);
	border-radius: var(--border_radius_base);
	padding-block: 2px;
}

}


/* ==== /css/app/components/job_card.css ==== */


/*
	===== job_card — כרטיס משרה, ותוספות דומיין על .card/.rating הגנריים =====

	הועבר מ-app/css/lib/components/cards.css: .card, .kpi_card, .spec_list,
	.doc_card, .contact_card, .rating, .gallery_*, .review, .highlight_row
	ו-.compare_table הם רכיבי UI גנריים שנשארו שם. מה שכאן הוא הרחבות
	ספציפיות לדומיין "מצא מציל" — כרטיס משרה (סדר מידע קבוע, אפיון
	3.3.10.3), דירוג "נדיבות" מעסיק, והבהרת מס על השכר.
*/

@layer components{

.job_card{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

.job_card__header{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space_1);
}

.job_card__title{
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

/* דירוג הבריכה — כבר בתצוגה הראשונה של הכרטיס */
.job_card__rating{
	font-size: var(--font_size_smaller);
}

/* איש קשר — שורה קומפקטית מתחת לדירוג */
.job_card__contact{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.job_card__contact_name{
	flex: 1;
}

.job_card__contact_rating{
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--text_color1_brightest);
}

.job_card__contact_rating .fa-star{
	color: var(--color_warning);
	font-size: 0.85em;
}

.job_card__meta{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.job_card__meta_item{
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.job_card__meta_item .icon{
	color: var(--color_primary);
	width: 1.2em;
	text-align: center;
}

.job_card__rate{
	direction: ltr;
	font-variant-numeric: tabular-nums;
	font-weight: var(--font_weight_black);
	font-size: var(--font_size_larger);
	color: var(--color_primary_deep);
	unicode-bidi: isolate;
}

/* סיומת נסיעות בתעריף */
.job_card__rate small{
	display: block;
	font-size: 0.5em;
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_brighter);
	letter-spacing: 0;
}

.job_card__footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space_1);
	margin-block-start: var(--space_1);
	padding-block-start: var(--space_1);
	border-block-start: 1px solid var(--color_primary_softer);
}

.job_card__tags{
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 60%;
}

/* תמונת בריכה בראש כרטיס (פרטי משרה) */
.job_card__photo{
	position: relative;
	height: 170px;
	margin: calc( -1 * var(--space_2) );
	margin-block-end: var(--space_1);
	background-size: cover;
	background-position: center;
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
}

.job_card__photo::after{
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 50%;
	background: linear-gradient(rgb(7 61 90 / 0), rgb(7 61 90 / 0.35));
	border-end-start-radius: 0;
	pointer-events: none;
}

/* וריאנט "משמרת פתוחה" — הדגשה בפס צד, כמו fancy_button */
.job_card--open_shift{
	border-inline-end: 6px solid var(--color_success);
}

/* --- דירוג מעסיק: "מפרגן" סמנטי במקום כוכבים, על .rating הגנרי --- */

.rating--generosity.is_generous{ color: var(--color_success); }
.rating--generosity.is_generous .rating__stars{ color: var(--color_success); }
.rating--generosity.is_stingy{ color: var(--color_danger); }
.rating--generosity.is_stingy .rating__stars{ color: var(--color_danger); }

/* --- הבהרת מס על שכר משמרת --- */

.pay_disclaimer{
	display: block;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	line-height: var(--line_height_loose);
	margin-block-start: 6px;
}

.pay_disclaimer__asterisk{
	color: var(--text_color1_brighter);
}

}


/* ==== /css/app/components/status_variants.css ==== */


/*
	===== status_variants — צביעת מצב לפי דומיין, על גבי רכיבים גנריים =====

	רכיבי הבסיס (.tag, .button, .fancy_button) חיים ב-css/lib —
	מבנה + מנגנון סקין דרך משתני --my_*, בלי שום ידע על "משרה" או
	"תעודה". הקבצים האלה נועדו לנדוד לפרויקט הבא כמו שהם.

	מה שכאן הוא ורק הצבעים שהדומיין "מצא מציל" מוסיף על גביהם:
	סטטוס משרה (6 תגיות), כשירות תעודת מציל (4 תגיות), ומצב "בהמתנה"
	שחוזר בשלושה רכיבים (tag--job_hold, button--hold, fancy_button--hold),
	פלוס וריאנט "מציל" לכפתור הבחירה הראשי. אלה תלויים ב---color_hold
	ובטוקנים אחרים שמוגדרים רק ב-app/css/app/themes — ולכן אינם יכולים
	לשבת ב-lib בלי לשבור את הפרויקט הבא שיטען אותם.

	הועבר מ: app/css/lib/components/tags.css, buttons.css, fancy_button.css.
*/

@layer components{

/* --- תגיות סטטוס משרה (6) — סמנטיות, לא צבעוניות --- */

.tag--job_open{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.tag--job_urgent{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }
.tag--job_hold{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.tag--job_filled{ --my_background_color: var(--color_primary_soft); --my_color: var(--color_primary_deep); }
.tag--job_done{ --my_background_color: #EBEFF2; --my_color: var(--text_color1_brighter); }
.tag--job_canceled{ --my_background_color: #EBEFF2; --my_color: var(--text_color1_brightest); }

/* --- תגיות כשירות מציל --- */

.tag--cert_valid{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.tag--cert_verified{ --my_background_color: var(--color_primary_deepest); --my_color: var(--color_white); }
.tag--cert_pending{ --my_background_color: var(--color_primary_soft); --my_color: var(--color_primary_deep); }
.tag--cert_expired{ --my_background_color: #EBEFF2; --my_color: var(--text_color1_brightest); }

/* --- כפתור: וריאנט "בהמתנה" (job on hold) --- */

.button--hold{
	--my_background_color: var(--color_hold);
	--my_color: var(--color_white);
}

/* --- fancy_button: וריאנטים ספציפיים לדומיין --- */

.fancy_button--lifeguard{
	--my_color: var(--color_primary_deepest);
	--my_background_color: rgb(237, 247, 252);
	--my_accent_color: var(--color_primary_deepest);
	--my_icon: "\f5c4"; /* person-swimming */
}

.fancy_button--hold{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_softer);
	--my_accent_color: var(--color_hold);
}

}


/* ==== /css/lib/components/avatars.css ==== */


/* ===== avatars — תמונות פרופיל, 6 גדלים, מצבים וערימה ===== */

@layer components{

.avatar{
	--my_size: 40px;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--my_size);
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_primary_soft);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
	font-size: calc( var(--my_size) * 0.38 );
	overflow: visible;
	flex-shrink: 0;
}

.avatar img,
.avatar .avatar__image{
	width: 100%;
	height: 100%;
	border-radius: 100%;
	object-fit: cover;
}

/* Fallback אותיות ראשונות — פשוט טקסט בתוך האלמנט */

/* --- 6 גדלים --- */
.avatar--xs{ --my_size: 24px; }
.avatar--sm{ --my_size: 32px; }
.avatar--md{ --my_size: 40px; }
.avatar--lg{ --my_size: 56px; }
.avatar--xl{ --my_size: 72px; }
.avatar--xxl{ --my_size: 96px; }

/* --- חיווי אונליין/אופליין --- */

.avatar__presence{
	position: absolute;
	inset-block-end: 2%;
	inset-inline-end: 2%;
	width: 26%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	border: 2px solid var(--color_white);
	background: var(--text_color1_brightest);
}

.avatar.is_online .avatar__presence{
	background: var(--color_success);
}

.avatar.is_offline .avatar__presence{
	background: var(--text_color1_brightest);
}

/* --- ערימת מועמדים --- */

.avatar_stack{
	display: inline-flex;
	align-items: center;
}

.avatar_stack .avatar{
	border: 2px solid var(--color_white);
}

.avatar_stack .avatar:not(:first-child){
	margin-inline-start: calc( var(--my_size, 40px) * -0.35 );
}

.avatar_stack__more{
	margin-inline-start: 0.5em;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	font-weight: var(--font_weight_semi_bold);
}

/* --- פס שלמות פרופיל --- */

.profile_completeness{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
}

.profile_completeness__label{
	display: flex;
	justify-content: space-between;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.profile_completeness__track{
	height: 8px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
	overflow: hidden;
}

.profile_completeness__value{
	--my_progress: 50%;
	height: 100%;
	width: var(--my_progress);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--color_primary), var(--color_primary_deep));
	transition: width 0.4s ease-in-out;
}


/* --- מצב עם תמונת פרופיל שנבחרה (client-side, ראו profilePhoto.js) --- */

.avatar.has_photo{
	color: transparent;
}

}


/* ==== /css/lib/components/overlays.css ==== */


/* ===== overlays — מודאל במבנה קבוע, Bottom sheet, Toast ===== */

@layer components{

/* --- מודאל: מבנה קבוע (אפיון 3.3.14.1) --- */

.modal{
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space_2);
	background: rgb(7 61 90 / 0.45);
	backdrop-filter: blur(3px);
}

.modal.is_open{
	display: flex;
}

.modal__dialog{
	width: min(440px, 100%);
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_5);
	padding: var(--space_3);
	display: flex;
	flex-direction: column;
	gap: var(--space_2);
	text-align: center;
}

/* אייקון בתוך עיגול רך — לפי העיצוב */
.modal__icon{
	--my_icon_color: var(--color_primary);
	--my_icon_background: var(--color_primary_softer);

	width: 84px;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	font-size: calc( var(--font_size) * 1.8 );
	line-height: 1;
	color: var(--my_icon_color);
	background: var(--my_icon_background);
}

.modal--error .modal__icon{ --my_icon_color: var(--color_danger); --my_icon_background: var(--color_danger_softer); }
.modal--warning .modal__icon{ --my_icon_color: var(--color_warning_deep); --my_icon_background: var(--color_warning_soft); }
.modal--success .modal__icon{ --my_icon_color: var(--color_success); --my_icon_background: var(--color_success_softer); }

.modal__title{
	font-size: var(--font_size_larger);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

.modal__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
}

/* כפתורים ברוחב מלא, בערימה — לפי העיצוב */
.modal__actions{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
	margin-block-start: var(--space_1);
}

.modal__actions .button{
	width: 100%;
}

.modal.is_open .modal__dialog{
	animation: modalIn 0.22s ease-out;
}

/* תוכן גלילה (למשל תנאי שימוש) */
.modal__body{
	text-align: start;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
	max-height: 40dvh;
	overflow: auto;
}

/* פעולה מרכזית גדולה (עיגול וואטסאפ במודאל מספר חסום) */
.modal__big_action{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-inline: auto;
	color: var(--color_success);
	font-weight: var(--font_weight_semi_bold);
	text-decoration: none;
}

.modal__big_action .modal__big_action_circle{
	width: 64px;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_success);
	color: var(--color_white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc( var(--font_size) * 1.4 );
	box-shadow: var(--shadow_2);
}

.modal__big_action .modal__big_action_label{
	text-decoration: underline;
}

/* נעילת גלילת רקע כשמודאל פתוח */
body.has_open_modal{
	overflow: hidden;
}

/* --- Bottom sheet --- */

.bottom_sheet{
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 100;
	display: none;
	flex-direction: column;
	gap: var(--space_2);
	background: var(--color_white);
	border-start-start-radius: var(--border_radius_roundest);
	border-start-end-radius: var(--border_radius_roundest);
	box-shadow: var(--shadow_5);
	padding: var(--space_2) var(--space_3) var(--space_4);
}

.bottom_sheet.is_open{
	display: flex;
	animation: toastIn 0.25s ease-out;
}

.bottom_sheet{
	max-height: 82dvh;
	overflow: auto;
}

.bottom_sheet__handle{
	width: 44px;
	height: 5px;
	border-radius: var(--border_radius_roundest);
	background: var(--text_color1_brightest);
	margin-inline: auto;
}

.bottom_sheet__title{
	font-weight: var(--font_weight_bold);
	text-align: center;
}

.bottom_sheet__options{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

/* --- Toast / הודעת on-screen --- */

.toast{
	--my_color: var(--color_info);

	position: fixed;
	inset-block-end: var(--space_4);
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: min(90dvw, 420px);
	z-index: 110;

	display: none;
	align-items: center;
	gap: 0.6em;
	padding-block: 0.7em;
	padding-inline: 1.2em;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_deepest);
	color: var(--color_white);
	font-size: var(--font_size_small);
	box-shadow: var(--shadow_4);
}

.toast.is_open{
	display: flex;
	animation: toastIn 0.25s ease-out;
}

.toast.is_leaving{
	opacity: 0;
	translate: 0 10px;
	transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out;
}

/* מיכל ערימת Toasts — הפלאגין מייצר אותו */
.toast_container{
	position: fixed;
	inset-inline: 0;
	inset-block-end: var(--space_4);
	z-index: 110;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1);
	pointer-events: none;
}

.toast_container .toast{
	position: static;
	pointer-events: auto;
	cursor: pointer;
}

.toast__icon{
	color: var(--my_color);
	font-size: 1.2em;
	line-height: 1;
}

.toast--success{ --my_color: #7ADFA3; }
.toast--error{ --my_color: #FF8A7C; }
.toast--info{ --my_color: var(--color_primary_soft); }


/* --- photo_cropper: עריכת מיקום/זום לתמונת פרופיל (client-side, profilePhoto.js) --- */

.photo_cropper{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_2);
}

.photo_cropper__stage{
	position: relative;
	width: fit-content;
	margin-inline: auto;
	border-radius: var(--border_radius_base);
	overflow: hidden;
	background: var(--color_primary_softer);
	box-shadow: var(--shadow_2);
}

.photo_cropper__stage canvas{
	display: block;
}

/* טבעת מנחה: זה מה שיישאר גלוי בתוך האווטאר העגול */
.photo_cropper__ring{
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 100%;
	box-shadow: 0 0 0 999px rgb(255 255 255 / 0.75);
	border: 2px solid var(--color_white);
}

.photo_cropper__zoom_row{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--text_color1_brighter);
}

.photo_cropper__zoom_row input[type="range"]{
	flex: 1;
	accent-color: var(--color_primary);
}

.photo_cropper__hint{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	text-align: center;
}


/* --- confetti_canvas: חגיגת סיום הרשמה (confetti.js) --- */

.confetti_canvas{
	position: fixed;
	inset: 0;
	width: 100dvw;
	height: 100dvh;
	z-index: 300; /* מעל מודאלים וטוסטים — זה הרגע להיות מעל הכל */
	pointer-events: none;
}

}


/* ==== /css/lib/components/navigation.css ==== */


/* ===== navigation — Tab bar, Header, Stepper ===== */

@layer components{

/* --- Tab bar מובייל (5 פריטים) --- */

.tab_bar{
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: flex;
	justify-content: space-around;
	background: var(--color_white);
	box-shadow: var(--shadow_4);
	padding-block: 6px;
	padding-block-end: max(6px, env(safe-area-inset-bottom));
}

.tab_bar__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brighter);
	text-decoration: none;
	padding-block: 4px;
	padding-inline: var(--space_1);
	border-radius: var(--border_radius_base);
	position: relative;
}

.tab_bar__item .icon{
	font-size: var(--font_size_large);
	line-height: 1;
}

.tab_bar__item.is_active{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.tab_bar__item .badge{
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 2px;
}

.tab_bar__item:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: -3px;
}

/* --- Header אפליקציה --- */

.app_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	padding-block: var(--space_1);
	padding-inline: var(--space_2);
	background: var(--color_white);
	box-shadow: var(--shadow_1);
}

.app_header__actions{
	display: flex;
	align-items: center;
	gap: var(--space_2);
}

/* --- Stepper: חיווי שלבים --- */

.stepper{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.stepper__step{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	min-width: 80px;
}

.stepper__dot{
	width: 2em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color_primary_softer);
	color: var(--text_color1_brightest);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
}

.stepper__connector{
	width: var(--space_5);
	height: 2px;
	background: var(--color_primary_soft);
	margin-block-end: 1.2em;
}

.stepper__step.is_done .stepper__dot{
	background: var(--color_success);
	color: var(--color_white);
}

.stepper__step.is_done{
	color: var(--color_success);
}

.stepper__step.is_active .stepper__dot{
	background: var(--color_primary);
	color: var(--color_white);
}

.stepper__step.is_active{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}


/* --- steps_progress: פס התקדמות שלבים (אונבורדינג) --- */

.steps_progress{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.steps_progress__meta{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--font_size_small);
}

.steps_progress__current{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.steps_progress__name{
	color: var(--text_color1_brightest);
}

.steps_progress__skip{
	color: var(--text_color1_brightest);
	text-decoration: underline dotted;
}

.steps_progress__track{
	display: flex;
	gap: 8px;
}

.steps_progress__segment{
	flex: 1;
	height: 9px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
}

.steps_progress__segment.is_done{
	background: var(--color_primary);
}

}


/* ==== /css/app/components/swipe_deck.css ==== */


/* ===== swipe_deck — דק החלקה בסגנון טינדר (אפיון 3.3.10.5) ===== */

@layer components{

.swipe_deck{
	position: relative;
	width: min(560px, 100%);
	margin-inline: auto;
	height: 360px;
	user-select: none;
}

.swipe_card{
	position: absolute;
	inset: 0;
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_3);
	overflow: hidden;
	display: flex;
	flex-direction: column;

	touch-action: pan-y; /* גרירה אופקית לדק, גלילה אנכית לדף */
	cursor: grab;

	transition: translate 0.3s ease-out, rotate 0.3s ease-out, scale 0.3s ease-out, opacity 0.3s ease-out;
}

.swipe_card.is_dragging{
	transition: none;
	cursor: grabbing;
}

.swipe_card.is_leaving{
	transition: translate 0.4s ease-in, rotate 0.4s ease-in, opacity 0.4s ease-in;
	opacity: 0;
	pointer-events: none;
}

/* הערימה: הקלף העליון הוא האחרון ב-DOM */
.swipe_card:nth-last-child(2){
	scale: 0.95;
	translate: 0 12px;
}

.swipe_card:nth-last-child(3){
	scale: 0.9;
	translate: 0 24px;
}

.swipe_card:nth-last-child(n+4){
	opacity: 0;
}

/* --- תוכן הקלף --- */

.swipe_card__image{
	height: 64%;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	position: relative;
}

/* scrim תחתון — קריאות התגיות על כל תמונה */
.swipe_card__image::after{
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 45%;
	background: linear-gradient(rgb(7 61 90 / 0), rgb(7 61 90 / 0.35));
	pointer-events: none;
}

.swipe_card__body{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space_2);
	text-align: start;
}

.swipe_card__title_row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space_1);
}

.swipe_card__title{
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

.swipe_card__meta{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.swipe_card__tags{
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-block-start: auto;
}

/* --- חותמות ההחלקה --- */

.swipe_card__stamp{
	position: absolute;
	top: var(--space_2);
	padding: 0.3em 0.8em;
	border: 3px solid;
	border-radius: var(--border_radius_base);
	font-weight: var(--font_weight_black);
	font-size: var(--font_size_large);
	opacity: 0;
	rotate: -8deg;
	background: rgb(255 255 255 / 0.85);
}

.swipe_card__stamp--like{
	inset-inline-end: var(--space_2);
	color: var(--color_success);
	border-color: var(--color_success);
	rotate: 8deg;
}

.swipe_card__stamp--skip{
	inset-inline-start: var(--space_2);
	color: var(--color_danger);
	border-color: var(--color_danger);
}

/* --- כפתורי פעולה --- */

.swipe_deck_actions{
	display: flex;
	justify-content: center;
	gap: var(--space_3);
	margin-block-start: var(--space_2);
}

/* --- קלף סיום --- */

.swipe_card--empty{
	align-items: center;
	justify-content: center;
	gap: var(--space_2);
	text-align: center;
	padding: var(--space_3);
	color: var(--text_color1_brighter);
	cursor: default;
}

.swipe_card--empty .swipe_card__title{
	color: var(--color_primary_deepest);
}


/* תגיות על-גבי תמונה */
.swipe_card__image .job_card__tags,
.job_card__photo .job_card__tags{
	position: absolute;
	inset-inline-start: var(--space_1);
	inset-block-end: var(--space_1);
	justify-content: flex-start;
	max-width: calc(100% - var(--space_2));
	z-index: 1;
}

}


/* ==== /css/app/components/points.css ==== */


/*
	===== points — מערכת הנקודות =====

	מנוהל ע"י js/app/points.js.
	מכוון להיות מתגמל אך לא צעקני: הנקודות מעודדות פעולה, אך אינן
	אמורות להשתלט על הממשק או להסיח מהמשמרת עצמה.
*/

@layer components{

/* --- כרטיס המאזן --- */

.points_summary{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.points_summary__balance{
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.points_summary__value{
	font-size: 2.4em;
	font-weight: var(--font_weight_bold);
	line-height: 1;
	color: var(--color_primary_deep, var(--color_primary));
	font-variant-numeric: tabular-nums; /* המספר לא "קופץ" כשהוא משתנה */
}

.points_summary__unit{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.points_summary__level{
	font-weight: var(--font_weight_bold);
	color: var(--color_warning_deep, var(--color_warning));
}

/* --- מד התקדמות לרמה הבאה --- */

.points_level_bar{
	inline-size: 100%;
	block-size: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--text_color1) 12%, transparent);
	overflow: hidden;
}

.points_level_bar__fill{
	block-size: 100%;
	inline-size: 0;

	/* RTL: המילוי מתקדם מימין לשמאל */
	margin-inline-start: auto;

	border-radius: 999px;
	background: linear-gradient(to left, var(--color_primary), var(--color_warning));
	transition: inline-size 0.63s ease;
}

/* --- שורות המחירון --- */

.points_action{
	display: flex;
	align-items: center;
	gap: 12px;
}

.points_action__icon{
	inline-size: 2.2em;
	block-size: 2.2em;
	flex-shrink: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	background: color-mix(in srgb, var(--color_primary) 14%, transparent);
	color: var(--color_primary_deep, var(--color_primary));
}

.points_action__text{
	flex: 1;
}

.points_action__label{
	font-weight: var(--font_weight_bold);
}

.points_action__value{
	flex-shrink: 0;
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
	color: var(--color_success);
}

/* --- היסטוריה: חיובי מול שלילי --- */

.spec_list__value.is_positive{ color: var(--color_success); }
.spec_list__value.is_negative{ color: var(--color_danger, var(--color_warning_deep)); }

/* --- תג המאזן בטאב-בר, ופעימת זכייה --- */

.js_points_balance{
	font-variant-numeric: tabular-nums;
}

.js_points_balance.is_awarded{
	animation: pointsAwardPulse 0.72s ease;
}

@keyframes pointsAwardPulse{
	0%{ scale: 1; }
	35%{ scale: 1.35; color: var(--color_success); }
	100%{ scale: 1; }
}

@media (prefers-reduced-motion: reduce){
	.js_points_balance.is_awarded{ animation: none; }
	.points_level_bar__fill{ transition: none; }
}

}


/* ==== /css/app/components/floating_cta_bar.css ==== */


/* ===== floating_cta_bar — סרגל פעולה צף בתחתית מסך (הצעה למשרה וכד') ===== */

@layer components{

.floating_cta_bar{
	position: fixed;
	inset-inline: var(--space_2);
	inset-block-end: max(var(--space_2), env(safe-area-inset-bottom));
	z-index: 55;

	display: flex;
	flex-direction: column;
	gap: var(--space_1);

	border-radius: 43px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.3);
	box-shadow: var(--shadow_4);
	padding: var(--space_2);
}

.floating_cta_bar__buttons{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

.floating_cta_bar .check_animated{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

}


/* ==== /css/app/components/profile_tabs.css ==== */


/*
	profile_tabs — טאבים אופקיים לעמוד פרופיל (אודות / ניסיון / תעודות / המלצות).
	נגישות: role=tab/tabpanel + aria-selected, מנוהל ע"י מעט JS גנרי ב-jobsBoard.js
	(delegated click, לא תלוי פלאגין נפרד).
*/

@layer components{

.profile_tabs{
	display: flex;
	gap: var(--space_2);
	width: min(480px, 100%);
	margin-inline: auto;
	border-block-end: 1px solid var(--color_primary_softer);
	overflow-x: auto;
}

.profile_tabs__tab{
	flex-shrink: 0;
	background: none;
	border: none;
	border-block-end: 2.5px solid transparent;
	padding-block: 10px;
	padding-inline: 2px;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_brightest);
	cursor: pointer;
	transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.profile_tabs__tab:hover{
	color: var(--text_color1_brighter);
}

.profile_tabs__tab.is_active{
	color: var(--color_primary_deep);
	border-block-end-color: var(--color_primary);
}

.profile_tab_panel{
	width: min(480px, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space_2);
}

.profile_tab_panel[hidden]{
	display: none;
}

/* --- ביו + כרטיס טקסט חופשי --- */

/* --- כרטיס "אודות": ביו + כישורים בתוך מסגרת אחת, כמו סקציית קורות חיים --- */

.profile_resume_card{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_1);
	padding: var(--space_2);
	display: flex;
	flex-direction: column;
	gap: var(--space_2);
}

.profile_resume_card__eyebrow{
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_bold);
	letter-spacing: 0.04em;
	color: var(--text_color1_brightest);
	text-transform: uppercase;
	margin-block-end: 6px;
}

.profile_bio{
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
	line-height: var(--line_height_loosest);
}

/* --- רשת כישורים: אייקון + תווית, כמו בעיצוב ההשראה --- */

.skill_grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space_1);
}

.skill_chip{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	background: var(--color_white);
	border-radius: var(--border_radius_base);
	box-shadow: var(--shadow_1);
	padding: var(--space_1);
	font-size: var(--font_size_smaller);
	color: var(--text_color1_bright);
}

.skill_chip .icon{
	color: var(--color_primary);
	font-size: var(--font_size_large);
}

/* --- מדדי זמינות/אמינות/ניסיון (שורה נוספת מעל profile_stats) --- */

.availability_tag{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.availability_tag .dot{
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background: var(--color_success);
}

}


/* ==== /css/app/components/cookie_consent.css ==== */


/* ===== cookie_consent_banner — הודעת אחסון מקומי (cookieConsent.js) ===== */

@layer components{

.cookie_consent_banner{
	position: fixed;
	inset-inline: var(--space_2);
	inset-block-end: var(--space_2);
	z-index: 400; /* מעל כל דבר אחר, כולל קונפטי — זו הודעת גילוי נאות */

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space_2);

	background: var(--color_primary_deepest);
	color: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_5);
	padding: var(--space_2);

	translate: 0 150%;
	transition: translate 0.35s ease-out;
}

.cookie_consent_banner.is_visible{
	translate: 0 0;
}

.cookie_consent_banner.is_dismissed{
	translate: 0 150%;
	pointer-events: none;
}

.cookie_consent_banner__text{
	flex: 1;
	min-width: 220px;
	font-size: var(--font_size_smaller);
	line-height: var(--line_height_loose);
	color: rgb(255 255 255 / 0.9);
}

.cookie_consent_banner__text .link{
	color: var(--color_white);
	font-weight: var(--font_weight_semi_bold);
}

}


/* ==== /css/app/components/connection_status.css ==== */


/*
	===== connection_status — חיווי חיבור ותור פעולות ממתינות =====

	מנוהל ע"י js/connectionStatus.js, שמאזין לאירועי online/offline
	ולתור של js/api.js. שני מצבים:
	- is_offline: אין רשת כלל
	- is_pending: יש רשת, אבל נותרו פעולות בתור (או שהן נשלחות עכשיו)

	הפס יושב מעל התוכן ומתחת למודאלים — הוא מידע, לא חסימה.
*/

@layer components{

.connection_status{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 380; /* מתחת ל-cookie_consent (400) ולמודאלים — חיווי, לא חסימה */

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space_1);

	padding-block: 6px;
	padding-inline: var(--space_2);

	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_bold);
	text-align: center;

	background: var(--color_warning);
	color: var(--text_color1);

	translate: 0 -100%;
	transition: translate 0.42s ease;
}

.connection_status.is_visible{
	translate: 0 0;
}

.connection_status.is_offline{
	background: var(--color_warning);
}

.connection_status.is_pending{
	background: var(--color_info);
	color: var(--color_white);
}

.connection_status__icon{
	font-size: 1.05em;
	line-height: 1;
	flex-shrink: 0;
}

.connection_status__count{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-inline-size: 1.6em;
	padding-inline: 5px;
	border-radius: 999px;

	background: rgb(255 255 255 / 0.28);
	font-variant-numeric: tabular-nums;
}

/* גוף הדף נדחף למטה כשהפס גלוי — כדי שלא יכסה כותרת מסך */
body.has_connection_status{
	padding-block-start: 1.9em;
}

@media (prefers-reduced-motion: reduce){
	.connection_status{
		transition: none;
	}
}

}


/* ==== /css/lib/components/top_progress.css ==== */


/*
	===== top_progress — פס טעינה עליון =====

	מנוהל ע"י core/plugins/topProgress.js, שמאזין לאירועי api_request_started/finished.
	יושב מעל הכל (כולל מודאלים) כי הוא חיווי מערכת, לא תוכן — אבל הוא דק
	ו-pointer-events: none, כך שאינו חוסם שום אינטראקציה.
*/

@layer components{

.top_progress{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 900;

	block-size: 3px;
	pointer-events: none;

	opacity: 0;
	transition: opacity 0.21s ease;
}

.top_progress.is_active{
	opacity: 1;
}

.top_progress__bar{
	block-size: 100%;
	inline-size: 0;

	/* RTL: הפס מתמלא מימין לשמאל, בכיוון הקריאה */
	margin-inline-start: auto;

	background: linear-gradient(
		to left,
		var(--color_primary),
		color-mix(in srgb, var(--color_primary) 55%, var(--color_info))
	);

	/* זוהר עדין בקצה המתקדם — מה שנותן את התחושה של "רץ" */
	box-shadow: 0 0 8px color-mix(in srgb, var(--color_primary) 70%, transparent);

	transition: inline-size 0.21s ease;
}

@media (prefers-reduced-motion: reduce){
	.top_progress__bar{
		transition: none;
		box-shadow: none;
	}
}

}


/* ==== /css/lib/components/skeleton.css ==== */


/*
	===== skeleton — מצבי טעינה ושגיאה של מסך =====

	מנוהל ע"י core/plugins/screenLoader.js, שמוסיף למסך אחת משלוש המחלקות:
	is_loading / is_loaded / is_failed.

	העיקרון: התוכן האמיתי כבר קיים ב-DOM (המסכים תמיד שם) — בזמן טעינה
	הוא מוחלף חזותית בשלד, ולא נמחק. כך אין קפיצת פריסה כשהתוכן מגיע.

	סימון תוכן שיוחלף בשלד: class="skeleton_target" על העוטף.
	אם לעוטף כבר יש מידה קבועה משלו (למשל תמונה עם height inline),
	מוסיפים גם class="skeleton_target--sized" כדי לא לכפות עליו
	min-block-size/min-inline-size גנריים.
*/

@layer components{

/* --- בזמן טעינה: התוכן נעלם, השלד מופיע --- */

.screen.is_loading .skeleton_target{
	visibility: hidden;
	position: relative;

	/*
		אזור שתוכנו נוקה הוא ריק, ובלי מידה מינימלית הוא קורס לגובה אפס
		והשלד לא נראה כלל. min-block-size מבטיח פס נראה; min-inline-size
		מטפל באלמנטים inline שרוחבם נגזר מהטקסט שנמחק.
	*/
	min-block-size: 1.05em;
	min-inline-size: 4em;
}

/*
	אווטארים כבר נושאים מידות משלהם — לא לכפות עליהם מינימום.
	.avatar הוא רכיב lib (avatars.css), ולכן מותר לשם כאן במפורש.

	לאלמנטים אחרים עם מידה קבועה משלהם (למשל תמונה עם height inline) —
	.skeleton_target--sized הוא הבלאי-אאוט הגנרי: כל אלמנט שכבר יודע
	את גודלו יכול לשאת אותו, בלי שהקובץ הזה יצטרך להכיר שם מחלקה
	ספציפי מ-css/app (כמו job_card__photo, שהיה כאן קודם).
*/
.screen.is_loading .skeleton_target.avatar,
.screen.is_loading .skeleton_target.skeleton_target--sized{
	min-block-size: 0;
	min-inline-size: 0;
}

.screen.is_loading .skeleton_target::after{
	content: "";
	visibility: visible;

	position: absolute;
	inset: 0;

	border-radius: var(--border_radius_base, 8px);
	background: var(--skeleton_base);

	background-image: linear-gradient(
		to left,
		transparent 0%,
		var(--skeleton_shine) 50%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;

	animation: skeletonSweep 1.4s ease-in-out infinite;
}

:root{
	--skeleton_base: color-mix(in srgb, var(--text_color1) 12%, transparent);
	--skeleton_shine: color-mix(in srgb, var(--color_white, #fff) 55%, transparent);
}

/* RTL: הבזק נע מימין לשמאל, בכיוון הקריאה */
@keyframes skeletonSweep{
	from{ background-position: -110% 0; }
	to{ background-position: 110% 0; }
}

/* --- מצב שגיאה --- */

.screen_error{
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1, 8px);

	padding: var(--space_2, 16px);
	text-align: center;
}

.screen.is_failed .screen_error{
	display: flex;
}

/* מצב שגיאה מסתיר גם את השלד וגם את התוכן החלקי */
.screen.is_failed .skeleton_target{
	display: none;
}

.screen_error__icon{
	font-size: 1.9em;
	color: var(--color_warning);
}

.screen_error__title{
	font-weight: var(--font_weight_bold);
}

.screen_error__text{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

@media (prefers-reduced-motion: reduce){
	.screen.is_loading .skeleton_target::after{
		animation: none;
	}
}

}


/* ==== /css/app/components/social_profile.css ==== */


/*
	social_profile — עמוד פרופיל בסגנון רשת חברתית: באנר, אווטאר חופף,
	שורת סטטיסטיקות כמו "פרסומים/עוקבים", וכרטיסי חוות דעת שנראים כמו פיד.
	משמש את פרופיל המציל ופרופיל איש הקשר כאחד.
*/

@layer components{

/* --- באנר עליון: מלבן נקי בגרדיאנט מותג עמוק (לא גלי) — קרוב יותר לבאנר מקצועי --- */

.profile_banner{
	position: relative;
	height: 150px;
	margin-inline: calc( -1 * var(--page_padding_inline, 20px) );
	margin-block-start: calc( -1 * var(--page_padding_block, 20px) );
	background: linear-gradient(135deg, var(--color_primary_deepest), var(--color_primary_deep) 55%, var(--color_primary));
	overflow: hidden;
}

/* שכבת אור עדינה — נותנת עומק בלי להיראות "צבעונית"/ילדותית */
.profile_banner::before{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 15% -10%, rgb(255 255 255 / 0.18), transparent 60%);
}

.profile_banner__cover_icon{
	position: absolute;
	inset-inline-end: var(--space_3);
	inset-block-start: var(--space_2);
	font-size: 1.6em;
	color: rgb(255 255 255 / 0.22);
}

/* --- ראש הפרופיל: אווטאר גדול חופף לבאנר, שם, כותרת מקצועית --- */

.profile_head{
	position: relative;
	margin-block-start: -56px;
	z-index: 1;
}

.profile_head .avatar{
	border: 4px solid var(--body_background_color, #F7FBFD);
	box-shadow: var(--shadow_3);
}

/* תג אימות — עיגול קטן חופף לפינת האווטאר, כמו בפייסבוק/לינקדאין */
.profile_head__verified_badge{
	position: absolute;
	inset-inline-end: 2%;
	inset-block-end: 2%;
	width: 26%;
	aspect-ratio: 1 / 1;
	min-width: 22px;
	border-radius: 100%;
	background: var(--color_info);
	color: var(--color_white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7em;
	border: 3px solid var(--body_background_color, #F7FBFD);
}

.profile_head__name{
	font-size: var(--font_size_largest);
	font-weight: var(--font_weight_black);
	color: var(--color_primary_deepest);
	letter-spacing: -0.01em;
}

.profile_head__tagline{
	color: var(--text_color1_bright);
	font-weight: var(--font_weight_semi_bold);
	font-size: var(--font_size_small);
	margin-block-start: 3px;
}

/* --- שורת סטטיסטיקות בסגנון רשת חברתית --- */

.profile_stats{
	display: flex;
	justify-content: center;
	gap: var(--space_4);
	margin-block: var(--space_2);
}

.profile_stats__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.profile_stats__value{
	font-size: var(--font_size_larger);
	font-weight: var(--font_weight_black);
	color: var(--color_primary_deepest);
	font-variant-numeric: tabular-nums;
}

.profile_stats__label{
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brighter);
}

/* --- שורת פעולות ראשית: כפתורים עגולים גדולים, כמו "הודעה"/"עקוב" --- */

.profile_action_row{
	display: flex;
	justify-content: center;
	gap: var(--space_2);
	margin-block-end: var(--space_2);
}

.profile_action_row .button{
	border-radius: var(--border_radius_roundest);
}

/* --- כרטיסי "פיד": חוות דעת שנראות כמו פוסטים, לא כמו שורות טבלה --- */

.feed_card{
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_1);
	padding: var(--space_2);
	text-align: start;
	margin-block-end: var(--space_1);
}

.feed_card__head{
	display: flex;
	align-items: center;
	gap: 10px;
}

.feed_card__author{
	font-weight: var(--font_weight_bold);
	font-size: var(--font_size_small);
	text-decoration: none;
	color: inherit;
}

.feed_card__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
	line-height: var(--line_height_loose);
}

.feed_card__likes{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
}

.feed_card__likes .fa-heart{
	color: var(--color_danger);
}

/* --- כותרת סקציית פיד --- */

.feed_section_title{
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: var(--font_weight_bold);
	color: var(--color_primary_deepest);
	margin-block: var(--space_2) var(--space_1);
}

.feed_section_title .icon{
	color: var(--color_primary);
}

}


/* ==== /css/lib/components/footer.css ==== */


/* ===== footer — קישורים משפטיים וקרדיטים ===== */

/*
	⚠️ powered_by והלוגו אינם כאן: הם עברו ל-powered_by.css.
	   הסיבה — מסך הספלאש מציג אותם, והקובץ הזה נטען ב-css_deferred.
	   ראו את הערת הכותרת שם.
*/

@layer components{

footer.full_policy_and_credits_footer{
	--my_font_size: calc( var(--font_size) * 0.87 );

	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
	line-height: calc( var(--line_height) * 1.8 );
	color: var(--text_color1_brighter);
	font-weight: var(--font_weight_light);
	font-size: var(--my_font_size);
	margin-block: 10px;
}

footer.full_policy_and_credits_footer .policy{
	width: 100%;
}

footer.full_policy_and_credits_footer .legal_links{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5%;
}

footer.full_policy_and_credits_footer .legal_links a{
	display: inline-flex;
	align-items: center;
}

footer.full_policy_and_credits_footer .legal_links a::before{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "";
	font-size: calc( var(--my_font_size) * 0.63 );
	padding-inline-end: 10px;
	text-decoration: none;
}

footer.full_policy_and_credits_footer .legal_links a.terms::before{
	content: "\f570";
}

footer.full_policy_and_credits_footer .legal_links a.privacy_policy::before{
	content: "\f52b";
}

footer.full_policy_and_credits_footer .legal_links a.accessibility_policy::before{
	content: "\f5ca";
}

footer.full_policy_and_credits_footer .powered_by{
	display: flex;
	justify-content: center;
}

}


/* ==== /css/app/screens/signup.css ==== */


/* ===== מסך בחירת תפקיד / הרשמה ===== */

@layer screens{

.screen_signup > .content{
	justify-content: center;
}

.screen_signup .content .logo{
	--logo_size: var(--logo_size_biggest);
}

.screen_signup .content .row.hero{
	margin-block: 20px;
	min-height: calc( 100dvh - var(--page_padding_block) - var(--footer_height) - 40px );
}

.screen_signup .content .role_selection{
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.screen_signup .content .role_selection::before{
	content: "";
	height: 63%;
	position: absolute;
	border-inline-end: 1px dashed var(--text_color1_brighter);
}

.screen_signup .assafmedia_logo{
	--assafmedia_logo_size: 91px;
}

}


/* ==== /css/app/screens/phone.css ==== */


/* ===== מסך הזנת טלפון (הרשמה חלק 1) ===== */

@layer screens{

.screen_phone .content{
	justify-content: space-between;
	gap: var(--space_5);
}

.screen_phone .phone_form{
	width: min(440px, 100%);
	margin-inline: auto;
}

.screen_phone .phone_form .button{
	width: 100%;
	margin-block-start: var(--space_3);
}

.screen_phone .back_to_menu{
	margin-block-start: var(--space_3);
	text-align: center;
	display: block;
}

}


/* ==== /css/app/screens/app_shell.css ==== */


/* ===== תבניות משותפות למסכי האפליקציה הפנימיים ===== */

@layer screens{

/* מסך עם Tab bar — משאיר מקום למטה */
.has_tab_bar > .content{
	padding-block-end: calc( var(--space_7) + var(--space_5) );
}

/* מסכי רשימה/טופס — תוכן מלמעלה, לא ממורכז אנכית */
.screen_board > .content,
.screen_form > .content,
.screen_profile > .content,
.screen_onboarding > .content{
	justify-content: flex-start;
	gap: var(--space_4);
	text-align: start;
}

/* מסכי סטטוס (הצלחה/HOLD/פוש) — ממורכזים */
.screen_flow > .content{
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: var(--space_2);
}

.screen_flow .flow_icon{
	font-size: calc( var(--font_size) * 3.4 );
	line-height: 1;
	color: var(--color_primary);
}

.screen_flow.is_success .flow_icon{ color: var(--color_success); }
.screen_flow.is_hold .flow_icon{ color: var(--color_hold); }

.screen_flow .flow_text{
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
	line-height: var(--line_height_loosest);
	max-width: 46ch;
}

/* טופס במסך — רוחב נעים */
.app_form{
	width: min(480px, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space_4);
}

.app_form .button[type="submit"],
.app_form > .button{
	margin-block-start: var(--space_2);
}

/* רשימת כרטיסים */
.board_list{
	display: flex;
	flex-direction: column;
	gap: var(--space_4);
	width: min(560px, 100%);
	margin-inline: auto;
}

/* שורת כותרת + סינון */
.board_toolbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	width: min(560px, 100%);
	margin-inline: auto;
}

.board_toolbar .chips{
	display: flex;
	gap: var(--space_1);
	flex-wrap: wrap;
}

/* שורת ניווט עליונה במסך פנימי */
.screen_topbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_1);
	width: 100%;
}


/* טריגרי דמו זמניים — להסרה כשהלוגיקה תיכתב */
.demo_row{
	display: flex;
	align-items: center;
	gap: var(--space_2);
	flex-wrap: wrap;
	margin-block-start: var(--space_3);
	padding: var(--space_1);
	border: 1px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
}

.demo_row__label{
	font-size: var(--font_size_small);
	color: var(--text_color1_brightest);
}


.screen_topbar__title{
	flex: 1;
	text-align: center;
	font-weight: var(--font_weight_bold);
	font-size: var(--font_size_large);
	color: var(--color_primary_deepest);
}


/* שעון משמרת פעילה */
.shift_clock{
	font-size: clamp(3em, 14dvw, 4.6em);
	font-weight: var(--font_weight_black);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	color: var(--color_primary_deepest);
	line-height: var(--line_height_loose);
	transition: opacity 0.3s ease-in-out;
}


.shift_now{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.shift_now bdo{
	font-variant-numeric: tabular-nums;
	font-weight: var(--font_weight_bold);
	color: var(--color_primary_deep);
}

}


/* ==== /css/app/screens/otp.css ==== */


/* ===== מסך אימות קוד (OTP) ===== */

@layer screens{

.screen_otp > .content{
	justify-content: center;
	gap: var(--space_3);
}

.screen_otp .otp_form{
	width: min(440px, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_2);
	text-align: center;
}

.screen_otp .otp_form .button--large{
	width: 100%;
}

}


/* ==== /css/app/screens/board.css ==== */


/* ===== לוחות: לוח משרות (מציל), המשרות שלי (מעסיק), מועמדים ===== */

@layer screens{

.kpi_row{
	display: flex;
	gap: var(--space_2);
	justify-content: center;
	flex-wrap: wrap;
	width: min(560px, 100%);
	margin-inline: auto;
}

/* כרטיס מועמד */
.candidate_card{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

.candidate_card__person{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.candidate_card__name{
	font-weight: var(--font_weight_bold);
	font-size: var(--font_size_large);
}

.candidate_card__note{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loose);
}

.candidate_card__actions{
	display: flex;
	gap: var(--space_1);
	flex-wrap: wrap;
	margin-block-start: var(--space_1);
	padding-block-start: var(--space_1);
	border-block-start: 1px solid var(--color_primary_softer);
}

}


/* ==== /css/app/screens/job_details.css ==== */


/* ===== מסך פרטי משרה ===== */

@layer screens{

.screen_job_details > .content{
	justify-content: flex-start;
	gap: var(--space_2);
	text-align: start;
}

.screen_job_details .details_card{
	width: min(560px, 100%);
	margin-inline: auto;
}

.screen_job_details .employer_row{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	margin-block-start: var(--space_1);
	padding-block-start: var(--space_1);
	border-block-start: 1px solid var(--color_primary_softer);
}


/* מרווח תחתון כדי שהתוכן לא ייחתך מתחת ל-floating_cta_bar */
.has_floating_cta > .content{
	padding-block-end: 210px;
}

}


/* ==== /css/app/screens/profile.css ==== */


/* ===== מסכי פרופיל: צפייה (מציל/מעסיק) ועריכה ===== */

@layer screens{

/* פריסת בסיס לראש פרופיל — ממורכזת אנכית. מסכים עם הבאנר החדש
   (social_profile.css) דורסים חלק מהמאפיינים כאן, וזה בסדר: אותה
   ספציפיות, שכבת screens גוברת, אבל display/text-align/gap עדיין
   נחוצים לכל מסך עם profile_head (כולל מסכים בלי באנר). */
.profile_head{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1);
	text-align: center;
	width: 100%;
}

/* טיפוגרפיית השם המודגשת מגיעה מ-components/social_profile.css בכוונה —
   כדי שכל מסכי הפרופיל (כולל זה של המעסיק ועריכת הפרופיל העצמי)
   ישתמשו באותה היררכיה. לא לשכפל .profile_head__name כאן. */

.profile_head .tags{
	display: flex;
	gap: var(--space_1);
	flex-wrap: wrap;
	justify-content: center;
}

.profile_meta{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
	width: min(480px, 100%);
	margin-inline: auto;
}

.profile_meta__item{
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
}

.profile_meta__item .icon{
	color: var(--color_primary);
	width: 1.2em;
	text-align: center;
}

}


/* ==== /css/app/decorations.css ==== */


/* ===== דקורציית הרקע: גרדיאנט, שמש, דקל, כפכפים, אדוות ===== */

@layer screens{

#root > #background .layers .layer3{
	background: linear-gradient(var(--color_warning_softer) 0%, var(--color_primary_soft) 100%);
}

#root > #background .sun {
	--translateXTo: 42%;
	--translateYTo: -47%;

	min-width: 260px;
	max-width: 420px;
	width: 28dvw;
	aspect-ratio: 557 / 519;
	background-image: url("/img/sun.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
	translate: var(--translateXTo) var(--translateYTo);
	transform-origin: center center;
}

#root > #background .palm {
	--translateXTo: -28%;
	--translateYTo: -28%;

	background-image: url("/img/palm.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	min-width: 180px;
	max-width: 330px;
	width: 18dvw;
	aspect-ratio: 494 / 460;
	position: absolute;
	left: 0;
	top: 0;
	translate: var(--translateXTo) var(--translateYTo);
	transform-origin: center center;
}

#root > #background .starfish {
	background-image: url("/img/starfish.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 22dvw;
	max-width: 110px;
	aspect-ratio: 1 / 1;
	position: absolute;
	left: 0;
	bottom: 0;
	translate: -18% 22%;
	rotate: -8deg;

	/* מוסתר כברירת מחדל — מוצג רק במסכים נבחרים דרך .is_visible (animateThen.js) */
	opacity: 0;
	scale: 0.6;
	pointer-events: none;
	transition: opacity 0.5s ease-out, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#root > #background .starfish.is_visible {
	opacity: 1;
	scale: 1;
}

#root > #background .flipflops {
	--translateXTo: 18%;
	--translateYTo: 18%;
	--rotateTo: 320deg;

	background-image: url("/img/flipflops.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	min-width: 140px;
	max-width: 220px;
	width: 13dvw;

	aspect-ratio: 417 / 484;
	position: absolute;
	right: 0;
	bottom: 0;
	translate: var(--translateXTo) var(--translateYTo);
	transform-origin: center center;
	rotate: var(--rotateTo);
}

#root > #background .ripples{
	position: absolute;
	left: 0;
	bottom: 0;
}

#root > #background .ripples > .ripple{
	translate: -50% 50%;
	border-radius: 100%;
	border: 100px solid var(--color_primary);
	width: 100vh;
	aspect-ratio: 1 / 1;
	position: absolute;
	left: 0;
	bottom: 0;
	scale: 1.2;
	opacity: 0.04;
}

/* --- ערכי אנימציה ספציפיים לדקורציות --- */

.animate_me.roll_in.sun{
	--scaleFrom: 0.85;
	--scaleTo: 1;
	--opacityFrom: 0;
	--opacityTo: 1;
	--rotateFrom: -120deg;
	--rotateTo: 0deg;
	--translateXFrom: 100%;
}

.animate_me.roll_in.flipflops{
	--scaleFrom: 0.85;
	--scaleTo: 1;
	--opacityFrom: 0;
	--opacityTo: 1;
	--rotateFrom: 420deg;
	--translateXFrom: 100%;

	--animation1-delay: 1s;
	--animation2-delay: 1s;
	--animation3-delay: 1s;
	--animation4-delay: 1s;
}

.animate_me.roll_in.palm{
	--scaleFrom: 0.2;
	--scaleTo: 1;
	--opacityFrom: 0.01;
	--opacityTo: 1;
	--rotateFrom: -80deg;
	--rotateTo: 0deg;
	--translateXFrom: -50%;
}


/* --- כיוונון ה-idle לכל דקורציה (ערכים בלבד, המנוע בפריסטים) --- */

/* הדקל מתנדנד סביב אזור הגזע, לא סביב המרכז */
#root > #background .palm.sway{
	transform-origin: 18% 8%;
	--rotateFrom: 0deg; /* מתחיל בדיוק ממצב המנוחה — בלי קפיצה בהחלפה */
	--rotateTo: 5deg;
	--animation1-duration: 3.2s;
}

/* הכפכפים צפים סביב מנוחתם (18%/18%, 320 מעלות) */
#root > #background .flipflops.bobbing{
	--translateXFrom: 18%;
	--translateXTo: 18%;
	--translateYFrom: 18%;
	--translateYTo: 8%;

	--rotateFrom: 320deg; /* בדיוק זווית המנוחה של הכניסה — התחלה חלקה */
	--rotateTo: 330deg;

	--animation1-duration: 2.6s;
	--animation2-duration: 3.8s;
}

/* השמש נושמת קצת יותר לאט מהלוגו — שלא ינועו יחד */
#root > #background .sun.sun_glow{
	--scaleFrom: 1;
	--scaleTo: 1.12;
	--animation1-duration: 4.8s;
	--animation2-duration: 55s; /* סיבוב מורגש */
}

}

@layer utilities{

/*
	פריסטי idle של הדקורציות — הועברו מ-app/css/lib/animations.css.
	אלה שמות פריסט גנריים (sun_glow, sway, bobbing, wiggle) שממלכת
	animate_me המנוע (lib) מזהה אוטומטית לפי מחלקה, אבל הערכים עצמם
	מכוילים בדיוק לאלמנטים האלה (שמש/דקל/כפכפים/כוכב ים) ולכן שייכים
	כאן, לא בספרייה הגנרית.
*/

/* זוהר שמש: סיבוב אינסופי איטי + נשימה עדינה */
.animate_me.sun_glow{
	--scaleFrom: 1;
	--scaleTo: 1.05;
	--rotateFrom: 0deg;
	--rotateTo: 360deg;

	--animation1-name: animateMe__scale;
	--animation1-duration: 6s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	--animation2-name: animateMe__rotate;
	--animation2-duration: 150s;
	--animation2-direction: normal;
	--animation2-timing-function: linear;

	will-change: transform;
}

/* נדנוד ברוח: סיבוב קל הלוך-ושוב סביב נקודת עיגון */
.animate_me.sway{
	--rotateFrom: -2deg;
	--rotateTo: 2.5deg;

	--animation1-name: animateMe__rotate;
	--animation1-duration: 4s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	will-change: transform;
}

/* ציפה על מים: בובינג אנכי + ניענוע זווית */
.animate_me.bobbing{
	--animation1-name: animateMe__translate;
	--animation1-duration: 3.6s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	--animation2-name: animateMe__rotate;
	--animation2-duration: 5.2s;
	--animation2-direction: alternate;
	--animation2-timing-function: ease-in-out;

	will-change: transform;
}

/* כוכב ים: ניענוע קליל + "נשימה" קטנה — משהו שובבי, לא רציני מדי */
.animate_me.wiggle{
	--rotateFrom: -12deg;
	--rotateTo: -4deg;

	--scaleFrom: 1;
	--scaleTo: 1.08;

	--animation1-name: animateMe__rotate;
	--animation1-duration: 2.4s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	--animation2-name: animateMe__scale;
	--animation2-duration: 3.4s;
	--animation2-direction: alternate;
	--animation2-timing-function: ease-in-out;

	will-change: transform;
}

}


/* ==== /css/lib/animate_me.css ==== */


/*
	animate_me — מנוע אנימציות מבוסס משתני CSS.
	API: 4 סלוטים (animation1..animation4), כל סלוט נשלט דרך
	--animationN-name / -duration / -delay / -repeat / -timing-function /
	-direction / -fill-mode / -play-state.
	דילאיים וערכים מספריים מוגדרים אינליין (style="--animation1-delay: 2s")
	או בפריסטים — אין סולמות מחלקות לערכים מספריים.
	הקובץ מתנהג כספרייה: משתני הקיפרפריימים (--scaleFrom וכו') הם
	camelCase בכוונה, כגבול API של ה"ספרייה".
*/

@layer utilities{

/* --- כיבוי אנימציות: העדפת משתמש, הדפסה, או מחלקת no_animations --- */

@media print, (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
}

.no_animations {
	scroll-behavior: auto !important;
}

.no_animations *,
.no_animations *::before,
.no_animations *::after {
	animation-delay: 0s !important;
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
}

/* --- keyframes --- */

@keyframes animateMe__none{
	from{ perspective: initial; }
	to{ perspective: initial; }
}

@keyframes animateMe__scale{
	from{ scale: var(--scaleFrom, 1); }
	to{ scale: var(--scaleTo, 2); }
}

@keyframes animateMe__lineHeight{
	from{ line-height: var(--lineHeightFrom, 100%); }
	to{ line-height: var(--lineHeightTo, 150%); }
}

@keyframes animateMe__opacity{
	from{ opacity: var(--opacityFrom, 1); }
	to{ opacity: var(--opacityTo, 0); }
}

@keyframes animateMe__rotate{
	0%{ rotate: var(--rotateFrom, 0deg); }
	100%{ rotate: var(--rotateTo, 30deg); }
}

@keyframes animateMe__translate{
	0%{ translate: var(--translateXFrom, 0) var(--translateYFrom, 0); }
	100%{ translate: var(--translateXTo, 30%) var(--translateYTo, 30%); }
}

@keyframes animateMe__bouncing{
	0%, 25%, 40%{
		transform:
			translateY(var(--translateYFrom, 0))
			rotate(var(--rotateFrom, 0deg))
			scale(var(--scaleFrom, 1));
	}
	60%{
		transform:
			translateY(calc( var(--translateYTo, 15%) * 1.2 ))
			rotate(var(--rotateTo, -6deg))
			scale(calc( var(--scaleTo, 1.1) / 1.2 ));
	}
	80%{
		transform:
			translateY(calc( var(--translateYTo, 15%) * -2 ))
			rotate(var(--rotateTo, 6deg))
			scale(calc( var(--scaleTo, 1.1) * 1.05 ));
	}
	100%{
		transform:
			translateY(var(--translateYFrom, 0))
			rotate(var(--rotateFrom, 0deg))
			scale(var(--scaleFrom, 1));
	}
}

@keyframes animateMe__spinZ{
	0%, 100%{ transform: scaleX(1); }
	50%{ transform: scaleX(0.18); }
}

/* --- ברירות מחדל לארבעת הסלוטים --- */

:root{
	--animation1-name: animateMe__none;
	--animation2-name: animateMe__none;
	--animation3-name: animateMe__none;
	--animation4-name: animateMe__none;

	--animation1-duration: 1s;
	--animation2-duration: 1s;
	--animation3-duration: 1s;
	--animation4-duration: 1s;

	--animation1-repeat: infinite;
	--animation2-repeat: infinite;
	--animation3-repeat: infinite;
	--animation4-repeat: infinite;

	--animation1-delay: 0s;
	--animation2-delay: 0s;
	--animation3-delay: 0s;
	--animation4-delay: 0s;

	--animation1-timing-function: ease-in-out;
	--animation2-timing-function: ease-in-out;
	--animation3-timing-function: ease-in-out;
	--animation4-timing-function: ease-in-out;

	--animation1-direction: alternate;
	--animation2-direction: alternate;
	--animation3-direction: alternate;
	--animation4-direction: alternate;

	--animation1-fill-mode: both;
	--animation2-fill-mode: both;
	--animation3-fill-mode: both;
	--animation4-fill-mode: both;

	--animation1-play-state: paused;
	--animation2-play-state: paused;
	--animation3-play-state: paused;
	--animation4-play-state: paused;
}

.animate_me{
	backface-visibility: hidden;

	animation:
		var(--animation1-name)
		var(--animation1-duration)
		var(--animation1-timing-function)
		var(--animation1-delay)
		var(--animation1-repeat)
		var(--animation1-direction)
		var(--animation1-fill-mode)
		var(--animation1-play-state),

		var(--animation2-name)
		var(--animation2-duration)
		var(--animation2-timing-function)
		var(--animation2-delay)
		var(--animation2-repeat)
		var(--animation2-direction)
		var(--animation2-fill-mode)
		var(--animation2-play-state),

		var(--animation3-name)
		var(--animation3-duration)
		var(--animation3-timing-function)
		var(--animation3-delay)
		var(--animation3-repeat)
		var(--animation3-direction)
		var(--animation3-fill-mode)
		var(--animation3-play-state),

		var(--animation4-name)
		var(--animation4-duration)
		var(--animation4-timing-function)
		var(--animation4-delay)
		var(--animation4-repeat)
		var(--animation4-direction)
		var(--animation4-fill-mode)
		var(--animation4-play-state);
}

span.animate_me,
strong.animate_me,
del.animate_me,
ins.animate_me,
mark.animate_me,
a.animate_me,
code.animate_me,
img.animate_me,
label.animate_me,
i.animate_me{
	display: inline-block;
}

/* --- הפעלה כשנכנסים ל-viewport (עובד עם js_watch_visibility) --- */

.animate_me.animate_on_visible{
	--animation1-play-state: paused;
	--animation2-play-state: paused;
	--animation3-play-state: paused;
	--animation4-play-state: paused;
}

.animate_me.animate_on_visible.is_visible{
	--animation1-play-state: running;
	--animation2-play-state: running;
	--animation3-play-state: running;
	--animation4-play-state: running;
}

/* --- שליטת ריצה --- */

.animate_me.loop{
	--animation1-direction: alternate !important;
	--animation2-direction: alternate !important;
	--animation3-direction: alternate !important;
	--animation4-direction: alternate !important;
}

.animate_me.stopped,
.animate_me.paused{
	--animation1-play-state: paused !important;
	--animation2-play-state: paused !important;
	--animation3-play-state: paused !important;
	--animation4-play-state: paused !important;
}

.animate_me.play,
.animate_me.running{
	--animation1-play-state: running !important;
	--animation2-play-state: running !important;
	--animation3-play-state: running !important;
	--animation4-play-state: running !important;
}

/* --- בחירת keyframes לכל סלוט --- */

.animate_me.animation1-scale{ --animation1-name: animateMe__scale; }
.animate_me.animation2-scale{ --animation2-name: animateMe__scale; }
.animate_me.animation3-scale{ --animation3-name: animateMe__scale; }
.animate_me.animation4-scale{ --animation4-name: animateMe__scale; }

.animate_me.animation1-translate{ --animation1-name: animateMe__translate; }
.animate_me.animation2-translate{ --animation2-name: animateMe__translate; }
.animate_me.animation3-translate{ --animation3-name: animateMe__translate; }
.animate_me.animation4-translate{ --animation4-name: animateMe__translate; }

.animate_me.animation1-rotate{ --animation1-name: animateMe__rotate; }
.animate_me.animation2-rotate{ --animation2-name: animateMe__rotate; }
.animate_me.animation3-rotate{ --animation3-name: animateMe__rotate; }
.animate_me.animation4-rotate{ --animation4-name: animateMe__rotate; }

.animate_me.animation1-opacity{ --animation1-name: animateMe__opacity; }
.animate_me.animation2-opacity{ --animation2-name: animateMe__opacity; }
.animate_me.animation3-opacity{ --animation3-name: animateMe__opacity; }
.animate_me.animation4-opacity{ --animation4-name: animateMe__opacity; }

.animate_me.animation1-bouncing{ --animation1-name: animateMe__bouncing; }
.animate_me.animation2-bouncing{ --animation2-name: animateMe__bouncing; }
.animate_me.animation3-bouncing{ --animation3-name: animateMe__bouncing; }
.animate_me.animation4-bouncing{ --animation4-name: animateMe__bouncing; }

/* --- חזרות --- */

.animate_me.animation1-repeat-infinite{ --animation1-repeat: infinite; }
.animate_me.animation2-repeat-infinite{ --animation2-repeat: infinite; }
.animate_me.animation3-repeat-infinite{ --animation3-repeat: infinite; }
.animate_me.animation4-repeat-infinite{ --animation4-repeat: infinite; }

.animate_me.animation1-repeat-1{ --animation1-repeat: 1; }
.animate_me.animation2-repeat-1{ --animation2-repeat: 1; }
.animate_me.animation3-repeat-1{ --animation3-repeat: 1; }
.animate_me.animation4-repeat-1{ --animation4-repeat: 1; }

/* --- play state --- */

.animate_me.animation1-play-state-running{ --animation1-play-state: running; }
.animate_me.animation2-play-state-running{ --animation2-play-state: running; }
.animate_me.animation3-play-state-running{ --animation3-play-state: running; }
.animate_me.animation4-play-state-running{ --animation4-play-state: running; }

/* --- משכים סמנטיים --- */

.animate_me.animation1-duration-slowest{ --animation1-duration: 10s; }
.animate_me.animation1-duration-slower{ --animation1-duration: 7s; }
.animate_me.animation1-duration-slow{ --animation1-duration: 5s; }
.animate_me.animation1-duration-normal{ --animation1-duration: 3s; }
.animate_me.animation1-duration-fast{ --animation1-duration: 2s; }
.animate_me.animation1-duration-faster{ --animation1-duration: 1s; }
.animate_me.animation1-duration-fastest{ --animation1-duration: 0.5s; }

.animate_me.animation2-duration-slowest{ --animation2-duration: 10s; }
.animate_me.animation2-duration-slower{ --animation2-duration: 7s; }
.animate_me.animation2-duration-slow{ --animation2-duration: 5s; }
.animate_me.animation2-duration-normal{ --animation2-duration: 3s; }
.animate_me.animation2-duration-fast{ --animation2-duration: 2s; }
.animate_me.animation2-duration-faster{ --animation2-duration: 1s; }
.animate_me.animation2-duration-fastest{ --animation2-duration: 0.5s; }

.animate_me.animation3-duration-slowest{ --animation3-duration: 10s; }
.animate_me.animation3-duration-slower{ --animation3-duration: 7s; }
.animate_me.animation3-duration-slow{ --animation3-duration: 5s; }
.animate_me.animation3-duration-normal{ --animation3-duration: 3s; }
.animate_me.animation3-duration-fast{ --animation3-duration: 2s; }
.animate_me.animation3-duration-faster{ --animation3-duration: 1s; }
.animate_me.animation3-duration-fastest{ --animation3-duration: 0.5s; }

.animate_me.animation4-duration-slowest{ --animation4-duration: 10s; }
.animate_me.animation4-duration-slower{ --animation4-duration: 7s; }
.animate_me.animation4-duration-slow{ --animation4-duration: 5s; }
.animate_me.animation4-duration-normal{ --animation4-duration: 3s; }
.animate_me.animation4-duration-fast{ --animation4-duration: 2s; }
.animate_me.animation4-duration-faster{ --animation4-duration: 1s; }
.animate_me.animation4-duration-fastest{ --animation4-duration: 0.5s; }

}


/* ==== /css/lib/animations.css ==== */


/* ===== פריסטים גנריים של animate_me (לא ספציפיים למסך) ===== */

@layer utilities{

.animate_me.spin{
	--scaleFrom: 1;
	--scaleTo: 1.1;

	--rotateFrom: 0deg;
	--rotateTo: 360deg;

	--animation1-name: animateMe__rotate;
	--animation1-duration: 60s;
	--animation1-timing-function: linear;
	--animation1-direction: normal;

	--animation2-name: animateMe__scale;
	--animation2-duration: 30s;
	--animation2-delay: 3s;
	--animation2-timing-function: ease-in-out;
	--animation2-direction: normal;

	will-change: transform;
}

.animate_me.roll_in{
	--animation1-name: animateMe__scale;
	--animation1-duration: 3s;
	--animation1-timing-function: ease-in-out;
	--animation1-direction: normal;

	--animation2-name: animateMe__opacity;
	--animation2-duration: 3s;
	--animation2-timing-function: ease-in-out;
	--animation2-direction: normal;

	--animation3-name: animateMe__rotate;
	--animation3-duration: 3s;
	--animation3-timing-function: ease-in-out;
	--animation3-direction: normal;

	--animation4-name: animateMe__translate;
	--animation4-duration: 3s;
	--animation4-timing-function: ease-in-out;
	--animation4-direction: normal;

	--animation1-repeat: 1;
	--animation2-repeat: 1;
	--animation3-repeat: 1;
	--animation4-repeat: 1;
}

.animate_me.breathing{
	--scaleFrom: 0.91;
	--scaleTo: 1;

	--animation1-name: animateMe__scale;
	--animation1-duration: 4.2s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	will-change: transform;
}

.animate_me.ripple{
	--scaleFrom: 0;
	--scaleTo: 1.8;
	--opacityFrom: 0.14;
	--opacityTo: 0;

	--animation1-name: animateMe__scale;
	--animation1-duration: 6s;
	--animation1-direction: normal;
	--animation1-timing-function: ease-out;

	--animation2-name: animateMe__opacity;
	--animation2-duration: 6s;
	--animation2-direction: normal;
	--animation2-timing-function: ease-out;

	will-change: transform, opacity;
}

.animate_me.fadeOut{
	--opacityFrom: 1;
	--opacityTo: 0;

	--animation1-repeat: 1;
	--animation1-name: animateMe__opacity;
	--animation1-duration: 0.22s; /* מהיר מספיק שלא יורגש כהשהיה, איטי מספיק שלא יורגש כקפיצה */
	--animation1-direction: normal;
	--animation1-timing-function: ease-in;
}

.animate_me.fadeIn{
	--opacityFrom: 0;
	--opacityTo: 1;

	--animation1-repeat: 1;
	--animation1-name: animateMe__opacity;
	--animation1-duration: 0.28s;
	--animation1-direction: normal;
	--animation1-timing-function: ease-out;
}


/* --- keyframes של רכיבי הטעינה --- */

/* --- כניסה מדורגת לילדי טופס/רשימה (animateThen.js: staggerScreenIn) --- */

.stagger_in_item{
	animation: staggerFieldIn 0.4s ease-out backwards;
}

@keyframes staggerFieldIn{
	from{ opacity: 0; translate: 0 10px; }
	to{ opacity: 1; translate: 0 0; }
}

@keyframes loaderRing{
	to{ rotate: 360deg; }
}

@keyframes skeletonShimmer{
	to{ translate: 100% 0; }
}


/* --- keyframes של מודאל ו-Toast --- */

@keyframes modalIn{
	from{ opacity: 0; scale: 0.94; }
	to{ opacity: 1; scale: 1; }
}

@keyframes toastIn{
	from{ opacity: 0; translate: 0 14px; }
	to{ opacity: 1; translate: 0 0; }
}

}


/* ==== /css/lib/responsive.css ==== */


/* ===== התאמות רספונסיביות ופלטפורמה ===== */

@layer overrides{

@media all and (orientation: portrait) {
	:root {
		--page_padding_block: 28dvw;
		--page_padding_inline: 2dvh;
		--font_size: 19px;

		--logo_size: clamp(70px, 9dvh, 80px);
	}

	.section_title{
		margin-block-start: 21px;
		margin-block-end: 5px;
	}

	.fancy_button {
		grid-template-columns: 80% 20%;
	}
}

}