/* 全局样式 */
.container {
    display: flex;
    min-height: 100vh;
    max-width: none;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 头像上传样式 */
.avatar-uploader {
    line-height: 0;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 6px;
}

/* 上传提示样式 */
.upload-tip {
    font-size: 14px;
    color: #999;
    line-height: 1.4;
    margin-top: calc(10 / 16 * 1em)
}

/* 侧边栏样式 */
.sidebar {
    width: 29%;
    min-width: calc(560 / 16 * 1em);
    padding: 6% 4% 0% 8%;
    background-color: #fff;
    border-right: 1px solid #e9ecef;
    position: sticky;
    top: 100px;
}

.sidebar h1 {
    font-size: calc(38 / 16 * 1em);
    font-weight: normal;
    margin-bottom: 40px;
    color: #000;
	text-align: center;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.step-item:hover .step-title {
    color: #fe7110;
}

.step-item::after {
    content: '';
    position: absolute;
    left: calc(23 / 16 * 1em);
    top: 100%;
    width: 4px;
    height: calc(30%);
    border-radius: 4px;
    background-color: #dee2e6;
    z-index: 1;
}

.step-item:last-child::after {
    display: none;
}

.step-number {
    width: calc(42 / 16 * 1em);
    height: calc(42 / 16 * 1em);
    border-radius: 50%;
    color: #999;
    border: 5px solid #edeef2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    font-size: calc(18 / 16 * 1em);
    font-weight: bold;
    line-height: calc(18 / 16 * 1em);
    flex: 0 0 calc(42 / 16 * 1em);
}

.step-title {
    font-size: calc(28 / 16 * 1em);
    color: #cccccc;
    max-width: 70vw;
    text-align: left;
}

.step-item.active .step-number {
    border-color: #fe7110;
    color: #fe7110;
}

.step-item.active .step-title {
    color: #333;
}

.step-item.completed .step-number {
    background-color: #164691;
    border-color: #164691;
    color: transparent;
}

.step-item.completed .step-number::after {
    content: '';
    font-weight: bold;
    background-image: url('../images/icon-done.svg');
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(14 / 16 * 1em);
    height: calc(10 / 16 * 1em);
}

.step-item.completed .step-title {
    color: #495057;
}

.step-item.active::after {
    background-color: #fe7110;
}

.step-item.completed::after {
    background-color: #164691;
}

/* 主内容区域 */
.main-content {
    flex: 1;
    padding: 3% 8% 5% 3%;
    background: #f2f6fc;
}

.form-page {
    padding: 7%;
    border-radius: calc(20 / 16 * 1em);
    background: #fff;
    max-width: none;
    width: 100%;
}

.form-page h2 {
    font-size: calc(22 / 16 * 1em);
    margin-bottom: 20px;
    color: #000;
    font-weight: 600;
}

.form-page h2 span {
    font-size: calc(12 / 16 * 1em);
    margin-bottom: 20px;
    color: #666;
    font-weight: normal;
}

/* 表单组样式 */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: calc(18 / 16 * 1em);
    color: #495057;
}

.form-group label.required::after {
    content: ' *';
    color: #dc3545;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: calc(16 / 16 * 1em);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* 电话输入框样式 */
.phone-input {
    display: flex;
    gap: 10px;
}

.phone-input select {
    width: 15%;
    min-width: 80px;
}

.phone-input input {
    flex: 1;
}

/* 经验项样式 */
.experience-item {
    margin-bottom: 15px;
    padding: calc(40/ 16 * 1em);
    background: #f8fafe;
    position: relative;
    border-radius: calc(10 / 16 * 1em);
}

/* 删除按钮样式 */
.delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    color: #ff4d4f;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    background-color: #fff2f0;
}

/* Element UI 样式调整 */
.el-form-item {
    margin-bottom: 10px;
}

/* 调整必填项星号位置到文字后 */
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
    content: '';
    margin-right: 0;
}

.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after {
    content: ' *';
    color: #f56c6c;
    margin-left: 4px;
}

.el-input__inner,
.el-select__input,
.el-cascader__input,
.el-date-editor input {
    border-radius: 4px;
    height: calc(54 / 16 * 1em);
}

.el-input,
.el-select,
.el-cascader,
.el-date-editor {
    font-size: calc(16 / 16 * 1em);
    max-width: calc(400 / 16 * 1em);
}

