/* ===== FULLSCREEN EARTH MODAL (UPDATED) ===== */
.earth-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  justify-content:center;
  align-items:center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}

.earth-modal__backdrop{
  position:absolute;
  inset:0;
  background: #3366FF10;
  opacity: 0;
  transition: all 500ms ease;
}

.earth-modal__panel{
  position: relative;
  z-index: 2;
  width: min(640px, calc(100% - 48px));
  max-height: calc(100% - 48px);
  margin: 24px auto;
  overflow: auto;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  color: #fff;
  padding:25px;

  transform: translateY(90px);
  opacity: 0;
  transition: transform 500ms cubic-bezier(.22,.61,.36,1), opacity 300ms ease;
}

/* OPEN */
.earth-modal.is-open{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  transition: opacity 500ms ease, visibility 0s;
}
.earth-modal.is-open .earth-modal__backdrop{ opacity: 1; }
.earth-modal.is-open .earth-modal__panel{
  transform: translateY(0);
  opacity: 1;
}

/* CLOSE */
.earth-modal.is-closing{
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  backdrop-filter: blur(0)
}
.earth-modal.is-closing .earth-modal__backdrop{ opacity: 0; }
.earth-modal.is-closing .earth-modal__panel{
  transform: translateY(180px);
  opacity: 0;
}

/* ===== SLIDER (FINAL FIXED) ===== */
.earth-modal__slider{
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}

/* Important: lock slider height so absolute slides can animate */
.earth-modal__slides{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;      /* اگر می‌خواهی 4:3 یا 1:1 عوضش کن */
  overflow: hidden;
  min-height: 180px;         /* fallback برای مرورگرهای قدیمی */
}

/* Slide = absolutely stacked, animate by transform/opacity (NOT display:none) */
.earth-modal__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0) scale(0.98);
  transition:
    transform 520ms cubic-bezier(.22,.61,.36,1),
    opacity 280ms ease;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 0;
}

/* Active slide visible */
.earth-modal__slide.is-active{
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* Direction: NEXT */
.earth-modal[data-dir="next"] .earth-modal__slide{
  transform: translateX(40px) scale(0.965);
}
.earth-modal[data-dir="next"] .earth-modal__slide.is-active{
  transform: translateX(0) scale(1);
}

/* Direction: PREV */
.earth-modal[data-dir="prev"] .earth-modal__slide{
  transform: translateX(-40px) scale(0.965);
}
.earth-modal[data-dir="prev"] .earth-modal__slide.is-active{
  transform: translateX(0) scale(1);
}

/* Image fits the fixed slider frame */
.earth-modal__img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  
}

/* prev/next (always above image) */
.earth-modal__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35) !important;
  color: #fff;
  font-size: 26px !important;
  line-height: 34px;
  padding:10px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
}
.earth-modal__prev{ left: 12px; }
.earth-modal__next{ right: 12px; }

.earth-modal--single .earth-modal__nav,
.earth-modal--single .earth-modal__dots{
  display: none;
}

/* Dots (above image) */
.earth-modal__dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
}

.earth-modal__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35) !important;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.earth-modal__dot.is-active{
  background: rgba(255,255,255,0.9) !important;
}

/* if no image at all */
.earth-modal--noimg .earth-modal__slider{
  display: none;
}

/* body */
.earth-modal__body{ padding: 16px 0px 0px; }
.earth-modal__body p{ margin-bottom: 0 !important; }
.earth-modal__title{ font-weight: 700; font-size: 22px; margin: 0 0 10px; }
.earth-modal__text{ font-size: 15px; line-height: 1.65; opacity: 0.92; }

.earth-modal__close{
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #FFFFFF40 !important;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding:0;
  z-index: 6;
}
.earth-modal__close img{ pointer-events: none; }
.earth-modal__close:hover{ background:#3366FF !important; }

@media (max-width:520px){
  .earth-modal__panel{
    width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    margin: 12px auto;
  }
  .earth-modal__title{ font-size: 18px; }
  .earth-modal__text{ font-size: 14px; }

  /* موبایل: کمی کوتاه‌تر */
  .earth-modal__slides{
    aspect-ratio: 4 / 3;
    min-height: 160px;
  }
}

/* Background circles (unchanged) */
.blurboxmap{ position: relative; min-height: 100vh; }
.blurCirclemap {
  position:absolute;
  width:200px;
  height:200px;
  background:#FF6A00;
  border-radius:50%;
  filter:blur(20px);
  animation:floatBlurmap 6s ease-in-out infinite alternate;
}
.c1map{top:20%; left:30%; animation-delay:0s;}
.c2map{top:10%; left:60%; animation-delay:1s; background:#3366FF;}
.c3map{top:70%; right:40%; animation-delay:2s; background:#FF6A00;}
@keyframes floatBlurmap {
  0%{transform:translateY(0);}
  50%{transform:translateY(-50px);}
  100%{transform:translateY(0);}
}

/* Atmosphere (unchanged) */
#myearth::after{
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(circle,
      rgba(51,102,255,0.00) 40%,
      rgba(51,102,255,0.04) 55%,
      rgba(51,102,255,0.08) 65%,
      rgba(51,102,255,0.06) 72%,
      rgba(51,102,255,0.03) 80%,
      rgba(51,102,255,0.00) 94%
    ),
    radial-gradient(circle,
      rgba(51,102,255,0.10) 0%,
      rgba(51,102,255,0.00) 70%
    );

  filter: blur(28px);
}

/*TEMP*/