/* --- עיצוב לב (במקום כומתה) --- */
.heart-icon {
    width: 50px;
    height: 50px;
    background-color: currentColor; /* משתמש בצבע היחידה */
    position: relative;
    margin: 0 auto 10px auto;
    transform: rotate(-45deg);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* מצב ברירת מחדל - המודאל מחוץ למסך מימין */
#profile-modal {
    position: fixed;
    top: 0;
    right: -100%; /* מוחבא מימין */
    width: 85%;
    max-width: 400px;
    height: 100vh;
    background: white;
    z-index: 50;
    transition: right 0.3s ease-in-out; /* האנימציה של השליפה */
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    display: block !important; /* מבטל את ה-hidden של Tailwind */
}

#profile-modal {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    /* צבע רקע מעט אפרפר כדי שהכפתורים הלבנים יקפצו לעין */
    background-color: #f8fafc; 
}
/* כשהמודאל פתוח */
#profile-modal.drawer-open {
    right: 0; /* נכנס למסך */
}

/* שכבת רקע כהה (Overlay) */
#modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 40;
    display: none;
}

#modal-backdrop.active {
    display: block;
}

.heart-icon::after,
.heart-icon::before {
    content: "";
    width: 50px;
    height: 50px;
    background-color: currentColor;
    border-radius: 50%;
    position: absolute;
}

.heart-icon::before {
    top: -25px;
    left: 0;
}

.heart-icon::after {
    top: 0;
    left: 25px;
}

/* עיצוב כללי */
body {
    background-color: #f9fafb;
    font-family: system-ui, -apple-system, sans-serif;
}

.mishna-text {
    line-height: 1.8;
    color: #1a1a1a;
    border-bottom: 2px solid #f0fdf4;
    padding-bottom: 20px;
}

.commentary-section {
    background-color: #fcfcfc;
    padding: 15px;
    border-radius: 12px;
    border-right: 4px solid #166534; /* ירוק כהה */
}


.date-input-fix {
    /* מוודא שהרוחב מחושב כולל הגבולות והמרווחים */
    box-sizing: border-box !important; 
    /* מבטל עיצובים אוטומטיים של iOS/Android */
    appearance: none !important;
    -webkit-appearance: none !important;
    /* מוודא שהטקסט מיושר לימין ושיש כיוון כתיבה נכון */
    direction: rtl !important;
    text-align: right !important;
    /* לפעמים דפדפנים מוסיפים גובה שונה לתאריך, זה מקבע אותו */
    min-height: 50px; 
}

/* טיפול ספציפי באייקון של לוח השנה שלא ידחוף את הטקסט */
.date-input-fix::-webkit-calendar-picker-indicator {
    margin-right: 10px;
}
/* עיצוב בועת התקנה לאייפון */





/* --- מצב חשוך גלובלי - גרסה סופי בהחלט --- */

/* 1. רקע כללי וטקסט לבן לכל האפליקציה */
/* עדכון סעיף 1 ב-CSS שלך */
body.dark-mode, 
body.dark-mode #lesson-page, 
body.dark-mode #main-content,
body.dark-mode #lesson-page-content {
    background-color: #0f172a !important; /* כחול-צי עמוק */
    color: #f1f5f9 !important;           /* לבן-אפרפר רך */
}

/* 2. דריסת כל טקסט בתוך הלימוד ורש"י ללבן בוהק */
body.dark-mode #lesson-page-content,
body.dark-mode #lesson-page-content *, 
body.dark-mode .mishna-text,
body.dark-mode .rashi-text,
body.dark-mode .targum-text,
body.dark-mode .mussar-text,
body.dark-mode [class*="text-gray-"],
body.dark-mode [class*="text-black"] {
    color: #f1f5f9 !important; /* לבן-אפרפר רך וקריא מאוד */
}
/* הבלטה לכותרות הפירושים (רש"י / ברטנורא) */
body.dark-mode .rashi-text b, 
body.dark-mode .rashi-text strong,
body.dark-mode h2 {
    color: #4ade80 !important; /* ירוק בהיר עדין לכותרות המשנה */
}
body.dark-mode .bg-yellow-50, 
body.dark-mode .bg-orange-50 {
    background-color: #1e293b !important; /* רקע כחול-כהה עמוק */
    border-color: #334155 !important;
}

