/* /css/style.css */
/* ============================ */
/* ✅ מקטע 1: כללי בסיס ו־BODY */
/* ============================ */


body {
  direction: rtl !important;
  font-family: "Assistant", sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f7fa;
  scroll-behavior: smooth;
  color: #1a1a1a;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ✅ הסתרה זמנית של תוכן הדף בלבד */
body > main {
  visibility: hidden;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  height: 100%;
}

main:empty {
  min-height: auto;
  display: block !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ----------------------------- */
/* ✅ HEADER + ניווט ראשי       */
/* ----------------------------- */

.site-header {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  top: 0;
  z-index: 1000;
  overflow-x: hidden;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}

/* לוגו */
.logo {
  height: 36px;
  width: auto;
}

.logo-text {
  font-size: 16px;
  font-weight: bold;
  color: #1a1a1a;
  direction: inherit;
}

/* יישור לפי שפה */
html[lang="he"] .home-link {
  direction: rtl;
}
html[lang="en"] .home-link {
  direction: ltr;
}
html[lang="he"] .logo-text {
  direction: rtl;
}
html[lang="en"] .logo-text {
  direction: ltr;
}


/* ----------------------------- */
/* ✅ תפריט ניווט עליון         */
/* ----------------------------- */

.nav-wrapper {
  flex-grow: 1;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  z-index: 1000;
}

.nav-links a {
  margin: 0 10px;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: bold;
  font-size: 15px;
  padding: 0 8px;
  white-space: nowrap;
}

.nav-links a:hover {
  color: #19339b;
}

.nav-links a.active {
  color: #19339b;
  border-bottom: 2px solid #19339b;
  padding-bottom: 4px;
}

/* גלילה אופקית באנגלית */
html[lang="en"] .nav-links {
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}

/* --------------------------------------------- */
/* ✅ פעולות ניווט: התחברות, שפה, שם משתמש      */
/* --------------------------------------------- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------- */
/* ✅ Hero Images - רקעים וכותרות עליונות לדפים פנימיים */
/* ------------------------------------------------------- */

/* התאמות לכל עמוד עם Hero שונה */

/* ------------------------------------------ */
/* ✅ מקטע 5: אזור השירותים וכרטיסיות שירות */
/* ------------------------------------------ */

.services-section {
  background: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

/* עיצוב רספונסיבי ותצוגה גמישה */
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* כרטיס שירות רגילה */
.service-card {
  background: #ffffff;
  width: 300px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  padding: 20px;
  text-align: center;
  position: relative;
}
.service-card:hover {
  transform: translateY(-10px);
}

/* כותרת ותיאור בכרטיס */
.service-card h3 {
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 10px;
  word-break: break-word;
}
.service-card p {
  font-size: 16px;
  color: #666;
}

/* תמונות בכרטיס שירות – ברירת מחדל */
.service-card img {
  width: 70%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* התאמה מיוחדת לדף smart-components */
.smart-page .service-card img {
  width: 100%;
  height: 280px !important;
}

.intro {
background: #ffffff;
padding: 60px 20px;
text-align: center;
}  

/* ✅ צמצום כרטיסים בדף דירוגים */
.top-rated-page .service-card {
  height: auto;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.top-rated-page .service-card img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.top-rated-page .service-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* מגביל את התיאור */
.top-rated-page .service-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.4;
  max-height: 4.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* שם מדורג */
.top-rated-page .rated-user-name {
  font-size: 13px;
  color: #444;
  margin-top: 4px;
}

/* דירוג – קצת רווח ויישור */
.top-rated-page .rating-stars {
  margin: 10px 0 6px 0;
  font-size: 20px;
}

/* --------------------------------------------- */
/* ✅ מקטע 6: אזור גלריה להצגת תמונות בצורה גריד */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ✅ מקטע 7: קריאה לפעולה – אזור CTA בדף הבית */
/* --------------------------------------------- */

/* ------------------------------------- */
/* ✅ מקטע 8: פוטר תחתון – Footer        */
/* ------------------------------------- */

/* גרסה רגילה */
.footer {
  background-color: #222;
  color: white;
  text-align: center;
  padding: 20px;
}

/* טופס הרשמה */
.signup-form {
  max-width: 500px;
  margin: auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.signup-form button {
  padding: 12px;
  font-size: 1rem;
  background-color: #4f6ef7;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 0;
  position: relative;
  top: -20px;
}

/* ----------------------------- */
/* ✅ מקטע 10: אנימציות והופעה הדרגתית */
/* ----------------------------- */

/* הודעה לאחר התחברות */
.login-success-msg {
  display: none;
  text-align: center;
  margin-top: 20px;
  padding: 12px;
  border-radius: 12px;
  background-color: #e0ffe0;
  color: #007700;
  font-weight: bold;
  animation: fadeIn 1s ease forwards;
}

/* מפתח האנימציה */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------------------- */
/* ✅ מקטע 11: עיצוב עמוד בלוג (Blog) */
/* ----------------------------------- */

/* -------------------------------------------- */
/* ✅ מקטע 13: עיצוב טופס התחברות מתקדם (Login Form) */
/* כולל: מסגרת, שדות, כפתור, וזכור אותי */
/* -------------------------------------------- */

.login-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 30px 20px;
  min-height: auto;
}

/* מסגרת כללית */
.login-card {
  background-color: white;
  padding: 30px;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: start;
}

/* ----------------------------------------------- */
/* ✅ מקטע 14: טפסים – מסגרת כללית, שדות וכפתור */
/* כולל: login-form-wrapper + form-fields-wrapper */
/* ----------------------------------------------- */

html[lang="en"] .form-field input {
  direction: ltr !important;
  text-align: left !important;
}

/* ------------------------------------------- */
/* ✅ מקטע 15: שדות טופס וכפתור התחברות אחיד */
/* כולל: login-card, שדות, וכפתור btn-submit   */
/* ------------------------------------------- */

html[lang="en"] input,
html[lang="en"] textarea {
  direction: ltr;
  text-align: left;
}

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

/* ======================================= */
/* ✅ מקטע 17: טפסים כללים */
/* כולל: signup-form, login-form, contact-form */
/* ======================================= */

/* תוויות */
.signup-form label,
.login-form label,
.contact-form label {
font-weight: bold;
color: #333;
display: block;
margin-bottom: 8px;
text-align: right;
}

/* טפסים - יישור מלא */
html[lang="en"] .login-form,
html[lang="en"] .contact-form,
html[lang="en"] .signup-form {
text-align: left !important;
direction: ltr !important;
}

html[lang="he"] .login-form {
text-align: right;
direction: rtl;
}

/* כפתור שליחה */
.signup-form button,
.login-form button,
.contact-form button {
width: 100% !important;
display: block;
margin: 0 auto;
direction: inherit;
padding: 12px;
font-size: 1rem;
background-color: #4f6ef7;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
position: relative;
top: -20px;
transition: background-color 0.3s ease;
}

/* ========================================= */
/* ✅ מקטע 18: עיצוב טופס התחברות (login) */
/* כולל login-form-wrapper, login-container, login-card */
/* ========================================= */

/* ✅ ווידוא שדות ותגיות באנגלית משמאל */
html[lang="en"] .form-field label {
  text-align: left !important;
}

html[lang="en"] .form-field input {
  direction: ltr !important;
  text-align: left !important;
}

/* =============================================== */
/* ✅ מקטע 19: שורת "זכור אותי" - Remember Me     */
/* כולל: remember-wrapper, remember-container     */
/* תומך RTL/LTR, Checkbox ו-Label מיושרים         */
/* =============================================== */

/* יישור כולל */
html[lang="he"] .remember-container {
  justify-content: flex-end;
  direction: rtl;
  text-align: right;
}
html[lang="en"] .remember-container {
  justify-content: flex-start;
  direction: ltr;
  text-align: left;
}

/* =============================================== */
/* ✅ מקטע 20: טפסים כלליים – הרשמה וצור קשר      */
/* כולל: signup-form, contact-form, התאמה ל־LTR/RTL */
/* =============================================== */

/* טופס כללי */
.signup-form,
.login-form,
.contact-form {
max-width: 600px;
margin: 0 auto;
padding: 30px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
}

/* שדות טופס */
.signup-form input,
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px;
margin-bottom: 20px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
}

/* פוקוס */
.signup-form input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #19339b;
  background: #ffffff;
  outline: none;
}

/* =============================================== */
/* ✅ מקטע 21: טופס התחברות – login-form          */
/* כולל: login-card, login-form-wrapper ועוד       */
/* =============================================== */

.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* כפתור התחברות */
.login-form button {
  width: 100%;
}

.login-form .btn-submit {
  background-color: #4a68ff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* תוויות */
.login-form label {
  font-weight: bold;
  margin-bottom: 6px;
}

html[lang="he"] .login-form label {
  text-align: right;
}

html[lang="he"] .login-form input {
  direction: rtl;
  text-align: right;
}

html[lang="en"] .login-form label {
  text-align: left;
}

html[lang="en"] .login-form input {
  direction: ltr;
  text-align: left;
}

html[lang="en"] .login-form button {
  float: right !important;
}

/* ============================================== */
/* ✅ מקטע 22: Hero Section – רקעים עיליים        */
/* כולל: Hero רגיל לדף הבית, וריאציות ל-inner pages */
/* ============================================== */

/* Hero רגיל לדף הבית */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
              url('../images/gallery1.jpg') center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 60px 20px;
  min-height: 350px;
}

/* תמונה וטקסט לכל הדפים עם small-hero */
.small-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
              url('../images/gallery2.jpg') center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 40px 20px;
  min-height: 240px;
  position: relative;
  z-index: 1; /* ✨ מעלה את כל ה-Hero לגובה נמוך מהתפריט */
}

/* טקסטים בתוך hero */
.hero-content h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 15px;
}

/* ============================================== */
/* ✅ מקטע 23: Services Section – כרטיסיות שירותים */
/* כולל: עיצוב שירותים בעמוד הבית ועמודי רכיבים חכמים */
/* ============================================== */

.services-section {
  background: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-card h3 {
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 10px;
  word-break: break-word;
}

.service-card p {
  font-size: 16px;
  color: #666;
}

/* ============================= */
/* ✅ מקטע 28: קריאה לפעולה CTA */
/* כולל כותרת וכפתור */
/* ============================= */
/* ============================ */
/* ✅ מקטע 29: פוטר תחתון */
/* ============================ */

/* ============================ */
/* ✅ מקטע 30: טפסים כלליים */
/* ============================ */

html[lang="he"] input,
html[lang="he"] textarea {
direction: rtl;
text-align: right;
}

html[lang="en"] input,
html[lang="en"] textarea {
direction: ltr;
text-align: left;
}

/* ============================ */
/* ✅ מקטע 31: כפתורים כלליים */
/* ============================ */

/* כפתור ראשי */
.btn-primary {
  background-color: #19339b;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  max-width: 200px;
  margin: 20px auto 0 auto;
  display: block;
  text-align: center;
}

.btn-primary:hover {
  background-color: #3653d3;
}

.btn-login:hover {
  background-color: #3653d3;
}

/* ============================ */
/* ✅ מקטע 32: יישור טפסים לפי שפה */
/* ============================ */

html[lang="en"] .form-field label {
  text-align: left !important;
}

html[lang="en"] .form-field input {
  direction: ltr !important;
  text-align: left !important;
}

/* ============================ */
/* ✅ מקטע 33: מסגרות טופס התחברות */
/* ============================ */

/* כותרת */
/* ✅ עברית */

/* ============================ */
/* ✅ מקטע 34: שדות בטופס התחברות */
/* ============================ */

/* עיצוב כפתור התחברות */
.login-card button,
.login-form button,
.contact-form button{
  width: 100%;
  background-color: #19339b;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-card button:hover,
.login-form button:hover,
.contact-form button:hover,
.signup-form button:hover {
  background-color: #3653d3;
}

/* שדות בעברית */
html[lang="he"] input,
html[lang="he"] textarea {
  direction: rtl;
  text-align: right;
}

/* שדות באנגלית */
html[lang="en"] input,
html[lang="en"] textarea {
  direction: ltr;
  text-align: left;
}

/* ============================ */
/* ✅ מקטע 35: תיבת "זכור אותי" */
/* ============================ */

/* ============================ */
/* ✅ מקטע 36: כפתורי שליחה בטפסים */
/* ============================ */

/* התאמה ל־login-form */
.login-form button {
  width: 100%;
}

/* כפתור התחברות באנגלית */
html[lang="en"] .login-form button,
html[lang="en"] .contact-form button {
  float: right !important;
}

/* ============================== */
/* ✅ מקטע 37: טופס התחברות מלא */
/* ============================== */

/* =============================================== */
/* ✅ מקטע 38: יישור שדות טופס התחברות לפי שפה */
/* =============================================== */

/* שדה בודד */
.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

html[lang="en"] .form-field label {
  text-align: left !important;
}

html[lang="en"] .form-field input {
  direction: ltr !important;
  text-align: left !important;
}

/* ================================================== */
/* ✅ מקטע 39: כפתור התחברות אחיד לכל השפות */
/* ================================================== */

/* שינוי צבע בעת ריחוף */
.btn-submit:hover {
  background-color: #3653d3;
}

/* באנגלית ובעברית – טקסט ממורכז */
html[lang="he"] .btn-submit,
html[lang="en"] .btn-submit {
  text-align: center;
  display: block;
  margin: 0 auto;
}

/* ================================================== */
/* ✅ מקטע 43: עיצוב טופס התחברות – login-container + login-card */
/* ================================================== */

/* ✅ התאמה לשפות */
html[lang="he"] .login-container {
  direction: rtl !important;
  text-align: right !important;
  justify-content: center !important;
}

html[lang="en"] .login-container {
  direction: ltr !important;
  text-align: left !important;
  justify-content: center !important;
}

/* כותרת הטופס */
.login-card h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

/* ================================================== */
/* ✅ מקטע 44: שדות טופס התחברות (Email + Password) */
/* ================================================== */

.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* ✅ תמיכה דו-לשונית */
html[lang="he"] .login-card input[type="email"],
html[lang="he"] .login-card input[type="password"] {
direction: rtl;
text-align: right;
}

html[lang="en"] .login-card input[type="email"],
html[lang="en"] .login-card input[type="password"] {
direction: ltr;
text-align: left;
}

/* ================================================== */
/* ✅ מקטע 45: כפתור התחברות בטופס */
/* ================================================== */
/* כפתור התחברות */
.login-card button {
  width: 100%;
  background-color: #19339b;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-card button:hover {
  background-color: #3653d3;
}

/* ✅ תיאום דו-לשוני */
html[lang="he"] .login-card button {
  direction: rtl;
  text-align: center;
}

html[lang="en"] .login-card button {
  direction: ltr;
  text-align: center;
}

/* ================================================== */
/* ✅ מקטע 46: שורת "זכור אותי" */
/* ================================================== */

/* ברירת מחדל: מוסתרת */
.remember-line {
  display: none;
  font-size: 14px;
  margin: 10px 0 20px;
}

/* מופיע רק באנגלית */
html[lang="en"] .remember-line {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  text-align: left;
  direction: ltr;
}

/* מופיע רק בעברית */
html[lang="he"] .remember-line {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  text-align: right;
  direction: rtl;
}

/* עיצוב בסיסי לשורת checkbox */
.remember-line input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0;
  accent-color: #19339b;
  cursor: pointer;
}

/* ================================================== */
/* ✅ מקטע 47: עיצוב טופס ההתחברות */
/* ================================================== */

/* עטיפת טופס התחברות */
.login-form-wrapper {
  width: 420px;
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  margin: auto;
  direction: inherit;
  text-align: start;
}

/* כותרת הטופס */
.login-form-wrapper h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* עיצוב אחיד לדף */
.login-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  min-height: auto;
}

/* באנגלית */
html[lang="en"] .login-form-wrapper {
  direction: ltr !important;
  text-align: left !important;
  align-items: flex-start !important;
}

html[lang="en"] .form-field label {
  text-align: left !important;
}

html[lang="en"] .form-field input {
  direction: ltr !important;
  text-align: left !important;
}

/* בעברית */
html[lang="he"] .login-form-wrapper {
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}

html[lang="he"] .form-field label {
  text-align: right !important;
}

html[lang="he"] .form-field input {
  direction: rtl !important;
  text-align: right !important;
}

/* ================================================== */
/* ✅ מקטע 48: עיצוב שדות הטופס וכפתור התחברות */
/* ================================================== */

/* שדות אימייל וסיסמה */
.login-form-wrapper input[type="email"],
.login-form-wrapper input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 16px;
}

