html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    background: var(--color-grayest);
    color: var(--color-text);
    --font-size-xs: 12px;
    --font-size-sm: .87em;
    --font-size-md: 1.2em;
    --font-size-lg: 1.33em;
    --font-size-lger: 1.47em;
    --font-size-lgest: 1.67em;
    min-height: 100vh;
    background: var(--color-background);
    transition: color .5s, background-color .5s;
    line-height: 1.2;
    font-family: Urbanist, sans-serif;
    font-size: var(--font-size-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --color-text: #000;
    --color-background: #eaeaea;
    --color-highlight: #f5b501;
    --color-bg: #fff;
    --color-bg-light: #5d84b3;
    --color-bg-dark: #001f50;
    --color-gray: #858586;
    --color-grayer: #ccc;
    --color-grayest: #eaeaea;
    --color-dark: #696a74;
    --color-darker: #292725;
    --color-success: #6cb43f;
    --color-fail: #fb4b35;
    --color-white: #fff;
    --font-size-base: 15px;
    --page-body-padding: 3vw;
    --page-content-width: 1600px;
    --color-primary: #5d84b3;
    --color-primary-light-3: rgb(121.3, 187.1, 255);
    --button-hover-bg-color: var(--color-primary-light-3);
    --button-hover-border-color: var(--color-primary-light-3);
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--color-grayer);
    --border: var(--border-width) var(--border-style) var(--border-color);
    --border-radius-circle: 100%;

    --bg-deg: 165deg;
    --radio-input-bg-color: #fff;
    --radio-input-border: var(--border);
    --radio-input-border-radius: var(--border-radius-circle);
    --radio-input-height: 14px;
    --radio-input-width: 14px;
    --radio-input-border-color-hover: var(--color-primary);
    --fill-color-blank: #ffffff;
    --input-bg-color: var(--fill-color-blank);
    --border-radius-base: 4px;
    --input-border-color: var(--el-border-color);
    --transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
    --input-focus-border-color: var(--el-color-primary);
}

.container .el-breadcrumb {
    padding-top: 1em;
}

button {
    border-radius: 4px;
    cursor: pointer;
}

/* category start */

.category-list {
    width: 100%;
    position: relative;
    padding: 20px;
}

.category-list .category-list-inner {
    display: flex;
    overflow: hidden;
}

