/* Full-screen overlay while live coverage is checked */
body.avail-overlay-open {
  overflow: hidden;
}

.avail-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

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

.avail-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.55);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .avail-overlay__backdrop {
  background: rgba(244, 246, 251, 0.72);
}

html[data-theme="dark"] .avail-overlay__backdrop {
  background: rgba(8, 12, 9, 0.78);
}

.avail-overlay__card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 32px 28px 28px;
  border-radius: calc(var(--radius, 22px) + 4px);
  border: 1px solid var(--ndio-border);
  background: var(--ndio-white);
  box-shadow: var(--shadow);
  text-align: center;
  animation: avail-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] .avail-overlay__card {
  background: #1c241e;
  border-color: #405044;
}

@keyframes avail-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.avail-scanner {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 20px;
}

.avail-scanner__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--ndio-green);
  border-right-color: var(--ndio-orange);
  animation: avail-spin 1.1s linear infinite;
}

.avail-scanner__ring--delay {
  inset: 12px;
  opacity: 0.65;
  animation-duration: 1.6s;
  animation-direction: reverse;
}

.avail-scanner__core {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--ndio-green), transparent 62%),
    radial-gradient(circle at 70% 75%, var(--ndio-orange), transparent 55%);
  opacity: 0.35;
  animation: avail-pulse 2s ease-in-out infinite;
}

.avail-scanner__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ndio-green);
  box-shadow: 0 0 0 6px rgba(80, 170, 82, 0.22);
  animation: avail-pin 1.4s ease-in-out infinite;
}

html[data-theme="dark"] .avail-scanner__pin {
  box-shadow: 0 0 0 6px rgba(121, 195, 123, 0.2);
}

@keyframes avail-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes avail-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.5;
  }
}

@keyframes avail-pin {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.avail-overlay__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ndio-text);
}

.avail-overlay__hint {
  margin: 0 0 18px;
  color: var(--ndio-muted);
  font-size: 0.95rem;
  min-height: 1.4em;
  transition: opacity 0.25s ease;
}

.avail-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--ndio-green-soft);
  overflow: hidden;
  margin-bottom: 14px;
}

html[data-theme="dark"] .avail-progress {
  background: #17351f;
}

.avail-progress__bar {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--ndio-green);
  animation: avail-progress 1.8s ease-in-out infinite;
}

@keyframes avail-progress {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.avail-overlay__note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ndio-muted);
  opacity: 0.85;
}

[data-avail-geo-error] {
  margin: 0;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid #efb7a5;
  background: #fff1ec;
  color: #8c321b;
  font-size: 0.88rem;
  font-weight: 650;
}

html[data-theme="dark"] [data-avail-geo-error] {
  border-color: #8e503d;
  background: #3b241d;
  color: #ffd0c2;
}

@media (max-width: 620px) {
  .avail-overlay {
    padding: 16px;
  }

  .avail-overlay__card {
    padding: 26px 20px 22px;
  }
}