/* עיצוב בסיסי */
.btn-submit {
  background-color: #19339b;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: 0.3s ease;
  transition: background-color 0.3s ease;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.login-form .btn-submit:hover {
  background-color: #2d4fe3;
}

/* הסתרת כפתור לא רלוונטי */
.login-form button.extra-button {
display: none;
}

.login-form button {
width: 100%;
}

/* ================================================== */
/* ✅ מקטע 49: Checkbox – זכור אותי, RTL/LTR מותאם */
/* ================================================== */

/* עטיפת תיבת הסימון */
.remember-container {
  position: relative;
  height: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
}

/* תיבת הסימון */
.remember-container input[type="checkbox"] {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  accent-color: #19339b;
  margin: 0;
}

/* תווית הטקסט שליד */
.remember-container label {
  position: absolute;
  top: 0;
  line-height: 20px;
}

/* עברית – טקסט מימין, תיבה בצד ימין */
html[lang="he"] .remember-container label {
  right: 0;
  text-align: right;
}

html[lang="he"] .remember-container input[type="checkbox"] {
  right: 65px;
}

/* אנגלית – טקסט משמאל, תיבה משמאלה */
html[lang="en"] .remember-container label {
  left: 0;
  text-align: left;
}

html[lang="en"] .remember-container input[type="checkbox"] {
  left: 100px;
}

/* עטיפת checkbox – תיאום עם שפה */
body[dir="rtl"] .remember-container {
  justify-content: flex-end;
}

/* תצוגה בסיסית */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* RTL */
html[lang="he"] .checkbox-wrapper {
  justify-content: flex-end;
  direction: rtl;
}

/* LTR */
html[lang="en"] .checkbox-wrapper {
  justify-content: flex-start;
  direction: ltr;
}

/* גרסה סופית לשורה */
.remember-wrapper {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 15px;
  gap: 8px;
  align-self: flex-start;
}

.login-form .form-fields-wrapper {
    gap: 8px; /* צמצום הרווח הכללי בין האלמנטים */
}

.login-form-wrapper .form-field {
    margin-bottom: 4px; /* הקטנת המרווח מתחת לשדות הטקסט */
}

.signup-prompt {
    text-align: center;
    margin-top: 7px; /* רווח ברור מהכפתור שמעל */
    font-size: 15px;
    color: #555;
}

.signup-prompt a {
    color: #0066cc; /* צבע כחול בולט לקישור */
    text-decoration: underline;
    font-weight: bold;
    margin-inline-start: 5px; /* רווח קטן בין הטקסט לקישור */
}

.signup-prompt a:hover {
    color: #004c99;
}

body.dark-mode .signup-prompt {
    color: #bbb;
}

body.dark-mode .signup-prompt a {
    color: #8ab4f8;
}

body.dark-mode .signup-prompt a:hover {
    color: #a7c7fa;
}

/* יישור עברית */
html[lang="he"] .remember-wrapper {
  direction: rtl;
  justify-content: flex-end !important; 
  text-align: right;
}

/* יישור אנגלית */
html[lang="en"] .remember-wrapper {
  direction: ltr;
  justify-content: flex-start !important; 
  text-align: left;
}

.remember-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #19339b;
  cursor: pointer;
}

.remember-wrapper label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* ================================================== */
/* ✅ מקטע 50: Signup Form – טופס הרשמה מעוצב       */
/* ================================================== */

/* תיבת טופס הרשמה */
.signup-form {
  max-width: 500px;
  margin: auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* שדות הטופס */
.signup-form input,
.signup-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* כפתור שליחה */
.signup-form button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  background-color: #4f6ef7;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 0;
  position: relative;
  top: -20px;
  transition: background-color 0.3s ease;
  font-weight: bold;
}    

/* עטיפת כל שדות הטופס */
.form-fields-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}

/* ============================== */
/* 📣 מקטע 52: קריאה לפעולה (CTA) */
/* ============================== */

.cta {
  background-color: #19339b;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.cta h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.cta a {
  background-color: white;
  color: #19339b;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.cta a:hover {
  background-color: #e6e6e6;
}

/* ================================ */
/* 🔐 מקטע 57: כפתור התחברות בבלוג */
/* ================================ */

.btn-login {
  background-color: #19339b;
  color: white;
  padding: 8px 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}

.btn-login:hover {
  background-color: #3653d3;
}

/* ============================== */
/* 🌐🇮🇱🇬🇧 מקטע 59: כפתור החלפת שפה */
/* ============================== */

.lang-switch {
  background: transparent;
  border: 2px solid #19339b;
  color: #19339b;
  padding: 6px 12px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-right: 10px;
}

.lang-switch:hover {
  background: #19339b;
  color: white;
}

/* ============================================== */
/* 🎛️ מקטע 60: אזור פעולות ניווט (nav-actions) */
/* ============================================== */

