@charset "utf-8";
@layer reset, vendor, tokens, base, layout, components, screens, utilities, overrides;
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.rtl.min.css") layer(vendor);
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css") layer(vendor);

/* ==== /css/lib/layers.css ==== */


/*
	Cascade layers — סדר העדיפויות של כל האפליקציה.
	מוקדם = חלש, מאוחר = חזק. ספריות צד-שלישי נכנסות ל-vendor
	כדי שהקוד שלנו תמיד ינצח אותן בלי מלחמות ספציפיות.
	חשוב: reset חייב להיות חלש מ-vendor, אחרת font:inherit של ה-reset
	דורס את הגופן של FontAwesome והאייקונים נעלמים.
*/






/* ==== /css/lib/reset.css ==== */


@layer reset{

*{
	box-sizing: inherit;
}

*::before, *::after{
	box-sizing: inherit;
	padding: 0;
	margin: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	box-sizing: border-box;
}

body {
	line-height: 1;
	font-size: 100%;
	font-family: Arial, sans-serif;
}

b,
strong {
	font-weight: bold;
}

ul{
	list-style: none;
}

hr {
	box-sizing: content-box;
	height: 0;
	color: inherit;
	overflow: visible;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

button,
input,
optgroup,
select,
textarea{
	line-height: inherit;
	border: 1px solid currentColor;

	/*
		אפס padding כברירת מחדל — נודד מפרויקט לפרויקט.

		לדפדפנים יש ריפוד ברירת מחדל שונה לכל אחד מהאלמנטים האלה
		(ובמיוחד ל-<button>, שנבדל גם בין מערכות הפעלה). רכיבי ה-UI
		שבונים על גביהם (.button, .fancy_button וכו') קובעים ריפוד
		משלהם דרך משתני --my_padding_* — ובלי האיפוס כאן, ריפוד
		הדפדפן היה נערם עליו בשקט ומייצר גדלים לא עקביים בין דפדפנים.
	*/
	padding: 0;
}

button {
	overflow: visible;
	text-transform: none;
}

img,
video {
	height: auto;
	max-width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

dialog {
	background-color: inherit;
	border: solid;
	color: inherit;
	display: block;
	height: fit-content;
	left: 0;
	margin: auto;
	padding: 1em;
	position: absolute;
	right: 0;
	width: fit-content;
}

dialog:not([open]) {
	display: none;
}

canvas {
	display: inline-block;
}

}


/* ==== /css/lib/tokens.css ==== */


/* ===== טוקנים מבניים (לא-צבעוניים). צבעים יושבים ב-themes/ ===== */

@layer tokens{

:root{
	--max_content_width: 1400px;

	--page_padding_block: 2dvh;
	--page_padding_inline: 2dvw;

	--font_size: 23px;

	--font_size_smallest: calc( var(--font_size) / 1.4 );
	--font_size_smaller: calc( var(--font_size) / 1.2 );
	--font_size_small: calc( var(--font_size) / 1.1 );

	--font_size_base: var(--font_size);

	--font_size_large: calc( var(--font_size) * 1.2 );
	--font_size_larger: calc( var(--font_size) * 1.4 );
	--font_size_largest: calc( var(--font_size) * 1.8 );

	--font_family_base: "Assistant", "Rubik", Arial, sans-serif;
	--font_family_logo: "Rubik", "Assistant", Arial, sans-serif;

	--font_weight_thin: 200;
	--font_weight_light: 300;
	--font_weight_base: 400;
	--font_weight_medium: 500;
	--font_weight_semi_bold: 600;
	--font_weight_bold: 700;
	--font_weight_black: 800;

	--line_height: 1;

	--line_height_tightest: calc( var(--line_height) * 0.25 );
	--line_height_tighter: calc( var(--line_height) * 0.5 );
	--line_height_tight: calc( var(--line_height) * 0.75 );

	--line_height_base: var(--line_height);

	--line_height_loose: calc( var(--line_height) * 1.15 );
	--line_height_looser: calc( var(--line_height) * 1.25 );
	--line_height_loosest: calc( var(--line_height) * 1.5 );

	/* letter-spacing באחוזים לא נתמך בכל הדפדפנים — עובדים ב-em */
	--letter_spacing: normal;
	--word_spacing: normal;

	--logo_size: clamp(70px, 7.2dvw, 100px);

	--logo_size_smallest: calc( var(--logo_size) * 0.5 );
	--logo_size_smaller: calc( var(--logo_size) * 0.75 );
	--logo_size_small: calc( var(--logo_size) * 1 );

	--logo_size_big: calc( var(--logo_size) * 1.3 );
	--logo_size_bigger: calc( var(--logo_size) * 1.5 );
	--logo_size_biggest: calc( var(--logo_size) * 2 );

	--border_radius: 13px;

	--border_radius_squarest: calc( var(--border_radius) / 2 );
	--border_radius_even_more_square: calc( var(--border_radius) / 1.75 );
	--border_radius_more_square: calc( var(--border_radius) / 1.25 );

	--border_radius_base: var(--border_radius);

	--border_radius_round: calc( var(--border_radius) * 1.25 );
	--border_radius_rounder: calc( var(--border_radius) * 1.5 );
	--border_radius_roundest: calc( var(--border_radius) * 1.75 );


	/* ===== סולם מרווחים (8–56) ===== */
	--space_1: 8px;
	--space_2: 16px;
	--space_3: 24px;
	--space_4: 32px;
	--space_5: 40px;
	--space_6: 48px;
	--space_7: 56px;

	/* ===== 5 צללים ===== */
	--shadow_1: 0 1px 3px rgba(7, 61, 90, 0.08);
	--shadow_2: 1px 1px 15px rgba(0, 0, 0, 0.1);
	--shadow_3: 0 6px 18px rgba(7, 61, 90, 0.12);
	--shadow_4: 0 12px 28px rgba(7, 61, 90, 0.16);
	--shadow_5: 0 20px 44px rgba(7, 61, 90, 0.22);

	--box_shadow1: var(--shadow_2); /* תאימות לאחור */

	--footer_height: 0px;
}

}


/* ==== /css/app/themes/theme_bright_he.css ==== */


/* ===== ערכת נושא: ערכי צבע בלבד. אין כאן layout ואין רכיבים ===== */

@layer tokens{

:root{
	--color_white: #FFFFFF;
	--color_black: #000000;

	--color_primary: #33ADE3;
	--color_secondary: #D99B3E;

	--color_info: #0073AF;
	--color_success: #3FA96B;
	--color_warning: #F5C06B;
	--color_hold: #D99B3E;
	--color_danger: #EE4433;
	--color_error: #EE4433;

	--color_primary_deepest: #073D5A;
	--color_primary_deeper: rgb(15, 76, 110);
	--color_primary_deep: #0073AF;
	--color_primary_soft: #CCE9F6;
	--color_primary_softer: #E4F2FB;

	--color_success_deep: #2F7D4F;
	--color_success_soft: #E2F4E9;
	--color_success_softer: #F0FAF4;

	--color_danger_deep: #B3271A;
	--color_danger_soft: #FCE1DE;
	--color_danger_softer: #FDF0EE;

	--color_warning_deep: #AD7110;
	--color_warning_deeper: #54390C;
	--color_warning_soft: #F9F5CF;
	--color_warning_softer: #FBF9E6;

	--text_color1: #33454F;
	--text_color1_bright: #44545F;
	--text_color1_brighter: #697B87;
	--text_color1_brightest: #93A0AA;
}

}


/* ==== /css/lib/base.css ==== */


/* ===== בסיס: טיפוגרפיה וכללי גוף. כיוון (rtl) נקבע ב-html[dir] ===== */

@layer base{

body{
	font-size: var(--font_size);
	font-family: var(--font_family_base);
	color: var(--text_color1);
	line-height: var(--line_height);
	letter-spacing: var(--letter_spacing);
	word-spacing: var(--word_spacing);
}

.ltr {
	direction: ltr;
}

.rtl {
	direction: rtl;
}

.content{
	font-size: var(--font_size);
	font-weight: var(--font_weight_light);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
}

.content a:not(.fancy_button){
	color: var(--text_color1_brighter);
	text-decoration: underline dotted;
}

.section_title{
	font-size: var(--font_size_largest);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1_brighter);
	margin-block-end: 20px;
}

/*
	פוקוס גלוי, עקבי וברור מאוד לכל האתר — ניווט מקלדת מלא.
	מוגדר גלובלית כדי שלא נשכח לטפל ברכיב חדש; חוקים ספציפיים ברכיבים
	(button:focus-visible וכו') עדיין תקפים ופשוט מוסיפים דיוק, לא סותרים.
	טבעת כפולה (outline לבן + מסגרת כחולה) כדי שתיראה בבירור על כל רקע —
	גם על רקעים כהים/צבעוניים באפליקציה.
*/
:focus-visible{
	outline: 3px solid var(--color_primary_deep);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgb(255 255 255 / 0.9), 0 0 0 7px var(--color_primary_deep);
	border-radius: 4px;
	transition: none; /* פוקוס לא צריך "לאחר" — חייב להופיע מיידית */
}

/* על משטחים כהים (למשל כפתורי success/error מלאי צבע) הטבעת הלבנה כבר
   מספקת ניגודיות; לא צריך טיפול נפרד — box-shadow למעלה עובד בכל מצב. */

/* אלמנט שממוקד תוכנתית בשינוי מסך (jumpToScreen.js) ולא רלוונטי לניווט
   טאב רגיל — לא מציגים עליו את טבעת הפוקוס הבולטת, רק "קופצים" אליו
   עבור קוראי מסך. */
[data-programmatic-focus]:focus{
	outline: none;
	box-shadow: none;
}

}


/* ==== /css/lib/layout.css ==== */


/* ===== שלד האפליקציה: מערכת המסכים ושכבות הרקע ===== */

@layer layout{

/* --- screens --- */

#root > #screens{
	min-height: 100dvh;
	max-width: 100dvw;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#root > #screens > .screen{
	position: absolute;
	display: none;
	z-index: -10;
	width: 100%;
}

#root > #screens > .screen.is_pending{
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 10;
	min-height: 100dvh;
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
}

