/**
 * 进度条与步骤导航样式
 */

/* 导航区域 */
.ep-navigation {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    border-top: 1px solid var(--ep-border);
    background: var(--ep-surface);
    z-index: 2;
    box-sizing: border-box;
}

/* 隐藏各步骤导航栏里的 Back 按钮（回退统一由左上角箭头负责） */
.ep-navigation .ep-back-btn {
    display: none;
}

/* 进度条 */
.steps-progress {
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
    padding: 8px 0 0;
}

.steps-progress::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 15px;
    right: 15px;
    height: 2px;
    background-color: var(--ep-border);
    z-index: 1;
}

.steps-progress::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 15px;
    height: 2px;
    background-color: var(--ep-brand);
    z-index: 2;
    transition: width 0.3s ease;
}

/* 进度步骤点 */
.step-point {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--ep-surface);
    border: 2px solid var(--ep-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--ep-muted);
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

.step-label {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ep-muted);
    transition: all 0.3s ease;
}

.step-point.active {
    background-color: var(--ep-brand);
    border-color: var(--ep-brand);
    color: #ffffff;
    box-shadow: var(--ep-ring);
}

.step-point.active .step-label {
    color: var(--ep-brand-dark);
    font-weight: 600;
}

.step-point.completed {
    background-color: var(--ep-brand);
    border-color: var(--ep-brand);
    color: transparent; /* 隐藏数字，用下方 ✓ 代替 */
}

.step-point.completed::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.step-point.completed .step-label {
    color: var(--ep-brand-dark);
}

/* 跳过的步骤（如非处方流程中的 Enter Prescription）：灰色圆点 + 横线 */
.step-point.skipped {
    background-color: var(--ep-surface);
    border-color: var(--ep-border-strong);
    color: transparent; /* 隐藏数字，用下方 — 代替 */
}

.step-point.skipped::after {
    content: "—";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* 各步骤进度线宽度 */
.ep-step[id="step1-choose-prescription-type"] .steps-progress::after {
    width: 0;
}

.ep-step[id="single-vision-prescription"] .steps-progress::after,
.ep-step[id="progressive-prescription"] .steps-progress::after,
.ep-step[id="prescription-reading-prescription"] .steps-progress::after,
.ep-step[id="readers-prescription"] .steps-progress::after {
    width: calc(50% - 15px);
}

/* 偏好步骤：进度实线连到星星圆点 */
.ep-step[id="step2-5-preferences-survey"] .steps-progress::after {
    width: calc(75% - 15px);
}

.ep-step[id="step3-select-your-lenses"] .steps-progress::after {
    width: calc(100% - 30px);
}

/* 偏好选择子步骤：星星圆点（样式与步骤圆点一致，仅数字换成星星） */
.step-subpoint {
    position: absolute;
    top: 8px;
    left: 75%;
    margin-left: -16px; /* 用负边距居中，避免 transform 位移异常 */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--ep-brand);
    border: 2px solid var(--ep-brand);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: var(--ep-ring);
}

.step-subpoint svg {
    display: block;
}


/* ASEP Optical Boutique progress bar V2 — presentation only */
.steps-progress {
    max-width: 590px;
    padding-top: 8px;
    padding-bottom: 6px;
}
.steps-progress::before,
.steps-progress::after {
    top: 21px;
    height: 2px;
    border-radius: 99px;
}
.steps-progress::before {
    left: 14px;
    right: 14px;
    background-color: #e4eaeb;
}
.steps-progress::after {
    left: 14px;
    background-color: #91c5c5;
}
.step-point {
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border-width: 1.5px;
    border-color: #d7e1e3;
    background: #ffffff;
    color: #9aaab1;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
}
.step-label {
    top: 37px;
    color: #97a5ad;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.step-point.active {
    background-color: #f0f8f7;
    border: 2px solid #5b9fa8;
    color: #267a89;
    box-shadow: 0 0 0 4px rgba(107,177,181,.15);
}
.step-point.active .step-label {
    color: #477784;
    font-weight: 600;
}
.step-point.completed {
    background-color: #5a9ca6;
    border-color: #5a9ca6;
    box-shadow: none;
}
.step-point.completed::after {
    font-size: 13px;
    font-weight: 700;
}
.step-point.completed .step-label {
    color: #608b96;
    font-weight: 500;
}
.step-point.skipped {
    border-color: #d7e1e3;
    background-color: #f7f9f9;
    box-shadow: none;
}
.step-point.skipped::after {
    font-size: 12px;
    color: #a4b0b7;
}
.step-subpoint {
    top: 8px;
    margin-left: -14px;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    background-color: #f0f8f7;
    border: 2px solid #5b9fa8;
    color: #267a89;
    box-shadow: 0 0 0 4px rgba(107,177,181,.15);
}
.step-subpoint svg {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
}
.ep-step[id="single-vision-prescription"] .steps-progress::after,
.ep-step[id="progressive-prescription"] .steps-progress::after,
.ep-step[id="prescription-reading-prescription"] .steps-progress::after,
.ep-step[id="readers-prescription"] .steps-progress::after {
    width: calc(50% - 14px);
}
.ep-step[id="step2-5-preferences-survey"] .steps-progress::after {
    width: calc(75% - 14px);
}
.ep-step[id="step3-select-your-lenses"] .steps-progress::after {
    width: calc(100% - 28px);
}
@media (max-width: 480px) {
    .steps-progress { max-width: 100%; }
    .step-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .steps-progress::after,
    .step-point,
    .step-label { transition: none; }
}