.nav-actions .login-button,
.nav-actions .signup-button,
.nav-actions .logout-button,
.nav-actions .lang-switch {
  background-color: transparent;
  border: 2px solid #19339b;
  border-radius: 8px;
  padding: 6px 14px;
  color: #495eb1;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}

.nav-actions .login-button:hover,
.nav-actions .signup-button:hover,
.nav-actions .logout-button:hover,
.nav-actions .lang-switch:hover {
  background-color: #19339b;
  color: white;
}

/* ======================================== */
/* 🖼️ מקטע 62: גלריית תמונות - gallery home */
/* ======================================== */

.gallery-section {
  background: #f0f2f5;
  padding: 60px 20px;
  text-align: center;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* ========================================== */
/* 📰 מקטע 63: בלוג – כרטיסי תוכן ומבנה עמוד */
/* ========================================== */

.blog-page .service-card h3,
.blog-page .service-card p {
color: #1a1a1a;
opacity: 1;
transform: none;
}

.blog-container {
max-width: 850px;
margin: 0 auto;
padding: 0 20px;
}

/* =================================================== */
/* 🔧 מקטע 64: בלוג שדרוג – תמונת Hero ועיצוב תוכן    */
/* =================================================== */

html[dir="rtl"] .upgrade-list {
direction: rtl;
text-align: center;
}

html[dir="ltr"] .upgrade-list {
direction: ltr;
text-align: center;
}

/* =================================================== */
/* 🛡️ מקטע 65: בלוג אבטחה – Hero ועיצוב מאמר         */
/* =================================================== */

/* תצוגה ממורכזת אלטרנטיבית */
html[dir="rtl"] .blog-page-security main .services-section article,
html[dir="ltr"] .blog-page-security main .services-section article {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}


/* =================================================== */
/* ⚡ דפים – Hero ועיצוב תוכן        */
/* =================================================== */
/* התאמות לפי דף */
.about-page .small-hero .hero-content,
.blog-page-security .small-hero .hero-content,
.blog-page-upgrade .small-hero .hero-content,
.contact-page .small-hero .hero-content,
.generate-product-page .small-hero .hero-content,
.login-page .small-hero .hero-content,
.reset-password-page .small-hero .hero-content,
.thankyou-order-page .small-hero .hero-content,
.top-rated-page .small-hero .hero-content,
.my-orders-page .small-hero .hero-content,
.user-management-page .small-hero .hero-content {
  margin-top: 100px;
}

.admin-dashboard-page .small-hero .hero-content {
  margin-top: 280px;
}

.accessibility-page .small-hero .hero-content {
  margin-top: 130px;
}

.blog-energy-page .small-hero .hero-content {
  margin-top: -40px;
}

.blog-page .small-hero .hero-content {
  margin-top: -25px;
}

.cart-page .small-hero .hero-content {
  margin-top: 240px;
}

.checkout-page .small-hero .hero-content {
  margin-top: 60px;
}

.dashboard-page .small-hero .hero-content {
  margin-top: 42px;
}

.installations-page .small-hero .hero-content {
  margin-top: 200px;
}

.products-page .small-hero .hero-content {
   margin-top: 80px;
} 

.signup-page .small-hero .hero-content {
  margin-top: 200px;
}

.smart-page .small-hero .hero-content {
  margin-top: 0px;
}

.store-page .small-hero .hero-content {
  margin-top: 80px;
}
.thank-you-page .small-hero .hero-content {
  margin-top: 130px;
}

.about-page .small-hero {
  background: url('../images/about-hero.jpg') center/cover no-repeat;
}

.accessibility-page .small-hero {
  background: url('../images/accessibility.jpg') center/cover no-repeat;
}

.admin-dashboard-page .small-hero {
  background: url('../images/admin-dashboard.jpg') center/cover no-repeat;
}  

.blog-energy-page .small-hero {
  background: url('../images/blog-energy.jpg') center/cover no-repeat;
}

.blog-page-security .small-hero {
  background: url('../images/blog-security.jpg') center/cover no-repeat;
}

.blog-page-upgrade .small-hero {
  background: url('../images/blog-10ways.jpg') center/cover no-repeat;
}

.blog-page .small-hero {
  background: url('../images/blog-main.jpg') center/cover no-repeat;
}

.cart-page .small-hero {
  background: url('../images/cart.jpg') center/cover no-repeat;
}

.checkout-page .small-hero {
  background: url('../images/checkout.jpg') center/cover no-repeat;
}

.contact-page .small-hero {
  background: url('../images/contact.jpg') center/cover no-repeat;
}

.dashboard-page .small-hero {
  background: url('../images/dashboard.jpg') center/cover no-repeat;
}

.generate-product-page .small-hero {
  background: url('../images/generate-product.jpg') center/cover no-repeat;
}

.installations-page .small-hero {
  background: url('../images/installations.jpg') center/cover no-repeat;
}

.login-page .small-hero {
  background: url('../images/login.jpg') center/cover no-repeat;
}

.my-orders-page .small-hero {
  background: url('../images/my-orders.jpg') center/cover no-repeat;
}

.products-page .small-hero {
  background: url('../images/products.jpg') center/cover no-repeat;
}

.reset-password-page .small-hero {
  background: url('../images/reset-password.jpg') center/cover no-repeat;
}

.signup-page .small-hero {
  background: url('../images/signup.jpg') center/cover no-repeat;
}

.smart-page .small-hero {
  background: url('../images/smart_devices-hero.jpg') center/cover no-repeat;
}

.store-page .small-hero {
  background: url('../images/store.jpg') center/cover no-repeat;
}

.thank-you-page .small-hero {
  background: url('../images/thank-you.jpg') center/cover no-repeat;
}

.thankyou-order-page .small-hero {
  background: url('../images/thankyou-order.jpg') center/cover no-repeat;
}

.top-rated-page .small-hero {
  background: url('../images/top-rated.jpg') center/cover no-repeat;
}

.user-management-page .small-hero {
  background: url('../images/user-management.jpg') center/cover no-repeat;
} 

.about-page .small-hero,
.accessibility-page .small-hero,
.admin-dashboard-page .small-hero,
.blog-energy-page .small-hero,
.blog-page-security .small-hero,
.blog-page-upgrade .small-hero,
.blog-page .small-hero,
.cart-page .small-hero,
.checkout-page .small-hero,
.contact-page .small-hero,
.dashboard-page .small-hero,
.generate-product-page .small-hero,
.installations-page .small-hero,
.products-page .small-hero,
.reset-password-page .small-hero,
.signup-page .small-hero,
.smart-page .small-hero,
.store-page .small-hero,
.thank-you-page .small-hero,
.thankyou-order-page .small-hero,
.top-rated-page .small-hero,
.my-orders-page .small-hero,
.user-management-page .small-hero {
  color: #ffffff;
  text-align: center;
  padding: 40px 20px;
  min-height: 260px;
}

/* הגדרת רקע ל-hero */
body.generate-product-page .small-hero {
  background-image: url("/images/generate-product.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* =================================================== */
/* 🧾 מקטע 74: כרטיסי דשבורד – Dashboard Cards         */
/* =================================================== */

.dashboard-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.dashboard-card:hover {
  background-color: #19339b;
  color: white;
  transform: translateY(-8px);
}

/* =================================================== */
/* 🔘 מקטע 75: כפתור פעולה ראשי לדשבורד – Dashboard Button */
/* =================================================== */

.dashboard-btn {
  background-color: #19339b;
  color: white;
  padding: 14px 30px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dashboard-btn:hover {
  background-color: #3653d3;
}

/* ========================================== */
/* 🦶 מקטע 76: פוטר תחתון – Footer */
/* ========================================== */

.footer,
.site-footer {
background-color: #222;
color: white;
text-align: center;
padding: 20px;
}

/* ========================================== */
/* 🎞 מקטע 77: הנפשות בסיסיות – אנימציית Fade-in */
/* ========================================== */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================== */
/* 📜 מקטע 78: רשימות מסודרות – תמיכה באנגלית */
/* ========================================== */

html[lang="en"] ul {
  direction: ltr;
  text-align: left;
}

/* ============================================= */
/* 📄 מקטע 79: סידור תוכן מאמרים בדפי בלוג       */
/* ============================================= */

/* בלוג שדרוג */
.blog-page-upgrade .services-section .container {
  text-align: center;
  max-width: 800px;
  margin: auto;
}

/* ============================================= */
/* 🧭 מקטע 80: עיצוב גלילה אופקית באנגלית        */
/* ============================================= */

html[lang="en"] .nav-wrapper {
  overflow-x: auto;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

html[lang="en"] .nav-wrapper::-webkit-scrollbar {
  display: none;
}

html[lang="en"] .nav-links a,
html[lang="en"] .login-button,
html[lang="en"] .signup-button,
html[lang="en"] .lang-switch,
html[lang="en"] .logout-button { 
  font-size: 14px;
  padding: 4px 8px;
}

/* ============================================== */
/* 📱 מקטע 82: כפתורי signup / login רספונסיביים */
/* ============================================== */

.signup-form button {
width: 100%;
padding: 12px;
font-size: 1rem;
background-color: #4f6ef7;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 0; /* בטל ריווח תחתון אם קיים */
position: relative;
top: -20px; /* זה מה שירים אותו קצת */
}

/* ============================================== */
/* 🏠 מקטע 83: הגדרות כפתור בית (home-link) בלוגו */
/* ============================================== */

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  color: #1a1a1a;
  white-space: nowrap;
  margin-left: 10px;
}

/* ============================================== */
/* 🧭 מקטע 84: התאמות אחרונות לתפריט עליון ואייקונים */
/* ============================================== */

html[lang="en"] .site-header .container {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-left: 20px;
  padding-right: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

html[lang="en"] .nav-wrapper {
  overflow-x: auto;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

html[lang="en"] .nav-wrapper::-webkit-scrollbar,
html[lang="en"] .nav-links::-webkit-scrollbar {
  display: none;
}

/* ============================================== */
/* 🧭 מקטע 85: יישור והתאמות RTL/LTR לאזורים רגישים */
/* ============================================== */

/* יישור שם המשתמש באנגלית */
html[lang="en"] .user-name {
  max-width: 120px;
  font-size: 14px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* תפריט הגדרות פעולה באנגלית */
html[lang="en"] .nav-actions {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================= */
/* ✅ מקטע 86: עיצוב טפסים בסיסי + תוויות קלט     */
/* ============================================= */

.signup-form input,
.login-form input,
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px;
margin-bottom: 20px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
}

/* טקסט תגית בעברית */
html[lang="he"] .form-fields-wrapper,
html[lang="he"] .signup-form label,
html[lang="he"] .login-form label,
html[lang="he"] .contact-form label {
  text-align: right;
  direction: rtl;
  align-items: flex-end;
}

/* טקסט תגית באנגלית */
html[lang="en"] .form-fields-wrapper,
html[lang="en"] .signup-form label,
html[lang="en"] .login-form label,
html[lang="en"] .contact-form label {
  text-align: left;
  direction: ltr;
  align-items: flex-start;
}

/* הגדרות RTL */
html[lang="he"] .form-fields-wrapper {
  text-align: right;
  direction: rtl;
  align-items: flex-end;
}

/* הגדרות LTR */
html[lang="en"] .form-fields-wrapper {
  text-align: left;
  direction: ltr;
  align-items: flex-start;
}

/* ========================================= */
/* ✅ מקטע 87: כפתורי שליחה - Signup / Login */
/* ========================================= */

.signup-form button,
html[lang="en"] .signup-form button,
html[lang="he"] .signup-form button {
  width: 100% !important;
  display: block;
  margin: 0 auto;
  direction: inherit;
}

.signup-form button {
width: 100%;
padding: 12px;
font-size: 1rem;
background-color: #4f6ef7;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 20;
position: relative;
top: 20px;
}

/* סימון עיצוב רק לטקסט בדף הפעיל */
.logo-text.active-page {
position: relative;
color: #4b6ef5; /* כחול נעים לציון דף פעיל */
font-weight: bold;
}

.logo-text.active-page::after {
content: "";
position: absolute;
bottom: -2px; /* הקו מתחת לטקסט בלי להגדיל את הגובה */
right: 0;
left: 0;
height: 2px;
background-color: #4b6ef5;
border-radius: 2px;
}

html[lang="he"] .nav-links a,
html[lang="he"] .login-button,
html[lang="he"] .signup-button,
html[lang="he"] .lang-switch,
html[lang="he"] .logout-button { 
font-size: 14px;
padding: 4px 8px;
}

html[lang="en"] .nav-links a,
html[lang="en"] .login-button,
html[lang="en"] .signup-button,
html[lang="en"] .lang-switch,
html[lang="en"] .logout-button {
  font-size: 14px;
  padding: 4px 8px;
  white-space: nowrap;
}

html[lang="he"] .signup-button {
background-color: transparent;
border: 2px solid #19339b;
border-radius: 8px;
color: #19339b;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
white-space: nowrap;
cursor: pointer;
}

html[lang="en"] .signup-button {
background-color: transparent;
border: 2px solid #19339b;
border-radius: 8px;
color: #19339b;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
white-space: nowrap;
cursor: pointer;
}

/* כפתור עוזר וירטואלי */
.assistant-button {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #19339b;
color: white;
border-radius: 50%;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* תיבת צ'אט */
.assistant-chat-box {
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 400px;
  max-height: 500px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 999;
  font-family: "Assistant", sans-serif;
}

.assistant-chat-box.hidden {
display: none;
}

.assistant-button svg {
  transition: transform 0.3s ease-in-out;
}  

.assistant-button:hover svg {
  transform: rotate(90deg);
}

.assistant-chat-box .assistant-header,
.assistant-chat-box .assistant-messages {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
}

.assistant-header {
background-color: #19339b;
color: white;
padding: 15px;
font-weight: bold;
text-align: center;
}

.assistant-messages {
flex: 1;
padding: 15px;
overflow-y: auto;
font-size: 20px;
}

.assistant-chat-box textarea {
  resize: none;
  padding: 8px;
  border: none;
  border-top: 1px solid #eee;
  height: 50px;
  font-family: "Assistant", sans-serif;
  font-size: 15px;
}

.assistant-chat-box button {
background-color: #19339b;
color: white;
border: none;
padding: 14px;
font-weight: bold;
cursor: pointer;
font-family: "Assistant", sans-serif;
}

/* יישור שם המשתמש */
.user-name {
  max-width: 120px; /* תוכל לכוונן לפי הצורך */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  text-align: right; /* אם תומך בעברית */
  direction: rtl; /* או ltr אם באנגלית */
  position: relative;
  cursor: pointer;
  pointer-events: auto; 
  margin: 0 10px;
  font-weight: bold;
  color: #1a1a1a;
  font-size: 14px;
  flex-shrink: 1;
}

.user-name::after {
content: attr(data-fullname);
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
background-color: #19339b;
color: white;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
}

.user-name:hover::after {
opacity: 1;
}

/* === תפריט המבורגר - סגנון בסיסי === */
.hamburger {
display: none;
font-size: 24px;
background: none;
border: none;
color: #1a1a1a;
cursor: pointer;
z-index: 1001;
}

/* תפריט ניווט מובייל */
.mobile-menu {
display: none;
flex-direction: column;
background-color: white;
padding: 20px;
padding-bottom: 60px; /* ✅ פתרון לחיתוך הכפתור האחרון */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
}

.mobile-menu a {
padding: 10px 0;
border-bottom: 1px solid #eee;
text-align: center;
font-weight: bold;
color: #1a1a1a;
text-decoration: none;
}

.mobile-menu a:last-child {
border-bottom: none;
}

.mobile-menu.open {
display: flex;
}

.mobile-menu-actions {
margin-top: 20px;
text-align: center;
}

.mobile-menu-actions .user-name {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}

.mobile-header .hamburger {
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}

.mobile-header .home-link {
display: flex;
align-items: center;
text-decoration: none;
}

.mobile-header .logo {
height: 36px;
margin-left: 8px;
}

.mobile-header .logo-text {
font-weight: bold;
font-size: 18px;
color: #000;
}

.favorite-btn {
font-size: 24px;
line-height: 1;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: none;
cursor: pointer;
transition: transform 0.2s ease;
}

/* מועדפים */
.favorite-btn.favorited {
color: red;
}

.favorite-btn:hover {
transform: scale(1.2);
}

.favorites-section {
padding: 40px 20px;
text-align: center;
}
.favorites-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.favorite-card {
background-color: #ffffff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
text-align: right;
}
.favorite-card h3 {
margin-top: 0;
}
.remove-fav-btn {
background-color: #ff4d4d;
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
}

.remove-fav-btn:hover {
background-color: #ff4d4d;
}

.user-button {
  display: inline-block;
  padding: 6px 12px;
  background-color: #67859f;
  color: white;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
}

.user-button:hover {
background-color: #3954c3;
}

.lang-button,
.dark-mode-button {
background: none;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
font-size: 14px;
}

.lang-button img,
.dark-mode-button img {
vertical-align: middle;
border-radius: 2px;
box-shadow: 0 0 1px rgba(0,0,0,0.3);
}

.mobile-dark-button {
  display: none
}

.mobile-lang-button {
  display: none
}

/* כפתור שפה במובייל */
.mobile-menu .lang-button,
.mobile-menu .mobile-dark-button
.mobile-menu .mobile-lang-button {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
font: inherit;
cursor: pointer;
padding: 10px 12px;
color: #1a1a1a;
}

.mobile-menu .lang-button img,
.mobile-menu .mobile-dark-button img
.mobile-menu .mobile-lang-button img {
width: 20px;
height: 14px;
}

.mobile-menu .lang-button span,
.mobile-menu .mobile-dark-button span
.mobile-menu .mobile-lang-button span {
font-size: 14px;
}

.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #323232;
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 16px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hidden {
  display: none;
}

.undo-button {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.undo-button:hover {
  background: #555;
}

.dropbtn {
  background: none;
  border: none;
  font: inherit;
  font-size: inherit;
  color: inherit;
  padding: 10px 15px;
  cursor: pointer;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 999;
  border-radius: 8px;
  padding: 10px 0;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  color: #1a1a1a;
  display: block;
  font-weight: bold;
}

.dropdown-container.open .dropdown-content {
  display: block;
}

/* === כפתור "עוד" - גרסת דסקטופ === */
.nav-links .dropdown {
  position: relative;
  z-index: 1000;
}

.nav-links .dropbtn {
  padding: 10px 15px;
  font-family: inherit;
  font-size: 16px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links .dropdown-content {
  position: fixed;
  top: auto; /* גובה סרגל עליון */
  right: auto; /* מרחק מהקצה, תוכל להתאים */
  z-index: 9999;
  background-color: white;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 8px;
}

.nav-links .dropdown-content a {
  color: #1a1a1a;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-weight: bold;
}

.rating-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 24px;
  cursor: pointer;
  margin-top: 10px;
  direction: ltr;
}

.rating-stars i {
  color: #ccc;
  transition: color 0.3s ease;
}

.rating-stars .star.selected,
.rating-stars .star.hovered {
  color: gold;
}

.star.selected {
  color: gold;
}

/* עיצוב כוכבים */
.star {
  font-size: 22px;
  color: #706d6d;
  cursor: pointer;
  transition: color 0.3s ease;
}

body.dark-mode .star {
  font-size: 22px;
  color: #474646;
  cursor: pointer;
  transition: color 0.3s ease;
}

.star.filled {
  color: #823170;
}

body.dark-mode .star.filled {
  color: #f8d004; /* זהב */
}

/* 🎨 כוכבים בדף דירוגים מוצגים בלבד (top-rated) */
.top-rated-page .star {
  cursor: default;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: opacity 0.3s ease;
}

.top-rated-page .star.filled {
  opacity: 1;
  filter: none;
}

.top-rated-page .star:hover {
  opacity: 0.7;
}

.no-permission-msg {
  color: red;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  margin: 30px 0;
}

/* ✅ עיצוב מתקדם לטבלת ניהול משתמשים */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 15px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-table th,
.dashboard-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.dashboard-table th {
  background-color: #ffffff;
  font-weight: bold;
  color: #333;
}

.dashboard-table tr:hover {
  background-color: #f0f8ff;
}

/* טול־טיפ על dropdown */
.role-dropdown {
  cursor: pointer;
}

.role-dropdown[title] {
  position: relative;
}

.role-dropdown[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -30px;
  right: 0;
  background: #19339b;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* ==== טבלת משתמשים מעוצבת ==== */
.styled-users-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 30px;
  font-size: 15px;
}
.styled-users-table th, .styled-users-table td {
  padding: 16px 12px;
  text-align: center;
}
.styled-users-table th {
  background: #e8f0fe;
  color: #3154a3;
  font-weight: bold;
  border-bottom: 2px solid #c8dafc;
}
.styled-users-table tr:nth-child(even) {
  background: #f8fbff;
}
.styled-users-table tr:hover {
  background: #e6edfa;
  transition: background 0.2s;
}
.styled-users-table select.role-dropdown {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid #b3cdf6;
  background: #f3f8ff;
  font-weight: bold;
  font-size: 14px;
  transition: border 0.2s;
  cursor: pointer;
}

.styled-users-table select.role-dropdown:focus {
  border-color: #3154a3;
}
.role-updated-msg {
  font-size: 13px;
  color: #009e2a !important;
  font-weight: bold;
}

.status-updated-msg {
  font-size: 13px;
  color: #009e2a !important;
  font-weight: bold;
}

.no-data-msg {
  margin: 35px 0 0 0;
  font-size: 17px;
  color: #888;
}

/* 🔎 עיצוב שדה חיפוש טבלה/כרטיסיות */
.table-search-wrapper {
  text-align: center;
  margin-bottom: 22px;
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  max-width: 500px;
  margin: 0 auto 20px;
}

.table-search-input {
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  transition: border 0.2s;
  margin-right: 0;
  background: #f3f8ff;
  direction: ltr;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.table-search-input:focus {
  border-color: #19339b;
  background: #fff;
  outline: none;
}

.restricted-page {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/images/hero-restricted.jpg') no-repeat center center;
  background-size: cover;
  padding: 100px 20px;
  text-align: center;
  color: white;
  border-radius: 12px;
  margin-bottom: 40px;
}

.restricted-page .hero-content h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

.restricted-page .hero-content p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.back-home-button {
  display: inline-block;
  padding: 10px 24px;
  background: #ffffff;
  color: #000;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.back-home-button:hover {
  background: #e0e0e0;
}

.pagination-container {
  text-align: center;
  margin-top: 30px;
}

.pagination-btn {
  background: #19339b;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.pagination-btn:disabled {
  background: #ccc;
  cursor: default;
}

.pagination-status {
  font-weight: bold;
  margin: 0 10px;
  display: inline-block;
  font-size: 14px;
}

.search-helper {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 15px;
}

.delete-user-btn {
  background-color: #de1c1ceb;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 6px;
  transition: background-color 0.3s ease;
}

.delete-user-btn:hover {
  background-color: #d93636;
}

.editable-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.save-user-btn {
  background-color: #09700d;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 6px;
}

.save-user-btn:hover {
  background-color: #388e3c;
}

.status-dropdown {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid #b3cdf6;
  background: #f3f8ff;
  font-weight: bold;
  font-size: 14px;
  transition: border 0.2s;
  cursor: pointer;
}

.status-dropdown:focus {
  border-color: #3154a3;
}

.user-text-cell {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  color: #333;
}

.readonly-field {
  height: 38px;
  font-size: 14px;
  font-weight: bold;
  color: #1a1a1a;
  display: flex;
  align-items: center;   /* ממרכז אנכית */
  justify-content: center; /* ממרכז אופקית */
  padding: 0 10px;
  background: none;
  border: none;
  border-radius: 0;
  text-align: center;
  cursor: default;
  width: 100%;
}

.user-archive-flag {
  display: inline-block;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  margin-bottom: 6px;
  text-align: center;
  white-space: nowrap;
}

.user-archive-flag.deleted-status {
  background-color: #ffdada;
  color: #b30000;
  border: 1px solid #ff4d4d;
}

.user-archive-flag.restored-status {
  background-color: #e7f7ec;
  color: #007a3d;
  border: 1px solid #42c77a;
}

.deleted-status {
  background-color: #f8d7da;
  color: #a71d2a;
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 5px;
  display: inline-block;
}

/* ✅ שורת משתמש שנמחק (מחיקה רכה) */
tr.user-row-deleted {
  background-color: #f9f9f9;
  opacity: 0.65;
  font-style: italic;
}

tr.user-row-deleted td {
  border-bottom: 1px solid #eee;
}

tr.user-row-deleted:hover {
  background-color: #f1f1f1;
}

.user-row-deleted[title] {
  position: relative;
}

.user-row-deleted[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -28px;
  right: 50%;
  transform: translateX(50%);
  background: #19339b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.restore-user-btn[title] {
  position: relative;
}

.restore-user-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -28px;
  right: 50%;
  transform: translateX(50%);
  background: #19339b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.save-user-btn[title],
.delete-user-btn[title],
.restore-user-btn[title] {
  position: relative;
}

.save-user-btn[title]:hover::after,
.delete-user-btn[title]:hover::after,
.restore-user-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -28px;
  right: 50%;
  transform: translateX(50%);
  background: #19339b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* ✅ עיצוב לשורות של משתמשים בארכיון */
.user-row-deleted {
  background-color: #fff4f4; /* רקע ורוד-בהיר */
  color: #a94442; /* טקסט אדמדם */
  opacity: 0.9;
}

.user-row-deleted td {
  text-decoration: line-through;
}

/* ✅ עיצוב שדות שם, טלפון בטבלת המשתמשים */
td[data-label="שם"] input,
td[data-label="Name"] input,
td[data-label="טלפון"] input,
td[data-label="Phone"] input {
  direction: ltr;
  direction: rtl;
  text-align: center;
}

/* ✅ יישור שדות אימייל, סטטוס ותפקיד לאמצע */
td[data-label="אימייל"] input,
td[data-label="Email"] input,
td[data-label="סטטוס"] select,
td[data-label="Status"] select,
td[data-label="תפקיד"] select,
td[data-label="Role"] select {
  text-align: center;
}

/* ✅ הדגשת שורת משתמש שעודכנה */
.row-updated-highlight {
  background-color: #e6f3ff !important;
  transition: background-color 0.3s ease;
}

/* ✅ שדה סיסמה – תמיד LTR ושמאל */
input#newPassword {
  direction: ltr !important;
  text-align: left !important;
}

/* ✅ שדה סיסמה – תמיד LTR ושמאל */
#newPassword {
  direction: ltr !important;
  text-align: left !important;
}

/* ✅ founder */
.founder-section {
  background: #f9f9ff;
  padding: 60px 20px;
  text-align: center;
}

.founder-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

.founder-section p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 15px;
  color: #555;
  line-height: 1.6;
}

/* ✅ Home Hero */
.hero.home-hero .hero-content {
  padding-top: 60px;
  max-width: 850px;
  margin: 0 auto;
}

.hero.home-hero .hero-content h1 {
  font-size: 36px;
  margin-bottom: 16px;
  color: white;
}

.hero.home-hero .hero-content p {
  font-size: 20px;
  color: #e0e0e0;
  margin-bottom: 24px;
}

.hero.home-hero .btn-primary {
  font-size: 18px;
  padding: 12px 24px;
}

.hero-brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 6px 20px;
  background-color: rgba(0, 0, 0, 0.35);
  color: white;
  font-weight: bold;
  font-size: 36px;
  backdrop-filter: blur(4px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 2;
  flex-direction: row; /* ברירת מחדל */
  /* animation: slideBrand 6s ease-in-out infinite; */
  animation: pulseBrand 4s ease-in-out infinite;
  transform-origin: center;
}

html[lang="he"] .brand-wrapper {
  flex-direction: row-reverse; /* משנה את הכיוון בעברית */
}

html[lang="en"] .brand-wrapper {
  flex-direction: row-reverse; /* משנה את הכיוון באנגלית */
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.hero-brand-icon {  
  height: 88px;         /* מגדיל את גובה האייקון */
  width: auto;          /* שמירה על פרופורציה */
  object-fit: contain;
  vertical-align: middle;
  margin: 0;
  filter: drop-shadow(0 0 1px #000); /* שומר נראות */
}

.hero-brand-bar .brand-text {
  white-space: nowrap;
  line-height: 1;
  font-size: 40px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

@keyframes slideBrand {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

@keyframes pulseBrand {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ברירת מחדל – הסתרה בדסקטופ */
.mobile-branding-text {
  display: none;
}

.mobile-dark-button {
  display: none;
}

.cart-mobile-button {
  display: none;
}

body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}
body.dark-mode .site-header,
body.dark-mode .footer,
body.dark-mode .signup-form,
body.dark-mode .login-card,
body.dark-mode .service-card,
body.dark-mode .contact-form,
body.dark-mode .assistant-chat-box {
  background-color: #1e1e1e;
  color: #f0f0f0;
}
body.dark-mode .nav-links a,
body.dark-mode .dropbtn,
body.dark-mode .dropdown-content a,
body.dark-mode .btn-primary,
body.dark-mode .login-button,
body.dark-mode .signup-button,
body.dark-mode .lang-button,
body.dark-mode .mobile-lang-button,
body.dark-mode .dark-mode-button {
  background-color: transparent;
  color: #f0f0f0;
}
body.dark-mode .dropdown-content,
body.dark-mode .mobile-menu,
body.dark-mode .assistant-chat-box,
body.dark-mode .form-fields-wrapper input,
body.dark-mode .form-fields-wrapper textarea {
  background-color: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}
body.dark-mode .form-fields-wrapper input::placeholder,
body.dark-mode .form-fields-wrapper textarea::placeholder {
  color: #aaa;
}

/* החבא/הצג שם-משתמש */
.hidden{display:none!important}

/* Sign-Up שלא יחתך */
nav .signup-button{white-space:nowrap}

/* מוודא שה-header מעל ה-hero */
.site-header{position:sticky;top:0;z-index:2000}
.mobile-menu.open{z-index:2100}

/* דיפולט – הסתרת תפריט עליון */
.home-wrapper-desktop,
.home-wrapper-mobile {
  display: none;
  align-items: center;
  gap: 6px;
}

.blog-image {
  max-width: 800px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#main-content {
  visibility: hidden;  
}

#main-content.visible {
  opacity: 1;
}

/* ✅ הגדרה ספציפית לעמוד store */
.store-page #main-content {
  visibility: hidden;
}

.store-page #main-content.visible {
  visibility: visible;
}

/* Admin Dashboard Tabs */
.admin-dashboard .tab-buttons {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  gap: 10px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  background: #eee;
  cursor: pointer;
  border-radius: 8px;
  font-weight: bold;
  transition: background 0.3s;
}

.tab-btn.active {
  background: #19639d;
  color: white;
}

.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
}

.tab-iframe {
  width: 100%;
  min-height: 600px;
  border: none;
}

/* ✅ תיקון טופס איפוס סיסמה בדסקטופ */
  .reset-password-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }

  #resetStatus {
    max-width: 420px;
    margin: 20px auto 0 auto;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
    background-color: #d4edda;
    color: #155724;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  body.dark-mode #resetStatus {
    background-color: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #444;
  }

  .reset-password-form input,
  .reset-password-form button {
    font-size: 16px;
    width: 100%;
    margin-bottom: 20px;
  }

  .reset-password-form input[type="password"] {
    direction: ltr !important;
    text-align: left !important;
    padding: 12px;
  }

/* =================================================================================== */
/* 🌙 Dark Mode Styles - Enhanced for Full Site */
/* =================================================================================== */

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* טקסט ליד הלוגו */
body.dark-mode .logo-text {
  color: #ffffff !important;
}

/* טקסטים כלליים */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode a {
  color: #ffffff !important;
}

/* רקע כרטיסיות */
body.dark-mode .service-card,
body.dark-mode .dashboard-card,
body.dark-mode .favorite-card,
body.dark-mode .login-card,
body.dark-mode .signup-form,
body.dark-mode .mobile-header
body.dark-mode .contact-form {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

/* שדות טופס */
body.dark-mode input,
body.dark-mode textarea {
  background-color: #121212 !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
}

/* גבולות שדה מוארים בפוקוס */
body.dark-mode input:focus,
body.dark-mode textarea:focus {
  border-color: #4a6cf7 !important;
  outline: none;
}

/* כפתורים */
body.dark-mode .btn-primary,
body.dark-mode .btn-login,
body.dark-mode .signup-button,
body.dark-mode .login-button,
body.dark-mode .logout-button,
body.dark-mode .lang-switch {
  background-color: #19339b !important;
  color: #ffffff !important;
  border: 2px solid transparent;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-login:hover,
body.dark-mode .signup-button:hover,
body.dark-mode .login-button:hover,
body.dark-mode .logout-button:hover,
body.dark-mode .lang-switch:hover {
  background-color: #3653d3 !important;
}

/* Hero Background Overlay */
body.dark-mode .hero,
body.dark-mode .small-hero {
  position: relative;
}

body.dark-mode .hero::before,
body.dark-mode .small-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

body.dark-mode .hero-content,
body.dark-mode .hero .brand-wrapper,
body.dark-mode .small-hero .hero-content {
  position: relative;
  z-index: 1;
}

/* תפריט dropdown */
body.dark-mode .dropdown-content {
  background-color: #2c2c2c;
  color: white;
}

body.dark-mode .dropdown-content a {
  color: white !important;
}

body.dark-mode .dropdown-content a:hover {
  background-color: #444;
}

/* Mobile dropdown */
body.dark-mode .mobile-menu,
body.dark-mode .mobile-dropdown .dropdown-content {
  background-color: #1f1f1f;
  color: #fff;
}

body.dark-mode .founder-section,
body.dark-mode .intro,
body.dark-mode .services-section,
body.dark-mode .gallery-section,
body.dark-mode .cta,
body.dark-mode .blog-container,
body.dark-mode footer,
body.dark-mode .hero.home-hero .hero-content {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}

body.dark-mode .founder-section p,
body.dark-mode .intro p,
body.dark-mode .services-section p,
body.dark-mode .gallery-section p,
body.dark-mode .cta h2,
body.dark-mode .cta a,
body.dark-mode .footer p,
body.dark-mode .hero-content h1,
body.dark-mode .hero-content p {
  color: #f1f1f1 !important;
}

/* ============================= */
/* 🌙 השלמות Dark Mode */
/* ============================= */

body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

/* טפסים */
body.dark-mode .login-form,
body.dark-mode .signup-form,
body.dark-mode .contact-form,
body.dark-mode .login-card,
body.dark-mode .login-form-wrapper,
body.dark-mode .form-fields-wrapper,
body.dark-mode .assistant-chat-box {
  background-color: #1f1f1f !important;
  color: #fff;
  border: none;
}

/* טקסטים בתוך טפסים */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode label {
  background-color: #121212 !important;
  color: #fff !important;
  border-color: #444 !important;
}

/* Placeholder */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #aaa;
}

/* תיאורים */
body.dark-mode p,
body.dark-mode .hero-content p,
body.dark-mode .service-card p,
body.dark-mode .blog-container p {
  color: #ddd !important;
}

/* כותרות */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .hero-content h1,
body.dark-mode .hero-content h2,
body.dark-mode .service-card h3 {
  color: #fff !important;
}

/* אזורי Hero */
body.dark-mode .hero,
body.dark-mode .small-hero {
  background-color: #111 !important;
}

/* אזור גלריה */
body.dark-mode .gallery-section,
body.dark-mode .services-section,
body.dark-mode .intro,
body.dark-mode .founder-section,
body.dark-mode .cta,
body.dark-mode .restricted-page {
  background-color: #1c1c1c !important;
  color: #fff;
}

/* פוטר */
body.dark-mode .footer,
body.dark-mode .site-footer {
  background-color: #000;
  color: #f0f0f0;
}

/* טבלאות */
body.dark-mode .dashboard-table th,
body.dark-mode .dashboard-table td {
  background-color: #1a1a1a !important;
  color: #fff !important;
  border-color: #333 !important;
}

body.dark-mode .dashboard-table tr:hover {
  background-color: #2a2a2a !important;
}

/* כרטיסים */
body.dark-mode .service-card,
body.dark-mode .favorite-card,
body.dark-mode .dashboard-card {
  background-color: #1c1c1c !important;
  color: #f0f0f0;
}

/* טפסים ששקופים מדי */
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="text"],
body.dark-mode textarea {
  background-color: #2a2a2a !important;
  color: #fff !important;
}

/* טקסט שלא נראה כמו "בית" */
body.dark-mode .logo-text,
body.dark-mode .home-link .logo-text {
  color: #fff !important;
}

/* טקסטים כמו Vision, Story, וכו' */
body.dark-mode .founder-section p,
body.dark-mode .intro p,
body.dark-mode .gallery-section p,
body.dark-mode .gallery-section h2 {
  color: #ddd;
}

/* הודעות שגיאה או תגובה */
body.dark-mode .error-message,
body.dark-mode .success-message,
body.dark-mode .toast {
  background-color: #222;
  color: #fff;
}

/* ✅ תיקון עבור labels וטקסט בטפסים ב-dark mode */
body.dark-mode label,
body.dark-mode .login-form label,
body.dark-mode .signup-form label,
body.dark-mode .contact-form label,
body.dark-mode .form-field label {
  color: #ffffff;
}

/* ✅ תיקון צבע טקסט בתוך שדות טופס (input/textarea) */
body.dark-mode input,
body.dark-mode textarea {
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #444;
}

/* ✅ תיקון placeholder */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #aaaaaa;
}

/* Dark mode: צבע placeholder */
body.dark-mode ::placeholder {
  color: #bbb;
  opacity: 1;
}

/* טקסט בתוך input/textarea בצבע לבן */
body.dark-mode input,
body.dark-mode textarea {
  color: #fff;
  background-color: #121212;
  border: 1px solid #444;
}

/* תוויות מחוץ לשדות */
body.dark-mode label {
  color: #eee;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

/* הודעות מערכת */
body.dark-mode .system-message.success {
  background-color: #224d22 !important;
  color: #d0f9d0 !important;
}

body.dark-mode .system-message.error {
  background-color: #661f1f !important;
  color: #ffcccc !important;
}

/* ✔️ Placeholder צבעים כהים יותר */
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #cccccc;
}

/* ✔️ תיבת הודעת הצלחה במצב כהה */
body.dark .success-message {
  background-color: #1d3b1d !important;
  color: #ffffff !important;
}

/* ✔️ תיבת הודעת שגיאה במצב כהה */
body.dark .error-message {
  background-color: #3b1d1d !important;
  color: #ffffff !important;
}

/* ✔️ תיבות טופס במצב כהה */
body.dark input,
body.dark textarea {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
}

/* ✔️ Label text במצב כהה */
body.dark label {
  color: #ffffff !important;
}

/* ✔️ הודעות בתיבות מתחת לקלט */
body.dark .form-message {
  color: #ffffff !important;
}

/* במצב כהה */ /* הודעת סטטוס כללית לאיפוס סיסמה */
body.dark-mode #resetStatus {
  background-color: #264d3a; /* ירוק כהה אלגנטי */
  color: #d9f2e3;
}

/* ✅ תיקון ספציפי ל-label בתוך form-field */
.form-field label,
.contact-form label,
.signup-form label,
.login-form label {  
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  box-shadow: none !important;
  font-size: 15px;
  line-height: 1.4;
  display: block;
  font-weight: bold;
}

/* ✅ מצב כהה */
body.dark-mode .contact-form label,
body.dark-mode .signup-form label,
body.dark-mode .login-form label,
body.dark-mode .form-field label {
  background: none !important;
  color: #f0f0f0 !important;
}

body.dark-mode .site-header .logo-text,
body.dark-mode .site-header .nav-links a,
body.dark-mode .mobile-header button,
body.dark-mode .mobile-header .logo-text {
  color: #ffffff !important;
}

body.dark-mode .mobile-header {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .mobile-header .logo-text,
body.dark-mode .mobile-header .hamburger,
body.dark-mode .mobile-header .dark-mode-button,
body.dark-mode .mobile-header .mobile-lang-button,
body.dark-mode .mobile-header .mobile-dark-button {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ✅ במצב כהה */
body.dark-mode #resetStatus {
  background-color: #1e1e1e;
  color: #f0f0f0;
  border: 1px solid #444;
}

/* ✅ התאמה ייחודית רק לדף איפוס סיסמה */
body.reset-password-page .login-form-wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  text-align: start;
}

/* ✅ מצב כהה */
body.dark-mode.reset-password-page .login-form-wrapper {
  background-color: #1e1e1e;
  color: #f0f0f0;
  box-shadow: 0 4px 16px rgba(255,255,255,0.05);
}

/* ✅ מסגרת כללית */
.reset-password-form {
  width: 100%;
  max-width: 420px;
  margin: auto;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  box-sizing: border-box;
}

/* ✅ שדה סיסמה */
.reset-password-form input[type="password"] {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: #1f1f1f;
  color: #ffffff;
  direction: ltr;
  text-align: left;
}

/* ✅ כפתור איפוס */
.reset-password-form button.btn-submit {
  background-color: #19339b;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

.reset-password-form button.btn-submit:hover {
  background-color: #3653d3;
}

/* ✅ תוויות */
.reset-password-form label,
.reset-password-form p strong {
  font-weight: bold;
  font-size: 16px;
  color: #1a1a1a;
}

/* מצב כהה */
body.dark-mode .reset-password-form {
  background-color: #1e1e1e;
  color: #f0f0f0;
}

body.dark-mode .reset-password-form input[type="password"] {
  background-color: #2c2c2c;
  color: #ffffff;
  border-color: #555;
}

body.dark-mode .reset-password-form label,
body.dark-mode .reset-password-form p strong {
  color: #ffffff;
}

input#newPassword {
  background-color: #1f1f1f; /* 🟥 גורם לרקע שחור גם ב-Light */
  color: #ffffff;
}

input#newPassword {
  background-color: #1f1f1f;
  color: #ffffff;
}

/* Light Mode - כברירת מחדל */
input#newPassword {
  background-color: #ffffff;
  color: #1a1a1a;
  border: 1px solid #ccc;
}

/* Dark Mode */
body.dark-mode input#newPassword {
  background-color: #2c2c2c;
  color: #ffffff;
  border: 1px solid #555;
}

/* ✅ כפתור מצב כהה/בהיר - עיצוב כמו כפתור שפה */
#darkModeToggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 4px;
  padding: 5px 8px;
}