.el-form-item__label {
    font-size: calc(18 / 16 * 1em);
    color: #333;
    padding: 0 !important;
}

.el-date-editor {
    width: 100% !important;
}

.el-cascader {
    width: 100%;
}

.el-button--next,
.el-button--prev {
    background-color: #fff !important;
    border-color: #154691 !important;
    color: #154691;
    font-size: calc(16 / 16 * 1em);
    padding: calc(18 / 16 * 1em) calc(24 / 16 * 1em);
    border-radius: calc(10 / 16 * 1em);
    border-width: 2px;
    position: relative;
}

.el-button--next::after,
.el-button--prev::after {
    content: '';
    background-image: url('../images/arr-right.svg');
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: calc(12 / 16 * 1em);
    height: calc(12 / 16 * 1em);
}

.el-button--next {
    padding-right: calc(70 / 16 * 1em);
}

.el-button--prev {
    padding-left: calc(70 / 16 * 1em);
}

.el-button--default:hover {
    color: #fe7110;
}

.el-button--prev::after {
    content: '';
    background-image: url('../images/arr-left.svg');
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: calc(12 / 16 * 1em);
    height: calc(12 / 16 * 1em);
}

.el-button--prev:hover::after {
    background-image: url('../images/arr-left-on.svg');
}

.el-button--next:hover::after {
    background-image: url('../images/arr-right-on.svg');    
}

.el-button--prev {
    color: #666;
    border-color: #eaeaea !important;
}

.el-button--primary:focus {
    background-color: #fff !important;
    border-color: #154691 !important;
    color: #154691;
}

.el-button--primary:hover {
    background-color: #ff9500 !important;
    border-color: #ff9500 !important;
}

/* 按钮样式 */
.add-btn {
    background-color: transparent;
    color: #ff7d00;
    background: #fff7f1;
    width: 100%;
    line-height: calc(54 / 16 * 1em);
    padding: 0;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.add-btn:hover {
    background-color: #fff7f1;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 40px;
}

.prev-btn,
.next-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prev-btn {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.prev-btn:hover {
    background-color: #e9ecef;
}

.next-btn {
    background-color: #1890ff;
    color: white;
}

.next-btn:hover {
    background-color: #40a9ff;
}

.max-width-100 {
    max-width: 100%;
}

.width-100 {
    width: 100%;
}

.el-form-item__error,
.el-form-item.is-error .el-input__inner,
.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-select-dropdown__item.selected {
    color: #fe7110 !important;
    border-color: #fe7110 !important;
}

.el-button--text:focus,
.el-button--text:hover {
    color: #fe7110 !important;
}

.el-button--text:focus,
.el-button--text:hover {
    background: #fff7f1;
}

.el-date-table td.current:not(.disabled) span {
    background-color: #fe7110;
    color: #fff;
}

.el-date-table td.available:hover,
.el-picker-panel__icon-btn:hover,
.el-date-table td.today span {
    color: #fe7110;
}

/* 擅长领域复选框样式 */
.checkbox-row {
    display: flex;
    gap: 5px 15px;
    margin-bottom: 5px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox-row .el-checkbox {
    font-size: 16px;
    color: #333;
    margin-right: 0;
    padding: 0;
    flex: 0 0 calc(30% - 15px);
    display: flex;
}

.el-checkbox__label {
    font-size: calc(18 / 16 * 1em);
}

.checkbox-row .el-checkbox__input {
    margin-right: 8px;
}

.checkbox-row .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #fe7110;
    border-color: #fe7110;
}

.checkbox-row .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #fe7110;
}

/* 调整其他领域输入框的宽度 */
.form-page .el-form-item:nth-last-child(2) .el-input {
    max-width: 100%;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333;
}

.el-button--small {
    background-color: #82a2d1;
    color: #fff;
    font-size: calc(18 / 16 * 1em);
    font-weight: normal !important;
    border-color: #82a2d1;
    padding: calc(14 / 16 * 1em) calc(40 / 16 * 1em);
}

.declaration h3 {
    font-size: calc(26 / 16 * 1em);
    color: #164691;
}

.declaration p {
    font-size: calc(18 / 16 * 1em);
    line-height: calc(28 / 16 * 1em);
}

.sign-data {
    line-height: 1;
    font-size: calc(18 / 16 * 1em);
}

.margin-top-30 {
    margin-top: calc(30 / 16 * 1em);
}

.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #fe7110;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #fe7110;
    border-color: #fe7110;
}