#root > #screens > .screen.is_current{
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 10;
	min-height: 100dvh;
	width: 100%;
	height: fit-content;
	overflow: hidden;
	opacity: 1;
}

#root > #screens > .screen > .content{
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;

	padding-block: var(--page_padding_block);
	padding-inline: var(--page_padding_inline);

	max-width: var(--max_content_width);
	margin: 0 auto;
	width: 100%;
}

#root > #screens > .screen .container{
	padding: 0;
	width: inherit;
}

/* --- background --- */

#root > #background{
	width: 100%;
	height: 100dvh;

	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	z-index: -1;
}

#root > #background .layers{
	height: 100dvh;
	max-height: inherit;
	position: relative;
	margin: 0 auto;
	top: 0;
}

#root > #background .layers .layer{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

#root > #background .layers .layer1{
	z-index: -1;
}

#root > #background .layers .layer2{
	z-index: -2;
}

#root > #background .layers .layer3{
	z-index: -2;
}

}


/* ==== /css/app/components/logo.css ==== */


/* ===== logo — לוגו האפליקציה (אייקון + שם + סלוגן), על כל גדליו ===== */

@layer components{

.logo{
	--my_line_height: calc( var(--line_height) * 0.80 );
	font-family: var(--font_family_logo);
	line-height: var(--my_line_height);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.logo::before{
	content: "";
	width: var(--logo_size);
	aspect-ratio: 494 / 369;
	background-image: url("/img/logo_icon.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.logo.landscape{
	display: flex;
	flex-direction: row;
}

.logo.landscape::before{
	margin-inline-end: 3%;
}

.logo .app_name{
	--my_font_size: calc( var(--logo_size) / 2.6 );

	width: var(--logo_size);
	font-size: var(--my_font_size);
	line-height: var(--my_line_height);
	margin: 0;
	color: var(--color_primary);
	text-align: right;
}

.logo .app_name span,
.logo .app_name strong {
	--my_font_size: calc( (var(--logo_size) / 2) - 10% );
	display: block;
	font-weight: 900;
	font-size: var(--my_font_size);
	text-indent: -2%;
}

.logo .app_name span{
	--my_letter_spacing: 0.11em;
	letter-spacing: var(--my_letter_spacing);
}

.logo .app_slogan{
	--my_font_size: calc( var(--logo_size) / 10 );
	--line_height: calc( var(--my_line_height) * 3 );

	display: none;
	font-family: "Assistant", sans-serif;
	font-size: var(--my_font_size);
	line-height: var(--line_height);
	color: var(--text_color1);
	font-weight: var(--font_weight_thin);
}

.logo.smallest{--logo_size: var(--logo_size_smallest);}
.logo.smaller{--logo_size: var(--logo_size_smaller);}
.logo.small{--logo_size: var(--logo_size_small);}
.logo.big{--logo_size: var(--logo_size_big);}
.logo.bigger{--logo_size: var(--logo_size_bigger);}
.logo.biggest{--logo_size: var(--logo_size_biggest);}

.logo.big .app_slogan,
.logo.bigger .app_slogan,
.logo.biggest .app_slogan{
	display: block;
}

.logo.landscape.big .app_slogan,
.logo.landscape.bigger .app_slogan,
.logo.landscape.biggest .app_slogan{
	display: none;
}

/*
	תיקון iOS: מרווח האותיות שהוגדר ל-span/strong (ראו למעלה) נראה
	צפוף מדי במנוע הרינדור של ספארי/WebKit על iPhone. הועבר לכאן
	מ-app/css/lib/responsive.css — זה תיקון לוורדמארק "מצא"/"מציל" הספציפי
	של האפליקציה הזו, לא כלל רספונסיבי כללי.
*/
body.iphone .logo .app_name span,
body.iphone .logo .app_name strong {
	text-indent: 0;
	--my_letter_spacing: 0.072em;
}

}


/* ==== /css/lib/components/loader.css ==== */


/* ===== loader — אינדיקטור טעינה (שלוש נקודות) ===== */

@layer components{

.loader.dots{
	display: flex;
	flex-direction: row;
	gap: 10%;
	justify-content: center;
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}

.loader.dots > .dot{
	--colorTo: var(--color_primary_deep);
	--colorFrom: var(--color_primary);

	width: 7%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--colorFrom);
}

.loader > .dot{
	animation: loader3Dots1 1s infinite ease-in-out;
}

.loader > .dot:nth-child(1){
	animation-delay: 0s;
}
.loader > .dot:nth-child(2){
	animation-delay: 0.33s;
}
.loader > .dot:nth-child(3){
	animation-delay: 0.66s;
}

@keyframes loader3Dots1 {
	0%{
		translate: 0 0;
		scale: 1;
		opacity: 1;
	}
	50%{
		background-color: var(--colorTo);
		translate: 0 -25%;
		scale: 1.25;
		opacity: 0.75;
	}
	100%{
		translate: 0 0;
		scale: 1;
		opacity: 1;
	}
}


/* --- טבעת ספינר --- */

.loader.ring{
	width: 44px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 100%;
	border: 4px solid var(--color_primary_soft);
	border-block-start-color: var(--color_primary);
	animation: loaderRing 0.9s linear infinite;
}

/* --- Skeleton (המבנה; ה-shimmer ב-animations.css) --- */

.skeleton{
	--my_background_color: var(--color_primary_softer);
	border-radius: var(--border_radius_base);
	background: var(--my_background_color);
	position: relative;
	overflow: hidden;
	min-height: 1em;
}

.skeleton::after{
	content: "";
	position: absolute;
	inset: 0;
	translate: -100% 0;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent);
	animation: skeletonShimmer 1.4s ease-in-out infinite;
}

.skeleton--line{ height: 1em; }
.skeleton--title{ height: 1.4em; width: 40%; }
.skeleton--circle{ border-radius: 100%; aspect-ratio: 1 / 1; width: 48px; min-height: 0; }
.skeleton--card{ height: 110px; border-radius: var(--border_radius_round); }


/* --- splash_progress: פס טעינה + אחוזים (ספלאש) --- */

.splash_progress{
	width: min(220px, 60dvw);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.splash_progress__track{
	width: 100%;
	height: 6px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
	overflow: hidden;
}

.splash_progress__fill{
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--color_primary), var(--color_primary_deep));
	border-radius: inherit;
	transition: width 0.3s ease-out;
}

