/* הגדרות כלליות לעמוד */
body {
  margin: 0; /* ביטול שוליים ברירת מחדל של הדפדפן כדי שהאתר יתפרס עד הקצה */
  font-family: system-ui, sans-serif; /* בחירת פונט מערכת מודרני שקורא עברית יפה */
  direction: rtl; /* כיוון האתר: מימין לשמאל (מותאם לעברית) */
  background-color: #fcfcfc; /* צבע רקע כללי לאתר (אפור בהיר כמעט לבן) */
  overflow: hidden; /* חוסם גלילה של כל המסך כדי שהסרגל יישאר קבוע */
}

/* המעטפת הראשית - תופסת את כל גובה המסך ומסדרת את החלקים בטור */
.main-layout {
  display: flex; /* שימוש ב-Flexbox לסידור גמיש ונוח של אלמנטים */
  flex-direction: column; /* סידור האלמנטים מלמעלה למטה (טור) */
  height: 100vh; /* מתפרס על 100% מגובה המסך */
  overflow: hidden;
}

/* --- סרגל עליון (Header) --- */
.top-bar {
  display: flex; /* סידור האלמנטים בשורה */
  justify-content: space-between; /* דוחף את האלמנטים לקצוות כדי ליצור ריווח שווה */
  align-items: center; /* יישור כל האלמנטים לאמצע הגובה של הסרגל */
  padding: 10px 20px; /* ריווח פנימי: 10px למעלה ולמטה, 20px בצדדים */
  border-bottom: 1px solid #e0e0e0; /* פס תחתון עדין להפרדה בין הסרגל לתוכן האתר */
  background: #fff; /* רקע לבן נקי לסרגל */
}

/* אזור הכפתורים והחיפוש משמאל */
.left-side {
  display: flex;
  align-items: center;
  gap: 12px; /* רווח קבוע של 12px בין הכפתורים ושורת החיפוש */
}

/* כפתור התחברות */
.login-btn {
  background: #111; /* צבע רקע שחור */
  color: white; /* צבע טקסט לבן */
  border: none; /* ביטול המסגרת הרגילה של כפתורים */
  padding: 6px 15px; /* הוספת שוליים פנימיים לכפתור (עובי ורוחב) */
  border-radius: 20px; /* הופך את פינות הכפתור לעגולות לחלוטין */
  cursor: pointer; /* הופך את סמן העכבר לאצבע לחיצה (יד) כשהוא עובר מעל */
  transition: opacity 0.2s; /* מגדיר שאנימציות (כמו שינוי שקיפות) יקרו בצורה חלקה תוך 0.2 שניות */
}

/* מה קורה כשעוברים עם העכבר על כפתור ההתחברות (Hover) */
.login-btn:hover {
  opacity: 0.8; /* הכפתור נהיה טיפה שקוף (80%) לאפקט יוקרתי */
}

/* שורת חיפוש עליונה */
.search-top {
  padding: 6px 12px;
  border: 1px solid #ccc; /* מסגרת אפורה דקה */
  border-radius: 20px; /* פינות עגולות בדיוק כמו הכפתורים */
  background: #f0f0f0; /* רקע אפור בהיר */
  outline: none; /* מעלים את המסגרת הכחולה/שחורה שהדפדפן מוסיף אוטומטית כשלוחצים */
  transition: border-color 0.2s; /* האנימציה להחלפת צבע המסגרת תהיה הדרגתית */
}

/* כשלוחצים על שורת החיפוש (Focus) */
.search-top:focus {
  border-color: #111; /* המסגרת הופכת לשחורה כדי להראות התמקדות */
}

/* כפתור הוספת מודעה (כפתור שקוף עם מסגרת) */
.add-btn {
  background: transparent; /* רקע שקוף */
  border: 1px solid #111; /* מסגרת שחורה */
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s; /* כשמרחפים, גם הרקע וגם הטקסט ישתנו לאט */
}

/* אפקט ריחוף לכפתור הוספת מודעה */
.add-btn:hover {
  background: #111; /* הרקע מתמלא בשחור */
  color: white; /* והטקסט הופך ללבן, אפקט נגטיב מאוד נפוץ */
}

/* עיצוב קישורי התפריט העליון (תגית a) */
.nav-links a {
  margin: 0 4px; /* ריווח עדין */
  padding: 6px 14px; /* ריפוד פנימי ליצירת צורת כדורית (Pill) */
  border-radius: 20px; /* פינות עגולות */
  text-decoration: none; /* ביטול קו תחתון */
  color: #555; /* צבע טקסט אפור נעים */
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease; /* מעבר חלק של כל המאפיינים (כולל רקע) */
}

/* ריחוף בלי אפקט - רק לחיצה מציגה שינוי */
.nav-links a:hover {
  color: inherit;
  background-color: transparent;
}

/* אזור הלוגו */
.logo-area {
  display: flex;
  align-items: center;
  gap: 8px; /* רווח קטן בין הטקסט לריבוע הלוגו */
}

.logo-text {
  font-weight: bold;
  font-size: 18px; /* טקסט גדול יותר לשם המותג */
}

/* הריבוע השחור של הלוגו */
.logo-box {
  width: 20px;
  height: 20px;
  background: #111; /* קובייה שחורה חלקה */
  border-radius: 4px; /* עיגול קל מאוד בפינות הריבוע */
}

/* --- מבנה חלוקה למרכז ולסרגל הצד --- */
.content-wrapper {
  display: flex; /* מסדר את האזור המרכזי וסרגל הצד אחד ליד השני בשורה */
  flex: 1; /* אומר למעטפת "קחי את כל המקום שנשאר במסך, מתחת לסרגל העליון" */
  flex-direction: row-reverse; /* <-- תוסיף את השורה הזו, והיא תהפוך את המיקומים שלהם ביניהם */
  min-height: 0; /* קריטי כדי שהגלילה תעבוד רק באזור המרכזי ולא על כל המסך */
  overflow: hidden; /* חותך את מה שיוצא החוצה מהמעטפת, כדי שכל חלק יגלול בנפרד */
}

/* --- האזור המרכזי (משטח העבודה הכהה) --- */
.center-content {
  flex: 1; /* דוחף את סרגל הצד ומתרחב על רוב המסך */
  padding: 0; /* ללא ריווח כדי שהאלמנטים יוכלו לזוז חופשי */
  background-color: transparent; /* שקוף כדי שהרקע המותאם אישית יראה */
  position: relative; /* חובה כדי שאלמנטים פנימיים ימוקמו בצורה אבסולוטית בתוכו */
  overflow: auto; /* מאפשר גלילה אם אלמנט יוצא מהגבולות במובייל */
  -webkit-overflow-scrolling: touch; /* החלקה חלקה במסכי מגע */
}

