/**
 * Contact Form CSS
 * Styles for contact form validation and button styling
 */

/* Contact form button styling */
.contact-form-wrapper .rn-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.contact-form-wrapper .rn-btn span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Ensure consistent button styling across contact pages */
.rn-contact-area .contact-form-wrapper .rn-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 15px 35px !important;
    border-radius: 6px !important;
    background: linear-gradient(145deg, #1e2024, #23272b) !important;
    box-shadow: var(--shadow-1) !important;
    transition: var(--transition) !important;
    position: relative !important;
    z-index: 2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 0 none !important;
    color: var(--color-primary) !important;
}

.rn-contact-area .contact-form-wrapper .rn-btn:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.rn-contact-area .contact-form-wrapper .rn-btn::before {
    content: "" !important;
    position: absolute !important;
    transition: var(--transition) !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px !important;
    top: 0 !important;
    left: 0 !important;
    background: linear-gradient(to right bottom, #212428, #16181c) !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

.rn-contact-area .contact-form-wrapper .rn-btn:hover::before {
    opacity: 1 !important;
}

/* Custom styling for form validation */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Loading spinner for button */
.fa-spinner {
    margin-right: 5px;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
    .contact-form-wrapper .rn-btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media only screen and (max-width: 479px) {
    .contact-form-wrapper .rn-btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
}