.splash_progress__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

}


/* ==== /css/lib/components/powered_by.css ==== */


/* ===== powered_by — קרדיט היצרן + לוגו (רכיב בסיס רב-שימושי) ===== */

/*
	⚠️ הקובץ הזה שייך ל-css_critical, ולא במקרה: מסך הספלאש מציג את
	   הקרדיט, וכל עוד הרכיב ישב ב-footer.css (שנטען ב-css_deferred)
	   הספלאש נצבע בלעדיו — כלומר בלי הלוגו, ועם שני שורות הטקסט
	   החלופי גלויות במקומו, כי text-indent טרם הוחל. תקלה שקטה:
	   שום שגיאה, רק מסך פתיחה שבור לרגע.

	   הטקסט בתוך <a> נשאר בכוונה (נגישות + SEO) ומוסתר ב-text-indent,
	   ולכן הכלל הזה חייב להגיע יחד עם הציור הראשון ולא אחריו.

	   הווריאנט של הפוטר המלא (‎.full_policy_and_credits_footer .powered_by)
	   נשאר ב-footer.css — הוא מרחיב את הרכיב הזה, לא בונה אותו.
*/

@layer components{

.powered_by{
	--assafmedia_logo_size: 130px;

	width: var(--assafmedia_logo_size);
	margin-inline: auto;
	margin-block: 20px;
	color: var(--text_color1);
}

.powered_by .powered_by_label{
	display: block;
	font-weight: var(--font_weight_thin);
	font-size: calc( var(--assafmedia_logo_size) / 15 );
	text-align: left;
	translate: 0px calc( var(--assafmedia_logo_size) / 15 );
}

.assafmedia_logo{
	display: block;
	width: var(--assafmedia_logo_size);
	aspect-ratio: 300 / 70;
	overflow: hidden;
	text-indent: -999vw;
	background-image: url("/img/assafmedia_logo.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

}


/* ==== /css/app/screens/splash.css ==== */


/* ===== מסך ספלאש ===== */

@layer screens{

.screen_splash .content{
	justify-content: space-evenly;
}

.screen_splash .content .logo{
	--logo_size: var(--logo_size_biggest);
	margin-block-start: 15dvh;
}

}