/* 3.#1e1e1e */
/* עדכון סעיף 3 ב-CSS שלך */
body.dark-mode .bg-white,
body.dark-mode .lesson-card,
body.dark-mode .bg-gray-50,
body.dark-mode #tanach-controls {
    background-color: #1e293b !important; /* כחול-אפור בהיר יותר מהרקע */
    border-color: #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* 4. עיצוב כפתורי ה-Aa בתוך התפריט */
body.dark-mode .preset-btn {
    background-color: #1f2937 !important; /* אפור-כחלחל עמוק במקום שחור */
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
}

/* הכפתור הנבחר - ירוק תורני במקום ירוק זוהר מדי */
body.dark-mode .preset-btn.active-size {
    background-color: #059669 !important; /* ירוק אמרלד */
    color: #ffffff !important;
    border: 2px solid #34d399 !important;
}

/* 5. כפתור ה-Aa הראשי למעלה */
body.dark-mode #font-size-btn, 
body.dark-mode #font-size-btn * {
    color: #ffffff !important;
    background-color: #333 !important;
}

/* 6. צבעי כותרות הפירושים - מונע השפעה על מסך בחירת יעד */
body.dark-mode h2.font-black,
body.dark-mode #lesson-page-content .text-green-800,
body.dark-mode #lesson-page-content .text-green-600 {
    color: #4ade80 !important; /* רק בתוך הלימוד זה יהיה ירוק בהיר */
}

