/* custom-contactformn.css - Modern Styling (Button Centered and Black) */

.custom-contactformn-wrapper {
    max-width: 650px; /* Slightly wider */
    margin: 40px auto; /* More margin for breathing room */
    padding: 30px;
    background-color: #ffffff; /* Clean white background */
    border-radius: 12px; /* More rounded corners */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Modern sans-serif font stack */
    color: #333;
}

#custom-contactformn-form p.form-group {
    margin-bottom: 20px; /* More spacing between form groups */
}

#custom-contactformn-form label {
    display: block;
    margin-bottom: 8px; /* Spacing for label to input */
    font-weight: 600; /* Slightly bolder labels */
    color: #555; /* Softer label color */
    font-size: 15px;
}

#custom-contactformn-form input[type="text"],
#custom-contactformn-form input[type="email"],
#custom-contactformn-form input[type="tel"], /* Added for futureproofing if 'phone' input type used */
#custom-contactformn-form textarea {
    width: 100%;
    padding: 12px 15px; /* Increased padding for better touch targets */
    border: 1px solid #e0e0e0; /* Lighter border color */
    border-radius: 8px; /* Rounded input fields */
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
}

#custom-contactformn-form textarea {
    min-height: 120px; /* Minimum height for textarea */
    resize: vertical; /* Allow vertical resizing only */
}

#custom-contactformn-form input[type="text"]:focus,
#custom-contactformn-form input[type="email"]:focus,
#custom-contactformn-form input[type="tel"]:focus,
#custom-contactformn-form textarea:focus {
    outline: none; /* Remove default outline */
    border-color: #007bff; /* Highlight border on focus */
}

/* Centering the submit button within its paragraph */
#custom-contactformn-form p.form-group:last-of-type { /* Target the paragraph containing the submit button */
    text-align: center; /* This will center the inline-block submit button */
    margin-top: 30px; /* Add some space above the button */
}


#custom-contactformn-form input[type="submit"] {
    display: inline-block; /* For proper padding and margin */
    background-color: #222222; /* Changed to a dark black/grey */
    color: white;
    padding: 14px 28px; /* Generous padding for the button */
    border: none;
    border-radius: 8px; /* Rounded button corners */
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}

#custom-contactformn-form input[type="submit"]:hover {
    background-color: #000000; /* Darker shade on hover, almost pure black */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

/* reCAPTCHA specific styling (if needed) - reCAPTCHA v3 typically does not have a visible element */
.grecaptcha-badge { /* This is the badge that appears in the corner for reCAPTCHA v3 */
    transform: scale(0.9) !important; /* Slightly scale down if it feels too large */
    transform-origin: bottom right !important; /* Align scaling to bottom-right */
}


/* Success/Error Messages - using dedicated classes */
.custom-contactformn-success-message,
.custom-contactformn-error-message {
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.custom-contactformn-success-message {
    background-color: #e6ffe6; /* Light green background */
    border: 1px solid #a3e6a3;
    color: #28a745 !important; /* Force green color */
}

.custom-contactformn-error-message {
    background-color: #ffe6e6; /* Light red background */
    border: 1px solid #e6a3a3;
    color: #dc3545 !important; /* Force red color */
}