.form-message {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
animation: slideDown 0.4s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.success-message {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.error-message {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.message-content {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 500;
}
.message-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
}
.success-message .message-icon {
background: #28a745;
color: white;
}
.error-message .message-icon {
background: #dc3545;
color: white;
} .form-group.focused label {
color: #8b5e34;
} .form-group input,
.form-group select {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} @keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.form-group.error input {
border-color: #dc3545;
animation: shake 0.5s;
} .submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
} .submit-btn {
position: relative;
overflow: hidden;
}
.submit-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.submit-btn:active::after {
width: 300px;
height: 300px;
} .form-group input::placeholder {
transition: all 0.3s ease;
}
.form-group input:focus::placeholder {
transform: translateY(-2px);
opacity: 0.6;
} input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
opacity: 1;
} @keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.required-star {
animation: pulse 2s ease-in-out infinite;
} @media (max-width: 768px) {
.form-group input:active,
.form-group select:active {
transform: scale(0.98);
}
}