/* כותרות שהן לא חלק מהלימוד (כמו בחירת יעד) - לבן רגיל */
body.dark-mode h2:not(#lesson-page-title), 
body.dark-mode .text-xl.font-bold {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* טיפול בטקסט "טוען..." והתיאור שמתחת לכותרת */
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-400 {
    color: #e5e7eb !important; /* אפור בהיר מאוד שיהיה קריא */
}

/* טיפול ברקע של הלהבה (הכתום) שלא יסנוור */
body.dark-mode .bg-orange-50 {
    background-color: #431407 !important; /* חום-כתום כהה */
}

body.dark-mode .text-orange-700 {
    color: #fdba74 !important; /* כתום בהיר למספר הסטריק */
}

/* הגבול הימני הצבעוני של הכרטיסיות (לשמור על הצבע המזהה) */
/* שמירה על הפס הצבעוני בצד הכרטיסיות במצב לילה */
body.dark-mode .border-r-8 {
    opacity: 1 !important; /* ביטול השקיפות כדי שהצבע יהיה חזק */
}

/* התאמת צבעי הפסים לחושך - שיהיו בולטים וזוהרים */
body.dark-mode .border-blue-600 { border-color: #3b82f6 !important; } /* כחול חפץ חיים */
body.dark-mode .border-green-600 { border-color: #22c55e !important; } /* ירוק משנה */
body.dark-mode .border-purple-600 { border-color: #a855f7 !important; } /* סגול שניים מקרא */
body.dark-mode .border-red-600 { border-color: #ef4444 !important; }    /* אדום מוסר */

/* תיקון הכותרות בתוך הכרטיסיות (שיהיו בצבע של הלימוד) */
body.dark-mode .lesson-card h2,
body.dark-mode [onclick*="openLesson"] h2 {
    filter: brightness(1.5); /* מבהיר את צבע הכותרת הקיים */
}


/* 7. כפתור סיום לימוד ולוח בקרה - אפור כהה #2d2d2d */
body.dark-mode #tanach-controls {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

/* 8. ניקוי כותרות עליונות (הופך לשקוף) */
body.dark-mode header, 
body.dark-mode nav,
body.dark-mode .border-b {
    background-color: transparent !important;
    border: none !important;
}

/* 9. מספר הסטריק במסך הבית - שחור */
body.dark-mode .streak-count, 
body.dark-mode #streak-number {
    color: #000000 !important;
}

body.dark-mode .bg-gray-100, 
body.dark-mode button.bg-gray-100 {
    background-color: #2d2d2d !important; /* אפור כהה */
    color: #ffffff !important;           /* טקסט לבן */
    border-color: #444 !important;       /* מסגרת כהה */
}

/* אפקט מעבר עכבר (Hover) לכפתור */
body.dark-mode button.bg-gray-100:hover {
    background-color: #3d3d3d !important;
}

/* דריסת טקסט אפור ספציפי לכפתור הזה */
body.dark-mode .text-gray-700 {
    color: #ffffff !important;
}
/* 1. טיפול בכפתור עם רקע כחול בהיר (bg-blue-50) */
body.dark-mode .bg-blue-50, 
body.dark-mode button.bg-blue-50 {
    background-color: #2d2d2d !important; /* אפור כהה במקום כחול בהיר */
    color: #ffffff !important;           /* טקסט לבן במקום כחול כהה */
    border: 1px solid #444 !important;
}

/* 2. דריסת טקסט כחול ספציפי (text-blue-700) */
body.dark-mode .text-blue-700 {
    color: #ffffff !important;
}

/* 3. אפקט לחיצה/מעבר עכבר לכפתור הקפיצה */
body.dark-mode button.bg-blue-50:hover {
    background-color: #3d3d3d !important;
}

/* 4. ליתר ביטחון - אם יש כפתורים דומים עם bg-gray-100 או צבעים אחרים */
body.dark-mode .bg-gray-100,
body.dark-mode .bg-purple-50,
body.dark-mode .bg-red-50 {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* --- עיצוב בורר הקפיצות (Jump Selector) במצב חשוך --- */

/* 1. הכפתורים ברשימה (חפץ חיים, מסילת ישרים, פרקים) - צבע ניטרלי עמוק */
/* שים לב שהוספנו את המילה button כדי שזה לא יתפוס כותרות */
body.dark-mode button[onclick*="confirmJump"],
body.dark-mode button[onclick*="updateSubSelect"],
body.dark-mode button[onclick*="updateMussarSubSelect"],
body.dark-mode .border-slate-800 { border-color: #94a3b8 !important; }
body.dark-mode .border-yellow-500 { border-color: #eab308 !important; }
body.dark-mode #sub-select-container button,
body.dark-mode #mussar-sub-container button {
    background-color: #1f2937 !important; /* אפור-כחלחל עמוק */
    color: #e5e7eb !important;           /* טקסט אוף-ווייט */
    border: 1px solid #374151 !important; /* מסגרת שמפרידה מהרקע */
}
#side-drawer.open {
    transform: translateX(0);
}
#drawer-overlay.show {
    display: block;
}

/* 2. שינוי צבע החץ (←) - שיהיה בולט ומזמין */
body.dark-mode .text-gray-300 {
    color: #9ca3af !important; /* אפור בהיר יותר כדי שיראו את החץ */
}
/* 3. אפקט לחיצה (Active) - ירוק תורני - רק לכפתורים! */
body.dark-mode button[onclick*="confirmJump"]:active,
body.dark-mode button[onclick*="updateSubSelect"]:active,
body.dark-mode #sub-select-container button:active,
body.dark-mode #mussar-sub-container button:active {
    background-color: #064e3b !important; /* ירוק יער עמוק */
    border-color: #10b981 !important;     /* מסגרת ירוקה זוהרת */
    color: #ffffff !important;
}

/* 4. קווי הפרדה בתוך התפריט */
body.dark-mode .border-t.border-gray-100,
body.dark-mode .border-t.border-gray-200 {
    border-top-color: #374151 !important;
}

/* 5. טקסט "ממתין לטעינה" או שגיאות */
body.dark-mode .text-red-500,
body.dark-mode .text-red-600 {
    color: #f87171 !important; /* אדום רך שלא "שורף" בחושך */
}

/* 6. התאמת פס הגלילה (Scrollbar) - שייעלם לתוך הרקע */
body.dark-mode .custom-scrollbar::-webkit-scrollbar-track {
    background: #111827 !important;
}

body.dark-mode .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4b5563 !important; /* אפור בינוני שקל לראות */
    border: 2px solid #111827 !important;
    border-radius: 10px;
}

/* בונוס: טקסט עזרה קטן (text-gray-500) במצב לילה */
body.dark-mode .text-gray-500,
body.dark-mode .text-xs.text-gray-400 {
    color: #9ca3af !important;
}
/* --- תיקון סליידרים (Toggle Switches) במצב חשוך --- */

/* 1. הרקע של הסליידר כשהוא כבוי */
body.dark-mode .bg-gray-300 {
    background-color: #444 !important; /* אפור כהה במקום אפור בהיר */
}

/* 2. הרקע של הסליידר כשהוא דלוק (נבחר) */
body.dark-mode .peer-checked\:bg-blue-600:checked ~ .bg-gray-300,
body.dark-mode .peer-checked\:bg-blue-600 {
    background-color: #2563eb !important; /* כחול בולט שיראו בחושך */
}

/* 3. העיגול הלבן שזז בתוך הסליידר (ה-before) */
body.dark-mode .before\:bg-white::before {
    background-color: #ffffff !important; /* חייב להישאר לבן מוחלט */
}

/* 4. תיקון לסליידרים ספציפיים של שניים מקרא */
body.dark-mode label span[class*="bg-gray-300"] {
    background-color: #444 !important;
}

body.dark-mode input:checked + span[class*="bg-blue-600"] {
    background-color: #3b82f6 !important;
}

/* 5. אם יש סליידרים סגולים (לשניים מקרא לעיתים) */
body.dark-mode .peer-checked\:bg-purple-600 {
    background-color: #9333ea !important;
}

/* אנימציית מעבר גלובלית */
body, 
body *, 
.bg-white, 
.bg-gray-50, 
.lesson-card, 
button {
    transition: background-color 0.1s ease, 
                color 0.2s ease, 
                border-color 0.2s ease, 
                box-shadow 0.2s ease !important;
}
 
/* מניעת קפיצות של גופנים בזמן המעבר */
body.dark-mode {
    color-scheme: dark; /* עוזר לדפדפן להתאים אלמנטים נייטיב כמו סקרולר */
}

/* סרגל הכותרת והכפתורים - מצב רגיל */




/* תיקון צבעים לכפתורי תנ"ך בחושך */
body.dark-mode #tanach-controls {
    background-color: #1a1a1a !important; /* אפור כהה מאוד במקום ירוק בהיר */
    border-bottom-color: #333 !important;
}

body.dark-mode #tanach-controls button {
    background-color: #2d2d2d !important;
    border-color: #4ade80 !important; /* ירוק זוהר למסגרת */
    color: #ffffff !important;
}

/* מונע מהאייפון לנסות לחשב אנימציות בזמן טעינה/חזרה מהרקע */
.fixed, .sticky {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* מבטל אנימציות אם המשתמש הגדיר "Reduce Motion" בהגדרות המכשיר */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
    /* מבטל את לחיצת הזום הכפולה ואת ההשהיה של הקליק */
    touch-action: manipulation;
}

/* אם יש כפתורים ספציפיים שעדיין עושים בעיות */
button {
    touch-action: manipulation;
}
button {
    -webkit-user-select: none; /* אייפון */
    user-select: none;
    touch-action: manipulation;
}

/* מצב יום כברירת מחדל */
:root {
    --badge-card-bg: #ffffff;
    --badge-text-color: #1f2937;
    --swal-bg: #f8fafc;
}

/* מצב לילה - כשלקלאס הראשי יש .dark-mode */
body.dark-mode {
    --badge-card-bg: #1e293b; /* כחול כהה */
    --badge-text-color: #f1f5f9; /* טקסט בהיר */
    --swal-bg: #0f172a; /* רקע כהה מאוד להתראות */
}

/* החלת המשתנים על כרטיסי התגים בארון */
.badge-card {
    background-color: var(--badge-card-bg) !important;
    color: var(--badge-text-color);
    transition: background-color 0.3s ease;
}

/* אם התמונה עצמה לבנה מדי, אפשר להוסיף לה מעט שקיפות או צל */
.badge-card img {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* פונט רש"י אמיתי ופונט סת"ם */
@font-face {
    font-family: 'RashiFont';
    src: url('https://fonts.gstatic.com/s/alef/v12/6xKhd0p05w575iXp.woff2'); /* גופן עברי נקי כבסיס */
}

/* פונט פרנק ריהל - הכי קרוב לסת"ם שזמין תמיד */

/* הגדרת השם שבו נשתמש בקוד */
.font-stam { font-family: 'Frank Ruhl Libre', serif !important; }
@font-face {
    font-family: 'StamFont';
    src: url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700&display=swap'); /* פונט דמוי סת"ם עם טעמים */
}

/* פונט תורני קלאסי (פרנק ריהל) */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700&display=swap');

/* מחלקות עזר כדי לבדוק שהכל עובד */
.font-rashi { font-family: 'RashiFont', serif !important; }
.font-stam { font-family: 'StamFont', serif !important; }

/* --- מצב לילה לאלמנטים החדשים --- */
body.dark-mode {
    /* כפתור תגים והישגים (כתום) */
    --orange-dark-bg: #2d1a0a;
    --orange-dark-border: #4a2d14;
    --orange-dark-text: #fdba74;
}

/* כפתור תגים והישגים */
body.dark-mode button[onclick="openBadgesModal()"] {
    background-color: var(--orange-dark-bg) !important;
    border-color: var(--orange-dark-border) !important;
    color: var(--orange-dark-text) !important;
}
#finish-lesson-btn {
    white-space: nowrap;      /* מונע מהטקסט לרדת שורה */
    overflow: hidden;         /* מסתיר טקסט שחורג */
    text-overflow: ellipsis;  /* מוסיף שלוש נקודות אם הטקסט ארוך מדי (ליתר ביטחון) */
    display: block;           /* מבטיח שהכפתור יתנהג כבלוק */
    width: 100%;              /* שומר על רוחב מלא */
    padding-left: 8px;        /* ריווח פנימי קטן למנוע הצמדה לקצוות */
    padding-right: 8px;
}

/* כפתור סיום לימוד (Finish Lesson) - הוספת מסגרת וצבע עדין */
body.dark-mode #finish-lesson-btn {
    background-color: #1a2e1a !important; /* ירוק כהה מאוד */
    border: 2px solid #22c55e !important; /* מסגרת ירוקה בולטת */
    color: #4ade80 !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.1);
}

