/*
 * טופס הבדיקה בתשלום — עושה שימוש חוזר במחלקות בסיס מ-free-check.css
 * (myresume-field, myresume-alert, myresume-result, myresume-score,
 * myresume-cta וכו') כדי לשמור על עקביות חזותית בין השלב החינמי לתשלום.
 * כאן רק מה שספציפי לזרימה התלת-שלבית (טופס → שאלות → תוצאה).
 */

/*
 * גופנים — התאמה לגופן שאר האתר (v0.10.23, תוקן/הושלם ב-v0.10.25).
 *
 * **v0.10.23 (לא הספיק בפועל):** ניחוש ראשוני היה ש-<button>/<input>/
 * <select>/<textarea> "בולטים" בגופן שונה כי דפדפנים לא מורישים אליהם
 * font-family אוטומטית — הוספתי רק `font-family: inherit` על ארבעתם.
 * ניר בדק ודיווח: **שום שינוי לא נראה בכלל, באף מקום.** הניחוש היה
 * חלקי מדי: `inherit` מושך את הערך מהאב הישיר — אבל ברוב תוכן הפלאגין
 * (למשל #myresume-paid-check-result, #myresume-paid-check-questions,
 * תיבת אנימציית הטעינה) **אין בכלל אב עם font-family מוגדר לרשת ממנו**
 * (הם נוצרים כ-DOM אחים עצמאיים, לא בתוך .myresume-paid-check-form —
 * ראה frontend-shortcode.php/paid-check.js) — כך ש-inherit פשוט חזר
 * לגופן ברירת המחדל של הדפדפן, בדיוק כמו קודם.
 *
 * **אומת בפועל מול ניר (v0.10.25):** גופן האתר הוא **Assistant** (Google
 * Font, נטען דרך Elementor/הערכה — @font-face עם unicode-range עברי,
 * ניר אישר ישירות מ-DevTools). **התיקון הנכון:** לא להסתמך על ירושה
 * מאב לא-ידוע — לקבוע `font-family: 'Assistant', ...` **במפורש** על כל
 * אלמנט של הפלאגין, דרך סלקטור attribute גורף שתופס כל id/class עם
 * הקידומת `myresume-` (כולל כל הקונטיינרים העצמאיים שנוצרים דינמית
 * ב-JS — תוצאה/שאלות/היסטוריה/אנימציית טעינה/הדפסת PDF, לא רק הטופס
 * עצמו) — **בלי** תלות בירושה ממבנה DOM ספציפי, כדי שהתיקון יהיה עמיד
 * גם אם ה-HTML סביב ישתנה בעתיד. בשילוב עם `button/input/select/
 * textarea { font-family: inherit }` שנשאר (מכסה גם אלמנטים בודדים
 * בלי class/id של myresume- משלהם, כמו כפתור השליחה בטופס ה-revision —
 * ראה renderRevisionButton ב-paid-check.js — שיורש נכון עכשיו מהאב שלו,
 * #myresume-revision-form, שכן תופס את הכלל הגורף). **חל גם על שני
 * העמודים העצמאיים הישנים** (אותו קובץ CSS בדיוק) — לא רק על הטאבים
 * באזור האישי. **הערה:** לא הוספתי @font-face משלי — נסמך על כך
 * שהגדרת הגופן של Elementor/התבנית כבר נטענת בכל עמוד באתר (אושר בפועל
 * ע"י ניר); Arial/sans-serif בסוף המחרוזת הם רק רשת ביטחון אם משום מה
 * זה לא המצב.
 *
 * **גודל גופן 20px (v0.10.26, לפי בקשה מפורשת: "גודל הפונט של הטקסט
 * צריך להיות Assistant 20 פיקסל"):** נוסף כאן כ**ברירת מחדל** לאותו
 * כלל גורף. **החלטה פרשנית לתיעוד:** הפכתי את זה לגודל **הבסיס** של
 * טקסט תוכן/גוף (טקסט הסבר/דוח, פסקאות המלצה, שדות טופס) — לא שיניתי
 * את הגדלים הספציפיים שכבר נקבעו במפורש בבקשות קודמות להיררכיה חזותית
 * מכוונת: כותרות (h4/h5/report-title), מספר הציון הגדול (2.5rem),
 * כפתורים, וטקסט משני/meta קטן (הודעות alert, פריטי היסטוריה, טבלת
 * קרדיטים, הערת הטעינה). אלה ממשיכים לעבוד כרגיל **הודות לסדר הכללים
 * בקובץ** — כל כלל שכבר קבע גודל משלו מופיע **אחרי** הכלל הגורף הזה
 * (או עם specificity גבוה ממנו), ולכן גובר עליו כרגיל ב-CSS, בלי שנגעתי
 * בו. אם התכוונת ש-20px יחול **גם** על כותרות/כפתורים/טקסט משני — תגיד
 * ואפרוס את זה גם עליהם.
 */
