/* Newsletter Form Styles */

.newsletter {
    position: relative;
}

.newsletter .error-message {
    display: none;
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.newsletter input.error {
    border-color: #e74c3c !important;
    animation: shake 0.5s;
}

.newsletter input:focus {
    outline: none;
    border-color: #7f540c;
    box-shadow: 0 0 0 3px rgba(127, 84, 12, 0.1);
}

.newsletter button:disabled {
    cursor: not-allowed;
    opacity: 0.7 !important;
}

.newsletter button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Shake animation for errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Success state */
.newsletter .error-message.success {
    color: #2ecc71;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .newsletter .newsElements {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .newsletter .newsInput,
    .newsletter .newsSubmit {
        max-width: 100% !important;
        width: 100%;
    }
}

/* Loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.newsletter button .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5rem;
}