/* --- Normalize mobile buttons light/dark --- */
:root{
  --btn-radius:      12px;
  --btn-padding:     0.75rem 0;
  --btn-font-size:   1rem;
}

/* כל כפתור משתמש במובייל */
.mobile-menu .user-button{
  width:90%;
  margin:0.55rem auto;
  font-size:var(--btn-font-size);
  padding:var(--btn-padding);
  border-radius:var(--btn-radius);
}

/* מצב-בהיר */
body:not(.dark-mode) .mobile-menu .signup-button
body:not(.dark-mode) .mobile-menu .login-button
body:not(.dark-mode) .mobile-menu .logout-button{
  border:2px solid #2f67ff;
  background:#fff;
  color:#2f67ff;
}

/* מצב-כהה – אותו Border & Padding בדיוק */
body.dark-mode .mobile-menu .signup-button
body.dark-mode .mobile-menu .login-button
body.dark-mode .mobile-menu .logout-button{
  border:2px solid #2f67ff;
  background:#161616;          /* כהה–שחור */
  color:#2f67ff;
}

/* מעבר חלק של הלוגו (תוך מניעת השהיה מיותרת) */
img.logo {
  transition: opacity -20s ease-in-out;
}

.generate-product-page .input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.generate-product-page label {
  font-weight: bold;
  white-space: nowrap;
}