[id^="myresume-"],
[class*="myresume-"] {
	font-family: 'Assistant', Arial, sans-serif;
	font-size: 20px;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

.myresume-paid-check-form {
	max-width: 100%;
	margin: 1.5rem auto;
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box;
}

.myresume-paid-check-form *,
#myresume-paid-answers-form *,
#myresume-revision-form * {
	box-sizing: border-box;
}

.myresume-paid-check-form textarea,
.myresume-paid-check-form input[type="url"],
.myresume-paid-check-form input[type="file"],
#myresume-paid-answers-form textarea,
#myresume-revision-form textarea {
	width: 100%;
	padding: 0.6rem;
	font-size: 20px;
	border: 1px solid #ccc;
	border-radius: 6px;
}

/* כפתורי שליחה (טופס ראשי / תשובות / עדכון) — אותו עיצוב בדיוק כמו
 * כפתור השליחה בטיזר החינמי, לעקביות חזותית מלאה. */
#myresume-paid-submit-btn,
#myresume-answers-submit-btn,
#myresume-revision-form button[type="submit"] {
	width: 100%;
	min-height: 44px;
	padding: 0.75rem 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: #1a73e8;
	color: #fff;
	cursor: pointer;
}

#myresume-paid-submit-btn:disabled,
#myresume-answers-submit-btn:disabled,
#myresume-revision-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#myresume-paid-submit-btn:focus-visible,
#myresume-answers-submit-btn:focus-visible,
#myresume-revision-form button[type="submit"]:focus-visible,
.myresume-paid-check-form textarea:focus-visible,
.myresume-paid-check-form input:focus-visible,
#myresume-paid-answers-form textarea:focus-visible,
#myresume-revision-form textarea:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

.myresume-questions-intro {
	font-weight: 600;
	margin: 0 0 1rem;
}

#myresume-paid-answers-form,
#myresume-revision-form {
	margin-top: 0.5rem;
}

/* כותרת + פתיח מעל כרטיס התוצאה (v0.10.15, בקשה מפורשת) — חלק מ-
 * resultBox, ולכן נכללים גם בהדפסה/שמירה כ-PDF (ראה @media print למטה).
 *
 * v0.10.44: בדף בפועל הכותרת לא נראתה מעוצבת (טקסט רגיל, בלי הבלטה) —
 * למרות שהמאפיינים כאן מוגדרים. ניחוש סביר: עיצוב הכותרות הגלובלי של
 * התבנית/Elementor "מנצח" בעמוד הזה. שני תיקונים משלימים: (1) ב-JS
 * (paid-check.js) נוספו גם מחלקות ה-heading האמיתיות של Elementor
 * (`elementor-heading-title elementor-size-default`, לפי בקשת ניר) לצד
 * המחלקה שלנו — כך שהכותרת עקבית עם שאר כותרות האתר; (2) `!important`
 * כאן, כדי שהעיצוב הספציפי שלנו (צבע/גודל/משקל) ימשיך לחול תמיד, בלי
 * תלות בסדר טעינת ה-CSS מול קבצי התבנית/Elementor — **אותו פתרון בדיוק**
 * שכבר נדרש בעבר לכפתור ה-CTA (ראה gotcha מתועד למעלה, .myresume-cta). */
.myresume-report-title {
	margin: 0 0 0.5rem !important;
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: #1a4d2e !important;
	line-height: 1.3 !important;
}

.myresume-report-intro {
	margin: 0 0 2rem;
	line-height: 1.6;
	color: #333;
}

.myresume-paid-result-card {
	padding: 1.25rem;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #eaf6ea;
	border-color: #b9dfb9;
}

