.tour-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
}

.tour-step-modal {
  background-color: #fff;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--border-radius);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 500px;
  text-align: center;

  pointer-events: auto;
  position: relative;
  z-index: 10001;
}

.tour-step-modal h3 {
  margin-top: 0;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #333;
}

.tour-step-modal p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

.tour-nav {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*
 * THE SPOTLIGHT EFFECT (just for desktop)
 * This is the core logic. We create a group of selectors.
 * Each selector uses :has() to check which tour step is currently in the DOM.
 * It then targets the corresponding form element.
*/
@media (min-width: 993px) {
  body:has([id^="tour-step-"]) .page-sidebar {
    position: relative;
    z-index: 10000;
    background-color: var(--color-background);
  }

  /* 
  Force all default content in the sidebar onto a base layer.
*/
  body:has([id^="tour-step-"]) .page-sidebar > * {
    position: relative;
    z-index: 1;
  }

  body:has([id^="tour-step-"]) .page-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2;
  }

  body:has(#tour-step-1) #image-upload-container,
  body:has(#tour-step-2) #title-input-container,
  body:has(#tour-step-3) #style-select-container,
  body:has(#tour-step-4) #mode-input-container,
  body:has(#tour-step-5) #room-input-container {
    /* Bring the highlighted element above the overlay */
    position: relative;
    z-index: 3;

    /* Modify its background for highlight */
    background-color: var(--color-background);

    /* Add a highlight border */
    border: 5px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: var(--space-md);
  }
}
/*
* ============================================================================
* Responsive: Hide Tour on Mobile Devices
* ============================================================================
*/
@media (max-width: 992px) {
  /*
   * On screens 992px or smaller, completely hide the tour container.
   * This prevents the z-index conflict and provides a cleaner experience
   * for mobile users, allowing them to use the app directly.
   */
  #tour-spotlight-container {
    display: none;
  }
}