.generate-product-page input[type="text"] {
  width: 300px;
  padding: 10px;
  font-size: 1rem;
  direction: inherit;
  text-align: start;
}

.generate-product-page button {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}

html[lang="en"] .generate-product-page .input-row {
  flex-direction: row-reverse;
}

#assistantMessages .chat-msg {
  margin: 6px 0;
  font-size: 0.95rem;
  white-space: pre-wrap;
  max-width: 95%;
  direction: inherit;
}

#assistantMessages .rtl {
  text-align: right;
  direction: rtl;
}

#assistantMessages .ltr {
  text-align: left;
  direction: ltr;
}

body:not(.dark-mode) .signup-button:hover {
  background-color: #4a6cf7 !important;
  color: #ffffff !important;
  border: 2px solid transparent;
}

/* 🎯 עיצוב לרכיב יצירת מוצר */
.generate-product-page {
  padding: 20px;
  margin: 0 auto;
  max-width: 900px;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: center;
}

.input-row label {
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}

.input-row input[type="text"] {
  flex: 1 1 300px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 420px;
}

.input-row button {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  background-color: #19339b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.input-row button:hover {
  background-color: #3653d3;
}

.product-result {
  margin-top: 30px;
  padding: 20px;
  border-radius: 10px;
  background: #f8f8f8;
  font-size: 16px;
  line-height: 1.6;
  text-align: start;
  direction: inherit;
  white-space: pre-line;
  display: none;
}

.product-result.visible {
  display: block;
}

body.dark-mode .product-result {
  background: #2a2a2a;
  color: #fff;
}

/* 📐 placeholder + input alignment לפי שפה */

html[lang="he"] #productPromptInput {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="en"] #productPromptInput {
  direction: ltr !important;
  text-align: left !important;
}

.hidden {
  display: none;
}

/* ✅ כרטיס מוצר בסיסי */
.product-card {
   /* הגדרות בסיס */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* מבטיח שריפוד וגבולות לא ישפיעו על חישוב הרוחב */
    flex: 1 1 300px; /* הגדרת בסיס גמיש */
    max-width: calc(33.333% - 20px); /* מגביל את הרוחב לשליש מהמיכל (פחות רווחים) */
    min-width: 280px; /* רוחב מינימלי לפני שהשורה נשברת למטה */  
}

.product-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.product-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #1a1a1a;
}

.product-card p {
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
}

.product-card .price {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
  color: #206da9;
}

.product-card .btn {
  margin: 4px auto;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #19339b;
  color: white;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.product-card .btn:hover {
  background-color: #3653d3;
}

.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

#productsGrid {
  min-height: 300px;
}

.store-footer {
  text-align: center;
  margin: 40px auto;
}

.checkout-button {
  background-color: #19339b;
  color: white;
  padding: 14px 28px;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.checkout-button:hover {
  background-color: #3653d3;
}

/* 🌙 מצב כהה עבור כרטיסי מוצר */
body.dark-mode .product-card {
  background-color: #1e1e1e;
  color: #f0f0f0;
  border-color: #333;
}

body.dark-mode .product-card .price {
  color: #9be59b;
}

body.dark-mode .btn {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

body.dark-mode .btn:hover {
  background-color: #555;
}

body.dark-mode .product-description {
  color: #ccc;
}

body.dark-mode .product-card .btn {
  background-color: #19339b; /* כחול ראשי */
  color: white;
  border: none;
}

body.dark-mode .product-card .btn:hover {
  background-color: #3653d3;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
}

.cart-item {
  display: flex;
  gap: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  align-items: center;
}

.cart-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.cart-item h3 {
  margin: 0;
  font-size: 18px;
}

.cart-item p {
  margin: 5px 0;
  font-size: 14px;
}

.cart-item.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ✅ מצב כהה - עיצוב עגלת קניות */
body.dark-mode .cart-item {
  background-color: #1f1f1f;
  color: #ffffff;
  border: 1px solid #333;
}

body.dark-mode .cart-item .cart-info h3,
body.dark-mode .cart-item .cart-info p,
body.dark-mode .cart-item .cart-info button {
  color: #ffffff !important;
}

/* ✅ כפתורים בתוך העגלה */
body.dark-mode .cart-item .cart-info button {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

body.dark-mode .cart-item .cart-info button:hover {
  background-color: #555;
}

body.dark-mode .nav-links a[href*="cart"] {
  color: #fff !important;
}

.cart-info span {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}

.cart-info span.animate {
  transform: scale(1.3);
}

/* ✅ תמונה בתוך העגלה */
body.dark-mode .cart-item img {
  filter: brightness(0.85); /* כדי לא להבהיק מדי */
}

.invisible {
  visibility: hidden !important;
}

/* ============================ */
/* ✅ מסך טעינה כללי לאתר      */
/* ============================ */

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
  gap: 25px;
}

.loader-overlay.hidden {
  opacity: 0;
  pointer-events: none; /* מאפשר ללחוץ "דרכו" כשהוא נעלם */
}

.loader-overlay .spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #19339b;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 0;
}

.loader-overlay p {
  font-weight: bold;
  color: #333;
}

/* העיצוב של מכל הלוגו החדש */
.loader-logo {
  width: 100px;  /* ⚠️ שנה את הגודל לפי הצורך */
  height: 100px; /* ⚠️ שנה את הגודל לפי הצורך */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  
  /* ברירת מחדל: הלוגו של המצב הבהיר */
  background-image: url('/images/favicon-light.ico'); /* ⚠️ עדכן לנתיב הנכון */
}

/* החלפת הלוגו אוטומטית במצב כהה */
body.dark-mode .loader-logo {
  background-image: url('/images/favicon-dark.ico'); /* ⚠️ עדכן לנתיב הנכון */
}

/* אנימציית הסיבוב */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* התאמה למצב כהה */
body.dark-mode .loader-overlay {
  background-color: #121212;
}

body.dark-mode .loader-overlay p {
  color: #f0f0f0;
}

/* תיקון: צבע אייקון העגלה במצב כהה */
body.dark-mode .cart-button,
body.dark-mode .cart-mobile-button {
  color: #ffffff;
}

/* ✅ עיצוב לאייקון העגלה החדש (SVG) */
.cart-button svg,
.cart-mobile-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* טריק חשוב - גורם לאייקון לרשת את צבע הטקסט של הכפתור */
  transition: fill 0.3s ease;
  vertical-align: middle; /* ממקם את האייקון יפה לצד הבועית */
}

/* 1. הופך את כפתור העגלה למיכל עבור הבועית */
.cart-button,
.cart-mobile-button {
  position: relative; /* הכרחי כדי שהבועית תתמקם ביחס לכפתור */
  display: inline-flex; /* ממקם את האייקון והבועית בשורה */
  align-items: center;  /* ממקם את האייקון והבועית אנכית */
  gap: 5px; /* רווח קטן בין האייקון לבועית */
  cursor: pointer;
}

/* 2. עיצוב האייקון עצמו (SVG) */
.cart-button svg,
.cart-mobile-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* יורש את הצבע מהקישור (לבן במצב כהה) */
}

/* 3. עיצוב ומיקום הבועית */
.cart-count-badge {
  /* position: static;  <-- מבטל מיקום אבסולוטי כדי שתהיה לצד האייקון */
  font-size: 0.8rem;
  background: #de1c1ceb;
  color: white;
  padding: 1px 6px;
  border-radius: 10px; /* מעט פחות עגול, יותר אובלי */
  font-weight: bold;
  line-height: 1.5; /* ממורכז טוב יותר */
  z-index: 10;
}

/* עיצוב להודעת שגיאה בטעינת דירוג */
.rating-error {
  font-size: 12px;
  color: #8d8d8d;
  font-style: italic;
  white-space: nowrap;
}

/* התאמה למצב כהה */
body.dark-mode .rating-error {
  color: #777;
}

/* עיצוב להודעת שגיאה כללית בטעינת תוכן */
.error-message-container {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  background-color: #fff3f3;
  border: 1px solid #ffcccc;
  border-radius: 12px;
  color: #a94442;
}
.error-message-container p {
  font-size: 1.1rem;
  margin: 0;
}

/* התאמה למצב כהה */
body.dark-mode .error-message-container {
  background-color: #2a1a1a;
  border-color: #5c2a2a;
  color: #ffcccc;
}

.text-center {
  text-align: center !important;
}

/* מרכז את כל תאי הטבלה (כותרות ותוכן) */
.orders-dashboard-table th,
.orders-dashboard-table td {
  text-align: center;
  vertical-align: middle;
}

/* ============================ */
/* ✅ עיצוב דף "ההזמנות שלי"   */
/* ============================ */

/* המכל הראשי של כל ההזמנות */
.orders-list-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.orders-list-container h2 {
  text-align: center;
  margin-bottom: 30px;
}

/* עיצוב כל כרטיס הזמנה בנפרד */
.order-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px 25px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.order-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* החלק העליון של הכרטיס (מספר הזמנה) */
.order-card .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

/* החלק התחתון של הכרטיס (פרטים) */
.order-card .order-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px; /* רווח בין הפרטים */
}

.order-card p {
  margin: 0;
  font-size: 1rem;
  color: #555;
}

.order-card strong {
  color: #1a1a1a;
}

/* עיצוב מזהה ההזמנה שניתן להעתקה */
.order-id.copy-on-click {
  font-family: monospace;
  font-size: 0.9rem;
  background-color: #f5f7fa;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.order-id.copy-on-click:hover {
  background-color: #e9ecef;
}

/* ============================ */
/* התאמה למצב כהה */
/* ============================ */

body.dark-mode .order-card {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-mode .order-card p {
  color: #bbb;
}

body.dark-mode .order-card strong {
  color: #f0f0f0;
}

body.dark-mode .order-card .order-header {
  border-color: #333;
}

body.dark-mode .order-id.copy-on-click {
  background-color: #2c2c2c;
  color: white
}

body.dark-mode .order-id.copy-on-click:hover {
  background-color: #3a3a3a;
}

/* ===================================== */
/* ✅ יישור דף "ההזמנות שלי" לאנגלית   */
/* ===================================== */

/* הפיכת הכיוון של כל הכרטיסייה */
html[lang="en"] .order-card {
  direction: ltr;
}

/* וידוא שהטקסט בתוך הפסקאות מיושר לשמאל */
html[lang="en"] .order-card p {
  text-align: left;
}

.admin-dashboard-page .dashboard-table th {
    text-align: center !important;
}

#tab-orders .dashboard-table th {
  text-align: center !important;
}

/* ============================ */
/* ✅ עיצוב תפריט פרופיל אישי  */
/* ============================ */

/* עיצוב הכפתור הראשי של התפריט */
#profileBtn {
  display: flex;
  align-items: center;
  gap: 8px; /* רווח בין האייקון לטקסט */
}

.profile-icon {
  width: 20px; /* גודל האייקון */
  height: 20px;
}

/* התאמות למצב כהה */
body.dark-mode .profile-icon {
  color: #f0f0f0;
}

/* ======================================= */
/* ✅ עיצוב כרטיסיות הזמנה בממשק הניהול   */
/* ======================================= */

.admin-orders-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* גריד גמיש */
  gap: 20px;
  margin-top: 20px;
}

.admin-chats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* גריד גמיש */
  gap: 20px;
  margin-top: 20px;
}

.admin-order-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.admin-order-card .order-card-header,
.admin-order-card .order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-order-card .order-card-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.admin-order-card .order-card-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 1rem;
  margin-top: auto; /* דוחף את הפוטר לתחתית הכרטיס */
  font-weight: bold;
}

.admin-order-card .order-card-body {
  flex-grow: 1; /* מוודא שהגוף תופס את כל המקום הפנוי */
}

.admin-order-card .order-card-body .order-card-detail {
  padding: 0.5rem 0;
}