/* כותרות ראשיות (חוזקות/פערים/המלצות) — v0.10.9, לפי בקשה: בולטות
 * ומשמעותיות יותר, עם קו תחתון עדין להפרדה ברורה מהתוכן שמתחת. */
.myresume-paid-result-card h4 {
	margin: 1.5rem 0 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid #b9dfb9;
	font-size: 1.4rem;
	font-weight: 700;
	color: #1a4d2e;
}

.myresume-paid-result-card h4:first-of-type {
	margin-top: 0.75rem;
}

.myresume-paid-result-card ul {
	margin: 0 0 0.5rem;
	padding-inline-start: 1.25rem;
}

.myresume-paid-result-card li {
	margin-bottom: 0.35rem;
	line-height: 1.5;
}

.myresume-recommendation-card {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #ddd;
}

/* כותרת כל המלצה בודדת (עם המספור שנוסף ב-JS, "1. ...") — מוגדלת. */
.myresume-recommendation-card h5 {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: #2A5C8A;
}

.myresume-recommendation-card p {
	margin: 0 0 0.5rem;
	line-height: 1.6;
	font-size: 20px;
}

.myresume-recommendation-card p:last-child {
	margin-bottom: 0;
}

/* תוויות "קיים היום/הבעיה/מוצע" — מודגשות; הבעיה באדום, ההצעה בירוק
 * (v0.10.9, לפי בקשה). "קיים היום" נשאר רק מודגש, בלי צבע ייעודי.
 * v0.10.44: `!important` נוסף על הצבעים — בדף בפועל הצבעוניות לא
 * נשמרה (שלושת התוויות נראו באותו צבע), כנראה מאותה סיבה שגם כותרת
 * הדוח לא נראתה מעוצבת (עיצוב גלובלי של התבנית/Elementor מנצח). */
.myresume-rec-label {
	font-weight: 700;
}

.myresume-rec-issue .myresume-rec-label {
	color: #c62828 !important;
}

.myresume-rec-suggestion .myresume-rec-label {
	color: #2e7d32 !important;
}

.myresume-projected-score {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px dashed #b9dfb9;
	font-weight: 600;
}

/*
 * כפתורי הפעולה מתחת לתוצאה (הוספת פרטים/הערות + סיום ושליחה למייל) —
 * v0.10.8. gotcha: קודם הכפתור השתמש במחלקה המשותפת .myresume-cta,
 * שמוגדרת (ב-free-check.css) גם עם pseudo-classes של קישור
 * (:link/:visited) שלא רלוונטיים לכפתור <button> בכלל, ובלי !important
 * על background — כך שעיצוב ברירת המחדל של התבנית/Elementor "ניצח" את
 * הרקע הכחול (בדיוק כמו gotcha ה-CTA הקודם, אבל הפעם על background ולא
 * על color). הפתרון: סלקטור לפי ID ייעודי (כמו שאר כפתורי הטופס), עם
 * אותה רמת specificity שכבר עובדת עבורם.
 */
.myresume-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

#myresume-revision-btn,
#myresume-send-email-btn,
#myresume-download-pdf-btn {
	flex: 1 1 220px;
	min-height: 44px;
	padding: 0.75rem 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: #1a73e8;
	color: #fff;
	cursor: pointer;
	text-align: center;
}

#myresume-revision-btn:disabled,
#myresume-send-email-btn:disabled,
#myresume-download-pdf-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#myresume-revision-btn:focus-visible,
#myresume-send-email-btn:focus-visible,
#myresume-download-pdf-btn:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/*
 * הצעת "הדבקת טקסט במקום קובץ" (v0.10.12) — מוצגת רק אחרי כישלון חילוץ
 * מהקובץ (למשל pdf_corrupted_text). כפתור טקסטואלי משני, בכוונה **לא**
 * בעיצוב ה-CTA הראשי (כחול/רחב) — זו פעולת עזר משנית, לא הפעולה
 * המרכזית בטופס.
 */
#myresume-paste-text-offer {
	margin: 0.75rem 0 0;
}

#myresume-paste-text-toggle-btn {
	background: none;
	border: none;
	padding: 0;
	color: #1a73e8;
	font-size: 0.95rem;
	text-decoration: underline;
	cursor: pointer;
}

