/* style.css - Modern Look */

/* --- Base & Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: #f4f7f6; /* Lighter, softer background */
    /* Subtle gradient option: */
    /* background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); */
    display: flex; /* For centering the form wrapper */
    justify-content: center;
    align-items: flex-start; /* Align to top if content overflows */
    min-height: 100vh;
    padding: 30px 15px; /* Add some padding on body */
}

/* --- Form Wrapper (for centering) --- */
.form-container-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* --- Main Container (The Card) --- */
.container {
    max-width: 700px; /* Slightly wider */
    width: 100%;
    margin: 0 auto; /* Centering fallback */
    padding: 40px 50px; /* More padding */
    background-color: #ffffff;
    border-radius: 12px; /* Smoother corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer shadow */
    border: 1px solid #e0e0e0; /* Subtle border */
}

/* --- Headings --- */
h1 {
    text-align: center;
    color: #2c3e50; /* Dark blue-grey */
    margin-bottom: 10px;
    font-weight: 600;
}

.subheading {
    text-align: center;
    color: #7f8c8d; /* Grey */
    margin-bottom: 35px;
    font-size: 0.95em;
}

/* --- Form Elements --- */
.form-group {
    margin-bottom: 22px; /* Consistent spacing */
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Slightly lighter than bold */
    color: #34495e; /* Slightly darker blue-grey */
    font-size: 0.9em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 12px 15px; /* Comfortable padding */
    border: 1px solid #dcdcdc; /* Lighter border */
    border-radius: 6px; /* Consistent radius */
    font-size: 0.95em;
    font-family: inherit; /* Use Poppins */
    color: #333;
    background-color: #fdfdfd; /* Very light background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: #aaa;
    opacity: 1; /* Ensure visibility */
}

/* Focus State */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
    outline: none; /* Remove default outline */
    border-color: #3498db; /* Highlight color on focus */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); /* Subtle glow */
}

textarea {
    height: 120px;
    resize: vertical;
}

select {
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2334495E%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 10px;
    padding-right: 40px; /* Space for the arrow */
}
select:required:invalid { /* Style placeholder option */
  color: #aaa;
}
select option[disabled] {
  display: none; /* Hide the disabled option in dropdown */
}

/* File Input Specifics */
.file-input-group label {
    margin-bottom: 5px; /* Slightly less space before input */
}
input[type="file"] {
    padding: 8px; /* Different padding might look better */
    background-color: #f8f9fa;
    cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button { /* Style the button inside */
    padding: 8px 15px;
    border: none;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.2s ease;
}
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #dee2e6;
}
/* Add similar styles for ::-moz-file-upload-button if needed */

.file-info {
    display: block;
    font-size: 0.8em;
    color: #7f8c8d;
    margin-top: 5px;
}


/* --- Required Asterisk --- */
.required {
    color: #e74c3c; /* A slightly softer red */
    font-weight: bold;
    margin-left: 2px;
}

/* --- Submit Button --- */
.submit-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background-color: #3498db; /* Primary blue */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.05em;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 15px; /* Space above button */
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.submit-btn:hover {
    background-color: #2980b9; /* Darker blue on hover */
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 6px 15px rgba(41, 128, 185, 0.4);
}

.submit-btn:active {
     transform: translateY(0); /* Back down on click */
     box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}


/* --- Messages --- */
.message {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95em;
    border-width: 1px;
    border-style: solid;
    display: none; /* Hide if empty */
}
.message:not(:empty) { /* Show only if it has content */
    display: block;
}

.success {
    background-color: #e8f5e9; /* Light green */
    color: #2e7d32; /* Dark green */
    border-color: #a5d6a7;
}

.error {
    background-color: #ffebee; /* Light red */
    color: #c62828; /* Dark red */
    border-color: #ef9a9a;
}
.error br { /* Style line breaks within error messages */
    margin-bottom: 5px;
    display: block;
    content: "";
}


/* --- Error Messages Below Inputs --- */
.error-message {
    color: #c62828; /* Match message error color */
    font-size: 0.85em;
    margin-top: 6px;
    display: none; /* Hidden by default */
    font-weight: 500;
}

/* Add border highlight to invalid fields (optional, works with JS) */
input.invalid, textarea.invalid, select.invalid {
    border-color: #c62828 !important; /* Ensure override */
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1) !important;
}


/* --- Responsiveness --- */
@media (max-width: 768px) {
    .container {
        padding: 30px 35px;
    }
}

@media (max-width: 576px) {
     body {
         padding: 20px 10px;
     }
    .container {
        padding: 25px 20px; /* Less padding on small screens */
    }
    h1 {
        font-size: 1.8em;
    }
    .subheading {
        font-size: 0.9em;
        margin-bottom: 25px;
    }
    .submit-btn {
        padding: 12px 15px;
        font-size: 1em;
    }
}