.category-list .category-list-inner.fuzzy-left:before {
    content: "";
    z-index: 1;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2em;
    background: linear-gradient(to right, #eaeaea, transparent);
}

.category-list .category-list-inner.fuzzy-right:after {
    content: "";
    z-index: 1;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 2em;
    background: linear-gradient(to left, #eaeaea, transparent);
}

.category-list .category-btn {
    display: flex;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 70.5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
}

.category-list .category-btn:hover {
    transform: scale(1.1);
}

.category-list .category-btn:hover path {
    stroke: #f5b501;
}

.category-list .category-list-left {
    left: -10px;
}

.category-list .category-list-right {
    right: -10px;
}

.category-list .category-list-inner .category-list-inner-item {
    margin: 0 10px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img {
    border: #ccc 3px solid;
    position: relative;
    display: flex;
    border-radius: 1em;
    justify-content: center;
    width: 170px;
    height: 170px;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img > .category-list-inner-item-tag {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img > .category-list-inner-item-tag > .category-list-inner-item-tag-item {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}

.category-list .category-list-inner .category-list-inner-item.active .category-list-inner-item-img {
    border: var(--color-primary) 3px solid;
}

.category-list .category-list-inner .category-list-inner-item:hover .category-list-inner-item-img {
    border: var(--color-primary) 3px solid;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img > img {
    max-height: 100%;
    max-width: 100%;
    border-radius: 1em;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img > i {
    position: absolute;
    bottom: -12px;
    color: #000;
    border: #ccc 1px solid;
    background-color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img > i > svg {
    display: none;
    width: 13px;
    height: 13px;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-img > i > svg:first-child {
    display: block;
}

.category-list .category-list-inner .category-list-inner-item.active .category-list-inner-item-img > i {
    background: var(--color-primary);
}

.category-list .category-list-inner .category-list-inner-item.active .category-list-inner-item-img > i > svg {
    display: block;
    color: #fff;
}

.category-list .category-list-inner .category-list-inner-item.active .category-list-inner-item-img > i > svg:first-child {
    display: none;
}

.category-list .category-list-inner .category-list-inner-item .category-list-inner-item-text {
    width: 120px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow-x: clip;
    white-space: nowrap;
    margin-top: 1em;
    font-weight: 400;
    font-size: .83em;
    max-height: 3.6em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.category-list .category-list-inner .category-list-inner-item:hover .category-list-inner-item-text {
    color: var(--color-bg-dark);
}

/* category end */

.main-container .main {
    display: flex;
}

.main-container .main .main-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.main-container .main .main-right {
    width: 30%;
    margin: 20px;
    border-radius: 1em;
    background: #fff;
    padding: 1em;
    align-self: flex-start;
    position: sticky;
    top: 0;
}

.step {
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 1em;
    background: #fff;
    margin-bottom: 20px;
    border: .2em solid transparent;
    position: relative;
}

.step.active {
    border-color: var(--color-bg-light);
    z-index: 2;
}

.step.error {
    border-color: var(--color-fail);
    float: unset !important;
    text-align: unset !important;
}

.step .step-title {
    margin-bottom: .5em;
    font-size: 1.47em;
    font-weight: bold;
}

.step .step-title .step-title-index {
    color: var(--color-primary);
}

.step .step-content {
    /*--img-height: 20em;*/
    --columns: 4;
    --title-line: 2;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: clamp(1em, 1.5vw, 2em);
    container: goodslist / inline-size;
}

.step .step-content .step-content-item {
    padding: 0 10px;
    cursor: pointer;
}

.step .step-content .step-content-item .step-content-item-img {
    aspect-ratio: 1/1;
    /*min-height: 10em;*/
    /*max-height: var(--img-height);*/
    margin-bottom: 1em;
    border: .1em solid var(--border-color, var(--color-grayer));
    border-radius: .5em;
    /*padding: 1em;*/
    overflow: hidden;
    position: relative;
}

.step .step-content .step-content-item .step-content-item-img > span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff5252;
    padding: 5px 10px;
    color: #fff;
    font-weight: 600;
    border-bottom-right-radius: 10px;
}

/* pc 第一个元素 图片尺寸变大 */
@media screen and (min-width: 1600px) {
    div[data-step="0"] .step-content{
        --columns: 3;
    }
}

.step .step-content .step-content-item.none-img .step-content-item-img {
    display: none;
}

.step .step-content .step-content-item.is-checked .step-content-item-img {
    border-width: .2em;
    border-color: var(--color-bg-light);
}

.step .step-content .step-content-item .step-content-item-img:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(var(--bg-deg, 165deg), transparent 50%, rgba(0, 0, 0, .1) 50%);
    pointer-events: none;
}

.step .step-content .step-content-item .step-content-item-img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.step .step-content .step-content-item .step-content-item-title {
    text-align: center;
}

.step .step-content .step-content-item.is-checked .step-content-item-title {
    color: var(--color-primary);
}

.step .step-content .step-content-item .step-content-item-title > div {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.step .step-content .step-content-item.none-img .step-content-item-title > div {
    text-align: left;
}

.step .step-content .step-content-item .step-content-item-title > div span:first-child {
    margin-right: .5em;
}

.step .step-content .step-content-item .step-content-item-title > div input[type="radio"],
.step .step-content .step-content-item .step-content-item-title > div input[type="checkbox"] {
    display: none;
}

.step .step-content .step-content-item .step-content-item-qty {
    width: 60px;
    height: 28px;
    padding: 0 8px;
    margin-left: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-base);
    background-color: var(--input-bg-color, var(--fill-color-blank));
    font-size: 13px;
    text-align: center;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -moz-appearance: textfield;
}

.step .step-content .step-content-item .step-content-item-qty::-webkit-outer-spin-button,
.step .step-content .step-content-item .step-content-item-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.step .step-content .step-content-item .step-content-item-qty:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.step .step-content .step-content-item .step-content-item-qty::placeholder {
    color: var(--color-gray);
    font-size: 12px;
}

.step .step-content .step-content-item:not(.is-checked) .step-content-item-qty {
    display: none;
}

.step .step-content .step-content-item .step-content-item-title .fares {
    font-size: .83em;
}

.step .step-content .step-content-item .step-content-item-title .fares .prominent {
    color: var(--color-fail);
}

.radio__inner {
    background-color: var(--radio-input-bg-color);
    border: var(--radio-input-border);
    border-radius: var(--radio-input-border-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: var(--radio-input-height);
    position: relative;
    width: var(--radio-input-width);
    margin-top: 1px;
}

.radio__inner:hover {
    border-color: var(--radio-input-border-color-hover);
}

.step .step-content .step-content-item.is-checked .radio__inner {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.radio__inner:after {
    background-color: var(--color-white);
    border-radius: var(--radio-input-border-radius);
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .15s ease-in;
    width: 4px;
}

.step .step-content .step-content-item.is-checked .radio__inner:after {
    transform: translate(-50%, -50%) scale(1);
}

.step .step-content.qty {
    --columns: 1;
    height: 30px;
}

.step .step-content .qty-label {
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50%;
    background-color: var(--input-bg-color, var(--fill-color-blank));
    background-image: none;
    border-radius: var(--input-border-radius, var(--border-radius-base));
    box-shadow: 0 0 0 1px var(--input-border-color, var(--border-color)) inset;
    cursor: text;
    display: inline-flex;
    flex-grow: 1;
    padding: 1px 11px;
    transform: translateZ(0);
    transition: var(--transition-box-shadow);
}

.step .step-content .qty-label.is-focus {
    box-shadow: 0 0 0 1px var(--input-focus-border-color) inset;
}


.step .step-content .qty-label > .qty-input {
    width: 100%;
    height: 100%;
}

.step .step-content .qty-label > .clean-btn {
    cursor: pointer;
}

.step .step-content .qty-label > svg {
    width: 1em;
    height: 1em;
    color: var(--el-text-color-placeholder);
}

.step .step-content .qty-label > ul.qty-list {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 9999;
    background: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
    margin-top: 10px;
    cursor: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 0;
}

.step .step-content .qty-label.is-focus > ul.qty-list {
    padding: 10px 0;
    height: 292px;
    transition: all .3s ease;
    opacity: 1;
}

.step .step-content .qty-label > ul.qty-list::-webkit-scrollbar {
    width: 6px;
    display: none;
}

.step .step-content .qty-label > ul.qty-list:hover::-webkit-scrollbar {
    display: block;
}

.step .step-content .qty-label > ul.qty-list > li {
    cursor: pointer;
    color: var(--el-text-color-regular);
    font-size: 12px;
    line-height: 34px;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0 20px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.step .step-content .qty-label > ul.qty-list > li:hover {
    background-color: var(--el-fill-color-light);
}

.step .step-content.select-size {
    --columns: 2;
    height: 30px;
}

.step .step-content .select-size-label {
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    background-color: var(--input-bg-color, var(--fill-color-blank));
    background-image: none;
    border-radius: var(--input-border-radius, var(--border-radius-base));
    box-shadow: 0 0 0 1px var(--input-border-color, var(--border-color)) inset;
    cursor: text;
    display: inline-flex;
    flex-grow: 1;
    padding: 1px 11px;
    transform: translateZ(0);
    transition: var(--transition-box-shadow);
}


.step .step-content .select-size-label.is-focus {
    box-shadow: 0 0 0 1px var(--input-focus-border-color) inset;
}


.step .step-content .select-size-label > .select-size-input {
    width: 100%;
    height: 100%;
}

.step .step-content .select-size-label > .clean-btn {
    cursor: pointer;
}

.step .step-content .select-size-label > svg {
    width: 1em;
    height: 1em;
    color: var(--el-text-color-placeholder);
}

.step .step-content .select-size-label > ul.select-size-list {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 9999;
    background: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
    margin-top: 10px;
    cursor: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 0;
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
    gap: 10px;

}

.step .step-content .select-size-label > ul.select-size-list li {
    width: 30%;
}

.step .step-content .select-size-label > ul.select-size-list li[data-size="0"] {
    width: auto;
    flex: 1;
}

.step .step-content .select-size-label.is-focus > ul.select-size-list {
    height: auto;
    max-height: 292px;
    transition: all .3s ease;
    opacity: 1;
    padding: 10px;
}

.step .step-content .select-size-label > ul.select-size-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

.step .step-content .select-size-label > ul.select-size-list:hover::-webkit-scrollbar {
    display: block;
}

.step .step-content .select-size-label > ul.select-size-list > li {
    cursor: pointer;
    background-color: var(--color-grayest);
    font-size: 12px;
    line-height: 34px;
    height: 34px;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.step .step-content .select-size-label > ul.select-size-list > li:last-child {
    grid-column: 1 / 4;
}

.step .step-content .select-size-label > ul.select-size-list > li:hover {
    background-color: var(--color-bg-light);
    color: #fff;
}

@media screen and (max-width: 1024px) {
    .step .step-content.select-size {
        --columns: 1;
        height: 79px;
        position: relative;
    }

    .step .step-content .select-size-label:first-child {
        z-index: 1;
    }
}

.step .step-content.upload-img {
    --columns: 1;
}

.step-content-upload-by-file {
    display: flex;
    justify-content: space-between;
}

.step-content-upload-by-file .upload-file {
    width: 100%;
    height: 100%;
    position: relative;
    flex: 0 0 50%;
}

.step-content-upload-by-file .upload-file > .el-radio {
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    cursor: pointer;
}

.step-content-upload-by-file .upload-file > p {
    margin-left: 1.5em;
    color: var(--color-gray);
}

#drop_zone {
    background-color: var(--el-disabled-bg-color);
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 40px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: no-drop;
    justify-content: center;
}
.file-item {
    padding: 8px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 15px;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.file-item:hover {
    background: var(--el-disabled-bg-color);
}

.file-item:hover span {
    color: var(--color-highlight);
    text-decoration: underline;
}

.file-item svg {
    width: 14px;
    height: 14px;
    color: var(--color-gray);
}

.file-item span {
    flex: 1;
    padding-left: 5px;
}

.file-item .remove-btn {
    color: #ff5252;
    cursor: pointer;
}

.step-content-upload-type.is-checked #drop_zone:hover {
    border-color: var(--color-primary);
}

.step-content-upload-type.is-checked #drop_zone {
    cursor: pointer;
    background-color: #fff;
}

#drop_zone > svg {
    width: 67px;
    height: 67px;
    color: #a8abb2;
}

#drop_zone #browseBtn {
    margin: 10px;
    background: var(--color-primary);
    color: #fff;
    border-radius: calc(var(--el-border-radius-base) - 1px);
    font-size: 12px;
    padding: 5px 11px;
    width: 10em;
}

#drop_zone #browseBtn:hover {
    background: var(--button-hover-bg-color);
}

#drop_zone .desc > span {
    color: var(--el-text-color-regular);
    font-size: 12px;
}

#drop_zone .desc > .tips {
    width: 12px;
    height: 12px;
    color: #a8abb2;
    position: relative;
    display: inline-block;
}

#drop_zone .desc > .tips:hover i {
    opacity: 1;
    pointer-events: auto;
}

#drop_zone .desc > .tips i {
    display: flex;
    position: absolute;
    width: 360px;
    height: 40px;
    bottom: 20px;
    right: -180px;
    background: #fff;
    text-align: left;
    align-items: center;
    padding: 1em;
    border-radius: 5px;
    border: 1px solid var(--el-border-color);
    color: #000;
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    cursor: auto;
}

#drop_zone .desc > .tips i:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, transparent 50%, rgb(255, 255, 255) 50%);;
    bottom: -6px;
    right: 50%;
    transform: rotate(45deg);
    border-bottom: 1px solid var(--el-border-color);
    border-right: 1px solid var(--el-border-color);
}

#drop_zone .desc > .tips i:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    bottom: -12px;
    left: 0;
}

#drop_zone.highlight {
    border-color: var(--color-primary);
    border-width: 3px;
}
.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.drop-zone-content.hidden {
    display: none !important;
}