/* 调整复选框大小，放大1/3 */
.el-checkbox__inner {
    width: calc(14px * 1.3);
    height: calc(14px * 1.3);
    border-width: 1px;
}

/* 调整复选框勾选标记的大小和位置 */
.el-checkbox__inner::after {
    width: calc(4px * 1.3);
    height: calc(8px * 1.3);
    left: calc(4px * 1.3);
    top: calc(1px * 1.3);
}

/* 调整复选框输入容器的边距 */
.el-checkbox__input {
    margin-right: 10px;
}

.el-message--error,
.el-message--success,
.el-icon-warning {
    font-size: calc(6 / 16 * 1em);
}

.el-message-box__message {
    font-size: calc(22 / 16 * 1em);
    padding: calc(20 / 16 * 1em);
}

/* 确保确认对话框按钮在同一行显示 */
.el-message-box__btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.el-message-box__btns .el-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.declaration-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

.declaration-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.declaration-content h2 {
    color: #164691;
    font-size: 24px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
}

.declaration-content ol {
    padding-left: 20px;
    margin-bottom: 30px;
}

.declaration-content li {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

.declaration-actions {
    text-align: center;
}

.confirm-btn {
    background-color: #fe7110;
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 10px;
}

.confirm-btn:hover {
    background-color: #e65c00;
}

.confirm-btn.back-btn {
    background-color: #888;
    color: #fff;
}

.confirm-btn.back-btn:hover {
    background-color: #666;
}

.el-checkbox__label {
    text-wrap: auto;
    line-height: 40px;
}

.page2 .el-checkbox__label {
    line-height: 20px;
}

.el-checkbox__input {
    vertical-align: top;
    margin-top: 10px;
}

.tips-save {
    margin-top: calc(20 / 16 * 1em);
}

#submission-confirm-modal p {
    font-size:  calc(20 / 16 * 1em);
    text-align: center;
    margin: calc(40 / 16 * 1em) 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: auto;
        padding: 8% 0 0 5%;
        border-right: none;
        position: static;
        top: auto;
    }

    .sidebar h1 {
        font-size: calc(32 / 16 * 1em);
        margin-bottom: 20px;
    }

    .steps {
        flex-direction: row;
        /* 移除flex-wrap: wrap;，改为横向滚动 */
        /* flex-wrap: wrap; */
        justify-content: flex-start;
        gap: 20px;
        /* 添加横向滚动 */
        overflow-x: auto;
        /* 隐藏滚动条但保持功能 */
        -ms-overflow-style: none;
        scrollbar-width: none;
        /* 允许滚动捕捉 */
        scroll-snap-type: x mandatory;
    }

    /* 隐藏滚动条 */
    .steps::-webkit-scrollbar {
        display: none;
    }

    .step-item {
        /* 移除min-width，改为固定宽度 */
        /* min-width: calc(50% - 5px); */
        flex: 0 0 auto;
        width: calc(100% / 3 - 15px);
        min-width: 120px;
        padding: 10px;
        text-align: center;
        /* 添加滚动捕捉点 */
        scroll-snap-align: start;
    }

    .step-item::after {
        left: 100%;
        top: 52%;
        width: calc(25 / 16 * 1em);
        height: 4px;
    }

    .main-content {
        width: 100%;
        padding: 0;
        background: #f2f6fc;
    }

    .form-page {
        padding: 4% 8% 15% 8%;
    }

    .declaration-content {
        padding: 20px;
    }

    .checkbox-row .el-checkbox {
        flex: 0 0 calc(50% - 15px);
    }

    .el-form-item__label {
        line-height: calc(26 / 16 * 1em);
        margin: calc(18 / 16 * 1em) 0;
    }

    .el-input,
    .el-select,
    .el-cascader,
    .el-date-editor {
        max-width: 100%;
        width: 100%;
    }

    .el-checkbox__label {
        width: 90%;
        text-wrap: auto;
    }

    .experience-item {
        padding: calc(20/ 16 * 1em)
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .phone-input select {
        width: 100%;
        margin-bottom: 10px;
    }

    .step-item {
        width: auto;
    }

    .sidebar h1 {
        display: none;
    }

    .confirm-btn {
        padding: 12px 20px;
    }
}