/* הבאנר הצבעוני הראשי */
.rainbow-banner {
  /* שימוש בגרדיאנט (מעבר צבעים) עדין משמאל לימין בצבעי פסטל */
  background: linear-gradient(90deg, #ffb3ba, #ffdfba, #ffffba, #bffcc6, #b3e5fc);
  border-radius: 24px; /* עיגול חזק של הפינות בסגנון מודרני */
  height: 180px; /* גובה קבוע לבאנר */
  display: flex; /* לשימוש נוח ביישור טקסט פנימי */
  align-items: center; /* מרכז את הטקסט ("גג") באמצע הגובה */
  justify-content: flex-end; /* דוחף את הטקסט שמאלה (ב-RTL זה אומר לצד השמאלי של המסך) */
  padding-right: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* צל רך וגדול מתחת לבאנר שייתן תחושת עומק */
}

/* עיצוב הטקסט "גג" הגדול */
.banner-txt {
  font-size: 55px; /* גודל פונט ענק כי זה הטקסט הראשי */
  margin: 0;
  font-weight: 800; /* פונט עבה מאוד ודומיננטי */
  color: #333;
}

/* השורה מתחת לבאנר המרכזי */
.banner-bottom {
  display: flex;
  justify-content: space-between; /* מפריד בין 2 מילות הטקסט לקצוות המנוגדים */
  margin-top: 10px; /* רווח עליון מתחת לבאנר */
  padding: 0 10px;
  font-weight: bold;
  font-size: 12px;
  color: #666; /* טקסט אפור ומשני */
}

/* --- דפים פנימיים מעוצבים (התוכן שמתחלף כשלוחצים, למשל 'דף חנות') --- */
.inner-page {
  background: white; /* רקע לבן כדף נקי על הרקע האפור של האתר */
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* צל רך ונעים לעין */
  animation: fadeIn 0.3s ease; /* מחיל את האנימציה שכתובה למטה כשהדף מופיע */
}

/* הגדרת אנימציית ההופעה (Fade In) לדפים הפנימיים */
@keyframes fadeIn {
  /* המצב ההתחלתי: שקוף לחלוטין ונמצא קצת יותר נמוך במסך */
  from { opacity: 0; transform: translateY(10px); }
  /* המצב הסופי: אטום לחלוטין ובמיקום האמיתי שלו - מה שיוצר אפקט החלקה למעלה */
  to { opacity: 1; transform: translateY(0); }
}

/* --- דשבורד צד ימין (תפריט הצד) --- */
.side-dashboard {
  width: 220px; /* רוחב קבוע לתפריט הצד */
  border-left: 1px solid #e0e0e0; /* קו הפרדה עדין בצד שמאל, שמפריד אותו מהתוכן */
  padding: 20px 15px;
  background: #fff; /* צבע הרקע לבן מלא */
  transition: width 0.3s ease, padding 0.3s ease, background 0.3s ease, border-color 0.3s ease; /* אנימציית קיפול נעימה */
  overflow-x: hidden; /* מונע מטקסט לגלוש החוצה כשהתפריט מתקפל */
  overflow-y: auto; /* מאפשר גלילה של תפריט הצד במידה ויש הרבה קישורים */
  white-space: nowrap; /* מונע שבירת שורות */
  display: flex;
  flex-direction: column;
}

/* כשהסליידר סגור - מתקפל לשורת אייקון צרה */
.side-dashboard.closed {
  width: 50px;
  padding: 20px 0;
  background: transparent !important;
  border-left-color: transparent;
}

/* העלמת התוכן כשהוא מקופל */
.side-dashboard.closed h3,
.side-dashboard.closed .search-side,
.side-dashboard.closed .side-menu,
.side-dashboard.closed .add-page-btn {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s;
}

/* כותרת תפריט הצד ("הדשבורד שלי") */
.side-header {
  display: flex;
  justify-content: space-between; /* דוחף את כפתור ההמבורגר לצד שמאל */
  align-items: center;
  margin-bottom: 15px;
  padding: 0 15px;
}

/* מרכוז ההמבורגר כשהתפריט סגור */
.side-dashboard.closed .side-header {
  justify-content: center;
  padding: 0;
}

/* העלמת הטקסט של הכותרת במצב סגור */
.side-dashboard.closed .side-header h3 {
  display: none;
}

.side-header h3 { margin: 0; font-size: 15px; color: #111; }

/* חיפוש ספציפי לתפריט הצד */
.search-side {
  width: 100%; /* מתפרס על כל הרוחב של סרגל הצד */
  padding: 6px;
  margin-bottom: 15px; /* מרחיק אותו מתפריט הקישורים שמתחתיו */
  border: 1px solid #ccc;
  border-radius: 6px; /* פינות טיפה עגולות */
  background: #f5f5f5;
  box-sizing: border-box; /* מוודא שהריווח (padding) נכלל בתוך ה-100% ולא חורג החוצה */
  outline: none;
}

/* כששורת החיפוש במיקוד */
.search-side:focus {
  border-color: #111;
}

/* רשימת הניווט (הקישורים) בצד */
.side-menu {
  list-style: none; /* ביטול הנקודות המכוערות שמופיעות אוטומטית ברשימה של HTML */
  padding: 0;
  margin: 0;
}

/* כל כפתור בודד בתוך תפריט הצד */
.side-menu li {
  padding: 10px; /* ריווח פנימי לכל כפתור ברשימה */
  border-radius: 6px; /* פינות עגולות למראה כפתורי */
  cursor: pointer; /* הופך ליד בעת ריחוף */
  margin-bottom: 5px; /* רווח בין כפתור לכפתור */
  transition: all 0.2s; /* כל שינוי על הכפתור, כמו צבע, יהיה חלק ומונפש */
  font-weight: 500; /* פונט בינוני-עבה */
  color: #444; /* אפור כהה */
}

/* כשמרחפים עם העכבר מעל כפתור רגיל בתפריט צד (Hover) */
.side-menu li:hover {
  background: #f0f0f0; /* הכפתור מקבל רקע אפור בהיר */
  color: #111; /* הטקסט נהיה שחור יותר */
}

/* המחלקה שמסמנת באיזה דף אנחנו נמצאים כרגע (הכפתור הפעיל) */
.side-menu .active-item {
  background: #222; /* מקבל רקע שחור כהה משמעותי */
  color: white; /* והטקסט הופך ללבן כמובן כדי שיראו אותו */
}

/* כשמרחפים מעל הכפתור הפעיל */
.side-menu .active-item:hover {
  background: #111; /* משנה טיפה את גוון השחור כדי להראות תגובתיות */
  color: white;
}

/* --- עיצובים חדשים למערכת הניהול (מצב עריכה והוספת עמודים) --- */

/* סרגל הכלים המרחף בתחתית (במקום הכפתורים למעלה) */
.floating-toolbar {
  position: fixed;
  top: 90px;
  left: 30px;
  bottom: auto;
  transform: none;
  display: flex;
  gap: 8px; /* reduced from 12px */
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px; /* reduced from 12px 24px */
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  backdrop-filter: blur(10px); /* אפקט זכוכית */
  z-index: 1000;
  border: 1px solid rgba(0,0,0,0.05);
  transition: padding 0.3s ease;
}

/* כשהסרגל ממוזער, מעלימים את כל הכפתורים חוץ ממזעור וגרירה */
.floating-toolbar.minimized .float-btn:not(#btn-minimize-toolbar),
.floating-toolbar.minimized .toolbar-separator {
  display: none !important;
}

.floating-toolbar.minimized {
  padding: 4px 8px; /* reduced */
  width: fit-content;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* אפקטים על ידית הגרירה */
.toolbar-drag-handle:hover {
  color: #333 !important;
}
.toolbar-drag-handle:active {
  cursor: grabbing !important;
}

.float-btn {
  padding: 4px 10px; /* reduced from 8px 18px */
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px; /* reduced from 15px */
  display: flex;
  align-items: center;
  gap: 4px; /* reduced from 8px */
}

/* כפתור מצב עריכה (לבן עם מסגרת שחורה כמו בתמונה) */
.edit-float-btn {
  background: white;
  border: 1px solid #111; /* reduced from 2px */
  color: #111;
}

.edit-float-btn:hover {
  background: #fafafa;
}

/* כשהעריכה דלוקה, הכפתור הופך לשחור מלא */
.edit-float-btn.active {
  background: #111;
  color: white;
}

/* כפתורי הוספת תמונה/טקסט (אפורים כמו בתמונה) */
.add-float-btn {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  color: #333;
}

.add-float-btn:hover {
  background: #e4e4e4;
  border-color: #d0d0d0;
}

/* כפתור הוספת עמוד בתפריט הצד */
.add-page-btn {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  background: #e0f2f1; /* ירוק עדין מאוד */
  color: #00695c;
  border: 1px dashed #00695c;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.add-page-btn:hover {
  background: #b2dfdb;
}

/* עיצוב לאלמנטים כשהם במצב עריכה (contenteditable) */
.center-content [contenteditable="true"] {
  outline: none; /* מעלים את המסגרת המכוערת הרגילה */
  border: 1px dashed #ccc; /* מסגרת מקווקות עדינה שמסמנת "אני ניתן לעריכה" */
  border-radius: 4px;
  padding: 2px 4px;
  transition: all 0.2s;
}

/* כשעוברים עם העכבר על טקסט שניתן לעריכה */
.center-content [contenteditable="true"]:hover {
  border-color: #333; /* המסגרת מתכהה */
  background: #fafafa; /* הרקע טיפה מאפיר כדי להבליט */
  cursor: text; /* סמן העכבר הופך לסימון טקסט */
}

/* כשלוחצים ממש וכותבים בתוך הטקסט */
.center-content [contenteditable="true"]:focus {
  border-color: #4CAF50; /* מסגרת ירוקה זוהרת */
  background: #fff;
  color: #111; /* טקסט שחור כדי שיראו טוב על הרקע הכהה בזמן עריכה */
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* --- כפתור אורח / מנהל --- */
.manager-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  color: #f5f5f7;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", sans-serif;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  letter-spacing: 0.01em;
}

.manager-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* כשמנהל - נראה בולט יותר */
.manager-btn.is-admin {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.7);
  font-weight: 600;
}

/* --- Apple Global Navigation --- */
.apple-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 44px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: none;
  display: flex;
  justify-content: center;
}

.apple-nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 0 30px;
}

.logo-area svg {
  color: #f5f5f7;
  transition: color 0.3s;
  opacity: 0.8;
}

.logo-area:hover svg {
  opacity: 1;
}

.nav-links {
  display: flex;
  gap: 32px !important;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #f5f5f7 !important;
  opacity: 0.8;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none;
  transition: opacity 0.3s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ריחוף בלי אפקט - רק לחיצה מציגה שינוי */
.nav-links a:hover {
  opacity: 0.8;
}

.right-icons svg {
  color: #f5f5f7;
  opacity: 0.8;
  transition: opacity 0.3s;
  cursor: pointer;
}

.right-icons svg:hover {
  opacity: 1;
}

/* (כפתורי ההוספה עברו לסרגל המרחף למטה) */

/* כל אלמנט שניתן לגרירה */
.draggable-resizable {
  position: absolute; /* חובה לגרירה חופשית */
  box-sizing: border-box;
  touch-action: none; /* מונע גלילה במסכי מגע כשגוררים */
  user-select: none; /* מונע סימון טקסט בטעות בזמן גרירה */
  cursor: grab;
  /* עיצוב התחלתי של טקסט כדי שיראו אותו על הרקע הכהה */
  color: white; 
}

/* במצב צפייה - מאפשרים סימון והעתקת טקסט */
body:not(.edit-mode) .draggable-resizable {
  user-select: text;
  cursor: default;
}

/* הצגת סמן יד (pointer) עבור אלמנטים מקושרים במצב תצוגה/צופה */
body:not(.edit-mode) .draggable-resizable[data-href],
body:not(.edit-mode) .draggable-resizable[data-page-link],
body:not(.edit-mode) .draggable-resizable[data-href] *,
body:not(.edit-mode) .draggable-resizable[data-page-link] * {
  cursor: pointer !important;
}

/* מניעת עיוות, מתיחה או הגדלה (Crop) של תמונות ווידאו במחשב */
.draggable-resizable img,
.draggable-resizable video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}


/* כשלוחצים וגוררים באמת */
.draggable-resizable:active {
  cursor: grabbing;
}

/* כשהאלמנט נבחר (קליק עליו) - מסגרת כחולה ברורה */
.draggable-resizable.selected {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}

/* נקודות אחיזה לשינוי גודל (Resize Handles) שיופיעו רק כשנבחר */
.draggable-resizable.selected::before,
.draggable-resizable.selected::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border: 2px solid #2196F3;
  border-radius: 50%;
  pointer-events: none; /* כדי לא להפריע לאירועי העכבר */
}

