/* --- General Body and Container Styles --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* A clean, modern font */
    box-sizing: border-box;
}

.contact-form-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Light Green Background */
    background-color: lightgreen; /* Simple light green background */
}

/* --- Form Card Styling --- */
.contact-form-card {
    background-color: #000000; /* Black background for the form itself */
    padding: 40px;
    border-radius: 15px; /* Softer rounded corners */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Stronger shadow for black background */
    width: 100%;
    max-width: 600px; /* Wider form for better layout */
    transform: translateY(0);
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    border: 2px solid #5a00e0; /* A subtle border matching the button gradient */
}

.contact-form-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); /* More pronounced shadow on hover */
}

/* --- Heading Styling --- */
.contact-form-heading {
    text-align: center; /* Centering the heading */
    font-size: 3em; /* Larger, more prominent heading */
    color: whitesmoke; /* WhiteSmoke text for readability on black background */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 4px solid #8e2de2; /* A striking purple border below the heading */
    font-weight: 700; /* Bold heading */
    letter-spacing: -0.02em; /* Slightly tighter letter spacing */
}

/* --- Form Field Styling --- */
.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased space between form groups */
}

.form-group-half {
    display: flex;
    flex-direction: column; /* Stack vertically on small screens */
    gap: 20px;
}

@media (min-width: 768px) { /* Side-by-side on larger screens */
    .form-group-half {
        flex-direction: row;
    }
    .form-field {
        flex: 1; /* Distribute space equally */
    }
}

.form-field {
    margin-bottom: 0; /* Gap handled by parent .contact-form-fields */
}

.form-label {
    display: block;
    font-size: 1.1em; /* Slightly larger label text */
    color: whitesmoke; /* WhiteSmoke for labels on black background */
    margin-bottom: 8px;
    font-weight: 600; /* Semi-bold labels */
}

.form-input {
    width: 100%;
    padding: 15px 20px; /* Bigger padding for larger fields */
    border: 1px solid #555555; /* Darker border color for black background */
    border-radius: 8px; /* Slightly more rounded corners */
    font-size: 1.1em; /* Larger text inside input fields */
    color: whitesmoke; /* WhiteSmoke text for input */
    background-color: #333333; /* Darker input background for contrast */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Subtle inner shadow */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.form-input::placeholder {
    color: #aaaaaa; /* Lighter placeholder text for dark background */
    opacity: 0.9;
}

.form-input:focus {
    border-color: #8e2de2; /* Purple border on focus */
    box-shadow: 0 0 0 4px rgba(142, 45, 226, 0.3); /* Purple glow on focus */
    outline: none; /* Remove default outline */
}

.textarea-field {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 120px; /* Minimum height for textarea */
}

/* --- Error Styling --- */
.error-text {
    color: #ff6b6b; /* Brighter red for error messages on dark background */
    font-size: 0.85em;
    margin-top: 5px;
    min-height: 20px; /* To prevent layout shift when error appears */
}

.input-error {
    border-color: #ff6b6b !important; /* Red border for invalid input */
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.2) !important; /* Red glow for invalid input */
}

/* --- Submit Button Styling --- */
.submit-button {
    width: 100%;
    padding: 18px 25px; /* Larger padding for a more substantial button */
    border: none;
    border-radius: 10px; /* Rounded button corners */
    background: linear-gradient(45deg, #4a00e0, #8e2de2); /* Matching gradient background */
    color: #ffffff; /* White text */
    font-size: 1.4em; /* Larger, bolder text */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
    letter-spacing: 0.05em; /* Slightly spaced letters */
}

.submit-button:hover {
    background: linear-gradient(45deg, #3d00b3, #7224c2); /* Darker gradient on hover */
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

.submit-button:active {
    transform: translateY(0); /* Press down effect on active */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(45deg, #310080, #5a1d99); /* Even darker on active */
}

.submit-button.button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #555555 !important; /* Dark grey background when disabled */
    box-shadow: none;
    transform: none;
}

/* --- Message Div Styling (Success/Error) --- */
.form-message {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.05em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.form-message.hidden {
    display: none;
}

.form-message.success-message {
    background-color: #d4edda; /* Light green for success */
    color: #155724; /* Dark green text */
    border: 1px solid #28a745;
}

.form-message.error-message {
    background-color: #f8d7da; /* Light red for error */
    color: #721c24; /* Dark red text */
    border: 1px solid #dc3545;
}

/* --- Loading Spinner for Button --- */
.button-loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    animation: spin 1s linear infinite;
    margin-right: 10px;
    height: 25px;
    width: 25px;
    color: #ffffff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .contact-form-card {
        padding: 25px;
    }
    .contact-form-heading {
        font-size: 2.2em;
    }
    .submit-button {
        font-size: 1.2em;
        padding: 15px 20px;
    }
}