/* Global Styles */
:root {
--primary-color: #3498db;
--secondary-color: #2980b9;
--accent-color: #e74c3c;
--success-color: #2ecc71;
--warning-color: #f39c12;
--error-color: #e74c3c;
--text-color: #333;
--light-text: #777;
--lightest-text: #999;
--border-color: #ddd;
--light-bg: #f9f9f9;
--white: #ffffff;
--shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}



body {
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #f5f5f5;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
line-height: 1.3;
font-weight: 600;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--secondary-color);
}
.required {
color: var(--error-color);
}
/* Header */
header {
background-color: var(--primary-color);
color: var(--white);
padding: 1.5rem 0;
box-shadow: var(--shadow);
}
header h1 {
font-size: 1.8rem;
margin-bottom: 0.3rem;
}
header p {
font-size: 1rem;
opacity: 0.9;
}
/* Main Content */
main {
padding: 2rem 0;
min-height: calc(100vh - 180px);
}
/* Breadcrumb */
.breadcrumb {
margin-bottom: 1.5rem;
padding: 0.5rem 0;
font-size: 0.9rem;
color: var(--light-text);
}
.breadcrumb a {
color: var(--light-text);
margin: 0 0.2rem;
}
.breadcrumb a:hover {
color: var(--primary-color);
}
/* Form Sections */
.apply-job-section {
background-color: var(--white);
border-radius: 8px;
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 2rem;
}
.apply-job-header {
background-color: var(--primary-color);
color: var(--white);
padding: 1.5rem;
border-radius: 8px 8px 0 0;
}
.apply-job-header h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.company-name {
font-size: 1rem;
opacity: 0.9;
}
.form-section {
padding: 1.2rem;
border-bottom: 1px solid var(--border-color);
}
.form-section h3 {
font-size: 1.2rem;
margin-bottom: 1.2rem;
color: var(--secondary-color);
display: flex;
align-items: center;
}
.form-section h3 i {
margin-right: 0.5rem;
}
.form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px 1rem;
}
.form-group {
flex: 1;
padding: 0 10px;
min-width: 250px;

}
/* Form Elements */
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
width: 98%;
padding: 0.8rem;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 1rem;
transition: var(--transition);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.form-hint {
font-size: 0.8rem;
color: var(--light-text);
margin-top: 0.3rem;
}
/* Radio and Checkbox Styles */
.radio-group, .qualification-checkboxes {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.radio-label, .checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
margin-right: 1rem;
margin-bottom: 0.5rem;
}
.radio-label input, .checkbox-label input {
margin-right: 0.5rem;
}
/* Job Matching Analysis */
.job-matching {
background-color: var(--light-bg);
}
.matching-detail {
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 1rem;
background-color: var(--white);
}
.matching-item {
display: flex;
margin-bottom: 0.8rem;
border-bottom: 1px dashed var(--border-color);
padding-bottom: 0.8rem;
}
.matching-item:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.matching-label {
font-weight: 500;
min-width: 100px;
color: var(--primary-color);
}
/* Form Actions */
.form-actions {
padding: 1.5rem;
display: flex;
justify-content: center;
gap: 1rem;
}
.submit-btn, .primary-btn {
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 0.8rem 2rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
}
.submit-btn i, .primary-btn i {
margin-right: 0.5rem;
}
.submit-btn:hover, .primary-btn:hover {
background-color: var(--secondary-color);
}
.cancel-btn, .secondary-btn {
background-color: #f1f1f1;
color: var(--text-color);
border: 1px solid var(--border-color);
padding: 0.8rem 2rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
}
.cancel-btn i, .secondary-btn i {
margin-right: 0.5rem;
}
.cancel-btn:hover, .secondary-btn:hover {
background-color: #e5e5e5;
}
/* Success Message */
.success-message {
background-color: var(--white);
border-radius: 8px;
box-shadow: var(--shadow);
padding: 3rem 2rem;
text-align: center;
max-width: 600px;
margin: 3rem auto;
}
.success-icon {
font-size: 4rem;
color: var(--success-color);
margin-bottom: 1rem;
}
.success-message h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--success-color);
}
.success-message p {
margin-bottom: 2rem;
color: var(--light-text);
}
.success-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* Error Messages */
.error-messages {
background-color: #fdedeb;
border: 1px solid #f8d7da;
border-radius: 4px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.error-message {
color: var(--error-color);
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.error-message:last-child {
margin-bottom: 0;
}
.error-message i {
margin-right: 0.5rem;
}
/* Footer */
footer {
background-color: #333;
color: var(--white);
padding: 1.5rem 0;
text-align: center;
}
/* Responsive Styles */
@media (max-width: 768px) {
.form-group {
flex: 100%;
}
.form-actions {
    flex-direction: column;
}

.submit-btn, .cancel-btn,
.primary-btn, .secondary-btn {
    width: 100%;
}
}
/* Additional styles for index page */
.job-search-section {
background-color: var(--primary-color);
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: var(--shadow);
}
.search-form {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.search-input {
flex: 1;
min-width: 200px;
}
.job-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.job-card {
background-color: var(--white);
border-radius: 8px;
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.job-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.job-card-header {
background-color: var(--primary-color);
padding: 1rem;
color: var(--white);
}
.job-card-body {
padding: 1rem;
}
.job-title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.job-company {
color: var(--light-text);
margin-bottom: 1rem;
}
.job-details {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.job-detail {
display: flex;
align-items: center;
margin-right: 1rem;
margin-bottom: 0.5rem;
color: var(--light-text);
font-size: 0.9rem;
}
.job-detail i {
margin-right: 0.3rem;
color: var(--primary-color);
}
.job-actions {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
/* Job details page styles */
.job-details-section {
background-color: var(--white);
border-radius: 8px;
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 2rem;
}
.job-header {
background-color: var(--primary-color);
padding: 2rem;
color: var(--white);
}
.job-company-info {
display: flex;
align-items: center;
margin-top: 1rem;
}
.company-logo {
width: 60px;
height: 60px;
background-color: var(--white);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
.company-logo i {
font-size: 2rem;
color: var(--primary-color);
}
.job-meta {
display: flex;
flex-wrap: wrap;
padding: 1rem 2rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--light-bg);
}
.job-meta-item {
display: flex;
align-items: center;
margin-right: 2rem;
margin-bottom: 0.5rem;
}
.job-meta-item i {
color: var(--primary-color);
margin-right: 0.5rem;
}
.job-content {
padding: 2rem;
}
.job-section {
margin-bottom: 2rem;
}
.job-section:last-child {
margin-bottom: 0;
}
.job-section-title {
font-size: 1.2rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--light-bg);
color: var(--secondary-color);
}
.job-description {
line-height: 1.8;
}
.job-requirements ul, .job-benefits ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.job-requirements li, .job-benefits li {
margin-bottom: 0.5rem;
}
.job-cta {
background-color: var(--light-bg);
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.job-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.job-tag {
background-color: #e1f0fa;
color: var(--primary-color);
padding: 0.3rem 0.8rem;
border-radius: 100px;
font-size: 0.8rem;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.pagination-item {
margin: 0 0.3rem;
}
.pagination-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: var(--white);
color: var(--text-color);
transition: var(--transition);
}
.pagination-link:hover, .pagination-link.active {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}