.animate__fadeInUp { animation: fadeInUp 0.6s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hover-scale:hover { transform: scale(1.02); } .transition-all { transition: all 0.3s ease; } /* Form submission loading states */ form.submitting { pointer-events: none; opacity: 0.7; } form.submitting button[type="submit"] { background-color: #6b7280 !important; cursor: not-allowed; } form.submitting button[type="submit"]:hover { background-color: #6b7280 !important; } /* Loading spinner for submit button */ button[type="submit"]:disabled { position: relative; } button[type="submit"]:disabled::after { content: ''; position: absolute; width: 16px; height: 16px; margin: auto; border: 2px solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: spin 1s linear infinite; right: 10px; top: 50%; transform: translateY(-50%); } @keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } /* Custom Dropdown Styles */ .custom-dropdown { position: relative; width: 100%; } .dropdown-selected { display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 2px solid #e5e7eb; border-radius: 12px; background: white; cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .dropdown-selected:hover { border-color: #f66d2f; box-shadow: 0 0 0 3px rgba(246, 109, 47, 0.1); } .dropdown-selected.active { border-color: #f66d2f; box-shadow: 0 0 0 3px rgba(246, 109, 47, 0.1); } .dropdown-arrow { transition: transform 0.2s ease; color: #6b7280; font-size: 12px; font-style: unset; } .dropdown-selected.active .dropdown-arrow { transform: rotate(180deg); color: #f66d2f; } .dropdown-options { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 2px solid #f66d2f; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 200px; overflow-y: auto; display: none; margin-top: 4px; } .dropdown-options.show { display: block; animation: dropdownFadeIn 0.2s ease; } .dropdown-option { padding: 12px 16px; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid #f3f4f6; } .dropdown-option:last-child { border-bottom: none; } .dropdown-option:hover { background: #fff5f0; color: #f66d2f; } .dropdown-option.selected { background: #f66d2f; color: white; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }