/* ==========================================
   📦 base.css – מחסן עיצובים מקיף ומודולרי
   ========================================== */

/* ==========================================
   🎨 CSS VARIABLES - משתנים גלובליים
   ========================================== */

:root {
  /* 🎨 צבעים – בסיסיים */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-light: #f5f5f5;
  --color-gray-medium: #cccccc;
  --color-gray-dark: #666666;
  --color-blue: #6babba;

  /* 🎨 צבעים – ברנדינג */
  --color-gold-light: #FFD700;
  --color-gold-medium: #b39f7f;
  --color-gold-dark: #B8860B;
  --color-blue-light: #87CEEB;
  --color-blue-medium: #4682B4;
  --color-blue-dark: #2F4F4F;
  --color-turquoise-light: #40E0D0;
  --color-turquoise-medium: #20B2AA;
  --color-turquoise-dark: #008B8B;
  --color-green-light: #90EE90;
  --color-green-medium: #32CD32;
  --color-green-dark: #228B22;
  --color-purple-light: #DDA0DD;
  --color-purple-medium: #9370DB;
  --color-purple-dark: #663399;
  --color-pink-light: #FFB6C1;
  --color-pink-medium: #FF69B4;
  --color-pink-dark: #C71585;

  /* 🔠 טיפוגרפיה */
  --font-family-primary: "Assistant", sans-serif;
  --font-family-secondary: "Arial", sans-serif;

  --font-family-elegant: "Georgia", serif;
  --font-family-modern: "Open Sans", sans-serif;

  --font-family-handwritten: "Patrick Hand", cursive;
  --font-family-condensed: "Roboto Condensed", sans-serif;

  --font-family-display: "Playfair Display", serif;
  --font-family-rounded: "Nunito", sans-serif;

  --font-size-tiny: 11px;
  --font-size-small: 13px;
  --font-size-medium: 14px;
  --font-size-large: 16px;
  --font-size-xl: 18px;
  --font-size-title-small: 20px;
  --font-size-title-medium: 24px;
  --font-size-title-large: 28px;
  --font-size-title-XL: 32px;
  --font-size-title-XLL: 40px;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* 📏 ריווחים */
  --spacing-tiny: 5px;
  --spacing-small: 10px;
  --spacing-medium: 15px;
  --spacing-large: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;
  --spacing-icon-gap: 20px;
  --spacing-icon-gap-large: 30px;

  /* 🟢 רדיוסים */
  --radius-small: 6px;
  --radius-medium: 12px;
  --radius-large: 20px;
  --radius-extra-large: 30px;
  --radius-circle: 50%;


  /* 🌑 צללים */
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow-light: 0 0 15px rgba(255, 255, 255, 0.3);
  --shadow-glow-colored: 0 0 20px rgba(64, 224, 208, 0.4);


  /* 🎨 גרדיאנטים */
  --gradient-white: linear-gradient(135deg, #ffffff, #f5f5f5);
  --gradient-gold: linear-gradient(135deg, #FFD700, #B8860B);
  --gradient-blue: linear-gradient(135deg, #87CEEB, #2F4F4F);
  --gradient-turquoise: linear-gradient(135deg, #40E0D0, #008B8B);
  --gradient-multi: linear-gradient(45deg, #33cc99, #00aaff, #33cc99);

  --quote-font-family: var(--font-family-elegant, serif);


}

/* ===== base.css ===== */
/* ברירת מחדל ל-strong עם אפשרות דריסה נקודתית */
:where(body) strong {
  font-weight: var(--strong-font-weight, var(--font-weight-bold, 700)) !important;
}


strong.fw-300 { --strong-font-weight: 300; }
strong.fw-400 { --strong-font-weight: 400; }
strong.fw-500 { --strong-font-weight: 500; }
strong.fw-600 { --strong-font-weight: 600; }
strong.fw-700 { --strong-font-weight: 700; }
strong.fw-800 { --strong-font-weight: 800; }
strong.fw-900 { --strong-font-weight: 900; }
/* חלופה מבוססת data-attr אם מעדיף בלי קלאסים */
strong[data-weight="300"]{ --strong-font-weight: 300; }
strong[data-weight="400"]{ --strong-font-weight: 400; }
strong[data-weight="500"]{ --strong-font-weight: 500; }
strong[data-weight="600"]{ --strong-font-weight: 600; }
strong[data-weight="700"]{ --strong-font-weight: 700; }
strong[data-weight="800"]{ --strong-font-weight: 800; }
strong[data-weight="900"]{ --strong-font-weight: 900; }

/* ===== תיקון בסיס להדגשות ===== */
:where(body) strong {
  font-weight: var(--strong-font-weight, var(--font-weight-bold, 700)) !important;
  font-size: inherit !important;   /* לא משנה גודל */
  line-height: inherit !important; /* לא משנה ריווח שורות */
  display: inline !important;      /* לא ירד שורה */
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== פס תחתון גנרי ===== */
.underline {
  display: inline-block;
  border-bottom: var(--underline-width, 2px) solid var(--underline-color, currentColor);
  padding-bottom: var(--underline-gap, 2px); /* רווח בין הטקסט לפס */
}

/* style-CLIENT.css — שליטה בגרשיים למעלה */
/* ===== ציטוט פתיחה (גרשיים) ===== */
.card .about-section strong.quote-symbol {
  display: block !important;              
  font-size: var(--quote-size, 70px) !important;  /* גודל ברירת מחדל */
  line-height: var(--quote-line-height, 1) !important;
  font-weight: var(--quote-weight, 700) !important;
  margin: var(--quote-margin, 0 0 -10px 0) !important;
  text-align: var(--quote-align, center) !important;
  color: var(--quote-color, var(--main-title-color, #000)) !important;
  font-family: var(--quote-font-family, var(--global-font-family)) !important;
}





* {
  box-sizing: border-box;
}

body {
  margin: var(--body-margin, 0);
  padding: var(--body-padding, 0);
  min-height: var(--body-min-height, 100vh);
  overflow-y: var(--body-overflow-y, auto);
  font-family: var(--body-font-family, var(--global-font-family));
  font-size: var(--body-font-size-medium, var(--font-size-medium));
  line-height: var(--body-line-height, 1.4);
  direction: var(--body-direction, rtl);
  text-align: var(--body-text-align, center);
}

img {
  max-width: var(--img-max-width, 100%);
  height: var(--img-height, auto);
  display: var(--img-display, block);
}

/* ==========================================
   📱 CARD LAYOUT - פריסת כרטיס
   ========================================== */

.card {
  background-color: var(--card-bg, var(--color-gray-light));
  border-radius: var(--card-radius, var(--radius-large));
  box-shadow: var(--card-box-shadow, var(--shadow-strong));
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--card-padding, 16px);
}
.card .gold-line {
  width: var(--gold-line-width, 100%);
  height: var(--gold-line-height, 3px);
  background: var(--gold-line-bg, var(--main-title-color));
  margin-left: calc(-1 * var(--card-padding, 0px));
  margin-right: calc(-1 * var(--card-padding, 0px));
  margin-top: var(--gold-line-margin, 20px);
  margin-bottom: var(--gold-line-margin, 20px);
  padding: var(--gold-line-padding, 0px);
  position: var(--gold-line-position, relative);
  top: var(--gold-line-top, -20px);
  bottom: var(--gold-line-bottom, 0);
  left: var(--gold-line-left, 0);
  right: var(--gold-line-right, 0);
  border-radius: var(--gold-line-border-radius, 0);
  box-shadow: var(--gold-line-box-shadow, none);
  display: var(--gold-line-display, block);
}

@media (min-width: 769px) {
  .card {
    max-width: 440px;
  }
}


/* ==========================================
   🎯 HEADER SECTION - אזור עליון/כותרת
   ========================================== */

.header-top,
.top-section {
  width: var(--header-width, 100%);
  height: var(--header-height, auto);
  margin: var(--header-margin, 0);
  padding: var(--header-padding, 0);
  border-radius: var(--header-radius, 0);
  overflow: visible;
}

.header-top img {
  width: var(--header-img-width, 100%);
  height: var(--header-img-height, 100%);
  object-fit: var(--header-img-fit, contain);
  border-radius: var(--header-img-radius, 0);
  display: block;
  margin-left: var(--header-img-offset-x, 0); 
  background-color: var(--header-img-bg, var(--color-white));
}

/* ==========================================
   🖼️ PROFILE IMAGE - תמונת פרופיל
   ========================================== */

.profile-img {
  display: block;
  position: relative;
  z-index: 10;
  width: var(--profile-img-size, 140px);
  height: var(--profile-img-size, 140px);
  margin: var(--profile-img-margin, -30px auto 0 auto);
  object-fit: cover;
  border-radius: var(--profile-img-radius, var(--radius-circle));
  border-width: var(--profile-img-border-width, 3px);
  border-style: var(--profile-img-border-style, solid);
  border-color: var(--main-background-color, var(--color-white));
  box-shadow: var(--profile-img-box-shadow, var(--shadow-soft));
}

.logo-img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* ==========================================
   👤 NAME & ROLE - שם ותפקיד
   ========================================== */

/* base.css */
.name-role .main-title {
  text-shadow: var(--name-role-shadow, 3px 3px 6px rgba(0, 0, 0, 0.25));
  text-align: var(--name-role-text-align, center);
  margin: var(--name-role-margin, 0 0 var(--spacing-small) 0);
  padding: var(--name-role-padding, 0);
  margin-top: var(--name-role-margin-top, 10px);
  font-family: var(--name-role-font-family, var(--global-font-family));
  color: var(--name-role-color, var(--color-gray-dark));
font-size: var(--name-role-font-size, var(--font-size-title-XLL));
  font-weight: var(--name-role-font-weight, var(--font-weight-bold));
  line-height: var(--name-role-line-height, 1.1); /* ✅ ברירת מחדל חדשה */
}
/* ברירת מחדל לשורה השנייה */
.name-role .secondary-title {

  color: var(--secondary-title-color, var(--color-gray-dark));
  text-shadow: var(--secondary-title-shadow, 3px 3px 6px rgba(0, 0, 0, 0.25));
  font-size: var(--secondary-title-font-size, 20px);
  font-weight: var(--secondary-title-font-weight, 600);
  margin-top: var(--secondary-title-margin-top, 4px);
  line-height: var(--secondary-title-line-height, 1.2);
}



/* ==========================================
   📖 TYPOGRAPHY - טיפוגרפיה
   ========================================== */

.main-title {
  font-family: var(--main-title-font-family, var(--global-font-family));
  font-size: var(--main-title-font-size, var(--title-font-size));
  font-weight: var(--main-title-font-weight, var(--font-weight-bold));
  color: var(--main-title-bg, var(--main-title-color));
  margin-bottom: var(--main-title-margin-bottom, var(--spacing-tiny));
  margin-top: var(--main-title-margin-top, var(--spacing-xxl));
}


strong {
  font-size: var(--strong-font-size, var(--font-size-large));
  font-weight: var(--strong-font-weight, var(--font-weight-bold));
  text-align: var(--about-strong-text-align, center);
}

/* ==========================================
   📄 ABOUT SECTION - אזור אודות (base.css)
   ========================================== */
.about-section [data-field="aboutLine1"] {
  font-size: var(--about-line1-font-size, 18px);
  font-weight: var(--about-line1-font-weight, 600);
  margin-bottom: var(--about-line1-margin-bottom, 8px);
  line-height: var(--about-line1-line-height, 1.4);
}

/* מבטל דריסת strong בתוך aboutLine1 (כולל יישור) */
.about-section [data-field="aboutLine1"] strong {
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
}
.about-section [data-field="aboutLine2"] {
  font-size: var(--about-line2-font-size, 18px);
  font-weight: var(--about-line2-font-weight, 600);
  margin-bottom: var(--about-line2-margin-bottom, 8px);
  line-height: var(--about-line2-line-height, 1.4);
}

/* מבטל דריסת strong בתוך aboutLine2 (כולל יישור) */
.about-section [data-field="aboutLine2"] strong {
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
}



.about-section {
  padding: var(--about-section-padding, 10px);
  background-color: var(--about-section-bg, var(--main-background-color));
  text-align: var(--about-text-align, center);
  border-radius: var(--about-radius, var(--radius-large));
}
.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}



.about-section p {
  line-height: var(--about-text-line-height, 1.6);
  max-width: var(--about-text-max-width, 800px); /* שומר על טור קריא */
  margin: 0 auto; /* ✅ מרכז את הפסקאות */
  padding-inline: var(--about-text-padding-inline, 12px); /* ✅ שליטה בריווח מהצדדים */

  color: var(--about-text-color, var(--about-section-p-text-color));
  font-size: var(--about-text-font-size, 16px);
  text-align: center; /* ✅ יישור אמצע */
  direction: rtl;
  font-family: var(--about-text-font-family, var(--global-font-family));
}
@media (max-width: 480px) {
  .about-section p {
    --about-text-padding-inline: 8px;
  }
}



.about-section p strong {
  display: block;
  font-size: var(--about-strong-font-size, 20px);
  font-weight: var(--about-strong-font-weight, var(--font-weight-bold));
  margin-bottom: var(--about-strong-margin-bottom, 8px);
  font-family: var(--about-strong-font-family,var(--global-font-family));
  color: var(--quote-font-color, var(--color-black));
  text-align: var(--about-strong-text-align, center);
}
.scroll-to-contact-btn {
  display: inline-block;
  font-family: var(--scroll-btn-font-family, var(--global-font-family));
  background-color: var(--scroll-btn-bg, var(--btn-border-bg-color));
  color: var(--scroll-btn-color, var(--color-white));
  font-size: var(--scroll-btn-font-size, 16px);
  padding: var(--scroll-btn-padding, 10px 20px);
  border-radius: var(--scroll-btn-radius, 8px);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: var(--scroll-btn-margin-top, 20px);
  margin-bottom: var(--scroll-btn-margin-bottom, 20px); /* ריווח תחתון */
}

.scroll-to-contact-btn:hover,
.scroll-to-contact-btn:focus {
  background-color: var(--scroll-btn-hover-bg, var(--contact-btn-hover-bg));
  outline: none;
}



.about-section p strong.quote-symbol {
  font-family: var(--quote-font-family, var(--global-font-family));
  font-size: var(--quote-font-size, 50px);
  font-style: italic;
  color: var(--quote-font-color, var(--color-black));
  line-height: 1;
  display: block;
  margin-bottom: var(--quote-margin-bottom, 0px);
}/* base.css – שכבת בסיס */
.about-decor{
  width: var(--decor-width, 100%);
  margin: var(--decor-margin, 16px auto 8px);
}
.about-decor svg{
  display:block;
  width:100%;
  height: var(--about-decor-height, 16px);
  color: var(--about-decor-color,var(--about-bg-color));
}
.about-decor .wave-stroke{
  fill: none;
  stroke: currentColor;
  stroke-width: var(--decor-stroke-width, 4);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* =========================
   אזור אודות – עיצוב בסיסי
   ========================= */




.about-highlight-text {
  background-color: var(--about-highlight-bg, rgba(0, 0, 0, 0.1));
  color: var(--about-highlight-color, var(--color-white));
  padding: var(--about-highlight-padding, var(--spacing-tiny) var(--spacing-small));
  border-radius: var(--about-highlight-radius, var(--radius-small));
}

/* ==========================================
   📺 VIDEO SECTION - אזור וידאו
   ========================================== */

.video-wrapper {
  position: relative;
  padding-bottom: var(--video-aspect-ratio, 56.25%);
  height: 0;
  overflow: hidden;
  max-width: var(--video-max-width, 100%);
  background: var(--video-bg, --color-white);
  margin-top: var(--video-margin-top, var(--spacing-xl));
  box-shadow: var(--video-box-shadow, var(--shadow-medium));
  border-radius: var(--video-radius, var(--radius-large));
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--video-width, 100%);
  height: var(--video-height, 100%);
  object-fit: var(--video-object-fit, contain);
  border-radius: var(--video-radius, 0);
  background: var(--video-bg, transparent);
}

.video-title {
  margin-bottom: var(--video-title-margin-bottom, 12px);
  color: var(--video-title-color, var(--main-title-color));
  font-size: var(--video-title-font-size, var(--title-font-size));
  text-align: var(--video-title-align, center);
}
/* ==========================================
   ⭐ RECOMMENDATIONS SECTION - המלצות
   ========================================== */

.recommendations-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--recommendations-section-margin-top, 40px);
  padding: var(--recommendations-section-padding, var(--spacing-medium));
  background-color: var(--recommendations-section-bg, var(--main-background-color));
  border-radius: var(--recommendations-section-radius, var(--radius-large));
  font-family: var(--recommend-font-family, var(--global-font-family));
}

.recommendations-section .recommendations-swiper,
.recommendations-section .swiper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  direction: rtl;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: visible;
  overflow-y: visible;
  border-radius: var(--recommend-swiper-radius);
  background: var(--recommend-swiper-bg);
  padding: var(--recommend-swiper-padding);
}

.recommendations-section .swiper-slide {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  min-height: var(--recommend-slide-min-height, auto);
  max-height: var(--recommend-slide-max-height, none);
  padding: var(--recommend-slide-padding, var(--spacing-medium));
  box-sizing: border-box;
}


.recommendations-section .elementor-testimonial {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--recommend-testimonial-radius, var(--radius-large));
  background-color: var(--recommend-testimonial-bg, var(--color-white));
  border: var(--recommend-testimonial-border, none);
  padding: var(--recommend-testimonial-padding, var(--spacing-large));
  margin-top: var(--recommend-testimonial-margin-top, 0);
  margin-bottom: var(--recommend-testimonial-gap, var(--spacing-large));
  min-height: var(--recommend-testimonial-min-height, auto);
  max-height: var(--recommend-testimonial-max-height, none);
  overflow: hidden;
}

.recommendations-section .elementor-testimonial__name {
  color: var(--recommend-name-color, var(--color-black));
  font-size: var(--recommend-name-font-size, var(--font-size-title-small));
  font-weight: var(--recommend-name-font-weight, 900);
  margin-bottom: var(--spacing-tiny, 5px);
}

.recommendations-section .elementor-testimonial__title {
  color: var(--recommend-title-color, var(--main-title-color));
  font-size: var(--recommend-item-title-font-size, var(--font-size-large)); /* טייטל בתוך המלצה */
  font-weight: var(--recommend-title-font-weight,100);
  margin-bottom: var(--spacing-small, 10px);
}

.recommendations-section .main-title {
  font-size: var(--recommend-title-font-size, var(--title-font-size));
  color: var(--recommendations-main-title-color, var(--main-title-color));
}



.recommendations-section .elementor-testimonial__content,
.recommendations-section .elementor-testimonial__text {
  color: var(--recommend-content-color, var(--color-black));
  font-size: var(--recommend-content-font-size, var(--font-size-xl));
  line-height: var(--recommend-content-line-height, 1.5);
  font-weight: var(--recommend-text-font-weight, 500);
  margin-bottom: var(--spacing-medium, 15px);
}

.elementor-testimonial__content::before {
  content: var(--testimonial-icon-content, "★"); /* ברירת מחדל - כוכב טקסט */
  font-family: var(--testimonial-icon-font-family, inherit);
  font-weight: var(--testimonial-icon-weight, 700);
  display: inline-block;
  color: var(--testimonial-icon-color, var(--color-gold-light)); /* שליטה בצבע */
  font-size: var(--testimonial-icon-size, var(--font-size-large));
  margin-left: 4px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Pagination */
.recommendations-section .swiper-pagination {
  position: relative;
  margin-top: var(--recommend-pagination-margin, 12px);
  text-align: center;
}

.recommendations-section .swiper-pagination-bullet {
  width: var(--recommend-bullet-size, 8px);
  height: var(--recommend-bullet-size, 8px);
  background: var(--recommend-bullet-bg, var(--color-gray-dark));
  border-radius: 50%;
  margin: 0 4px;
  transition: opacity 0.3s ease;
}

/* ==========================================
   🔘 BUTTONS - כפתורים
   ========================================== */

.btn {
  display: var(--btn-display, inline-block);
  padding: var(--btn-padding, var(--spacing-small));
  border: none;
  border-radius: var(--btn-radius, var(--radius-medium));
  font-family: var(--main-title-font-family, var(--global-font-family));
  font-size: var(--btn-font-size, var(--font-size-medium));
  font-weight: var(--btn-font-weight, var(--font-weight-bold));
  text-decoration: var(--btn-text-decoration, none);
  text-align: center;
  cursor: pointer;
  transition: var(--btn-transition, background-color 0.3s ease, transform 0.2s ease);
  margin: var(--btn-margin, var(--spacing-small) auto);
  background-color: var(--btn-bg, var(--btn-border-bg-color));
  color: var(--btn-text-color-filled, var(--btn-scl-text-color-filled));
}

#vcardDownload.btn {
  display: inline-block;
  width: var(--vcard-btn-width, 100%); 
  max-width: var(--vcard-btn-max-width, 350px); 
  margin-bottom: var(--vcard-btn-margin-bottom, 25px);
}


/* Container */
.icon-grid {
  display: var(--icon-grid-display, grid);
  grid-template-columns: var(--icon-grid-template, repeat(3, 1fr));
  gap: var(--icon-grid-gap, 16px);
  margin: var(--icon-grid-margin, 24px 0);
  justify-items: var(--icon-grid-justify-items, center);
  background-color: var(--icon-grid-bg, transparent);
  padding: var(--icon-grid-padding, 0);
  border-radius: var(--icon-grid-radius, 0);
  box-shadow: var(--icon-grid-shadow, none);
}

/* Item */
.icon-grid .icon-item {
  display: var(--icon-item-display, inline-flex);
  flex-direction: var(--icon-item-direction, column);
  align-items: var(--icon-item-align, center);
  justify-content: var(--icon-item-justify, flex-start);
  min-width: var(--icon-item-min-width, 0); /* מונע גלישה */
}

/* Button/capsule */
.icon-grid .icon-item > a {
  display: var(--icon-button-display, inline-flex);
  align-items: var(--icon-button-align, center);
  justify-content: var(--icon-button-justify, center);
  width: var(--icon-button-size, 70px);
  height: var(--icon-button-size, 70px);
  border-radius: var(--icon-button-radius, 50%);
  background: var(--icon-button-bg, #f2f2f2); /* אפור חלש */
  border: var(--icon-button-border, 0);
  box-shadow: var(--icon-button-shadow, none);
  padding: var(--icon-button-padding, 0);
  color: var(--icon-color, #007bff); /* כחול כברירת מחדל */
  text-decoration: var(--icon-button-text-decoration, none);
  transition: var(--icon-button-transition, transform .1s ease);
  outline: var(--icon-button-outline, none);
}

/* Hover effect - Flash animation */
@keyframes icon-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.icon-grid .icon-item > a:hover {
  animation: var(--icon-hover-animation, icon-flash 0.6s ease-in-out);
}

/* Focus + Active */
.icon-grid .icon-item > a:focus-visible {
  box-shadow: var(--icon-focus-ring, 0 0 0 3px rgba(14,165,233,.35));
}
.icon-grid .icon-item > a:active {
  transform: var(--icon-active-transform, scale(.98));
}

/* ICON fills the background */
.icon-grid .icon-item .icon-svg,
.icon-grid .icon-item img {
  width: var(--icon-svg-size, 64px);
  height: var(--icon-svg-size, 64px);
  display: var(--icon-svg-display, inline-block);
  object-fit: var(--icon-object-fit, contain);
}

/* Force SVG to follow currentColor */
.icon-grid .icon-item .icon-svg,
.icon-grid .icon-item .icon-svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Label */
.icon-grid .icon-item > span {
  display: var(--icon-text-display, block);
  margin-top: var(--icon-text-margin-top, 6px);
  font-size: var(--icon-text-font-size, 14px);
  font-weight: var(--icon-text-font-weight, 500);
  color: var(--icon-text-color, #273f74);
  text-align: var(--icon-item-text-align, center);
  line-height: var(--icon-text-line-height, 1.3);
  letter-spacing: var(--icon-text-letter-spacing, 0);
  text-transform: var(--icon-text-transform, none);
  white-space: nowrap;
}

/* Per-icon optional overrides */
.icon-item[data-switch="phone"]        > a { color: var(--icon-phone-color, var(--icon-color, #007bff)); }
.icon-item[data-switch="sendWhatsapp"] > a { color: var(--icon-whatsapp-color, var(--icon-color, #007bff)); }
.icon-item[data-switch="sendEmail"]    > a { color: var(--icon-email-color, var(--icon-color, #007bff)); }
.icon-item[data-switch="facebookLink"] > a { color: var(--icon-facebook-color, var(--icon-color, #007bff)); }
.icon-item[data-switch="waze"]         > a { color: var(--icon-waze-color, var(--icon-color, #007bff)); }
.icon-item[data-switch="instagram"]    > a { color: var(--icon-instagram-color, var(--icon-color, #007bff)); }
.icon-item[data-switch="tiktok"]       > a { color: var(--icon-tiktok-color, var(--icon-color, #007bff)); }  /* ✅ חדש */


/* style.css — יישור אנכי של סמל טיקטוק בלבד */
.icon-item[data-switch="tiktok"] .tiktok-mark{
  transform: translateY(-14px);   /* העלה/הורד לפי צורך */
  transform-box: fill-box;
  transform-origin: center;
}




/* Mobile */
@media (max-width:390px){
  :root{
    --icon-button-size: 60px;
    --icon-svg-size: 46px;
  }
}
/* ==========================================
   🎯 SHARE SECTION – בסיס נקי (base.css)
   ========================================== */

/* קונטיינר – מרווח בין הריבועים */
.share-section .share-buttons {
  display: var(--s-container-display, flex);
  flex-wrap: var(--s-container-wrap, wrap);
  justify-content: var(--s-container-justify, center);
  gap: var(--s-gap, 10px);
  margin: var(--s-container-margin, 24px 0);
}

/* קפסולה */
.share-section .share-buttons a {
  display: var(--s-display, inline-flex);
  align-items: var(--s-align, center);
  justify-content: var(--s-justify, center);
  width: var(--s-size, 50px);
  height: var(--s-size, 50px);
  border-radius: var(--s-radius, 12px);
  background: var(--s-bg, #eef0f2);         /* רקע */
  color: var(--s-color, #528095);           /* צבע אייקון */
  border: var(--s-border, 2px solid currentColor);
  box-shadow: var(--s-shadow, 0 2px 6px rgba(0,0,0,.12));
  text-decoration: var(--s-text-decoration, none);
  outline: var(--s-outline, 0);
  transition: var(--s-transition, transform .1s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease);
}

/* אייקון SVG פנימי – מקבל צבע מ-currentColor */
.share-section .share-buttons a svg {
  width: var(--s-icon, 60px);
  height: var(--s-icon, 60px);
  display: var(--s-icon-display, block);
  fill: var(--s-icon-fill, currentColor);
  stroke: var(--s-icon-stroke, currentColor);
}

/* ריחוף/פוקוס */
.share-section .share-buttons a:hover {
  transform: var(--share-hover-transform, scale(1.06));
  background: var(--s-hover-bg, #8ce56e);
  color: var(--s-hover-color, #ffffff);
}

.share-section .share-buttons a:focus-visible {
  box-shadow: var(--share-focus-ring, 0 0 0 3px rgba(31,79,255,.35));
}
/* מובייל */
@media (max-width: 390px) {
  .share-section .share-buttons a {
    width: var(--s-size-m, 60px);
    height: var(--s-size-m, 60px);
  }
  .share-section .share-buttons a svg {
    width: var(--s-icon-m, 30px);
    height: var(--s-icon-m, 30px);
  }
}

/* ==========================================
   📝 CONTACT FORM - טופס יצירת קשר
   ========================================== */

.contact-form {
  max-width: var(--contact-form-max-width, 600px);
  margin: var(--contact-form-margin, var(--spacing-xxl) auto);
  padding: var(--contact-form-padding, var(--spacing-xl));
  background-color: var(--contact-form-bg, var(--color-gray-light));
  border-radius: var(--contact-form-radius, var(--radius-large));
  box-shadow: var(--contact-form-shadow, var(--shadow-soft));
  text-align: var(--contact-form-text-align, right);

}

.contact-form label {
  display: block;
  margin-bottom: var(--contact-label-margin-bottom, var(--spacing-small));
  font-weight: var(--contact-label-font-weight, var(--font-weight-bold));
  color: var(--contact-label-color, var(--main-title-color));
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--contact-input-padding, var(--spacing-medium));
  margin-bottom: var(--contact-input-margin-bottom, var(--spacing-medium));
  border: 2px solid var(--contact-btn-bg, var(--btn-border-bg-color));
  border-radius: var(--contact-input-radius, var(--radius-medium));
  font-family: var(--contact-input-font-family, var(--global-font-family));
  font-size: var(--contact-input-font-size, var(--font-size-medium));
  box-sizing: border-box;
  text-align: var(--contact-input-text-align, right);
  direction: rtl;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--contact-btn-bg, var(--btn-border-bg-color));
  box-shadow: 0 0 4px var(--contact-btn-bg, var(--btn-border-bg-color));
  outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  text-align: right;
  direction: rtl;
  color: var(--contact-placeholder-color, var(--color-gray-dark));
  opacity: 1;
}

.contact-form textarea {
  resize: vertical;
  min-height: var(--contact-textarea-min-height, 120px);
}

.contact-form button {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--contact-btn-padding, var(--spacing-medium));
  background-color: var(--contact-btn-bg, var(--btn-border-bg-color));
  color: var(--contact-btn-color, var(--btn-scl-text-color-filled));
  border: none;
  border-radius: var(--contact-btn-radius, var(--radius-large));
  font-size: var(--contact-btn-font-size, var(--font-size-medium));
  font-weight: var(--contact-btn-font-weight, var(--font-weight-bold));
  text-align: center;
  cursor: pointer;
  margin-top: var(--contact-btn-margin-top, var(--spacing-medium));
  box-sizing: border-box;
}


/* מצב ריחוף – כפתורים כלליים */
.btn:hover {
  background-color: var(--btn-hover-bg, var(--scroll-btn-hover-bg, var(--contact-btn-hover-bg)));
  color: var(--btn-hover-color, var(--btn-contact-hover-color, var(--btn-hover-text-color-filled, var(--color-white))));
  transform: var(--btn-hover-transform, var(--btn-transform-hover, translateY(-2px)));
}

/* מצב ריחוף – כפתורי יצירת קשר */
.btn-contact:hover {
  background-color: var(--btn-hover-bg, var(--scroll-btn-hover-bg, var(--contact-btn-hover-bg)));
  color: var(--btn-hover-color, var(--btn-contact-hover-color, var(--btn-hover-text-color-filled, var(--color-white))));
  transform: var(--btn-hover-transform, var(--btn-transform-hover, translateY(-2px)));
}

/* מצב ריחוף – כפתור שליחה בטופס */
.contact-form button:hover {
  background-color: var(--btn-hover-bg, var(--scroll-btn-hover-bg, var(--contact-btn-hover-bg)));
  color: var(--btn-hover-color, var(--btn-contact-hover-color, var(--btn-hover-text-color-filled, var(--color-white))));
  transform: var(--btn-hover-transform, var(--btn-transform-hover, translateY(-2px)));
}

/* ==========================================
   📝 ERROR STYLES - עיצובי שגיאות
   ========================================== */

textarea[aria-invalid="true"] {
  border: 2px solid red;
}

.error-message {
  color: red;
  font-size: 14px;
  margin-top: 4px;
}

/* ==========================================
   🔧 ACCORDION - אקורדיון
   ========================================== */

.elementor-toggle-title {
  font-size: var(--accordion-title-font-size, var(--font-size-small));
  font-weight: var(--accordion-title-font-weight, var(--font-weight-bold));
  color: var(--accordion-title-color, var(--color-black));
  font-family: var(--elementor-toggle-title-font-family, var(--global-font-family));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================
   📏 SEPARATORS - קווי הפרדה
   ========================================== */

.separator {
  display: block;
  width: var(--separator-width, 100%);
  height: var(--separator-height, 1px);
  background-color: var(--separator-color, var(--color-gray-medium));
  background: var(--separator-background, var(--separator-line-color, var(--color-gray-medium)));
  margin: var(--separator-margin, var(--spacing-xl) 0);
}

/* ==========================================
   ♿ ACCESSIBILITY - נגישות
   ========================================== */

#accessibilityToggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  width: var(--accessibility-btn-size, 60px);
  height: var(--accessibility-btn-size, 60px);
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}

#accessibilityToggle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

body.accessibility-mode {
  background-color: #ffffff;
  color: #000000;
  font-size: 14px;
  line-height: 1.5;
}

body.accessibility-mode .main-title,
body.accessibility-mode .subtitle,
body.accessibility-mode .section-title,
body.accessibility-mode .name-role,
body.accessibility-mode .about-section h3 {
  color: #000000;
}

body.accessibility-mode .about-section {
  background-color: #ffffff;
  color: #000000;
}

body.accessibility-mode .about-highlight-text {
  background-color: #222222;
  color: #ffffff;
  font-weight: bold;
}

body.accessibility-mode .recommendations-section {
  background-color: #ffffff;
  color: #000000;
}

body.accessibility-mode a {
  text-decoration: underline;
  color: #0000EE;
}

body.accessibility-mode a:hover {
  text-decoration: none;
}

body.accessibility-mode .btn,
body.accessibility-mode .btn-contact,
body.accessibility-mode button {
  background-color: #000000;
  color: #ffffff;
}

body.accessibility-mode .btn:hover,
body.accessibility-mode .btn-contact:hover,
body.accessibility-mode button:hover {
  background-color: #333333;
}

body.accessibility-mode a:focus,
body.accessibility-mode button:focus,
body.accessibility-mode input:focus,
body.accessibility-mode textarea:focus,
body.accessibility-mode select:focus,
body.accessibility-mode [data-field="videoSrc"]:focus,
body.accessibility-mode .swiper-button-prev:focus,
body.accessibility-mode .swiper-button-next:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: inherit;
  background-color: rgba(0,0,0,0.05);
}

body.accessibility-mode .icon-item a:focus {
  outline: 3px solid #000;
  outline-offset: 4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.1);
}

body.accessibility-mode .elementor-tab-title:focus {
  outline: 3px solid #000;
  outline-offset: 3px;
  background-color: rgba(0,0,0,0.08);
  border-radius: 6px;
}

body.accessibility-mode [data-field="videoSrc"]:focus,
body.accessibility-mode .swiper-button-prev:focus,
body.accessibility-mode .swiper-button-next:focus {
  outline: 3px solid #000;
  outline-offset: 3px;
  background-color: rgba(0,0,0,0.08);
  border-radius: 6px;
}

body.accessibility-mode .about-section:focus-within {
  outline: 2px solid #000;
  outline-offset: 4px;
}

body.accessibility-mode .icon-item a img {
  filter: contrast(120%);
}

body.accessibility-mode .share-buttons a:focus img {
  outline: 2px solid #000;
  outline-offset: 3px;
  background-color: rgba(0,0,0,0.1);
  border-radius: 50%;
}

body.accessibility-mode input[aria-invalid="true"],
body.accessibility-mode textarea[aria-invalid="true"] {
  border: 2px solid red;
}

body.accessibility-mode .error-message {
  color: red;
  font-size: 14px;
}

/* ==========================================
   🎬 ANIMATIONS - אנימציות
   ========================================== */

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-pulse:hover {
  animation: pulseHover var(--anim-speed-pulse) ease-in-out;
}

.animate-fade-in {
  animation: fadeIn var(--anim-speed-fade) ease-out;
}

.animate-slide-in {
  animation: slideIn var(--anim-speed-slide) ease-out;
}

/* ==========================================
   ⏳ LOADER - מסך טעינה
   ========================================== */

.loader-overlay {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  background-image:  url('/assets/logo/myLogo.jpg');
  background-position: var(--loader-bg-position, center 30%);
  background-repeat: no-repeat;
background-size:300px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99999;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
@media (max-width: 390px) {
  .loader-overlay {
    background-size: 80px auto; /* לדוגמה */
  }
}


.loader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-overlay .loader-spinner {
  margin-top: var(--loader-spinner-margin-top, 180px);
  width: 90px;
  height: 90px;
  border: var(--loader-spinner-border, 6px solid #ffffff);
  border-top-color: var(--loader-spinner-border-top, #999999);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loader-overlay .loader-text {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold; /* ⬅️ מודגש */
  color: #000000;
  font-family: var(--loader-text-font-family, var(--global-font-family));
  direction: rtl;
}



@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.hidden-break {
  display: none;
}
/* ===== קישור טקסט לנגישות ===== */
.accessibility-link {
  color: var(--link-color, #0d6efd);
  text-decoration: underline;
  cursor: pointer;
}

.accessibility-link:focus,
.accessibility-link:hover {
  color: var(--link-hover-color, #084298);
  outline: none;
}
/* ✅ base.css או style.css */
.footer-nav a {
  color: var(--link-color, #005fcc);     /* צבע אחיד לכל הקישורים */
  text-decoration: underline;
  margin-inline: 6px;                    /* ריווח ביניהם */
  font-size: 14px;
}

.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--link-hover-color, #003a80);
  text-decoration: none;
}
/* ✅ base.css */
.legal-note {
  font-size: 13px;
  color: var(--muted, #666);
  text-align: center;
  margin-top: 12px;
  line-height: 1.4;
}

.legal-note a {
  color: var(--link, #0d6efd);
  text-decoration: underline;
}

.legal-note a:hover,
.legal-note a:focus {
  color: var(--link-hover, #003a80);
  text-decoration: none;
}
/* ✅ הסתרה ויזואלית אך שמירה ל־SEO ולנגישות */
.visually-hidden {
  position: absolute !important;
  width: 1px; 
  height: 1px; 
  margin: -1px; 
  padding: 0; 
  border: 0; 
  clip: rect(0 0 0 0); 
  overflow: hidden;
  white-space: nowrap;
}