.upload-file-list {
    display: grid;
}

.upload-file-list.hidden {
    display: none !important;
}

.file-card {
    position: relative;
    width: 100px;
    height: 100px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.file-card-preview {
    width: 100%;
    height: 140px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.file-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-preview-svg {
    width: 80px;
    height: 80px;
    color: #9ca3af;
}

.file-card-info {
    padding: 10px;
    height: 40px;
    overflow: hidden;
}

.file-card-name {
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.file-card-size {
    font-size: 11px;
    color: #9ca3af;
}

.file-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.file-card-remove svg {
    color: #ef4444;
    width: 14px;
    height: 14px;
}

.file-card:hover .file-card-remove {
    opacity: 1;
}

.file-card-remove:hover {
    background: #ef4444;
}

.file-card-remove:hover svg {
    color: #fff;
}

.add-new-card {
    width: 100px;
    height: 100px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-new-card:hover {
    border-color: var(--color-primary);
    background: #eff6ff;
}

.add-new-card:hover svg {
    color: var(--color-primary);
}

.add-new-card svg {
    color: #9ca3af;
    transition: all 0.3s ease;
}

.step-content-upload-by-file .order-comments {
    width: 100%;
    height: 100%;
    position: relative;
    flex: 0 0 46%;
}

.step-content-upload-by-file .order-comments label {
    height: 100%;
    display: block;
}

.step-content-upload-by-file .order-comments span {
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: bold;
    display: block;
}

.step-content-upload-by-file .order-comments textarea {
    width: 100%;
    resize: block;
    background-color: var(--el-disabled-bg-color);
    box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
    min-height: 33px;
    height: 241px;
}

.step-content-upload-type.is-checked .order-comments textarea {
    cursor: auto;
    background-color: #fff;
}

.step-content-upload-by-email {

}

.step-content-upload-by-email > .el-radio {
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    cursor: pointer;
}

.step-content-upload-by-email > .el-radio > .radio__input {
    position: relative;
}

.step-content-upload-by-email > p {
    margin-left: 1em;
    font-size: var(--font-size-sm);
    display: none;
}

.step-content-upload-by-email > p > a {
    text-decoration: underline;
}

.step .step-content .step-content-upload-type.is-checked .radio__inner {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.step .step-content .step-content-upload-type.is-checked .radio__inner:after {
    transform: translate(-50%, -50%) scale(1);
}

.step .step-content .step-content-upload-type.is-checked .el-switch__core {
    background-color: var(--el-switch-on-color);
    border-color: var(--el-switch-border-color, var(--el-switch-on-color));
}

.step .step-content .step-content-upload-type.is-checked .el-switch__core .el-switch__action {
    color: var(--el-switch-on-color);
    left: calc(100% - 13px);
}

.step-content-upload-by-email.is-checked > p {
    display: block;
}


.checkbox__inner {
    background-color: var(--radio-input-bg-color);
    border: var(--radio-input-border);
    border-radius: var(--border-radius-base);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: var(--radio-input-height);
    position: relative;
    width: var(--radio-input-width);
    margin-top: 1px;
}

.checkbox__inner:hover {
    border-color: var(--radio-input-border-color-hover);
}

.step .step-content .step-content-item.is-checked .checkbox__inner {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox__inner:after {
    border: 1.5px solid var(--color-white);
    border-left: 0;
    border-top: 0;
    box-sizing: content-box;
    content: "";
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease-in;
    width: 3px;
}

.step .step-content .step-content-item.is-checked .checkbox__inner:after {
    transform: rotate(45deg) scale(1);
}

.others-box .others-img {
    margin-top: 16px;
}

.others-box .others-img img {
    width: 100%;
}

.others-box .others-img .el-upload-list__item {
    display: none;
}

.others-box textarea {
    min-height: 33px;
    height: 92px;
    -webkit-appearance: none;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;
    border: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    box-sizing: border-box;
    color: var(--el-input-text-color, var(--el-text-color-regular));
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    padding: 5px 11px;
    position: relative;
    resize: vertical;
    transition: var(--el-transition-box-shadow);
    width: 100%;
}

.others-box textarea:focus {
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
    outline: none;
}

.others-box .button-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.others-box .button-box button {
    margin: 5px;
    font-size: 1em;
}

.step.turnover_time {
    --color-bg-turnover_time: #e6fbf2;
    --first-turnover_time-color: #e6fbf2;
    --second-turnover_time-color: #e6f3fd;
    --third-turnover_time-color: #fde9e9;
    --fourth-turnover_time-color: #fff7ea;
    --fifth-turnover_time-color: #fff7ea;
    --last-turnover_time-color: #fff1e9;
}
.step.turnover_time .step-content {
    --columns: 3;
    gap: clamp(1em, 0vw, 2em);
    margin-top: 10px;
}

.step.turnover_time .step-content .step-content-item {
    position: relative;
    padding: 20px 0 0 0;
    background-color: var(--color-bg-turnover_time);
    border-radius: .5em;
    overflow: hidden;
    --radio-input-bg-color: var(--color-bg-turnover_time);
}
.step.turnover_time .step-content .step-content-item:not(:first-child):not(:last-child) {
    padding: 0;
    display: flex;
    align-items: center;
}

.step.turnover_time .step-content .step-content-item .step-content-item-title > div {
    padding: 1em;
    color: #000;
    align-items: flex-start;
}

.step.turnover_time .step-content .step-content-item:first-child::after,
.step.turnover_time .step-content .step-content-item:last-child::after {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5em;
    border-radius: 0 0 .5em 0;
    color: #fff;
    padding: 0 .8em;
}

.step.turnover_time .step-content .step-content-item:last-child::after {
    content: "Standard";
    background: #f56956;
}

.step.turnover_time .step-content .step-content-item:first-child::after{
    content: "Express";
    background: #3cbe68;
}

.step.turnover_time .step-content .step-content-item:nth-child(2) {
    --color-bg-turnover_time: var(--second-turnover_time-color);
    --color-primary: var(--second-turnover_time-color);
}
.step.turnover_time .step-content .step-content-item:nth-child(3) {
    --color-bg-turnover_time: var(--third-turnover_time-color);
    --color-primary: var(--third-turnover_time-color);
}
.step.turnover_time .step-content .step-content-item:nth-child(4) {
    --color-bg-turnover_time: var(--fourth-turnover_time-color);
    --color-primary: var(--fourth-turnover_time-color);
}
.step.turnover_time .step-content .step-content-item:nth-child(5) {
    --color-bg-turnover_time: var(--fifth-turnover_time-color);
    --color-primary: var(--fifth-turnover_time-color);
}
.step.turnover_time .step-content .step-content-item:last-child {
    --color-bg-turnover_time: var(--last-turnover_time-color);
    --color-primary: var(--last-turnover_time-color);
}
.step.turnover_time .step-content .step-content-item:first-child {
    --color-bg-turnover_time: var(--first-turnover_time-color);
    --color-primary: var(--first-turnover_time-color);
}

.step.turnover_time .step-content .step-content-item .step-content-item-title > div span {
    display: block;
    text-align: left;
}

.step.turnover_time .step-content-item .step-content-item-title-text {
    font-weight: bold;
}

.step.turnover_time .step-content-item .step-content-item-title-desc {
    margin-top: 1em;
    font-size: .9em;
}

.step.turnover_time .step-content .step-content-item.is-checked .radio__inner {
    border-color: #333;
}

.step.turnover_time .step-content .step-content-item.is-checked .radio__inner:after {
    background-color: #333;
}

.step .step-next {
    margin-top: 10px;
}

.step .step-next .step-next-btn {
    padding: 8px 1em;
    background: var(--color-primary);
    color: #fff;
    display: none;
}

.step.active .step-next .step-next-btn {
    display: block;
}

.step .step-next .step-next-btn:hover {
    background: var(--button-hover-bg-color);
}

.main-container .main .main-right .main-right-top {
    height: 225px;
}

.main-container .main .main-right .main-right-top img {
    max-height: 100%;
    object-fit: scale-down;
    width: 100%;
}
.main-right{
    position: relative;
}

.discount{
    position: absolute; 
    z-index: 10;
    top: 0;
    right: 0;
    font-size: 20px;
    background-color: #11a66a;
    color: #fff;
    font-weight: bold;
    padding: 10px 20px;
}

.main-right .order-summary .order-summary-title {
    margin-top: 1em;
}

.order-amounts-list,
.order-comments-list {
    position: relative;
    padding-bottom: 1em;
    transition: all .5s;
    overflow: hidden;
}

.order-comments-list.view-less {
    max-height: 11em;
}

.order-amounts-list:after,
.order-comments-list:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2em;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

.order-amounts-list .order-amounts-list-item,
.order-comments-list .order-comments-list-item {
    display: flex;
    justify-content: space-between;
    margin-top: .5em;
    gap: .5em;
}

.order-amounts-list .order-amounts-list-item h5,
.order-comments-list .order-comments-list-item h5 {
    font-weight: 400;
}

.order-amounts-list .order-amounts-list-item.active h5,
.order-comments-list .order-comments-list-item.active h5 {
    font-weight: 700;
}

.order-amounts-list-item .order-amounts-list-item-info,
.order-comments-list-item .order-comments-list-item-info {
    display: flex;
    cursor: pointer;
    text-align: right;
    color: var(--color-gray);
}

.order-amounts-list-item.active .order-amounts-list-item-info,
.order-comments-list-item.active .order-comments-list-item-info {
    color: initial;
    font-weight: 700;
}

.order-amounts-list-item .order-amounts-list-item-info .edit-step > svg,
.order-comments-list-item .order-comments-list-item-info .edit-step > svg {
    width: 1em;
    height: 1em;
    vertical-align: baseline;
}

.order-summary .view-less-and-more button {
    width: 100%;
    padding: .5em 0;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary);
    font-size: 1em;
}

.order-summary .view-less-and-more button svg {
    width: 1em;
    height: 1em;
    transform: rotate(-180deg);
    transition: transform .3s ease-in-out;
}

.order-summary .view-less-and-more button.view-less svg {
    transform: rotate(0deg);
}

.order-amounts-list-item .order-amounts-list-item-info .price {
    color: initial;
}

.order-summary .footer {
    padding: .5em 0;
    text-align: center;
}

.change-currency-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

.change-currency-box .select-currency {
    align-items: center;
    background-color: var(--el-fill-color-blank);
    border-radius: var(--el-border-radius-base);
    box-shadow: 0 0 0 1px var(--el-border-color) inset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    position: relative;
    text-align: left;
    transform: translateZ(0);
    transition: var(--el-transition-duration);
    font-size: 12px;
    gap: 4px;
    line-height: 20px;
    min-height: 24px;
    padding: 2px 8px;
}

.change-currency-box .select-currency svg {
    height: 1em;
    width: 1em;
    margin-left: 2em;
}

.footer .total-box {
    margin-top: 1em;
}

.footer .total-box .total-price {
    color: var(--color-fail);
}

.footer .total-box .price-symbol {
    color: var(--color-fail);
}

.footer-options {
    display: flex;
    align-items: center;
    gap: .5em;
    margin-top: 1em;
    justify-content: space-between;
    text-align: center;
}

.footer-options > div {
    flex: 1;
}

.footer-options svg {
    width: 1em;
    height: 1em;
    color: var(--color-highlight);
}

.footer-options .footer-btn {
    margin-top: .5em;
    width: 100%;
    position: relative;
    background-color: var(--color-primary);
    border: .1em solid var(--border-color);
    border-radius: .2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-options .footer-btn:hover {
    background-color: var(--color-bg-dark);
}

.footer-options .footer-btn button {
    padding: .5em;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    color: #fff;
    fill: #fff;
    font-size: 1em;
}

@media screen and (max-width: 768px) {
    .footer-options .footer-btn button{
        width:auto;
        gap:0px;
    }
}

.footer-options .footer-btn button svg {
    width: .8em;
    height: .8em;
}

/*按钮"?"问号提示框*/
.tooltip-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 30px;
}
.tooltip-icon .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tooltip-icon .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.footer-right-btn .footer-btn {
    background-color: #000;
}

.btn.highlight {
    animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) both;
}

@keyframes shake-bottom {
    0%, to {
        transform: rotate(0);
        transform-origin: 50% 100%
    }

    10% {
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        transform: rotate(4deg)
    }

    80% {
        transform: rotate(-2deg)
    }

    90% {
        transform: rotate(2deg)
    }
}

.btn {
    padding: 0;
}

/**突出显示步骤*/
.step.prominent {
    z-index: 100 !important;
    position: relative;
}

.step.prominent::before {
    content: '\f067';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    font-family: "izchic";
    transform: rotate(45deg);
    text-align: center;
}

.base-dialog {
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 99;
    display: none;
}

.base-dialog .base-dialog-model-overlay {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

.el-dialog {
    --el-dialog-width: 99%;
}

.others-box textarea {
    height: 302px;
}
/* 升级购买数量提示弹窗 */
/* 弹窗背景遮罩fixed */
.upgrade-modal-overlay {
    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;opacity: 0;  /* 初始透明 */
    transition: opacity 0.2s ease;
}
.upgrade-modal-overlay.show {
    opacity: 1;  /* 显示时不透明 */
    display: flex !important;
}

.upgrade-modal-overlay.show .upgrade-modal-content {
    transform: scale(1);
    animation: bounce 0.5s;
}

@keyframes bounce {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* 弹窗主体 */
.upgrade-modal-content {
    background-color: #fff;
    width: 600px;
    padding: 40px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* 关闭按钮 X */
.upgrade-modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #333;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.upgrade-modal-close-btn:hover {
    color: #fff;
    background-color: #5D84B3;
    scale: 1.5;
    transition: all 0.3s ease-in-out;
}

/* 标题部分 */
.upgrade-modal-title {
    color: #444;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 600;
}

.upgrade-modal-subtitle {
    color: #888;
    font-size: 16px;
    margin-bottom: 30px;
}

/* 核心对比区域 */
.upgrade-modal-comparison-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

/* 选项卡片 */
.upgrade-modal-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    position: relative;
}

.upgrade-modal-option-label {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 500;
}
.upgrade-modal-label-grey { color: #666; }
.upgrade-modal-label-orange { color: #5D84B3; font-weight: bold; }

/* 白色边框盒子 */
.upgrade-modal-box-container {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    width: 100%;
    padding: 15px 0;
    position: relative;
    z-index: 5;
}

/* 数量显示 */
.upgrade-modal-quantity {
    font-size: 16px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e0e0e0;
    margin-bottom: 12px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* 价格信息 */
.upgrade-modal-price-total {
    color: #444;
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 500;
}

.upgrade-modal-price-each {
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #555;
}

.upgrade-modal-strike-price {
    text-decoration: line-through;
    color: #5D84B3;
    margin-left: 3px;
}

/* 中间箭头 */
.upgrade-modal-arrow-icon {
    color: #5D84B3;
    font-size: 24px;
    margin-top: 20px; /* 视觉微调以对齐盒子 */
}

/* 单选按钮模拟 */
.upgrade-modal-radio-wrapper {
    display: flex;
    justify-content: center;
    border: 1px solid #e9ecf0;
    border-radius: 0 0 16px 16px;
    border-top: none;
    transition: all .3s;
    width: 28px;
    z-index: 10;
    height: 15px;
    background-color: #fff;
    margin-top: -1px;
}

.upgrade-modal-radio-outer {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
    background-color: #fff;
}

.upgrade-modal-radio-unchecked {
    border: 2px solid #ddd;
}
.upgrade-modal-radio-unchecked .upgrade-modal-radio-inner {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    border-radius: 50%;
}

.upgrade-modal-radio-checked {
    border: 2px solid #5D84B3; /* Orange border */
}
.upgrade-modal-radio-checked .upgrade-modal-radio-inner {
    width: 8px;
    height: 8px;
    background-color: #5D84B3; /* Orange dot */
    border-radius: 50%;
}

/* 底部按钮区域 */
.upgrade-modal-action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
}

.upgrade-modal-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.upgrade-modal-btn-no {
    background-color: white;
    border: 1px solid #5D84B3;
    color: #333;
}
.upgrade-modal-btn-no:hover {
    background-color: #f0f8ff;
}

.upgrade-modal-btn-yes {
    background-color: #5D84B3; /* Burnt Orange */
    border: 1px solid #5D84B3;
    color: white;
}
.upgrade-modal-btn-yes:hover {
    background-color: #001F50;
}

/* 简单的 SVG 箭头图标样式 */
.upgrade-modal-icon-svg {
    width: 24px;
    height: 24px;
    fill: #5D84B3;
}

/* 合并步骤样式 - merged step styles */
.merged-step {
    position: relative;
}

.merged-step .merged-nav-wrapper {
    margin-bottom: 1em;
    overflow-x: auto;
}

.merged-step .merged-nav {
    display: flex;
    gap: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--color-grayest);
}

.merged-step .merged-nav-item {
    padding: 0.6em 1.2em;
    cursor: pointer;
    border-radius: 0.5em 0.5em 0 0;
    background: var(--color-grayest);
    color: var(--color-gray);
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.merged-step .merged-nav-item:hover {
    background: var(--color-bg-light);
    color: #fff;
}

.merged-step .merged-nav-item.active {
    background: var(--color-primary);
    color: #fff;
    font-weight: bold;
}

.merged-step .merged-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
}

.merged-step .merged-nav-text {
    font-size: 0.9em;
}

.merged-step .merged-content-wrapper {
    position: relative;
    min-height: 100px;
}

.merged-step .merged-content {
    display: none;
}

.merged-step .merged-content.active {
    display: block;
}

.merged-step .merged-content .step-content {
    margin-top: 0;
}

/* 隐藏原始步骤 */
.step.merged-hidden-step {
    display: none !important;
}

/* 合并步骤完成状态指示 */
.merged-step .merged-nav-item[data-is-done="true"]::before {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: var(--color-success);
}

.merged-step .merged-nav-item.active[data-is-done="true"]::before {
    color: #fff;
}

/* 合并步骤错误状态 */
.merged-step.error .merged-nav-item {
    border-color: var(--color-fail);
}

.merged-step.error .merged-nav-item.active {
    background: var(--color-fail);
}