/* כפתורי הניווט של המשנה (הקפצה ויעד) */
body.dark-mode #mishna-start-jump-btn {
    background-color: #064e3b !important; /* ירוק עמוק */
    border: 1px solid #059669 !important;
}

body.dark-mode #mishna-start-target-btn {
    background-color: #1e3a8a !important; /* כחול עמוק */
    border: 1px solid #3b82f6 !important;
}

/* מעטפת הניווט (Wrapper) */
body.dark-mode #mishna-nav-wrapper {
    background-color: #1f2937 !important; /* אפור כהה */
    border-color: #374151 !important;
}

body.dark-mode #mishna-nav-label {
    color: #d1d5db !important;
}

body.dark-mode #mishna-nav-path {
    background-color: #064e3b !important;
    color: #6ee7b7 !important;
}

/* כפתורי הבחירה בתוך הניווט (הגריד) */
body.dark-mode #mishna-navigator-container button {
    background-color: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #f3f4f6 !important;
}

/* כפתור ביטול אדום */
body.dark-mode button[onclick="window.mishnaNavigator.hide()"] {
    color: #f87171 !important;
}



/* תיקון ספציפי לבועת פירוש ברטנורא במצב לילה */
body.dark-mode .bg-green-50 {
    background-color: #1e293b !important; /* רקע כחול-כהה עמוק */
    border-top-color: #059669 !important;   /* פס ירוק עליון מודגש */
    border-radius: 12px;
}

