<script lang="ts">
  export let loading: boolean;
</script>

{#if loading}
  <div class="overlay" role="status" aria-live="polite">
    <div class="spinner" aria-hidden="true"></div>
  </div>
{/if}

<style>
  /* Overlay + spinner */
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: auto;
  }
  .spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.18);
    border-top-color: white;
    animation: spin 0.9s linear infinite;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>