/* ממקם נקודה אחת למטה-ימינה ואחת למעלה-שמאלה */
.draggable-resizable.selected::before { bottom: -6px; right: -6px; }
.draggable-resizable.selected::after { top: -6px; left: -6px; }

/* כפתורי פעולה לאלמנט הנבחר */
.actions-container {
  position: absolute;
  top: -45px;
  right: -10px;
  display: flex;
  gap: 8px;
  z-index: 1000;
}

.action-btn {
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: all 0.2s;
  padding: 0;
}

.action-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.delete-btn { color: #f44336; }
.copy-btn { color: #2196F3; font-size: 14px; }
.link-btn { color: #4CAF50; }

/* --- עיצוב מיוחד לחלון הכתבות --- */
.news-widget {
  background: white;
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  color: #111;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid #eee;
}

.news-item:last-child {
  border-bottom: none;
}

.news-image {
  width: 180px;
  height: 140px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

.news-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.news-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.news-meta {
  font-size: 15px;
  color: #111;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.news-author {
  color: #d84315; /* כתום-אדום כמו בתמונה */
}

.news-excerpt {
  font-size: 16px;
  color: #111;
  margin: 0;
  line-height: 1.4;
  text-align: right;
}



/* סימון של אזור הקליטה בתפריט העליון בעת גרירה */
.nav-links.drag-over {
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 5px;
}

/* סימון הלינק הפעיל בתפריט העליון */
.nav-links a.active-top-nav {
  font-weight: 600;
  color: white;
  background-color: #222; /* רקע שחור כהה בדומה לתפריט הצד */
  border-bottom: none; /* הסרת הקו התחתון הנוקשה */
}

/* --- Modal Styles --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  text-align: right;
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.modal-content label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 14px;
}

.modal-content input, .modal-content select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
  font-family: inherit;
}

.modal-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: opacity 0.2s;
}

.modal-btn:hover {
  opacity: 0.8;
}

.cancel-btn {
  background: #f1f1f1;
  color: #333;
}

.danger-btn {
  background: #ff4d4f;
  color: white;
}

.save-btn {
  background: #111;
  color: white;
}

/* --- Cookie Consent Banner --- */
.cookie-consent {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  max-width: calc(100vw - 40px);
  background-color: #ffffff;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 9999;
  font-family: Arial, sans-serif;
  color: #555;
  padding: 24px;
  box-sizing: border-box;
}

.cookie-content {
  position: relative;
}

.close-cookie {
  position: absolute;
  top: -10px;
  right: -10px;
  background: none;
  border: none;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.cookie-consent p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px 0;
  text-align: left;
  direction: ltr; /* English text */
}

.cookie-consent strong {
  color: #333;
}

.cookie-policy {
  font-size: 14px;
}

.cookie-policy a {
  color: #555;
  text-decoration: underline;
  font-weight: bold;
}

.cookie-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn-green {
  background-color: #1a8b1a;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-green:hover {
  background-color: #126312;
}

/* --- News Feed (Article List) --- */
.news-feed {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  direction: rtl; /* Right to left for Hebrew */
  text-align: right;
}

.news-item {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 25px;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  direction: rtl;
  text-align: right;
}

.news-text {
  flex: 1;
}

.news-title {
  font-size: 22px;
  font-weight: bold;
  color: #111;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.news-meta {
  font-size: 15px;
  color: #111;
  margin-bottom: 15px;
}

.news-author {
  color: #e65100; /* Orange color for author name */
}

.news-excerpt {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

.news-image {
  flex-shrink: 0;
}

.news-image img {
  width: 240px;
  height: 140px;
  border-radius: 8px;
  object-fit: cover;
}

.news-divider {
  border: 0;
  height: 1px;
  background: #e0e0e0;
  margin: 25px 0;
}

/* =========================================
   Marquee Selection Box (תיבת סימון כחולה)
   ========================================= */
.selection-box {
  position: absolute;
  border: 1px solid rgba(0, 120, 215, 0.8);
  background-color: rgba(0, 120, 215, 0.2);
  pointer-events: none; /* כדי שלא יפריע להמשך גרירת העכבר */
  z-index: 9999;
}

/* =========================================
   Premium Example Articles Grid
   ========================================= */
.premium-articles-section {
  padding: 50px 30px;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f3 100%);
  border-radius: 24px;
  margin: 40px auto;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
  font-family: 'Inter', system-ui, sans-serif;
}

.premium-articles-header {
  text-align: center;
  margin-bottom: 50px;
}

.premium-articles-header h2 {
  font-size: 42px;
  color: #1a1a2e;
  margin: 0 0 15px 0;
  letter-spacing: -1px;
  font-weight: 800;
}

.premium-articles-header p {
  color: #666;
  font-size: 18px;
  margin: 0;
}

.premium-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

.premium-article-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.premium-article-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.premium-article-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.premium-article-card:hover .premium-article-image {
  transform: scale(1.08);
}

.premium-article-image-wrapper {
  overflow: hidden;
  position: relative;
}

.premium-article-category {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.5px;
  z-index: 2;
}

.premium-article-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.premium-article-title {
  font-size: 22px;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.premium-article-excerpt {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 25px 0;
  flex-grow: 1;
}

.premium-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f3f4f6;
  padding-top: 18px;
  font-size: 14px;
  color: #6b7280;
}

.premium-article-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #374151;
}

.premium-article-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
/* --- Floating Bottom Toolbar --- */
.bottom-floating-bar {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #353538;
  height: 60px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 0 25px 0 20px; 
  gap: 30px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border-left: 4px solid #1ed760;
  z-index: 9999;
}

.bottom-floating-bar .bar-icon {
  background: transparent;
  border: none;
  color: #9c9c9e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.bottom-floating-bar .bar-icon:hover {
  color: #ffffff;
  transform: scale(1.1);
}

.bottom-floating-bar .bar-ai-btn {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  border: none;
  color: white;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bottom-floating-bar .bar-ai-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.7);
}

/* Tooltips for bottom bar */
.bottom-floating-bar [data-tooltip] {
  position: relative;
}

.bottom-floating-bar [data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0px);
  background-color: #ffffff;
  color: #333333;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 10000;
  font-family: 'Inter', sans-serif;
}

/* Little arrow for tooltip */
.bottom-floating-bar [data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  border-width: 6px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 10000;
}

.bottom-floating-bar [data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

.bottom-floating-bar [data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}

/* --- AI Side Drawer (Customer Service) --- */
.chat-modal-overlay {
  position: fixed;
  top: 0; left: -100%; bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: #1e1e1e;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 0 30px rgba(0,0,0,0.5);
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-modal-overlay.chat-open {
  left: 0;
}

.chat-modal-window {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.chat-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #222225;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.chat-header-title {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.chat-close-btn {
  color: #888;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s;
}

.chat-close-btn:hover {
  color: #fff;
}

.chat-modal-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #1e1e1e; /* Dark background */
}

.chat-message {
  display: flex;
  width: 100%;
}

.chat-message.automated-msg {
  justify-content: flex-start;
}

.chat-message.user-msg {
  justify-content: flex-end;
}

.msg-content {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 12px;
  color: #ececec; /* Light text */
  font-size: 14px;
  position: relative;
  line-height: 1.5;
  text-align: right;
}

.automated-msg .msg-content {
  background: #2c2c2e; /* Dark gray for AI */
  border-top-right-radius: 4px;
  border: 1px solid rgba(255,255,255,0.05);
}

.user-msg .msg-content {
  background: #3a3a3c; /* Slightly lighter gray for user */
  border-top-left-radius: 4px;
  text-align: left;
}

.msg-sender {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.user-msg .msg-sender {
  justify-content: flex-end;
}

.msg-time {
  font-size: 11px;
  color: #666;
  margin-top: 5px;
}

.chat-modal-footer {
  display: flex;
  padding: 15px 20px;
  background: #1e1e1e;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-direction: row-reverse;
}

.chat-modal-footer input {
  flex: 1;
  background: #2c2c2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14px;
  color: #fff;
  outline: none;
  direction: rtl;
  transition: border-color 0.2s;
}

.chat-modal-footer input:focus {
  border-color: #555;
}

.chat-send-btn {
  background: #f1f1f1;
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 0 25px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.chat-send-btn:hover {
  background: #e1e1e1;
}



/* --- Mobile View Overrides --- */
html.mobile-view .bottom-floating-bar,
html.mobile-view .chat-modal-overlay,
html.mobile-view .floating-toolbar,
html.mobile-view .side-menu {
  display: none !important;
}

html.mobile-view .top-bar {
  padding: 5px 10px !important;
}

html.mobile-view .center-content {
  margin-right: 0 !important;
}

/* התאמה פשוטה למובייל דרך Media Queries תקני */
@media (max-width: 768px) {
  body, .main-layout {
    overflow-y: auto !important; /* מאפשר גלילה רגילה במובייל */
    height: auto !important;
  }
  
  /* הסתרת סרגלים מיותרים לאורח במובייל - רק אם לא במצב עריכה */
  body:not(.edit-mode) .floating-toolbar, 
  body:not(.edit-mode) .side-menu {
    display: none !important;
  }

  /* התאמת תפריט עליון במובייל - ללא חריגה מהשחור ובקטן ואלגנטי */
  .apple-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    height: 44px !important;
    background: rgba(0, 0, 0, 0.9) !important;
  }

  .content-wrapper {
    margin-top: 44px !important;
  }
  
  .apple-nav-content {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 10px !important;
    justify-content: space-between !important;
    height: 100% !important;
  }
  
  .nav-links {
    gap: 8px !important;
    justify-content: center !important;
    width: auto !important;
    order: unset !important;
    flex-wrap: nowrap !important;
    overflow-x: auto; /* מאפשר החלקה אופקית אם יש הרבה קישורים */
    scrollbar-width: none; /* מסתיר פס גלילה */
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  
  .nav-links a {
    padding: 4px 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important; /* מונע שבירת שורה */
  }

  .logo-area {
    order: unset !important;
  }

  .right-icons {
    order: unset !important;
  }

  /* התאמת התוכן המרכזי במובייל */
  .center-content {
    min-height: auto !important;
    height: auto !important;
    padding: 10px 10px 20px !important;
  }

  /* התאמת אלמנטים שנגררו למצב מוערם, גדול וקריא במובייל (טיפ 2) */
  .draggable-resizable {
    position: relative !important; /* ביטול מיקום אבסולוטי במובייל להערמה אנכית */
    left: 0 !important;
    top: 0 !important;
    width: 100% !important; /* רוחב מלא במובייל */
    margin-bottom: 12px !important; /* מרווח ברירת מחדל קטן יותר */
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* מרכוז אלמנטים פנימית */
    text-align: center !important; /* מרכוז טקסטים */
    box-sizing: border-box !important;
  }

  /* מרווחים מותאמים לפי סוג התוכן למראה צפוף ונקי כמו באפל */
  .draggable-resizable:has(p, h1, h2, h3, h4, h5, h6, span):not(:has(img, video, a, button)) {
    margin-bottom: 6px !important; /* מרווח קטן מאוד בין שורות טקסט עוקבות */
  }

  .draggable-resizable:has(img, video) {
    width: fit-content !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important; /* מרווח קצת יותר גדול אחרי תמונות או סרטונים */
  }

  .draggable-resizable:has(a, button) {
    margin-bottom: 16px !important; /* מרווח אחרי כפתורים */
  }

  /* נחיל height: auto רק אם הבלוק מכיל מלל או תג תמונה/וידאו פנימי. 
     אם הבלוק הוא ריק (לדוגמה רקע של תמונה), הוא ישמור על הגובה המקורי שלו מהמחשב */
  .draggable-resizable:has(p, h1, h2, h3, h4, h5, h6, img, video, span, a) {
    height: auto !important;
  }

  /* יישור טקסטים במובייל: באנרים של אפל (עם כפתורים/תמונות) יישארו במרכז, וטקסט חופשי יישר לימין באופן סימטרי */
  
  /* 1. התאמת באנרים/אלמנטים עם כפתורים, קישורים או מדיה - מרכוז */
  .draggable-resizable:has(a, button, img, video) p,
  .draggable-resizable:has(a, button, img, video) h1,
  .draggable-resizable:has(a, button, img, video) h2,
  .draggable-resizable:has(a, button, img, video) h3,
  .draggable-resizable:has(a, button, img, video) h4,
  .draggable-resizable:has(a, button, img, video) h5,
  .draggable-resizable:has(a, button, img, video) h6,
  .draggable-resizable:has(a, button, img, video) span {
    text-align: center !important;
    width: 100% !important;
  }

  /* 2. התאמת מיכלי טקסט חופשי בלבד - יישור לימין (RTL) להתחלת שורה סימטרית */
  .draggable-resizable:not(:has(a, button, img, video)) {
    align-items: flex-start !important;
    text-align: right !important;
  }

  .draggable-resizable:not(:has(a, button, img, video)) p,
  .draggable-resizable:not(:has(a, button, img, video)) h1,
  .draggable-resizable:not(:has(a, button, img, video)) h2,
  .draggable-resizable:not(:has(a, button, img, video)) h3,
  .draggable-resizable:not(:has(a, button, img, video)) h4,
  .draggable-resizable:not(:has(a, button, img, video)) h5,
  .draggable-resizable:not(:has(a, button, img, video)) h6,
  .draggable-resizable:not(:has(a, button, img, video)) span {
    text-align: right !important;
    width: 100% !important;
  }

  /* כפתורים וקישורים לא יימתחו במובייל, אלא יתמרכזו כגלולה */
  .draggable-resizable a,
  .draggable-resizable button {
    width: auto !important;
    max-width: max-content !important;
    margin: 8px auto !important;
    display: inline-block !important;
  }

  /* התאמת תמונות ווידאו להצגה מלאה ללא חיתוך במובייל */
  .draggable-resizable img, 
  .draggable-resizable video {
    width: auto !important; /* מאפשר לתמונה להצטמצם רוחבית לפי הגובה */
    max-width: 100% !important;
    height: auto !important; 
    max-height: 70vh !important; /* מונע מתמונות לאורך להפוך לענקיות ולהשתרע על כל גובה המסך */
    object-fit: contain !important; /* מציג את התמונה במלואה ללא עיוות או חיתוך */
    display: block !important;
    margin: 0 auto !important;
    border-radius: 12px !important; /* פינות מעוגלות אלגנטיות */
  }

  /* מניעת חיתוך (Crop) לתמונות רחבות במיוחד (Landscape) - הן יוצגו כבאנרים רחבים בפרופורציה המקורית שלהן */
  .draggable-resizable img.landscape-img, 
  .draggable-resizable video.landscape-img {
    aspect-ratio: auto !important; /* ביטול החובה של ריבוע 1:1 */
    object-fit: contain !important; /* הצגת התמונה במלואה ללא חיתוך */
  }
}

/* --- Premium Auth Modal Styles --- */
.auth-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  direction: ltr; /* התאמה לעיצוב השמאלי-ימני של החלון המבוקש */
}

.auth-modal-card {
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 40px;
  width: 95%;
  max-width: 400px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  position: relative;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.auth-modal-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
}

.auth-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.auth-modal-close-btn {
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  padding: 0;
}

.auth-modal-close-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.auth-modal-logo {
  width: 75px;
  height: 75px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-section-title {
  font-size: 15px;
  color: #e4e4e7;
  font-weight: 500;
  margin: 16px 0 12px;
  text-align: center;
}

.auth-social-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
}

.auth-social-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.auth-social-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.auth-social-btn svg {
  display: block;
}

.auth-divider {
  font-size: 13px;
  color: #71717a;
  margin: 8px 0;
  font-weight: 500;
  text-align: center;
  position: relative;
  width: 100%;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.auth-divider::before {
  left: 0;
}

.auth-divider::after {
  right: 0;
}

.auth-email-container {
  width: 100%;
  position: relative;
  margin-bottom: 24px;
}

.auth-email-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 50px 14px 16px; /* מרווח עבור הכפתור מצד ימין */
  color: #ffffff;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
}

.auth-email-input::placeholder {
  color: #52525b;
}

.auth-email-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.auth-email-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}

.auth-email-submit:hover {
  background: rgba(255, 255, 255, 0.2);
}

.auth-email-submit svg {
  width: 16px;
  height: 16px;
  color: #ffffff;
}

.auth-modal-footer {
  font-size: 11px;
  color: #52525b;
  text-align: center;
  line-height: 1.6;
  max-width: 300px;
}

.auth-modal-footer a {
  color: #71717a;
  text-decoration: none;
  transition: color 0.2s;
}

.auth-modal-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* ===== אזורי לחיצה (Hotspots) ===== */
.hotspot-overlay {
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 10;
}

/* במצב עריכה - מסגרת כחולה עם מחיקה */
.edit-mode .hotspot-overlay {
  border: 2px dashed #2196F3;
  background: rgba(33, 150, 243, 0.15);
}

/* במצב צפייה - שקוף עם cursor pointer */
body:not(.edit-mode) .hotspot-overlay {
  border: none;
  background: transparent;
  cursor: pointer !important;
}

.hotspot-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #e53935;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  line-height: 1;
}

body:not(.edit-mode) .hotspot-delete-btn {
  display: none;
}

/* ריבוע גרירה בזמן ציור */
#hotspot-draw-rect {
  position: absolute;
  border: 2px dashed #ff5722;
  background: rgba(255, 87, 34, 0.15);
  pointer-events: none;
  z-index: 9999;
  box-sizing: border-box;
}

