/* גובה בסיסי לגלריה */
.gallery-section { --n360-gallery-h: 460px; }
@media (max-width: 768px){ .gallery-section { --n360-gallery-h: 300px; } }

/* חשוב: שיחסי המיקום של החיצים יהיו ביחס לגלריה */
.gallery-section{ position: relative; }

/* קונטיינר השקופיות */
.gallery-container{ 
  position:relative; 
  overflow:hidden; 
  min-height: var(--n360-gallery-h); 
}

/* הדפוס הזהוב - שכבת רקע מאחורי התמונות */
.gallery-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: 
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 18px,
        rgba(255, 215, 0, 0.5) 18px,
        rgba(255, 215, 0, 0.5) 20px
    ),
    linear-gradient(to bottom, #0f2342 0%, #54595f 100%);
}

.gallery-image{ 
  display:block !important; 
  background-repeat:no-repeat;
  position: relative;
  z-index: 1;
}

/* FADE */
.gallery-container:not(.is-slide) .gallery-image{
  position:absolute; inset:0; background-size:contain; background-position:center; 
  opacity:0; transition: opacity .4s ease;
  z-index: 1;
}

.gallery-container:not(.is-slide) .gallery-image.is-active{ 
  opacity:1;
  z-index: 2;
}

/* SLIDE */
.gallery-container.is-slide .gallery-image{
  position:relative; inset:auto; background-size:contain; background-position:center; 
  flex:0 0 100%; height: var(--n360-gallery-h);
  opacity:1; transition:none;
}

.gallery-container.is-slide .n360-track{
  display:flex; height: var(--n360-gallery-h);
  will-change: transform; transition: transform .4s ease;
}

/* Dots - גרסה בסיסית */
.gallery-dots{
  display:flex; 
  gap:8px; 
  justify-content:center; 
  margin-top:10px;
  max-width: 100%; /* מניעת overflow */
  overflow-x: auto; /* גלילה אם באמת יש הרבה מאוד */
  flex-wrap: wrap; /* עטיפה לשורה הבאה */
  padding: 0 10px; /* ריווח בצדדים */
}

.gallery-dots button{
  width:9px; 
  height:9px; 
  border-radius:50%; 
  border:0; 
  background:rgba(0,0,0,.25); 
  cursor:pointer;
  flex-shrink: 0; /* מונע כיווץ */
  transition: all 0.3s ease;
}

.gallery-dots button.active,
.gallery-dots button.is-active{
  background:#ffd700; 
  box-shadow:0 0 0 2px rgba(0,0,0,.15) inset;
  transform: scale(1.2);
}

/* מקור עוגן לחיצים */
.gallery-section { position: relative !important; }

/* החיצים עצמם – תמיד מעל התמונה ובאמצע האנכי */
.gallery-section > .gallery-nav{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

.gallery-prev{
  left: 8px;
  right: auto;
}
.gallery-next{
  right: 8px;
  left: auto;
}

/* אם נוצרו גם <span class="gallery-dot"> ידניים – הסתרה */
.gallery-dots .gallery-dot { display: none !important; }

/* במובייל נקרב מעט פנימה */
@media (max-width: 767px){
  .gallery-prev{ left: 10px; }
  .gallery-next{ right: 10px; }
}

/* עטיפת הגלריה */
.n360-gallery{position:relative; margin-bottom:14px}

/* הקונטיינר של השקופיות - עם הדפוס */
#n360-gallery{
  overflow:hidden; 
  border-radius:16px; 
  min-height:420px; 
  display:flex;
  background: 
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 18px,
        rgba(255, 215, 0, 0.5) 18px,
        rgba(255, 215, 0, 0.5) 20px
    ),
    linear-gradient(to bottom, #0f2342 0%, #54595f 100%);
}

#n360-gallery .gallery-image{
  min-width:100%; 
  height:420px; 
  background-size:contain; 
  background-position:center;
}

/* חיצים צפים מעל הגלריה */
.n360-gallery-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:#0000001a; padding:10px 14px; border-radius:12px;
  font-size:22px; line-height:1; cursor:pointer; z-index:3
}
.n360-gallery-btn:hover{background:#0000002b}
.n360-gprev{right:10px}
.n360-gnext{left:10px}

/* נקודות במרכז התחתון - גרסה מתקדמת (צפה מעל הגלריה) */
.gallery-dots{
  position:absolute; 
  left:50%; 
  bottom:10px; 
  transform:translateX(-50%);
  display:flex; 
  gap:8px; 
  padding:6px 8px; 
  border-radius:9999px;
  background:rgba(255,255,255,.7); 
  backdrop-filter:blur(6px); 
  z-index:2;
  max-width: calc(100% - 20px); /* מניעת overflow עם מרווח בצדדים */
  overflow-x: auto; /* גלילה אם יש הרבה מאוד נקודות */
  flex-wrap: wrap; /* עטיפה לשורה הבאה */
  justify-content: center; /* מרכוז הנקודות */
}

.gallery-dots button{
  width:10px; 
  height:10px; 
  border-radius:50%; 
  border:0; 
  background:#c9c9c9; 
  cursor:pointer;
  flex-shrink: 0; /* מונע כיווץ */
  transition: all 0.3s ease;
}

.gallery-dots button.is-active,
.gallery-dots button.active{
  background:#dfbf08;
  transform: scale(1.2);
}

.gallery-dots button:hover{
  background:#666;
  transform: scale(1.1);
}

/* ===== RESPONSIVE - הקטנת נקודות בנייד ===== */

/* טאבלט ונייד גדול */
@media (max-width: 768px){
  .gallery-dots{
    gap: 6px;
    padding: 5px 6px;
    max-width: calc(100% - 16px);
  }
  
  .gallery-dots button{
    width: 8px;
    height: 8px;
  }
  
  .gallery-dots button.is-active,
  .gallery-dots button.active{
    transform: scale(1.3);
  }
  
  #n360-gallery .gallery-image{
    height: 300px;
  }
  
  #n360-gallery{
    min-height: 300px;
  }
}

/* נייד ממש קטן */
@media (max-width: 480px){
  .gallery-dots{
    gap: 5px;
    padding: 4px 6px;
    max-width: calc(100% - 12px);
  }
  
  .gallery-dots button{
    width: 6px;
    height: 6px;
  }
  
  .gallery-dots button.is-active,
  .gallery-dots button.active{
    transform: scale(1.4);
  }
}

/* נייד ממש ממש קטן (iPhone SE וכדומה) */
@media (max-width: 375px){
  .gallery-dots{
    gap: 4px;
    padding: 3px 5px;
  }
  
  .gallery-dots button{
    width: 5px;
    height: 5px;
  }
}