#myresume-paste-text-toggle-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#myresume-paste-text-toggle-btn:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* מרחב עבודה רחב יותר (טאבלט ומעלה) — min-width, לא max-width. */
@media (min-width: 640px) {
	.myresume-paid-check-form,
	#myresume-paid-check-history-section {
		max-width: 620px;
		padding: 1.5rem;
	}
}

/*
 * הדפסה/שמירה כ-PDF (v0.10.15) — מופעל ע"י כפתור "שמור/הורד למחשב"
 * (window.print(), ראה paid-check.js). מציגים **רק** את תוכן הדוח
 * (#myresume-paid-check-result — כולל הכותרת/הפתיח שנוספו בראשו) ומסתירים
 * את כל שאר העמוד (תפריט/טפסים/כפתורי פעולה) כדי שהקובץ שנשמר יהיה
 * הדוח הנקי בלבד, בלי "רעש" של האתר מסביבו.
 */
/*
 * #myresume-print-root: מוצמד ב-JS כילד ישיר של body רק בזמן הדפסה
 * (ראה renderDownloadPdfButton ב-paid-check.js) — מוסתר לגמרי במסך
 * הרגיל, ומוצג רק בהדפסה. **תוקן ב-v0.10.16:** הגישה הקודמת (visibility:
 * hidden + position:absolute על #myresume-paid-check-result עצמו) גרמה
 * לתוכן להופיע כפול/במיקום שגוי ב-PDF שנשמר בפועל — position:absolute
 * לא מתפרס נכון על פני כמה עמודים כשהתוכן ארוך מעמוד אחד. הפתרון
 * החדש: שיבוט (clone) של התוכן ל-div נפרד שמוצמד ישירות ל-body ונשאר
 * **בזרימה רגילה** (לא absolute) — כך שהדפדפן מפצל אותו נכון על פני
 * כמה עמודי PDF, בדיוק כמו כל תוכן ארוך אחר.
 */
#myresume-print-root {
	display: none;
}

@media print {
	body > *:not(#myresume-print-root) {
		display: none !important;
	}

	#myresume-print-root {
		display: block !important;
	}
}

/*
 * לוגו + שורת תחתית ב-PDF שנשמר (v0.10.17, לפי בקשה מפורשת). שני
 * האלמנטים נוצרים ב-JS רק בתוך ה-clone שמוצמד ל-#myresume-print-root
 * (ראה renderDownloadPdfButton ב-paid-check.js) — כלומר קיימים רק
 * במסמך המודפס/נשמר, לא במסך הרגיל.
 *
 * text-align:left כאן הוא **פיזי ומכוון**, לא flex-start "לוגי" — ניר
 * ביקש במפורש "בפינה השמאלית", וב-RTL flex-start/start היו ממקמים
 * בפינה הימנית בפועל.
 */
.myresume-print-logo-header {
	text-align: left;
	margin-bottom: 1rem;
}

.myresume-print-logo-header img {
	max-height: 60px;
	max-width: 220px;
	height: auto;
	width: auto;
}

.myresume-print-footer {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid #ddd;
	text-align: center;
	font-size: 0.85rem;
	color: #777;
}

/*
 * "דוחות עבר" — רשימת בדיקות שכבר הופקו. **v0.10.18:** עמוד עצמאי
 * נפרד לגמרי (shortcode [myresume_check_history], ראה
 * frontend-shortcode.php) — לא מוצגת יותר בתוך טופס הבדיקה החדשה
 * (כך היה ב-v0.10.17, הוסר לפי בקשה מפורשת).
 */
#myresume-paid-check-history-section {
	max-width: 100%;
	margin: 1.5rem auto;
}

.myresume-history-title {
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1a4d2e;
}

.myresume-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.myresume-history-item {
	width: 100%;
	text-align: right;
	padding: 0.65rem 0.9rem;
	font-size: 0.95rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fafafa;
	color: #222;
	cursor: pointer;
}

.myresume-history-item:hover {
	background: #f0f0f0;
}

.myresume-history-item:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.myresume-history-item:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* v0.10.18: מצב ריק (עדיין אין דוחות) — עמוד "דוחות עבר" עצמאי, אז
 * במקום להסתיר את כל הסקשן (כמו כשהיה מוטמע ב-v0.10.17) מוצג הסבר. */
