* {
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
/* --- 1. שכבת הרקע --- */
.popup-overlay {
  position: fixed;
  padding: 15px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.popup-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* --- 2. חלון קטן וממוקד --- */
.popup-container {
  width: 100%;
  max-width: 420px; /* צר יותר למראה נקי */
  max-height: 90vh;
  overflow-y: auto; /* מוסיף גלילה פנימית אם התוכן ארוך מדי */
  padding: 15px 15px;
  margin: 0;
  background: #fff;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  direction: rtl;
  -webkit-overflow-scrolling: touch; /* גלילה חלקה באייפון */
}

/* --- 3. כפתור סגירה X --- */
.close-btn {
  /* מידות וצורה */
  width: 32px;
  height: 32px;
  border-radius: 50%;

  /* תצוגת ה-X במרכז */
  display: flex;
  align-items: center;
  justify-content: center;

  /* עיצוב ויזואלי */
  background-color: #7e7a7a; /* צבע רקע העיגול */
  color: #fff; /* צבע ה-X */
  border: none;
  cursor: pointer;
  font-size: 24px; /* גודל ה-X */
  font-family: Arial, sans-serif;
  line-height: 0; /* מונע מה-X לזוז למטה */

  /* מעבר חלק */
  transition: all 0.3s ease;
  outline: none;
}

/* אפקט במעבר עכבר */
.close-btn:hover {
  background-color: #c5a059;
  transform: scale(1.1); /* הגדלה קלה */
}

/* --- 4. כותרת עליונה קומפקטית --- */
.popup-header {
  width: 100%;
  height: auto;
  border-radius: 7px 7px 7px 7px; /* פינות מעוגלות  */
  overflow: hidden; /* דואג שהתמונה לא תסתיר את הקימור */
  display: flex; /* אם תרצה לשים טקסט על התמונה בעתיד */
}

.popup-header img {
  width: 100%;
  max-width: 100%;
  height: block;
  /*box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);*/
  border-radius: 10px;
}

/* --- 5. תוכן מרכזי --- */
.title-1 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #c5a059;
  margin: 0;
}
.title-2 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #1d527c;
  margin-top: 5px;
  margin: 0;
}
.title-3 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: #c5a059;
  margin-top: 5px;
  margin: 0;
}

.list {
  list-style-type: none; /* מבטל את הריבועים הרגילים */
  padding-right: 0; /* מאפס ריווח (חשוב ב-RTL) */
  margin: 5px 0;
}

.list li {
  color: #1d527c;
  font-size: 1.2rem;
  font-weight: 400;
  position: relative;
  padding-right: 20px; /* יוצר מקום לריבוע בצד ימין */
  list-style: none;
  margin-bottom: 5px;
}

.list li::before {
  content: ""; /* חובה כדי שהאלמנט יופיע */
  position: absolute;
  right: 0; /* מצמיד לימין בגלל ה-RTL */
  top: 50%;
  transform: translateY(-50%); /* ממרכז אנכית מול הטקסט */

  /* עיצוב הריבוע */
  width: 10px;
  height: 10px;
  background-color: #c5a059; /* הצבע שרצית */
  border-radius: 2px; /* פינות מעוגלות קצת למראה מודרני */
}

/* --- 6. טופס צור קשר קטן --- */
.contact-us {
  padding: 10px;
  background-color: rgba(150, 154, 161, 0.5);
  border-radius: 15px;
}

.contact-title {
  text-align: center;
  font-size: 1rem;
}
.contact-title h1 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
}

/* עיצוב ה-Placeholder (הטקסט הרמז) */
#popup-form input::placeholder,
#popup-form textarea::placeholder {
  color: #9ca3a8; /* אפור כהה וברור לקריאה */
  opacity: 1; /* ביטול שקיפות בדפדפנים כמו פיירפוקס */
  font-size: 1.2rem; /* הגדלה קלה לטובת קהל מבוגר */
  font-weight: 400;
  margin: 0;
}

/* עיצוב השדות עצמם לשיפור חווית המשתמש */
#popup-form input,
#popup-form textarea {
  width: 100%; /* פריסה מלאה */
  padding: 8px; /* ריווח פנימי שנותן אוויר לטקסט */
  margin-bottom: 10px; /* רווח בין שדה לשדה */
  border: 1px solid #ccc;
  border-radius: 4px; /* עיגול פינות עדין */
  box-sizing: border-box; /* למניעת חריגה מהשוליים */
  text-align: right; /* יישור לימין עבור עברית */
}

/* עיצוב הכפתור החדש שלך */
#popup-form .btn {
  width: 100%;
  padding: 15px;
  background-color: #1a4a73; /* הצבע הכחול מהלוגו */
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.3s;
}

#popup-form .btn:hover {
  background-color: #042440; /* אפקט מעבר עכבר */
  color: #c5a059;
}
/*סיום עיצוב קוביית השליחה*/

/* --- התאמות ספציפיות למסכים קטנים מאוד --- */
@media (max-width: 480px) {
  .popup-container {
    padding: 10px;
    width: 100%;
  }
  .popup-header {
    margin: 0;
    padding: 0;
  }
  .popup-header img {
    margin: 0;
    padding: 0;
  }

  .contact-us {
    padding: 10px;
    width: 100%;
  }
  .contact-title {
    font-size: 1rem;
  }
  .contact-title h1 {
    font-size: 1rem;
    font-weight: 300;
  }
  .title-1 {
    font-size: 1.3rem;
    margin: 0;
  }
  .title-2 {
    font-size: 1.3rem;
    margin: 0;
  }
  .title-3 {
    font-size: 1.3rem;
    margin: 0;
  }
  .list li::before {
    display: none; /* מבטל את הריבוע */
  }

  .list li {
    font-size: 1rem;
    padding-right: 0; /* אם היה רווח לצד הריבוע, כדאי לאפס אותו במובייל */
    list-style: none; /* מוודא שגם הנקודות המקוריות לא מופיעות */
  }
  #popup-form input::placeholder,
  #popup-form textarea::placeholder {
    font-size: 1rem;
  }
  #popup-form .btn {
    font-size: 1rem;
    padding: 7px;
  }
}