/* Modal styles */
.lead-form {
  box-sizing: border-box;
  position: fixed; /* Changed from relative to fixed to prevent page scrolling */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for element's own size */
  border: none;
  border-radius: 12px;
  padding: 0;
  margin: 0; /* Prevents centering issues in browsers with default dialog margins */
  width: 90%;
  max-width: 440px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  overflow: visible; /* Keep visible so the close button can sit outside the border */
  /* Animation */
  opacity: 0;
  visibility: hidden; /* Hide from view and interaction when closed */
  pointer-events: none; /* Allow clicks to pass through to elements underneath */
  /* Initial transform for animation will be handled by @starting-style */
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out,
    visibility 0.3s allow-discrete; /* Ensure visibility toggles correctly with animation */
  max-height: 90dvh; /* Allow the popup to take more screen height */
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack children vertically */
  z-index: 9999; /* Ensure it's on top of other content */
}

/* Opened dialog state */
.lead-form[open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%); /* Reset transform for open state */
}

/* Стилизация подложки (backdrop) */
.lead-form::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s allow-discrete;
}

.lead-form[open]::backdrop {
  opacity: 1;
}

.lead-form__content {
  padding-top: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Позволяет контенту сжиматься под размер диалога и активировать скролл */
}

.lead-form .lead-form__close {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #ff8c00;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  padding: 0;
}

.lead-form .lead-form__close:hover {
  background: #fca63d;
}

.lead-form__form {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;

  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent accidental horizontal scroll */
  min-height: 0; /* Essential for flex-based scrolling */
}

/* Remove extra margins from the first and last child elements to prevent unwanted scrolling in flex containers */
.lead-form__form > *:first-child {
  margin-top: 0;
}
.lead-form__form > *:last-child {
  margin-bottom: 0;
}

@starting-style {
  .lead-form[open] {
    opacity: 0;
    visibility: hidden;
    transform: translate(
      -50%,
      calc(-50% + 20px)
    ); /* Start 20px below final centered position */
  }
  .lead-form[open]::backdrop {
    opacity: 0;
  }
}

.nf-form-hp {
  display: none;
}