.myresume-history-empty {
	padding: 0.65rem 0.9rem;
	font-size: 0.95rem;
	color: #666;
}

/* "חזרה לרשימת הדוחות" (v0.10.17) — מעל כותרת הדוח עצמה.
 * v0.10.44, לפי בקשה מפורשת ("צריך להיות מעוצב ככפתור - רקע כחול וטקסט
 * לבן"): שודרג מקישור טקסטואלי-משני (underline, בלי רקע) לכפתור מלא,
 * באותו סגנון בדיוק כמו שאר כפתורי הפעולה בדף (#myresume-download-pdf-btn
 * וכו') — רקע כחול המותג, טקסט לבן, padding/min-height עקביים. `!important`
 * על צבע/רקע כאזהרת-זהירות בלבד (לא הוכח כנדרש כאן, בניגוד לכותרת/
 * תוויות ההמלצות למעלה) — לפי אותו gotcha מתועד של כפתור ה-CTA, כשמדובר
 * ב-<button> שעלול להיתקל באותה בעיית עיצוב תבנית גלובלי. */
.myresume-back-to-history-btn {
	display: inline-block;
	margin: 0 0 1rem;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	font-size: 0.95rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: #1a73e8 !important;
	color: #fff !important;
	text-decoration: none;
	cursor: pointer;
}

.myresume-back-to-history-btn:hover {
	background: #1560c4 !important;
}

.myresume-back-to-history-btn:focus-visible {
	outline: 3px solid #1a4d2e;
	outline-offset: 2px;
}

/* v0.10.17: max-width: 620px; מ-@media (min-width: 640px) שכבר קיים
 * למטה חל גם על סקשן ההיסטוריה — ראה ההרחבה של הסלקטור שם. */

/*
 * אנימציית טעינה עם "שלבים" (v0.10.20, לפי בקשה מפורשת) — אזור קבוע
 * במרכז המסך, עם רקע (backdrop) שמכהה את שאר העמוד ומונע אינטראקציה
 * איתו כל עוד הבקשה בטיסה, וקופסה צבעונית במרכז עם ספינר + טקסט
 * שמתחלף. נוצר/מוסר דינמית ב-JS (showLoadingOverlay ב-paid-check.js)
 * — לא קיים ב-DOM כברירת מחדל.
 */
#myresume-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 9999;
}

.myresume-loading-box {
	/* v0.10.33, לפי בקשה מפורשת: הוחלף מכחול גנרי (#1a73e8) לכחול המותג
	 * של האתר (#2A5C8A) — כדי שיהיה אחיד עם אותו רכיב בדיוק שנוסף
	 * עכשיו גם לטיזר החינמי (free-check.css). */
	background: #2A5C8A;
	color: #fff;
	border-radius: 12px;
	padding: 2rem 1.75rem;
	max-width: 360px;
	width: 100%;
	text-align: center;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.myresume-loading-spinner {
	width: 42px;
	height: 42px;
	margin: 0 auto 1.25rem;
	border: 4px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: myresume-spin 0.9s linear infinite;
}

@keyframes myresume-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.myresume-loading-spinner {
		animation: none;
	}
}

.myresume-loading-text {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	/* גובה מינימלי — מונע "קפיצת" גודל הקופסה כשהטקסט מתחלף בין הודעות
	 * באורך שונה. */
	min-height: 2.6em;
}

.myresume-loading-note {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.85;
}

/*
 * טאב "הקרדיטים שלי" באזור האישי (My Account) — v0.10.22.
 */
.myresume-credits-section {
	max-width: 100%;
	margin: 1rem 0;
}

.myresume-credits-balance {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.myresume-buy-credits-btn {
	display: inline-block;
	padding: 0.65rem 1.25rem;
	border-radius: 6px;
	background: #1a73e8;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 1.25rem;
}

.myresume-buy-credits-btn:hover,
.myresume-buy-credits-btn:visited,
.myresume-buy-credits-btn:focus {
	color: #fff;
}

.myresume-buy-credits-btn:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

.myresume-credits-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.myresume-credits-table th,
.myresume-credits-table td {
	padding: 0.5rem 0.6rem;
	border: 1px solid #ddd;
	text-align: right;
}

.myresume-credits-table th {
	background: #f5f5f5;
	font-weight: 700;
}

.myresume-credits-empty {
	color: #666;
}