/* Custom CSS for ESA Letter Generator */

body {
    font-family: 'Inter', sans-serif;
}

/* Specific styling for Select2 elements to match your theme */
.select2-container--default .select2-selection--single {
    background-color: #4A5568 !important; /* bg-gray-700 equivalent */
    border: 1px solid #4A5568 !important; /* border-gray-600 equivalent */
    border-radius: 0.375rem !important; /* rounded-md equivalent */
    height: 42px !important; /* Match height of other inputs */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #E2E8F0 !important; /* text-sky-100 equivalent */
    line-height: 42px !important; /* Vertically center text */
    padding-left: 0.75rem !important; /* p-3 equivalent */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

.select2-dropdown {
    background-color: #2D3748 !important; /* darker gray for dropdown */
    border: 1px solid #4A5568 !important;
    border-radius: 0.375rem !important;
}

.select2-container--default .select2-results__option {
    color: #E2E8F0 !important; /* text-sky-100 equivalent */
    padding: 0.5rem 0.75rem !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #4C51BF !important; /* indigo-600 equivalent for highlight */
    color: white !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #6B46C1 !important; /* purple-600 equivalent for selected */
    color: white !important;
}

/* Ensure focus styles are visually clear for accessibility */
.select2-container--default .select2-selection--single:focus,
.select2-search__field:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5) !important; /* focus:ring-indigo-500 equivalent */
    border-color: #6366F1 !important; /* focus:border-indigo-500 equivalent */
}

/* Ensure the textarea matches other input styles */
textarea {
    resize: vertical; /* Allow vertical resizing */
}