.admin-order-card .order-card-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.admin-order-card .order-card-detail strong {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.admin-order-card .order-card-detail span {
  color: #555;
  text-align: left; /* יישור הערכים לשמאל */
  word-break: break-all;
}

html[lang="he"] .admin-order-card .order-card-detail span {
  text-align: left; /* בעברית, הערכים יהיו משמאל */
}

.admin-order-card .items-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.admin-order-card .items-row ul {
  margin: 0;
  padding-inline-start: 20px;
  width: 100%;
  font-size: 0.9em;
}

.admin-order-card .items-row li {
  margin-bottom: 4px;
}

/* התאמה למצב כהה */
body.dark-mode .admin-order-card {
  background-color: #1e1e1e;
  border-color: #333;
}
body.dark-mode .admin-order-card .order-card-header,
body.dark-mode .admin-order-card .order-card-footer {
  border-color: #333;
}
body.dark-mode .admin-order-card strong {
  color: #f0f0f0;
}
body.dark-mode .admin-order-card span,
body.dark-mode .admin-order-card li {
  color: #bbb;
}

/* ======================================================= */
/* ✅ Final Consolidated Fixes for Admin Dashboard         */
/* ======================================================= */

/* --- 1. Main Direction Fix (For Titles & Overall Layout) --- */
/* This is the most important rule that fixes the title alignment */
html[lang="en"] .admin-dashboard-page main#main-content {
  direction: ltr !important;
}

/* --- 2. Fixes for Tables (Users Tab) --- */

/* Align table cell text to the left in English on desktop */
html[lang="en"] .dashboard-table td {
  text-align: left;
}

/* --- 3. Fix for "Generate Product" Tab --- */

/* Correct the layout direction for the input row in English */
html[lang="en"] .generate-product-page .input-row {
  flex-direction: row;
}

body.dark-mode .readonly-field {
    color: #f0f0f0;
}

body.dark-mode .styled-users-table {
    background: #1e1e1e; /* אותו צבע רקע כמו של שאר הכרטיסיות */
}

/* ===================================== */
/* ✅ Cancel Order Button Styling        */
/* ===================================== */

.order-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    text-align: right; /* Default for Hebrew */
}

html[lang="en"] .order-actions {
    text-align: left;
}

.cancel-order-btn {
    background-color: #d9534f; /* Red color for cancellation */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cancel-order-btn:hover {
    background-color: #c9302c;
}

/* Dark mode adjustments */
body.dark-mode .order-actions {
    border-top-color: #333;
}

/* Styling for Admin Cancel Order Button */
.admin-cancel-btn {
    background-color: #d67c2a;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-inline-start: 15px; /* מוסיף רווח משמאל לכפתור */
}

.admin-cancel-btn:hover {
    background-color: #d87316;
}

/* ============================================= */
/* ✅ Thank You Page - Button Layout Fix        */
/* ============================================= */

/* 1. הופך את המיכל לגמיש וממרכז את התוכן */
.thank-you-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* רווח בין הכפתורים */
    margin-top: 30px;
}

/* 2. דורס את העיצוב הבעייתי של הכפתורים רק כשהם בתוך המיכל הזה */
.thank-you-actions > a {
    margin: 0; /* מבטל את המרווח האוטומטי שגרם למרכוז הנפרד */
}

/* ===================================== */
/* ✅ Export Buttons Styling             */
/* ===================================== */

.export-buttons-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px; /* רווח מההזמנות שמתחת */
}

.export-btn {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-btn:hover {
    background-color: #e0e0e0;
    border-color: #aaa;
}

body.dark-mode .export-btn {
    background-color: #333;
    color: #f0f0f0;
    border-color: #555;
}

body.dark-mode .export-btn:hover {
    background-color: #444;
}

.no_orders_items {
  text-align: center;
}

body.dark-mode .no_orders_items {
    color: #f0f0f0;
}

.chat-msg {
  padding: 8px 12px;
  margin: 6px;
  border-radius: 12px;
  max-width: 80%;
  white-space: pre-line;
}
.chat-msg.rtl {
  background-color: #e0f7fa;
  align-self: flex-start;
  direction: rtl;
}
.chat-msg.ltr {
  background-color: #f1f8e9;
  align-self: flex-start;
  direction: ltr;
}
.bot-msg {
  background-color: #eee !important;
  font-style: italic;
}

#assistantTyping {
  font-style: italic;
  color: gray;
}

/* ======================================================= */
/* == סידור תצוגת מחיר ומטבע - לפי הבקשה המעודכנת == */
/* ======================================================= */

/* הגדרות בסיס משותפות לתצוגת משתמש רגיל ולמנהל */
.static-price,
.price-editor {
  display: inline-flex;
  align-items: baseline;
  gap: 5px; /* רווח קטן בין האלמנטים */
}

/* --- סידור למשתמש רגיל --- */

/* בעברית: סמל -> מספר (₪ 295) */
html[lang="he"] .static-price .price-currency { order: 2; }
html[lang="he"] .static-price .price-amount { order: 1; }

/* באנגלית: מספר -> סמל (295 ILS) */
html[lang="en"] .static-price .price-currency { order: 2; }
html[lang="en"] .static-price .price-amount { order: 1; }


/* --- סידור למנהל מערכת (בתוך עורך המחיר) --- */

/* הצגת העורך למנהל והסתרת המחיר הסטטי */
.price-editor {
  display: none; 
}
body.is-admin .price-editor {
  display: inline-flex;
}
body.is-admin .product-card .price .static-price {
  display: none;
}

/* עיצוב שדה הקלט וכפתור השמירה */
.price-editor input {
  width: 80px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-family: inherit;
}
.price-editor .btn-save-price {
  padding: 8px 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.price-editor .btn-save-price:hover {
  background-color: #218838;
}

/* בעברית: סמל -> מספר -> כפתור */
html[lang="he"] .price-editor .price-currency-symbol { order: 3; }
html[lang="he"] .price-editor .price-input { order:2; }
html[lang="he"] .price-editor .btn-save-price { order: 1; }

/* באנגלית: מספר -> סמל -> כפתור */
html[lang="en"] .price-editor .price-currency-symbol { order: 3; }
html[lang="en"] .price-editor .price-input { order: 2; }
html[lang="en"] .price-editor .btn-save-price { order: 1; }

/* הוספת חיווי פוקוס ברור לכל האלמנטים האינטראקטיביים */
:focus-visible {
  outline: 3px solid #0059B2; /* צבע כחול בולט, ניתן להתאים */
  outline-offset: 2px;
  border-radius: 4px; /* עיגול פינות להתאמה לעיצוב */
  box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.4); /* צל חיצוני נוסף */
}

/* עיצוב הקישור "דלג לתוכן" */
.skip-link {
  position: absolute;
  top: -40px; /* הסתרה מחוץ למסך */
  left: 0;
  background: #333;
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0; /* הצגה כאשר מקבל פוקוס */
}

body.dark-mode .favorite-btn {
    color: white
}

/* יישור עמוד הנגישות לשמאל באנגלית */
html[lang="en"] .accessibility-page .intro {
  text-align: left;
  direction: ltr;
}

/* תיקון ריפוד הרשימה באנגלית */
html[lang="en"] .accessibility-page .intro ul {
  padding-right: 0;
  padding-left: 20px;
}

/* יישור עמוד הנגישות לשמאל באנגלית */
html[lang="he"] .accessibility-page .intro {
  text-align: right;
  direction: rtl;
}

/* תיקון ריפוד הרשימה באנגלית */
html[lang="he"] .accessibility-page .intro ul {
  padding-left: 0;
  padding-right: 20px;
}

/* יישור אייקון הנגישות והקישור בפוטר - גרסה מתוקנת */
.accessibility-link-wrapper {
  display: flex;
  justify-content: center;
  /* ✅ התיקון: שימוש ב-baseline במקום center ליישור מושלם עם הטקסט */
  align-items: baseline; 
  gap: 8px;
  margin-bottom: 15px;
}

/* ============================ */
/* == עיצוב דף חנות עם סינון == */
/* ============================ */

.store-layout {
  display: flex;
  direction: rtl; /* ברירת מחדל: מימין לשמאל */
  gap: 30px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

html[lang="en"] .store-layout {
  direction: ltr;
}

.filters-panel {
  flex: 0 0 250px; /* רוחב קבוע לפאנל הסינון */
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  height: fit-content; /* הגובה יתאים לתוכן */
  position: sticky;
  top: 100px; /* מרחק מהחלק העליון בעת גלילה */
}

.products-main-content {
  flex-grow: 1; /* עמודת המוצרים תתפוס את שאר המקום */
}

.filter-group {
  margin-bottom: 25px;
}

.filter-group h3 {
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.filter-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 250px; /* הגבלת גובה למניעת רשימות ארוכות מדי */
  overflow-y: auto; /* הוספת פס גלילה במידת הצורך */
}

.filter-list li {
  margin-bottom: 10px;
}

.filter-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
}

.filter-list input[type="radio"],
.filter-list input[type="checkbox"] {
  cursor: pointer;
}

/* התאמה למצב כהה */
body.dark-mode .filters-panel {
  background-color: #1e1e1e;
  border: 1px solid #333;
}
body.dark-mode .filter-group h3 {
  border-bottom-color: #333;
}

a.product-card-link {
    text-decoration: none;
    color: inherit;
}

/* ============================ */
/* == עיצוב עמוד פרטי מוצר  == */
/* ============================ */

.product-details-container {
  display: flex;
  flex-wrap: wrap; /* יאפשר גלישה למובייל */
  gap: 40px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.product-image-column {
  flex: 1 1 400px; /* עמודת התמונה */
}

#productImage {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  background-color: #f0f0f0; /* רקע למקרה שהתמונה לא נטענת */
}

.product-info-column {
  flex: 1 1 500px; /* עמודת המידע */
  display: flex;
  flex-direction: column;
}

/* התאמות טקסט בעמוד המוצר */
.product-info-column h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.product-meta {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}

.product-meta strong {
  color: #333;
}

#productDescription {
  font-size: 1.1rem;
  line-height: 1.7;
  flex-grow: 1; /* דוחף את המחיר והכפתורים למטה */
}

.product-price {
  font-size: 2rem;
  font-weight: bold;
  color: #2d8fdb;
  margin-top: auto; /* ייצמד לתחתית עמודת המידע */
  margin-bottom: 20px;
}

/* יישור עמוד מוצר לשמאל באנגלית */
html[lang="en"] .product-details-page .product-info-column {
  text-align: left;
}

html[lang="en"] .product-details-page .product-details-container {
  direction: ltr;
}

/* ================================== */
/* == יישור פאנל הסינון לאנגלית == */
/* ================================== */

/* קביעת כיווניות כללית לפאנל באנגלית */
html[lang="en"] .filters-panel {
  direction: ltr;
}

/* יישור הכותרות ופריטי הרשימה לשמאל */
html[lang="en"] .filters-panel h3,
html[lang="en"] .filters-panel .filter-list li {
  text-align: left;
}

.product-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical; 
  min-height: calc(1.4em * 3);
}

/* 2. סידור 3 מוצרים בשורה בדסקטופ */
.products-grid {
    justify-content: center; /* מוודא שהכרטיסים ממורכזים אם יש פחות מ-3 */
}

/* 3. סידור המטבע בעמוד המוצר הדינאמי */
.product-details-page .product-price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

/* בעברית: סמל -> מספר (₪ 295) */
html[lang="he"] .product-details-page .product-price .price-currency { order: 2; }
html[lang="he"] .product-details-page .product-price .price-amount { order: 1; }

/* באנגלית: מספר -> סמל (295 ILS) */
html[lang="en"] .product-details-page .product-price .price-currency { order: 2; }
html[lang="en"] .product-details-page .product-price .price-amount { order: 1; }


/* 4. הקטנת התוכן בעמוד המוצר הדינאמי */
.product-details-page .product-info-column h1 {
    font-size: 2.1rem; /* הוקטן מ-2.5rem */
}
.product-details-page #productDescription {
    font-size: 1rem; /* הוקטן מ-1.1rem */
    line-height: 1.6;
}
.product-details-page .product-price {
    font-size: 1.8rem; /* הוקטן מ-2rem */
}
.product-details-page .product-image-column {
    flex-basis: 350px; /* מקטין מעט את עמודת התמונה */
}

/* 1. הקטנה נוספת של תיבת המחיר למנהל */
.price-editor input.price-input {
    width: 40px; /* הוקטן עוד יותר להתאמה ל-4 ספרות */
    padding: 8px 5px; /* ריפוד פנימי מותאם */
}

/* 2. ניסיון להציג באופן קבוע את חיצי המספר (עובד בדפדפני WebKit) */
.price-editor input[type=number]::-webkit-inner-spin-button { 
  opacity: 1;
  cursor: pointer;
}

/* עיצוב צבע צהוב לקישור הנגישות והאייקון בפוטר */
.accessibility-link-wrapper a {
  color: #FFD700; /* צבע זהב/צהוב */
  text-decoration: underline; /* מחזיר את הקו התחתון */
}

.accessibility-link-wrapper .accessibility-icon {
  fill: #FFD700; /* צובע את אייקון ה-SVG באותו הצבע */
}

body.dark-mode .accessibility-link-wrapper a {
    color: #FFD700 !important; 
}

body.dark-mode .product-meta {
    color: #cccccc; /* צבע אפרפר בהיר לטקסט הרגיל (שם המותג/קטגוריה) */
}

body.dark-mode .product-meta strong {
    color: #ffffff; /* צבע לבן בולט לתוויות (המילים "מותג", "קטגוריה") */
}

.login-form button.btn-submit {
    margin-top: 15px; /* הוקטן מ-20px */
}

/* ======================================= */
/* == עיצוב הודעת "עגלה ריקה" משודרגת == */
/* ======================================= */

.empty-cart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  min-height: 400px;
}

.empty-cart-icon svg {
  color: #cccccc;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.empty-cart-text h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.empty-cart-text p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px;
}

.empty-cart-text .btn-primary {
  padding: 12px 30px;
  font-size: 1.1rem;
}

/* התאמה למצב כהה */
body.dark-mode .empty-cart-icon svg {
  color: #444444;
}

body.dark-mode .empty-cart-text p {
  color: #bbbbbb;
}

body.cart-is-empty #main-content .intro {
  padding-top: 20px; /* מקטין משמעותית את הריפוד העליון */
}

/* עיצוב נוסף כדי שההודעה תיראה טוב יותר */
body.cart-is-empty .empty-cart-container {
    padding-top: 20px;
    padding-bottom: 40px;
    min-height: unset; /* מבטל את הגובה המינימלי הקודם */
}

body.cart-page.cart-is-empty main#main-content > section.intro {
  padding-top: 20px !important; /* מקטין את הריפוד העליון וכופה את השינוי */
  padding-bottom: 20px !important;
}

/* עיצוב נוסף כדי שההודעה תיראה טוב יותר */
.empty-cart-container {
    padding-top: 20px;
    padding-bottom: 40px;
    min-height: unset; /* מבטל את הגובה המינימלי הקודם */
}

/* ======================================= */
/* == עיצוב כפתור טקסט לאיפוס עגלה   == */
/* ======================================= */
/* עיצוב כללי לאזור הסיכום */
#cartSummary {
  text-align: center;
  padding-top: 20px;
}

/* כותרת הסיכום (סה"כ לתשלום) והכפתור */
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.summary-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

/* עיצוב כפתור "רוקן עגלה" */
.clear-cart-btn {
  background: none;
  border: none;
  color: #333; /* צבע טקסט שחור */
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7; /* שיהיה מעט פחות בולט מהכותרת */
  transition: opacity 0.2s ease;
}

.clear-cart-btn:hover {
  opacity: 1;
  color: #d9534f; /* צבע אדום במעבר עכבר */
}

.clear-cart-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* עיצוב הסכום הכולל */
.summary-total {
  margin: 20px 0;
}

