/* Suggestion Dropdown Styling */
#suggestions {
    background-color: var(--white);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    margin-top: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

#suggestions div {
    padding: 0.5rem;
    cursor: pointer;
    color: #1A1A1A;
}

#suggestions div:hover {
    background-color: #F5EBD8;
}

/* Email Section Specific Styles */
.email-section > p {
    color: #1A1A1A;
    margin-bottom: 0.5rem;
}

.email-section > input {
    margin-bottom: 1.5rem;
}

.email-section > button {
    margin: auto;
}

#email-label {
    display: none;
}

  /* Error message styling */
  .outside-perimeter-error-message {
    color: #1A1A1A; /* Updated color */
    font-size: calc(var(--base-font-size) * 0.875); /* Updated font size */
    font-weight: 700;
    margin-top: 0.5rem;
    text-align: center; /* Align text to the center */
  }

  .outside-perimeter-paragraph {
    color: #1A1A1A; /* Updated color */
    font-size: calc(var(--base-font-size) * 0.875); /* Updated font size */
    font-weight: 400;
    margin-bottom: 16px;
    text-align: center; /* Align text to the center */
  }

  .error-message {
    margin-top: 0 !important;
  }

  .input-field {
    text-align: left !important; /* Ensure text and placeholder are left-aligned */
    margin-bottom: 0 !important; /* Retain existing margin fix */
    width: 100%; /* Ensure input takes full width */
    box-sizing: border-box; /* Avoid padding affecting input size */
  }

  .submit-email-button {
    margin-top: 32px !important;
  }

  @media (max-width: 767px) {
    .button-container {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        padding: 1rem;
        z-index: 999;
        margin-top: 0;
    }

    .button-container .next-button {
      margin-top:0;
    }

    /* Add padding at the bottom of the content so it doesn't get hidden behind the button */
    .step-content {
        padding-bottom: 80px; 
    }
}