/* מצב ציור - cursor crosshair */
.hotspot-drawing-mode {
  cursor: crosshair !important;
}
.hotspot-drawing-mode * {
  cursor: crosshair !important;
  user-select: none !important;
}


/* ===== קרא עוד ===== */
.readmore-wrapper {
  position: relative;
}

.readmore-collapsed .readmore-content {
  max-height: 120px;
  overflow: hidden;
}

.readmore-fade {
  display: none;
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--rm-bg, #fff));
  pointer-events: none;
}

.readmore-collapsed .readmore-fade {
  display: block;
}

.readmore-btn {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  direction: rtl;
}

/* ===== דף כתבות ===== */
.articles-page { width: 100%; background: #f2f2f2; direction: rtl; padding: 0; box-sizing: border-box; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }
.art-inner { max-width: 1140px; margin: 0 auto; padding: 48px 18px 40px; box-sizing: border-box; }

/* Search */
.art-search-wrap { margin-bottom: 18px; }
.art-search { width: 100%; padding: 13px 18px; border: 1.5px solid #ddd; border-radius: 10px; font-size: 15px; box-sizing: border-box; direction: rtl; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.art-search:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.art-no-results { text-align: center; color: #999; font-size: 15px; padding: 30px 0; }

/* Featured grid */
.art-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.art-featured-card { position: relative; overflow: hidden; height: 190px; border-radius: 12px; cursor: pointer; box-shadow: 0 3px 14px rgba(0,0,0,0.12); transition: transform 0.2s, box-shadow 0.2s; }
.art-featured-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.22); }
.art-featured-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.art-featured-card:hover img { transform: scale(1.05); }
.art-featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 100%); }
.art-featured-info { position: absolute; bottom: 0; right: 0; left: 0; padding: 18px 14px 12px; color: #fff; }
.art-featured-info h3 { margin: 6px 0 0; font-size: 14px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.art-featured-meta { font-size: 10px; color: rgba(255,255,255,0.7); margin-top: 5px; }

/* Shared */
.art-category-badge { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff !important; letter-spacing: 0.3px; background: #111 !important; }
.art-meta { display: flex; flex-direction: row; gap: 7px; font-size: 11px; color: #999; margin-bottom: 6px; align-items: center; flex-wrap: wrap; }
.art-section-title { font-size: 16px; font-weight: 800; color: #111; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px solid #111; display: inline-block; }

/* Layout */
.art-layout { display: flex; flex-direction: row; gap: 24px; align-items: flex-start; }
.art-main { flex: 1; min-width: 0; }
.art-sidebar { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }

/* Article rows (full width list) */
.art-rows { background: #fff; border-radius: 12px; padding: 4px 22px; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.art-row { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid #eee; cursor: pointer; transition: opacity 0.15s; }
.art-row:last-child { border-bottom: none; }
.art-row:hover .art-row-text h3 { color: #111; }
.art-row-text { flex: 1; min-width: 0; }
.art-row-text h3 { font-size: 17px; font-weight: 800; margin: 0 0 12px; line-height: 1.45; color: #111; transition: color 0.15s; }
.art-row-text p { font-size: 13px; color: #777; margin: 0 0 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-row-meta { display: flex; gap: 8px; font-size: 12px; color: #111; font-weight: 600; align-items: center; }
.art-row-meta .art-row-sep { color: #ccc; }
.art-row-img-wrap { position: relative; width: 170px; height: 110px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.art-row-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-row-img-placeholder { width: 100%; height: 100%; background: #e8e8e8; }

/* Sidebar */
.art-sidebar-box { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 1px 8px rgba(0,0,0,0.07); width: 100%; box-sizing: border-box; }
.art-sidebar-title { font-size: 16px; font-weight: 800; color: #111; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 3px solid #111; }
.art-newsletter input { width: 100%; padding: 9px 12px; border: 1.5px solid #e8e8e8; border-radius: 8px; margin: 5px 0; box-sizing: border-box; font-size: 13px; transition: border-color 0.2s; direction: rtl; }
.art-newsletter input:focus { outline: none; border-color: #111; }
.art-newsletter button { width: 100%; background: #111; color: #fff; padding: 11px; border: none; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 14px; margin-top: 8px; transition: background 0.2s; }
.art-newsletter button:hover { background: #000; }
.art-popular-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; cursor: pointer; transition: background 0.15s; border-radius: 6px; }
.art-popular-item:last-child { border-bottom: none; padding-bottom: 0; }
.art-popular-item:hover { background: #fafafa; }
.art-popular-num { font-size: 24px; font-weight: 900; color: #ebebeb; line-height: 1; min-width: 34px; text-align: center; }

/* Add/Delete buttons */
.art-add-btn { display: none; width: 100%; border: 2px dashed #333; background: #f7f7f7; color: #333; padding: 14px; cursor: pointer; margin-top: 4px; font-size: 15px; font-weight: 700; border-radius: 10px; box-sizing: border-box; transition: background 0.15s; }
.art-add-btn:hover { background: #efefef; }
.edit-mode .art-add-btn { display: block; }
.art-delete-btn { display: none; position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.55); border: none; border-radius: 50%; width: 28px; height: 28px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; align-items: center; justify-content: center; transition: background 0.15s; }
.art-delete-btn:hover { background: #b91c1c; }
.edit-mode .art-delete-btn { display: flex; }
.art-pin-btn { display: none; position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.55); border: none; border-radius: 50%; width: 28px; height: 28px; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; }
.art-pin-btn:hover { background: #d97706; transform: scale(1.1); }
.edit-mode .art-pin-btn { display: flex; }


/* Article detail view */
.art-detail { width: 100%; background: #fff; direction: rtl; min-height: 100%; }
.art-detail-inner { max-width: 780px; margin: 0 auto; padding: 24px 20px 60px; }
.art-back-btn { background: none; border: none; color: #111; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 0 18px; display: flex; align-items: center; gap: 4px; }
.art-back-btn:hover { text-decoration: underline; }
.art-detail-hero { width: 100%; max-height: 340px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; }
.art-detail-body { }
.art-detail-title { font-size: 24px; font-weight: 900; color: #111; line-height: 1.35; margin: 8px 0 18px; }
.art-detail-content p { font-size: 15px; color: #333; line-height: 1.75; margin: 0 0 16px; }
.art-detail-link { display: inline-block; margin-top: 24px; padding: 12px 22px; background: #111; color: #fff; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 14px; transition: background 0.2s; }
.art-detail-link:hover { background: #000; }

/* Recommended articles */
.art-rec-section { margin-top: 40px; padding-top: 28px; border-top: 1px solid #eee; }
.art-rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.art-rec-card { cursor: pointer; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.08); transition: box-shadow 0.2s, transform 0.15s; }
.art-rec-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.14); transform: translateY(-2px); }
.art-rec-img { position: relative; width: 100%; height: 120px; overflow: hidden; }
.art-rec-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-rec-badge { position: absolute; top: 8px; right: 8px; }
.art-rec-text { padding: 12px 14px; }
.art-rec-text h4 { font-size: 14px; font-weight: 800; margin: 0 0 8px; line-height: 1.4; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-rec-meta { font-size: 11px; color: #999; }
@media (max-width: 768px) {
  .art-rec-grid { grid-template-columns: 1fr; }
  .art-rec-img { height: 160px; }
}

/* Responsive */
@media (max-width: 900px) {
  .art-featured-grid { grid-template-columns: 1fr 1fr; }
  .art-featured-grid .art-featured-card:last-child { display: none; }
}
@media (max-width: 768px) {
  .art-inner { padding: 14px 12px 36px; }
  .art-featured-grid { display: none; }
  .art-layout { flex-direction: column; }
  .art-sidebar { width: 100%; display: flex !important; flex-direction: column !important; gap: 16px !important; }
  .art-rows { padding: 4px 14px; }
  .art-row { gap: 12px; padding: 16px 0; }
  .art-row-img-wrap { width: 110px; height: 80px; }
  .art-row-text h3 { font-size: 15px; margin-bottom: 8px; }
  .art-row-text p { display: none; }
  .art-detail-title { font-size: 22px; }
  .art-detail-content p { font-size: 15px; }
}

/* ===== עמוד חנות ===== */
.shop-page { width: 100%; background: #f5f5f7; direction: rtl; box-sizing: border-box; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }
.shop-inner { max-width: 1140px; margin: 0 auto; padding: 48px 18px 50px; box-sizing: border-box; }
.shop-header { text-align: center; margin-bottom: 36px; }
.shop-title { font-size: 34px; font-weight: 900; color: #111; margin: 0 0 8px; }
.shop-subtitle { font-size: 17px; color: #888; margin: 0; }
/* Search + layout */
.shop-search-wrap { max-width: 700px; margin: 0 auto 32px; }
.shop-search { width: 100%; padding: 13px 18px; border: 1.5px solid #ddd; border-radius: 12px; font-size: 15px; box-sizing: border-box; direction: rtl; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.shop-search:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.shop-no-results { text-align: center; color: #999; font-size: 15px; padding: 30px 0; }
.shop-layout { display: flex; flex-direction: row; gap: 26px; align-items: flex-start; }
.shop-main { flex: 1; min-width: 0; }
.shop-sidebar { width: 280px; flex-shrink: 0; }
.shop-sidebar-box { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.shop-sidebar-title { font-size: 16px; font-weight: 800; color: #111; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 3px solid #111; }
.shop-best-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; align-items: center; transition: background 0.15s; border-radius: 6px; }
.shop-best-item:last-child { border-bottom: none; padding-bottom: 0; }
.shop-best-item:hover { background: #fafafa; }
.shop-best-num { font-size: 20px; font-weight: 900; color: #e5e5e5; min-width: 28px; text-align: center; }
.shop-best-img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.shop-best-text { flex: 1; min-width: 0; }
.shop-best-name { font-size: 13px; font-weight: 700; color: #111; line-height: 1.35; }
.shop-best-price { font-size: 12px; color: #888; margin-top: 3px; }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.shop-card { position: relative; background: #fff; border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; box-shadow: 0 1px 8px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.15s; }
.shop-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.12); transform: translateY(-3px); }
.shop-card-img { position: relative; width: 100%; height: 230px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.shop-cart-btn { position: absolute; bottom: 0; left: 0; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid #eee; box-shadow: 0 3px 12px rgba(0,0,0,0.18); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #111; transition: transform 0.15s, background 0.15s; }
.shop-cart-btn svg { width: 22px; height: 22px; }
.shop-cart-btn .shop-cart-plus { position: absolute; top: 6px; right: 8px; font-size: 14px; font-weight: 900; line-height: 1; }
.shop-cart-btn:hover { transform: scale(1.08); background: #111; color: #fff; }
/* Floating cart */
.shop-cart-fab { position: fixed; bottom: 26px; left: 26px; width: 60px; height: 60px; border-radius: 16px; background: #111; color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 9000; transition: transform 0.15s; }
.shop-cart-fab svg { width: 26px; height: 26px; }
.shop-cart-fab.shop-cart-bump { transform: scale(1.2); }
.shop-cart-count { position: absolute; top: -4px; right: -4px; background: #e53935; color: #fff; min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; padding: 0 5px; box-sizing: border-box; }
.shop-cart-panel { position: fixed; bottom: 96px; left: 26px; width: 330px; max-height: 70vh; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); z-index: 9001; flex-direction: column; direction: rtl; overflow: hidden; }
.shop-cart-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid #eee; font-weight: 800; font-size: 16px; }
.shop-cart-close { background: none; border: none; font-size: 16px; cursor: pointer; color: #888; }
.shop-cart-items { overflow-y: auto; padding: 8px 14px; flex: 1; }
.shop-cart-empty { text-align: center; color: #999; padding: 30px 0; font-size: 14px; }
.shop-cart-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f3f3; }
.shop-cart-row img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.shop-cart-row-text { flex: 1; min-width: 0; }
.shop-cart-row-name { font-size: 13px; font-weight: 700; color: #111; line-height: 1.3; }
.shop-cart-row-price { font-size: 12px; color: #888; margin-top: 3px; }
.shop-cart-remove { background: none; border: none; color: #ccc; cursor: pointer; font-size: 14px; }
.shop-cart-remove:hover { color: #b91c1c; }
.shop-cart-footer { padding: 14px 18px; border-top: 1px solid #eee; }
.shop-cart-total { font-size: 15px; font-weight: 800; color: #111; margin-bottom: 10px; }
.shop-cart-checkout { width: 100%; background: #111; color: #fff; border: none; border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 800; cursor: pointer; }
.shop-cart-checkout:hover { background: #000; }
.shop-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shop-img-placeholder { width: 100%; height: 100%; background: #f0f0f0; border-radius: 12px; }
.shop-label { font-size: 13px; font-weight: 700; color: #e65100; margin-bottom: 8px; }
.shop-name { font-size: 19px; font-weight: 700; color: #111; margin: 0 0 14px; line-height: 1.35; }
.shop-price { font-size: 17px; color: #333; font-weight: 500; margin-top: auto; }
.shop-add-btn { display: none; width: 100%; max-width: 360px; margin: 28px auto 0; border: 2px dashed #111; background: #fff; color: #111; padding: 14px; cursor: pointer; font-size: 15px; font-weight: 700; border-radius: 12px; box-sizing: border-box; transition: background 0.15s; }
.shop-add-btn:hover { background: #f0f0f0; }
.edit-mode .shop-add-btn { display: block; }
.shop-delete-btn { display: none; position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.6); border: none; border-radius: 50%; width: 30px; height: 30px; color: #fff; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; align-items: center; justify-content: center; z-index: 2; }
.shop-delete-btn:hover { background: #b91c1c; }
.edit-mode .shop-delete-btn { display: flex; }
@media (max-width: 900px) {
  .shop-layout { flex-direction: column; }
  .shop-sidebar { width: 100%; }
}
@media (max-width: 768px) {
  .shop-inner { padding: 28px 12px 40px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-title { font-size: 26px; }
  .shop-card-img { height: 200px; }
}

.art-zoom-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
  z-index: 10;
}
.art-zoom-btn:hover {
  background: rgba(0,0,0,0.85);
}

/* deploy trigger */

/* ============================================================
   מערכת צ'אט תמיכה מול מנהל האתר (Support Chat System)
   ============================================================ */
.chat-fab {
  position: fixed;
  bottom: 26px;
  left: 26px;
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  transition: transform 0.15s, background-color 0.2s;
}
.chat-fab:hover {
  background: #000;
}
.chat-fab svg {
  width: 20px;
  height: 20px;
}
.chat-fab.chat-bump {
  transform: scale(1.2);
}
.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid #fff;
}
.chat-panel {
  position: fixed;
  bottom: 80px;
  left: 26px;
  width: 255px;
  height: 360px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  direction: rtl;
  border: 1px solid #eee;
}
.chat-header {
  background: #111;
  color: #fff;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
}
.chat-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.chat-header button:hover {
  opacity: 1;
}
.chat-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #efeae2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-user-item {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #eef0f2;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-user-item:hover {
  background: #f1f3f5;
}
.chat-user-item .user-name {
  font-weight: 700;
  font-size: 14px;
}
.chat-user-item .user-email {
  font-size: 12px;
  color: #777;
}
.chat-user-item .unread-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  align-self: flex-end;
}
.chat-message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}
.chat-message.msg-sent {
  background: #d9fdd3;
  color: #000;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.chat-message.msg-received {
  background: #ffffff;
  color: #000;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  border: 1px solid #e2e8f0;
}
.chat-msg-time {
  font-size: 10px;
  color: #8c8c8c;
  margin-top: 4px;
  line-height: 1;
}
.msg-sent .chat-msg-time {
  align-self: flex-end; /* צד שמאל - קרוב לשוליים */
}
.msg-received .chat-msg-time {
  align-self: flex-start; /* צד ימין - קרוב לשוליים */
}
.chat-footer {
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}
.chat-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.chat-input:focus {
  border-color: #111;
}
.chat-send-btn {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s;
  flex-shrink: 0;
}
.chat-send-btn:hover {
  background: #000;

}

/* כפתורי ניהול צפים מעל העגלה והצ'אט */
.fab-admin-controls {
  position: fixed;
  bottom: 77px;
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  padding: 4px 8px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 9005;
  backdrop-filter: blur(4px);
}
#chat-admin-controls {
  left: 26px;
}
.fab-control-btn {
  user-select: none;
  transition: transform 0.1s;
}
.fab-control-btn:hover {
  transform: scale(1.25);
}

/* מצב מסך מלא לצ'אט (מקסום אוטומטי בנייד ומקסום ידני בדסקטופ) */
.chat-panel.chat-maximized {
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 10000 !important;
}

/* התאמה אוטומטית למסכי מובייל קטנים */
@media (max-width: 600px) {
  .chat-panel {
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 10000 !important;
  }
}
.nav-telegram-link {
  transition: opacity 0.2s, transform 0.15s;
  color: inherit;
}
.nav-telegram-link:hover {
  opacity: 0.8;
  transform: scale(1.15);
}

.photo-main-img-container {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .photo-main-img-container {
    height: 320px;
  }
}