.total-price {
  font-size: 2rem;
  font-weight: bold;
}

/* התאמות למצב כהה */
body.dark-mode .summary-header h2,
body.dark-mode .clear-cart-btn {
  color: #f0f0f0;
}
body.dark-mode .summary-header {
  border-bottom-color: #333;
}
body.dark-mode .clear-cart-btn:hover {
  color: #ff8a80;
}

/* ======================================= */
/* == יישור סיכום עגלה לשמאל באנגלית == */
/* ======================================= */

html[lang="en"] .summary-header {
  direction: ltr; /* מוודא שהכותרת והכפתור מסודרים משמאל לימין */
}

#cartSummary .summary-total {
    text-align: center;
    display: block;
    width: 100%;
    margin: 20px 0;
}

/* ======================================================= */
/* == סידור מטבע בסכום הכולל בדף העגלה בלבד == */
/* ======================================================= */

/* הופך את מיכל הסכום לגמיש */
#cartSummary .total-price {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 2.2rem;
  font-weight: bold;  
}

/* בעברית: סמל -> מספר (₪ 410) */
html[lang="he"] #cartSummary .total-price .price-currency {
  order: 1;
}
html[lang="he"] #cartSummary .total-price .price-amount {
  order: 2;
}

/* --- סידור בעברית: סמל ואז מספר --- */
html[lang="he"] .price-display .price-currency,
html[lang="he"] .total-price .price-currency {
  order: 1;
}
html[lang="he"] .price-display .price-amount,
html[lang="he"] .total-price .price-amount {
  order: 2;
}

/* עיצוב שורת המחיר בפריט הבודד */
.cart-item-price, .cart-item-subtotal {
    white-space: nowrap;
}

/* 2. קביעת הסדר בעברית (סמל ואז מספר) */
html[lang="he"] .cart-item .price-display .price-currency {
  order: 1;
}
html[lang="he"] .cart-item .price-display .price-amount {
  order: 2;
}

/* 3. קביעת הסדר באנגלית (מספר ואז סמל) */
html[lang="en"] .cart-item .price-display .price-currency {
  order: 2;
}
html[lang="en"] .cart-item .price-display .price-amount {
  order: 1;
}

/* 4. מחזיר את הפונט לגודלו המקורי בסיכום */

html[lang="en"] .cart-item {
  direction: ltr;
}

html[lang="en"] .cart-item .cart-info {
  text-align: left;
}

/* ======================================= */
/* ✅ עיצוב אפשרויות משלוח ותשלום בעגלה   */
/* ======================================= */

.cart-options-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

body.dark-mode .cart-options-container {
    background-color: #1a1a1a;
    border-color: #333;
}

.shipping-options h3,
.coupon-section label,
.payment-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.shipping-options .option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shipping-options .option-group label {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.dark-mode .shipping-options .option-group label {
    background-color: #2c2c2c;
    border-color: #444;
}

.shipping-options .option-group label:hover {
  border-color: #19339b;
}

.shipping-options input[type="radio"]:checked + .option-details + .option-price {
    font-weight: bold;
}

.shipping-options .option-group label .option-details {
  flex-grow: 1;
}

.shipping-options .option-title {
  font-weight: 500;
}

.shipping-options .option-desc {
  font-size: 0.9em;
  color: #666;
  display: block;
}

body.dark-mode .shipping-options .option-desc {
    color: #bbb;
}

.shipping-options .option-price {
  font-weight: 600;
  font-size: 1.1em;
  color: #19339b;
}

body.dark-mode .shipping-options .option-price {
    color: #8ab4f8;
}


/* Coupon Section */
.coupon-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

body.dark-mode .coupon-section {
    border-top-color: #333;
}

.coupon-input-group {
  display: flex;
  gap: 10px;
}

.coupon-input-group input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.btn-apply-coupon {
  padding: 10px 20px;
  border: none;
  background-color: #555;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}

.btn-apply-coupon:hover {
    background-color: #333;
}

/* Payment Section */
.payment-section {
    max-width: 800px;
    margin: 30px auto 0;
    text-align: center;
}

.payment-methods {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.payment-methods img {
    height: 30px;
    opacity: 0.8;
}

body.dark-mode .payment-methods img {
    filter: invert(1) brightness(1.5);
    opacity: 0.7;
}

/* סיכום ביניים בעגלה */
.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    padding: 8px 0;
}
.summary-line.total {
    font-size: 1.2rem;
    font-weight: bold;
    border-top: 1px solid #ccc;
    margin-top: 10px;
    padding-top: 15px;
}
body.dark-mode .summary-line.total {
    border-top-color: #444;
}

.price-display {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em; /* רווח קטן שתלוי בגודל הפונט */
  white-space: nowrap; /* מונע שבירת שורה בין המספר למטבע */
}

/* ================================================== */
/* ✅ [סופי] כלל מאוחד לסידור כל המחירים בעגלה */
/* ================================================== */

.price-display {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em; /* רווח קטן שתלוי בגודל הפונט */
  white-space: nowrap; /* מונע שבירת שורה בין המספר למטבע */
}

/* --- סידור בעברית (סמל ואז מספר) --- */
html[lang="he"] .price-display {
  direction: rtl; /* קובע את הכיוון של המיכל */
}
html[lang="he"] .price-display .price-currency {
  order: 1; /* סמל המטבע ראשון */
}
html[lang="he"] .price-display .price-amount {
  order: 2; /* המספר שני */
}

/* --- סידור באנגלית (מספר ואז סמל) --- */
html[lang="en"] .price-display {
  direction: ltr; /* קובע את הכיוון של המיכל */
}
html[lang="en"] .price-display .price-currency {
  order: 2; /* סמל המטבע שני */
}
html[lang="en"] .price-display .price-amount {
  order: 1; /* המספר ראשון */
}

/* ================================================================= */
/* [סופי ואחרון] סידור אחיד של כל רכיבי העגלה (עברית ואנגלית) */
/* ================================================================= */

/* --- 1. יישור כללי של השורות (משלוח וסיכום) --- */
html[lang="he"] .shipping-options .option-group label,
html[lang="he"] .summary-line {
    direction: rtl;
}

html[lang="en"] .shipping-options .option-group label,
html[lang="en"] .summary-line {
    direction: ltr;
}

/* --- 2. סידור פנימי של המחיר והמטבע --- */
.price-display {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
}

/* עברית: מספר ואז סמל (420 ₪) */
html[lang="he"] .price-display .price-amount { order: 1; }
html[lang="he"] .price-display .price-currency { order: 2; }

/* אנגלית: מספר ואז סמל (420.00 ILS) */
html[lang="en"] .price-display .price-amount { order: 1; }
html[lang="en"] .price-display .price-currency { order: 2; }

/* ======================================= */
/* ✅ עיצוב אזור הצעות בעגלת הקניות      */
/* ======================================= */

.cart-suggestions-section {
    background: #f8f9fa;
    padding: 40px 20px; /* ריפוד קטן ומתאים יותר */
    text-align: center;
    border-top: 1px solid #e0e0e0;
}

body.dark-mode .cart-suggestions-section {
    background: #1c1c1c;
    border-top-color: #333;
}

.cart-suggestions-section h2 {
    margin-bottom: 30px;
}

/* ============================================= */
/* ✅ [סופי 4.0] עיצוב אחיד ל-3 הכפתורים בדף מוצר */
/* ============================================= */

.product-page-actions {
    display: flex;
    align-items: center; 
    gap: 10px;
    margin-top: 25px;
}

/* עיצוב בסיס שמשותף לכל הכפתורים כדי לקבוע גובה אחיד */
.product-page-actions > a,
.product-page-actions > button {
    height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    margin: 0; /* איפוס margin שיכול להגיע מכללים אחרים */
}

/* עיצוב ספציפי לכפתור המועדפים כדי שיהיה ריבועי */
.product-page-actions .favorite-btn {
    width: 44px;
    padding: 0;
    flex-shrink: 0;
    font-size: 22px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #888;
}

/* צבעים במצב כהה */
body.dark-mode .product-page-actions .favorite-btn {
    background-color: #333;
    border-color: #555;
    color: #ccc;
}

/* מועדף פעיל */
.product-page-actions .favorite-btn.favorited {
    color: red;
    border-color: #ff8a80;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* ============================================= */
/* ✅ עיצוב ממשק ניהול קופונים                */
/* ============================================= */

.coupon-management-page .admin-form {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 40px;
}

body.dark-mode .coupon-management-page .admin-form {
    background-color: #1e1e1e;
    border-color: #333;
}

.coupon-management-page .admin-form h3 {
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

body.dark-mode .coupon-management-page .admin-form h3 {
    border-bottom-color: #444;
}

.admin-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-form .form-group {
    flex: 1 1 200px; /* מאפשר גמישות וגלישה יפה */
    display: flex;
    flex-direction: column;
}

.admin-form label {
    font-weight: 600;
    margin-bottom: 8px;
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

body.dark-mode .admin-form input, 
body.dark-mode .admin-form select {
    background-color: #2c2c2c;
    border-color: #555;
    color: #f0f0f0;
}

/* עיצוב כפתורים בטבלה */
#couponsTable .delete-coupon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}
#couponsTable .toggle-active {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* תיקון: ממורכז את כותרות הטבלה בממשק הניהול באנגלית */
html[lang="en"] .dashboard-table th {
    text-align: center !important;
}

html[lang="en"] #couponsTable td {
    text-align: center;
}

/* ============================================= */
/* ✅ תיקוני עיצוב לטופס יצירת קופון         */
/* ============================================= */

/* מגדיר רוחב מקסימלי לכל קבוצת שדה בטופס */
.admin-form .form-group {
    max-width: 300px;
}

/* עיצוב ספציפי לתיבת הבחירה המרובה */
#applicableItems {
    min-height: 150px; /* גובה מינימלי נוח לבחירה */
    width: 100%;       /* תמיד יתאים לרוחב המיכל שלו */
}

/* ========================================================= */
/* ✅ [סופי 2.0] עיצוב קומפקטי ומהודק לאזור הצעות בעגלה     */
/* ========================================================= */

.cart-suggestions-section {
    background: #f8f9fa;
    padding: 25px 20px;
    text-align: center;
    border-top: 1px solid #e0e0e0;
}

body.dark-mode .cart-suggestions-section {
    background: #1c1c1c;
    border-top-color: #333;
}

.cart-suggestions-section h2 {
    margin-bottom: 6px;
}

.cart-suggestions-section .products-grid {
    justify-content: flex-start;
}

/* שינויים לרוחב, גובה וריווחים */
.cart-suggestions-section .product-card {
    flex: 0 0 140px;  /* <<< שינוי לכלל חזק יותר שדורס הגדרות קודמות */
    min-width: 135px;
    padding: 8px;      
    display: flex;
    flex-direction: column;
}

.cart-suggestions-section .card-content-grow {
    flex-grow: 1;
}

.cart-suggestions-section .product-card img {
    width: 120px;
    height: 120px;
    margin-bottom: 6px; /* <<< צמצום מרווח */
    margin-left: auto;
    margin-right: auto;
}

.cart-suggestions-section .product-card h3 {
    font-size: 15px;
    margin-bottom: 6px; /* <<< צמצום מרווח */
}

.cart-suggestions-section .product-card .product-description {
    display: none;
}

/* שינוי למרכוז המחיר */
.cart-suggestions-section .product-card .price-display {
    font-size: 14px;
    margin-bottom: 6px; /* <<< צמצום מרווח */
    width: 100%;        /* <<< הרחבת האלמנט לכל רוחב הכרטיס */
    justify-content: center; /* <<< מרכוז המחיר שבתוכו */
}

.cart-suggestions-section .product-card .btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* ======================================= */
/* ✅ עיצוב לסידור הצעות בשורה             */
/* ======================================= */

.suggestion-wrapper {
  display: flex;
  flex-wrap: wrap; /* יאפשר גלישה למטה במסכים קטנים */
  justify-content: center;
  gap: 20px; /* רווח בין שני אזורי ההצעות */
  padding: 0 20px; /* ריפוד צדדי */
}

.suggestion-wrapper > .cart-suggestions-section {
  flex: 1; /* כל אזור ינסה לתפוס חצי מהמקום */
  min-width: 320px; /* רוחב מינימלי לפני שהם ירדו אחד מתחת לשני */
  border-top: none; /* הסרת הגבול העליון המיותר */
  padding-top: 15px; /* הקטנת הריפוד העליון */
}

/* ======================================= */
/* ✅ עדכונים מקיפים לעמוד עגלת הקניות     */
/* ======================================= */

/* 1. מרכוז הכרטיסים באזורי ההצעות */
.cart-suggestions-section .products-grid {
    justify-content: center;
}

/* 2. הוספת קו חוצץ בין אזורי ההצעות */
.suggestion-wrapper > .cart-suggestions-section:first-child {
    /* הקו יופיע משמאל לאזור הימני (בעברית) */
    border-left: 1px solid #e0e0e0;
    padding-left: 20px;
}

html[lang="en"] .suggestion-wrapper > .cart-suggestions-section:first-child {
    /* הקו יופיע מימין לאזור השמאלי (באנגלית) */
    border-left: none;
    border-right: 1px solid #e0e0e0;
    padding-left: 0;
    padding-right: 20px;
}

body.dark-mode .suggestion-wrapper > .cart-suggestions-section:first-child {
    border-color: #333;
}

/* 3. עיצוב חדש לאזור סיכום העגלה */
.cart-summary {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center; /* מרכוז כל התוכן */
    gap: 20px;
    max-width: 450px; /* הגבלת רוחב */
    margin: 40px auto; /* מרכוז התיבה כולה */
}

.summary-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
}

.summary-line.total {
    font-size: 1.2rem;
    font-weight: bold;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
}

.cart-summary .btn-primary {
    width: 100%;
    margin: 0;
}

.cart-summary .clear-cart-btn {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: -10px; /* מקטין את הרווח מהכפתור הראשי */
}

/* התאמות למצב כהה */
body.dark-mode .cart-summary {
    background-color: #1e1e1e;
}

body.dark-mode .summary-line.total {
    border-top-color: #333;
}

/* ================================== */
/* ✅ צמצום מרווחים אנכיים בדף עגלה   */
/* ================================== */

/* 1. הקטנת הריווח הכללי של אזור התוכן הראשי */
.cart-page .intro {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* 2. הקטנת המרווח מעל רשימת הפריטים */
.cart-page .cart-items {
    margin-top: 0;
}

/* 3. הקטנת המרווח בין הסיכום להצעות */
.cart-page .cart-summary {
    margin-top: 30px;
    margin-bottom: 0;
}

.cart-page .suggestion-wrapper {
    margin-top: 30px;
}

/* ======================================= */
/* ✅ הדגשת תוויות בסיכום ההזמנה          */
/* ======================================= */

.checkout-page .summary-line > span:first-child {
    font-weight: 600; /* נותן לטקסט משקל עבה יותר (semi-bold) */
}

.checkout-page .summary-line.total > span:first-child {
    font-weight: bold; /* מוודא שהסה"כ הכללי נשאר מודגש במיוחד */
}

/* ======================================================= */
/* ✅ תיקון צבע תיבות בחירה בניהול משתמשים (מצב כהה) */
/* ======================================================= */

body.dark-mode .styled-users-table select.role-dropdown,
body.dark-mode .status-dropdown {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #555 !important;
}

/* ====================================================================================== */
/* 📱  600x : Media Queries - התאמה למסכים קטנים  */
/* ====================================================================================== */
@media (max-width: 600px) {

  .signup-form input,
  .login-form input,
  .contact-form input,
  .signup-form textarea,
  .contact-form textarea {
    font-size: 0.9rem;
  }
/* ✅ טפסים במובייל */
  .signup-form button,
  .login-form button,
  .reset-password-form button,
  .contact-form button {
    font-size: 15px;
    padding: 10px;
  }

  .product-card {
    flex-basis: 100%; /* 1 בשורה במובייל */
    max-width: 100%;
    min-width: unset;      
  }

/* רספונסיביות */
  .signup-form,
  .login-form,
  .reset-password-form,
  .contact-form {
    padding: 20px;
    border-radius: 12px;
  }        

  .styled-users-table th, .styled-users-table td {
    padding: 8px 2px;
    font-size: 13px;
  }
  .styled-users-table {
    font-size: 12px;
  }

  .table-search-wrapper {
    justify-content: center; 
  }
  .table-search-input {
    width: 99vw; max-width: 99vw; 
  }

  .login-form-wrapper input,
  .login-form-wrapper button {
    font-size: 16px;
    width: 100% !important;
  }

  .reset-password-form {
    width: 100%;
  }

  .login-form-wrapper {
    width: 100% !important;
    max-width: 90vw !important;
    padding: 20px !important;
    box-sizing: border-box;
    border-radius: 16px;
    margin: 0 auto;
  }

  .reset-password-form {
    width: 100% !important;
    box-sizing: border-box;
  }

  .reset-password-form input,
  .reset-password-form button {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .reset-password-form input[type="password"] {
    padding: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: auto;
  }

  #resetStatus {
    font-size: 15px;
    padding: 12px 16px;
    margin-top: 10px;
    border-radius: 10px;
    max-width: 95%;
    box-sizing: border-box;
    text-align: center;
  }

  .cart-item {
    flex-direction: column;
    text-align: center;
  }

  .cart-item img {
    width: 80%;
    height: auto;
  }

  .cart-info button {
    margin: 5px;
  }

}
 
/* ====================================================================================== */
/* 📱  768x : Media Queries - התאמה למסכים קטנים  */
/* ====================================================================================== */
/* === תצוגת מובייל בלבד === */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  
  .mobile-menu.show {
    display: flex;
  }
  
  .mobile-menu {
    display: none;
  }
  
  .mobile-menu.open {
    display: flex;
  }
  
 .mobile-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
 /* pointer-events: none;  מבטל קליקים מחוץ לכפתור */
  }

  .mobile-dropdown .dropbtn {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    cursor: pointer;
    padding: 10px 0;
    width: auto;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    pointer-events: auto; /* מאשר קליקים רק על הכפתור */
    z-index: 2;
  }

  .mobile-dropdown .dropdown-content {
    display: none;
    flex-direction: column;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-top: 6px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    position: static; /* ✅ חשוב! */
    z-index: 999;
    max-height: 300px;     /* אפשר להתאים לפי הצורך */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: white;     /* ודא שהרקע אחיד */
    
  }

  .mobile-dropdown .dropdown-content a {
    padding: 12px 0;
    font-weight: bold;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    width: 100%;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .mobile-dropdown.open .dropdown-content {
    display: flex;
  }

  .mobile-dropdown .dropdown-content a:last-child {
    border-bottom: none;
  }
  
  .mobile-dropdown .dropdown-content a:hover {
    background-color: #f9f9f9;
  }

  #mobileDropdownContent.open {
  display: flex;
  }  

  .nav-links {
    display: none;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding: 10px 0;
    justify-content: flex-start;
    scroll-behavior: smooth;
  }

  .nav-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: bold;
    font-size: 15px;
    padding: 0 8px;
    white-space: nowrap;  
    flex: 0 0 auto;  
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;  
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-actions {
    margin-top: 8px;
    text-align: left;
    display: none;
  }

  .services {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .service-card {
    width: 90%;
    max-width: 400px;
    text-align: center;
  }

  .service-card img {
    width: 100%;
    max-width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;    
  }

  .user-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  
  .user-actions .save-user-btn,
  .user-actions .reset-password-btn,
  .user-actions .delete-user-btn {
    text-align: center;
    width: 100%;
    max-width: 280px;
    font-size: 14px;
    padding: 12px;
    margin: 0 auto;    
  }  

  .reset-password-btn {  
    background-color: gray;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
  }

  .reset-password-btn:hover {
    background-color: #939292bb;
  }

  /* ✅ יישור שדות סטטוס ותפקיד למרכז */
  .status-dropdown,
  .role-dropdown {
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 100%;
    max-width: 260px;
  }

 /* ✅ יישור האופציות */
  .status-dropdown option,
  .role-dropdown option {
    text-align: center;
  }  

  /* ✅ צמצום ריווח בין Save ל-Delete */
  .save-user-btn {
    margin-bottom: 4px;
  }

  .delete-user-btn {
    margin-bottom: 4px;
  }

  .hero-brand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.35);
    color: white;
    font-weight: bold;
    font-size: 18px;
    backdrop-filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    z-index: 2;
    flex-direction: row; /* ברירת מחדל */
    /* animation: slideBrand 0s ease-in-out infinite; */
    animation: pulseBrand 4s ease-in-out infinite;
    transform-origin: center;
  }

  .hero-brand-icon {
    height: 68px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    margin: 0;
    filter: drop-shadow(0 0 1px #000);
  }

  .about-page .small-hero .hero-content {
    margin-top: 125px;
  }  

  .admin-dashboard-page .small-hero .hero-content {
    margin-top: 240px;
  }

  .dashboard-page .small-hero .hero-content {
    margin-top: -60px;
  }

  .store-page .small-hero .hero-content {
    margin-top: 50px;
  }
  .user-management-page .small-hero .hero-content {
    margin-top: 340px;
  }

  .cart-page .small-hero .hero-content {
    margin-top: -20px;
  }

  .generate-product-page .small-hero .hero-content {
    margin-top: 160px;    
  }

  .installations-page .small-hero .hero-content {
    margin-top: 280px;
  }

  .blog-energy-page .small-hero .hero-content {
    margin-top: -60px;
  }

  .blog-page-security .small-hero .hero-content {
    margin-top: -60px;
  }

  .contact-page .small-hero .hero-content {
    margin-top: 0px;
  }

  .smart-page .small-hero .hero-content {
    margin-top: -60px;
  }  

  .top-rated-page .small-hero .hero-content {
    margin-top: 140px;
  }  

  .hero-brand-bar .brand-text {
    font-size: 24px;
  }

  .mobile-dark-button,
  .mobile-lang-button,
  .cart-mobile-button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  }

  #darkModeToggle {
    display: none !important;
  }

  body.dark-mode .btn-primary,
  body.dark-mode .btn-login,
  body.dark-mode .signup-button,
  body.dark-mode .login-button,
  body.dark-mode .logout-button,
  body.dark-mode .lang-switch {
    display:block;
    width:90%;
    margin:0.6rem auto;
    font-size:1rem;
    padding:0.45rem 0;
    text-align:center;
    border-radius:12px;
  }    

  body.dark-mode .btn-primary:hover,
  body.dark-mode .btn-login:hover,
  body.dark-mode .signup-button:hover,
  body.dark-mode .login-button:hover,
  body.dark-mode .logout-button:hover,
  body.dark-mode .lang-switch:hover {
    background-color: #3653d3;
  }

  body:not(.dark-mode) .btn-login,
  body:not(.dark-mode) .signup-button,
  body:not(.dark-mode) .login-button,
  body:not(.dark-mode) .logout-button,
  body:not(.dark-mode) .lang-switch {
    display:block;
    width:90%;
    margin:0.6rem auto;
    font-size:1rem;
    padding:0.45rem 0;
    text-align:center;
    border-radius:12px;
    border:2px solid var(--accent,#2f67ff);
    background:transparent;
    color:var(--accent,#2f67ff);
  }      

  .site-header .container {
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }

  .mobile-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border-bottom: 1px solid #ccc;
    gap: 8px;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .mobile-header .home-link,
  .mobile-header button {
    display: flex !important;
    align-items: center;
    height: 40px;
  }

  .home-link .logo-text {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    height: 40px;
  }

  .mobile-controls-wrap {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 40px;
    flex-shrink: 0;
  }

  body.dark-mode .mobile-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
  }

  body.dark-mode .mobile-header .logo-text,
  body.dark-mode .mobile-header .hamburger,
  body.dark-mode .mobile-header .dark-mode-button,
  body.dark-mode .mobile-header .mobile-lang-button,
  body.dark-mode .mobile-header .mobile-dark-button {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
  
  /* ✅ תפריט עליון מובייל */
  .home-wrapper-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .mobile-branding-text {
    display: inline-block;
    font-size: 15px;
    color: #444;
    font-weight: bold;
    margin-inline-start: auto; /* מיישר שמאלה */
    margin-inline-end: auto;
    white-space: nowrap;
    padding-right: 0px;
    padding-left: 0px;
    text-decoration: underline;
  }

  body.dark-mode .mobile-branding-text {
    color: #ffffff !important;
  }

  html[lang="en"] .home-wrapper-mobile {
    flex-direction: row;
  }

  .home-wrapper-mobile .logo {
    height: 28px;
  }

  .home-wrapper-mobile .logo-text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;  
  }

  .hamburger {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
  }  

 /* ✅ 1. החלפת לוגו במצב כהה/בהיר במובייל */
  .mobile-header .home-link .logo {
    content: url('/images/favicon-light.ico');
  }

  body.dark-mode .mobile-header .home-link .logo {
    content: url('/images/favicon-dark.ico');
  }

  /* ✅ 2. סידור מבנה הבית במובייל עם כיוון אחיד */
  .mobile-header .home-group {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .mobile-header .home-link {
    order: 2;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mobile-header .logo-text {
    order: 3;
    font-size: 16px;
    font-weight: bold;
  }

  html[lang="he"] .mobile-header .home-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  html[lang="en"] .mobile-header .home-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .mobile-header .hamburger {
    margin-inline-start: auto;
  }

  /* ✅ תיקון: הסרת קו תחתון מכפתור העגלה במובייל */
  .cart-mobile-button {
    text-decoration: none !important;
  }

  .generate-product-page .input-row {
    flex-direction: column;
  }

  .generate-product-page .input-row {
    flex-direction: column;
  }

  /* This rule gives the input a fixed and proportional size */
  .generate-product-page .input-row input#productPromptInput {
    width: 90% !important;
    max-width: 420px !important; /* Safety limit */
    height: auto !important;     /* Resets any strange height */
    flex: none !important;       /* CRITICAL: Disables all flex stretching */
    box-sizing: border-box !important;
  }  

  .store-layout {
    flex-direction: column;
  }
  .filters-panel {
    width: 100%;
    position: static; /* מבטל את ההידבקות במובייל */
  }

  .product-details-container {
    flex-direction: column;
  }

}

/* ====================================================================================== */
/*  769x : Media Queries - התאמה ל Desktop גדולים  */
/* ====================================================================================== */
@media screen and (min-width: 769px) {
  .mobile-menu {
    display: none !important; /* ✅ דואג שלא תוצג בדסקטופ */
  }
  
  .signup-button {
    white-space: nowrap;
  }

/* ✅ תפריט עליון דסקטופ */  
  .home-wrapper-desktop {
    display: flex;
  }

  .home-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 6px;
    margin-bottom: 10px;
  }

  .home-link .logo {
    height: 36px;
    width: auto;
    margin-top: 9px;
  }

  .home-link .logo-text {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 40px;
  }

  body.dark-mode .home-link .logo-text {
    color: white;
  }

 /* ✅ 1. החלפת לוגו במצב כהה/בהיר בדסקטופ */
  .mobile-header .home-link .logo {
    content: url('/images/favicon-light.ico');
  }

  body.dark-mode .mobile-header .home-link .logo {
    content: url('/images/favicon-dark.ico');
  }

  .cart-mobile-button {
    display: none !important;
  }

}
  