/* כותרת הפירוש (פירוש ברטנורא:) */
body.dark-mode .bg-green-50 h4.text-green-800 {
    color: #4ade80 !important; /* ירוק בהיר זוהר */
    font-weight: 900 !important;
}

/* הטקסט של הפירוש עצמו */
body.dark-mode .bg-green-50 .text-gray-800 {
    color: #f1f5f9 !important; /* לבן-אפרפר קריא */
}

/* הטקסט של המשנה שמעל הפירוש */
body.dark-mode .mishna-text.text-black {
    color: #ffffff !important;
    border-bottom-color: #334155 !important;
}


/* עיצוב כפתורי ה"הקפצה" במצב לילה - חפץ חיים ומוסר */
body.dark-mode button[onclick*="setupJump"],
body.dark-mode .bg-purple-50, 
body.dark-mode .bg-blue-50 {
    background-color: #064e3b !important; /* ירוק עמוק (כמו במשנה) */
    color: #6ee7b7 !important;           /* טקסט ירוק בהיר */
    border: 1px solid #059669 !important; /* מסגרת ירוקה דקה */
    font-weight: bold !important;
    transition: all 0.2s ease;
}

/* אפקט לחיצה/ריחוף לכפתורים אלו */
body.dark-mode button[onclick*="setupJump"]:active,
body.dark-mode button[onclick*="setupJump"]:hover {
    background-color: #065f46 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* ביטול ירוק בכותרת "בחירת סוג יעד" */
body.dark-mode .text-green-900, 
body.dark-mode h2.text-green-900 {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- התאמת הודעות קופצות (SweetAlert2) למצב לילה --- */
body.dark-mode .swal2-popup {
    background-color: #1e293b !important; /* כחול-כהה עמוק (כמו הכרטיסיות) */
    color: #f1f5f9 !important;           /* טקסט לבן-אפרפר */
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

/* כותרת ההודעה */
body.dark-mode .swal2-title {
    color: #ffffff !important;
}

/* תוכן ההודעה */
body.dark-mode .swal2-html-container {
    color: #cbd5e1 !important;
}

/* כפתור אישור (Confirm) - ירוק תורני */
body.dark-mode .swal2-confirm {
    background-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
}

/* כפתור ביטול (Cancel) */
body.dark-mode .swal2-cancel {
    background-color: #475569 !important;
}

/* אייקונים בתוך ההודעה (סימני שאלה, הצלחה וכו') */
body.dark-mode .swal2-icon.swal2-info,
body.dark-mode .swal2-icon.swal2-question {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

body.dark-mode .swal2-icon.swal2-success {
    border-color: #22c55e !important;
    color: #22c55e !important;
}


/* עיצוב כותרות הדפים הפנימיים שיהיו אחידות */
.settings-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.dark-mode .settings-header {
    border-bottom-color: #334155;
}

.custom-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 20000;
    display: flex; 
    align-items: center; /* מרכז אנכית */
    justify-content: center; /* מרכז אופקית */
    backdrop-filter: blur(4px);
    padding: 20px; /* מרווח ביטחון מהקצוות */
}

.custom-modal-content {
    background: white; 
    width: 95%; 
    max-width: 400px; 
    max-height: 90vh; /* לא יעבור את גובה המסך */
    overflow-y: auto; /* מאפשר גלילה אם הטקסט ארוך מהמסך */
    border-radius: 20px;
    padding: 25px; 
    position: relative; 
    direction: rtl; 
    font-family: system-ui;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@media (max-height: 500px) {
    .custom-modal-content {
        max-height: 85vh;
        padding: 15px;
    }
}

.onboarding-steps { margin: 20px 0; }
.step { display: flex; align-items: flex-start; margin-bottom: 15px; gap: 12px; }
.step-icon { font-size: 24px; }
.onboarding-footer { 
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px;
}
.primary-btn {
    background: #166534; color: white; border: none; padding: 12px 40px;
    border-radius: 12px; font-weight: bold; width: 100%; cursor: pointer;
}
.close-x {
    position: absolute; top: 15px; left: 15px; background: none; border: none;
    font-size: 20px; color: #9ca3af; cursor: pointer;
}

/* --- התאמת מודאל הסבר למצב לילה (dark-mode) --- */

/* הרקע המטושטש מסביב */
body.dark-mode .custom-modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(6px) !important;
}

/* תוכן המודאל - כחול-אפור בהיר יותר מהרקע (כמו ה-lesson-card שלך) */
/* כותרת ראשית - הגדלה והדגשה */
.custom-modal-content h2 {
    text-align: center;
    font-size: 26px; /* מוגדל */
    font-weight: 800; /* מודגש מאוד */
    margin-bottom: 12px; /* יוצר מרווח מהכותרת משנה */
    color: #166534; /* צבע יום */
}

/* כותרת משנה - ריווח ותיקון הצמדה */
.modal-subtitle {
    text-align: center;
    font-size: 16px;
    line-height: 1.4; /* מרווח בין שורות אם הטקסט ארוך */
    color: #6b7280; 
    margin-top: 0; /* ביטול ה-10px- שהיה קודם */
    margin-bottom: 25px;
    font-weight: 500;
    display: block; /* מבטיח ירידת שורה נקייה */
}

/* --- התאמה למצב לילה (Dark Mode) --- */
body.dark-mode .custom-modal-content h2 {
    color: #4ade80 !important; /* הירוק הזוהר שקבעת */
}

body.dark-mode .modal-subtitle {
    color: #cbd5e1 !important;
}

/* טקסט מודגש בתוך הצעדים */
body.dark-mode .step p b {
    color: #ffffff !important;
}

/* אייקונים של הצעדים - הוספת הילה עדינה */
body.dark-mode .step-icon {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
}

/* פס הפרדה בתחתית */
body.dark-mode .onboarding-footer {
    border-top: 1px solid #334155 !important;
}

/* טקסט "אל תציג שוב" */
body.dark-mode .dont-show-again span {
    color: #9ca3af !important;
}

/* כפתור סגירה ראשי - ירוק אמרלד (כמו ה-preset-btn הנבחר שלך) */
body.dark-mode .primary-btn {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #34d399 !important;
    transition: background-color 0.2s ease !important;
}

body.dark-mode .primary-btn:hover {
    background-color: #065f46 !important;
}

/* כפתור ה-X לסגירה */
body.dark-mode .close-x {
    color: #9ca3af !important;
}

body.dark-mode .close-x:hover {
    color: #ffffff !important;
}

/* התאמת הצ'קבוקס (אם הדפדפן תומך ב-accent-color) */
body.dark-mode #dont-show-checkbox {
    accent-color: #4ade80;
}

/* --- תוסיף את זה לתוך ה-CSS של ה-Dark Mode שלך --- */

body.dark-mode .custom-modal-content {
    background-color: #1e293b !important; /* כחול-אפור עמוק (כמו ה-Cards שלך) */
    color: #f1f5f9 !important;           /* לבן-אפרפר רך */
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* טיפול בטקסט של הצעדים (ה-p שבתוך ה-step) */
body.dark-mode .step p {
    color: #e5e7eb !important; /* אפור בהיר מאוד לקריאות מקסימלית */
}

/* אם הכותרת ב-HTML מגיעה עם style="text-align: center" ידני, 
   נוודא שה-CSS דורס את הצבע */
body.dark-mode .custom-modal-content h2 {
    color: #4ade80 !important;
}