/* Ensure form elements stack vertically with spacing */
    form.flex {
        flex-direction: column;
    }

    /* Add spacing between form elements */
    form input,
    form textarea,
    form button {
        margin-bottom: 1.25rem; /* Matches mb-5 in ShorthandCSS */
    }

    /* Adjust button alignment */
    form button {
        align-self: flex-start; /* Aligns button to the left, adjust to flex-end for right */
        padding: 15px 30px; /* Matches button-lg sizing */
    }

    /* Ensure inputs and textarea have consistent styling */
    input, textarea {
        outline: none;

        padding: 8px;
        transition: opacity 0.3s ease;
    }

    input:focus, textarea:focus {
        opacity: 1;
    }

    /* Textarea specific styling */
    textarea {
        resize: vertical;
        min-height: 100px;
    }
    select {
      appearance: none; /* Remove default arrow */
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" fill="rgba(224, 231, 255, 0.8)"><path d="M0 0h12l-6 6z"/></svg>'); /* Custom arrow */
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding: 8px;
      padding-right: 2.5rem; /* Space for the arrow */
      cursor: pointer;
  }
  
  select:focus {
      outline: none;
      opacity: 1;
  }
  
  select option {
      background: #1e1e2f; /* Matches bg-indigo-lightest-10 */
      color: #e0e7ff; /* Matches indigo-lightest */
  }

.indigo {
    color: #B32442 !important
}

.bg-accent {
    background-color: #760933;
}

.accent {
    color: #FFBC0A;
}

.bg-black {
    background-color: #2c2a67 !important;
}

.bg-night {
    background-color: #000;
}