/* ====================================================================================== */
/* 📱 900x : Media Queries - התאמה למסכים קטנים  */
/* ====================================================================================== */
/* === תצוגת מובייל בלבד === */
@media (max-width: 900px) {  

  .dashboard-table thead {
    display: none;
  }
  .dashboard-table tr {
    display: block;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 12px 0;
  }
  .dashboard-table td {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 12px;
    position: relative;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 1.03em;
  }
  .dashboard-table td:last-child {
    border-bottom: none;
  }
  .dashboard-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #2677c2;
    margin-left: 10px;
    min-width: 90px;
    display: inline-block;
    direction: rtl;
  }

  .product-card {
      flex-basis: calc(50% - 24px); /* 2 בשורה בטאבלטים */
  }

  html[lang="en"] .dashboard-table td::before {
    margin-left: 0;
    margin-right: 10px; /* מוסיף רווח מימין לתווית באנגלית */
  }

  body.dark-mode .dashboard-table td .readonly-field {
      /* This ensures the date field is transparent in dark mode */
      background-color: transparent;
  }

  body.dark-mode .dashboard-table td .readonly-field {
      background-color: #2a2a2a !important; /* The same color as inputs */
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #555 !important;
  }
  body.dark-mode .dashboard-table td {
      background-color: #1e1e1e !important; /* צבע רקע כהה */
      border-color: #333 !important; /* צבע גבול כהה */
  }

  body.dark-mode .dashboard-table tr:last-child td {
      border-bottom-color: #333 !important; /* גבול תחתון לכרטיסייה האחרונה */
  }    
    
  body.dark-mode .dashboard-table tr {
     background-color: #1e1e1e !important;
     border: 1px solid #333 !important;
  }

  /* 1. התיקון החדש: הופך את רקע הטבלה לשקוף במצב כהה */
  body.dark-mode table#ordersTable.dashboard-table {
    background-color: transparent !important;
  }

  /* 2. קובע את צבע הרקע של כל "כרטיס" (שורה) */
  body.dark-mode #ordersTable tr {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
  }

  /* 3. קובע את צבע הרקע והטקסט של כל "שדה" בתוך הכרטיס (תא) */
  body.dark-mode #ordersTable td {
    background-color: transparent !important;
    border-bottom: 1px solid #3a3a3a !important;
    color: #f0f0f0 !important;
  }

  /* 4. צבע התווית (למשל "מספר הזמנה") */
  body.dark-mode #ordersTable td::before {
    color: #8ab4f8 !important;
  }

  /* 5. מבטל את קו ההפרדה התחתון בשדה האחרון בכרטיס */
  body.dark-mode #ordersTable td:last-child {
    border-bottom: none !important;
  }
  
}

/* =================================================================================== */
/*  901x : Media Queries - התאמה רק למסכים גדולים  */
/* =================================================================================== */
/* === תצוגת דסקטופ בלבד === */
@media screen and (min-width: 901px) {
  td[data-label="טלפון"] input,
  td[data-label="Phone"] input {
    max-width: 120px;
    width: 80%;
  }
  
  .styled-users-table td:last-child .user-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch buttons to full width of the cell */
    gap: 6px;
  }

  /* נותן עיצוב אחיד לכל הכפתורים והקישורים בתוכו */
  .styled-users-table .user-actions > button,
  .styled-users-table .user-actions > a.reset-password-btn,
  .styled-users-table .user-actions > a {
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    line-height: 1.5; /* מוודא גובה טקסט אחיד */
  }
}  

/* התאמה למסכי טאבלט (2 בשורה) */
@media (max-width: 960px) {
    .product-card {
        max-width: calc(50% - 20px);
    }
}